AI 摘要：本文深入探讨了前端开发中主题和颜色命名的设计实践及困惑，从流行 CSS 框架的色板设计现状、手动与程序化生成色板的方法谈起，剖析了颜色变量定义中的“语义命名”混乱，并提出了更灵活与语义化兼容的命名及管理方式，以支持更加多变且有辨识度的 Web 设计系统。

CSS-Tricks

Thinking Deeply About Theming and Color Naming | CSS-Tricks

Today, I want to discuss a couple of patterns for naming color palettes that the community is using, and how I propose we can improve, so we achieve both flexibility and beauty.

AI 摘要：Tree shaking（摇树优化）已成为现代前端打包（bundler）领域的重要优化手段。不同 bundler 工具（如 Webpack、Rollup、esbuild、Turbopack）由于应用场景和关注点不同，实现 tree shaking 的原理与细节也有所差异。文章系统对比了这些工具的 tree shaking 实现，包括分析粒度、副作用（side effects）判定、模块/语句/AST（抽象语法树）层面的优化，以及各自的优势与局限性，并详细剖析了典型案例。对于需要深入理解前端 build 工具原理与优化策略的开发者极具参考价值。

GitHub

Bundler Tree Shaking 原理及差异 · web-infra-dev · Discussion #28

Tree shaking 在如今的前端打包领域已成为极为重要且不可或缺的一部分。鉴于各个 bundler 的适用场景和侧重点存在差异，因此各个 bundler 之间的 tree shaking 实现方式也各不相同。例如，Webpack 主要用于前端应用打包，侧重于正确性，其 tree shaking 主要关注跨模块级别的优化；而 Rollup 主要用于库打包，侧重于优化效率，其 tree s...

本文总结了 ViteLand 生态系统在 2025 年 7 月的主要动态，包括 Vite、Vitest、Oxc、Rolldown 等关键项目的最新进展，以及社区即将举办的线下盛会 ViteConf 的首场线下会议预告。Vite 团队将发布全新产品 Vite+，并聚焦前端开发领域的未来趋势。文章还预告了 Vite 纪录片的上线情况，为开发者提供了丰富的行业洞察和社区信息。

1. 生态系统进展
• 概述了 Vite、Vitest、Oxc、Rolldown 等项目在本月取得的主要更新和迭代。
• 着重强调了团队在提升开发者体验（DX, Developer Experience）方面的持续努力。

2. ViteConf 线下大会预告
• 预告 10 月将在阿姆斯特丹举行的首届线下 ViteConf，此前已有三届线上大会成功举办。
• 届时将首次发布 Vite+，介绍其功能和对团队工作流的提升作用。
• 大会将邀请知名演讲嘉宾，包括 Bolt.new/StackBlitz CEO Eric Simons 和 Netlify CEO Mathias Biilmann。
• 会议主题将围绕下一代开发工具（next-generation tooling）、智能 agent 体验等前端领域热点展开。

3. 社区与纪录片
• 宣布由 CultRepo 出品的 Vite 纪录片即将在活动中全球首映，展示 Vite 团队及 Svelte、Solid、Astro 等明星项目作者的未公开故事。
• 官方预告片已发布，可供提前观看，进一步增强社区凝聚力。

void(0)

What’s New in ViteLand: July 2025 Recap

July 2025 brings exciting updates in the Vite ecosystem, including the release of Vite 7, Rolldown's new features, and the upcoming ViteConf in Amsterdam. Discover the latest news in Vite, Vitest, Oxc, Rolldown and more!

AI 摘要：本期 Frontend Focus 报道了前端领域的最新动态和趋势，涵盖 CSS 新规范（如无 JavaScript 的走马灯、Masonry 布局、Scroll-Spy）、React/Next.js 开发中的常见陷阱、MDN 发展二十周年纪念，以及一批最新实用工具和开发资源。此外，简要提及了 Safari/Edge 等主流浏览器新特性和业界法规、社区大事件，适合前端开发者了解行业资讯和提升技术能力。

1. 前端社区动态与大事件
• MDN 文档网站庆祝成立 20 周年，目前拥有超 14,000 页内容，是 Web 开发的重要资料库
• 2025 Stack Overflow 开发者调查结果公布，涵盖开发工具、AI 代理、LLM 使用现状等
• W3C 发布关于组织使命与价值观的重要新文档
• HTML Day 活动将举办超 40 场全球盛会，HTML 技术持续推进
• Wikimedia 积极挑战英国在线安全法案，关注数字法规生态

2. CSS 新特性与最佳实践
• CSS Masonry 布局：探讨新规范进展与当前解决方案，兼顾未来性与可用性，附带交互反馈征集
• CSS Scroll-Spy ：Chrome 140 浏览器引入 scroll-target-group 和:target-current，可用两行 CSS 实现目录高亮跟踪效果
•  Responsive Video is (Almost) Easy Now：如何处理垂直和横向视频以适应不同场景，在上下文需要时提供垂直和水平版本。
• “现代 CSS 杀死 SPA”观点：提倡服务器渲染与页面级动画，倡导 CSS 动画和意图性预加载

3. Web 技术深度/创新话题
• The Useless useCallback：React 状态管理与性能相关实践讨论，分析 useCallback、useMemo 潜在问题，展望 React Compiler 与 useEffectEvent 等新工具的改善能力。
• Performance Extensibility API：允许自定义轨迹供 Chrome DevTools 性能面板分析
• WebAssembly（WASM）与 DOM 互操作性进展，工具链提升正降低 WASM 开发门槛
• Liquid Glass ：苹果新一代视觉样式的网页实现尝试
• Web Components 及 Shadow DOM 实践解析

