2024-第四十六周

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

技术

⭐️轻松了解容器查询

这篇文章介绍了 CSS 的 container queries 特性，解释了它们的作用以及使用方法。容器查询允许根据元素的容器大小条件性地应用 CSS 样式，但由于一些限制，容器查询的使用并不像媒体查询那样直观。通过介绍容器查询的基本概念、不可能的问题和解决方法，以及浏览器支持情况，文章强调了容器查询对响应式设计的重要性，并呼吁开发者和设计师共同利用这一新特性。

• CSS 容器查询是近年来最受期待的 CSS 功能之一，可以根据元素的容器条件性地应用 CSS 样式，但容器的定义需要遵循特定规则。
• 容器查询的实现面临了长期存在的“不可能问题”，即在应用条件样式时可能导致无限循环的情况，但最终通过“Containment API”解决了这一问题。
• 容器查询已得到主流浏览器的支持，同时，开发者和设计师需要共同意识到容器查询的重要性，以便更广泛地应用于响应式设计中。

⭐️Chrome 使用 video 无法正常播放 MP4 视频的解决方案

这篇文章主要讲解了在 Chrome 浏览器下部分 MP4 格式视频无法正常播放的原因，以及针对这一问题的解决方案。文章首先介绍了 HTML5 的 video 标签的使用以及视频文件的格式、封装格式和编码方式，然后详细分析了导致部分 MP4 视频无法在 Chrome 下播放的原因，最后提出了两种解决方案：使用 ffmpeg 转码工具或者在前端进行 MP4 视频编码格式判断并结合后台视频文件转码。

• HTML5 的 video 标签支持多种视频格式，但在 Chrome 下，部分 MP4 格式视频无法正常播放，原因是 Chrome 只支持 H.264 编码格式。
• 视频文件格式包括封装格式和编码方式，而对于 MP4 视频文件来说，转码成 H.264 编码格式是解决无法在 Chrome 下播放的关键。
• 前端可以通过判断 MP4 视频文件的编码格式，决定是否需要后台进行转码处理，从而保证所有 MP4 视频在 Chrome 中正常播放。

⭐️通向两个 React 的两条路径

这段文字主要介绍了即将发布的 React 19 版本和全栈 React 架构的引入，强调了 Next.js App Router 和 TanStack Start 这两种不同的 React 应用构建方式。文章指出，Next.js App Router 将服务器作为新的基础，强调了数据和 UI 的单向流动，而 TanStack Start 则采用了增量和分层的方式构建全栈 React 应用，提供了更大的灵活性和渐进式采用的可能性。总体而言，文章认为两种不同的 React 应用构建方式都对 React 生态系统具有重大意义，为全栈 React 提供了多种探索途径。

• React 19 的发布和全栈 React 架构的引入标志着 React 生态系统的重大转变，其中 Next.js App Router 将服务器作为新的基础，实现了从服务器到客户端的单向数据流。
• TanStack Start 采取了渐进式和分层式方法来构建全栈 React 应用，提供了灵活的服务器特性支持，与 Next.js 的全新服务器导向相比，提供了更多的灵活性和渐进式采用。
• 通过 Next.js App Router 和 TanStack Start，React 生态系统迎来了两种不同的探索全新 React 架构的方法，为 React 全栈视觉提供了多样化的选择，展示了两种不同的服务器和客户端导向的方法，使得 React 在 2025 年能够迎来更加全面和丰富的发展。

改进核心网页指标的最有效方法

这段文字主要介绍了针对网页性能优化的最有效的方法，包括优化互动到下一个渲染、最大内容渲染和累积布局偏移等核心指标。具体涉及了减少长时间任务、避免不必要的 JavaScript、优化渲染更新、提高最大内容渲染资源获取优先级、实现即时导航、使用 CDN 优化首字节时间以及设置明确尺寸以避免布局偏移等方法。同时，还提及了优化条件下的额外建议和更新日志。

• 网络性能优化需要根据实际影响力和适用性来选择最具影响力的优化措施，而不是盲目进行所有优化。
• Interaction to Next Paint (INP) 可以通过经常使用收益率和避免不必要的 JavaScript 来提升网页互动响应能力。
• Largest Contentful Paint (LCP) 的优化包括确保 LCP 资源可优先从 HTML 源中发现，并使用 CDN 优化 TTFB，以提供更快的加载速度。

