2024-第四十五周

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

技术

⭐️State of CSS 2024

在 Next.js 应用程序路由中如何有效管理高级搜索参数的过滤

这篇文章主要介绍了如何在 Next.js 应用程序中实现高级搜索参数过滤功能。通过使用 React 19 的特性，如 useTransition() 和 useOptimistic()，以及最后转向使用 nuqs 库，作者解决了在 Next.js 应用程序中管理搜索和过滤状态时遇到的一些问题。文章讨论了如何跟踪搜索和过滤的挂起状态、实现实时响应的过滤器，以及如何协调搜索和过滤状态。最后，作者还介绍了使用 nuqs 库实现更稳健的解决方案。

• 实现 Next.js 应用程序路由中的高级搜索参数过滤功能，需要跟踪搜索和筛选状态的挂起状态，并利用 React 19 功能来实现即时用户反馈。
• 通过使用 useOptimistic() 实现响应式类别筛选器，并利用 React Context Provider 来协调搜索和筛选状态，确保它们在页面刷新时能够正确更新。
• 最终使用 nuqs 库来管理搜索参数作为状态，通过 useQueryState() 实时更新 URL 中的搜索参数，并实现更稳健的解决方案。

在 React 中创建键盘快捷方式的钩子（深度解析）

这篇文章介绍了如何在 React 应用中添加自定义键盘快捷键的方法。作者创建了一个名为 useShortcut 的自定义 React hook 来处理单个键按下、带修饰键的组合按下、多个修饰键的组合按下以及按键序列的情况。文章还讨论了性能优化、避免持有过时状态、在文本输入时禁用快捷键、以及处理使用 Alt 键时的一些问题。该文章详细介绍了每个步骤和解决方案，并提供了示例代码和演示。

• 实现自定义 React hook 处理键盘快捷键，包括单个按键、带修饰键的组合按键和按键序列，同时确保缓存事件处理函数和使用最新的函数值。
• 通过 useCallback 和 useLayoutEffect 进行性能优化，避免频繁添加事件监听器和防止保留过期状态。
• 处理文本输入框中的快捷键禁用，以及解决组合键触发和按键序列匹配的问题。

如何使用 OpenAI CLIP 和 PostgreSQL 在 JavaScript 中构建图像搜索应用程序

这篇文章介绍了如何利用 OpenAI CLIP 模型和 Timescale 中的托管 PostgreSQL 数据库构建图像搜索应用程序。文章分为三个主要部分：首先是设置 PostgreSQL 数据库和插入数据，然后是构建基于 Express.js 的搜索 API，最后是创建用于与搜索 API 交互的 React 前端应用程序。整个过程涵盖了数据库设置、数据插入、搜索 API 开发以及前端应用程序的构建。

• 这篇文章介绍了如何利用 OpenAI 的 CLIP 模型以及基于 PostgreSQL 的数据库构建图像搜索应用程序，展示了图像搜索技术的实际应用。
• 文中详细讲解了在 JavaScript 中使用 OpenAI CLIP 模型生成图像和文本嵌入，以及将这些嵌入存储在 Timescale 托管的 PostgreSQL 数据库中的过程。
• 通过创建 React 前端应用程序，该课文还演示了如何使用 Express.js 和 Node.js 在服务器端处理图像搜索请求，并展示了最终的图像搜索引擎的工作原理。

如何在 JavaScript 和 TypeScript 中实现自定义身份验证

这篇文章讨论了如何在 JavaScript 和 TypeScript 中构建基于会话的身份验证系统。它介绍了如何实现身份验证、会话管理、Cookie 管理以及密码管理，并提供了一些在不同框架中使用身份验证的示例。文章强调了自定义身份验证系统的重要性，并强调了构建安全可靠的身份验证系统的益处。

• 本教程将介绍如何使用 JavaScript 和 TypeScript 构建基于会话的身份验证系统，包括用户注册、登录、会话管理和 Cookie 管理。
• 通过自行构建身份验证系统，可以更好地理解安全性的基本原理，并且能够灵活地管理应用程序的安全性，同时避免依赖外部服务。
• 教程还涵盖了用户密码管理、在不同框架中的身份验证实现以及如何在应用程序中访问受保护的资源以确保安全性。

