AI 摘要： 本期 React Status 通讯（#434，2025年7月2日）聚焦于 React 生态系统的最新动态与讨论热点，涵盖了 React 开发中的复杂性问题、工具库更新、技术文章、会议回顾以及社区活动等内容。特别值得关注的是 Mario Brizic 的一篇挑衅性文章，讨论了 React 在构建现代 SPA 应用时可能带来的复杂性与混乱，引发了 Reddit 和 Hacker News 上的广泛讨论。此外，还包括 Vercel Ship 2025 会议的亮点回顾、新工具和框架的介绍，以及多篇关于 React 开发技巧的文章。

1. 主文章：React Still Feels.. Foolish, and No One is Talking About It?
• 作者 Mario Brizic 探讨了 React 在构建复杂 SPA 应用时的痛点，指出其灵活性可能导致代码混乱，强调这并非 React 独有问题。
• 该文在 React 社区内引发了激烈讨论，尤其是在 Reddit 和 Hacker News 上。
2. 简讯 (IN BRIEF)
• Reactylon：基于 Babylon.js 的 React 3D/扩展现实框架，新增展示页面。
• React Advanced London：11 月在伦敦举办的线上线下 React 活动。
• Anthropic 新功能：通过 Claude 构建和分享带有 React UI 的 AI 应用。
3. 会议回顾：Vercel Ship 2025 Recap
• 总结 Vercel 年度会议的最新公告，包括 AI SDK 更新、Fluid 计算选项、Vercel Sandbox、滚动发布功能和机器人检测等。
4. 技术文章
• 《Using useOptimistic to Make Your App Feel Instant》by Kent C. Dodds：介绍如何使用 useOptimistic 提升应用响应速度。
• 《A Study Guide to Data Fetching in React》by React Practice：React 数据获取的学习指南。
• 《Automating Frontend Accessibility with Storybook 9》by Dominic Nguyen：探讨如何利用 Storybook 9 自动化前端无障碍性测试。
5. 代码、工具与库
• Time Picker：基于 shadcn/ui 的日期/时间选择组件，简洁优雅。
• Tuono：React/Rust 全栈框架，结合 Next.js 风格与 Rust 后端开发。 #rust 【啊？6】
• react-xtermjs：为 React 应用添加 Xterm.js 终端体验。
• UI Builder 2.0：Figma 风格的可视化组件构建工具。
• AG Charts v12.0、Yet Another React Lightbox 3.24、Schedule-X 2.35、Ink 6.0.1 等工具和库的更新与介绍。
6. 深度内容
• 介绍了 Vercel 开发的开源字体 Geist，支持多语言和多种字重。 #font
• Josh Justice 关于在 React 中使用 MUI X Charts 创建高级折线图的教程。
• Neobrutalism：基于 shadcn/ui 的视觉组件库。
• 关于 React 应用样式设计的思考，作者支持 Tailwind 方案。
• 使用 Kamal 2 部署 Next.js 应用
• 使用 Framer Motion 创建 “Sticky” 搜索交互的教程
• 在最后介绍了编辑团队的其他技术通讯，如 Ruby Weekly、JavaScript Weekly、Node Weekly 等，覆盖多个技术领域。

Reddit

From the programming community on Reddit: React Still Feels Insane And No One Is Talking About It

Posted by mbrizic - 408 votes and 321 comments

AI 摘要：本文由 Kent C. Dodds 撰写，详细介绍了 React 18.3 版本中引入的 useOptimistic Hook 如何通过乐观更新提升应用的用户体验。文章从乐观更新的基本概念入手，探讨了其在处理表单提交、状态更新等场景中的应用，强调了如何在不等待服务器响应的情况下即时反馈用户操作，从而让应用感觉更快、更流畅。同时，文章提供了具体的代码示例和注意事项，帮助开发者在实际项目中正确使用这一 Hook。

1. 引言：乐观更新的概念
• 介绍了什么是乐观更新（Optimistic Updates），即在用户操作后立即更新 UI，假设服务器请求会成功，而无需等待实际响应。
• 强调了这种方法对用户体验的提升，尤其是在网络延迟较大的情况下。