4. 工具、组件与资源推荐
• World Clock Slider：多城市世界时钟组件，支持暗黑模式
• FossFLOW：等距基础架构图形工具，支持丰富图标与数据管理 【这个挺酷炫的】
• StaticSearch：为静态站点增添搜索，无需后端，基于 Javascript，数据存储为 JSON
• Oklchroma：基于 OKLCH 色彩空间的色板生成器，提供基色，使用三角函数生成不同色阶
• difit：使用 GitHub 风格查看器查看和审查本地 git 差异的 CLI 工具，评论还可以作为 AI 提示进行复制。
• 7.css：忠实还原经典 Windows 7/XP UI 的 CSS 设计系统
• 使用 Three.js、WebGPU 和 TSL 进行交互式文本销毁

MDN Web Docs

Celebrating 20 years of MDN | MDN Blog

MDN turns 20! Let's look at how we started, how MDN became the most trusted resource for web developers, the impact it's had on the open web, and yes, there's cake, too.

AI 摘要：本文由 Makito 首次在 Project AIRI 的 DevLog 分享，聚焦于如何在前端应用中处理和实现流式 UTF-8 字节流的文本动画，尤其是在聊天或语音转写等实时场景下正确分割和显示「字素簇」（grapheme cluster）。作者深入探讨了 Unicode 编码、多码点合成字符的边界难题，以及利用 Web API，如 TextDecoder、Intl.Segmenter，实现安全高效的字素簇流式提取，并介绍了自己的开源库 Clustr。文章结合了丰富的实例和交互组件，面向希望在项目中实现高质量文本动画及多语言兼容的前端开发者，具有较高参考价值。

1. 背景与动机
• 投稿者首次在 DevLog 发文，介绍参与 Project AIRI 过程。
• 动画文本在现代 UI（如聊天消息）中的作用和实现难点。
• 第三方库（Anime.js, splt, GSAP）在文本动画实现上的进展与现有不足。
• 项目的需求：需实时处理和动画化接收自 UTF-8 字节流的数据。

2. Unicode 基础与「字素簇」难题
• 码点（Code point）与 UTF-8 字节流的对应关系，字节组装所需注意事项。
• Unicode「字素簇」的定义，即多个码点合为视觉整体的最小文本单元。
• 通过实际 Emoji 和南亚文字示例，阐释组合字符的裸数据和视觉表现。
• 传统 Web API 如 TextDecoder 能将字节流还原为码点字符，但不足以分割复杂字素簇。

3. Web API 应用与完善方案
• 利用 TextDecoder.decode（stream选项）实现流式解码，拼接字符串缓冲区。
• 使用 Intl.Segmenter 拆分字符串为字素簇，支持多语言处理。
• 提出解决方案：因为流数据随时变化，需确保不完整的字素簇不被导出，因而采用「丢弃最后一个」策略缓冲输出，避免合成字符的过早显示。

4. 流式字素簇库 Clustr 的诞生
• 市场调研发现缺乏专门处理流式 UTF-8 字节流并输出字素簇的库。
• 作者自研 Clustr，核心代码不到100行，实现了上述需求。
• Clustr 能帮助前端实时渲染流式文本动画，兼容多语言复杂字符。

5. 互动组件与社区交流
• 提供探索字素簇组合和实时代码交互的小组件。
• 鼓励开发者参与 Project AIRI 相关 GitHub 仓库，共同讨论和改进工具。

AI 摘要：本文深入介绍了 Web Components 中 Shadow DOM（影子 DOM）的原理和实际应用。作者不仅阐述了 Shadow DOM 在隔离 HTML 和 CSS、避免组件冲突中的重要性，也详细讲解了如何通过命令式和声明式方式创建 Shadow Root 以及相关配置（如克隆、序列化、焦点委托），并介绍了 slot（插槽）机制以实现内容分发。文章面向希望提升组件封装性、可维护性和安全性的前端开发者提供了清晰的实践指南。

1. Web Components 与 Shadow DOM 概述
• Web Components 由 Custom Elements（自定义元素）、HTML Templates（模板）和 Shadow DOM 等技术组成，三者可单独或组合使用。
• 传统 DOM 架构容易导致样式与脚本污染，难以维护。
• Shadow DOM 可实现 DOM、CSS、JS 的局部封装，提升组件独立性与安全性。

2. 为什么需要 Shadow DOM
• 现代应用常集成来自不同来源的组件，容易出现 ID 冲突与样式覆盖问题。
• 原生 HTML 元素如 video、details 等都标准使用 Shadow DOM 避免全局影响。

3. Shadow Root 的宿主元素与创建方式
• 多数 HTML 元素（如 div、section、span 等）均可作为 Shadow Root 宿主。
• 创建方式分为：
• 命令式（JavaScript）：attachShadow({mode})，可选择 open（开放）或 closed（私有）模式，建议默认使用 closed，以增强安全性。
• 声明式（HTML）：利用 <template shadowrootmode=""> 内嵌 shadow root，可和 Custom Elements 配合使用，支持 open/closed 模式。
• 讨论 open/closed 模式的脚本访问区别与安全考虑。

4. Shadow DOM 配置项
• clonable：允许带有 shadow root 的节点可被完整克隆（包括模板内容），提升组件复用性。
• serializable：能将 shadow root 内容序列化为字符串，便于缓存或跨节点注入，但需注意闭合模式下的数据泄露风险。
• delegatesFocus：启用后，宿主获得焦点时自动将焦点转移到 shadow root 内第一个可聚焦元素，常用于自定义表单组件，增强用户体验。

5. Slot（插槽）与内容分发
• 通过 slot，可实现宿主与 Shadow DOM 之间的内容插入与分发，支持默认与命名插槽，并可定义 fallback（回退）内容。
• slotchange 事件用于监听 slot 内容变化，便于实现响应式组件行为。
• slotted 内容仍属于 light DOM，可在文档级直接操作。