在 React 应用中实现实时视频的模糊或虚拟背景效果

这篇文章介绍了如何利用 TensorFlow 的身体分割功能实现实时视频背景模糊和替换。它涵盖了创建 React 应用程序、安装 TensorFlow 包、加载预训练模型、对视频背景进行模糊处理以及移除背景并替换成虚拟背景的步骤。同时提供了代码示例和详细说明。

• TensorFlow 的人体分割技术利用深度学习模型将图像分割成不同的身体部位，并为实时视频提供背景模糊或替换的功能。
• 通过 React 应用结合 TensorFlow 的人体分割技术，可以实现对实时视频的背景模糊和替换，为视频流创建虚拟背景。
• 针对不同场景，可以通过调整参数和选择不同的模型，实现对视频背景的模糊处理或完全替换，为用户创造出更加优美、专注的视频环境。

深入了解浏览器的渲染过程

这段文字介绍了浏览器渲染网页的过程，从输入网址到网页展示的全过程。包括 DNS 查询、TCP/TLS 握手、HTTP 请求/响应循环、标记化、DOM 树和 CSSOM 树的创建、渲染树的构建、布局和绘制等步骤。理解这些基本机制有助于开发人员构建更快、更高效的网站。

• 浏览器渲染网页的过程包括 DNS 查询、TCP/TLS 握手、HTTP 请求/响应循环、标记化、DOM 树创建、CSSOM 树创建、渲染树创建、布局和绘制等多个步骤。
• 浏览器通过将 HTML 响应解析为原始数据，然后转换为标记和节点，构建 DOM 树和 CSSOM 树，最终形成渲染树，以便在屏幕上准确呈现页面。
• 了解浏览器渲染网页的内部机制有助于开发人员构建更快、更高效的网站，且不同浏览器使用不同的渲染引擎，存在兼容性和性能差异。

WebKit 字体平滑到底是怎么回事？

这篇文章探讨了在网页设计中使用 CSS 属性-webkit-font-smoothing: antialiased 的影响。作者最初避免使用这个属性，因为认为默认设置通常是最佳选择。然而，作者在测试后发现在 macOS 系统上这个属性可以改善文本渲染，使得字体更加清晰和统一。因此，作者现在支持在 CSS 中使用这个属性，并认为现代浏览器都支持它。总的来说，文章强调了审美偏好的主观性和跨平台测试的重要性。

• CSS 中的“-webkit-font-smoothing: antialiased;”属性在 macOS 上可以改善文本渲染效果，使文字看起来更清晰。
• 对比各种操作系统和设备后得出结论，该 CSS 属性仅在 macOS 系统下生效，对其他系统无影响。
• 对于 Mac 开发者来说，在 CSS reset 中加入这一属性是有益的，但需在其他平台上测试以确保文字的可读性和美感。

在 Next.js 中，什么时候应该使用 redirect() 而不是 router.push()？

本文介绍了在 Next.js 中进行重定向的三种方式：router.push()、redirect() 以及在中间件中使用 NextResponse.redirect()。router.push() 适用于客户端组件，使用 History API 进行页面跳转；而 redirect() 主要用于服务器端组件、服务器函数和路由处理程序，会在服务器端进行重定向。文章还指出了在使用 redirect() 时需要注意的一些问题，以及在特定情况下应该考虑使用 router.push() 来代替 redirect()。

• Next.js 中的 router.push() 用于在客户端组件的事件处理程序中执行页面导航，而 redirect() 则主要用于在服务器组件、服务器函数或路由处理程序中执行重定向。
• router.push() 利用 History API 在历史堆栈中推送新条目，允许用户通过标准浏览器的后退和前进功能进行导航，因此被称为仅限客户端的导航。
• 使用 redirect() 在服务器函数中进行重定向时，可能会导致下一个页面的 suspense 边界失效，因为 React 将在一批处理中执行服务器函数调用和下一个页面的渲染，并在下一个页面完全渲染后才返回响应。

三个前端库（React、Vue、Angular）的基本原理，并通过纯 JavaScript（VanillaJS）展示了如何实现它们的基本功能