2. useOptimistic Hook 的基本用法
• 详细讲解了 useOptimistic 的 API，包括如何定义初始状态、更新函数以及如何与表单交互结合。
• 提供了一个简单的表单提交示例，展示了如何在用户输入后即时更新 UI。

3. 处理复杂状态和回滚机制
• 探讨了当服务器请求失败时，如何通过 useOptimistic 回滚到之前的状态，确保数据一致性。
• 提供了代码片段，说明如何处理错误并通知用户。

4. 与 React 生态系统的集成
• 讨论了 useOptimistic 如何与其他 React Hooks（如 useState 和 useEffect）配合使用。
• 提到与数据获取库（如 React Query）的结合，增强乐观更新的实际应用场景。

5. 注意事项与最佳实践
• 提醒开发者在实现乐观更新时需考虑用户体验的细节，例如加载状态和错误提示的显示。
• 强调了在特定场景下应避免过度使用乐观更新，以免误导用户。

Epic React

`useOptimistic` to Make Your App Feel Instant

Make your React apps feel instant with the new useOptimistic hook from React 19. Improve UX by updating UI immediately while async actions complete.

jhey ʕ•ᴥ•ʔ@jh3yy: css animation tip
don't sleep on the devtools animation inspector — it's great for debugging and scrubbing your timelines 👇

CSS 动画技巧
不要忽视开发者工具中的动画检查器——它非常适合调试和调整时间线 👇

AI 摘要：本文介绍了 CSS 中一个令人兴奋的新特性——CSS gap decorations（间隙装饰），它允许开发者在 flexbox、grid 和多列布局等布局类型的间隙中绘制装饰性分隔线，解决了过去需要使用复杂 workaround 的问题。文章回顾了 CSS gap 属性的历史，并详细阐述了新特性如何通过 column-rule、row-rule 等属性实现灵活的样式化分隔线设计，同时提供了浏览器支持情况和具体使用示例，帮助开发者理解和应用这一功能。

1. 引言与背景
• 回顾了作者四年前关于 CSS gap 属性的文章，介绍了当时使用 gap 轻松实现布局间距的便利性，但也指出了样式化间隙区域的困难，需要使用额外的 HTML 元素或伪元素等 workaround。
• 这些 workaround 存在布局影响、辅助技术干扰和代码污染等问题。
• 提出新特性 CSS gap decorations 将彻底改变这一现状，提供简单且灵活的解决方案。

2. CSS Gap Decorations 特性介绍
• 基础概念：扩展了多列布局中已有的 column-rule 属性，使其适用于 flexbox 和 grid 布局，用于绘制列间分隔线。
• 新属性 row-rule ：用于在行间绘制分隔线，支持多种样式（如虚线、实线）和颜色配置。
• 高级功能：支持通过 repeat() 函数定义多种样式的分隔线，适应未知数量的间隙；引入 row-rule-break 、 column-rule-break 、 row-rule-outset 、 column-rule-outset 和 gap-rule-paint-order 等属性，允许精细调整分隔线的绘制方式、交叉点行为和起止位置。

3. 适用范围：目前支持 grid、flexbox 和多列布局，未来将扩展至 masonry 布局。

4. 浏览器支持情况
• 当前仅在基于 Chromium 的浏览器（如 Chrome 和 Edge 139 版本）中可用，且需通过启用实验性 Web 平台功能标志（flag）来体验。
• 提供了启用 flag 的具体步骤，并鼓励开发者试用并提供反馈以改进特性。

5. CSS Gap Decorations 使用示例
• 通过一个简单的网页布局示例（包含 header、nav、main 和 footer），展示了如何使用 grid 和 flexbox 布局结合 gap 属性和 row-rule 、 column-rule 属性绘制分隔线。
• 逐步调整样式，例如使用不同粗细和样式的分隔线，以及通过 column-rule-outset 属性控制垂直分隔线的起止位置，优化布局视觉效果。
• 提供了最终示例的实时演示和源代码链接。

6. 更多学习资源
• 介绍了额外的属性功能，如 gap-rule-paint-order 控制行与列分隔线的层级， row-rule-break 和 column-rule-break 定义交叉点行为。
• 由于特性较新，MDN 暂无相关文档，推荐参考 CSS Gap Decorations Module Level 1 草案和 Microsoft Edge 的说明文档。
• 提供了 Edge 团队的交互式 playground 工具，供开发者直观配置间隙装饰，并鼓励通过 Chromium issue tracker 提交反馈和问题。