6. 实用建议与局限性
• 推荐以 closed-first 策略增强组件安全性，特殊场景下才使用 open。
• 注意表单与可访问性（ARIA）相关的局限，部分需要借助 ElementInternals 等新 API 进一步处理。

Smashing Magazine

Web Components: Working With Shadow DOM — Smashing Magazine

Web Components are more than just Custom Elements. Shadow DOM, HTML Templates, and Custom Elements each play a role. In this article, Russell Beswick demonstrates how Shadow DOM fits into the broader picture, explaining why it matters, when to use it, and…

AI 摘要：Google Chrome 的 Performance Extensibility API （性能扩展 API）允许开发者将自定义的性能标记（performance.mark）和测量（performance.measure）集成进 Chrome DevTools 的性能面板，使自有应用、团队代码与第三方包可实现更细粒度、结构化和可视化的性能剖析。文中不仅介绍 API 的最小可用实践和高级特性（如自定义 track、颜色、分组与元数据），还探讨了如何借助这些新能力更好地组织跨团队、跨模块或第三方依赖的性能数据，以提升前端调优的效率和可读性。

1. 背景与意义
• Google Chrome 推出的 Performance Extensibility API 能让开发者自定义性能分析数据，在 DevTools 性能面板中更清晰展现。
• 适用于关注特定应用片段性能、跨团队协作及 API/第三方包开发者等多类场景。

2. 现有能力回顾（性能.mark 与 .measure）
• 介绍 performance.mark() 与 performance.measure() 的基础用法，展示如何标记重要事件并测量阶段耗时。
• DevTools 能自动捕获这些标记，方便用时长和起止点可视化查看。

3. Extensibility API 的最小实现
• 启用 DevTools 新特性（Show custom tracks）。
• 使用 mark 时 dataType 必填，measure 时 track 必填，其他均为可选。
• mark 实现更明显的“标志”，但缺乏精确时间信息，偏向定位关注点而非精确计时。
• measure 则可直接建立自定义轨道，并展现分时区间。

4. 高级用法与增强能力
• 支持自定义颜色（限定调色板）、显示 toolTipText 与挂载元数据（properties）。
• measure 可作详细事件描述和元数据列举（例如资源加载性能拆解）。
• 所有扩展项 (color、tooltipText、properties) 均适用于 mark 与 measure，但 measure 的实用性更强。

5. track 与 trackGroup 的组织能力
• 支持创建自定义 track（如 CSS、JS、API）以区分不同事件流。
• 支持 trackGroup，将多个 track 归为一个分组（例如 First Party < CSS、JS>），适合团队协作及区分自有与第三方数据流。
• 实现方式简便，极大提升了跨团队、模块性能整理与溯源的效率。

6. 实践建议与最佳实践
• 推荐从最小实现用法入手，不建议对 mark 过度扩展。
• 优先使用 measure 进行自定义 track/trackGroup 的组织管理。
• 针对第三方库或框架，鼓励将自有 Instrumentation 移入单独 trackGroup，以提升定位和用例分析效率。

7. 附录：实用代码示例
• 提供结合 Resource Timing API 的实践 demo，展示如何自动获取和展示资源性能细节。

Csswizardry

Making Sense of the Performance Extensibility API – CSS Wizardry

Making sense—and use!—of the new Performance Extensibility API in Chrome DevTools.

AI 摘要：本文深入探讨了 React 的 useCallback（及部分 useMemo）在许多开发实践中被滥用、实际无效甚至带来额外复杂性的现象。作者指出，只有在需要“引用稳定性”（referential stability）时才有必要使用 memoization（记忆化），但多数情况下由于组件、props 或 state 的传递与依赖管理不当，memoization 实际无法带来性能提升，甚至反而让代码维护变得困难。作者以真实项目为例，分析了 memoization 的链式依赖是如何轻易被打破，进而推荐采用最新引用（Latest Ref Pattern）和即将推出的 useEffectEvent 方案来简化副作用依赖管理。

1. 记忆化的真正动机
• 只有两大理由：性能优化、降低副作用（effect）频繁触发。
• 核心是保持“引用稳定性”，以防止不必要的重新渲染或副作用。

2. 错误/无用的 useCallback 场景分析
• 如果目标组件本身未被 React.memo 包裹，useCallback/useMemo 完全无效。
• 组件自身如果不关心 props 的引用稳定性，多余的 memoization 没有任何作用，例如原生 button 的事件处理。
• 不应将传入的非原始 props 用作内部依赖（dependency array），因为无法控制其稳定性。

3. 真实工作中链式 memoization 失效的例子
• 多层 useMemo/useCallback、props 层层传递，一旦其中任意一环未 memoize，所有下游优化失效。
• 该问题不仅无法通过“层层 memoize”彻底修复，反而增加了理解和维护的负担，导致开发者难以溯源、清理无用优化。

4. 新的依赖管理模式推荐
• 最新引用（Latest Ref Pattern）：通过 useRef 保存当前最新值，通过 effect 始终同步，无需被动依赖。
• useEffectEvent（即将推出的 React 原生特性）：可直接在副作用 effect 内安全访问最新 props/state，无需显性依赖。

5. 结论与建议
• 仅在确有必要的场景使用 useCallback/useMemo，切勿滥用。
• 优先采用更健壮的依赖管理模式，减少人为记忆化的复杂性，提升组件可维护性和开发体验。

tkdodo.eu

The Useless useCallback

Why most memoization is downright useless...

AI 摘要：本文通过作者在调试 JavaScript 代码时遇到的一个由分号 (semicolon) 缺失引发的 TypeError: console.log(...) is not a function 问题，强调了分号在 JS 语法中的关键作用。作者通过简短实例和社区讨论，剖析了分号自动插入机制导致的意外行为，并分享了这一微小失误引发长时间调试的经历，提醒开发者关注代码细节。

