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.

AI 摘要：本文涵盖了前端开发的多个热门话题和技术更新，包括 CSS 滚动驱动动画、Web 机器人检测技术、Web 可访问性、Astro 5.10 发布、Firefox 140.0 新功能，以及多种 CSS 技术和工具资源。文章通过教程、工具介绍和行业动态，为前端开发者提供了丰富的学习和实践资源。

1. CSS 滚动驱动动画指南 - Saron Yitbarek
• 介绍了如何使用 CSS 的 scroll() 和 view() 函数实现滚动驱动动画，无需 JavaScript。
• 提供了代码示例，展示如何创建进度条或将元素动画效果引入视口。
• 强调了可访问性和运动敏感性考虑。
2. Web 机器人与检测技术简史 - OlegWock
• 概述了 Web 机器人与检测技术之间的“猫鼠游戏”。
• 探讨了机器人演变、IP 声誉、指纹识别、无头浏览器漏洞、代理检测、CAPTCHA 和行为分析等技术。
3. Astro 5.10 发布
• 重点介绍了 Astro 的响应式图片功能已正式上线。
• 新增实验性实时动态内容获取功能，并改进了 CSP 支持。
4. Firefox 140.0 新功能与更新
• 介绍了 Firefox 最新版本新增的垂直标签功能。
• 支持自定义高亮 API 和 SVG fetchpriority 属性等。
5. 简讯（IN BRIEF）
• JSON 模块脚本现已作为 Baseline 新功能可用。
• Mozilla 更新了 Firefox 插件政策，将于 8 月生效。
• 2025 年 CSS 状态调查仅剩一周时间完成。
6. 文章、观点与教程
• CSS 中的 Liquid Glass 设计 - Pup Atlas：实现了 Apple 的 Liquid Glass 设计语言，但兼容性较差，属于有趣的实验。
• Chrome 137 中 CSS if 函数初探 - Sunkanmi Fafowora：探讨了该函数的语法、工作原理及与其他属性的结合应用。
• CSS 层级、BEM 与工具类：特异性控制 - Victor Ayomipo：分析 CSS 特异性问题，避免使用 !important 标记。
• JPEG 如何成为互联网图像标准 - Ernie Smith：回顾 JPEG 格式 30 年来的历史及影响。
• 实现内联文档查看器的经验教训 - Anjali Munasinghe：分享项目实施中的经验。
• 使用 Three.js、GSAP 和 Web Audio API 编码 3D 音频可视化器 - Filip Zrnzevic：技术实现教程。
7. 工具、代码与资源
• Mossaik - Gabriel Perales：基于 Web 的工具，用于创建 SVG 背景，支持多种形状和自定义设置。 #svg #tools
• <syntax-highlight>：自定义元素，利用 CSS 自定义高亮 API 实现语法高亮。
• Browser MCP：连接 AI 应用到浏览器，自动化测试和任务，支持 VS Code、Claude 等工具。
• Contrast Report：WCAG 颜色对比检查工具，支持分享链接和颜色选择功能。
• Text to SVG：将文本转换为 SVG 路径的工具。
• SlimImg：浏览器内图像压缩工具。

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.

AI 摘要：本文是 React Status 第 433 期newsletter，发布于 2025 年 6 月 25 日，涵盖了 React 及相关生态系统的最新动态和技术资源。内容包括 Recharts 3.0 的重大更新、Vercel Ship 2025 直播活动、Vite 7.0 发布、React Native 在 macOS 桌面应用开发中的应用、AWS 无服务器框架 SST v3 的介绍，以及众多 React 相关工具、库和文章。此外，还包括 JavaScript 领域的其他重要资讯，如 Bun v1.2.17、Node.js 新版本发布等，旨在为前端开发者提供全面的技术更新和学习资源。

1. Recharts 3.0 发布：介绍了 Recharts 3.0 作为一个基于 D3 的 React 图表库的重大重构版本，支持多种图表类型（如折线图、面积图、柱状图等），并提供示例代码和 GitHub 仓库链接。
2. Vercel Ship 2025 直播活动：报道 Vercel Ship 2025 活动，包含 Guillermo Rauch 的 keynote 演讲，分享 Next.js 及 Vercel 平台最新动态，并提供直播链接和日程安排。
3. 简讯 (IN BRIEF)：汇总了 Vite 7.0 发布及其迁移指南、React Native Skia 在高级图形领域的未来展望（涉及 WebGPU、Three.js 等）、Certificates.dev 提供的 React 认证等资讯。
4. React Native 构建 macOS 桌面应用：通过 Jack Herrington 的 14 分钟视频教程，展示如何使用 React Native 开发 macOS 桌面 AI 聊天机器人应用，强调 React Native 的跨平台能力。
5. SST v3：现代 AWS 无服务器基础设施，用于 TypeScript 定义全栈应用基础设施，展示如何在 AWS 上部署 React 和 Hono 应用，并与 Terraform、CloudFormation 进行对比。
6. 技术文章与视频：列举多篇技术文章和视频，如将 React 的 <ViewTransition> 引入 Vanilla JS、React 重新渲染的触发机制、Next.js 和 Vercel 博客迁移、AI 重建 Rails 页面为 Next.js、TanStack Query 在 Expo 应用中的使用等。
7. 代码、工具与库：推荐多个 React 相关工具和库，包括 Cloudflare 的 use-mcp 钩子、Warka（React 驱动的电子墨水显示框架）、Soundz（组件音效库）、react-force-graph（力导向图可视化工具）等，以及多个库的版本更新信息。
8. JavaScript 领域其他资讯：涵盖 CKEditor 优化包大小的经验、Bun v1.2.17 支持提前捆绑、AdonisJS 7 路线图、JavaScript 正则表达式使用技巧、SVGO 4.0 发布、<syntax-highlight> 自定义元素、Node.js 最新版本发布等。