构建 Node.js 流的思维模型

这篇文章深入探讨了 Node.js 流的核心概念和工作原理。Node.js 流是一种强大的数据处理机制，它通过将数据分割成小块进行传输和处理，能够高效地处理大规模数据。文章详细介绍了流的关键特性，包括事件驱动架构、背压机制、缓冲区管理、管道操作以及链式处理等。这些特性使得流成为处理实时数据流、文件操作、网络通信等场景的理想选择。

• Node.js 流采用分块传输的方式处理数据，既节省内存又提高效率，特别适合处理大文件和实时数据流
• 流基于事件驱动模型工作，通过背压机制智能调节数据处理速度，防止内存溢出
• 流支持管道操作和链式处理，可以轻松实现数据的转换、过滤和组合，极大提升了数据处理的灵活性

我们与缓存的探索之旅

这段文字介绍了 Next.js App Router 引入的新功能，即采用 <Suspense> 和 use cache 两个概念来优化前端性能。通过这些新功能，开发者可以选择数据是否被缓存（在服务器端或客户端），以及数据的动态或静态处理方式。此外，还介绍了一些具体的用法和特性，但强调了这仍然是实验性项目，建议在新项目中尝试，目前尚未达到生产就绪状态。

• Next.js App Router 解决了客户端 - 服务器瀑布式加载的性能问题，引入了部分预渲染来兼顾动态性和初始加载性能。
• 新的实验性模式引入了 <Suspense> 和 use cache 两个概念，使开发者能够选择数据是否被缓存，从而简化了数据处理的复杂性。
• 通过 use cache 的指令，开发者可以控制数据的缓存行为，包括动态数据的延迟时间以及标记缓存实体，为构建高性能应用提供了更灵活的选项。

关于 RSCs 的重大“服务器瀑布问题”

这篇文章讨论了 React 树结构中的组件数据获取和渲染问题。作者提出了传统的数据获取方式和新的 React Server Components（RSCs）之间的比较，并强调了 RSCs 在解决数据获取和渲染方面的优势。文章指出，RSCs 带来的服务器端瀑布流可能比客户端瀑布流更可控和可靠，因此对于许多场景而言，将这一问题转移到服务器端可能是一个净收益。最后，作者期待未来可能出现的新解决方案，同时也欢迎其他人提出想法。

• React 服务器组件解决了传统组件数据获取中的痛点，允许数据获取与组件渲染解耦，从而在请求到达时立即加载数据。
• 在使用 React 服务器组件时，出现的“瀑布流”问题实质上是传统组件数据获取中的常见问题，即数据定位和传递的紧张关系，需要寻求新的解决方案。
• 将“瀑布流”问题从客户端转移到服务器端可能是一种整体上的收益，因为在服务器端能更好地控制网络连接、速度和可靠性，以及对缓存的精细控制。

NextJS 中的服务器端状态管理：深入了解 React Cache

这篇文章探讨了在 NextJS 中管理服务器端状态的挑战和解决方案。它指出了服务器状态与客户端状态的不同之处，以及如何利用 React 和 NextJS 暴露的缓存和数据管理函数来更有效地管理服务器端状态。文章提出了利用缓存的可变性来管理状态的方法，并说明了这种方法的优点和注意事项。

• 服务器端状态与客户端状态不同，因为服务器状态是简单的渲染状态，不会因用户操作而改变，而客户端状态是可变的。
• NextJS 提供了 cache、unstable_cache 和 patched fetch 等函数用于管理服务器端状态，利用缓存机制可以更有效地管理服务器端状态，避免属性传递的复杂性。
• 可以通过修改缓存来管理服务器端状态，将服务器端状态在组件之间共享，避免了繁琐的属性传递，但需要注意避免在写操作时意外覆盖缓存，导致渲染结果不一致。

React 19 新钩子使用指南