1. 问题背景与经历
• 作者在调试时随意插入了 console.log('here') 语句并未加分号，位置恰好出现在 IIFE（立即执行函数）之前。
• 缺少分号导致 JavaScript 引擎将后续的 function 代码当作 console.log 的参数，最终抛出 TypeError。

2. 原因分析
• StackOverflow 社区成员 Sebastian Simon 解释了该错误机制：没有分号时，代码被解析为 console.log()(function(){})，而 console.log() 的返回值是 undefined，无法作为函数调用。
• 提供了最小可复现实例代码来说明问题本质。

3. 社区互动与反思
• 在 Mastodon 社区，Andre 提醒作者 Chris Coyier 的 Web Development Merit Badges（网页开发徽章）。
• 作者幽默地调侃自己，为“因为一个字符小失误花了一小时调试”自豪地领取了徽章，凸显开发中对细节的重视与共鸣。

Tomayac

What a diff'rence a semicolon makes

The personal blog of Thomas Steiner

AI 摘要：本文介绍了当前 CSS 渐进网格布局（Masonry Layout）的浏览器支持现状及其多种语法方案，并提出了一种通过简洁 JavaScript 实现兼容所有主流浏览器的马赛克布局方法。作者详细解释了实现原理、兼容图片和响应式布局的技巧，同时分享了相关工具库的使用方法，为 CSS Grid 用户提供了生产可用、灵活可控的 masonry 解决方案。

1. CSS Masonry 布局的社区动态与支持现状
• Masonry 布局的引入持续讨论中，语法有三种主要提案：display: masonry、grid-template-rows: masonry、item-pack: collapse
• 当前未达成统一标准，不同浏览器支持程度不一（如 Firefox、Chrome 正在分别测试不同语法）
2. JS Polyfill 实现 Masonry 兼容性
• 介绍如何检测浏览器是否原生支持 grid-template-rows: masonry
• 若未支持，则使用 Polyfill 方案，纯 JavaScript 实现 Masonry 效果（仅需约 66 行代码）
3. Masonry 实现原理详解
• 利用 CSS Grid 的特性，将 grid-auto-rows 设为 0，row-gap 设为 1px
• 通过 JS 获取每个网格项实际高度后，调整 grid-row-end，实现项自适应高度并“堆叠”
• 恢复正确的行间隔后，布局完成，兼容性强
4. 对图片和媒体的兼容处理
• 首次渲染时图片未加载完成会导致布局错乱，需监听图片/视频加载后再计算布局
• 提供相关 JS 辅助函数，确保所有媒体加载完毕再执行布局函数
5. 响应式自适配
• 使用 ResizeObserver 监听容器宽度变化，实现自适应响应式布局
6. 工具库与复用建议
• 推荐使用作者开源的 Splendid Labz 库快速集成 Masonry 布局及更多布局工具
• 提供 npm、CSS、JS 完整使用示例

CSS-Tricks

Making a Masonry Layout That Works Today | CSS-Tricks

I went on to figure out how make masonry work today with other browsers. I'm happy to report I've found a way — and, bonus! — that support can be provided with only 66 lines of JavaScript.

AI 摘要：本期 React Status 精选了 React 及其周边生态的最新动态，包括 TanStack DB 的首次 beta 发布、Reaper 死代码分析 SDK、新的 React Native 动画库 Reanimated 4 及多款工具库，还有 TypeScript、Parcel、Remix、Next.js 等重要更新。内容从核心库、开发工具到行业热点，全面展示了前端开发领域的创新趋势，尤其突出数据管理、性能优化、工程实践和 JavaScript 生态的多元演进。

1. 生态与社区动态
• TanStack DB 首个 beta 版发布，为 TanStack Query 带来高效增量更新与乐观写入能力，实现在本地侧存储场景的差分数据流 (differential dataflow)。
• The Useless useCallback：React 状态管理与性能相关实践讨论，分析 useCallback、useMemo 潜在问题，展望 React Compiler 与 useEffectEvent 等新工具的改善能力。
• TypeScript 5.9 RC 发布，带来 import defer 和 --module node20 等新特性。
• Stack Overflow 2025 调查显示 React 继续蝉联 “最受开发者渴望（most desired）” Web 技术头名，尽管 Svelte 更 “受人钦佩（admired）”
• Parcel 深入支持 React Server Components，并解析 "use client" 等指令的实际作用机制。
• React Native 下一个版本中引入预编译的 iOS 版本，RC3 阶段承诺将构建时间缩短 10 倍

2. 文章与深度实践
• 《Remix 3 和 React-中心架构的终结》 探索 React 未来架构趋势。
• 《Next.js 运行时密钥注入实战》 深入分析密钥管理在微服务和 SSR 场景下的重要性。
• 《将 JSX 改写为 Astro 的思考》 带来组件语法和工程结构的迁移经验。

3. 代码、工具与库
• React Native Reanimated 4 正式带来类 CSS 动画与过渡体验到 React Native，兼具复杂能力与高性能。
• Better Upload 支持各类 S3 兼容存储的极简文件上传，适配 Next.js、TanStack Start、Remix 和 Hono 等框架。
• Rooks.js 8.4 提供接近 100 个自定义 hooks，涵盖在线状态、窗口大小、语音合成、键盘输入等各类场景。
• 新发布与更新工具还有 React Three Viverse 教程、Tinybase 6.5、TanStack Form 1.15、IntentUI 3.3、Preact 10.27、BlockNote 0.35、React-three-fiber 9.3、Ink 6.1 等，覆盖数据存储、表单、组件库、Notion 风格编辑器、命令行应用等多样领域。

