作为一个业务前端，完成业务需求的同时，还要处理各种线上问题，加班辛苦忙碌了一年，还要被老板说“思考是不够的”、“没有业务 sence”，出去面试，被问项目，也说不出什么有亮点或者有挑战的东西，想做点牛逼的东西，也没有发现什么有价值的方向，好不容易找到一些方向，还要被老板一顿质问，业务价值是什么？ROI 怎样？最终可能就只是做了一点性能优化工作，抽离了一些可复用的组件……不禁让人感叹，业务难、前端难、做业务的前端更难！

项目级 monorepo 策略最佳实践

淘系前端团队的一篇博客，介绍了他们在 monorepo 策略上的最佳实践。

输入网址即可扫描出站点用到的 npm 包

如题，输入 url 即可。

互联网的历史：浏览器大战

我们都知道浏览器大战，但是大战中发生了哪些细节？

图片来源：Ken Cedeno/AP file photo

(盖茨好帅)

现代 CSS 颜色指南

你选择的调色板会影响你的网站使用多少能源？2021 年使用颜色有哪些最佳实践？你知道这些 RGB、HSL、HWB、LAB 和 LCH 颜色方法吗？

Deno 2020 年大事记

Deno 作为 2020 年最佳开源，收到了很多正向的反响。一起回顾下 Deno 在过去的一年中经历了哪些更新。

新技术学习不完全指北：以 Rust 为例

工业聚的一篇学习理念分享，干货满满。话说你开始学习 Rust 了吗？

好文推荐

技术资讯

State of JS 2021 调查结果出炉

最常用的功能是空值合并操作符 ??
采用最多的技术 esbuild
最高满意度的技术 Vite
最感兴趣的技术 Vite
总体最受欢迎的项目是 Elm

官方结论摘要

与 2016 年第一次调查相比，使用 TypeScript 的人数占比从 21% 提升到了 69%。前端框架 React 和 Vue 占据主导地位。Vite 获得了 98% 的超高满意度。许多新项目(Deno、Rome、Astro、Remix)获得了风险投资公司的支持，这或许为脆弱的开源融资环境提供了一个可行的替代方案。

随着 JavaScript 进入第三时代，有抱负的开源着和企业家的机会不断涌现，让我们一起期待未来。

JavaScript 的第三个时代

一些建议

尤大认为 State of JS 调查的指标存在一些缺陷。

计算公式：使用 X 并将再次使用它的用户数 / 所有使用过 X 的用户数

这个公式比较有利于新的项目，但是缺失了一个考量因素：项目寿命。一些老项目会积累更多“用过但不会再用”的用户，比如 browserify、Gulp，但当时的它们是不二之选，也是前端发展历史上的重要里程碑。

人们通过排名图只是看到了模糊的趋势，而失去了细微的差别。

还有人提出，当一个项目过时或者有新版本发布时，总会有一部分人更喜欢版本 1，这样分数也会降低。

还有人戏称应该叫“炒作评级”而不是满意度评级。

关于 State of JS，你怎么看？

2021 年 Rust 官方调查结果

结果摘要

调查来自全球共 9354 名受访者，性能和安全是大家选择使用 Rust 的主要原因。只有 4% 的人表示他们根本没有使用过 Rust。

2021 年对 Rust 来说是最重要的年份之一，随着 Rust 基金会的成立，社区愈发繁荣。

未来的挑战：

IDE 体验
语言会过于复杂
社区发展

Chrome 和 Firefox 版本将突破 100

在很久以前 Chrome 版本号第一次达到 10 时，从一位数变为两位数，User-Agent 解析库发生了很多问题。文章整理了发布时间线、 Chrome 和 Firefox 为减轻影响而采取的策略以及建议采取的措施。

GitHub 上可以画流程图了

GitHub 将绘图插件 Mermaid 集成进了 Markdown，终于可以画流程图啦。

Mermaid 使用手册

Vue 全新文档介绍

暗黑模式
响应式适配移动端
Options API/Composition API 切换
交互式教程
新的示例
改进的 API 搜索
改进的 TS 指南
更新了 Reactivity in Depth、Rendering Mechanism 等章节
...

技术资料

深入理解 Vite 核心原理

如果你想了解 Vite 源码级别的一些核心原理，这篇文章是个不错的入门资料。包含：

Vite 核心流程
热更新原理
预编译原理

深入了解 React Native 的新架构

2022 年，React Native 将开源它们的新架构。

Bridge 将被 JSI 取代
渲染系统 Fabric 将取代当前的 UI Manager
Turbo Modules
CodeGen

创建一个类似 Zustand 的状态管理库(视频)

Daishi Kato 手把手教你写一个状态管理库。

Zustand 是 2021 年 Star 增长最快的 React 状态管理库，有着优雅的 API 设计和函数式理念，而且大部分特性都属于 React 的通用特性，源码实现很精妙，看起来很爽。之前黄子毅也在社区中发表过相关的源码解读文章，非常推荐学习。

Zustand 源码解读

新一代 JS 日期/时间 API Temporal 教程

从 Java 抄来的 Date 缺点太多了：不支持开发人员通过 API 来切换时区信息、解析器行为不可靠、计算 API 缺失、不支持非公历。。。

TC39 找到了 momoent.js 库的作者 Maggie，由她来负责 Temporal 的核心设计，弥补了 Date 的缺陷。

面试结束后反问面试官的话

最近这个项目在 GitHub 上很火，整理了一些可以反问面试官的话。目前有如下部分：

职责
技术
团队
问未来同事
公司
社会问题
冲突
商业
远程工作
办公室布局
终极问题

可以在面试前看一看，在面试的最后给自己加加分的同时也多获取一些信息。

好文推荐

【第十八期】2021-12-25

大家圣诞节快乐，上周写完了年终总结，大家的年终总结写好了么？写完了可以在评论区盖楼哈。

【无限进步】我的 2021 年终总结

本期周刊是 2021 年的最后一期啦，2021 年 8 月 28 日是周刊的第一期，截止到今天已经记录了 18 期周刊。

关于创办周刊的原因在我的 2021 年终总结里有说到，这里再补充下：

在信息洪流时代，我们每天都被灌输到大量信息，这些信息包括了很多噪音
其实我们完全可以主动积极的选择获取我们想要的信息，搭建个人的信息流
这样对信息进行整理、沉淀总结为知识，才能达到最大的效能

最近会有一些抽奖活动，大家可以关注下～

技术资讯

Create React App v5.0 发布

更新了依赖项(Webpack、ESLint、PostCSS)，新增对 Tailwind 的支持。

quick-lint-js v1.0 发布

它觉得 ESLint 太慢了，quick 可以立即在你的编辑器中查找到 JS 错误，开箱即用。摆脱 ESLint 繁琐的配置，比 ESLint 有更好的错误报告。

vitest-dev

在 500 多次提交后 vitest-dev 源代码开源了，仍在开发中，可以在新项目中尝试一下。

WindiCSS v3.4.0 发布

对齐了 TailWind v3 中的一些功能。

structuredClone

structuredClone 是 HTML 标准中提出的 JS 深拷贝 API，不过目前的兼容性比较感人，并且一些限制仍(静默丢弃原型链、函数，Error 不可克隆)存在。

TDesign

腾讯开源企业级设计体系 TDesign，卷起来。

NAPI-RS v2.0.0 发布

在 v1 代码库的基础上完全重写，大部分 API 向下兼容。

State of CSS 2021

调查报告出炉啦。

技术资料

2021 年最佳 JavaScript 周刊

JavaScript Weekly 回顾了 2021 年最受欢迎的一些文章、每个月的前端圈儿大事记、最热门的代码库和工具以及视频。

Frontend Focus 的年度 10 佳文章合集

其中有一些也入选了之前的食堂周刊。

UI 测试手册

Storybook 团队编写，共 9 章，内容包括很多大规模前端团队的最佳实践。从设置工具、编写测试和自动化工作流程都有完善的介绍。

ESLint 规则配置

Gajus Kuizinas 创建了一个有 1000 多条 ESLint 规则的配置，40% 可以自动修复，目标是减少代码版本控制中的噪音并促进最新 ES 功能的使用。

D2 16th PPT 上传啦

买过票的同学们还可以在直播间里看回放。

TS 备忘录

Dan Abramov 在 React 团队工作时学到的 100 件事

Dan Abramov 把自己在 React 团队中工作时的思考记录在了这个帖子下。

2021 Roundup of Web Research

CSS-TRICKS 的 2021 Web 调查摘要。内容也很多，屯起来慢慢看。

Node.js 源码剖析

目前见过的最硬核的 Node.js 源码分析了。

死磕 MySQL

一个坚持输出 MySQL 高级系列文章的专栏。

好文推荐

文末抽奖送书

Svelte 性能更好？体积更小?

本期摘要

StackBlitz 加入字节码联盟
React Native 新架构的更新事宜
Safari 15.4 中的新 WebKit 功能
百万周下载量 node-ipc 包作者供应链投毒
ESLint 的 2022 年支出计划
Web 页面的体积膨胀了 10 年，我们学到了什么？
为双屏和可折叠设备构建 Web 布局
Tao of Node
关于 Framer Motion 布局的一切
antfu 分享了他的 VS Code 配置和扩展
如何使用 Three.js 和 React 渲染你自己的 3D 模型
52 个设计原则 / 认知偏差知识手册

大家好，我是童欧巴。欢迎来到本期的前端食堂技术周刊，我们先来看下上周的技术资讯。

技术资讯

StackBlitz 加入字节码联盟

StackBlitz 是一个由 WebAssembly 提供支持的 Web IDE，它们在去年官宣 WebContainers 时名声大噪。

字节码联盟是一群公司和个人，聚集在一起形成的行业合作伙伴关系。目标是以默认安全的方式设计 WebAssembly 的生态系统，让我们可以更安全的运行不受信任的代码，杜绝诸如供应链投毒的恶意攻击。

因为有着共同的愿景，加入字节码联盟后，相信他们可以更快的将 WebContainers 引入所有设备、语言、平台和运行时。

React Native 新架构的更新事宜

React Native 成立了专门的新架构工作组，并提供了迁移指南和使用模板，并且协助第三方库进行迁移。默认使用新的 JavaScript 引擎：Hermes。

Safari 15.4 中的新 WebKit 功能

此版本是 2022 年的第一个大版本，新增了 70 多个新功能。包括 HTML、CSS、Web API、JavaScript、Web App、Media、Security 等等。

百万周下载量 node-ipc 包作者供应链投毒

又一次的供应链投毒，又一次的开源信任危机，JavaScript 的生态太脆弱了。整个事件的过程和反思可以通过上面的链接进行了解。

ESLint 的 2022 年支出计划

正如 ESLint 团队在文章中所说，在接受捐赠的三年以来，他们一直在探索如何更加合理的使用资金，来改善 ESLint 项目和生态系统，并给出了一些指导原则。

需要花钱的地方有：

每小时向团队成员付费；
每月 1000 美金的贡献者池；
支持和捐赠上下游依赖；
“大项目”：比如他们正在精心设计的新网站。

下面我们来看技术资料。

技术资料

Web 页面的体积膨胀了 10 年，我们学到了什么？

网页也有“变胖”的困扰，而且这种不断增加的大小和复杂性并没有被更快的设备和网络或者我们勤奋的浏览器完全缓解。

如图所示，与十年前相比，现在的 PC 网页体积中位数是十年前的 3 倍，移动页面的中位数几乎是十年前的 7 倍。尽管网页一直在“变胖”，我们也需要给用户提供良好的用户体验。本文给出了一些工程上的最佳实践。

为双屏和可折叠设备构建 Web 布局

为了能使布局适应双屏和可折叠设备，Web 平台提供了很多与现有概念集成的新功能，如：媒体查询、CSS env() 环境变量、 Web API 等等。这样可以让开发人员和设计人员更专注于如何用多个屏幕提升用户体验，而不是花更多的学习成本去学习额外的东西。

Tao of Node

Alex Kondov 在发布了广受欢迎的 React 之道后，又分享了他在开发 Node.js 时的最佳实践，内容包括架构、编码、工具和测试等方面。

关于 Framer Motion 布局的一切

使用 Framer Motion 进行布局动画的交互式文章，文中有大量示例。

antfu 分享了他的 VS Code 配置和扩展

看看有没有你不知道的好东西。

好文推荐

下面来看一下好文推荐，本周推荐的好文是：

如何使用 Three.js 和 React 渲染你自己的 3D 模型

在本文中将介绍如何使用 react-three-fiber 在 React 项目中渲染和配置在 Blender 或 Maya 等 3D 软件中创建的 3D 资产。

再分享一个很酷的网站，创意设计师 Jesse Zhou 的个人网站

看完之后我已经心动了，这太有“食堂”的感觉了，以后有时间一定要给食堂做一个。

下面两篇资料总结了一些设计原则，可以提升我们的产品设计能力。(是我请 UI 小姐姐喝奶茶换来的)

52 个设计原则

小红书产品设计中心制作，每个原则都包括来源与推导过程、解读与应用案例、还有扩展阅读。

认知偏差知识手册

字节的飞书设计团队出品，总结了 67 个认知偏差和示例。

好了，以上就是本期的食堂周刊。

你的前端食堂，吃好每一顿饭。我们下期见。

本期摘要

Vite 3.0
Deno v1.24
图片优化工具
Figma 背后的 CSS
B 站事故复盘
第 91 次 TC39 会议
软件工程师精选论文列表

大家好，我是童欧巴。欢迎来到本期的前端食堂技术周刊，我们先来看下上周的技术资讯。

技术资讯

1.Vite 3.0

Vite 现在和可口可乐一样流行，一天不喝可乐就不快乐。

距离 Vite 2 发布已经过去了 16 个月，Vite 3 终于来了。Vite 团队决定至少每年发布一个 major 版本，以配合 Node.js's EOL。

全新的 VitePress 文档
默认端口号从 3000 变更为 5173
内置更加完善的 WebSocket 连接策略
冷启动性能提升，预构建不再阻塞 Dev Server 启动，使用延迟处理，将预构建行为推迟到页面加载的最后阶段进行，从根本上防止二次预构建
重写 import.meta.glob，支持更加灵活的语法
SSR 构建产物默认使用 ESM
修改 WebAssembly 的导入 API，避免与未来标准发生冲突
实验性：细粒度 base 配置、esbuild 预构建用于生产环境、HMR Partial Accept
减小 Bundle Size：Terser、node-forge 变为可选项
不再支持 Node 12，至少需要 14.18+
Bug Fixing，issue 从 700 减少到 400
VitePress 构建参与 CI 流程、单元测试和 E2E 测试迁移到 Vitest、pnpm 迁移到 v7、官方所有插件使用 unbuild 构建，并且 plugin-vue-jsx 和 plugin-legacy 迁移到 TS
使用 vite-ecosystem-ci 保证生态系统 CI 运作
Rollup 团队将于几个月后发布新的 major 版本，Vite 将持续跟进

