AI 摘要：本文章批判了将 SPA（单页应用，Single Page Application）作为优先方案的潮流，指出随着现代 CSS 和浏览器（如 View Transitions API、Speculation Rules 等）的进步，实现流畅、原生的页面交互已不再需要复杂的 JS 框架和大量前端代码。作者呼吁开发者回归标准的 HTML + CSS + 浏览器原生能力，构建更快速、可维护、SEO 友好的网站，并强调 SPA 带来的复杂性、性能损耗、可访问性问题，以及与浏览器发展脱节的弊端。

1. “类应用”迷思与 SPA 的错误假设
• 许多项目由于“要像 app 一样流畅”的陈旧要求选择了 SPA 架构，而忽略了是否真的需要。
• 选择 SPA 并非出于真正的技术需求，而是为交互流畅度妥协了架构简洁性。
• 现在的假设已过时，SPA 不再是唯一可实现流畅体验的方法。

2. SPA 的“伪流畅”与性能危害
• SPA 的“无刷新感”常常是假象，实际表现为加载动画、滚动错乱、路由行为不一致等问题。
• 大量 JavaScript 的引入导致性能下降，SEO 变得复杂，体验反而变差。
• 现代 SPA 阈值带来的技术负担，不成比例的为“流畅度”买单。

3. 现代 Web 平台演进（CSS 与浏览器原生特性）
• 浏览器原生已支持声明式页面过渡（View Transitions API），无需 JS 也能实现淡入淡出动画等高级体验。
• 结合 Speculation Rules（预测性预加载），可实现点击即开的导航体验，无需 JS 路由。
• 原生 MPA（多页面应用，Multi-page Application）方案能够通过 CSS 动画实现元素过渡、状态保存、URL 正确性等。
• 示例代码简明说明如何用 CSS 实现页面转场与共享元素动画。

4. 浏览器赋能与简单架构的优势
• 现代浏览器提供诸如 Back/Forward Cache（前进后退缓存）等特性，只要结构易读、无 JS 路由劫持即可天然获得极佳体验。
• 浏览器愿意协助性能优化，但前提是开发者不要人为增加复杂度。

5. 性能现实对比：SPA vs 现代 MPA
• 真实 SPA（如 Next.js 等）JS 体积大，加载慢，SEO 和导航表现不稳定。
• MPA + View Transitions + Speculation Rules 几乎无需 JS，加载极快，自然支持 SEO 和历史管理。
• 原生方法不仅替代 SPA 行为，而且性能和可维护性更佳。

6. 反思：“网站不是 APP”
• 普通网站无需 SPA 的状态管理、复杂路由、大量组件或 hydration。
• 使用过度的 JS 反而增加了网站开发、运维成本和用户负担。
• 理性选择开发手段，应“用网站的方式造网站”，拥抱标准技术栈。

7. 展望与建议：用现代 web 技术构建网站
• 原生 declarative transition（声明式过渡）、预渲染、降级兼容性、易维护架构等已足以满足绝大多数场景。
• SPA 是旧时代局限下的策略，如今实属多余。
• 建议开发者用现代服务端渲染和单纯 HTML + CSS 构建主站，只在必要时合理由加 JS 增强。

Jono Alderson

It's time for modern CSS to kill the SPA

Native CSS transitions have quietly killed the strongest argument for client-side routing. Yet people keep building terrible apps instead of performant websites.

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 摘要：本期 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 摘要：本期 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 摘要：本文是 NodeWeekly 第 587 期（2025 年 7 月 22 日）的newsletter，聚焦 Node.js 生态系统的最新动态与技术进展。内容涵盖 Node.js 与 PHP 的跨生态系统整合（如 Laravel 在 Watt 运行时的支持），Node.js 安全更新，工具与库的最新版本发布（如 Bun v1.2.19、NAPI-RS v3），以及社区内的其他热点话题（如 WebAssembly 发展现状与 npm 开发者面临的钓鱼攻击）。此外，还包括了多个实用工具、教程和文章推荐，旨在为开发者提供全面的技术资讯和资源。