4. JavaScript 生态其他重点
• JavaScript 各类运行时和引擎历史盘点。
• es-toolkit 成为 Lodash 100% 兼容替代，已被 Storybook、Recharts 等主流项目采用。
• Zod 对决 Valibot 的 JS/TS 校验器评测视频。
• Hugging Face Transformers.js 让机器学习模型直接运行于浏览器，并支持多种音频与文本模型。
• Vercel 发布 Fluid compute 平台，该平台本质上提供 “无服务器服务器（serverless servers）”。
• Google OSS Rebuild 通过比对源码与上游，进一步保障开源生态（如 npm）安全。

Tanstack

Stop Re-Rendering — TanStack DB, the Embedded Client Database for TanStack Query | TanStack Blog

Your React dashboard shouldn't grind to a halt just because one TODO turns from ☐ to ☑. Yet every optimistic update still kicks off a cascade of re-renders, filters, useMemos and spinner flashes. If y...

AI 摘要：过去十年，JavaScript（简称 JS）运行时（JavaScript Runtime）经历了爆炸性增长，跨越云、边缘（Eadge）、微控制器、智能电视、移动/桌面原生应用（Native App）等众多环境。随着 Node.js、Deno、Bun、Cloudflare Workers、Hermes、QuickJS 等不同引擎和运行时的出现，JS 开发者获得了前所未有的选择自由。文章系统梳理了驱动 JS 运行时百花齐放的原因：硬件性能多样化、任务场景多元化、与原生 API 的融合需求以及跨平台/多语言互操作等。最终结论是：没有哪一个 JS 运行时能“一统天下”，不同场景必然产生不同最优解，也促成了生态繁荣与技术创新的持续推进。

1. JavaScript 运行时的多样化浪潮
• 过去十年 JS 运行时和引擎在数量和类型上激增，支持从云、大型服务器到边缘、物联网和嵌入式设备。
• 没有单一运行时能覆盖所有场景，各种任务对性能、包体体积、API 支持等需求差异巨大。

2. 边缘计算（Edge Computing）和“无服务器”
• JavaScript 在边缘的脚步：先由 Node.js 在 AWS Lambda 支持，继而 Cloudflare Workers、Deno Deploy、Bun 等新锐项目快速跟进。
• 各家采用不同 JS 引擎：V8（Node.js、Cloudflare）、JavaScriptCore（Bun）、SpiderMonkey/WinterJS，QuickJS（LLRT）等，厂商和开发者根据实际需求选择最优方案。
• 行业逐步形成新的标准组织，如 WinterCG 推动运行时 API 一致性。

3. 微控制器与极小型设备
• 资源受限场景驱动极致“瘦身”引擎（如 Duktape、JerryScript、Espruino、mjs、Moddable、Elk）。
• 推动对应微型 runtime 出现（IoT.js、Microlattice.js、low.js）使 JS 覆盖从命令行到“3 分钱”MCU 芯片。
• 跨语言调用与嵌入需求促进微型 JS 引擎/运行时出现。

4. 多语言互操作（Polyglot engines）
• 不同语言实现 JS 引擎，促进零成本语言互调。显著例子有 Rhino/Nashorn/Graal.js（Java/JVM）、jint（.NET/C#）、langjs/pyNarcissus（Python）、Boa/rquickjs（Rust）、Kiesel（Zig）等。
• 甚至有用 JS 编写 JS 引擎的项目（如 Narcissus、Porffor、Shadow），展现 JS 生态和语言本身的强大适应性。
• 多数主流 polyglot 项目追求互操作性和练手，更极大丰富了 JS 生态。

5. 原生应用开发与 JS 运行时
• Web View 类应用：Cordova/PhoneGap、Ionic/Capacitor（移动端）、Electron、NW.js（桌面）、Smart TV 平台广泛采用 webview+JS runtime 构建跨平台 GUI。
• React Native 体系：通过 JS runtime+bridge 机制渲染原生组件，最早依赖 JavaScriptCore，后主推 Hermes，还支持 V8/QuickJS/Chakra 等多引擎适配；已成为移动端主流，正在攻入桌面和智能电视。
• NativeScript：深度绑定原生 API，早期支持多引擎（JSC/V8），后统一到 V8；近期演化为 Node-API 驱动，以便灵活适配各主流 JS 引擎。
• Node.js 在原生开发中的特殊地位：广泛用于 CLI 服务和桌面集成，但在 GUI、移动原生方面更显边缘，行业也频繁尝试 V8/ChakraCore/JerryScript 等不同引擎 port。

6. 总结与反思
• JS 凭借开放性和简洁性，成为最有适应性的面向 GUI 与原生应用开发的语言，并渗透到各类设备终端。
• 运行时选择众多，驱动力多样，硬件特性、启动时/运行时性能、bundle 大小、API 支持、native 调用等需求差异难以统一，任何“统一 JS 运行时”设想都难以落地。
• 健康竞争、百花齐放推动了巨大的技术进步，使 JS 成为未来开发“最安全”的通用技术选择之一。

7. 附录：遗漏与新兴运行时一览
• ByteDance Lynx/PrimJS、Ladybird LibWeb/LibJS、gjs（SpiderMonkey/ GNOME）、MuJS、JXA（macOS automation）、dukluv/txiki.js、Bare、lo.js 等新老项目列举。

Buttondown

The many, many, many JavaScript runtimes of the last decade

This last decade has seen an inundation of new JavaScript runtimes (and engines in equal measure), enabling us to run JavaScript in all manner of contexts...

AI 摘要：本文介绍了 JavaScript 的逻辑赋值运算符（logical assignment operators），即 =, &&=, ??=，这些自 ES2021 起纳入标准的新语法极大简化了条件赋值的场景。这些运算符结合原有逻辑运算与赋值，帮助开发者更安全、高效地管理状态、赋默认值并减少样板代码，同时保留了短路（short-circuit）行为。作者详细对比了它们和传统写法的区别，以及在实际开发中的注意事项和最佳应用场景。