GitHub

Release v3.0.0 · recharts/recharts

🚀 Recharts 3 is here!
Huge shoutout to @PavelVanecek who wrote 95% of the code for this major version release. We re-wrote recharts state management, wrote some 3500 unit tests, fixed a bunch of bu...

AI 摘要： 本文是 Node Weekly 第 583 期的内容，发布于 2025 年 6 月 24 日，聚焦 JavaScript 和 Node.js 生态系统的最新动态与技术进展。文章涵盖了 AdonisJS 7 的路线图、Node.js 及其替代运行时 Bun 的最新版本更新、Vite 7.0 的发布预告，以及多线程、序列化、正则表达式等技术主题的深入探讨。此外，还介绍了多个工具和框架的更新，如 SVGO 4.0、Hono 4.8 等，并分享了 JavaScript 领域的其他重要新闻和资源。

1. AdonisJS 7 路线图：
• 介绍了 AdonisJS 作为一个 TypeScript 优先的“全能型”Web 框架，其开发者计划加快重大版本的发布频率。
• v7 版本亮点包括 Node.js 诊断通道支持、类型安全的 URL 构建器、新加密层、对通知和 TanStack Query 的原生支持等。
• 作者 Romain Lanz 还提供了 Adonis 与 Nest 的对比分析，并鼓励读者提供反馈。

2. 简讯 (In Brief)：
• Node v20.19.3 (LTS) 发布，WebCryptoAPI 中的 Ed25519 和 X25519 提升为稳定状态，更新根证书和依赖项，并包含 V8 修复补丁。
• Bun v1.2.17 支持服务器端代码的提前打包，进一步提升 Node.js 兼容性。
• Vite 7.0 刚刚发布，更多细节将在 JavaScript Weekly 的周五报道中披露。

3. 技术文章与教程：
• Worker Threads: Node 中的多线程指南：探讨 Node 的非阻塞事件驱动模型，以及如何通过成熟的 worker threads 功能实现多线程应用 (作者：Lizz Parody)。
• Node 中序列化方法的基准测试：对比 JSON 及二进制选项如 protobuf 和 msgpack 的性能 (作者：Adam Faulkner)。
• JavaScript 中正则表达式使用技巧：Dr. Axel Rauschmayer 提供了一些方法，使正则表达式编写更加简洁和易读。
• 其他内容包括使用 AI 生成 Playwright 测试、MongoDB 测试、CommonJS 与 ESM 桥接、以及基于 Node 和 OpenAI 构建 RAG 系统等教程和视频。

4. 代码与工具 (Code & Tools)：
• SVGO 4.0：Node 驱动的 SVG 优化工具，v4.0 带来默认插件、公共 API 的重大变更，并支持 ESM/CJS 双包模式 (作者：Kir Belevich)。
• Hono 4.8：跨运行时的 Web 标准框架，新增路由辅助函数、JSX 流式传输和 CORS 改进，以及静态站点生成插件系统 (作者：Yusuke Wada 等)。
• LogTape 1.0.0：适用于 Node、浏览器和边缘函数的通用日志工具，特别适合希望以低门槛方式为最终用户添加日志的库开发者 (作者：Hong Minhee)。
• 其他工具更新包括 zx 8.6、Typegoose 12.17、OpenAI Node 5.7、Electron 37.0、BullMQ 5.56 和 Mocha 11.7。

5. JavaScript 领域其他动态 (Elsewhere in JavaScript)：
• Dr. Axel Rauschmayer 发布新书《Exploring JavaScript (ES2025 Edition)》，免费在线阅读并附带学习卡片。
• Porffor 提前编译 JavaScript 编译器的创建者分享了工作原理的演讲。
• 介绍新的自定义元素 <syntax-highlight>，利用 CSS Custom Highlight API 简化语法高亮。
• Git 2.50.0 发布，包含重要更新；浏览器中 JSON 模块脚本现已“Baseline Newly Available”。

