前端周报：万元悬赏锈化 Prettier！JS 新语法进展~markdown 制作 PPT（47 期）
大家好，这里是大家的林语冰，您现在收看的是第 47 期前端生态的技术周报（视频解说请临幸 前端周报@bilibili）。
每周必看
Prettier 是一个“迷之自信”的格式化工具人，Prettier 团队官宣 v3.1 正式发布，重大升级包括但不限于：
- 支持条件运算符的“回调地狱”
- 支持 Angular 17 的控制流
- 更多细节请临幸官网
与此同时，为了让代码格式化更快，“Prettier 之父”发布了悬赏任务，任何诉诸 Rust 重构 Prettier 的项目，只要能将 Prettier“锈化”（Rustify）并通过 95% 的测试，就能斩获 $10_000 的奖金，目前奖金池还没涨停，虽然没房价涨得快，但比“花吸籽”涨得快。
无独有偶，Node.js TSC 成员启奏，建议在 Node 中诉诸 Biome 格式化代码，因为 ESLint 的全新版本腰斩了其核心格式化规则。
这里的 Biome 是我们之前周报提到的诉诸 Rust 实现的前端全家桶工具链，旨在取代 Prettier、ESlint 等，提供一条龙服务。
我有一个大胆的预言，前端生态的工具链会“渐进式锈化”，而 JS 会更专注应用层的开发，如果有一天我们看不懂 Vue 编译器的源码，大概率是编译器也被“锈化”了。如果你问我为什么知道？因为我看到了“啊卡西记录”。
这位大佬深入探讨了 JS 全新的显示资源管理功能，此功能已在 TS 5.2 中初步支持，关于 TS 5.2 的版本升级，稍后可以观看我之前专门做视频给大家解说的 TS 5.2 官宣。
根据《ES6 标准入门教程》，ES6 新提案只要能进入 Stage 2，就大概率会渐进式增量更新到 ES6 中。显示资源管理提案目前已经来到了 Stage 3，大家可以提前预习，面试时掏出来就是对祂者的“降维打击”。
显示资源管理在资源不再被需要或使用时可以轻松清理资源，该提案涉及全新的 using 关键字，同步和异步资源管理等。这位大佬的科普需要有一点点 TS 基础，如果您实在受不了 TS，可以直接看 TC39 技术委员会官方仓库的 ES6 版相关提案。
我们之前分享的 React 爱好者游戏开发大赛的获胜者已经揭晓，如果您有参与此比赛，记得查收一下。
多人挑战赛道的冠军是“Pipeline Panic（管道恐慌）”，最佳游戏的冠军是“Rock Paper Shoot（石头剪刀布）”。
版本官宣
Node 团队官宣 v21.2 正式发布，升级了，但又好像没有升级，重大升级主要是新增了 import.meta.filename 和 import.meta.dirname 这两个元属性，用来取代 CJS 的 __filename 和 __dirname 这两个魔术变量。
reveal.js 是一个开源的 HTML 演示框架，它可以在浏览器演示创建精美的 PPT，支持 MD 语法，开发者友好。
换而言之，您可以通过 MD 语法和 Web 技术栈来实现 PPT 在线演示，比如程序员的团队技术分享、毕业设计和升职评级等，甚至可以部署到网站上作为在线简历。
reveal 团队官宣 v5.0 正式发布，重大升级是集成了滚动视图，当滚动条滚动时可以根据滚动位置渲染对应的视图。
前端拾遗
这位大佬科普了 URL 是什么鬼物，包括但不限于 URL 的语法和用法，以及 URI、URL、URN 和 URC 之间的区别等。
最佳实践
Web Components 是一组 Web 原生 API 的统称，允许开发者创建可复用的自定义元素。
但是有时候我们很容易混淆 Web Components 和框架组件的概念。这位大佬科普了 Web Components 和 React 组件的粒度不一样，且可以在 JS 执行之前渲染，同时强调了 Web Components 更倾向于增强而不是替换，并把这种风格的组件赐名为“HTML Web Components”。
Vue 官网也提供了 Vue 组件和 Web Components 的详细资料，还不了的 Vue 爱好者记得复习一下。
daily.dev 团队最近在 hackathon 中在 Preact 和 React 之间反复横跳，将技术栈从 Preact 切换为 React。
这是因为在 Preact 开发时遇到某些问题，包括但不限于：
- 热重载
- 错误处理
- 整体环境和渲染速度慢
从 Preact 切换为 React 后的福利包括但不限于：
- React 和 Next 100% 兼容
- 减少第三方库
- React 有 Vercel 和 Meta（前 Facebook）等大公司的支持
这位大佬科普了用某个宠物项目来测评前端生态的前沿技术，该项目过去一年完成了从 JS 转换为 TS 的现代化改造，同时移除了 babel 减小打包体积。有意思的是，大佬还从 React 切换为 Preact，和我们一分钟前讲的从 Preact 切换为 React 恰好完全相反。
这位大佬这次主要是测评从 Node 切换到 Bun 是否可以落地生产环境，因为 Bun 宣扬的性能完全可以对 Node“降维打击”，且兼容大部分 Node 的生态。
这位大佬维护了一个 Vite 构建 4k 的迷你 App，但是 Github Actions 构建却高达 26s。
经过一番测评后发现，“性能杀手”是“Barrel file（桶装文件）”，移除之后构建时间优化为 8s，提速了 3 倍。
前端工具人
visx 是一个基于 D3 的低阶 React 可视化原子库，可以减小打包体积，允许高度可定制，渐进式集成状态管理、动画库和 CSS-in-JS 的技术方案。这不是一个现成的图表库，而是一个允许自由 DIY 图标的乐高。
这是一个收藏了一大坨缎带特效的宝藏网站，和 UP 主一样宝藏，所有特效都是 100% 原生 CSS 实现，没有依赖其他“黑魔法”。
这是一个收藏了一大坨前端模板的宝藏网站，和 UP 主一样宝藏，您可以根据不同的框架或需求来筛选，比如 UP 主是 Vue 爱好者，我们可以看一下 Vue 技术栈的模板，然后 Vue 的模板又有体贴的分类，比如 UI 或 仪表盘等不同用途。
最宝藏的是，此网站所有模板都免费，完全免费，而且允许用于商业用途。他真的，我哭死。
Humanize Duration 可以将形式语言的毫秒数转换为自然语言的表达。换而言之，我们可以给它传递一个毫秒数，然后它说人话，告诉我们多少秒或年月日等，支持多种语言。
这种需求在开发中很常见，比如统计某件事有多持久，可以直接使用这个模块转换为不同语言的表达。此模块正在积极维护，但目前不会增加新功能。
高玩攻略
根据 HTTP Archive 的数据，诉诸 Core Web Vitals 测评性能的网站与日俱增，目前测评网页性能的三大指标包括但不限于：加载速度、交互响应能力和布局稳定性。
不久前谷歌团队发布了关于 Web Vitals 的报告称，对 Core Web Vitals 的改进节省了 10_000 年的等待时间。
这位大佬科普了 2024 年 Web 性能测评的性能指标将发生变化，性能测评和优化是面试的“核武器”，但如果您 2024 年要参与面试，记得不要答错了。
npm 提供了一大坨好用的库。许多人认为它们能且仅能在 Node.js 中运行，但其实很多包可以在其他环境使用。
这位大佬科普了使用某些简单的“黑魔法”在其他环境运行 npm 包，比如在浏览器中使用 npm 包。
这位大佬科普了 60+ 个浏览器不想让您知道的 debug 奇技淫巧，之所以一次性科普了如此之多的 debug 技巧，是因为大佬一直在维护和更新此博客，历时两年之久。
这位大佬科普了 V8 字符串的具体实现和优化，揭秘 V8 引擎处理 JS字符串的幕后机制，并通过在 100% 的基准测试吊打 C++ 来表演字符串优化。
温馨提示，此博客需要有一点点 C++ 基础，总之就是非常硬核且烧脑。我看不懂，但我大受震撼。
像前端爱好者提及“测试”，可能会引发 PTSD（创伤后应激障碍），因为大部分前端初学者（包括我）都会选择性无视测试，或者在测试时头皮发麻。
这位大佬科普了为什么前端测试势在必行，为什么前端测试风评被害，以及使测试易于编写和维护的技术方案，包括但不限于：
- 单元测试
- 组件测试
- 视觉快照测试
- 端到端测试
您现在收看的是前端周报系列，学废了的小伙伴可以订阅专栏合集，我们每周六佛系投稿，欢迎持续关注前端开源技术。谢谢大家的点赞，掰掰~