1. 逻辑赋值运算符基础
• 逻辑赋值运算符通过将逻辑运算符（||、&&、??）与赋值操作（=）结合，形成简写形式。
• 这些运算符延续了短路运算特性，仅在需要时才计算右侧表达式，提高性能并避免副作用。
• 非常适合简化日常中对变量赋默认值、状态更新的代码书写。

2. 三种主要运算及应用场景
• 逻辑或赋值（=）：当左侧为假值（falsy）时赋值，用于没有初始化或需要提供默认值的场景，但会覆盖如 0、''、false 这类本应保留的有效值。
• 逻辑与赋值（&&=）：当左侧为真值（truthy）时赋值，适合在当前条件满足基础上再作更新，注意右侧结果直接替换原值，可能变为假值。
• 空值合并赋值（??=）：仅在左侧为 null 或 undefined 时赋值，更安全地保持如 0、''、false 这类需要保留的有效值，适用于需严格区分“未赋值”与“有效但为假”的情况。

3. 使用场景与注意事项
• 组件属性默认值（如 React 的 props）：props.showHelpText ??= true;
• 全局状态或配置默认值：config.apiBase = '/api/v1';
• 数据清洗和表单处理：formData.username &&= formData.username.trim();
• 应避免使用可覆盖有效“假值”的 =，遇到需特殊区分空值的情况优先采用 ??=。
• 运算符左侧不能使用可选链（optional chaining），否则会抛出语法错误。
• 短路特性可避免无谓计算（如 API 密钥获取只在必要时执行）。

4. 浏览器与环境兼容性
• 支持：Chrome 85+、Firefox 79+、Safari 14+、Edge 85+、Node.js 15+
• 不支持：Internet Explorer
• 老旧环境可通过 @babel/preset-env（ES2021 配置）进行转译支持。

5. 实际意义与开发建议
• 逻辑赋值运算符虽然是小语法，但对代码可读性、简洁性以及防止常见赋值错误都极有帮助。
• 尤其适合前端组件状态管理、API 参数默认化、表单数据标准化等场景。
• 现已广泛兼容，开发者只需简单迁移习惯即可高效使用。

AI 摘要：本文深入探讨了在大型 TypeScript 项目、尤其是多团队、多仓库（polyrepo）架构下，如何在服务边界之间实现类型安全。作者通过剖析现有单仓库（monorepo）与多仓库在类型共享上的差异，提出了一套自动化提取、打包、共享和验证 TypeScript 类型定义的新思路，从而实现跨服务间类型兼容性检测，最大限度利用 TypeScript 本身的类型系统能力，实现 monorepo 式的类型安全体验。

1. TypeScript 项目架构对类型共享的影响
• 对比单仓库（monorepo）与多仓库（polyrepo）架构下服务间类型共享的简易性和复杂性
• 强调 monorepo 在类型共享上的先天优势，但多仓库在业务组织上的必要性

2. 跨仓库类型校验的实际挑战
• TypeScript 类型检查器需要获取完整工程上下文，但多仓库使类型定义分散
• 讨论依赖和类型递归拉取带来的复杂性，不同仓库可能存在同名、类似或依赖链深度不一的类型

3. 类型提取、打包和自动化流程
• 利用 ts-morph、SWC 等工具自动化精准地提取、分发类型定义
• 提出基于接口路由自动生成类型别名，解决多团队协作下类型命名不一致问题
• 持续集成（CI）流水线以独立项目方式聚合、校验和比对类型包，提高自动化校验覆盖面和准确率

4. 类型兼容与校验自动化策略
• 利用 TypeScript 类型赋值（assignability）规则进行自动验真，无需自定义冗余逻辑
• 构建临时 TypeScript 项目，自动加载各仓库导出的类型包，通过编译器 API 比对并提取错误
• 充分借力 TypeScript 编译器本身能力，让生态演进自然受益

5. 工程实践与系统扩展性
• 跨仓库类型校验架构具备良好的可扩展性和维护性
• 所有工程增强无需魔改 TypeScript，可高效适配未来升级

www.carrick.tools

The Multi-Repository TypeScript Problem

Navigating Type Safety Across Service Boundaries

AI 摘要：本期 Node Weekly（第588期，2025年7月29日）带来了 JavaScript 生态的最新动态，内容涵盖众多 JavaScript 运行时历程的重要综述、TypeScript 与 Node.js 技术升级、安全及工具更新，以及业界有趣开发实践。文章帮助开发者全面了解前后端生态进展，关注实用工具及 AI 集成，并强调代码安全与生产力提升。

1. 生态与社区动态
• The many, many, many JavaScript runtimes of the last decade 长文回顾了近十年间主要 JavaScript 运行时（Runtime）与引擎的发展，包括 Node.js、云平台专有运行时及多种不那么知名的方案，为开发者补全 JS 生态知识。
• TypeScript 5.9 RC 发布，新增 import defer 及 --module node20 等特性；Node.js 生态工具链持续跟进最新规范。
• Google 推出 OSS Rebuild 项目，目标通过包与上游工件比对增强 npm 等开源生态的安全性。
• npm 生态持续遭受攻击，is 包通过通过拼写钓鱼域名劫持进行钓鱼。
• HTML 2025 状况调查开启，旨在收集前端开发者对 HTML 发展状况的意见。
• 一名开发者声称讨论 tabs 与 spaces 的争论趋于结束，主流语言倾向使用 spaces。
• 用 Node.js 和 Postmark 构建的电子邮件控制的 Game Boy 模拟器
• es-toolkit 已成为 Lodash 的 100% 兼容替代方案，突出生态兼容性成果。

2. 技术专题与实践分享
• 介绍 Unix 域套接字（Unix Domain Sockets）在 Node.js 内部进程通信（IPC）中的优势，约可降低 50% 延迟，相较 TCP loopback 更高效。
• 采访 Bun 作者，解析 Bun 作为 Node.js 生态“替代品”的兼容性挑战与工程实践。
• 文章详述如何构建暴露数据资源给大语言模型（LLM）的 Node.js MCP 服务器。
• 探讨 TypeScript 多仓库（multi-repo）间的类型安全问题及解决方法
• 分析 JavaScript 逻辑赋值操作符的语法进步及实际开发中带来的便利。