2.Deno v1.24

卷起来吧！

受到了 Bun 的“肉弹”攻击后，Deno 的新版本 FFI 性能提升了约 200 倍。谁说 Rust 不如 Zig？

下面我们来看技术资料。

技术资料

1.图片优化工具

作者整理了 40 余种图片优化工具，我服了。以后谁再管你要图片压缩网站，请甩给他这个链接。

3.B 站事故复盘

去年的 B 站事故至今记忆犹新，当时很晚还和同事语音，猜测和讨论原因。时隔 1 年，终于等到了 B 站的官方复盘，估计谁也想不到是因为一个 “0”。

说回这篇复盘本身，是非常用心的。内容包含各种细节，给 B 站的程序员点波赞！

4.第 91 次 TC39 会议

2022.07.19-2022.07.21，第 91 次 TC39 会议在旧金山举行。摘出来几条 ECMAScript 规范在第 3、4 阶段的进展：

第 4 阶段

Hashbang Grammar

在 JavaScirpt 文件头使用 #！ 用于 shell 识别解释器。

第 3 阶段

Duplicate named capturing groups

允许正则表达式捕获组命名重复。

其他信息

好文推荐

下面来看一下好文推荐，本周推荐的好文是：

1.UI 框架中的一致性成本

2.编程语言是如何实现泛型的

好了，以上就是本期的食堂周刊，观众老爷们如果觉得还不错，一键三连是对食堂老板最大的支持。

你的前端食堂，吃好每一顿饭，我们下期见。

技术资讯

集成 Node.js Corepack，Corepack 是包管理器的管理器(万物皆可套娃)，想了解更多请移步这个链接
试验性 ESM 支持
支持 pnpm 的软链安装
等等

Next.js v12 发布

Rust 编译器：HMR 速度提高 3 倍，构建速度提高 5 倍
ESM 支持，添加 URL 导入(试验性)
引入中间件、支持 React18(试验性)
内置的图片优化 API 支持 AVIF，比 Webp 小 20%
等等

看看最新发布的 Gatsby 4 中有哪些新功能？

延迟静态生成 (DSG)
服务器端渲染 (SSR)
并行查询
重建部署基础设施
等等

Chrome 96 DevTools 的新功能

新的 CSS 概览面板
模拟 Chrome 的自动深色主题
支持在 Styles 窗格中将 CSS 复制为 JavaScript
等等

技术资料

好文推荐

技术资讯

技术资料

前端框架也玩起了内卷，分别请来了外援，Vue 请来了 esbuild(Go)，Next.js 请来了 SWC (Rust)，直接将 SWC 作者收入门下。

你准备学 Rust 吗？这里有一系列 Rust 学习资料奉上：

总能听到 Rust 语言难学的声音，其实是因为它足够优秀，融合了多门语言的特性和多种编程范式，所以学习曲线比较陡峭，学习 Rust 的过程一定会帮助你突破自己的短板。

食堂老板也正在学习 Rust，有任何问题欢迎后台交流～

好文推荐

本期摘要

2022 年 3 月 TC39 会议
Announcing Rome Formatter
Node 内置 Test Runner
Firefox UI UX 回忆录
JavaScript 运算符备忘录
Vue 3 Tips & Tricks
JavaScript 测试最佳实践
HTML & CSS 备忘录
1-Line Layouts

大家好，我是童欧巴。欢迎来到本期的前端食堂技术周刊，我们先来看下上周的技术资讯。

技术资讯

2022 年 3 月 TC39 会议

文章回顾了 3 月份的 TC39 会议，包含了近期 TC39 不同阶段提案的推进情况。

阶段 1: Type Annotations 、Function once

阶段 2: Decorator metadata

阶段 3: RegExp set notation + properties of strings、Change array by copy、Decorators (sans metadata)

Announcing Rome Formatter

Rome 在去年开始使用 Rust 完全重写，他们最近推出了 Rome Formatter，是 JS 和 TS 的新的格式化工具。对标 Prettier，会尽可能的兼容 Prettier，它的速度极快，要比 Prettier 快 9-12 倍。

Node 内置 Test Runner

测试是软件开发流程中的重要组成部分，Node 团队决定通过添加内置测试运行器，来以轻量级的方式启用大多数测试框架所提供的功能子集，用户可以快速入门，不过该功能还处于早期开发阶段，让我们一起期待吧。

Firefox UI UX 回忆录

Firefox 团队更新了他们从 2002 年至今的 UI UX 回忆录。

下面我们来看技术资料。

技术资料

JavaScript 运算符备忘录

一个交互式的 JavaScript 运算符备忘录，你可以输入或者点击一个运算符来获取关于它的详细信息。

Vue 3 Tips & Tricks

总结了很多 Vue 3 的小技巧和最佳实践。

JavaScript 测试最佳实践

包含从基础到进阶的 50 多个关于测试的最佳实践，覆盖前端、后端、CI 等方面，十分全面。

HTML & CSS 备忘录

图片形式的备忘录，内容包含 HTML 和 CSS。

1-Line Layouts

10 个现代 CSS 布局的单行代码。

好文推荐

下面来看一下好文推荐，本周推荐的好文是：

好了，以上就是本期的食堂周刊，观众老爷们如果觉得还不错，一键三连是对食堂老板最大的支持。

你的前端食堂，吃好每一顿饭。我们下期见。

【第四十二期】2022-06-27

美味值：🌟🌟🌟🌟🌟

口味：青橘伏特加

食堂技术周刊仓库地址：https://github.com/Geekhyt/weekly

PC 端在仓库里看体验更好，顺手赏个 Star 是对食堂最大的支持。这个周末的事情比较多，本期周刊的视频版先鸽一期。

本期摘要

Vue 2.7 Beta
TypeScript 4.8 Beta
React 开源奖
JavaScript 开源奖
Umi 4 发布
5 月登陆浏览器的 API
Component party 9 大框架的语法和特性概览
Ecma International 批准的新标准
Git Command Explorer
Jiffy Reader

大家好，我是童欧巴。欢迎来到本期的前端食堂技术周刊，我们先来看下上周的技术资讯。

技术资讯

Vue 2.7 Beta

为了让还在使用 Vue2 的用户享受到 Vue3 的好处，Vue3 中的一些重要特性将会向后移植到 Vue2.7：

Composition API
SFC <script setup>
SFC CSS v-bind

向后移植的功能不仅是上面几点，还包括其他的 API 和内容(API 暴露注意事项、与 Vue3 的行为差异、Beta 采用指南等)，可以前往链接查看。

2.7 稳定版计划于 2022 年 6 月底左右发布，截止本期周刊撰稿时，Vue 团队宣布 2.7 稳定版将于下周发布。一旦 2.7 稳定版发布，Vue2 将不再接收新功能，并将进入持续 18 个月的 LTS(长期支持)，这意味着 Vue2 将在 2023 年底结束生命周期。

TypeScript 4.8 Beta

主要更新如下：

--strictNullChecks 下带来一系列正确性和一致性的改进
改进 infer 在模板字符串类型中的类型推断
--build、--watch、--incremental 性能优化
比较对象和数组字面量时的错误
改进 Binding Patterns 推断
修复文件监听
Find-All-References 性能改进

Breaking Changes

lib.d.ts 更新
不受约束的泛型不再可分配给 {}
无法在 JavaScript 文件中导入/导出类型
Binding Patterns 不再改变函数调用中的推断结果的类型

React 开源奖

GitNation 基金会于 2022 年 6 月 17 日颁布了 React 的 Open Source Awards。

年度最佳创新突破奖

jotai：原始且灵活的 React 状态管理库。
Remix：一个将 90 年代 Web 简单的心智模型与现代平台功能相结合的元框架，实现首屈一指的 UX 和 DX。
refine：一个基于 React 的框架，用于快速构建内部工具。
wagmi：以太坊的 React Hooks。
Preview.js：在 IDE 中实时预览 React、Solid 和 Vue 组件。

最激动人心的技术应用

Remotion：用 React 制作视频。
React Flow：一个高度可定制的 React 组件，用于构建交互式图形和基于节点的编辑器。
react-native-tvos：Fork 自 React Native，额外支持 Apple TV 和 Android TV。
React Unity WebGL：为 Unity WebGL 构建嵌入 React 应用程序提供了一种现代解决方案，同时为 Unity 和 React 之间的双向通信和交互提供了高级 API。
Jest Preview：在浏览器中预览 Jest 测试，并帮助你轻松的调试。

年度趣味项目

Cuberun：使用 react-three-fiber 构建的合成波无限跑酷游戏。
Tetromino：使用 React、Redux 和 Tailwind 构建的俄罗斯方块游戏。
Corona Game：使用 react-three-fiber 构建的 3d 游戏。
Heart Switch：React 的心形切换开关组件。
LBA2 Remake：用 TypeScript、Three.js 和 React 实现 A Little Big Adventure 2。

对社区最有影响力的贡献项目

ReactJSGirls：React 爱好者聚会，女性登台分享她们的学习和经验。
React Newsletter：React 周刊。
React Native Radio：播客，一起探索 React Native。
Poimandres：一个开源开发者团队，主要维护和支持 React Spring、React Three Fiber 及其生态系统。
Reactiflux：一个由 170,000 多名 React 开发人员组成的聊天社区。

生产力助推器

Mantine：一个功能齐全的 React 组件库。
React Use：React Hooks 工具包。
Superplate：具有超能力的前端模版库，提供 30 多个插件，支持 React 和 Next.js。
React Uploady：基于 React Hook 的上传组件。
React Virtual：在 JS/TS、React、Solid、Vue 和 Svelte 中实现虚拟化滚动元素的无头 UI 。

JavaScript 开源奖

GitNation 基金会于 2022 年 6 月 16 日颁布了 JavaScript Open Source Award。

年度最佳创新突破奖

Hoppscotch：开源的 API 开发生态系统。
Solid：用于构建用户界面的声明式、高效且灵活的 JavaScript 库。
Web3.js：以太坊 JavaScript API。

最激动人心的技术应用

vanilla-extract：TypeScript 中的零运行时样式表，CSS Modules in TypeScript。
tRPC：端到端的类型安全 API。
zx：用 JavaScript 编写 Shell 脚本。
Q.js：浏览器中的量子计算。
Tauri：使用 Web 前端构建更小、更快、更安全的桌面应用程序，底层引擎和后端绑定由 Rust 编写。
Partytown：将资源密集型第三方脚本从主线程转移到 Web Worker 中。

年度趣味项目

Big Heads：自动生成头像。
Ossart：将你的 GitHub activity 打印为艺术品。
Gaze Detection：在 JavaScript 中使用机器学习来检测眼球运动并构建注视控制体验。
Yoha：一个实用的手部跟踪引擎。

对社区最有影响力的贡献项目

pnpm：快速、节省磁盘空间的包管理器，精益求精。
Three.js journey：学习 Three.js 的最佳方式。
Devs for Ukraine：Devs For Ukraine 是一个免费的在线工程师会议，旨在筹集资金并为乌克兰提供支持。
Medusa：开源 Shopify 替代品。
Bytes.dev：最佳 JavaScript Newsletter。

生产力助推器

Amplication：自动生成使用 TypeScript 和 Node.js 构建的后端应用程序，以及使用 React 构建的客户端。
Zod：带有静态类型推断的 TypeScript 优先模式验证。
Hardhat：Hardhat 是一个用于编译、部署、测试和调试以太坊软件的开发环境。
Omni：提高生产力的多合一浏览器插件，提供浏览器选项卡、书签、历史记录等管理功能。

Umi 4 发布

新功能

多构建引擎：支持 Vite 和 Webpack。
默认快：MFSU V3 + Webpack 5 缓存(解决 Dev 时编译慢的问题)、Webpack 5 物理缓存 + CD 平台(解决 Build 时编译慢的问题)、esbuild 作为 js 和 css 的压缩器、jest 的 transformer 等等的环节提速。
Umi Max：内网 Bigfish 的外部版本。
React Router 6，路由层实现更优雅，不过有一些 Break Change。
支持 Vue，由社区同学提供，只需装载一个 preset 即可切换到 Vue。
默认最快的 CSR 请求，避免 React 项目经典的 Render-Then-Fetch 的加载瀑布流问题。
白盒稳定的 Lint，内置精挑细选的 lint 规则。
SSR，重写 SSR 功能，此功能目前处于 beta 阶段。
API 路由，打包成不同平台支持的 Serverless Function 产物。
微生成器，小型脚手架、控制功能的开启与关闭、库版本切换。

DX 改进

自动 https(实现基于 mkcert)。
浏览器里的构建进度条。
Terminal 中的日志。
umi.js 产物调试。
项目级插件：plugin.ts(可以在项目级做很多事，比如 deadCode 检测等)。
Umi UI 卷土重来(排查问题时，提供 Umi 框架的内部状态作为开发辅助)。

5 月登陆浏览器的 API

一些在 2022 年 5 月登陆稳定版和测试版浏览器的新功能。

稳定的浏览器

Chrome 102 和 Safari 15.5 包含 inert 属性，一个全局 HTML 属性，使开发人员能够从 tab 顺序和可访问性树中移除一个元素，带来更好的可访问性。
Chrome 102 包含 hidden=until-found，可以在页面中查找并滚动到折叠区域内的文本。
Chrome 102 发布了 Navigation API，经典的 Histroy API 看起来很简单，但是它的定义不是很明确，在极端情况和不同浏览器的实现方式方面存在大量问题，Navigation API 是全新的实现。
Firefox 101 支持 Constructable Stylesheets，使 Shadow DOM 创建和分发可重用样式变得更加容易。
Firefox 101 包含 prefers-contrast，该媒体功能用来检测用户是否请求以较低或者较高的对比度呈现页面内容。

Beta 浏览器

Chrome 103 包含 Local Font Access API，允许访问用户本地安装的字体。
Firefox 102 包含 update 媒体功能，用于查询输出设备是否可以在内容渲染后修改其外观。