1. Laravel and Node.js: PHP in Watt Runtime：介绍 php-node 项目如何通过 Watt 应用服务器进一步支持 Laravel 应用的运行，探索 PHP 和 Node.js 生态系统的融合。
2. eslint-config-prettier 包的安全漏洞分析，Node.js http/https 原生支持代理（通过环境变量启用），Bun v1.2.19 新功能（pnpm 风格的 node_modules 隔离、VS Code 测试集成等），以及 pnpm 即将支持锁定 Node.js 版本。
3. Endor: Add Services as Node Dependencies：介绍 Endor 项目，通过简单的 npm install 和 endor run 命令，快速创建沙盒环境，支持 Postgres、MariaDB 等服务。
4. Articles and Case Studies：包括使用 Eleventy（Node 静态站点生成器）迁移网站提升 24% 性能的案例；基于视觉语言模型构建字体搜索引擎的教程；
5. 推荐多个工具和库：npq（安装前审计包安全）、NAPI-RS v3（支持 WebAssembly 的 Node.js 插件框架）、YouTube.js 15.0（非官方 YouTube API 客户端）、stripe-sync-engine（Stripe 到 Postgres 同步引擎）以及其他如 NeutralinoJS、Corepack、ESLint 插件等的最新版本更新。
6. 汇总更广泛的技术动态：Andy Wingo 关于 WebAssembly 现状的文章，Deno 团队分享的 JavaScript 历史视频，git-quick-stats.sh 工具，以及针对 npm 开发者的钓鱼攻击警告。

AI 摘要：本期《Frontend Focus》第702期聚焦前端领域的最新动态、实用工具、深度文章与观点。内容涵盖SVG基础入门、HTML 2025年度调查、AI辅助调试、可访问性标准解读、CSS动画、性能优化、前端框架更新等多个方面，为开发者提供了丰富的学习资源和行业洞察，同时介绍了多款前端实用工具和库，以及一些趣味简讯和广告。

1. 社区动态
• HTML 2025 年度调查启动：第三届年度 HTML 调查，旨在了解开发者如何使用 Web 平台日益增长的能力，其结果将直接影响明年 Interop 项目的优先级。
• WCAG 纯英文版：让无障碍标准易于理解：一个可搜索的资源，为官方 Web 内容无障碍指南（WCAG）提供了一个初学者友好的指南，使其更易于消化。
• Firefox 141 发布：新版本增加了垂直标签页和 AI 标签组织智能功能。
• GitHub 支持欧盟主权技术基金：GitHub 正在倡导设立一项欧盟主权技术基金。
• 为什么不信任 WCAG 2.2 以及对 3.0 的期望：Daniel Schwarz 提出了他对 WCAG 2.2 的担忧，并探讨了 WCAG 3.0 如何改进这些问题。
2. 文章、观点与教程
• 时间不多，范围却很多：滚动驱动动画的 animation-ranges 速查表 —— 一篇关于滚动驱动动画及其可用选项的入门指南。
• 小屏幕，大影响：为功能手机开发 Web 应用的被遗忘艺术：探讨了功能手机在2025年仍有意义的原因，以及如何为这类设备构建和发布Web应用。
• Tailwind 是“最糟糕的综合体”：一篇观点文章，认为 Tailwind 是 “将 CSS 和现代 Web 开发中所有糟糕之处结合在一起的令人遗憾的倒退”。
• 2025 年前端性能检查清单：一份高层次的清单，列出了创建快速、高效 Web 应用时需要牢记的事项。
• 利用 Web Speech API 让你的网站开口说话：一种简单直接的方法，为网站添加语音功能。
• 糟糕导航的隐性成本：信息架构如何直接影响业务指标：探讨了信息架构对业务指标的直接影响。
3. 开发工具与资源
• Glass3D 生成器：一个生成 3D 玻璃效果的 CSS 工具：一个允许编辑背景滤镜设置、颜色和纹理的工具，并实时预览效果。
• Astro 5.12 发布：新版本特性包括升级的 Netlify 开发体验、内容加载器中的 TOML 支持等。
• Tiptap v3：无头富文本编辑器框架：为构建强大的富文本编辑体验提供了基础，v3 版本包含大量开发者体验改进，如动态UI的卸载和重新挂载、创建自定义视图的 “Markviews”、SSR 模式等。
• macOS 光标 PNG 图片集合：一个提供各种 macOS 光标 PNG 图片的网站。