若要免费使用 Gemini CLI，只需使用个人 Google 账户登录，即可获得免费的 Gemini Code Assist 许可证。该免费许可证可让您使用 Gemini 2.5 Pro 及其庞大的 100 万词元 (token) 上下文窗口。为确保您在此预览版期间极少（甚至不会）达到用量上限，我们提供了业界最充裕的免费额度：每分钟 60 次模型请求和每日 1,000 次请求。

如果您是需要同时运行多个代理的专业开发者，或者偏好使用特定模型，您可以使用 Google AI Studio 或 Vertex AI 的密钥来按使用量计费，或获取 Gemini Code Assist 标准版或企业版许可证。

现已推出预览版的 Gemini CLI 提供强大的 AI 功能，从代码理解、文件操作到命令执行和动态故障排除。它为您的命令行体验带来根本性的升级，让您能用自然语言编写代码、调试问题并简化您的工作流。

通过 Google 搜索为提示提供事实依据，以便抓取网页内容，并为模型提供实时的外部上下文。
通过对模型上下文协议 (MCP) 的内置支持或捆绑的扩展来扩展 Gemini CLI 的能力。
自定义提示和指令，以针对您的特定需求和工作流调整 Gemini。
在您的脚本中以非交互方式调用 Gemini CLI，以自动化任务并与现有工作流集成。
Gemini CLI 可用于多种任务，包括使用 Veo 和 Imagen 制作一部短片，讲述一只橘猫在澳大利亚冒险的故事。

Google

Gemini CLI: your open-source AI agent

Free and open source, Gemini CLI brings Gemini directly into developers’ terminals — with unmatched access for individuals.

截至本文写作时（2025 年 6 月）， corner-shape 是一个非常新的特性，浏览器支持有限，目前仅在 Chrome（版本 M139 及以上）中可用。规范可能仍会发生变化。现在就尝试 Chrome Canary 来查看这些演示。

AI 摘要：本文深入探讨了 CSS 的新兴属性 corner-shape ，这一属性极大地扩展了网页设计中对元素边角样式的控制能力，超越了传统的 border-radius 圆角效果，引入了多样化的几何形状选项，并结合超级椭圆（Superellipse）概念，提供了更精细的设计可能性。文章从 border-radius 的基础讲起，逐步介绍了 corner-shape 的多种预定义形状关键字、多值组合应用、动画过渡效果，以及超级椭圆函数的强大功能，旨在启发开发者在设计中尝试创新的边角样式。

Frontend Masters

Understanding CSS corner-shape and the Power of the Superellipse

The CSS corner-shape property represents one of the most exciting additions to web design’s geometric toolkit in recent years. Extending our ability to control the appearance of corners beyond the simple rounded edges we’ve become accustomed to with border…

AI 摘要：本文详细介绍了如何通过重构 MutationObserver 和 IntersectionObserver 的 API，使其使用更加简洁和直观。作者通过提供简化的代码示例，展示了如何将复杂的观察者 API 转换为易用的回调模式和事件监听模式，并详细解释了相关的选项和方法。此外，作者还推荐了 Splendid Labz 的工具库，方便开发者直接使用这些重构后的 API，同时分享了学习重构和 JavaScript 的经验。

CSS-Tricks

A Better API for the Intersection and Mutation Observers | CSS-Tricks

Zell discusses refactoring the Resize, Mutation, and Intersection Observer APIs for easier usage, demonstrating how to implement callback and event listener patterns, while highlighting available options and methods.

UI Cards Hover Collection ™

感想就是感觉这游戏完全不应该被名字或者某些片段片面判断，这游戏内核更多像是反邪教反不平等的恋爱关系等等等，我觉得改的名字情感反诈模拟器还挺符合了，30 非常非常值。
以下是一些杂乱的评论：

感觉这游戏第二章开头有一种以前看异物志的感觉，风格好喜欢（x）

这拍的是真好，运镜和各种镜头都好自然。

第一章第二章：诶好尬这男主不行啊，但是镜头质感挺好挺电影感的
第三章：卧槽神回
后面一口气看完看完再回味好像也还可以，该收的伏笔也都回收了，不愧是拍电影的

本来以为是图一乐系列，玩完第三章我是真服气，这就是第九艺术啊！
表现力真的很强，尤其是第三章那一段没忍住
通宵打完游戏了……含金量真高吧，第一次想看游戏的影评。

网上对后面的章节反响一般，我感觉虽然打不到第三章巅峰但也是很不错的，有很多电影拍摄的手法，上一个给我这种感觉的类似的游戏好像是……底特律变人？总之这些方面吊打完蛋美女之类的影游了，演员演技都贼好贼好

而且这游戏感觉也属于后劲贼大的那一挂，代入进去的话，