下面我们来看技术资料。

技术资料

Component party

九大前端框架语法和特性快速概览。

Ecma International 批准的新标准

第 123 届 Ecma 大会批准了 ECMAScript 2022 语言规范，该规范是 ECMAScript 语言规范的第十三版，包括如下特性：

此外，还包括 ECMAScript 2022 国际化 API 规范、C# 语言规范、数据迁移方法。

Git Command Explorer

交互式 Git 命令探索器，可以离线访问。根据你的输入，帮你找到正确的 Git 命令，作者还实现了一个数组方法探索器。

Jiffy Reader

最近很火的一个黑科技 Bionic Reading，通过将英文单词的前几个字母加粗，从而提升你的阅读速度(高达 10 倍)，这个浏览器插件可以将文本渲染成 Bionic Reading，你觉得阅读速度提升了吗？

其他信息

好文推荐

下面来看一下好文推荐，本周推荐的好文是：

好了，以上就是本期的食堂周刊，观众老爷们如果觉得还不错，一键三连是对食堂老板最大的支持。

你的前端食堂，吃好每一顿饭，我们下期见。

技术资讯

Vite 生态系统

Vite 席卷了整个前端圈儿，这是一篇来自 Vite 核心成员 patak 讲述 Vite 生态系统的文章，包含探索并合作推动前端工具 DX 的项目、团队以及个人

Prettier v2.5.0 发布

增加了对 TypeScript v4.5 的新语法以及 MDX v2 语法的支持。

尤大开了一个推特中文小号

插眼吃瓜。

App Store 年度精选，放榜了。

全球年度精选 APP 和游戏名单出炉了。

年度游戏：英雄联盟手游

(除了 elo 机制，啥啥都好，不过马上取消了。强烈推荐观看《双城之战》，艺术品级别，拳头送的大礼物用心了，这波属实感动了)

年度 APP： Toca Life：World、LumaFusion、Craft、CARROT Weather

DevTools 的新增功能（Chrome 97）

新的 Recorder 面板，可以录制、重放用户操作。
移动端调试的新增了一些设备
Elements 面板中 Edit as HTML 支持语法高亮和提示
调试体验优化，列号包含在控制台的错误中
(实验)跨设备同步 DevTools 设置

技术资料

freeCodeCamp 新推出的免费 Rust 课程

freeCodeCamp 终于有 Rust 的课程啦

CSS 备忘录

点击内含属性可直达 MDN，还有HTML、JavaScript、jQuery、NodeJS、Linux 等等

百万长连接需要怎样的架构支撑？

每个 JavaScript 开发者都应该了解的 Unicode

理清 Unicode 基本概念，了解 JavaScript 如何与 Unicode 协作，常见陷阱误区，用 ECMAScript 新特性解决问题。

42 位演讲嘉宾、36 场演讲、SEE Conf 2022 来啦！

抢先了解主会场内容

新宇宙、新挑战、新设计
如何在公益领域实践体验设计
Umi 4 设计思路

ECMAScript 提案同步网站

跟踪了各个阶段的提案，界面也很好看。

如何使用 Rust 编写 React 组件

将 Rust 编译为 WASM 并运行在 React 中是怎样的一种体验？

JS 引擎性能为什么这么强

内联缓存
隐藏类

330 道 React 面试题

一次刷过瘾

20+ JavaScript 设计模式

设计模式备忘录，每种设计模式都有代码示例。

好文推荐

打个广告

先祝大家元旦快乐～

2021 年的最后一天，我创建了前端食堂贵宾厅知识星球，2022 年会将更多的输出写到这个星球里。

周刊还是保持内容简洁，把所有内容都放进周刊里也不现实，星球里除了周刊以外还会发布日刊、短文，会有更多的信息分享给你。

面对每天大量的信息输入，如果没有搭建个人信息流系统，很容易被垃圾信息喂养，还会迷失方向，徒增焦虑。在贵宾厅里你不光能接收到优质信息，如果你愿意，你也可以搭建出自己的信息流，远离低质量的信息，贵宾厅会成为你优质的信息渠道之一。

星球价格 198 元/年，72h 内不满意无条件退款，扫描下方二维码即可订阅。

付费模式一方面是初步筛选，一方面也能逼我更加认真的进行输出(顺便赚点零花钱)，妥妥的双赢思维。

贵宾厅菜单（不断更新）：

🗣优质信息渠道，前端最新一手资讯
☕️工作日随时更新日刊，每周更新周刊
💼面试技巧、简历及晋升经验
💻学习、工作与成长指南
👌解答你的任何疑问，认真回答每一个问题
⭐️邀请前端大佬定期分享

技术资讯

React Conf 2021 年度回顾

2021 年的 React Conf 是第一次在线上举办，被翻译成 8 种不同的语言。共计 19 场演讲，均可在线观看回放，文章对 Conf 也做了回顾，以及对相关人员的感谢。

2022 年的 CSS

盘点了 2022 年有望登陆浏览器的新特性。

pnpm 的 2021 年

pnpm 的 2021 年总结，最大的新用户是 Bytedance，还有许多开源项目开始使用 pnpm，如 Vue、Vite、Autoprefixer、PostCSS、Browserslist。Yarn、npm 也在向 pnpm 学习。

State of Storybook 2021

已经有数千个团队都在使用 Storybook，这篇文章回顾了 2021 年的演变以及对下一版本作出的改进。2021 年，Storybook 主要对性能、测试和集成方面做了大量更新。

@idux

组件库太卷了，@Idux 是深信服科技的前端团队打造的开源组件库，基于 Vue 3.x 和 TS。

Dan 的 2021 总结

Dan 把他关于各个方面的思考整理到了这条推特中，每一条里面都有惊喜。

技术资料

React 之道 - 软件设计、架构和最佳实践

并不存在适用于所有业务场景的最佳实践，但是我们可以遵循一些通用规则来更高效的编码。文章详细阐述了组件心智模型、状态管理、仓库结构、性能优化、样式等方面。

Fortnite VS Code Theme

让你编程的时候看起来像在打游戏的一款 VS Code 主题，我试用了一下，发现我还是更喜欢用 Dracula。

现代 JS：过去 10 年你错过的一切

这份备忘录可以让你了解现在浏览器中已经广泛支持的特性。

rust-for-js-peeps

了解 JS，想尝试 Rust，但不知道从哪里开始？这个给你！

Turborepo

如果你想用 JS/TS 构建一个 monorepo 项目，不妨试试 Turborepo，光是它们的文档就可以学到很多东西。

新一代构建工具大 PK

对比了包括 esbuild、Snowpack、Vite、wmr 等构建工具。

好文推荐

前端插件机制剖析及业界案例分析

解析了 babel、webpack 的插件机制原理，并总结出插件机制的好处：提高扩展性、配合 monorepo，减少因功能改变而引起的项目迭代，可以单独发包。

左耳朵耗子：我做系统架构的一些原则

原则一：关注于真正的收益而不是技术本身
原则二：以应用服务和 API 为视角，而不是以资源和技术为视角
原则三：选择最主流和成熟的技术
原则四：完备性会比性能更重要
原则五：制定并遵循服从标准、规范和最佳实践
原则六：重视架构扩展性和可运维性
原则七：对控制逻辑进行全面收口
原则八：不要迁就老旧系统的技术债务
原则九：不要依赖自己的经验，要依赖于数据和学习
原则十：千万要小心 X – Y 问题，要追问原始需求
原则十一：激进胜于保守，创新与实用并不冲突

本期摘要

Node.js v18
Nuxt 3 RC1
Parcel v2.5.0
HTTPie 是怎样失去了 54k GitHub 星星
计算机程序的构造和解释 — JavaScript 版
Mitosis 入门快速指南
为什么要使用 Redux Toolkit
JavaScript 测试教程
Linux 命令行世界的生存指南

大家好，我是童欧巴。欢迎来到本期的前端食堂技术周刊，我们先来看下上周的技术资讯。

技术资讯

Node.js v18 发布

Node.js 的每个 LTS 的版本代号都是以化学元素命名，按照首字母 A-Z 的顺序，这次的版本代号为 Hydrogen，翻译成中文是 "氢"。不过此版本目前还不是 LTS 版本，请勿在生产环境使用。

关于更全面的特性解读以及未来展望可以看天猪的这篇文章：Node.js 18 新特性解读

Nuxt 3 RC1 版本发布

距离 Nuxt 3 Beta 版本发布已经过去了 6 个月，现在终于迎来了 Nuxt 3 的第一个 RC 候选版本，代号为Mount Hope。你可以通过官方发布的这篇博客来了解下面这些强大的功能：

Vue3 和 TypeScript
同时支持 Vite 和 Webpack，默认使用 Vite
Nitro & UnJS
文件系统自动化(Pages、Plugins、Components、Composables、Public、Server)
Modules(Nuxt Kit)

Parcel v2.5.0

Parcel 发布 v2.5.0，主要包括以下特性：

添加 Web Extension manifest v3 支持
支持 __dirname、__filename
对 process.env 添加 in 表达式的支持
升级 SWC 和 Parcel CSS

HTTPie 是怎样失去了 54k GitHub 星星

HTTPie 作为 GitHub 上最受欢迎的 80 个开源项目之一，拥有超过 54k 的 Star，然而由于作者的一次误操作，将仓库设为私有后，所有的 Star 都消失了，向 GitHub 官方求助后，也并没有得到帮助。

原因是 GitHub 有一个无情的设定，一旦将仓库设为私有，将会永久删除所有的 Watch 和 Star。

说回产品本身，GitHub 确实该好好优化一下用户体验了。当用户想要删除某样东西会引起较大影响时，弹窗应该准确描述其后果的严重性。使用软删除，人难免会犯错。就算是硬删除，也可以延迟执行。

下面我们来看技术资料。

技术资料

计算机程序的构造和解释 — JavaScript 版

这本由麻省理工学院出版的著作终于有了 JavaScript 语言版本，可以帮助你建立对计算机程序的心智模型。

Mitosis 入门快速指南

Mitosis 是一个编译时框架，允许你在 JSX 中编写组件并编译为原生 JavaScript、Angular、React、Vue 等。

“一次编写组件，到处运行”，意味着我们可以用它来创造一个跨多个框架的 UI 组件库，以更高的抽象级别编写组件，实现在不同框架之间的轻松迁移。

不仅如此，还可以将 Figma 或者 Sketch 中的设计稿转换成你想要的框架组件代码，使用 Builder.io 进行拖拽来构建 UI 并编排代码。

为什么要使用 Redux Toolkit

Redux 官方发布的这篇博客讲解了 Redux Toolkit 的 Why 和 How，并强烈推荐使用。

一句话总结：Redux Toolkit 是使用 Redux 的最佳实践。

JavaScript 测试教程

教程包含 10 个部分，包括单元测试、快照测试、集成测试、端到端测试(E2E) 等等。

Jest 基础知识
使用 Enzyme 测试 React 组件
组件 Props 测试、mount 函数渲染、快照测试
Mock 模拟 API 调用、模拟 React 组件交互
使用 react-hooks-testing-library 测试 Hooks
使用 Cypress 进行端到端测试(E2E)
对比 React Testing Library 和 Enzyme
使用 Jest 和 React Testing Library 的 Mock 进阶

Linux 命令行世界的生存指南

这本电子书用讲故事的方式介绍了如何生存在 Linux 命令行的世界，着眼于更宏大的视角，试着向你传授如何与命令行界面友好的相处。包括命令行基本语言、配置文件及环境、常见任务和主要工具以及 Shell 编程。

好文推荐

下面来看一下好文推荐，本周推荐的好文是：

好了，以上就是本期的食堂周刊，观众老爷们如果觉得还不错，一键三连是对食堂老板最大的支持。

你的前端食堂，吃好每一顿饭。我们下期见。

技术资讯

Vitest

antfu 和 patak 开发了一个由 Vite 提供支持的快速单元测试框架，特性：

Vite 的配置、转换器、解析器、插件
智能和实时观看模式，用于测试的 HMR
Vue、React 等组件测试
开箱即用的 TS/JSX
ESM
快照测试
。。

如果你对单元测试还不是很了解，可以通过这篇文章先入个门如何做前端单元测试

Web Performance Calendar

Stoyan Stefanov 组织的 Web Performance Calendar，已经连续 13 年了，每年的 12 月发行，是你 12 月的最佳读物之一。

[email protected] 发布

改进 SSR 依赖处理
API 整合
默认 server.fs.strict

ahooks v3.0.0 发布

ahooks 3.0 的目标是建设高质量可靠的 React Hooks 库，我们希望成为像 lodash 一样的稳定的基础依赖。相较于 2.0，具有以下几个优势：

全面支持 SSR
全新的 useRequest
所有的输出函数地址是固定的，避免闭包问题
DOM 类 Hooks 支持 target 动态变化
更合理的 API 设计
解决了在严格模式（Strict Mode）下的问题
解决了在 react-refresh（HRM）模式下的问题
新增了更多 Hooks
修复了很多已知问题

技术资料

TypeScript 挑战

TypeScript 团队在今年 10 月末提出了几个“令人毛骨悚然”的代码挑战，让您以一种有趣的方式深入挖掘 TypeScript 语言。

2020 年发布的挑战

reddit_recap_2021

2021 年 Reddit 回顾报告。

ts-log-cn

从 TypeScript 的更新日志中筛选类型相关的知识点, 类型推断的变化(放宽)和配置项以及 ECMA 的新增语法选录。

HTMHell Advent Calendar

一个专注于 HTML 的博客网站。

地狱(真实网站中的不良做法合集)
天堂(HTML小妙招)
传送门：在每扇门的后面，您都会找到一篇专注于 HTML 的文章、演讲或工具。

Ben Awad 面试 Dan Abramov 的直播回放

对，就是垂直居中那个。

Thank you, Angular

Angular 的核心领导者之一 Igor Minar (工作了 12 年) 的离职感言。

React Holiday

React 18 免费教程，为期 25 天。

2021 React Conf 回放地址，右下角可以切换中文字幕

好文推荐

评论区吵的厉害，不过用户体验这一点我站鑫旭老师，现在好用的产品太少了，更别提用户体验好。做一个有工匠精神的工程师是一种优秀的职业素养，希望读过这篇文章后大家可以深度思考用户体验这个问题。毕竟，用户体验这一层，早晚也会卷起来。

React中的TS类型过滤原来是这么做的！

本期摘要