3. 代码与工具
• AudioTee.js：为 Node.js 捕捉 macOS 系统音频输出，并以 PCM 格式定期输出。
• Transformers.js 3.7：在浏览器与 Node.js 侧支持 ONNX 预训练模型推理，v3.7 增加了 Voxtral（语音转录及音频理解）、LFM2 和 ModernBERT 支持。
• match-sorter 8.1：为数组筛选和排序提供确定性算法，便于开发者实现可预期的最优匹配排序。
• 其他值得关注的工具/库更新：Inquirer 12.9（终端交互式输入）、Node File Trace 0.30（依赖追踪）、MongoDB Node.js Driver 6.18、node-rate-limiter-flexible 7.2、Ghost 6.0 RC、@google-cloud/bigtable 6.2、Axios 1.11、TIFF 7.1、ESLint v9.32.0 等等。

Buttondown

The many, many, many JavaScript runtimes of the last decade

This last decade has seen an inundation of new JavaScript runtimes (and engines in equal measure), enabling us to run JavaScript in all manner of contexts...

AI 摘要：本文批判性地回顾了 HTTP 多个版本发展之后，Web 表单（forms）在处理和数据编码方式上依旧混乱与落后。作者剖析了现有的两种表单数据编码方式（application/x-www-form-urlencoded 和 multipart/form-data）存在哪些规范不统一、实现分歧和技术缺陷，以及标准缺失导致开发体验极差；尽管 HTTP 协议多次进化，表单数据交互方式却数十年未有本质改进。文章最后指出，业界对更优的数据编码格式需求迫切，当前的局面已难以令人满意。

1. HTTP 1.1 及标准库开发的挑战
• HTTP 1.1 并非设计良好，RFCs 更像现状描述参考而非真正规范文档
• 实现 HTTP 协议过程中遇到种种格式和约定的古怪乃至异常细节，增加开发复杂度
• 常见如 chunked transfers 的十六进制长度、状态行中的强制空格等非直观规则

2. 表单数据编码现状与问题
• application/x-www-form-urlencoded
• 历史悠久但缺乏清晰权威的完整规范，依赖 URI 查询参数语法（RFC 3986）
• 编码方式不唯一：对于特殊字符、非 ASCII 字符及数组字段，各实现可能不同
• 对文件与大体量（非 ASCII）数据极为低效（尺寸膨胀、难处理），仅适合简单字段
• 标准文件来源分散且部分已废弃（如 RFC 1866）
• multipart/form-data
• 基于 MIME，规范为 RFC 7578
• 通过分隔符（boundary）串联各部分；分隔符任意但需保证不与正文冲突，增加复杂度
• 无内容长度（Content-Length）头，需流式查找分界符，解析困难导致代码容易出错
• 各字段内容 Content-Type 可以随意宣称，可信度低
• 同样缺乏对数组、对象等复杂数据结构的直接支持，序列化无统一方案
• 不适合前端与后端所有技术栈无缝协作，且导致报文冗余、解析低效

3. 表单标准规范缺失与业界影响
• RFC 文档对主流表单格式覆盖不全，甚至可实现 HTTP 服务器时完全不支持表单却依旧合规
• 主流浏览器始终只支持上面两种，阻碍更现代、结构化的数据格式如 JSON 的广泛采用
• 早年曾有 JSON、XForms 作为新方案提出，但均未流行或长远落地

4. 现实与展望
• 浏览器与后端互操作受限，文件与字段混合上传尤为无解
• 新协议如 tus，仅可用于纯文件上传场景；JSON 提案因多方面原因未标准化
• 表单机制停滞，严重滞后于网络协议和数据交换发展的需求

AI 摘要：本期 JavaScript Weekly 聚焦于 JavaScript 生态的最新动态，包括高性能工具库 es-toolkit 对 Lodash 的取代、React/Next.js 复杂项目的重构建议、WebAssembly (WASM) 与 DOM 支持现状、npm 供应链安全问题、以及一系列重量级项目和社区新闻。此外，涵盖新版本发布、实用代码与工具、开发者经验反思、前端性能提升案例和社区趣闻等，内容丰富，覆盖了当下前端开发的热点话题和实践建议。

1. 社区与安全动态
• 细节剖析近期 JavaScript 生态的供应链安全事件，如 npm 上 is 包被劫持导致的恶意代码传播，以及 stylus 包下架风波。
• 介绍供西班牙语开发者使用的 EsJS，探索非英语语境下的 JavaScript 编程创新。
• 对比 Biome 与 Oxlint 两款 Lint 工具，在类型智能与速度上的表现差异。

2. 工具与库更新
• es-toolkit：兼容 Lodash、更快且更小（97% 体积减小），被 Storybook、CKEditor、Nuxt 推荐，利于代码体积优化。
• Bun v1.2.19：现在支持带有 bun install 的 pnpm 风格的隔离 node_modules ，提供交互式依赖更新功能等。Bun 1.3 也有望很快推出。
• React Native Reanimated 4.0、PythonMonkey 1.2、Oxlint、Jasmine 等多款工具新版本。
• Transformers.js 3.7：支持在浏览器借助 ONNX 运行时运行预训练模型，加入语音转录及 LFM2 和 ModernBERT 支持。
• npq：包安装前安全审核，集成 Snyk 漏洞库并审核包活跃度，有助于抗击恶意依赖。
• Untitled UI React：基于 Tailwind CSS 和 React Aria 的大型 UI 组件库，原生开源并配备 PRO 版本。
• ts-regexp：为 TypeScript 带来严格静态类型的正则表达式（RegExp）。 #正则
• ApexCharts 5.3：流行的 JS 图表库。现在具有数据解析功能 ，可将原始数据对象直接映射到图表。 演示
• vue-multiselect 3.3：Vue 的通用选择 / 多选 / 标记组件。 #vue
• eslint-plugin-unicorn 60.0：100+ 有用的 ESLint 规则集中在一个地方。