这是一个演示了使用原生 JavaScript 实现简化版 React 框架的前端代码。其中包括了状态管理、虚拟 DOM 实现、组件创建和渲染等功能。同时也包含了一个示例组件和相应的 CSS 样式。

• 这篇课文介绍了如何从零开始使用纯 JavaScript 来实现简化版的 React 框架，包括状态管理和虚拟 DOM 的实现方式。
• 课文展示了如何使用函数式编程的思想和 JavaScript 的原生特性来构建组件化的 UI 框架，从而加深对 React 原理的理解。
• 通过简化版的 React 实现，课文强调了对 JavaScript 基础知识的重要性，以及对状态管理、虚拟 DOM 和组件化思想的深入理解对于构建现代 Web 应用的价值。

How to (not) reset a form after a Server Action in React

这篇文章介绍了在 React 中使用服务器操作时，如何在操作失败时保留表单数据而不重置表单，以提供更好的用户体验。文章通过示例说明了在 Next.js 中处理表单提交和服务器操作的过程，并展示了如何利用动作状态来保持表单数据的完整性。

• React 中默认情况下，表单在提交后会自动重置，但在使用 Next.js 时，即使使用了 Server Actions，表单仍会自动重置。
• 当服务器操作失败时，可以通过在服务器操作中返回表单数据，并在客户端根据返回的数据条件性地设置表单元素的默认值，来避免表单重置，从而保持表单数据的完整性。
• 通过在客户端使用 React 的 useActionState Hook 处理服务器操作的错误消息，结合服务器端返回的表单数据，可以实现在服务器操作失败时保持表单数据完整，而在成功时重置表单的目的。

弄清楚 Popovers 与 Dialogs 的区别与联系

DigitalOcean 提供各种云产品，适用于您在云计算旅程中的各个阶段。本文深入解释了弹出框（popover）和对话框（dialog）之间的区别，以及它们的可访问性角色和实现方式。通过对角色和技术实现进行分类和讨论，帮助读者更好地理解弹出框和对话框的概念，以及它们在 ARIA 世界中的使用和影响。

• 区分 Popovers 和 Dialogs 的关键在于它们的功能和交互特性，而非严格的技术实现。
• Dialogs 可以分为 Modal、Non-Modal 和 Alert Dialog 三种类型，而 Popovers 具有模态特性，因此 Dialogs 实质上是 Popovers 的一种类型。
• Popovers 需要具有可访问的角色，可以选择包括 menu、listbox、tree、grid、dialog 在内的角色，同时也可使用较为复杂的角色如 treegrid 和 alertdialog。

对一个已有五年历史的 Node.js 项目进行改造

这篇文章介绍了一个团队从旧的 React Native 和 React.js 架构迁移到新架构的完整过程，包括架构选择、迁移步骤、服务保障以及在迁移过程中遇到的挑战。文章列举了背景，目标，架构变化，技术栈选择，数据库映射，端点开发，数据同步，Redis 更新以及迁移保障等方面的内容，详细介绍了迁移过程中面临的技术和业务问题以及解决方案。

• 迁移目标：解耦 B 端服务 SDP，迁移 SDP 中 C 端逻辑至新的 Graff 项目，使用独立的数据库和 Redis，并增强 Rncache 服务的监控和日志记录。
• 数据迁移：历史数据同步包括处理大数据量、创建索引、对比数据库记录以及处理遗漏字段；增量数据同步则需要检测变化、通知变化和处理变化。
• 技术栈和端点开发：采用新的技术栈选择 MugJS + MySQL + Sequelize + Typescript，并需要重写 SDP 中的 16 个端点以及处理一些复杂的业务逻辑和语法问题。

为什么我们需要使用 JavaScript 生成器函数呢？

这篇文章介绍了 JavaScript 中的生成器（Generators）及其应用。生成器是 JavaScript 语言中的一种特殊语法，可以用于创建惰性迭代器、处理大型数据集、构建无限序列以及在两个函数之间进行消息传递。文章解释了生成器的概念、语法和用途，以及如何使用生成器处理任务，展示了生成器的实际应用场景。文章还讨论了生成器的懒加载特性、无限迭代器、消息传递以及错误处理。

