Published on

2023-第四十三周

Authors

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

技术

Guide to React Suspense and use hook for busy bees

在 React 18 中，Suspense 得到了重大升级，支持了 SSR 流式传输和选择性注水。最近，React 文档中还记录了一个名为"use"的新钩子，它大大简化了使用 Suspense 进行数据获取的过程。然而，虽然 Suspense 已经存在了 5 年，但 React 团队仍然不推荐在生产环境中使用它。此外，这个新的"use"钩子也没有作为稳定版本的 React 的一部分发布。要尝试使用它，你需要使用 Canary 或者实验性的 React 渠道。Suspense 是一个边界，用于隔离在渲染时正在加载的子树。当 React 遇到一个还没有准备好渲染的组件时，它会向上遍历到最近的 Suspense 边界，暂停其子树的渲染，并显示提供的占位内容。一旦引起暂停的组件加载完成，整个树将重新渲染并显示出来。Suspense 的使用场景包括懒加载组件、数据获取和服务端渲染。使用 Suspense 可以简化数据获取的代码，并提供了改进的服务端渲染和选择性注水等优化。目前，可以使用"use"钩子来读取资源的值，可以使用上下文和 Promise 作为资源。至于数据获取，可以自己编写一些包装代码，使用"use"钩子来实现类似 SWR 或者 react-query 的

  • React 的 Suspense 功能在 React 16.6 中引入，用于代码拆分和数据获取，但在 React 18 中得到了重大升级。
  • Suspense 可以用于悬挂子树，当某个组件还未准备好渲染时，React 会隐藏该子树并显示替代内容，直到组件加载完成后再重新渲染整个树。
  • Suspense 的好处包括简化数据获取代码、提高服务器端渲染 (SSR) 效果、实现渐进式加载和选择性注水等功能。

2023: 0 of the Global Top 100 Websites Use Valid HTML

这篇文章是关于对全球最受访问的 100 个网站进行 HTML 和 CSS 符合性测试的结果。结果显示，没有一个网站完全符合 HTML 规范，平均有 132.14 个 HTML 错误。在 CSS 方面，有 12 个网站没有 CSS 错误，平均有 46.79 个 CSS 错误。作者认为符合性对于网页开发至关重要，但数据显示行业中并没有改变的趋势。作者是一位工程主管和作家，他鼓励开发者以身作则，编写有效的代码。

  • 2023 年，全球前 100 个最受欢迎的网站中没有一个完全符合 HTML 规范。
  • 平均而言，这些网站的 HTML 错误数量为 132.14 个，中位数为 62 个。
  • 在 CSS 方面，12 个网站没有 CSS 符合性错误，而平均错误数量为 46.79 个。

Speeding up the JavaScript ecosystem - Tailwind CSS

这篇文章讨论了优化 Tailwind CSS 性能的方法。作者通过对 Tailwind 的代码进行性能分析，发现了一些潜在的问题，并尝试从头构建一个性能优化的 Tailwind 架构。文章主要关注了 Tailwind CSS 的工作原理以及优化提取阶段的方法。作者通过使用正则表达式来减少搜索空间，从而提高了 Tailwind 的性能。最终，作者将提取时间从 388 毫秒减少到了 98 毫秒，取得了显著的改进。

  • Tailwind CSS 是一种流行的网页项目样式设计框架，本文将探讨其背后的架构及如何改进。
  • 通过对 Tailwind CSS 的性能分析，发现了一些关键的时间消耗点，包括配置和插件初始化、CSS 生成以及 PostCSS 处理等。
  • 通过优化代码的抽取阶段和使用正则表达式等方法，成功将 Tailwind CSS 的抽取时间从 388ms 降低到了 98ms，实现了大约 4 倍的性能提升。

Client-Side-Servering: My Perspective on Next.js Server Actions

