2024-第九周

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

技术

译：Astro 是什么

这篇文章介绍了 Astro 框架的特性和使用方法。它强调了 Astro 的专注点，包括构建内容为中心的网站、灵活性、快速构建和服务器端渲染。文章还讨论了如何使用 Astro 创建静态和动态网站，以及如何与后端服务平台集成。同时还提到了内容集合、Astro 组件、服务器端点（API 路由）和保持项目最新的方法。

• Astro 是一个专注于构建网站的框架，它非常专注于内容丰富的网站，比如博客和电子商务，但对于更动态的内容可能不太适合。
• Astro 采用灵活的框架，可以使用自己的 UI 框架，如 React、Vue 等，并提供快速的构建体验。
• Astro 可以用于单页应用程序 (SPAs)，并且具有灵活的客户端指令和内容集合功能，支持服务器端渲染和混合渲染。

译：ARCHITECTURE 文件

这段文字主要介绍了为开源项目编写 ARCHITECTURE 文档的重要性以及如何编写这样的文档。作者强调了了解项目的物理架构对于贡献者和核心开发者之间的差异的重要性，并提出了编写 ARCHITECTURE 文档的几点建议，包括描述项目的高层架构、绘制代码图、命名重要的文件、模块和类型，明确指出架构不变性，以及指出层与系统之间的边界等。最后，作者还提到了一个来自 rust-analyzer 项目的 ARCHITECTURE 文档的示例。

• 建议在开源项目中添加一个 ARCHITECTURE 文档，描述项目的高层架构，以便贡献者更容易理解项目物理架构。
• ARCHITECTURE 文件应保持简短，描述项目的鸟瞰图和代码图，指定粗粒度模块和它们之间的关系，避免深入到每个模块的工作细节。
• 文档还应明确指出架构不变性，指出层与系统之间的边界，并添加关于横切关注点的单独部分，以帮助理解项目结构。

Next.js 14 SEO 最佳实践（2）Next.js 14 SEO 要点

这篇文章主要介绍了在 Next.js 14 中优化页面组件以适应 SEO 的最佳实践。内容涵盖了避免在页面组件中使用 'use client',增加组件颗粒度，使用 server 组件，使用 <Link> 而不是 router.push() 进行页面跳转，统一通用导航，分离工具函数和依赖，使用 [[...slug]] 处理 URL，以及制作 robots.txt 和 sitemap.xml。文章还提到了招商信息和系列文章目录。

• 页面组件避免 'use client'，确保返回页面 metadata 增加组件颗粒度，创造条件使用 server 组件。
• 使用 <Link> 而不是 router.push(newPage) 跳转，全站使用统一的通用导航，分离工具函数和依赖，避免污染。
• 使用 [[…slug]] 处理 URL，制作 robots.txt 与 sitemap.xml，增加组件颗粒度，创造条件使用 server 组件。

译：快速 Rust 构建

这篇文章讨论了如何优化 Rust 项目的构建时间。作者指出了构建时间的重要性，并提出了一些实用的方法来减少编译时间。他讨论了关于构建时间的一些常见陷阱，如 CI 缓存、构建模型的问题，以及如何监视和保持实例化检查。同时，他还强调了泛型代码在构建时间上的影响，并提出了一些设计原则，以减少泛型代码对编译时间的影响。

• Rust 项目的编译时间对于构建速度、工作流和持续集成具有重要影响，因此需要关注和优化。
• CI 缓存策略、工作流的分解以及禁用增量编译和 debuginfo 等措施可以有效减少构建时间。
• 单态化、实例化检查和合理设计通用接口可以降低泛型函数实例化对编译时间的负担，最终提高构建速度。

Waku

这段文字介绍了名为 Waku 的轻量级 React 框架，旨在加速初创公司和代理机构构建中小型 React 项目的开发工作。它支持现代 React 服务器组件架构、提供服务器和客户端组件以及路由功能，并介绍了一些使用示例和部署选项。同时，还提到了 Waku 的发展路线图和对社区贡献者的期待。

• Waku 是一个极简的 React 框架，旨在加速初创公司和机构构建中小型 React 项目的开发工作。
• 该框架引入了现代 React 渲染的强大模式，包括服务器组件和客户端组件，并支持静态预渲染和服务器端渲染。
• Waku 提供了路由、页面、布局、数据获取、状态管理等功能，并支持多种部署方式，旨在为开发者提供愉快的 React 开发体验。

How to transfer binary data efficiently across worker threads in NodeJs

这篇文章主要讨论了通过 postMessage 传输二进制数据的方法，包括直接发送 Buffer、使用 ArrayBuffer 和传输 ReadableStream。文章比较了这些方法的效率和资源消耗，并指出了它们的适用情况和注意事项。

• 通过 postMessage 调用，可以使用结构化克隆算法发送对象、字符串、数组、数字，甚至支持循环引用和日期。
• 可以通过发送 Buffer、ArrayBuffer 和 ReadableStream 等方式传递二进制数据，其中 ArrayBuffer 和 ReadableStream 的传递方式更为高效。
• 传输大量数据时，ReadableStream 的方式最为资源友好，但需要注意在 Worker 停止运行时，无法继续读取传输的流。