AI 摘要：本期《React Status》全面概述了 React 生态系统的最新进展，包括全新 UI 组件库的发布、React Compiler 文档的改进、避免常见 React 和 Next.js 开发错误的实用指南，以及 AI 辅助 UI 构建的效率对比。此外，还深入探讨了 Zustand 状态管理、React Router 与 Server Components 的未来集成，以及 React 图形可视化的应用。文章还收录了一系列新增及更新的代码工具和库，并简要介绍了 JavaScript 领域的其他重要动态，如 Bun 的新版本发布和新的全栈框架尝试。

1. 社区动态与文章
• React Compiler 新版文档 – React 团队正努力改进 React Compiler（一个处于发布候选阶段的预编译优化工具）的官方文档，以便开发者深入学习和使用。
• Untitled UI React: 全新 UI 组件库 – 介绍了一个基于 Tailwind CSS 和 React Aria 构建的开源 UI 组件库，支持复制粘贴式开发，并提供 PRO 版本包含更多组件和 Figma 集成。 #组件库 #tailwind
• Figma MCP vs Claude: UI 构建之战 – 探讨了将 Figma 中的 UI 视图转换为可运行 React 代码的最佳方法，对比了使用 Figma 自身的 MCP 服务器和 Claude Code 通过截图实现的效果。 #AI #MCP
• Zustand 状态管理入门 – 为对 Zustan 感兴趣的开发者提供了全面介绍，强调这个轻量级状态管理解决方案的成熟、流行和经过实战检验的特性。
• React Router 与 React Server Components 的未来 – 探讨了 React Router 用户在与 React Server Components 集成时将面临的重大影响和未来发展方向。
• 使用 Matter.js 和 React Native Skia 构建 2D 游戏风格物理效果 – (文章) 详细讲解如何实现 2D 游戏中的物理效果。
• 将 Next.js 站点迁移至 Eleventy 并提升 24% 性能 – (文章) 分享了从 Next.js 迁移到 Eleventy（一个流行的 Node.js 静态站点生成器）的经验，并展示了性能提升。
• 使用 Okta 创建带有社交登录认证的 React PWA – (文章) 指导如何构建一个支持社交登录认证的 React 渐进式 Web 应用 (PWA)。

2. 代码与工具 (Code, Tools & Libraries)
• Reagraph: WebGL 驱动的 React 网络图可视化库 – 提供详细文档和 Storybook 实例，用于在 React 中实现基于 WebGL 的网络图可视化。 #webgl
• React Unity WebGL 10.0: 在 React 应用中嵌入 Unity WebGL 应用 – 庆祝其发布 8 周年，帮助将 Unity WebGL 应用与 React 应用集成并进行通信。
• React CodeMirror: CodeMirror 编辑器组件 – 使在 React 中使用流行的 JavaScript 代码编辑器 CodeMirror 变得更简单，提供了可定制的演示。
• React Native Audio API 0.6.5 – 基于 Web Audio API 的音频引擎。
• React Stripe.js 3.8 – Stripe.js 和 Stripe Elements 的 React 组件。
• React Native Rich Text Editor 1.10 – React Native 富文本编辑器。

3. JavaScript 领域其他动态 (Elsewhere in JavaScript)
• Platformatic 在 Node.js 中运行 Laravel 应用 – Platformatic 公布了在 Node.js 环境下运行 Laravel 应用的新方法。
• Bun v1.2.19 发布 – Bun 发布了新版本，新增了 pnpm 风格的隔离 node_modules 选项、交互式包更新器、VS Code 测试浏览器集成、更快的 Postgres 客户端等。
• eslint-config-prettier 包安全事件分析 – 分析了 eslint-config-prettier 包最近被入侵的事件，包括其工作原理和发生过程。
• bhvr: 基于 React 的全栈技术栈 – 介绍了一个构建全栈应用的有趣新尝试，该技术栈由 Bun, Hono, Vite 和 React (bhvr) 组成。

react.dev

React Compiler – React

The library for web and native user interfaces

AI 摘要： 本期《Frontend Focus》（第 701 期，2025 年 7 月 16 日）涵盖了前端开发的多个热点话题，包括在严格约束下创新的项目案例、Apple 在浏览器引擎选择上的争议、WebAssembly 的广泛应用、CSS 新特性和工具的使用，以及一系列实用的前端工具和资源。文章还提到 Mozilla 即将为 Firefox 添加 WebGPU 支持，并探讨了 AI 对开源开发者生产力的影响，旨在为前端开发者提供最新的技术动态和实用技巧。

