2024-第十一周

该周报主要为各个地方内容的汇总整理

技术

2024 年，该如何写一个全面兼容的 NPM 库

译：什么是 INP

这篇文章介绍了谷歌即将推出的新的核心网页指标 INP（Interaction to Next Paint），取代了原来的 FID。文章讨论了如何使用 Chrome DevTool 的 Performance Tab 来检测和优化 INP，以及如何通过使用新的 API 和库来改善网页的性能，以避免在搜索引擎排名中受到负面影响。同时提供了一些建议和方法，帮助开发者理解和改善网页的感知响应速度，以确保网页始终感觉快速。

• INP（Interaction to Next Paint）取代了 FID（First Input Delay），重点在于衡量整个用户在页面上的交互响应能力，而不仅仅是第一次交互，对用户体验更全面。
• 通过浏览器的开发者工具中的 Performance Tab，可以检查页面中各种交互事件对 INP 指标的贡献，并发现主线程上的阻塞，从而定位和解决导致 INP 分数不佳的问题。
• 可以通过新的 API（如 navigator.scheduling.isInputPending() 和 scheduler.yield）以及 JavaScript 任务调度器（main-thread-scheduling 库）来改善页面的感知响应速度，从而提高 INP 分数。

译：编程 40 年

这段文字强调了软件开发中的几个重要原则和注意事项。首先强调了团队合作和沟通的重要性，其次提到了对自己的身心健康的关注，以及个人工作环境的重要性。此外，还涉及了项目治理、伦理、多样性思维和开发中的一些技术实践建议。文章呼吁简化设计和对测试的重视，并尤其强调了在构建软件时要重视用户体验。

• 软件开发的核心技能是沟通和协作，因为成功的软件超出了任何一个人的能力范围，需要团队合作。
• 软件开发涉及伦理和政治，因为软件决策会对用户产生影响，所以需要考虑伦理和政治方面的问题。
• 多样性思维对软件开发至关重要，因为在项目中引入多样性的思想有助于做出更适用的决策，解决更多问题。

Reduce technical debt by valuing comments as much as code

好的注释有助于维护人员理解你的编码决策，减少技术债务，帮助新团队成员理解代码，以及澄清自己的思路。注释在代码中的价值被低估，但实际上能够减轻未来程序员的工作负担，因此应该和代码一样受到重视。

• 优秀的注释可以帮助维护人员理解编码决策，减少技术债务，节省未来程序员的工作量。
• 注释不仅要解释代码的目的和功能，还要提供关键的实现细节和可能的注意事项，以及为未来工作提供标记和提示。
• 注释应当被视为和代码同等重要，并且在开源项目中，优秀的注释和文档可以吸引更多的参与者，提高项目的质量和可维护性。

工具

react-geiger

React Geiger 是一个用于"音频化"React 性能问题的工具。你可以让它在后台运行并发出小的点击声，以指示过多（慢）的组件渲染。你可以在整个应用

更新

Rolldown​

使用 Rust 编写，旨在成为 Vite 项目的未来打包工具。它提供了与 Rollup 兼容的 API 和插件接口，但在范围上更类似于 esbuild。目前仍在积极开发中，但希望能与社区贡献者合作

• Rolldown 是一个用 Rust 编写的 JavaScript 打包工具，旨在成为 Vite 中使用的未来打包工具，并提供与 Rollup 兼容的 API 和插件接口。
• Rolldown 的开发仍处于早期阶段，目前尚不适用于生产环境，但已经开源，希望能够与社区贡献者合作。
• Rolldown 的设计目标是为 Vite 提供单一打包工具，具有原生级性能、兼容 Rollup 的插件接口、适用于大规模应用的高级构建输出控制，并且支持 TypeScript / JSX 转换和代码压缩。

useActionState

这篇文档介绍了一个新的 React Hook，名为 useActionState，旨在取代并改进 ReactDOM 的 useFormState Hook。该 Hook 允许跟踪函数的返回值和挂起状态，并提供了详细的用法示例和潜在的注意事项。此外，还解释了为何需要这个新的 Hook 以及它的优点和对现有代码的影响。

• 新的 React hook useActionState 取代了旧的 ReactDOM useFormState hook，并解决了其存在的混淆和局限性。
• useActionState 返回一个包含最新状态、分发方法和挂起状态的元组，可以用于任何渲染器，不仅限于 react-dom。
• 通过 useActionState，可以自动跟踪函数的返回值和挂起状态，同时支持特定渲染元素（如 react-dom <form> 元素）和服务器操作，实现部分和完全渐进增强。

Astro 4.5