CSS-Tricks

The Gap Strikes Back: Now Stylable | CSS-Tricks

Styling the space between layout items — the gap — has typically required some clever workarounds. But a new CSS feature changes all that with just a few simple CSS properties that make it easy, yet also flexible, to display styled separators between your…

AI 摘要：BFG Repo-Cleaner 是一个比 git-filter-branch 更简单、更快速的工具，用于清理 Git 仓库历史中的不良数据。它通过高效的操作方式，帮助用户删除敏感文件、大文件、特定密码或文件夹等内容，同时保护最新提交以避免破坏生产代码。BFG 的运行速度比 git-filter-branch 快 10-720 倍，适合快速处理大规模仓库历史清理任务。文章详细介绍了 BFG 的使用步骤、功能选项以及注意事项，并强调了备份和验证的重要性。

AI 摘要：本文深入探讨了 Node.js 在 2025 年的现代开发模式，展示了其从早期的回调和 CommonJS 主导到如今基于标准的开发体验的巨大转变。文章重点介绍了 ES 模块（ESM）、内置 Web API、测试工具、异步模式、流处理、Worker 线程、安全性与性能监控等现代特性，旨在帮助开发者构建更高效、可维护且符合 Web 标准的应用程序。通过减少外部依赖、提升开发者体验和优化部署方式，Node.js 已成为一个全面的开发平台，为未来的服务器端 JavaScript 开发奠定了坚实基础。

1. 模块系统：ESM 成为新标准
• 对比 CommonJS 和 ES 模块，ESM 提供更好的工具支持和 Web 标准一致性。
• 介绍 node: 前缀用于内置模块导入，避免命名冲突并明确依赖。
• 强调顶层 await 特性，简化初始化代码，消除 IIFE（立即执行异步函数）模式。

2. 内置 Web API：减少外部依赖
• 原生 Fetch API 取代外部 HTTP 库（如 axios），支持超时和取消操作。
• AbortController 提供标准化操作取消机制，适用于多种异步操作。

3. 内置测试工具：无需外部框架
• Node.js 内置测试运行器，提供现代化 API，支持单元测试、异步测试和覆盖率报告。
• 开发中的 watch 模式提供即时反馈，简化测试流程。

4. 高级异步模式：成熟的异步处理
• 结合 async/await 与并行执行（如 Promise.all ）和结构化错误处理，提升代码性能和可读性。
• 使用 AsyncIterators 改进事件驱动编程，支持流式事件处理和背压控制。

5. 流处理与 Web 标准集成
• 现代流处理 API（如 pipeline ）提供自动清理和错误处理，简化操作。
• 支持 Web Streams，实现与浏览器代码和边缘环境的无缝兼容。

6. Worker 线程：CPU 密集型任务的并行处理
• Worker 线程实现多核利用，适用于计算密集型任务，避免阻塞主线程。
• 示例展示如何将繁重计算任务委托给 Worker 线程，保持应用响应性。

7. 提升开发者体验：内置工具简化开发
• 内置 watch 模式和环境文件支持，替代 nodemon 和 dotenv ，减少配置负担。
• 简化开发流程，提升开发效率。

8. 现代安全与性能监控
• 实验性权限模型限制应用访问权限，遵循最小权限原则。
• 内置性能监控工具（ perf_hooks ）帮助识别瓶颈，无需外部 APM 工具。

9. 应用分发与部署优化
• 支持单文件可执行应用，简化 CLI 工具和桌面应用的部署，无需用户安装 Node.js。

10. 现代错误处理与诊断
• 结构化错误处理提供丰富的上下文信息，便于调试和监控。
• 高级诊断工具（如 diagnostics_channel ）帮助深入了解应用内部行为。

11. 现代包管理和模块解析
• 支持导入映射（Import Maps），简化内部模块引用，便于重构。
• 动态导入支持按需加载和代码分割，适应不同环境需求。

总结与未来展望
• 强调拥抱 Web 标准、使用内置工具、优化异步模式和开发者体验的重要性。
• Node.js 保持向后兼容，支持渐进式采纳现代模式，确保应用长期可维护性。