1. “I’m More Proud of These 128 Kilobytes Than Anything I’ve Built Since”：通过一个项目案例，Mike Hall 展示了在带宽和处理能力等严格约束下的创新设计，提醒开发者考虑更广泛的用户需求，设计更具包容性的产品。 #性能优化
2. “Apple’s Browser Engine Ban Persists, Even Under the DMA”：Open Web Advocacy 指出 Apple 在 iOS 浏览器引擎选择上未能有效遵守欧盟《数字市场法案》（DMA），存在阻碍竞争的问题。
3. “WebAssembly: Yes, But for What?”：Andy Wingo 在 ACM Queue 上分享了 WebAssembly 在浏览器和服务器端的广泛应用，探讨其如何逐渐渗透到各个领域。 #WASM
4. 简讯（IN BRIEF）：
• Mozilla 将在 Firefox 141 中添加 WebGPU 支持（初期仅限 Windows，后续扩展至 macOS 和 Linux）。
• 一份报告分析了 AI 对开源开发者生产力的影响。
• Firefox 团队寻求用户对 Mozilla 浏览器的真实反馈。
• Andy Bell 分享了一个 CSS 代码片段，为锚定 URL 添加必要的空间，提升用户体验。
5. 文章、观点与教程（Articles, Opinions & Tutorials）：
• CSS 行长度设置 - Daniel Schwarz 介绍如何利用 clamp() 和 calc() 等工具更轻松地设置文本行长度，并展望未来发展。
• 纯 HTML 和 CSS 编写 - Joel Dare 分享为何在 2025 年仍坚持使用纯 HTML 和 CSS。
• ARIA 角色与属性使用 - Michael Beck 讲解如何有效使用 ARIA 角色和属性。 #WCAG
• 滚动行为设计 - Megan Chan 探讨何时应保存用户的滚动位置。
• AI 与网页设计 - Noah Davis 认为模板而非 AI 才是网页设计的真正“杀手”。
6. 工具、代码与资源（Tools, Code & Resources）：
• SveltePlot - Gregor Aisch 开发的 Svelte 可视化框架，基于 D3，支持多种图表类型。
• Eleventy LibDoc - IT Automotive Design System 提供的一个 Eleventy 起步项目，用于创建美观直观的文档站点。
• SplitThing - Florian Reintgen 开发的工具，可将图像分割为自定义网格并下载。
• Chili3D - xiange chen 开发的基于 Web 的 3D CAD 应用，利用 WebAssembly 和 Three.js 实现接近原生性能。 #webgl
• designtokens.fyi - Design Systems House 提供的设计令牌术语词汇表，包含 33 个相关术语解释。
• Check Server-Side Rendering (SSR) - Punit Sethi 开发的工具，帮助检查网页元素的服务器端渲染情况。
• FontGen - 智能字体配对工具，包含 1000+ 字体（需注册）。
• Pandabox - StJohn 开发的 Astro 轻量级灯箱和画廊组件。

Medium

I’m more proud of these 128 kilobytes than anything I’ve built since

I once worked with a UI designer who insisted it was impossible to create a product that was both within the Web Content Accessibility Guidelines (WCAG) and aesthetically pleasing. ‘It can be pretty…

AI 摘要：本期《JavaScript Weekly》（2025 年 7 月 11 日，第 744 期）涵盖了 JavaScript 生态系统的最新动态，包括 Vercel 收购 NuxtLabs、TC39 最新会议总结、TypeScript 5.9 Beta 发布、Node.js 新版本更新等重要新闻。文章还探讨了 JavaScript 函数声明的细微差别、现代工具中的 Rust 趋势以及多个实用工具和库的发布。此外，涉及了 Web 性能优化、代码问题修复及跨平台开发的最新技术文章和资源。

1. Vercel 收购 NuxtLabs：Vercel 收购了负责 Nuxt 项目的公司，并支持其核心团队，Nuxt 保持开源，Vue 创始人对此表示乐观。Vercel 目前管理多个关键项目如 Next.js、 Turborepo 等，CEO Guillermo Rauch 分享了更多细节。

