大家好，这里是大家的林语冰，您现在收看的是 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 API4
后 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 个依赖。
万物皆可 GPT7
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.813
pnpm 是一个多快好省的软件包管理器，直接对 npm 和 yarn 降维打击，UP 主用过都说好。
pnpm@8.8 增量更新了 run 命令的 --reporter-hide-prefix 选项。
Shoelace@2.914
Shoelace 是一个基于 Web Components 的面向未来的组件库，提供一流的 React 支持，兼容跨框架移植。
Shoelace@2.9 为 <sl-dialog> 增量更新了 model 属性，以支持第三方模态框。
Tesseract.js@5.015
所谓 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 的一家之言。
使用状态机代替 RxJS18
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 原生特性，构建可组合的响应式缩放工具，无缝适应视口缩放。
前端百宝袋
Verticalize23
Verticalize 是一个垂直化 JS 代码的类管道函数，可以让你的代码"立"起来调用。
Mimic.css 动画库24
Mimic.css 是一个 CSS 动画库。
React Chrono25
React Chrono 是基于 React 实现的时间轴组件。
Sonner26
Sonner 是基于 React 实现的 Toast 通知组件。
Dependency Cruiser27
Dependency Cruiser 是一个验证和可视化依赖关系的工具人。
Repo Trends28
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...
22023 年度 HTML 现状调查: survey.devographics.com/en-US/surve...
3JS 新提案最新进展: github.com/tc39/agenda...
4了不起的 Temporal API: taro.codes/posts/2023-...
5Angular 文艺复兴: thenewstack.io/the-angular...
6加速 JS 生态系统：Polyfills（填充补丁）开始暴走: marvinh.dev/blog/speedi...
7万物皆可 GPT: chatgpt.js.org
8Signal 崛起: preactjs.com/blog/signal...
9npm 包支持 npm provenance（npm 来源）: github.blog/changelog/2...
10跨 JS 运行时的 Socket API 草案规范: blog.cloudflare.com/socket-api-...
11HTTP/3 为什么正在蚕食世界？: blog.apnic.net/2023/09/25/...
12React 身份认证功能，有手就行: userfront.com/tutorials/r...
13pnpm@8.8: github.com/pnpm/pnpm/r...
14Shoelace@2.9: shoelace.style/resources/c...
15Tesseract.js@5.0: github.com/naptha/tess...
16你不知道的 TS 配置: kettanaito.com/blog/one-th...
17Svelte 长达 3 年的用户体验: poxi.substack.com/p/my-though...
18使用状态机代替 RxJS: www.bennadel.com/blog/4519-r...
19RSC 太快了: frigade.com/blog/bundle...
20linear() 函数优雅实现 CSS 缓速特效: www.smashingmagazine.com/2023/09/pat...
21data-* 属性的奇技淫巧: gomakethings.com/what-can-yo...
22响应式缩放的 CSS 工具: tobiasahlin.com/blog/respon...
23Verticalize: github.com/laurentpayo...
24Mimic.css 动画库: erictreacy.github.io/mimic.css
25React Chrono: 5f985eb478dcb00022cfd60e-hqwgomhkqw.chromatic.com/?path=/stor...
26Sonner: sonner.emilkowal.ski
27Dependency Cruiser: github.com/sverweij/de...
28Repo Trends: www.repotrends.com
29谷歌 Closure 编译器史话: effectivetypescript.com/2023/09/27/...
30趣学 % 取余运算符: www.joshwcomeau.com/javascript/...
31TypeScript 的诞生：TS 最新纪录片: www.bilibili.com/video/BV1rV...
32JS Cruch：可能是有史以来最难的 JS 游戏？: js-crush.vercel.app
33手写 == 运算符原理: www.bilibili.com/video/BV1Zu...