AI 摘要： 本期 Node Weekly（#584，2025年7月1日）聚焦 Node.js 的最新动态和技术进展，涵盖了 Node.js 版本更新（如 v22.17.0 LTS 和 v24.3.0）、ECMAScript 2025 规范的批准，以及多个与 Node.js 相关的工具和库的更新。此外，还包括 JavaScript 生态系统的其他热点话题，如 Deno 的新提案和 Cloudflare 的容器技术，旨在为开发者提供全面的技术资讯和资源。

1. 社区动态
• Modern Node.js Patterns for 2025：Ashwin 回顾了 Node.js 的潜力，讨论了 ES 模块、内置 Web API、测试运行器、观察模式、权限模型和导入映射等关键特性，强调了 Node.js 在现代开发中的重要性。
• Node v22.17.0 (LTS) 发布：此 LTS 版本将 assert.partialDeepStrictEqual() 提升为稳定状态，并回溯了 Node 24 的部分功能，同时稳定了多个长期实验性 API 和函数（作者：Antoine du Hamel）。
• Node v24.3.0 (Current) 发布：当前版本发布，但无显著新功能。
• ECMAScript 2025 规范批准：Ecma 国际大会批准了 ES2025 语言规范

2. 工具与库更新与博客
• Transformers.js 3.6：支持在 Node.js 中运行 Google 的 Gemma 3n 模型，将 Hugging Face 的 Python 库能力引入 JavaScript，适用于 NLP、视觉和音频处理等领域。
• Repomix 1.0：基于 Node.js 的工具，可将代码库打包为 AI 友好的格式（如 XML、MD），现已发布稳定版本。
• Marked 16.0：快速 Markdown 解析器和编译器，适用于内容处理。
• whatsapp-api-js 用于 WhatsApp 官方 API 的库。
• 其他工具更新包括 dotenv v17.0、Electron v37.0.0、better-sqlite3 v12.2 等，涵盖环境变量加载、桌面应用开发和数据库操作等领域。
• Node.js 多玩家游戏在低 CPU 使用率下延迟问题（Hacker News）。

3. 其他 JavaScript 生态动态
• Cloudflare 推出 Containers 服务，扩展 Workers 功能，支持容器化应用。
• Temporal API 提案进入 Stage 3 草案阶段。
• Node.js 官方 Bluesky 账号寻求社区意见，讨论内容发布方向。
• 如何使用 NestJS 作为 WebRTC 视频聊天的信令服务器（Christian Nwamba）

AI 摘要：本文详细介绍了 Chrome 138 版本的新功能，包括内置 AI API（如翻译、语言检测和摘要功能）、新的 CSS 函数、Viewport Segments API 以及其他多项更新。这些新特性旨在提升网页开发体验，支持折叠设备适配，并通过 AI 技术增强用户隐私和功能性。

1. 内置 AI API（Translator, Language Detector, Summarizer APIs）
• 详细描述了 Chrome 138 引入的 AI 相关 API，支持在浏览器中运行 Gemini Nano 等大型语言模型。
• Translator API：允许网页应用实现翻译功能，支持用户以母语参与互动（如支持聊天），并在设备本地完成翻译，提升隐私和速度。
• Language Detector API：在用户设备上实现语言检测，避免上传至云端服务器，进一步保护隐私。
• Summarizer API：支持生成多种格式和长度的文本摘要，例如文章要点、标题建议、长文摘要或书籍预览等。
2. CSS 新功能
• abs() 和 sign() ：与数值符号相关的计算函数。
• progress() ：返回一个数值，表示某个计算值在起始值和结束值之间的进度位置。
• sibling-index() 和 sibling-count() ：用于根据元素在兄弟元素中的位置或总数进行样式设置。
3. Viewport Segments API
• 针对折叠设备的适配 API，允许开发者根据硬件特性（如折叠或铰链）分割视口，优化网页布局。
• 更多细节可参考相关文档《Support foldable devices with the Viewport Segments API》。
4. 其他更新
• 属性值中的 < 和 > 在序列化时会被转义。
• Clear-Site-Data 头新增两个值 prefetchCache 和 prerenderCache ，用于清除预渲染和预加载缓存。
• CSS 尺寸属性（如 width 和 height ）新增 stretch 关键字，允许元素完全填充容器可用空间。