2. TC39 会议总结：详细报道了 5 月 ECMAScript 委员会会议，讨论了 Array.fromAsync、资源管理、Temporal API 及 AsyncContext 等提案的进展和决策。

3. 简讯：
• TypeScript 5.9 Beta 发布，支持延迟模块评估（import defer）。
• Nginx 的 JavaScript 模块（njs）升级至 QuickJS，支持 ES2023。
• JS1024 代码竞赛剩余一周，鼓励提交小于 1024 字节的 JS/GLSL 程序。
• Oliver Stenbom 反思 Rust 在现代 JavaScript 工具生态中的普及。

4. 版本发布：
• Node.js v24.4.0 发布，提醒下周将有安全更新。
• 其他工具更新包括 Oxlint 1.6、VS Code v1.102、Ember 6.5、Angular 20.1 等。

5. 文章与教程：
• 普通函数与箭头函数的区别：James Sinclair 深入解析两种函数声明的细微差异，帮助开发者选择合适的语法。
• JavaScript 作用域提升问题：Parcel 作者 Devon Govett 讨论作用域提升与现代 JS 模式的冲突，考虑在 Parcel v3 中移除此功能。
• 代码点安全的截断：James Mulholland 解决 CSV 导入中 emoji 导致的错误，提出使用代码点感知方法。
• 其他技术文章：
• Bun 解析 10 亿行数据的性能优化（Tae Kim）。
• Tauri 多进程中 JS 存储的松散同步（Costa Alexoglou）。
• Promise 状态管理探讨（Lydia Cho）。
• Temporal API 的使用时机及 Date API 替换的挑战（John Dalziel）。
• 2025 年是否仍需使用 jQuery 的讨论（Suren Enfiajyan）。

6. 工具与代码库：
• Driver.js：用于页面导览和上下文帮助的 Vanilla JS 库，功能流畅且维护良好。
• jsonrepair：修复无效 JSON 文档，支持 Node、CLI 及在线使用，适用于处理 LLM 或不合规 JSON。
• line-numbers：为 HTML 元素添加行号的 Web 组件，适用于展示源码片段。
• cRonstrue 3.0：将 Cron 表达式转换为自然语言，支持多语言。
• 其他工具：Next.js Boilerplate 5.0、React Scan 0.4、html-midi-player 1.6、CKEditor5 46.0、Recharts 3.1、Vuetify 3.9。

7. 其他生态动态：
• Chrome 137 支持 CSS 内联条件（if()函数）。
• SVG 生成技术可替代 GIF 并用于 GitHub README。
• 前 Meta 工程师分享 Meta 如何在 Facebook 中使用 React。
• PlanetScale 发布缓存优势的互动文章。
• Claude Code 借助 Bun 成为单文件可执行程序。
• ANSI.tools 提供 ANSI 转义码分析工具。

AI 摘要： 本期 Node Weekly（#585，2025年7月8日）涵盖了 Node.js 生态系统的最新工具、教程和资讯，重点介绍了处理无效 JSON 数据的工具 jsonrepair、修复 Node 中 emoji 切片问题的技术、以及多个实用工具和框架如 Bruno 和 grammY。此外，还包括 Node.js 官方 API 文档设计改进的进展、AI 驱动的颜色搜索引擎开发教程，以及 JavaScript 生态系统中的其他动态，如 Deno 2.4 发布和 Rust 在 JS 工具链中的应用趋势。

1. 核心内容与工具
• jsonrepair: 介绍了一个修复无效 JSON 文档的工具，适用于处理 LLM 或不合规软件输出的异常 JSON，可通过 Node、CLI 或在线版本使用。
• Codepoint–Safe Truncation: 针对 Node 中 CSV 导入因 emoji 导致的错误，James Mulholland 展示了如何通过代码点感知的 spread 方法解决切片问题。
• Bruno: 一个基于 Node 和 Electron 的开源 HTTP API 测试 IDE，作为 Postman 的轻量级替代品，支持复杂和简单的请求测试。
• Poolifier 5.0: 实现 worker_threads 和 cluster 的工作池，支持可中止任务。
• grammY: 一个最新的 Telegram 机器人框架，简化机器人开发，支持最新的 Telegram Bot API。 【这个好用的喵】
• 0x 6.0: 一款单命令生成 Node 进程交互式火焰图的性能分析工具。
• 其他工具更新：包括 Babel 7.28.0（支持原生 TS 配置和 ES2026 资源管理）、Inquirer.js 12.7（命令行交互 UI）、Secretlint 10.2（防止凭据泄露）、Faker 9.9（生成伪造数据）等。