3. 实用开发经验与案例分享
• React/Next.js 开发最佳实践：避开 useState 与 useEffect 过度使用、数据嵌套、表单扩展及隐式状态共享陷阱。
• WASM 与 DOM：讨论 WebAssembly 直接访问 DOM 的前景，以及现代工具链对 WASM 生态的支持改进。
• 移除 SPA 的现代 CSS 实践建议，呼吁回归服务端渲染和真实页面体验利于性能与交互。
• Next.js 站点迁移到 Eleventy 提升 24% 性能，展示静态站点生成器的新优势。
• JS Event Listener 参数处理、构建字体搜索引擎、Three.js+WebGPU 的文本破坏交互等创新项目实践。

4. 社区趣闻与行业动向
• SVG 图形教程，鼓励开发者解锁矢量图形能力。
• HTML 2025 状态调查开放，鼓励开发者参与获取前沿信息。
• Google 推出 OSS Rebuild 以提升开源软件安全，MDN 庆祝 20 周年，前端表单规范问题(三个 HTTP 版本之后，表单仍然一团糟)

Socket

npm ‘is’ Package Hijacked in Expanding Supply Chain Attack -...

The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.

AI 摘要：本文深入分析了 WebAssembly（WASM）与 Web 平台集成特别是直接访问 DOM（文档对象模型）的现状和未来可能性。作者强调，Wasm 自身并没有也可能不会获得直接 DOM 支持，但它自诞生以来就通过需要适量 JavaScript glue code（粘合代码）间接地实现了对 DOM 及其他 Web API 的访问。通过工具链和标准的持续推进，Wasm 集成会更加高效，但对纯“Wasm 直接操作 DOM”并无迫切需求或业界共识。开发重点应聚焦于优化性能和开发体验，而不是消除一切 JavaScript，Wasm 与 JavaScript 的共存将长期持续。

AI 摘要：Chrome 和 Edge 团队宣布 CSS Masonry 布局已在 Chrome/Edge 140 中开放开发者测试。这种新的 CSS 布局模式旨在更有效地创建类似砖块的自适应内容排列，弥补了 CSS Grid、Flexbox 和 Multi-column 的不足。文章详细介绍了 Masonry 的概念、与现有布局的对比、两种正在讨论的语法提案，并提供了如何启用和使用该功能的具体代码示例，鼓励开发者积极测试并提供反馈，以帮助最终确定其 API 设计。

1. 社区动态
• 发布与反馈征集：Microsoft Edge 和 Google Chrome 团队宣布 CSS Masonry 已在 Chrome 和 Edge 140 中开放早期开发者测试，并强调开发者反馈对完善规范和语法的重要性。
• 如何测试：详细说明了在 Chromium 浏览器（Chrome 或 Edge 140+）中通过 about:flags 页面启用 "CSS Masonry Layout" 实验性功能的步骤。
2. CSS Masonry 概述
• 什么是 Masonry：解释了 Masonry 布局模式能够创建类似砖块的紧凑排列，与 CSS Grid、Flexbox 或 Multi-column 不同，它在某个方向上不严格定义轨道，允许内容项自动填充可用空间，特别适用于视觉密集型页面。
• 现有方案及局限性：指出现有通过 JavaScript 库或 CSS Grid/Flexbox/Multi-column 模拟 Masonry 的方法存在性能问题、代码复杂、维护困难以及无法完美实现 Masonry 特性等局限性。
• CSS Masonry 的现状：介绍了 CSS 工作组正在《CSS Grid Level 3》规范中起草 Masonry，并讨论了两种正在考虑的语法提案：独立的 display: masonry 和集成到 CSS Grid 中的 grid-template-*: masonry。
3. 使用 CSS Masonry
• 创建 Masonry 容器：通过代码示例展示了如何使用 display: masonry 和 grid-template-columns 或 grid-template-rows 来创建列式或行式的 Masonry 容器。
• 使用默认轨道尺寸：介绍了 Chromium 实现中 Masonry 的新默认轨道尺寸 repeat(auto-fill, auto)，允许在不明确定义轨道尺寸的情况下创建美观的 Masonry 布局。
• 尝试 Masonry 缩写属性：介绍了正在讨论中的 masonry 缩写属性，可用于同时定义 Masonry 方向和轨道定义，简化了语法。
• 自定义轨道尺寸：展示了 Masonry 在定义不同数量和大小的布局轨道方面的灵活性。
• 跨越多轨道：说明了内容项可以跨越多个轨道，这对于突出重要内容或实现全宽布局非常有用。
• 微调项目放置：介绍了 item-tolerance（原名 item-slack）属性，用于控制项目放置的敏感度，使其更好地匹配源顺序或布局需求。
• 其他可用属性：提到 Masonry 容器可以与 CSS Grid 的其他属性（如 grid-row、grid-column、order 等）结合使用。
4. 反馈与展望
• 呼吁开发者反馈：再次鼓励开发者通过 demos、源代 码和实际应用来测试 Masonry，并通过评论相关 Issue 或在社交媒体上分享反馈，以帮助塑造最终的 API。
• 已知限制：列举了当前 Chromium 实现中存在的已知限制，包括密集填充、反向放置、子网格支持、DevTools 支持等，并鼓励开发者报告 Bug。

Chrome for Developers

Brick by brick: Help us build CSS Masonry  |  Blog  |  Chrome for Developers

Help test the proposed masonry syntax in Chromium.