ESLint 推出新的配置系统
新版 Vue 3 中文文档正式上线
Astro 1.0
小程序新渲染引擎 Skyline Beta
NodeParty 分享 PPT & 回顾视频
使用 Vue 组件构建命令行界面应用
React re-render 指南
React TypeScript 备忘录

大家好，我是童欧巴。欢迎来到本期的前端食堂技术周刊，我们先来看下上周的技术资讯。

技术资讯

1.ESLint 推出新的配置系统

回顾当前的 eslintrc 配置系统演进史，每一步的演化在当时来看都是不错的选择，比如 extends、Personal configs、多种配置文件格式、可共享的配置和依赖项(npm 背锅)、root、overrides、添加 extends 到 overrides 等等。

然而时至今日，随着 JavaScript 项目越来越庞大，从整体上再来看这些配置就太复杂了。为了简化配置，ESLint 团队经过 18 个月的修订和讨论，决定着手构建一个全新的配置系统 flat config，现在可以在 ESLint v8.21.0 中通过 API 使用。

可以通过如下链接了解更多：

3.Astro 1.0

2022 年 Islands Architecture 孤岛架构发展十分迅猛，代表框架如：Astro、Qwik、Elder.js、Fresh 等。

Astro 1.0 近期正式发布，文档写的很不错，如下是核心理念部分：

4.小程序新渲染引擎 Skyline Beta

为了使小程序的性能接近原生的用户体验，小程序推出了新的渲染引擎 Skyline。

新的架构相比原有的 WebView 架构，有以下特点：

界面更不容易被逻辑阻塞，进一步减少卡顿；
无需为每个页面新建一个 JS 引擎实例（WebView），减少了内存、时间开销；
框架可以在页面之间共享更多的资源，进一步减少运行时内存、时间开销；
框架的代码之间无需再通过 JSBridge 进行数据交换，减少了大量通信时间开销。

新的渲染流程如下图所示：

下面我们来看技术资料。

技术资料

1.NodeParty 分享 PPT & 回顾视频

没看直播的堂友们可以看视频回放了，如下是 NodeParty 的四大主题：

在 Node.js - What's Next
企业级包管理服务 cnpmcore
cnpm rapid 极速模式，正式开源
从 Egg 到 Artus，谈谈框架的框架的初心

其他信息

好文推荐

下面来看一下好文推荐，本周推荐的好文是：

1.Vitest: 现代前端测试框架

2.5 亿用户如何高效沟通？钉钉首次对外揭秘即时消息服务 DTIM

好了，以上就是本期的食堂周刊，观众老爷们如果觉得还不错，一键三连是对食堂老板最大的支持。

你的前端食堂，吃好每一顿饭，我们下期见。

如果可以有rss订阅就好了 New feature proposal: rss

或许可以有个rss？🧐

【第二十七期】2022-03-05

你好，我是童欧巴。欢迎来到前端食堂的第 27 期技术周刊。从本期周刊开始，决定加入一个新的版块【随便聊聊】，聊聊技术以外的东西，可能是书单推荐，也可能是最近提升的认知，或者又养成了什么新习惯，让周刊更加丰富一些。

技术资讯

新的一年，新的 MDN

MDN 终于“买新皮肤了”，并由社区投票选出了新的 Logo。

在其 16 年的历史中经历了很多变化，从早期的 wiki 开始，到最近迁移到一个由 GitHub 支持的静态站点，共拥有超过 45000 名贡献者，它们还即将推出 MDN Plus 高级订阅服务，可以期待一下。

Interop 2022

Interop 2022 是一个基准(benchmark),由三个主要浏览器实现的代表商定，并通过公开提名和审查过程开发，并得到了 Apple、Bocoup、Google、Igalia、Microsoft 和 Mozilla 的支持和意见。

该基准侧重于 15 个领域，开发人员认为在这些领域存在缺失或者跨浏览器存在兼容性问题。浏览器供应商们都同意专注于这些领域，为开发者提供更好的开发体验。包括 Cascade layers(级联层)、Color spaces and CSS color functions(颜色空间和函数) 、New viewport units(新的视口单位)、Scrolling(滚动)、Subgrid(子网格)等等。

Announcing TypeScript 4.6

自 Beta 版和 RC 版以后的新变化：

删除了编译命令中不必要的参数 react-jsx
编辑器实时获取 JSDoc 参数名称不匹配建议
还进行了一些内部重构
TypeScript 4.7 迭代计划

技术资料

如何阅读 ECMAScript 规范

ECMAScript 规范是所有 JavaScript 实现行为的权威来源。该规范的实用性远远超出了被称为 “JavaScript 引擎开发人员” 的神话物种，对普通的 JavaScript 程序员很有用，只是大多数人都没有意识到。

这个文档为你阅读 ECMAScript 规范扫除了很多障碍，如果你愿意，一天读一点规范，那你的 JavaScript 水平一定也会稳步增进。

从 JavaScript 到 Rust (电子书)

以 JavaScript/Node.js 开发人员的角度来学习 Rust 的一本电子书，从 JavaScript 生态映射到对应的 Rust 生态，为你尽可能的减轻学习 Rust 的成本。

向我解释一下 Twitter 源代码的前十行

Anand Chowdhary 分享了它经常问的一道面试题，打开Twitter.com，查看源代码并解释源码的前十行含义。

你能说出来几个？

用 DDD (领域驱动设计)和 ADT (代数数据类型)提升代码质量

产品经理更换后，因为文档不全，需要通过读代码来反推产品逻辑这事儿大家经历过吗？好一点的代码还可以读懂，差的代码很难读懂，导致项目维护成本极高。

探究项目里代码质量和可维护性的持续下降的原因，可能不仅在于时间紧迫、需求变动频繁，开发团队本身也要负主要的责任。

那么什么样的代码算是好的代码？

可以从代码的可扩展性、可维护性、可读性、可测试性等方面衡量，不过这些只是宏观层面。那么具体提升代码质量的方法有哪些呢？

SOLID、设计模式等等，还有本文的 DDD 和 ADT。

降低前端业务复杂度新视角：状态机范式

本文也是对提高代码质量的一次探索，举几个文中一针见血的例子：

你的代码里是否存在因为业复杂导致的越来越多的 flag 变量？或者各种 if/else 多层嵌套的逻辑？时间久了完全看不懂。

做业务的同学很难有全局的业务视角，面对 PD 的需求没有足够的话语权。哪怕需求设计的不合理，也只能先做，后面再去修正。

如果没有良好的协作流程，那么测试同学的测试范围取决于前端同学的测试范围。很多时候代码改动后会影响很多页面。要么测试同学测试不完整，要么需要测试同学全量回归，浪费了绝大的测试成本。

当有新人参与到项目中时，面对这种项目，也会被折磨的头大，需要花费大量的成本梳理清楚业务与代码的关联。

如何解决这些问题？状态机可能是答案之一。

好文推荐

随便聊聊

推荐一些最近在读的书。

世界一直都很疯狂，不过如果搞明白了在这疯狂背后永恒的原则，搞清楚世界的运行原理，也许能够更加轻松的应对。推荐阅读《原则：应对变化中的世界秩序》

最近还在读 Daishi Kato 的新书《Micro State Management with React Hooks》，如果你对 React 的状态管理库 Zustand、Jotai、Valtio 的原理感兴趣的话也推荐给你。

关于开源组织掺杂政治这件事儿，尤大的处理方式是最优雅的。作为个人，可以在社交平台表达各自的立场，但请别在开源项目里面，让技术回归纯粹。到今天为止，Node.js 已经回滚了不当的横幅。轰炸 React Issue 的行为属实是没必要，反而会带来反作用。

【第四十一期】2022-06-18

美味值：🌟🌟🌟🌟🌟

口味：桃桃乌龙

食堂技术周刊仓库地址：https://github.com/Geekhyt/weekly

PC 端在仓库里看体验更好，顺手赏个 Star 是对食堂最大的支持。因为这周末加班，本期周刊的视频版先鸽一期。

本期摘要

第 90 次 TC39 会议的更新
IE 退役
React Labs
Storybook 组件百科全书
虚拟 DOM 的未来
Awesome Readme Template
软件工程之软技能
Fresh 下一代 Web 框架

大家好，我是童欧巴。欢迎来到本期的前端食堂技术周刊，我们先来看下上周的技术资讯。

技术资讯

第 90 次 TC39 会议的更新

文章汇总了在第 90 次 TC39 会议上的功能提案，下面摘取 Stage 4 和 Stage 3 的部分：

Stage 4: Array find from last
Stage 3: Symbols as WeakMap keys

IE 退役

2022 年 6 月 15 日，IE 正式退役，IE 浏览器这场漫长的告别之旅将抵达终点。

退役将分为两个阶段：重定向阶段(渐进式重定向保证质量)和 Windows 更新阶段。

普通用户打开 IE 会被重定向到 Edge，并进入 IE 模式
最终随着未来 Windows 的更新，IE 图标会被删除
至少会在 2029 年之前一直支持 Edge 中的 IE 模式

React Labs

React 18 的发布是多年研究和探索多种技术方向的结果，在这期间积累了大量的经验。不过 React 团队发现社区等待新功能的同时没有深入了解他们正在做的事，所以他们决定将定期分享关于 React 中正在进行的工作：

服务器组件
资源加载
SSG 优化
React 编译器优化
Offscreen
Transition 跟踪
新的官方文档

下面我们来看技术资料。

技术资料

组件百科全书

Storybook 发布了组件百科全书，汇总了来自世界各地的顶级 UI 组件，供程序员在开发项目时浏览、参考或者复用，目前包含来自 Airbnb、Microsoft、Zendesk 等数十家公司的 5000+ 个组件。

虚拟 DOM 的未来

轻量级虚拟 DOM (<1kb)
React 的 API + Svelte 的编译器

Million 的作者是一名高中生，该项目由 Vercel 赞助，使用编译器来提高性能并减小包体积。同时也发布了 Million + React 的集成包。

Awesome Readme Template

一个美化的 GitHub README 模版项目。

软件工程之软技能

长文预警，谷歌的高级项目经理分享了他职业生涯 10 年以来学到的软技能。

Fresh 下一代 Web 框架

Deno 的核心团队推出了基于 Preact 的 Deno 元框架 Fresh，核心是路由和模版引擎。特性如下：

好文推荐

下面来看一下好文推荐，本周推荐的好文是：

好了，以上就是本期的食堂周刊，观众老爷们如果觉得还不错，一键三连是对食堂老板最大的支持。

你的前端食堂，吃好每一顿饭，我们下期见。

【第四十七期】2022-08-10

美味值：🌟🌟🌟🌟🌟

口味：碳烤羊排

本期摘要

Docusaurus 2.0
7 月登陆网络平台的新内容
Nuxt.js 团队的轮子库
React 的一些最佳安全实践
业务中的前端组件化体系
DNS 查询原理详解

大家好，我是童欧巴。欢迎来到本期的前端食堂技术周刊，我们先来看下上周的技术资讯。

技术资讯

1.Docusaurus 2.0

你可能没用过 Docusaurus，但是你一定看过基于它搭建的网站，比如：Prettier、Babel、React-Native、Jest、Gulp、Redux、Tauri、Taro 等。

近期 Docusaurus 2.0 发布，核心功能如下：

支持用于客户端；
插件系统，核心功能由单独插件提供支持，也方便社区贡献插件；
更加灵活的主题定制，如：自定义 CSS 变量、提供用户自己的样式表、从头实现主题、覆盖内置组件；
文档版本基于快照，更加容易理解；
MDX；
约定式文件系统。

2.7 月登陆网络平台的新内容

该系列博文会收集每个月登陆 stable(稳定) 和 beta(测试) 版本浏览器的有趣功能，如下是 stable 版本浏览器的部分：

Firfox 103 和 Safari 15.6 发布稳定版，在几个不错的 CSS 功能上获得了互操作性，如下：

backdrop-filter，可以实现毛玻璃效果；

scroll-snap-stop，更加良好的滚动体验。

下面我们来看技术资料。

技术资料

1.Nuxt.js 团队的轮子库

这个页面汇总了 Nuxt.js 团队创造的各种轮子。

2.React 的一些最佳安全实践

为了保证 React 应用的安全性，值得遵循的最佳实践。

包含如下方面：

dangerouslySetInnerHTML；
避免直接操作 DOM 注入 HTML；
服务端渲染；
JSON 注入；
URL 注入；
避免有漏洞的 React 版本；
避免有漏洞的其他依赖；
ESLint React 安全配置。

3.业务中的前端组件化体系

在一个业务体系中，组件化到底应该如何去做？

这篇博文试图围绕这个主题，给出一些可能的解决思路，包括如下方面：

组件的实现：状态与渲染、使用上下文管控依赖项、状态的可组合性、分层复用、多级子树、状态的依赖关系；
工程链路：组件依赖形态、跨技术栈集成、测试与分析。

4.DNS 查询原理详解

使用 dig 命令手把手带你跑通整个 DNS 查询过程。

5.README 的艺术

README 的正式命名日期可以追溯到至少 1970 年和 PDP-10，拥有高质量 README 的项目使用起来也非常舒适和安心，本文讨论了高质量的 README 应该包含哪些内容。

其他信息

好文推荐

下面来看一下好文推荐，本周推荐的好文是：

1.语雀 App 跨端技术架构实践

2.面向微前端，谈谈 JavaScript 隔离沙箱机制的古往今来

好了，以上就是本期的食堂周刊，观众老爷们如果觉得还不错，一键三连是对食堂老板最大的支持。

你的前端食堂，吃好每一顿饭，我们下期见。

【第十一期】2021-11-06

技术资讯

1.React Router v6 稳定版本正式发布

React Router v6 源码解读

2.Hermes 即将成为 React Native 默认的 JS 引擎

3.Google Chrome 团队写了一篇关于《Photoshop 的 web 之旅》的博客

技术资料

好文推荐

【第四十四期】2022-07-11

美味值：🌟🌟🌟🌟🌟

口味：水蜜黄桃

本期摘要

Bun
Color.js
函数式编程术语
数百个 Web 开发资源
Vue.js 挑战
React 状态管理的新浪潮
Can I DevTools

大家好，我是童欧巴。欢迎来到本期的前端食堂技术周刊，我们先来看下上周的技术资讯。

技术资讯

1.Bun

“Bundle, transpile, install and run JavaScript & TypeScript projects — all in Bun.”