这篇文章讨论了新的 Web 开发模式——Server Actions，它允许客户端代码生成服务器端点。作者对这种模式持怀疑态度，提出了安全性、RPC、可重用性和新手开发者等方面的问题。作者认为还是传统的服务器端渲染更可靠。

  • 服务器操作模式（Server Actions）将客户端代码转换为服务器端的端点，这种模式在 Web 开发中引起了广泛讨论和争议。
  • 服务器操作模式带来了安全隐患，因为将客户端和服务器代码混合在一起可能会模糊边界，增加了 SQL 注入、CSRF 等安全威胁的风险。
  • 服务器操作模式对于经验丰富的开发人员可能不成问题，但对于新手开发人员来说，可能会忽视网络调用的细节和必要的预防措施，导致性能和错误处理等方面的问题。

⭐Out of Order Streaming from Scratch

这篇文章介绍了 HTTP 流式传输的重要性和激动人心之处。它解释了什么是无序流式传输，以及 React 和 Next.js 是如何通过无序流式传输来提高网页性能和交互性的。文章还提到了现代框架如 Next.js 可以自动进行这种优化，无需额外的客户端代码。总的来说，无序流式传输有助于逐步改善网页加载和提供更好的用户体验。

  • 最近 HTTP 流媒体变得非常重要，因为它能够在页面渲染过程中异步地向 UI 发送更新，提高用户体验。
  • 传统的 HTTP 流媒体只能按顺序发送数据，无法对已发送的数据进行操作，但通过使用 React 和 Next.js 实现的乱序流媒体，我们可以在页面加载过程中逐步替换内容。
  • 乱序流媒体通过发送页面的"外壳"和延迟加载的部分，然后在页面加载完成后再动态替换，提供了更好的感知性能，使页面逐步增强，而不是在加载过程中一直是空白的。

On Mixing Client and Server

React 的新范式是在 Server Components 中混合客户端和服务器代码。通过"use server"指令，您可以在服务器上独占地运行组件。这意味着您可以在组件代码中编写异步数据库查询等操作。甚至可以在 JSX 代码中混合 SQL 或其他语言。这种架构的优点是更高的性能和代码协作的简化。它也带来了一些问题，如代码运行位置的混淆、对依赖关系的影响、关注点分离的挑战、调试复杂性和对基础架构的假设。

  • React with Server Components 是一种新的架构范式，能在 React 中混合客户端和服务器代码，从而提供更高的性能和更快的迭代时间。
  • 这种架构使得前端开发人员可以在组件中直接编写异步数据库查询等服务器端操作，减少了前后端开发人员之间的协作和代码切换。
  • 然而，这种架构也带来了一些问题，比如代码运行环境的混乱、复杂的渲染流程调试困难以及对基础设施的隐式依赖。

工具

crypto-hash

使用 Node.js 和浏览器中的本地加密 API 的微型哈希模块

next-wednesday

一个紧凑、零依赖的库，从装饰类构建 Next.js 13+ 应用程序路由处理程序，在 Next.js 环境中充当“纳米级 NestJS”。

更新

WebAssembly Garbage Collection (WasmGC) now enabled by default in Chrome

这篇文章主要介绍了垃圾回收（Garbage Collection）和 WebAssembly（Wasm）编程语言的相关内容。垃圾回收是一种回收程序不再使用的内存的方法，而 Wasm 是一种可以将高级编程语言编译为 WebAssembly 的技术。文章还提到了 WasmGC，它是一种提供了非线性内存分配支持的 WebAssembly 扩展，可以让编程语言

  • 垃圾回收是指程序尝试回收不再被引用的内存，以便重新利用。
  • WasmGC 是 WebAssembly 社区提出的一项提案，可以让编程语言在 WebAssembly 中使用现有的垃圾回收器。
  • Kotlin 是第一个通过 WasmGC 实现在 WebAssembly 上运行的编程语言之一，它可以与 Android 应用程序的用户界面进行交互。

Chrome 120 beta Chrome 120 测试版

这篇文章介绍了 Chrome 120 版本的一些新功能和更新，包括 CSS 特性的增加、HTML Accordion 模式的改进、Web API 的更新，以及权限策略违规报告和媒体会话 API 的改进等。

  • Chrome 120 版本引入了七个新的 CSS 功能，包括自定义属性的图像语法、方向选择器、指数函数、遮罩等。
  • 新增了 HTML Accordion 模式，通过 name 属性在<details>元素上构建手风琴效果。
  • 更新了 Web APIs，包括允许将 ArrayBuffer 传递给 VideoFrame、AudioData、EncodedVideoChunk 等对象，并添加了 FontFaceSet 的 check() 方法，以及各 - 种 API 来处理关闭请求、身份验证流程等。

