2024-第二十七周

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

技术

5 Misconceptions about React Server Components

React 团队引入了 React 19 和 Next.js 15 的稳定版本，同时推出了 React Server Components (RSC) 范式，将组件分为服务器组件和客户端组件。服务器组件仅在服务器上运行，不会影响捆绑包大小，旨在优化效率、加载时间和交互性。客户端组件则是通常的组件，用于处理客户端交互和状态管理。文章澄清了有关 RSC 的五个常见误解，包括对组件的使用建议、声明方式、渲染位置、use client 和 use server 指令的作用、以及组件的嵌套方式。文章强调了 RSC 并不意味着完全取代客户端组件，而是提供了更多工具来构建高效的 React 应用。

• React 19 和 Next.js 15 引入了 React 服务器组件 (RSC) 范式，将服务器组件和客户端组件区分开来，旨在优化效率、加载时间和交互性。
• 使用服务器组件和客户端组件需平衡考虑，服务器组件适用于服务器端渲染和数据获取，而客户端组件则适用于客户端交互和状态管理。
• 客户端组件和服务器组件可以灵活组合使用，通过将服务器组件作为属性传递给客户端组件，实现了服务器端操作和客户端交互的高效整合。

Opinions for Writing Good CSS

这篇文章谈到了 CSS 对初学者来说可能会很困难和令人沮丧，因为它与传统编程语言有很大不同。作者分享了一些关于写好 CSS 的建议，包括避免不必要的 CSS、不滥用 Id 选择器、避免使用!important、建立一致的系统、重视 CSS 变量等。作者强调了理解代码库、响应式设计、避免在组件上使用边距和容器上使用填充，以及不要简单粗暴地粘贴 CSS 代码等观点。

• CSS 的难点在于灵活性和复杂性，需要学习者有明确的编码风格和系统化的方法来写好 CSS。
• 在编写 CSS 时，应该避免包含不必要的样式，避免使用 ID 选择器和!important，并建立系统化的一致性。
• 合理使用 CSS 变量，理解设计的响应式需求，并避免在组件上使用 margin 以及在容器上使用 padding，同时不要通过复制粘贴来写 CSS。

How to Annul Promises in JavaScript

这篇文章介绍了在 JavaScript 中如何取消普通 Promise，其中提到了两种方法：一种是使用 Promise.withResolvers() 方法，另一种是使用 AbortController。文章还展示了如何构建可取消的异步任务和请求，并介绍了如何在 React 中封装一个简单的顺序请求 Hook。同时，文章提到了一些使用场景，并鼓励读者分享其他用例。

• JavaScript 的 Promise 目前不支持原生的取消功能，但可以利用 Promise.withResolvers() 方法或 AbortController 实现 Promise 的取消效果。
• 使用 Promise.withResolvers() 方法可以创建具有取消功能的 Promise，并在需要时手动触发取消操作。
• 使用 AbortController 可以实现类似于取消 fetch 请求的效果，可以用于构建可取消的 fetch 或用于在 React 中封装顺序请求的 Hook。

Enhancing The New York Times Web Performance with React 18

这篇文章介绍了纽约时报网站升级到 React 18 的过程，以及他们在升级过程中遇到的挑战。文章提到了 React 18 带来的许多性能改进和新功能，并详细描述了他们在升级过程中所做的工作。同时也介绍了他们在解决 React 18 带来的一些意外问题时所采取的方法。最终，他们成功地实现了性能的飞跃，并揭开了许多未来改进的可能性。

• React 18 的升级为纽约时报网站带来了显著的性能提升和 INP 分数下降，但也带来了对自定义嵌入式交互元素的新挑战。
• 在升级过程中，工程师们需要逐步替换过时的测试库，更新依赖，同时解决 React 18 对嵌入式交互元素的严格要求，以确保网站的稳定和性能。
• 通过精细调整和处理嵌入式交互元素的代码，工程师们成功地克服了 React 18 带来的挑战，实现了网站性能的显著改善，为未来的功能探索打开了新的可能性。

Wait for pending: A Suspense algorithm exploration

这段文字讨论了在 React@19 中，关于<Suspense>的时序处理方式。作者提出了一种称为“wait for pending”的算法，以解决现有算法在处理异步组件时可能引发的问题。文章比较了 React@18 和 React@19(alpha) 的<Suspense>算法，并探讨了“wait for pending”算法对于平面异步树和嵌套异步组件的影响。最后，作者总结了这种新算法的优势和局限。

• 在 React@19 中，提出了一种名为“等待挂起”的 <Suspense> 算法，它在处理平面异步树时能够快速调用渲染函数并最小化重新渲染。
• “等待挂起”算法与 React@18 的 <Suspense> 算法相似，但与 React@19 算法相比，它在每个级别上都能够进行并行处理。
• 对于具有嵌套异步组件的树结构，使用“等待挂起”算法可能会减少冗余渲染，但异步子组件需要等待其父级的兄弟组件完成渲染才能调用其初始渲染函数。

重新构想原子化 CSS

这篇文章介绍了原子化 CSS 的概念、背景和工作原理，重点讨论了 UnoCSS 引擎的特性和性能，以及它作为原子化 CSS 框架的灵活性和可定制性。文章指出，UnoCSS 具有高性能和灵活性，并适用于新项目或作为现有 CSS 框架的补充。文章强调 UnoCSS 仍处于实验阶段，但对于对其感兴趣的读者来说，可以通过它的仓库和在线 Playground 进行尝试和探索。