Chrome for Developers

New in Chrome 138  |  Blog  |  Chrome for Developers

Several new CSS functions, and built-in AI APIs for summarizing, translating, and detecting language.

AI 摘要：本文基于 Peter Naur 1985 年的论文《Programming as Theory Building》，探讨了编程的本质不仅是编写代码，而是构建一个共享的理论模型，即系统如何运作、为何如此设计以及如何演变的心理模型。作者指出，当前 AI 工具的广泛使用导致了“无理论”代码的危机，开发者缺乏对代码的深层理解，系统逐渐失去一致性，而高级开发者在构建理论、维护架构一致性以及指导团队方面变得尤为重要。文章强调，编程的核心是人类智力活动，AI 无法替代理论构建和领域理解，呼吁保留编程中的人类元素。

cekrem.github.io

Programming as Theory Building: Why Senior Developers Are More Valuable Than Ever

Peter Naur's 1985 theory of programming explains why experience matters more in the age of AI-generated code

AI 摘要： 本期 JavaScript Weekly 聚焦于 JavaScript 生态系统的最新动态，包括 ECMAScript 2025 规范的正式批准、Vite 7.0 的发布以及多个前沿工具和框架的更新。文章涵盖了 JavaScript 未来发展的提案、AI 工具在开发中的应用、以及多种实用库和工具的最新版本信息。此外，还介绍了多个技术文章和视频教程，帮助开发者提升技能和了解行业趋势。

1. Ecmascript 2025：有什么新功能？：Ecma 国际大会正式批准了 ES2025 语言规范，Dr. Axel Rauschmayer 提供了简洁的解读，方便开发者快速了解新特性。
2. JavaScript 未来发展提案：Deno 团队整理了 TC39 进程中正在推进的 9 个提案，并附上代码示例，展示了 JavaScript 未来的发展方向。
3. V8 团队的深度解析文章更新 - V8 中引入的两个新优化，旨在加速 WebAssembly。 #wasm
4. 版本更新：Transformers.js 3.6、zx 8.6、Node.js 多个版本更新、Prettier 3.6、Bun v1.2.17 和 SVGO 4.0 的发布信息。
5. Angular 团队创建了一套 LLM 提示和 AI IDE 规则文件，以帮助 Angular 开发者从 LLM 中获得更好的代码
6. 在复杂视觉应用程序中实现 Undo/Redo 系统
7. 没时间学习（Web）框架 X —— 你如何判断学习新事物是否值得花时间？
8. 在编写 WASM 组件时比较 Rust、JavaScript 和 Go
9. 如何撰写引人入胜的软件发布公告
10. 介绍了 Hono 4.8 跨运行时框架、LogTape 1.0.0 通用日志工具、Google 的 Gemini CLI AI 代理工具、PLJS 1.0 Postgres 插件、Marked 16.0 Markdown 解析器、Vue Infinity 数据虚拟化渲染工具、Spark Three.js 3D 渲染器以及多个图表库和框架的更新。

AI 摘要：本文由 Victor Ayomipo 撰写，深入探讨了 CSS 中特异性（specificity）控制的复杂性及其解决方案。文章详细分析了三种主要的 CSS 特异性管理策略：BEM（Block-Element-Modifier）、Utility Classes（实用类）和 CSS Cascade Layers（层叠层）。通过对比它们的优缺点、使用场景及特异性控制方式，作者旨在帮助开发者理解并选择适合项目需求的 CSS 组织方式，同时强调保持低特异性的重要性，避免使用 !important 等不良实践。

1. 引言：CSS 特异性的挑战
• 介绍了 CSS 特异性导致的样式应用问题，如样式覆盖失败的常见困扰。
• 强调理解特异性比依赖 !important 更可持续，提出特异性问题是 CSS 开发中的核心挑战之一。

2. 特异性基础（Specificity 101）
• 解释了特异性如何通过浏览器层叠算法决定样式优先级。
• 通过示例（如 .cart-button 和 .cart-button.sidebar）展示了项目扩展中特异性冲突的加剧。
• 概述了三种策略（BEM、Utility Classes、Cascade Layers）在控制特异性上的不同思路。