All in one！是的，你没看错，Bun 几乎大包大揽了所有事情(JavaScript 运行时、打包工具、转译器、包管理工具)，专注于性能、开发者体验以及与 JavaScript 生态系统的兼容性。作者 Jarred Sumner 高中辍学，曾在 Stripe 和 Thiel Fellowship 工作。

使用 JavaScriptCore 引擎，启动和执行速度比 V8 等要更快一些。
使用 Zig 语言编写(既然已经有了 C++、D 和 Rust，为什么还要使用 Zig？)
serve、sqlite、ffi 等方面远远超过 Node 和 Deno

2.Color.js

SVG 之父 Chris Lilley 和 Lea 发布了一个认真对待颜色的库，支持包括 CSS Color 4 中的所有颜色空间以及非官方的 CSS Color HDR 草案。

下面我们来看技术资料。

技术资料

1.函数式编程术语

该项目总结了函数式编程中的术语，十分全面，并提供了对应的代码示例及扩展阅读。

2.数百个 Web 开发资源

该项目包含了数百个免费的 Web 开发资源，包含网站托管、学习平台、编码挑战平台、各种类库资源等等。

3.Vue.js 挑战

一个 Vue.js 在线挑战平台，基于 Vue.js SFC 在线编码游乐场进行挑战。摘几个关键词：

挑战类型全面
难度系数等级
自动化贡献

4.React 状态管理的新浪潮

这篇长文盘点了社区中流行的 React 状态管理库，列举出了全局状态管理库需要解决的问题以及状态管理生态系统简史。

最后还推荐了Daishi Kato 的书《Micro-State-Management-with-React-Hooks》，这本书在之前的周刊里也推荐过，感兴趣的堂友可以买来看看，保证你看完会觉得很过瘾。

5.Can I DevTools

Can I Use 大家都用过吧，Can I DevTools 顾名思义，用于浏览器开发者工具的能力查询。

其他信息

好文推荐

下面来看一下好文推荐，本周推荐的好文是：

1.WebAssembly 生态及关键技术综述

2.关于程序员的职业操守，从《匠艺整洁之道》谈起

好了，以上就是本期的食堂周刊，观众老爷们如果觉得还不错，一键三连是对食堂老板最大的支持。

你的前端食堂，吃好每一顿饭，我们下期见。

【第二期】2021-09-04

技术资讯

技术资料

好文推荐

【第三十六期】2022-05-08

美味值：🌟🌟🌟🌟🌟

口味：羊汤烩面

本期周刊视频版已在 B 站【前端食堂】同步发送，如果有喜欢看视频的堂友可以移步 B 站进行观看。

本期摘要

pnpm v7.0.0
Node 对 ESM 的支持达到重要里程碑
四月份登陆浏览器的新功能
VS Code April 2022
React 官方团队出手，补齐原生 Hook 短板
Firefox 将在 102 中支持 Import Maps
State of frontend 2022
JavaScript 框架的四个时代
为什么 Node.js 比 PHP 更容易受到供应链攻击？
从零开始构建 JavaScript Bundler

大家好，我是童欧巴。欢迎来到本期的前端食堂技术周刊，我们先来看下上周的技术资讯。

技术资讯

pnpm v7.0.0

pnpm 发布了 v7.0.0，带来了大量的更新。如：不再支持 Node.js 12、pnpm run <script> 脚本名称后的所有命令行参数都会传递给 argv 等等，更多细节请前往如上链接的官方 release 页面查阅。

Node 对 ESM 的支持达到重要里程碑

Node.js 12 是最后一个非 ESM 版本，目前处于生命周期结束状态，这意味着 Node.js 对 ESM 的支持达到重要里程碑。

四月份登陆浏览器的新功能

在四月份，Chrome 101 和 Firefox 99 稳定版发布。

Chrome 101 中包含了更容易让人类使用的 hwb() 颜色函数、以及 Priority Hints 资源优先级加载控制。

Firefox 99 中包含 Navigator.pdfViewerEnabled，用于指示浏览器是否支持 PDF 文件的内联显示。

VS Code April 2022 (version 1.67)

VS Code 发布了四月更新，此次更新亮点包括：

资源管理器文件嵌套
「设置」里的编辑器搜索过滤器
括号对高亮着色
切换嵌套提示
拖放以创建 Markdown 链接
提升插件作者的开发者体验
新的 Rust 语言指南

React 官方团队出手，补齐原生 Hook 短板

React 官方决定出手解决原生 Hook 的短板，这篇文章这两天被疯狂转发，我也在文中给出了一些补充。如果想要了解详情，大家可以前往阅读。

Firefox 将在 102 中支持 Import Maps

Firefox 将在 102 版本中支持 Import Maps，它允许我们控制导入模块时获取哪些 URL。如果你还不了解 Import Maps，文中也给出了提案地址，请放心食用。

下面我们来看技术资料。

技术资料

State of frontend 2022

又一份前端状态调查报告，来自 125 个国家，共 3703 份调查，还有 19 位前端技术专家分享他们的想法并对调查结果发表评论。

JavaScript 框架的四个时代

这篇文章作者以自身多年的开发经历还原了 JavaScript 框架的发展历程，并划分出了四个时代。

远古时代：无框架
框架初期：Backbone.js、Angular 1、Knockout.js、SproutCore、Ember.js、Meteor.js
以组件为中心的时代：React.js、Vue.js、Svelte、Polymer.js
全栈框架：Next.js、Nuxt.js、Remix、SvelteKit、Gastby 和 Astro

读完后你会发现前端框架的发展潮流也是一个圈儿，兜兜转转一大圈后才感叹，还是前后端一体好。

众里寻他千百度，蓦然回首，那人却在灯火阑珊处。

为什么 Node.js 比 PHP 更容易受到供应链攻击？

这条链接是 Hacker News 上大家对这一问题的探讨。有一条回答欧巴认为比较靠谱，简要整理如下：

首先，供应链攻击在所有开源生态系统中都存在，何况 JavaScript 的生态系统规模比其他任何生态系统都要庞大，所以即使是向包中注入恶意代码的小概率事件也可能会经常发生。
其次，拿 Python 对比，因为经典问题“依赖地狱”的存在，导致 Python 维护人员在添加新的依赖项时要三思而后行，以免给用户带来“依赖地狱”的问题。但 Npm 包的维护者没有这样的限制，在某种程度上，更好的开发体验导致了整个模块的生态系统“太好了”。

PS：解释一下“依赖地狱”，在 Python 中，如果你有两个依赖 A 和 B，它们又依赖于不同版本的 C(@1.0.0、@2.0.0)。那么你就遇到“依赖地狱”的麻烦了，因为 Python 只能安装一个版本的 C，而 Npm 会帮你分别安装 C 的两个版本。

从零开始构建 JavaScript Bundler

Jest 作者的最新系列文章，并且配套视频，内容绝对硬核。

除此之外，他还写了《从零构建 JavaScript 测试框架》、《重新思考 JavaScript 基础架构》等系列文章。

好文推荐

下面来看一下好文推荐，本周推荐的好文是：

其他信息

好了，以上就是本期的食堂周刊，观众老爷们如果觉得还不错，一键三连是对食堂老板最大的支持。

你的前端食堂，吃好每一顿饭。我们下期见。

【第六期】2021-10-02

技术资讯

Electron v15.0.0 发布
- Chromiums 升级到 94
- nativeWindowOpen: true 不再是实验性的，现在是默认值
- 添加了 safeStorage 字符串加密 API
- ...
Flutter v2.5 发布
- 官方爸爸称这次的大版本历史排名第二
- 关闭了 4600 个 issues
- 新特性：Android 全屏、Material You 支持、文本编辑支持可切换键盘快捷键
- ...
Rust v1.55.0 发布
- fix Cargo 编译器错误重复提示问题
- 标准库对浮点解析的实现更新为 Eisel-Lemire 算法，更快、更准确，覆盖了边界情况
- 添加了开放范围模式
- ...
Nuxt 3 即将发布，这次重构带来了很多的新特性

V8 v9.5 发布
- 增强扩展了 Intl.DisplayNames、Intl.DateTimeFormat API
- WebAssembly 异常处理增强
Chrome v95 DevTools 的新特性
- 增加调整 css 的灵活多样性，可以通过下拉框选择单位、水平拖动修改数值。
- 在 issue 选项卡中隐藏 issue
- 优化属性显示以及 DevTools 命令菜单的 UI
官方 RustConf 2021 盘点

技术资料

好文推荐

【第三十七期】2022-05-15

美味值：🌟🌟🌟🌟🌟

口味：蜜桃气泡水

本期周刊视频版已在 B 站【前端食堂】同步发送，如果有喜欢看视频的堂友可以移步 B 站进行观看。

本期摘要

Google I/O 2022 Web 平台新动态
TypeScript 4.7 RC
WinterCG 社区组成立
Lerna 复活，Nrwl 将接管 Lerna
GitHub 使用 2FA 保护开发者帐户
DOM 事件可视化器
GitHub 项目精选
Web Design History Timeline
State of CSS 2022

大家好，我是童欧巴。欢迎来到本期的前端食堂技术周刊，我们先来看下上周的技术资讯。

技术资讯

Google I/O 2022 Web 平台新动态

一年一度的 Google I/O 来了，Web 平台的新动态有很多，包括如隐私和安全、CSS、JS、性能等等，就不一一列举了，还没看的堂友可以通过上面链接的回放看下，主持人也很幽默，节目非常精彩。

大约在 24 年前，Google 由两名研究生创立，当时 Google 拥有一个产品，以及一个远大的使命：整合全球信息，供大众使用，使人人受益。在那之后的几十年里，我们一直在推进我们的技术来实现这一使命。 - Sundar

TypeScript 4.7 RC

TypeScript 4.7 RC 候选版本发布，自 Beta 版以来的主要改动如下：

由于 Node.js 12 不再维护，module 构建目标改为 node16；
在 #private 私有字段上支持 typeof 还存在兼容性问题，不会出现在 4.7 的正式版中；
Breaking Changes 中取消了在 strictNullChecks 中类型参数约束等规则。

WinterCG 社区组成立

就像 justjavac(迷渡) 老师所说的一样：“这个社区早该成立了！这样可以让云计算或者边缘计算的平台提供和 Web 一致的 API，而不是各自开发自己的 API。对于社区开发者来说，不再需要额外学习一套 API，写一套代码就可以部署到不同平台。”

Lerna 复活，Nrwl 将接管 Lerna

Lerna 复活了，他将接力棒传给了 Nrwl。Nrwl 是同样作为 Monorepo 管理工具 Nx 背后的公司。

GitHub 使用 2FA 保护开发者帐户

经过前一阶段里不断发生的供应链攻击，分析原因后，为了能从源头治理，GitHub 宣布将于 2023 年底前，强制要求在 GitHub.com 贡献代码的用户启用一种或多种形式的双因素身份验证(2FA)。

下面我们来看技术资料。

技术资料

DOM 事件可视化器

这个工具可以帮助你掌握 DOM 的事件系统，你可以将不同类型的事件监听器添加到元素上，然后观察它们的工作方式，可以验证下你是不是完全掌握了。

GitHub 项目精选

这篇博文中作者收集了很多 GitHub 上好玩的项目，工作累了来冲浪一下吧。

Web Design History Timeline

这个网站很用心，记录了从 1990 年至今，网页设计史上的里程碑事件、网页设计趋势、以及网页设计演变等，为后人提供了很好的历史参考和素材。

State of CSS 2022

这篇文章是 Google I/O 2022 上关于 CSS 状态演讲的文章形式，一大波好用的特性正在抵达战场。

好文推荐

下面来看一下好文推荐，本周推荐的好文是：

其他信息

好了，以上就是本期的食堂周刊，观众老爷们如果觉得还不错，一键三连是对食堂老板最大的支持。

你的前端食堂，吃好每一顿饭。我们下期见。

【第二十六期】2022-02-26

技术资讯

2022，前端工具链十年盘点

阿里妈妈前端快爆出品，我在公众号也和一丝姐申请了转载，全文满满的信息量，一定有你不知道的知识点。

What's New In DevTools - Chrome 99

WebSocket 请求支持 Slow 3G
Application-Reporting API 新面板
Chrome 扩展支持 sourcemap
控制台样式、格式和过滤器优化

2022 年 Rust 编译器的野心

Rust 编译器团队在这篇博客中说明了 2022 年的 roadmap，以及希望社区里可以有更多的人参与进来贡献。

还有一个资讯是 rust-analyzer 加入 Rust 组织！

Ant Design Mobile 5.0 来了

全新体验设计
100% TypeScript 重写组件
优秀的手势库 use-gesture
优秀的动画库 react-spring
CSS 变量
按需引入
77 个组件
v2 到 v5 的迁移指南
计划：完善风格化能力、自动化测试、组件补充、Design Kits 发布、无障碍、底层技术探索

语雀 iOS、Android 客户端上线，iOS 支持 iPad

这个标题“久等，我们来了”，建议在多加几个“久”，是 “久久久久久久久久久久等”。：）

目前功能：除了最基本的编辑能力外，支持多端同步，添加了语雀小记和切换空间。

技术资料

狼叔直播 Reaction《学习指北：Node.js 2022 全解析》

我整理的狼叔直播文字版，干货很多，在保证原内容的同时，额外加入了一些相关资料和链接，方便你学习。

Web 框架解决了什么问题？

Part1
Part2

Noam Rosenthal 的系列文章，深入探讨了不同框架之间常见的一些技术特性，并解释了它们的实现原理以及成本(React、SolidJS、Svelte、Lit)，然后进一步探究如何以最小成本实现一个“框架”。

React.ReactNode 类型是一个黑洞

Kevin Ball 最近遇到了一个 bug，结果挖出来一个大坑，最后给出了暂时的解决方案。

JavaScript 原型链和继承

如果下面这张图你还画不出来的话，建议用这篇文章再好好复习一下。

好文推荐

聊聊跨端技术的本质与现状

额外再补充一下，跨端技术方案千千万，保证功能一致的前提下，剩下的就是实现成本和性能之间的比拼和权衡。

语法编译(实现成本高，语法约束多，现在不是主流方案)
类小程序运行时(运行时复杂度高、性能不好，实现成本较低)
对接底层渲染指令(运行时复杂度低、性能好，实现成本很高)

TS 类型体操入门，实现 DeepKeyOf

【第八期】2021-10-15

技术资讯

Deno v1.15 发布