• 原子化 CSS 是一种 CSS 架构方式，偏向于小巧且用途单一的 class，并以视觉效果进行命名。
• UnoCSS 是一款高性能且极具灵活性的即时原子化 CSS 引擎，支持可变修饰、属性化模式和纯 CSS 图标等特性。
• UnoCSS 采用按需生成方式，跳过解析，不使用 AST，具有出色的性能表现，同时支持 CSS 作用域和预设，可作为现有 CSS 框架的补充使用。

How to Upgrade to openSUSE Leap 15.6 from Leap 15.5

本文介绍了从 openSUSE Leap 15.5 升级到 Leap 15.6 的详细步骤。包括备份系统数据、检查更新仓库、更新所有软件、刷新到新的 15.6 仓库、以及执行升级并重新启动系统的过程。文章强调了在升级过程中避免 X 窗口图形模式，并提供了相关命令和提示。最终，文章鼓励读者查阅 openSUSE 官方文档以获得额外帮助，祝贺读者成功完成系统升级。

• openSUSE Leap 15.6 升级：本文提供了从 openSUSE Leap 15.5 顺利升级到 Leap 15.6 的详细步骤，确保用户能够轻松自信地完成系统升级。
• 系统备份和更新：在升级前，强烈建议用户先进行系统备份，然后检查和更新所有软件，以确保数据安全和系统完整性。
• 升级执行和结果验证：完成备份和更新后，用户需要刷新软件源到 Leap 15.6，然后执行升级命令，并在升级完成后重启系统验证升级结果。

工具

superstruct

Superstruct 是一个简单且可组合的 JavaScript（和 TypeScript）数据验证工具，旨在提供易于定义接口并对数据进行验证的方式，并提供详细的运行时错误。它支持自定义类型、验证数据的同时进行类型转换和提供详细的错误信息，并且遵循单一真相源的原则。与其他验证库不同，Superstruct 避免了常见的维护问题，并且具有熟悉的 API，使其易于上手。

• Superstruct 是一个简单且可组合的 JavaScript（和 TypeScript）数据验证库，能够在运行时对数据进行详细的验证和错误处理。
• Superstruct 提供了灵活的自定义类型定义和组合接口，以及可处理默认值、可选值、错误抛出和返回、数据强制转换等功能。
• Superstruct 的设计原则包括可定制的类型、无偏见的默认设置、可组合的接口、有用的错误提示和熟悉的 API，解决了其他验证库存在的问题，提供了更好的数据验证体验。

fast-json-stringify

一个比 JSON.stringify() 快 2 倍的 JSON 序列化库。

inwind-landing-page

一个免费、开源且功能强大的落地页模板。

更新

What's coming next for ESLint

ESLint v9.0.0 发布后，开发团队着手创建兼容性工具、配置迁移工具和规则 API 变换工具，为接下来的重大改变做准备。未来计划推出 ESLint 的语言插件，将 JavaScript 相关功能移到@eslint/js 包中，并开发针对 JSON 和 Markdown 的语言插件。此外，他们计划对核心进行全面重写，建立现代化、运行时无关的核心 API 和全新的 CLI。重写旨在消除技术债务，提供更灵活的集成和更好的类型定义。这些改变将使 ESLint 成为一个与语言无关的通用代码检测工具，希望能够迎接未来的 11 年。

• ESLint v9.0.0 引入了新的配置系统和语言插件，将逐步将 JavaScript 相关功能移至@eslint/js 包中，以及引入新的@eslint/json 和@eslint/markdown 包。
• 为了实现语言插件 RFC，ESLint 团队进行了大量工作，包括规则 API 变更、核心重构和创建新的语言插件，以使 ESLint 成为一款通用的代码检测工具。
• 为了解决 ESLint 当前面临的技术债务和限制，团队决定进行 ESLint 核心的完全重写，创建了新的 eslint/rewrite 存储库，并计划构建现代化、可组合的 API 以及全新的 CLI。

设计

Build better responsive designs in less code.

这段文字介绍了 fluid-tailwind 插件的特性、安装方法、基本用法以及一些限制和故障排除方法。它还介绍了如何自定义默认断点和容器、处理流体类型的可访问性错误，以及如何将流体工具与媒体查询结合使用。

• fluid-tailwind 是一个可以让 Tailwind CSS 实用程序具有流体特性的插件，使得在不同屏幕大小下实用程序的样式可以自动调整。
• 该插件支持自定义默认断点和容器，并能够检查生成的流体类型是否符合无障碍要求。
• 使用 fluid-tailwind 可以在不同屏幕大小和容器宽度下创建流体类型的样式，并且可以与媒体查询和自定义前缀或分隔符一起使用。

AI

experts

Experts.js 提供了最简便的方法来创建和部署 OpenAI 的助手，并将它们连接成工具，从而打造出拥有更强大记忆和关注细节能力的先进多人工智能代理系统。

其他

我们花费了地球上一半的工程努力，来为每个应用程序添加 AI 聊天机器人，而世界上一半的行业还没有弄清楚如何经常备份数据库。

推出 AI 产品的公司数量，远远超过了实际用例的数量。他们的大多数人只是骗子和炒作者。

-- 《如果你再提 AI，我就要发作了》

日本公共交通非常发达，几乎每个角落都能到达。其中一个原因是，日本有很多个人的小型零售企业（夫妻店），他们需要发达的公共交通带来人流，政府不得不维持公交系统。

-- 《日本城市化的秘密》

我知道许多开发者不喜欢前端，主要有两个原因。一是前端太受流行风潮的影响，二是前端开发者主要由年轻的/新入行的/自学的人员组成，他们“不断发现”新范式。

这使得前端技术极不稳定，你学不到真正长久的东西，一切都每过六个月到两年重复一次，这就像看着只活一天的蜉蝣在争论长期的政治问题一样。

-- Hacker News 用户