3. 作者与特异性的关系
• 分享了作者对特异性理解的演变，从基础规则到深入研究 CSS 层叠机制。
• 通过实际代码案例，展示了特异性冲突（如旧代码与新样式的优先级问题）及解决时的困境。
• 提出个人原则：保持低特异性，避免复杂选择器链，必要时重构代码。

4. BEM：经典系统
• 详细介绍了 BEM 的命名方法论（Block、Element、Modifier），强调其通过显式层级降低特异性。
• 优点：代码可预测，组件隔离，特异性低且一致。
• 缺点：类名冗长，复用性受限，命名困难，需灵活应用（如结合全局类）。

5. Utility Classes：通过回避特异性
• 描述了 Utility Classes（原子化 CSS）的理念，即通过单一功能的类保持最低特异性（如 p-2、text-red）。
• 优点：快速开发，可预测性高，覆盖简单。
• 缺点：代码可读性差，HTML 冗长，品牌色调整等全局变更困难，父子关系处理受限。

6. Cascade Layers：设计上的特异性控制
• 介绍了 CSS Cascade Layers 的强大功能，通过 @layer 定义样式优先级，超越传统特异性规则。
• 优点：提供绝对控制力，可覆盖高特异性选择器（如 ID 选择器）而无需 !important。
• 缺点：特异性仍起作用，!important 行为特殊，易被滥用导致层级复杂。

7. 三者对比
• 通过表格形式对比了 BEM、Utility Classes 和 Cascade Layers 在特异性控制、代码可读性、组织方式等多个维度的表现。
• 最佳场景：BEM 适合设计系统，Utility Classes 适合快速构建，Cascade Layers 适合遗留代码或复杂项目。

8. 三者交集与结合

• 提出 Cascade Layers 可作为协调者，与 BEM 或 Utility Classes 结合使用，而 BEM 与 Utility Classes 结合则易冲突。
• 作者偏好 Utility Classes 结合 Cascade Layers，但认可 BEM 的价值，强调选择取决于个人与团队需求。

9. 结论
• 总结 Cascade Layers 是近年来最强大的 CSS 特性，但它与 BEM 和 Utility Classes 的本质不同（特性 vs 方法论）。
• 建议保持低特异性，并结合 Cascade Layers 设置样式优先级，以实现更高效的 CSS 管理。

Smashing Magazine

CSS Cascade Layers Vs. BEM Vs. Utility Classes: Specificity Control — Smashing Magazine

CSS can be unpredictable — and specificity is often the culprit. Victor Ayomipo breaks down how and why your styles might not behave as expected, and why understanding specificity is better than relying on `!important`.

AI 摘要：本文详细介绍了 2025 年 6 月 25 日 Ecma 国际组织批准的 ECMAScript 2025 语言规范的新特性，标志着其正式成为标准。文章涵盖了导入属性、迭代器辅助方法、新的 Set 方法、正则表达式相关更新、重复命名的捕获组以及 Promise.try() 等新功能，旨在帮助开发者了解和掌握最新的 JavaScript 语言特性。

• Import attributes and JSON modules
• Iterator helper methods
• New Set methods
• RegExp.escape()
• Regular expression pattern modifiers (inline flags)
• Duplicate named capture groups
• Promise.try()
• Support for 16-bit floating point numbers (float16)

AI 摘要：本文详细介绍了如何使用纯 CSS 实现滚动驱动动画（Scroll-driven Animations），这是近年来 CSS 动画技术的一项重要进步。作者通过具体的代码示例和步骤，讲解了滚动驱动动画的三个核心组成部分：目标元素（target）、关键帧（keyframes）和时间轴（timeline），并重点介绍了两种新的时间轴类型——scroll() 和 view()，它们分别基于用户滚动行为和元素进入视口的行为触发动画。此外，文章还强调了动画对用户体验的影响，提醒开发者注意运动敏感性问题，并提供如何通过媒体查询（如 prefers-reduced-motion）优化动画以提升可访问性的建议。

WebKit

A guide to Scroll-driven Animations with just CSS

CSS animations have come a long way since Apple first introduced them to the web in 2007.