大家好，这里是大家的林语冰，您现在收看的是 2023 年第 40 周前端生态的技术周报。
每周热搜
2023 年度 HTML 现状调查[2]
2023 年度的 HTML 现状调查正在火热进行中，持续三周，见者有份，欢迎诸位前端爱好者踊跃参与开源调查，有一分爱发一分电。10 月 1 日之前提交的调查问卷将直接影响 Interop 2024 相关提案，说不定前端发展的世界线会因你而变。
JS 新提案最新进展[3]
TC39（Technical Committee 39，第 39 号技术专家委员会）是一个由 JS（JavaScript）开发者、实现者、学者等组成的团体，负责 JS 的标准化。
近日，TC39 又双叒叕开会了，本次圆桌会议翻牌了若干 JS 新提案，包括但不限于 resizable ArrayBuffers 等，并且并腰斩了若干提案，包括但不限于 Symbol.thenable 等。
了不起的 Temporal API[4]
后 ES6 时代的 JS 新提案要经历最初的 stage 0，一直坚挺到最终的 stage 4 阶段才能正式出道，目前 Temporal API 已经坚持到 stage 3。
Temporal API 原生支持处理日期和时间，开箱即用，可以替代 MomentJS（已停止维护）等第三方库。这位大佬科学地解释了 Temporal API 为何牛逼。
Angular 文艺复兴[5]
2023 年 StackOverflow 调查的数据显示，去年 Angular 用户量狂跌 24%，Angular 框架的市场占有率约为 18%，而 React 仍然以近 41% 的市场占有率无情霸榜。
这位大佬如是说，Angular 正在文艺复兴，重铸谷歌霸权，吾辈义不容辞。Angular 市场占有率下降正是改革开放的必由之路。
加速 JS 生态系统：Polyfills（填充补丁）开始暴走[6]
现代化前端开发的"渐进增强"和"优雅降级"依赖于 Polyfills。
举个栗子，Vue2 进化到 Vue3 之后，Vue3 的 API 依赖 Promise，如果低版浏览器不支持 Promise，那么在构建时就需要"曲线救国"，移植一个 Promise Polyfill 打补丁，这样低版浏览器就能和 Vue3 无缝衔接。
不幸的是，经历了"回调套娃"和"npm 黑洞"等天劫之后，如今我们迎来了"Polyfill 地狱"。这位大佬测评了若干基建库，不测不知道，一测猫傻掉，运行时 Polyfill 维度没有按需"tree shaking 瘦身"，本地依赖过度肥胖。
举个栗子，eslint-plugin-react 模块原本本地打补丁有且仅有 15 个依赖，现在安装却祂喵地要 97 个依赖。
万物皆可 GPT[7]
chatgpt.js 是一个强大的 JS 库，允许客户端通过 ChatGPT DOM 和 ChatGPT 进行极简交互，包括但不限于 Tampermonkey（油猴脚本）等 Chrome 扩展程序的方式。
官方博客
Signal 崛起[8]
Preact 是一个多快好省的 React 备胎，拥有同款现代化 API。
Preact 团队开源了关于 Signals 优化如何响应式系统的奇技淫巧，以及关于响应式编程的一家之言。
npm 包支持 npm provenance（npm 来源）[9]
Github 开源了具备 npm provenance 发布的模块可以验证该模块的源码存储库和说明，这能且仅能用于开源模块，也可以和 GitHub Actions、GitLab CI/CD 等梦幻联动。
Bilibili Warning
由于这位技术很菜的 UP 主目前尚未正式发布过哪怕一个 npm 包，所以虽然大致了解这个功能，但没有完全了解。家人们谁懂啊？欢迎家里有包的粉丝在留言区文明科普。
跨 JS 运行时的 Socket API 草案规范[10]
Vercel 和 Cloudflare 团队的大佬发表了关于跨 JS 运行时 Socket API 的 WinterCG 规范，并实现了兼容 Node.js 的 connect() API。
Node.js 原生支持 node：net 和 node：tls API，虽然但是，这些过气 API 是在 10 多年前设计的，自带"回调套娃"，而全新的 API 则基于时髦的 Promise 风格。官方博客开源了这一切背后的设计动机和重大意义。
HTTP/3 为什么正在蚕食世界？[11]
去年，负责定义互联网技术的 IETF（因特网工程任务组）标准化了新版 HTTP/3 。之后，HTTP/3 和 QUIC 协议在公网迅速普及。
React 身份认证功能，有手就行[12]
Userfront 是一个安全的、功能齐全的认证和访问控制平台。
官方指南手把手教你在 React 筑基的 App 中进行身份验证的千层套路。
版本公告
pnpm@8.8[13]
pnpm 是一个多快好省的软件包管理器，直接对 npm 和 yarn 降维打击，UP 主用过都说好。
pnpm@8.8 增量更新了 run 命令的 --reporter-hide-prefix 选项。
Shoelace@2.9[14]
Shoelace 是一个基于 Web Components 的面向未来的组件库，提供一流的 React 支持，兼容跨框架移植。
Shoelace@2.9 为 <sl-dialog> 增量更新了 model 属性，以支持第三方模态框。
Tesseract.js@5.0[15]
所谓 OCR，全称 Optical Character Recognition，即光学字符识别技术。Tesseract.js 是一个基于 Tesseract OCR 引擎实现的超好用的纯种 JS 库。
Tesseract.js 可以从图像中识别单词，你画我猜，看图识文，目前能且仅能支持 100 多种语言，包括但不限于 Hello bilibili/一键三连/阿里嘎多/撒浪嘿等。
Tesseract.js@5.0 优化了文件体积和内存占用，还有 createWorker() 参数改变的破坏性更新。
高玩攻略
你不知道的 TS 配置[16]
这位大佬是一个 TS 爱好者，TS 熟练度 4 年起步，总体感觉十分巴适。
大佬科普了关于 tsconfig.json 中魔鬼在细节的最佳实践。
Svelte 长达 3 年的用户体验[17]
这位大佬是一个 Svelte 爱好者，Svelte 熟练度 3 年起步，它使用 Svelte 构建了 10_000+ 人气的实时协作网站。
大佬科普了关于 Svelte 5 的正确打开方式，以及关于 Svelte runes 的一家之言。
使用状态机代替 RxJS[18]
Rx（Reactive Extensions）是一个超越了 JS 的编程模型，除了 RxJS，还有 RxJava、RxPY、RxGo 等 Rx 实现。总而言之，万物皆可 Rx。
Rx 是处理事件序列的神器，浏览器就是基于事件驱动模型。而状态机是一个可以描述整个世界的数学模型（元宇宙既视感）。
举个栗子，当你给我点赞时，彼芯按钮就会变色，由一个状态转移到另一个状态。
这位大佬科普了如何使用状态机代替 RxJS，总之就是十分烧脑。
RSC 太快了[19]
如果你还不了 RSC（React Server Components），RSC 允许你在各个组件之间拆分服务端渲染和客户端渲染。
这位大佬亲自测评后发现，RSC 优化后打包体积优化了 62%，网站上谷歌的 Speed Index 提高了 63%。大佬预言 RSC 优化后会性能爆表，虽然但是，大佬实测后还是喵瞪狗呆。
linear() 函数优雅实现 CSS 缓速特效[20]
CSS 全新的 linear() 函数蓄势待发，它可以赋能更自然的动画和过渡。
这位大佬科普了自定义缓速曲线的能力，从而产生更自然的 UI 运动。
data-* 属性的奇技淫巧[21]
data-* 属性是一种在 HTML 中添加数据的方法，你可以使用 JS 读写这些数据。
这位大佬枚举了 data-* 属性的若干应用场景。事实上，UP 主曾使用 data-* 属性手写模拟真实 DOM 场景下 Vue.js 的 v-show 指令。（这是一道企鹅的经典笔试题。）
响应式缩放的 CSS 工具[22]
这位大佬科普了利用包括但不限于 calc()/clamp()/vars 等 CSS 原生特性，构建可组合的响应式缩放工具，无缝适应视口缩放。
前端百宝袋
Verticalize[23]
Verticalize 是一个垂直化 JS 代码的类管道函数，可以让你的代码"立"起来调用。
Mimic.css 动画库[24]
Mimic.css 是一个 CSS 动画库。
React Chrono[25]
React Chrono 是基于 React 实现的时间轴组件。
Sonner[26]
Sonner 是基于 React 实现的 Toast 通知组件。
Dependency Cruiser[27]
Dependency Cruiser 是一个验证和可视化依赖关系的工具人。
Repo Trends[28]
Repo Trends 是一个 Github issue 趋势可视化分析网站。
赞助商广告位（谢谢老板）
基于 Electron 构建跨平台桌面 App
Electron 是一个使用 JS、HTML 和 CSS 构建桌面 App 的框架，它提供技术支持的产品包括但不限于 VSCode、GitHub 桌面 App 等。
欢迎和 Steve Kinney 联手一起使用 React.js 和 Electron 构建原生的跨平台桌面 App，您将学会关键的 Electron 概念，包括但不限于主进程和渲染器进程、进程间通信和安全性等。
前端大师（Frontend Masters）出品了上述人类高质量课程，付费自学，自律速成，逃离快餐式、碎片化地盲目自学，避免沉没时间成本。
扩展阅读
谷歌 Closure 编译器史话[29]
这位大佬是《Effective TypeScript（高性能的 TS）》的作者，大佬科普了谷歌 Closure 编译器的传奇历史，以及被 TS 降维打击的原因。
趣学 % 取余运算符[30]
这位大佬以可视化方式科普了 % 取余运算符的基本法，晓之以码，动之以图，新手友好。这个教程真的超可爱欸！
正片开始
TypeScript 的诞生：TS 最新纪录片[31]
TS 官方拍摄了最新的前端纪录片，采访了 TS 团队的核心成员和社区的 TS 爱好者，考古了 TS 作为微软第一个开源项目的前世今生。
UP 主已手动搬运该纪录片，欢迎前端爱好者一键三连。
JS Cruch：可能是有史以来最难的 JS 游戏？[32]
JS Crush 是一款 JS 连连看益智拼图游戏，虽然但是，方块匹配规则基于 == 运算符原理，运算结果相等才会触发消消乐，这款休闲游戏可以测评 JS 爱好者对 == 运算符的熟练度。UP 主强烈建议以后面试改成类似的体感游戏，这个游戏真的超好玩欸！
关于 == 运算符原理，可以复习 UP 主之前 JS 极限编程系列的手写 == 运算符原理[33]，温故而知心。
以上就是 2023 年第 40 周的前端周报（本期同款视频请临幸 B 站[1]），学废了的小伙伴可以点赞给语冰打 call，我们礼拜天佛系拖更，欢迎关注最新动态和订阅前沿资讯。谢谢大家的彼芯，掰掰~
前端任意门
[1]本期同款视频请临幸 B 站: www.bilibili.com/video/BV1t8...
[2]2023 年度 HTML 现状调查: survey.devographics.com/en-US/surve...
[3]JS 新提案最新进展: github.com/tc39/agenda...
[4]了不起的 Temporal API: taro.codes/posts/2023-...
[5]Angular 文艺复兴: thenewstack.io/the-angular...
[6]加速 JS 生态系统：Polyfills（填充补丁）开始暴走: marvinh.dev/blog/speedi...
[7]万物皆可 GPT: chatgpt.js.org
[8]Signal 崛起: preactjs.com/blog/signal...
[9]npm 包支持 npm provenance（npm 来源）: github.blog/changelog/2...
[10]跨 JS 运行时的 Socket API 草案规范: blog.cloudflare.com/socket-api-...
[11]HTTP/3 为什么正在蚕食世界？: blog.apnic.net/2023/09/25/...
[12]React 身份认证功能，有手就行: userfront.com/tutorials/r...
[13]pnpm@8.8: github.com/pnpm/pnpm/r...
[14]Shoelace@2.9: shoelace.style/resources/c...
[15]Tesseract.js@5.0: github.com/naptha/tess...
[16]你不知道的 TS 配置: kettanaito.com/blog/one-th...
[17]Svelte 长达 3 年的用户体验: poxi.substack.com/p/my-though...
[18]使用状态机代替 RxJS: www.bennadel.com/blog/4519-r...
[19]RSC 太快了: frigade.com/blog/bundle...
[20]linear() 函数优雅实现 CSS 缓速特效: www.smashingmagazine.com/2023/09/pat...
[21]data-* 属性的奇技淫巧: gomakethings.com/what-can-yo...
[22]响应式缩放的 CSS 工具: tobiasahlin.com/blog/respon...
[23]Verticalize: github.com/laurentpayo...
[24]Mimic.css 动画库: erictreacy.github.io/mimic.css
[25]React Chrono: 5f985eb478dcb00022cfd60e-hqwgomhkqw.chromatic.com/?path=/stor...
[26]Sonner: sonner.emilkowal.ski
[27]Dependency Cruiser: github.com/sverweij/de...
[28]Repo Trends: www.repotrends.com
[29]谷歌 Closure 编译器史话: effectivetypescript.com/2023/09/27/...
[30]趣学 % 取余运算符: www.joshwcomeau.com/javascript/...
[31]TypeScript 的诞生：TS 最新纪录片: www.bilibili.com/video/BV1rV...
[32]JS Cruch：可能是有史以来最难的 JS 游戏？: js-crush.vercel.app
[33]手写 == 运算符原理: www.bilibili.com/video/BV1Zu...