• 生成器函数可以用于构建惰性迭代器，便于高效处理大数据集或无限序列。
• 生成器函数可以通过消息传递在两个函数之间双向传递消息，类似于异步/等待模式，有助于简化代码结构。
• 生成器函数结合 Either 结构可以用于处理错误，让代码更加清晰易懂，尤其适用于处理复杂的链式调用。

如何制作一种带有无限滚动效果的自然文本扭曲效果

这篇文章介绍了如何利用 JavaScript 和 CSS 创建动态文本失真效果，以响应滚动的速度和方向，为文本赋予有机的波浪运动。文章涵盖了 HTML 标记的结构、CSS 样式的添加、文本分割处理、SmartText 组件和 Column 类的实现，为实现无限滚动效果提供了详细的代码示例，并展示了实现过程中使用的动态动画效果。

• 通过 JavaScript 和 CSS 创建动态文本失真效果，响应滚动，使文字产生有机的波动运动。
• 将文本分割成单词，并根据窗口大小动态排列成行，以实现有机的移动效果。
• 使用鼠标滚轮或触摸屏幕进行交互式滚动，同时利用曲线函数实现非线性动画效果，使得文本呈现出流畅的视觉效果。

工具

total-typescript/tsconfig

配置 tsconfig.json 文件的最简单方法

npmpackage.info

一个用于查看 npm 包信息的网站，可以查看包的版本、依赖、许可证等信息。

react-compiler-webpack

用于 React 编译器的 webpack/rspack 加载工具

react-zoom-pan-pinch

🖼 一个 React 库，方便用户在不同的 HTML DOM 元素（例如 <img> 和 <div>）上实现简单的缩放、平移和捏合功能。

自定义 scrollbar 的工具网站

swapy

✨ 这是一个不依赖于特定框架的工具，您只需简单几行代码，就能把任意布局变成可以拖拽交换的形式。了解更多请访问：https://swapy.tahazsh.com/

更新

The stretch keyword: a better alternative to width: 100% in CSS?

这段文字介绍了在 HTML 和 CSS 中，如何使用 width: 100% 和新的 stretch 关键字来控制元素的宽度，以及这些属性在不同浏览器上的支持情况。

• HTML 元素默认情况下会根据内容自动调整宽度，但对于需要占满整行的元素，需要使用 width: 100% 进行设置。
• 对于大图片，需要使用 width: 100% 来避免溢出。
• 使用 stretch 关键字可以让元素自动填充可用宽度，同时可以轻松使用外边距，而且该属性正在逐渐成为标准。

Node.js 23：重要更新、试验性功能以及性能改进

Node.js 23 推出了许多新功能和改进，包括默认支持 ES 模块、稳定的 node --run 命令、增强的测试运行器、实验性的 TypeScript 支持、Web 存储 API 和 SQLite 集成，以及性能提升。这些改变简化了开发工作流程，使 Node.js 更加强大和多样化。Node.js 团队鼓励大家测试这些新功能，并提供反馈，特别是针对实验性功能，以便不断改进。

• Node.js 23 的重要更新包括默认支持 ES 模块的 require() 方法，简化了 ES 模块的导入流程，有助于更无缝地结合 CommonJS 和 ES 模块。
• Node.js 23 放弃了对 32 位 Windows 系统的支持，将重点放在现代化、广泛使用的平台上，简化了持续开发工作。
• Node.js 23 带来了稳定的 node --run 命令、增强的测试运行器、实验性的 TypeScript 支持以及 Web Storage API 和 SQLite 集成等功能，提升了开发者体验和性能。

@wasmer/sdk 添加了对 Node.js and Bun support

设计

精心设计的动态图标

一个开源的流畅动画图标合集

其他

“中产阶级”这个词在美国的含义，正在改变。以前的中产阶级，是指有足够资金进行投资的人，他们有稳定的工作，有房子、汽车、家庭和退休金。

现在的中产阶级，更像不稳定阶层。你有一份工作，但随时可能失去它。你买不起房子，无力为退休储蓄，平时仅仅支付账单就手头紧张。

这是美国的新常态。我的一个银行朋友说，他的大多数客户，支付租金后的账户余额最多只有几百美元。

-- Hacker News 读者

美国心理学会的一项研究表明，消耗脑力的思考，会导致烦躁、沮丧或其他负面情绪，所以“思考不利于健康”这个观点是对的。

-- 合众社报道