功能完整的 Web Crypto API
FFI 改进：非阻塞调用、缓冲区参数
deno uninstall 命令
deno lint --watch
统一自定义 CA 证书选项 caCerts 等等

技术资料

好文推荐

【第四十九期】2022-08-22

美味值：🌟🌟🌟🌟🌟

口味：茉莉花拌海蜇

食堂技术周刊竹白专栏订阅地址：https://hungryturbo.zhubai.love/

本期摘要

Deno 即将迎来重大变革
StackBlitz 2022 年 7 月更新
Announcing Blitz 2.0 BETA
从 Chrome 中删除 HTTP/2 服务器推送
Web Image 最佳实践
Vite Rollup Plugins
TypeScript Collections
Code Golfing Tips & Tricks

大家好，我是童欧巴。欢迎来到本期的前端食堂技术周刊，我们先来看下上周的技术资讯。

技术资讯

1.Deno 即将迎来重大变革

随着 Bun 的发布，Deno 明显感受到压力，先是将 FFI 性能提升了约 200 倍。近期 Deno 官方又宣布一系列的大新闻：

未来三个月，Deno 支持导入 80%-90% 的 npm 包；
将最快的 JavaScript 运行时作为发展目标，HTTP 服务器正在重构；
支持企业用户：提供办公时段专属套餐；
提升 DX：所有第三方 Deno 代码的全文符号搜索、自动生成 JavaScript 和 TypeScript 项目的文档。

2.StackBlitz 2022 年 7 月更新

StackBlitz 2022 年 7 月更新动态汇总，包含如下几个方面，对此关注的堂友可以移步链接阅读。

社区的新动态；
DX 提升和兼容性改进；
快餐资讯。

3.Announcing Blitz 2.0 BETA

Blitz 不再是一个一体化的框架，而是一个用于 Next.js 的全栈工具包。这意味着 Blitz 从对 Next.js 的抽象转变为模块化的工具包，支持插入任何新的或者现有的 Next.js 应用。

Blitz 2.0 包含如下六个包：

blitz：核心包，提供实用的工具函数、插件机制和脚手架；
@blitzjs/next：暴露特定于 Next.js 框架 functions & components；
@blitzjs/auth：提供身份验证和授权；
@blitzjs/rpc：Zero-API 数据层；
@blitzjs/codemod：为升级提供的 codemod。

4.从 Chrome 中删除 HTTP/2 服务器推送

在 Chrome 106 和其他基于 Chromium 的浏览器的下一个版本中，对 HTTP/2 服务器推送的支持将被默认禁用。原因及替代方案如下：

实际使用中没有明显的性能提升；
采用 HTTP2 的站点从 1.25% 下降到 0.7%；
替代方案：Early Hints。

下面我们来看技术资料。

技术资料

1.Web Image 最佳实践

这个仓库收集了 Web Image 的最佳实践。

2.Vite Rollup Plugins

Vite3 中使用 Rollup 插件的兼容性列表，我猜作者 patak 一定是个贴心暖男。

3.TypeScript Collections

用 TypeScript 编写的数据结构合集，包含如图所示的数据结构。

4.Code Golfing Tips & Tricks

这篇博文整理了一系列关于 JavaScript 编码的技巧，包括如何用更少的编码实现同样的功能。在一些比赛，如 JS13KGames、js1024 中这些技巧很实用。但是在真实世界中，我们需要给可读性更多关注，毕竟代码是写给人看的。

其他信息

好文推荐

下面来看一下好文推荐，本周推荐的好文是：

1.闲鱼宗心：这一年，我对终端组织与技术架构的思考

2.Why React Re-Renders

好了，以上就是本期的食堂周刊，观众老爷们如果觉得还不错，一键三连是对食堂老板最大的支持。

你的前端食堂，吃好每一顿饭，我们下期见。

【第四十三期】2022-07-04

美味值：🌟🌟🌟🌟🌟

口味：乌龙桃桃

本期摘要

Vue 2.7 "Naruto" Released
Prisma 4.0.0
father 4 RC
Layoutit grid 生成器
Oh Shit, Git
HTML Tips - The hidden Gems
给前端开发人员和设计师的最佳 Chrome 插件
Data Flow in Remix

大家好，我是童欧巴。欢迎来到本期的前端食堂技术周刊，我们先来看下上周的技术资讯。

技术资讯

1.Vue 2.7 "Naruto" Released

Vue 2.7 如期而至，版本代号为 Naruto。我翻出了写于 2 年前的文章海贼王 One Piece，一起康康 Vue 版本号中的彩蛋，结尾还抛出了对火影忍者的期待。文章的评论区有堂友在 11 个月前预测 Vue 2.7 Naruto，我愿称之为全场最佳。

说回本次版本发布，发布公告相比 Beta 版本多出了以下内容：

升级指南(Vue CLI / webpack、Vite、Volar、Vue Devtools)
额外细节(Vue2 从 Flow 移植到 TypeScript，单元测试从 Karma + Jasmine 移植到 Vitest)

并对 Vue2.7 发布前社区内为弥补差距所开发的插件作出感谢：

@vue/composition-api
vue-demi
vite-plugin-vue2

2.Prisma 4.0.0

Prisma 4.0.0 带来了一系列的 Breaking Changes，包括 Prima Schema、Prisma Client 和一般性改进，并提供了详尽的升级指南。

3.father 4 RC

距离 father 上一个 major 版本发布已经过去了近 3 年，father 4 RC 版近日发布，主要特性如下：

双模式构建 (Bundless 和 Bundle 两种构建模式)
多 Bundless 编译核心 (Babel 和 esbuild，未来计划支持 SWC 等)
依赖预打包 (基于 Vercel 的 ncc 和 Microsoft 的 api-extractor，目前处于持续优化阶段)

在正式版发布之前还将完成如下特性：

SWC Bundless 编译核心
father doctor 命令，自动诊断当前项目中存在的问题，给开发者提示
father g 命令，提供工程原子化能力的生成
插件接入能力，给项目提供定制化入口，并发展插件生态

下面我们来看技术资料。

技术资料

1.Layoutit grid 生成器

CSS Grid 布局生成器，提供简洁干净的编辑器快速设计网页布局，并获取 HTML 和 CSS 代码以快速启动您的下一个项目。(该项目使用 Vue3、Vite、Vueuse 等搭建)

2.Oh Shit, Git

作者总结了他使用 Git 遇到过的抓狂经历，并提供了详细的解决方法，包括如下问题：

进行了错误操作，能给我台时光机吗？
刚提交 commit 就发现还有东西需要改动，如何快速添加？
如何修改刚刚提交的 commit 信息？
不小心把本应该在新分支上提交的东西提交到了 master
把 commit 提交错分支怎么办？
diff 命令查看变更却发现什么也没有
想要撤回很早以前的 commit
想要撤回某一个文件的改动

3.HTML Tips - The hidden Gems

HTML 免费电子书，本书介绍了一些不常见的 HTML 特性，包含大量示例和精美的图片。

4.给前端开发人员和设计师的最佳 Chrome 插件

本文包含 10 余个可以帮助你提升效率的 Chrome 插件。

5.Data Flow in Remix

本文介绍了 Remix 中的数据流，Remix 简化了组件与服务器的交互，帮你有效的跨越网络鸿沟：客户端上的状态与服务器上状态的差距，这正是许多客户端状态管理库所不能做到的。而 Remix 扩展了网络中的数据流，使其真正实现单向和循环：从服务器状态(state)到客户端视图(view)，再返回到服务器(action)。

其他信息

好文推荐

下面来看一下好文推荐，本周推荐的好文是：

1.全局安装 npm 包的替代方案

2.How We Built Hydrogen

好了，以上就是本期的食堂周刊，观众老爷们如果觉得还不错，一键三连是对食堂老板最大的支持。

你的前端食堂，吃好每一顿饭，我们下期见。

【第四十六期】2022-08-01

美味值：🌟🌟🌟🌟🌟

口味：过油肉拌面

大家好，我是童欧巴。食堂技术周刊刚刚开通了竹白专栏，未来的每期周刊也会在竹白平台同步更新。支持邮件和微信订阅，分为免费和付费两种订阅方式，想要支持食堂或者想看食堂老板上更多菜品的堂友可以选择付费，价格不贵，一年才两杯咖啡。

订阅方式有如下两种，选你当下方便的来。

1.可以通过如下链接🔗订阅：https://hungryturbo.zhubai.love/

2.也可以通过如下的二维码扫码订阅：

本期摘要

Expanding Privacy Sandbox testing
为 npm 引入更多安全增强功能
Lotion
Awesome Bun
像小说一样品读 Linux 0.11 核心代码
HypeScript
Roll your own JavaScript runtime
跟着我，从 0 实现 React18
构建自己的 Web 框架

大家好，我是童欧巴。欢迎来到本期的前端食堂技术周刊，我们先来看下上周的技术资讯。

技术资讯

1.Expanding Privacy Sandbox testing

Chrome 团队近期分享了他们的隐私保护计划和时间表，以及逐步淘汰第三方 cookie 的路径。预计在 2023 年开始交付 API 以实现普遍的可用性，于 2024 年下半年开始逐步淘汰 Chrome 中的第三方 cookie，博文主要包括如下内容：

更新 cookie 行为、独立分区存储(CHIPS)。 First-Party Sets 第一方集(允许由同一实体拥有和运营的相关域名声明属于同一个第一方)
削弱 User-Agent，减少 UA 中可用于被动指纹识别的信息
Storage 分区，包含 IndexedDB、localStorage、communication API(BroadcastChannel、SharedWorker)、ServiceWorker

2.为 npm 引入更多安全增强功能

近期 npm 推出了一些新的安全增强功能：

使用 npm CLI 简化登录和发布体验
将 GitHub 和 Twitter 帐户连接到 npm 的能力
npm 上的所有包都已重新签名，添加一个新的 npm CLI 命令来审核包的完整性

下面我们来看技术资料。

技术资料

1.Lotion：使用 Vue 3 构建的开源 Notion UI

目前支持的 Features：

基于块的编辑器
拖拽重新排列区块
基本的 Markdown 解析，包括粗体、斜体、标题和分隔符
输入'/'以获得命令菜单和快捷方式

技术栈：

拖放组件 vue-draggable-next
编辑器 tiptap 和 ProseMirror
图标 oh-vue-icons
Vue3 + Vite3 + TailwindCSS + TypeScript

2.Awesome Bun

包子的 Awesome 仓库，让包子飞一会儿。

3.像小说一样品读 Linux 0.11 核心代码

一个不会写小说的作家不是一个好的程序员。

4.用 TS 的类型系统实现一个 TS 类型系统

TypeScript 类型系统的简化实现，而且是自己实现自己。

使用方式如下图所示，将 TypeScript 代码作为字符串传递给 TypeCheck 泛型，会返回可能的类型错误。

5.Roll your own JavaScript runtime

Deno 官方发布，跟着这篇文章，你可以创建一个自定义的 JavaScript 运行时(简化的 Deno)。并实现执行本地 JS 文件、读写文件、删除文件以及简化的 console API 等功能。相比 Node.js 的定制开发，Deno 的定制门槛很低了。

主要用到了：

deno_core：抽象出了与 V8 JavaScript 引擎的交互
tokio：异步 Rust 运行时，用作事件循环

6.跟着我，从 0 实现 React18

实现一个 mini-xxx 已经不够卷了，卡颂宝贝的 Big-React 才够卷。

极简实现的同时保证功能完备，标准是跑通官方测试用例。
同时贴心的按 Git Tag 划分迭代步骤，记录从 0 实现的每个功能。

目前已经实现了 7 个版本，值得喜欢研究 React 源码的同学追更。

7.构建自己的 Web 框架

这篇文章解释了如何构建基于 React 的简易 Web 框架，并使用 Vercel 的 Build Output API 进行部署。

Build Output API 是一个基于文件系统的规范，用于生成 Vercel 部署的目录结构。框架作者可以将此目录结构实现为他们构建命令的输出，以便框架可以利用所有 Vercel 的平台功能(Serverless Functions，Edge Functions，路由，缓存等)，Astro已经成功与 Vercel 集成。

其他信息

好文推荐

下面来看一下好文推荐，本周推荐的好文是：

1.ToB 前端构建效率优化之路

冷启动时间从 4min 到 2s。

2.来自 NPM 联合创始人的预言：前端未来会这样

太阳底下无新鲜事，我们都在循环里。

好了，以上就是本期的食堂周刊，观众老爷们如果觉得还不错，一键三连是对食堂老板最大的支持。

你的前端食堂，吃好每一顿饭，我们下期见。

【第二十三期】2022-01-30

技术资讯

TypeScript 4.6 Beta

支持在 super() 之前执行代码
优化递归类型检查
优化索引访问的类型推导
参数类型的控制流分析支持
新的性能分析工具
移除对象解构中的非通用类型
JS 文件语法检查

按照 TS 团队的调性，通常来说 Beta 版本和正式版本几乎不会有变化，所以你可以认为这就是 TS 4.6 正式版本的主要特性。

Umi 4 RC 发布

🎉 新官网和文档
🚀 MFSU V3 & 默认开启
🎭 双构建引擎和 ESMi
🕸 Webpack 5
⛹🏾‍♂️ React Router 6 & 新路由
🐹 最佳实践迭代
🛡️ 依赖预打包
🤺 Umi Pro
🐛 Low Import 研发模式
⚠️ 强约束功能集成
🎈 Import All From Umi 迭代
🍀 srcTranspiler 和 depTranspiler
🌼 jsMinifier 和 cssMinifier
🌸 应用元数据
❄️ 微生成器
🧪 贴心小改进

Deno v1.18

花费了 6 个月，Web Cryptography API 已经全部完成。

DevTools 有什么新功能？

文章对 Chrome、Edge、Safari 以及 Firefox 的 DevTools 的最新功能进行了整理和讲解。

cURL 开源作者怒怼“白嫖”企业：我不删库跑路，但答疑得付钱！

“我认为，这可能是开源金字塔的一个很好例证，上层用户根本不考虑底层设施的维护。只盖房子而不关心地基。”Stenberg 写道。

关于近日涉及 SonarQube 和 Vue 的漏洞通知

尤大出面解释了一波“安全常识”。

技术资料

自 2015 年以来 CSS3 有哪些新功能？

文章尝试列举出自 CSS3 以来发生的主要变化以及需要学习的内容。

Vercel 与 Next.js：开源全明星团队背后的商业逻辑

Vercel 不仅打造了全明星阵容，也建立了从构建工具、编译器到框架的产品矩阵。