Going beyond pixels and (r)ems in CSS - Container query length units

这篇文章介绍了容器查询长度单位及其使用方法。作者详细解释了 cqw、cqh、cqi、cqb 以及 cqmin 和 cqmax 单位的含义和应用场景，并提供了实际示例和代码演示。文章强调了容器查询和相关单位对于日常 CSS 编写的重要性，并鼓励读者在 2024 年加强对这些新单位的掌握，以提升 CSS 技能水平。

• 容器查询长度单位的基本概念和使用方法，包括 cqw、cqh、cqi 和 cqb 单位的介绍和示例演示。
• 使用 clamp() 函数和 cqmin、cqmax 单位来实现容器查询长度单位的动态调整，以适应不同视口和容器形状的样式定义。
• 对容器查询长度单位的重要性和未来发展进行了讨论，强调了它们在日常 CSS 工作中的重要性和潜在影响，鼓励更多人熟练掌握并应用这些单位。

How to use Server Timing to get backend transparency from your CDN

这篇文章讨论了网页性能优化中后端响应时间的重要性，并介绍了如何利用服务器计时头部 (Server-timing headers) 来分析后端请求的处理时间。文章提到了行业标准和案例研究，以及如何在内容交付网络 (CDN) 中使用服务器计时头部。同时，还介绍了如何在 SpeedCurve 中收集服务器计时头部数据，并提供了一些 CDN 提供的服务器计时头部的示例。

• 80% 的终端用户响应时间花在前端上。
• 服务器计时标头是了解后端时间消耗的关键工具。
• 服务器计时标头可以帮助了解 CDN 的性能，并可以通过 SpeedCurve 进行收集和分析。

Instant Search Params with React Server Components

这篇文章介绍了 React 的新 Server Component 范式中的路由处理问题，以及介绍了新的实验性 hook useOptimistic 的解决方案。文章通过讲解使用 useOptimistic hook 来构建响应即时客户端交互的过滤面板，并解决了在动态 RSC 应用中 URL 驱动的过滤面板不够灵活的问题。文章还探讨了在构建过滤面板时使用 router.push 的问题，并介绍了如何使用 useOptimistic 来解决这些问题，最终得到了即时响应用户交互的过滤面板。

• React 的新 Server Component 范式中，导航是以服务器为中心的，动态 RSC 应用中的导航会导致 React 在更新页面之前等待服务器往返。
• 新的实验性 useOptimistic 钩子是解决这个问题的优雅解决方案，它允许将短暂的客户端状态与服务器端数据合并，非常适合构建可以立即响应客户端交互的过滤面板。
• useOptimistic 让我们在客户端提供即时反馈，同时在服务器端重新渲染页面时也能管理页面组件，实现了服务器和客户端共同合作提供良好用户体验的例子。

Secure statically rendered paid content in Next.js (with the App Router)

这篇文章讨论了在 Next.js 中实现付费博客的安全访问控制的方法。作者介绍了三种不同的方法：错误的方法是在布局中进行认证检查，正确但不够优化的方法是在获取数据时进行动态检查，而更好的方法是通过边缘中间件提前进行认证检查，从而实现静态渲染。文章强调了静态渲染的性能优势，并指出这种方法也适用于其他模式的实现，如 AB 测试和特性标志。

• 错误的方式：在布局中进行身份验证不起作用，因为布局并不形成类似于 Express 中的中间件链。
• 动态方式：在获取数据时进行身份验证，可以使用缓存来减少对数据源的调用，但仍需要为每个请求渲染页面。
• 静态方式：通过边缘中间件提前检查身份验证，使内容保持静态并且只有付费用户能够访问，从而实现最佳性能。

Avoiding Hydration Mismatches with useSyncExternalStore

这篇文章讨论了在 React 开发中可能遇到的水合错误，并介绍了几种解决方法。作者提到了 suppressHydrationWarning、双重渲染和 useSyncExternalStore 等方式来解决水合不匹配的问题，并探讨了每种方法的优缺点。同时，文章还展望了未来可能通过 HTTP 客户端提示来改善这一情况。

• React 开发中最令人害怕的错误之一是水合错误，即服务器渲染的文本内容与客户端渲染的 HTML 不匹配。
• 解决水合错误的方法包括使用 suppressHydrationWarning 属性、双重渲染和 useSyncExternalStore 钩子。
• 未来，希望通过 HTTP 客户端提示来改善这种情况，使服务器能够在渲染之前知道仅在客户端可用的信息。

工具

react-rnd

一个用于 React 的可调整大小和可拖动的组件。该组件可以让您在界面中自由地调整大小和拖动，提供了更灵活的交互体验

vue-color-wheel

🎨 一款适用于 Vue 的颜色选择工具

更新

Announcing TypeScript 5.4 RC