Astro 4.5 发布了，新增了开发者体验改进的 Dev Audit UI、Shiki 1.0、多 CDN 资源前缀、实验性功能 JSON 数据集合的 JSON 模式、新的脚本检测算法等功能。此外，还修复了一些 bug 并进行了一些小的改进。

• Astro 4.5 发布了全新的开发者审计 UI，可以在开发过程中自动识别站点性能和可访问性问题，提高开发者体验。
• 新版本提供了 View Transitions 功能的更新，使得页面切换时组件可以自动根据新的属性重新渲染，增强了用户体验。
• 引入了多个实验性功能，包括为数据集合自动生成 JSON 模式和改进脚本检测算法，以提升开发效率和代码质量。

Open-sourcing our progress on Tailwind CSS v4.0

Tailwind CSS v4 是一个全新的高性能引擎，旨在简化开发者体验，并利用近年来 Web 平台的发展。该引擎是一项全新的重写，使用现有框架知识更好地建模问题空间，提供更快速的构建和更小的安装占用。它还针对现代 Web 进行了设计，包括原生级的级联层、明确定义的自定义属性、容器查询支持等。新架构还使得组合变体成为可能，而无需配置内容路径。此外，CSS-first 配置是该版本的一个重要目标，使得框架感觉更像是 CSS 本地化，而不是 JavaScript 库。此外，还介绍了一些变化和未来 v4.0 版本的路线图，邀请人们尝试 Alpha 版本并提供反馈。

• Tailwind CSS v4 是一个全新高性能引擎，采用了全新架构和自定义解析器，使构建速度提高了 10 倍，体积减小了 35%，并引入了 Rust 语言来处理框架的部分功能。
• Tailwind CSS v4 设计为面向现代 web 平台，包括原生级叠层规则、自定义属性定义、颜色混合透明度调整等现代 CSS 特性支持，并计划引入容器查询、广色域颜色等新特性。
• Tailwind CSS v4 引入了可组合的变体架构，使得可以组合多种选择器的变体，同时还实现了零配置内容检测和 CSS 本地化配置等功能。

The Evolution of Shiki v1.0

Shiki 是一个使用 TextMate 语法和主题的语法高亮器，提供准确、美观的代码语法高亮。作者 Pine Wu 在 2018 年创建了 Shiki，最初用于静态站点生成器和文档网站。然而，Shiki 作为 Node.js 库，无法在浏览器中工作。为解决这一问题，衍生出了名为 Shikiji 的库，使得 Shiki 可以在浏览器中运行，并且包含了许多改进和重写。最终，Shikiji 被合并回 Shiki 项目中，解决了多年的问题，并且还进行了 Twoslash 和 Nuxt Content 的整合，以及对 Twoslash 进行了改进。同时，也提供了多种使用 Shiki 的集成方案。

• Shiki 是一个基于 TextMate 语法和主题的语法高亮工具，通过提前高亮代码并在客户端展示，实现了精确美观的语法高亮，特别适用于静态站点生成器和文档站点。
• 为了解决 Shiki 在浏览器端无法运行的问题，作者进行了一系列实验和重写，最终开发了 Shikiji，使得 Shiki 能够在任何运行环境下工作，并且提供了全新的 API 和内部架构。
• 还开发了 Twoslash 工具，通过与 TypeScript Language Services 集成，使得静态代码片段能够具备类似于 VS Code 编辑器的悬停类型信息，同时还提供了与 Vue SFC 和其他框架文件的整合支持。

设计

Proposal: CSS Variable Groups

这段文字提出了 CSS Variable Groups 的概念，旨在解决设计系统、设计令牌和集成第三方组件时遇到的痛点。其中包括对颜色的定义、别名处理、冗长的变量定义和无法以编程方式引用令牌等问题。提出了使用变量组的语法来解决这些问题，并讨论了如何定义、使用和扩展变量组的各种可能性，以及分解设计的备选方案。

• CSS Variable Groups 提出了一种新的方式来定义多个属性，并在整个组件中传递，以解决设计系统、设计标记和第三方组件集成中的痛点。
• 传统的设计系统中，颜色部分的定义通常需要大量的变量声明和重复工作，而 CSS Variable Groups 提供了一种更简洁、易于管理的解决方案。
• 该提案还探讨了变量组的嵌套、连续变化等功能，以及可能的语法设计和实现挑战，为解决现有的设计系统和组件集成问题提供了新的思路和可能性。

其他

你无事可做时，未来看起来就会让人灰心丧气。我早已放弃了为人生寻找某种意义之类的事情，但我确实尝试寻找一些有趣的事情来做。

-- Hacker News 读者

幸福的三大要素是：有要做的事（something to do）、有要爱的人（someone to love）、有寄予希望的东西（something to hope for）。

-- 亚历山大·查默斯，19 世纪美国著名医生