整套开源与商业化结合的打法值得学习：

以开源的方式切入市场，抓准行业内的痛点问题，并提出解决方案。
从开源项目中招聘核心成员，获得话语权和开发者们的依赖。

SWC 作者正在移植 tsc 到 Go 语言

文章解释了为什么不再是 Rust，而选择了 Go。

Dioxus

一个新的 Rust 框架，“把 React 搬进了 Rust”，支持多端以及 SSR。

如果你想知道什么是 NFT，看这篇就够了

区块链、比特币、以太坊、NFT入门科普篇。

好文推荐

【第三期】2021-09-11

技术资讯

技术资料

好文推荐

【第二十一期】2022-01-14

技术资讯

下载量和 Vue 一样大的开源软件被作者故意破坏，导致数千款应用无限输出乱码

Faker.js 和 colors.js 的瓜，吃瓜的同时我们也要思考问题的解决方案，具体可以参考云谦大佬在 SEE CONF 2022 上的分享《Umi 设计思路》，下面有链接。

Node.js 2021 年开发者报告解读：健康稳步的发展中

摘取一些关键标题。

开发框架变化较大，造轮子变少，TS 变多，使用企业级框架变多
版本更新变化较大，从 Node 12升级到 Node 14，升级比较积极
吐槽变多，意味着用的人变多，趋于成熟
出圈：年龄分布较去年比变大，使用工种也变得比较丰富
使用困惑：性能优化，内存泄漏以及 npm 依赖
未来：从业经验越高则越关注性能和 Serverless

文章里的外链也很有料。

Chrome 重大更新，CORS 增加了两个新的请求头？

为了限制私有网络请求，新增了两个 CORS 预检 Header:

Access-Control-Request-Private-Network
Access-Control-Allow-Private-Network

第五届 SEE Conf 2022 回顾

PPT & 视频

Parcel 发布 Parcel CSS

用 Rust 编写的新的 CSS 解析器、编译器和压缩器。

前端圈儿都在用学习成本换性能，Svelte 核心团队也在考虑使用 Rust 编译器来进一步加速 Web 应用程序。

2021-2022 JavaScript 现状调查开启

调查包括语言、浏览器 API、前端框架、桌面端、测试、移动端盒客户端、构建工具、Monorepo 工具、其他类库以及你认为 JavaScript 目前最大的痛点等等。

大家有时间可以积极参与一下，为**开发者发声～

不用担心看不懂英文，有中文版本，通过邮箱就可以注册啦。

技术资料

React 官方教程导读

(视频)黄玄大佬带你读 React 新的官方文档。

TypeScript 设计模式

Sean Bradley 的 TS 设计模式专栏。

编写防御性 CSS 实践 (系列文章)

让你写出的 CSS 代码更加健壮，写代码的时候多思考可以避免很多意外。

不优雅的 React Hooks

不是引战，文章深入思考了 Hooks 的一些缺陷，并客观指出。

软件工程没有“银弹”。

(趣图：当代前端开发者使用 Hooks 时的感受)

Orta Therox 制作的 TS 备忘录

制作很精美，还在不断完善中。

好文推荐

【第三十一期】2022-04-02

美味值：🌟🌟🌟🌟🌟

口味：榛果咖啡

本期摘要

Vue 3、Vitest 中文文档上线
Pinia 正式成为 Vue 官方默认推荐的状态管理库
Vite v2.9.0
React 18 发布
React Router v6.3.0
FE-Hunter 前端赏金猎人
CasePolice
free-programming-books-zh_CN
100 cool web moments
了解 CSS 布局算法

大家好，我是童欧巴。欢迎来到本期的前端食堂技术周刊，我们先来看下上周的技术资讯。

技术资讯

Vue 3、Vitest 中文文档均已上线

Pinia 正式成为 Vue 官方默认推荐的状态管理库

Pinia 终于转正了，它具有与 Vuex 5 几乎完全相同或者增强的 API，简单来说，它就是和 Vuex 5 名字不同。Vuex 3 和 4 仍会继续维护，但是新功能不太可能会添加了。Pinia 也支持渐进式迁移，Vuex 和 Pinia 可以安装在同一个项目中，新项目的话建议直接使用 Pinia。

Vite v2.9.0

Vite 发布了 v2.9.0。

更快的冷启动；
开发期间的 CSS Sourcemap 支持（实验性）；
Web Worker 增强功能；
给插件和框架作者提供的新 API。

React 18 发布

React 18 终于发布了，官方团队从 v16 就开始普及并发概念，到正式版发布时难免少了一些新鲜感。照目前的发展趋势看，React 未来会朝着前端底层“操作系统”的方向发展，会变得越来越复杂。这些复杂的操作又会被元框架(Next.js、Remix)消化掉，开发者并不会直接接触，使用这些元框架开发即可。

React Router v6.3.0

稳定不停滞，支持增量升级，v5、v6 的版本代码可以同时存在。

下面是其他的发布信息和 TC39 提案的一些推进情况，大家可以找感兴趣的自行查阅。

其他发布

下面我们来看技术资料。

技术资料

FE-Hunter

和好朋友卡颂一起在做的项目：前端赏金猎人。

这是一个用单纯的金钱关系维系的前端学习社区，悬赏答题 + 答题赚钱。

期待你的加入，如果觉得有价值的话，可以给个 Star 鼓励一下。

CasePolice

把技术名词的大小写拼写正确是基本的素养，但很多人都不重视，这个项目可以帮助你纠正错误的大小写。

free-programming-books-zh_CN

免费的编程中文书籍索引，项目已有 90.1k Star。

100 cool web moments

从 2008 年谷歌浏览器推出至今的 100 个精彩瞬间回忆录。

了解 CSS 布局算法

想学好 CSS 仅仅了解每个属性的作用是远远不够的，还需要搞清楚布局算法是如何工作的，以及布局算法会怎样使用这些属性。本文会对布局算法进行揭秘，帮你建立 CSS 布局的心智模型。

好文推荐

下面来看一下好文推荐，本周推荐的好文是：

好了，以上就是本期的食堂周刊，观众老爷们如果觉得还不错，一键三连是对食堂老板最大的支持。

你的前端食堂，吃好每一顿饭。我们下期见。

【第五期】2021-09-25

技术资讯

[email protected] 发布了， pre transform，大型应用程序加载时间缩短50%-70%
Deno v1.14 发布
- Web Crypto 加密 API 引入
- 自定义 deno lint 和 deno fmt
- 模式匹配语法
- 增强 WebSocket、File locking、fetch 等 API
- 支持 TS v4.4 以及 V8 v9.4 版本
Chrome 94 中的新功能：Web Codecs 音频/视频编解码器、canvas 元素完全使用 sRGB 进行颜色管理、WebGPU 进行原始实验
Layui 官网将于 2021 年 10 月 13 日下线，注意是官网，库还会继续维护。记得当年 Layui 只有一个弹出框的时候还用过这个库，超级好用。

技术资料

好文推荐

【第三十五期】2022-05-01

美味值：🌟🌟🌟🌟🌟

口味：葡萄气泡饮

本期摘要

Vitest v0.10.0
Jest 28
Ant Design v4.20.0
Chrome 101
Lerna 官宣停止维护
UnoCSS 交互式文档上线
vite-plugin-vue-inspector
Defensive CSS
Core Web Vitals 指南
The Most Popular Node.js Frameworks in 2022

大家好，我是童欧巴。欢迎来到本期的前端食堂技术周刊，我们先来看下上周的技术资讯。

技术资讯

Vitest v0.10.0

Vitest 发布了 v0.10.0，主要更新如下：

声明测试的回调函数方式弃用，推荐使用 Promise 或者 async/await
beforeAll/beforeEach 支持传入清理函数作为返回值
扩展上下文 context
并发快照

Jest 28

Jest 28 发布，主要更新如下：

安装尺寸较少了大约 1/3
测试运行分片，可以在不同机器上运行部分测试
全面支持 package.json exports
fakeTimers 可配置并公开运行时 API
GitHub Actions Reporter
All Node.js globals 支持
ESM、TS 等相关功能增强
jest-light-runner

Ant Design v4.20.0

Ant Design 发布了 v4.20.0，主要更新如下：

支持 React 18 以及严格模式
新增 Segmented 分段控制器组件
其他组件的一些 Bug Fix 和 Feature 增强

Chrome 101

Chrome 101 正式发布了 Priority Hints，用于指定页面资源加载的优先级，浏览器可以根据优先级优化加载顺序，从而优化体验。

Lerna 官宣停止维护

Lerna 更新了他们项目的 README，正式宣布停止维护。

UnoCSS 交互式文档上线

如果你还不知道 UnoCSS，可以通过下面这篇文章了解。

重新构想原子化 CSS

下面我们来看技术资料。

技术资料

vite-plugin-vue-inspector

一个 Vite 插件，提供当你点击浏览器元素时自动跳转到本地 IDE 的能力。它支持 Vue2、Vue3、SSR。

Defensive CSS

防御性 CSS 编程指南，文中给出了大量代码片段，来让你写出更加健壮的 CSS 代码。

Core Web Vitals 指南

Web Vitals 是 Google 于 2020 年引入的用来衡量用户体验的 Web 性能指标，并于 2021 年 5 月正式成为 Google 搜索算法中的排名因素，包括 LCP、FID 以及 CLS，本文给出了改进 Web Vitals 并增强用户体验的最佳实践。

The Most Popular Node.js Frameworks in 2022

随着越来越多的元框架出现，Node.js 框架的格局发生了巨大的变化，文章探讨了当前的趋势并列举了流行的框架。

好文推荐

下面来看一下好文推荐，本周推荐的好文是：

好了，以上就是本期的食堂周刊，观众老爷们如果觉得还不错，一键三连是对食堂老板最大的支持。

你的前端食堂，吃好每一顿饭。我们下期见。

【第十二期】2021-11-13

技术资讯

技术资料

Guillermo Rauch(Vercel 的首席执行官兼联合创始人和 Next.js 的联合创始人)
Rich Harris (Svelte 的作者)
Ben Lesh (RxJS 的项目负责人、JavaScript After Dark 联合主持人)

好文推荐

地球程序员之神

毫无疑问，我心中的第一程序员。

【第三十三期】2022-04-16

本期摘要

IE 退休倒计时：3 个月
TypeScript 4.7 Beta
@types/react@^18.0.0
Meta 发布开源编辑器 Lexical
TypeScript 编译器工作原理
Code Reviews 指南
14 条关于异步的 Lint 规则
Rust 编码规范中文版
如何找出泄漏到全局的 JavaScript 变量

大家好，我是童欧巴。欢迎来到本期的前端食堂技术周刊，我们先来看下上周的技术资讯。

技术资讯

IE 退休倒计时：3 个月

全体起立，鼓掌三分钟。

TypeScript 4.7 Beta

TypeScript 4.7 的 Beta 版本发布。

Node.js 下的 ES Module 支持
模块检查控制
计算属性的控制流分析
增强对象中的函数类型推断
泛型实例化表达式
infer 增加 extends 约束支持
类型参数新增可选注解(协变/逆变)
私有字段 # 支持类型查询(typeof)
自定义模块解析策略(moduleSuffixes)
模块解析模式
优化导入语句
对象方法补全提示支持

Breaking Changes

lib.d.ts 更新
strictNullChecks 下，无默认值的泛型参数不再可分配给 {}
只读元组，length 属性添加只读限制

@types/react@^18.0.0

React 18 types 声明文件发布，并提供了相应的升级辅助工具。

Meta 发布开源编辑器 Lexical

从设计目标来看，Lexical 是一个文本编辑器引擎，提供了核心能力且易于扩展。

下面我们来看技术资料。

技术资料

TypeScript 编译器工作原理

揭秘 TypeScript 编译器工作原理的一篇文章，灵感来自于前 TypeScript 团队核心成员 orta therox 的一个视频。为你深入探索拥有 25 万行源代码的 TypeScript 仓库打开了一扇门。

Code Reviews 指南

在 GitHub 上，每天有数千万条 Code Review 评论，这篇文章从多个角度分享了关于 Code Review 的最佳实践。

14 条关于异步的 Lint 规则

在 JavaScript 中，调试异步代码有时感觉就像在雷区中跑步，你不知道控制台会在什么时候打印，也不知道你的代码是如何执行的。但幸运的是，有一些 Lint 规则可以帮我们编写出更好的异步代码。

Rust 编码规范中文版

Rust 社区内有些公司和组织都各自维护着自己的编码规范，但是随着 Rust 日益普及，统一的编码规范需求也逐渐浮出水面，本规范应运而生。

如何找出泄漏到全局的 JavaScript 变量

如何找出泄漏到全局的 JavaScript 变量呢？本文提供了一个巧妙的方法。

好文推荐

下面来看一下好文推荐，本周推荐的好文是：

好了，以上就是本期的食堂周刊，观众老爷们如果觉得还不错，赏个 Star 🌟 是对食堂老板最大的支持。

你的前端食堂，吃好每一顿饭。我们下期见。

【第二十八期】2022-03-12

本期摘要

ECMAScript proposal: Types as Comments
Vitest v0.6.0
What's New In DevTools (Chrome 100)
How to Upgrade to the React 18 Release Candidate
您的 node_modules 文件夹中到底发生了什么？
Solid.js 感觉就像我一直希望 React 成为的样子
The Story of React
Rust 数据结构与算法
Red Hat 和 IBM Node.js 参考架构
关于依赖管理的真相 — 前端包管理器探究

技术资讯

ECMAScript proposal: Types as Comments

TypeScript 官方发起了一个令人十分惊喜的提案，将类型注释添加到 JavaScript 代码中，允许这些注释由 JavaScript 外部的类型检查器检查。在运行时，JavaScript 引擎会忽略它们，将类型视为注释。

目的是使开发人员能够运行用 TypeScript、Flow 和 JavaScript 的其他静态类型超集编写的程序，而无需任何转译，前提是它们坚持使用该语言的某个相当大的子集。

对于 TypeScript 和 Flow 来说，随着时间的推移，语言降级的需求将会越来越少，所以将它们转换为 JavaScript 的主要工作就剩下了删除类型注释。

如果让 JavaScript 本身支持类型注释，那么就可以减少构建的步骤，突破 JSDoc 类型注解的限制(冗长且缺乏表现力)，让用户以更简单的方式获得静态类型的好处。

Vitest v0.6.0