TypeScript 5.4 发布候选版，包含多项新特性和改进。新特性包括闭包中保留类型收窄、NoInfer 实用类型、Object.groupBy 和 Map.groupBy 方法、支持 require() 调用、检查导入属性和断言、快速修复缺少参数等。另外，还介绍了 5.5 版本即将废弃的功能，以及一些行为变化和错误修复。未来版本将取消对某些选项和行为的支持，并提供了迁移建议。

• TypeScript 5.4 发布候选版本，带来了新的语言功能和改进，包括闭包内的类型缩小、新的 NoInfer 实用类型和 Object.groupBy 以及 Map.groupBy 方法。
• TypeScript 5.4 引入了 NoInfer 实用类型，解决了泛型函数类型推断不准确的问题，使得类型推断更加精确。
• TypeScript 5.4 还增加了对 require() 调用的支持，改进了模块解析和保留模块等方面的功能，同时也对一些行为进行了调整，包括对枚举、模板字符串和交集类型的更改。

7.24.0 Released: Decorator updates and JSON modules imports

Babel 7.24.0 发布了新版本，更新了装饰器实现和类私有字段方法转换方式。还新增了对 JSON 模块的支持，并介绍了 Hermes 引擎的 Flow 解析插件。同时呼吁社区支持和参与 JavaScript ECMAScript 提案的实现。

• Babel 7.24.0 发布了，更新了装饰器实现和类私有字段和方法的转换方式，还增加了对 JSON 模块的支持。
• 装饰器更新遵循最新的提案版本，可以通过设置"version": "2023-11"选项启用，JSON 模块导入可以通过@babel/plugin-proposal-json-modules 插件启用。
• Babel 还实现了对 Hermes 引擎的支持，可以通过@babel/preset-flow 的 experimental_useHermesParser 选项启用。

设计

The Linear Look

这篇文章介绍了一种在科技 SaaS 领域流行的网页设计风格，以 Linear 的主页为代表。文章列举了这种风格的主要元素，包括深色背景、多彩的模糊光晕、网格布局、屏幕截图、超细线条、电路图形、玻璃效果、渐变标题和无衬线字体等。此外，文章还列出了多个采用这种风格的网站链接，并提到了未来可能需要使用 Wayback Machine 查看网站变化。文章作者还邀请读者补充可能遗漏的信息或发现更多符合这种风格的网站。

• 技术 SaaS 世界中一种风格似乎正在流行，就是由 Linear 首页所推广的风格，许多网站都在加入自己的元素，形成了一种流行趋势。
• 这种风格的主要特点包括暗色背景、多彩模糊光晕、格子图案背景、屏幕截图替代照片、超薄线条、电路风格图形、边框高光、玻璃效果、微妙的渐变标题以及无衬线字体。
• 文中列举了一系列采用这种风格的网站，如 Linear、Particl、Resend 等，并鼓励读者在未来也用 Wayback Machine 回顾这些网站，同时欢迎读者分享更多相关网站或风格的秘密。

Amit Merchant

这篇文章介绍了如何使用纯 CSS 创建动态进度条，无需 JavaScript。通过使用圆锥渐变和 CSS 变量，可以轻松地实现动态进度条的效果，包括进度百分比和颜色的动态变化。文章还提供了完整的 HTML 和 CSS 代码示例，以及如何在 HTML 中使用内联样式或 JavaScript 动态改变进度条的百分比和颜色。

• 这篇文章介绍了如何使用纯 CSS 中的圆锥渐变来创建动态进度条，无需使用 JavaScript。
• 作者首先展示了如何创建一个简单的红色圆圈，并通过添加圆锥渐变实现了半圆填充效果，然后通过子元素模拟出进度条的效果。
• 最后，作者演示了如何通过 CSS 变量来实现动态改变进度百分比和颜色，从而创建了一个完全基于 CSS 的动态进度条。

AI

StarCoder2 及 The Stack v2 数据集正式发布

这篇文章介绍了 BigCode 推出的新一代开放源代码大语言模型 StarCoder2，包括了三种规模的模型：30 亿、70 亿和 150 亿参数，并详细介绍了这些模型的训练数据集 The Stack v2。文章还提到了 The Stack v2 数据集的来源和特点，以及 BigCode 项目的合作伙伴关系和相关链接。

• BigCode 推出了全新一代的开放源代码大语言模型 StarCoder2，包括 3B、7B 和 15B 三种规模的模型。
• StarCoder2 模型基于 The Stack v2 数据集进行训练，该数据集是迄今为止最大的开放代码数据集，源自软件遗产档案。
• BigCode 是由 Hugging Face 和 ServiceNow 联合领导的开放科研合作项目，致力于负责任地开发代码用大语言模型。

其他

人类历史上从未有过如此孤独的时期。在西方各国，独居人数不断增加，创了历史新高。
这在一定程度上是医疗技术延长人类寿命的结果，但这也是自由主义的结果，个人对自己的生活安排有了更多的选择，比如延迟结婚和高离婚率。孤独是个人自由主义不可避免的结果。

-- 《我们都会变得无聊》

互联网购物已经娱乐化了。人们购物不完全是出于生活需要，而是忍不住想做点什么，为了消磨时间。

-- 《快时尚赌场》