2. 教程与资源
• What’s the Difference Between Ordinary Functions and Arrow Functions?: James Sinclair 探讨普通函数与箭头函数的区别。
• Am I Online?: Anton Zhiyanov 介绍一种通过检查特定 Google URL 判断应用是否在线的方法。

3. Node.js 社区动态：
• API 文档改进：Node.js 团队正在通过 api-docs-tooling 工具重塑 API 文档的设计和构建流程，并分享了初步进展。
• 数据出口成本比较：对比了 Vercel、AWS 等约 40 个流行云服务的数据出口费用。
• Node 应用文件结构讨论：Reddit 的 /r/node 社区就 Node 应用文件结构展开了有趣讨论。

4. JavaScript 生态系统其他资讯：
• Rust 在 JS 工具中的应用：Oliver Stenbom 讨论 JavaScript 工具链逐渐被 Rust 重写的趋势。 【锈化！】

GitHub

GitHub - josdejong/jsonrepair: Repair invalid JSON documents

Repair invalid JSON documents. Contribute to josdejong/jsonrepair development by creating an account on GitHub.

AI 摘要： 本期 Smashing Newsletter #514 聚焦于 CSS 的最新技术和工具，介绍了多项创新功能和实用资源，包括 CSS 中的 if() 函数、锚点定位 API、缓动函数工具、阴影匹配技巧以及 CSS 渐变效果等。

1. CSS 新特性（Chrome 137）：
• 介绍了 if() 函数，支持基于自定义属性值和样式查询编写逻辑样式，增强了 CSS 的逻辑控制能力。
• reading-flow 属性通过声明预期的焦点顺序提升键盘和屏幕阅读器的可访问性，解决视觉顺序与 DOM 源顺序不匹配的问题。

2. CSS 径向渐变创建 CSS 爆炸背景效果
• Chris Coyier 展示了如何仅用 CSS 创建爆发背景效果，利用 conic-gradient() 和硬性停止点的特性，结合径向渐变实现文本空间和视觉层次。

3. CSS 缓动函数工具（Easing Wizard）
• Matthias Martin 开发的 Easing Wizard 工具帮助开发者可视化和测试 CSS 缓动函数，支持多种类型（如 Bézier、弹簧、反弹等），并提供预设和代码导出功能。

4. 跨平台阴影匹配
• Marc Edwards 提供了一份阴影转换比例表，帮助开发者在 CSS、Android、iOS、Figma 和 Sketch 等平台间实现一致的阴影效果，尽管渲染差异无法完全消除，但可接近匹配。

5. CSS 锚点定位 API 工具
• Una Kravets 开发的 Anchor Position Tool 简化了锚点定位 API 的使用，通过可视化界面展示元素相对锚点的定位效果，并生成可直接使用的 CSS 代码。

6. HTML 输入图标样式修复
• Cassidy Williams 分享了一个解决暗模式下日期/时间输入图标不可见的技巧，利用 ::-webkit-calendar-picker-indicator 伪元素调整图标样式，支持滤镜、不透明度和自定义图像。

Frontend Masters

CSS Bursts with Conic Gradients

You can make stripes with CSS gradients pretty easily. It’s that classic thing where you don’t fade a color from one to another, you just switch colors by having two colors share the same “color stop”. I made this one time to explain that:

AI 摘要：本文内容涵盖了前端开发的最新动态、技术技巧和资源分享。文章重点介绍了 CSS 自定义高亮 API、表单控件样式的未来改进、ARIA 辅助技术的使用、TypeScript 的 satisfies 关键字、SVG 滤镜效果等多个技术话题。此外，还分享了有趣的项目、工具以及作者对代码注释和工作恐惧的思考，旨在为读者提供有价值的行业资讯和学习资源。

Stefanjudis

Web Weekly #162

The CSS Custom Highlight API, new ways to style form controls, and things to know about ARIA.