Vitest 最近发布了 v0.6.0 版本，添加了文件内测试，类似于 Rust 的模块测试。如果你对它还不是很了解的话，可以通过这个链接到达官网学习。

What's New In DevTools (Chrome 100)

Chrome 的第 100 个版本如约而至，Chrome DevTools 添加了如下功能：

在 Styles 样式窗格中查看和编辑 @supports 规则
Recorder 记录器面板改进(默认支持常用选择器、自定义选择器等)
Sources 面板调试悬停时预览类和函数属性信息
Performance 性能面板新增帧类别

How to Upgrade to the React 18 Release Candidate

React 18 现已作为候选版本 (RC) 提供，官方提供了详细的升级指南。

技术资料

您的 node_modules 文件夹中到底发生了什么？

众所周知，node_modules 文件夹是宇宙中最重的对象之一。大多数项目里 90% 的代码都来自开源，大部分我们都没有读过，它们运行在我们的笔记本电脑和服务器上，并且具备所有的权限。系统还能正常运行可以称为奇迹了。

使用 npm install 下载依赖包就好像在吃自助餐，没有人会阻止你往自己盘子里装多少食物。但如果过度放纵，也会对你的健康造成影响。

不管怎样，我们必须对交付到生产环境的代码负责，无论是我们自己编写的还是开源的。这篇文章中的 Socket 提供了快速评估包安全性和健康分数的能力。对触发安全问题的代码，可以直接跳转到导致问题的代码行，供你审查。

Solid.js 感觉就像我一直希望 React 成为的样子

React 自从有了 Hooks 之后，相比 Class 组件，写起代码确实简洁了(其实还不够简洁，只是相对而言)，但是因为没有响应式，我们需要主动声明依赖项，这很容易导致出错。那么 Solid.js 是怎么做的呢？可以通过这篇文章了解详情。

The Story of React(视频)

在 React 首次发布时，它并没有得到很好的反馈，大家都不是很接受，因为 React 与之前大家会的技术栈完全不同。

这个视频讲述了从 jQuery 到第一个流行的 JavaScript 框架 backbone.js 还有固执己见的 Angular，再到 React 框架发展的故事。

Rust 数据结构与算法

一本开源 Rust 电子书，内容包含算法分析、基本数据结构与算法，还有一些实战。共有 9 章，目录如下：

计算机科学
算法分析
基本数据结构
递归
查找
排序
树
图
实战

Red Hat 和 IBM Node.js 参考架构

Red Hat 和 IBM 整理了一些关于 Node.js 的最佳实践。

关于依赖管理的真相 — 前端包管理器探究

前端的包管理器你知道几种呢？

npm、yarn、pnpm、cnpm、tnpm...

为什么要搞出这么多包管理器？每个包管理器的不同版本都存在哪些问题？什么是依赖嵌套，幽灵依赖又是什么？这篇文章会带你搞清楚上面这些问题。

好文推荐

你真的了解 gif 吗？分析 gif 文件和一些奇怪的 gif 特性

这是一篇对 gif 本质深度的探究的文章。

It's always been you, Canvas2D

看看 canvas 进化了哪些 API。

【第七期】2021-10-09

最近鱿鱼游戏火爆全球，如果把鱿鱼游戏里的糖换成前端框架，男主对应的选了 React，那多半是要提前领盒饭了。。

技术资讯

vue-devtools 更新

新增 Vue 版本检查
新增 api.on.setPluginSettings，增强 getSettings 等

React Native v0.66 发布

技术资料

好文推荐

【第四期】2021-09-18

技术资讯

Node v16.9.0 发布，同时发布了用于管理包管理工具的工具 Corepack(实验性)
周下载量超过300w次的npm包存在严重漏洞
V8 发布了 v9.4
Nuxt.js 成立了 Nuxt Labs 公司，公司官网有点酷
本年度的全球 Rust 大会网络开幕

技术资料

好文推荐

【第二十期】2022-01-08

技术资讯

2021 JavaScript Rising Stars

JavaScript Rising Stars 第 6 版，对前端领域的框架、Node.js 框架、构建工具、状态管理、css-in-js、移动/桌面端、GraphQL 等等进行年度评比。

还有过去的一年里前端圈儿大佬们的动向：

Kent C. Dodds 加入了 Remix 。
Vercel 组建了梦之队：Svelte 的创建者 Rich Harris、React 元老 Sebastian Markbåge、Turborepo 的作者 Jared Palmer 。

我们已经进入了元框架时代，那么 2022 年是否会成为 JavaScript 全栈应用的黄金时代？我们拭目以待。

pnpm v6.25.0

无需使用 symlinks，新的下载模式，支持拍平的目录结构。可选择 isolated、hoisted、pnp。
token helper
New CLI option: --ignore-workspace

solid v1.3

Features：

HTML Streaming
Error Boundaries on the Server
Isolated Server Render/Hydration Contexts
createReaction
External Sources (experimental)
refetchResources (experimental)

Vite in the browser

把大象放进冰箱需要三步，那么将 Vite 放进浏览器中需要几步？

用 Service Worker 替换 Vite 的 HTTP 服务器
用 Web Worker 运行 browser-vite 处理主线程
内存文件系统
特殊扩展名文件的转换
处理正则表达式兼容
HMR

JavaScript for impatient programmers

ES2022 更新。

New members of classes
Private slot checks
Top-level await in modules
error.cause
Method .at() of indexable values
RegExp match indices
Object.hasOwn(obj, propKey)

Vitest

Vitest 现在已经 2k + Star 了，他们提供了一个示例文件夹帮助你入门：Vue、Svelte、React、Lit、RTL、Puppeteer、MSW。

技术资料

2021 年最喜欢的 Chrome 扩展程序

Loom
Mote
Wordtune
Forest
Dark Reader
Tab Manager Plus
Nimbus
Stylus
Rakuten

Year two of Excalidraw

Excalidraw 的年终总结。

探秘前端 CRDT 实时协作库 Yjs 工程实现

学术研究成果的实用化需要大量的工程细节处理与优化，藏在这背后的还是数据结构与算法等计算机基础知识。

Node.js 最佳实践

项目结构实践
异常处理实践
编码规范实践
进入生产实践
安全实践

Madge

可以生成模块依赖图，支持( CommonJS、AMD 或 ES6)。

TypeScript-Compiler-Notes

TS 编译器笔记语料库。

好文推荐

【第二十二期】2022-01-23

技术资讯

Vue 3 将成为新的默认版本

Vue 3 将在 2022 年 2 月 7 日成为新的默认版本。

从一个运行时的库发展为包含许多子项目的框架，Vue 陪伴着新世纪的前端工程师们一起成长，感谢我们的祖师爷赏饭吃。

Nginx 之父 Igor Sysoev 离职

毫无疑问，支撑起今天整个互联网世界不可或缺的角色之一就是 Nginx。

Igor 大佬独立编写了数十万行代码，并领导产品和团队走上正确的道路，大佬的事迹和精神将永远鼓舞着我们这些后辈。

W3C 成立元宇宙工作组

工作组的目标是通过设计和围绕身份标识、社交图谱、库存等协议来链接虚拟世界，并致力于创建一个由艺术家、创作者、开发人员和其他创新者组成的社区，共创围绕虚拟世界的设计和开发。

Electron 垂暮，Tauri 是跨平台的未来

Tauri 的后端绑定和底层引擎也都是用 Rust 编写，而不是 Node.js 和 V8，Tauri 相比 Electron 也会有更低的内存占用。

Rust 不仅在逐渐占领前端的工具圈儿，它准备锈化一切。

技术资料

TypeScript 类型定义的历史故事

TypeScript 2.0 之前的故事，提到了团队早期大佬们的事迹，可以了解到大佬们如何一点一点把孩子拉扯大。

Rust 语言圣经

开源 Rust 电子书，内容涵盖从入门到精通的全部 Rust 知识，目前已有 3K star。除了基础部分还包含：深入度、性能优化、专题、难点和错误索引以及场景化代码。

Webpack to Vite

将 Webpack 项目自动转换为 Vite 项目的工具，提供了详尽的支持列表。

如何从 Vue CLI 迁移到 Vite

文章提供了从 Vue CLI 迁移到 Vite 的详细步骤，为你提供指引。

Remix vs Next.js

Ryan Florence（Remix 的联合创始人）写了一篇关于 Remix 和 Next.js 之间对比的文章，很详细。

好文推荐

【第四十期】2022-06-12

美味值：🌟🌟🌟🌟🌟

口味：原味绿茶

本期摘要

HTTP/3 终于被标准化为 RFC 9114
WebContainers 登陆 Firefox
Remix Conf 2022: The Overview
Monorepos in JavaScript & TypeScript
Vue Report Amsterdam 2022
VueConf US 2022
Linux 命令大全搜索工具
你的备选 npm 包

大家好，我是童欧巴。欢迎来到本期的前端食堂技术周刊，我们先来看下上周的技术资讯。

技术资讯

HTTP/3 标准化为 RFC 9114

TCP 诞生于上世纪 70 年代，应该没有人会预料到直至今日，我们仍在使用它。虽然这几十年间 TCP 在不断更新特性，但它自身存在的限制已经无法满足日益增长的需求。

最近的一条好消息是：历时 5 年，HTTP/3 终于被标准化为 RFC 9114。

可以移步下方链接了解更多：

HTTP/3 From A To Z: Core Concepts

WebContainers 登陆 Firefox

虽然 WebContainers 完全建立在 WebAssembly 和 Service Worker 等 Web 标准化 API 之上，但是迄今为止，这些 API 在不同的浏览器实现中的工作方式并不同。

自从 StackBlitz 加入字节码联盟以来，一直在与 Mozilla 团队进行合作。最近，他们宣布 WebContainers 正式登陆 Firefox。

Remix Conf 2022: The Overview

本文是 Remix Conf 2022 的回顾，文中含有大量资源的链接，感兴趣的同学可以移步查阅。

下面我们来看技术资料。

技术资料

Monorepos in JavaScript & TypeScript

本文介绍了 Monorepo 的 Why、How、What，并提供了示例、工具集、版本管理、CI pipeline 等方面的内容，带你从零入门 Monorepo。

一个合格的 Monorepo 工具应该至少具备以下能力：

依赖管理能力
任务编排能力
版本发布能力

Vue Report Amsterdam 2022

2022 阿姆斯特丹 Vue 报告，内容有很多，大家可以找自己感兴趣的板块查阅。

VueConf US 2022

尤大在 VueConf US 2022 上做分享的幻灯片，下面摘录一些 Vue 生态系统的更新：

Linux 命令大全搜索工具

Linux 命令大全搜索工具，内容包含 Linux 命令手册、详解、学习以及搜集等。

你的备选 npm 包

这个网站可以帮你找到某个 npm 包的替代品，你的“备胎”工具包，目前还处于 Beta 阶段。

好文推荐

下面来看一下好文推荐，本周推荐的好文是：

其他信息

好了，以上就是本期的食堂周刊，观众老爷们如果觉得还不错，一键三连是对食堂老板最大的支持。

你的前端食堂，吃好每一顿饭，我们下期见。

【第三十八期】2022-05-23

美味值：🌟🌟🌟🌟🌟

口味：桂花乌龙美式

本期周刊视频版已在 B 站【前端食堂】同步发送，如果有喜欢看视频的堂友可以移步 B 站进行观看。

本期摘要

Remix v1.5.0
Babel v7.18.0
前端部署十五章
Tree Shaking 问题排查指南
Web Applications 101
ARIA 创作实践指南
一文搞懂前端技术发展

大家好，我是童欧巴。欢迎来到本期的前端食堂技术周刊，我们先来看下上周的技术资讯。

技术资讯

Remix v1.5.0

Remix 发布了 v1.5.0，主要更新如下：

官方正式支持 Deno
替换 node-fetch 为 @remix-run/web-fetch，更基于标准的 fetch 实现

Babel v7.18.0

Babel 发布了 v7.18.0，主要更新如下：

支持解构私有属性提案
支持 TypeScript 4.7

下面我们来看技术资料。

技术资料

前端部署十五章

该系列专栏是为了帮助开发者更加深入的理解前端部署，从最原始的部署方案过渡到 Docker 与 Kubernetes，逐步进行优化，并使用 CI/CD 完善工程质量及部署效率。

Tree Shaking 问题排查指南

本文对 Tree Shaking 算法、常见误区以及问题排查方式进行了详细论述和实践。

Web Applications 101

这是一篇 Web 应用程序综合指南的博客，对一些常见的术语进行了详细解读，适合 Web 开发新手阅读。

ARIA 无障碍创作实践指南

本指南提供了很多常见的设计模式和功能示例，帮助你进行无障碍网页开发。

一文搞懂前端技术发展

本文是由菜鸟前端团队整理的前端技术发展史，文中将前端发展分为了 6 个时代并分别进行详细阐述，带你理解前端工程师这个职业的演进路线。

好文推荐

下面来看一下好文推荐，本周推荐的好文是：

其他信息

好了，以上就是本期的食堂周刊，观众老爷们如果觉得还不错，一键三连是对食堂老板最大的支持。

你的前端食堂，吃好每一顿饭，我们下期见。

geekhyt / weekly Goto Github PK

weekly's Introduction

技术周刊

2024 年

2023 年

2022 年

2021 年

链接交流

weekly's People

Contributors

Stargazers

Watchers

Forkers

weekly's Issues

本期摘要

技术资讯

技术资料

好文推荐

技术资讯

技术资料

好文推荐

技术资讯

技术资料

好文推荐

技术资讯

技术资料

好文推荐

技术资讯

技术资料

好文推荐

本期摘要

技术资讯

技术资料

好文推荐

其他信息

技术资讯

技术资料

好文推荐

技术资讯

官方结论摘要

一些建议

结果摘要

技术资料

好文推荐

技术资讯

技术资料

好文推荐

本期摘要

技术资讯

技术资料

好文推荐

本期摘要

技术资讯

1.Vite 3.0

2.Deno v1.24

技术资料

1.图片优化工具

2.Figma 背后的 CSS

3.B 站事故复盘

4.第 91 次 TC39 会议

第 4 阶段

第 3 阶段

5.软件工程师精选论文列表

其他信息

好文推荐

技术资讯

技术资料

好文推荐

技术资讯

技术资料

好文推荐

本期摘要

技术资讯

技术资料

好文推荐

本期摘要

技术资讯

Breaking Changes

年度最佳创新突破奖

最激动人心的技术应用