React 19 引入了三个新的 Hooks：useActionState、useFormStatus 和 useOptimistic，它们分别用于简化表单处理、在嵌套组件中访问表单状态，以及实现乐观更新。这些新的 Hooks 极大地提升了 React 开发的体验，简化了状态管理、优化了用户界面交互，并提供了乐观更新的能力。这些变化将成为 React 开发中不可或缺的工具。

• React 19 引入了 useActionState、useFormStatus 和 useOptimistic 三个新的 Hooks，分别用于简化表单处理、访问嵌套组件中的表单状态和优化用户界面更新。
• useActionState 通过将表单状态、加载状态和错误处理整合为一个 Hook，极大简化了 React 中的表单管理，还支持异步操作和自动 UI 更新。
• useFormStatus 可让嵌套子组件轻松访问并响应表单的当前状态，避免了通过多层组件传递属性的繁琐过程，提高了组件的模块化和重复使用性。useOptimistic 则通过实现乐观更新，提升了应用的响应性和用户体验。

工具

css-springs

CSS 弹簧缓动生成器

wasm-audio-decoders

wasm-audio-decoders 是一个用于解码音频文件的 WebAssembly 库，它支持多种音频格式，如 MP3、WAV、FLAC 等。

svg.js

svg.js 是一个用于操作 SVG 的 JavaScript 库，它提供了简单易用的 API，可以方便地创建、修改和删除 SVG 元素。

match-sorter

JavaScript 中数组的简单、可预期和确定性的最佳匹配排序

drawdb

免费的、简单的、直观的在线数据库图表编辑器和 SQL 生成器。

更新

React 编译器的测试版现已发布

这篇文章介绍了 React 团队发布的新功能，即 React 编译器的 Beta 版本。该编译器旨在通过自动记忆化优化 React 应用程序，并提供了相关的安装和使用指南。文章还讨论了编译器的向后兼容性、库的使用方式以及开放给社区的工作组。此外，还介绍了编译器在 Meta 公司应用的情况以及未来的发展规划。

• React 团队发布了 React Compiler Beta，并邀请早期采用者和库维护者尝试并提供反馈，以及支持 React 17+ 应用的 react-compiler-runtime 可选包。
• 推出了 React Compiler 的 Beta 版本和 ESLint 插件，建议开发者使用这个插件帮助识别和纠正 React 违规规则。
• 打开了 React Compiler Working Group 的公开成员资格，旨在为现有应用程序和库对 React Compiler 的渐进采用做好准备，并计划在稳定版发布后，所有应用程序和库都强烈建议使用编译器和 ESLint 插件。

Node v23.1.0 (Current)

这篇文章介绍了 Node.js 23.1.0 版本的更新内容。更新包括 Buffer 对可调整大小的 ArrayBuffer 的支持、MockTimers 测试运行器 API 的稳定性、JSON 模块和导入属性的稳定性，以及其他一些重要变化和修复。还提供了各种操作系统的安装程序和二进制文件的下载链接，以及相关文档和 SHA 校验和。

• 新的 Node.js 版本引入了对可调整大小的 ArrayBuffer 的支持，使得创建的 Buffer 可以正确响应底层 ArrayBuffer 大小的变化。
• MockTimers 测试运行器 API 已达到稳定状态，为 Node.js 应用程序的异步行为测试提供了全面支持，开发者可以更加自信地进行时间相关操作的测试。
• JSON 模块和导入属性已经稳定，Node.js 实现已经符合 TC39 流程中的两个提案的语义要求。

全新 Svelte 命令行工具的介绍

sv 是一个新的命令行界面（CLI），用于创建、增强和升级 Svelte 项目。它通过简化流程，让开发者能够轻松地在项目中集成 Tailwind、格式化、linting、测试、数据库设置、认证、国际化等功能。通过运行 npx sv create 命令，开发者可以在项目创建过程中选择需要的功能，并且还可以通过 npx sv add 命令为现有项目添加这些功能。sv 还整合了之前分散的 Svelte 相关工具，提供了更统一的开发体验。