What's new in Chrome 120 for Extensions

Chrome 120 版本的 Chrome 扩展平台迎来了一些新功能和改进。其中包括新增了用户脚本 API，增加了静态规则集的限制，引入了阅读列表 API 以及在 ChromeOS 上实现了文件处理功能。此外，还修复了服务工作者在 30 秒内触发事件的问题。总体而言，Chrome 扩展平台在过去一年取得了很大的进步。

  • Chrome 120 版本的发布填补了 Manifest V3 已知问题清单中的剩余平台差距，包括新的 userScript API 和对 ChromeOS 的文件处理支持。
  • 新的 userScripts API 使得 Chrome 扩展现在可以管理用户脚本的集合，并确定何时以及如何将它们注入到网页中。
  • Chrome 120 还引入了新的 ReadingList API，使得扩展可以创建、读取、更新和删除阅读列表条目，并提供了更便捷的文件处理功能。

Remix ❤️ Vite

Remix v2.2.0 引入了 Vite 的不稳定支持，用户现在在使用 Remix 时即可享受到 Vite 提供的闪电般的开发体验 (DX)。Remix 已经不再是一个编译器，它本身就是一个 Vite 插件，用户可以享受到 Vite 插件生态系统的所有优势。

  • 在 M1 Max MacBook Pro 上进行的快速测试中，我们发现 Remix 现在的热模块替换 (HMR) 速度提高了 10 倍，HDR 速度提高了 5 倍。
  • 使用 Vite，Remix 可以全面依赖 Vite 插件处理除核心之外的功能，如将 SVG 作为 React 组件导入，使用tsconfig 路径别名，或者使用 MDX 等。
  • Remix Vite 插件的更多优势包括近乎即时的开发启动，预打包依赖，增量热更新，大大减少内存使用，自动按路由分割 CSS，更好地在 HMR 期间保留浏览器状态，自动热更新服务器等。
  • 为什么现在 Remix 引入 Vite 的支持？简单的答案是，当 Remix 开始开发时，Vite 尚未发布稳定版本！
  • 2023 年 6 月，Remix 开始为 Vite 开发插件。至今，Remix 正在与 CloudFlare (CF) 核心团队合作，并有信心在 Remix Vite 插件稳定之前提供最佳的 CF 支持。

设计

Naming Variables In CSS CSS 中的变量命名

这篇文章讨论了如何命名 CSS 自定义属性（变量）。作者提出了一种使用连字符和驼峰命名法相结合的命名方法，以及使用命名空间来避免命名冲突。他还提到了在变量名中包含值类型信息以及使用基于值和基于用途的命名方法。此外，文章还探讨了颜色调色板的命名和使用。总体而言，这篇文章提供了一些关于 CSS 自定义属性命名的思考和建议。

  • 命名变量是困难的，我们可以考虑使用 camelCase 命名法。
  • 使用命名空间可以避免变量冲突，并提供指示信息。
  • 在变量名中包含值的类型信息可以帮助代码维护者理解变量的含义。

AI

misgif

Misgif - 将你的脸放入你最喜欢的 GIF 中

ludwig

用于构建定制的 LLMs、神经网络和其他 AI 模型的低代码框架

其他

有一次，古希腊哲学家皮浪乘船时，遇到了巨大的暴风雨。他看到有些乘客非常害怕，就以自己携带的猪还在专心进食，来安慰他们不要担心。
这件事让我们思考，人类引以为傲的理性，是不是在折磨我们，让我们失去平静？

-- 蒙田，法国哲学家

电影公司为了票房，让电影从独立的故事，转变为互相交叉和联系的系列电影，这样做的风险不断增加，因为故事变得如此复杂，以至于看电影从一种娱乐变成了需要事前做一些家庭作业。

-- 《超级英雄故事的生命周期》

react-iztro

基于 iztro 实现的紫微斗数星盘 React 组件

Discuss on Twitter • View on GitHub