• sv 是一个新的 Svelte CLI，提供了创建、增强和升级 Svelte 项目的功能，包括自动集成 TailwindCSS 和其他常见功能。
• 通过运行 npx sv create 命令，开发者可以在项目创建时直接选择要添加的功能，如格式化、linting、测试、数据库设置、auth 和 i18n 等，简化了项目配置过程。
• sv 合并了以前的 create-svelte 和 svelte-add 工具，统一了 Svelte 相关的 CLI 工具，同时也扩展了支持第三方插件，为 Svelte 社区带来更便捷的开发体验。

设计

画布与文档的比较

这段文字主要讨论了网页设计的发展趋势和当前存在的问题。作者提到了传统的纸质文档式设计和移动设备时代的响应式设计。他还谈到了网页设计中的边框化趋势以及对文本大小和容器宽度的处理方式。此外，作者还对网站首页和主体部分的设计提出了一些批评和建议。最后，他呼吁在设计网站时要考虑是否真正满足用户需求，以及在设计中平衡沉浸感和文本可读性。

• 现代网站设计趋向于在视觉上营造沉浸感和情感体验，但有时这种风格可能会损害文本的可读性和理解性。
• 网站首页和正文部分的设计需要有明确的边界和容器，以便让内容更具连贯性和整体性。
• 在设计网站时，应该考虑是否真正需要添加特定功能和内容，而不是简单地追随潮流，同时注重提升网站的质量和用户体验。

AI

WebGPU 支持、新模型和任务等更多内容……

🤗 Transformers.js v3 发布了！这个版本增加了 WebGPU 支持、新的量化格式、120 种支持的架构、25 个新示例项目和模板、1200 多个预转换的模型。文中还介绍了 WebGPU 支持的用法、新的量化格式和一些示例项目，以及 Transformers.js v3 在 Node.js、Deno 和 Bun 上的兼容性。最后，它还宣布了新的 NPM 发布和 GitHub 仓库，作为官方 Hugging Face 组织的一部分。

• 🤗 Transformers.js v3 发布了，支持 WebGPU 加速，拓展了量化格式，增加了 120 种支持的架构。
• WebGPU 支持全球覆盖 70%，可利用系统 GPU 在浏览器中进行高性能计算，但需要在某些浏览器中启用功能标志。
• Transformers.js v3 不仅支持 WebGPU 加速，还增加了量化格式选择和 120 种架构的模型，适配了 Node.js、Deno 和 Bun 等环境，并迁移至了 Hugging Face 官方组织。

针对 RAG 的五种分块策略

这段文字主要介绍了一种名为 RAG（Retrieval Augmented Generation）的应用程序的典型工作流程，重点是介绍了五种文本分块策略，并讨论了它们的优缺点。此外，文章还提到了其他与数据科学和机器学习相关的主题，并邀请读者订阅数据科学和机器学习的免费新闻简报。

• RAG 应用的典型工作流程涉及将额外信息存储为向量，将传入查询与这些向量匹配，并将最相似的信息与查询一起提供给 LLM。
• 为了确保文本符合嵌入模型的输入大小，关键步骤包括对大型文档进行分块处理，以便提高检索步骤的效率和准确性。
• 文章介绍了五种 RAG 的分块策略，包括基于固定大小、基于语义相似度、基于段落和结构、基于限制大小的分块，以及利用 LLM 生成语义分块的方法。

其他

两个月的美团骑手体验

这篇文章主要讲述了一个在美团做骑手的人分享的经验和感悟。作者介绍了工作流程、工作中的缺点和优点，以及对送外卖工作的感悟和思考。文章中提到了骑手工作的艰辛和辛苦，同时也分享了自由、多劳多得、和骑手之间的和睦。文章还描述了送外卖过程中见闻的落差和对拼好饭的看法。

• 外卖骑手工作的艰辛与自由：描绘骑手面临的户外工作环境和工作自由度，以及送餐过程中的艰辛和体验感受。
• 工作中的挑战与反思：描述外卖员工作中遇到的问题，如商家卡餐、不正常顾客、交通事故和拼好饭，以及对这些问题的思考和感悟。
• 社会差距的观察与思考：观察到不同社会阶层的生活差异，以及作为外卖骑手对这种社会差距的感受和思考。