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

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 关键字，允许元素完全填充容器可用空间。

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

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 提交反馈和问题。

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

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

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

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 等，覆盖多个技术领域。

AI 摘要：本期 JavaScript Weekly（#743，2025年7月4日）内容涵盖了 JavaScript 生态系统的最新动态，包括 Deno 2.4 的重大更新、ECMAScript 2025 新特性解析、以及多个工具和库的发布。尽管受到热浪和假期的影响，内容略显精简，但仍包含了丰富的文章、工具和行业新闻，适合对 JavaScript 及相关技术感兴趣的开发者深入了解最新趋势和技术进展。

1. 技术更新
• Deno 2.4 更新：重新引入 deno bundle 命令，支持服务器和客户端单文件打包，兼容 npm 和 JSR 依赖，具备自动树摇功能；新增 import 导入任意文件功能，OpenTelemetry 支持稳定，标志着一次重要的版本更新。
• Bun v1.2.18 发布：作为 Deno 的竞争者，Bun 也推出了新版本，具体细节未展开，但值得关注。
• ECMAScript 2025 新特性：Paweł Grzybek 提供了以示例为主的视角，介绍 ES2025 的新特性，与之前 Dr. Axel 的解读形成补充。
• 其他工具发布：包括 Rspack 1.4（基于 Rust 的快速打包工具，支持 WebAssembly）、Electron 37.0、ESLint 9.30.0/9.30.1、Astro 5.11、Babel 7.28.0 和 Three.js r178 等。

2. 行业简讯
• JavaScript 商标纠纷：Ryan Dahl 更新了与 Oracle 关于 JavaScript™ 商标的纠纷进展，Oracle 有一个月时间回应 Deno 的取消请愿。
• JS1024 代码高尔夫比赛：一项年度 JavaScript 代码高尔夫比赛，主题为“Creepy”，参赛者需在 1024 字节内完成程序，截止日期为 7 月 19 日。
• 微软开源：GitHub Copilot Chat 扩展在 VS Code 上开源，展示微软扩展开发方式。

3. 文章与教程
• 如何构建 AI 驱动的颜色搜索引擎：Lúí Smyth 介绍如何结合多种技术打造 AI 驱动的颜色建议工具，技术应用具有广泛实用性。 #AI #color
• 轻量级响应式状态管理：Loren Stewart 探讨使用 JavaScript 原生代理（Proxies）构建响应式状态管理系统，避免依赖外部库。
• Next.js 全栈开发：Robin Wieruch 指导如何使用 Next.js 15 和 React 19 进行全栈开发，适合希望扩展技能的前端开发者。
• JavaScript 解析谜题：Hillel Wayne 分享一个简单的 14 字符 JS 问题，挑战开发者解析能力，是今年最受欢迎的内容之一。
• 2025 Node.js 模式：Ashwin 反思 Node.js 当前潜力，涵盖 ES 模块、内置 Web API、测试运行器等新特性。
• 其他专题：包括通过超声波传输数据（Lorenz Diener）、React 信号知识（Ryan Carniato）、Mapbox 3D 模型指南（Mykola Chernyshevskyi）、JSDoc 优化开发流程（Jordan Booker）。

4. 代码与工具
• Milkdown：一个插件驱动的 WYSIWYG Markdown 编辑器框架，支持高度定制化。
• Repomix 1.0：将代码库打包为 AI 友好格式，适合用 LLM 分析代码。
• snapDOM 1.8：快速准确地将 DOM 节点捕获为 SVG 图像，保留样式和字体。 【这个看着挺不错的 相比 html2canvas 等】
• Time Picker：基于 shadcn/ui 的日期时间选择组件，简洁优雅。
• 其他工具：包括 Protobuf-ES 2.6、React Chessboard 5.0、Faker 9.9、Pixi.js 8.11 等。

5. 其他生态系统动态
• Patreon 国际化重构：涉及超 10,000 个 JavaScript 调用点的国际化重构故事。
• Cloudflare Containers：Cloudflare 推出新容器服务，扩展 Workers 功能。
• One Million Chessboards：在线 1000x1000 棋盘项目的工程和扩展故事。
• GitHub 漏洞赏金：Sharon Brizinov 分享通过追踪 GitHub 强制推送的提交发现价值 25k 美元的秘密。
• PlanetScale 进军 Postgres：MySQL 云服务提供商进入 Postgres 领域，处于私有预览阶段。
• Strudel：浏览器内编码音乐的工具，提供实时示例。

AI 摘要：本文由白帽黑客 Sharon Brizinov 撰写，详细描述了他如何通过 GitHub Archive 和 GitHub Event API 扫描自 2020 年以来所有公开的“Oops Commits”（即被开发者通过强制推送删除的提交）以寻找泄露的秘密信息。他发现了价值 25,000 美元的漏洞赏金，并与 Truffle Security 合作开源了一款工具 Force Push Scanner，用于帮助组织检测隐藏的提交中的秘密。文章深入探讨了 GitHub 如何永久存储被删除的提交、如何利用 API 和自动化工具发现这些提交中的敏感信息，以及如何通过手动和 AI 辅助的方式筛选出高价值的秘密。

1. 背景介绍
• Sharon Brizinov 是一位专注于 OT/IoT 设备漏洞研究的白帽黑客，偶尔参与漏洞赏金狩猎。
• 此前发表过关于 GitHub 仓库中隐藏秘密的文章，与 Truffle Security CEO Dylan 交流后，决定进一步探索大规模秘密狩猎的新方法。
• 使用 GitHub Event API 和 GH Archive 项目，专注于扫描“零提交推送事件”（即被删除的提交）以发现秘密。

2. 什么是删除提交？
• 解释了开发者通过 git reset 和 git push --force 删除提交的过程，目的是隐藏误提交的敏感信息。
• 指出即使提交被删除，GitHub 仍会永久存储这些“悬挂提交”（dangling commits），通过提交哈希值即可访问。
• 通过示例展示了如何在自己的仓库中模拟删除提交，并证明即使本地看不到，GitHub 依然保留记录。
• 探讨了 GitHub 保留这些提交的原因，可能是为了支持拉取请求、分支、审计等功能。

3. GitHub Event API 的作用
• 介绍了 GitHub Event API，用于获取 GitHub 上的各种事件数据（如推送代码、创建仓库等）。
• 结合 GH Archive 项目（一个开源的 GitHub 事件归档服务），可以访问历史事件数据，避免手动猜测提交哈希。
• 通过筛选“零提交推送事件”（PushEvent Zero-Commit），快速定位被删除的提交。

4. 自动化构建
• 描述了如何通过自动化工具扫描 GH Archive 数据，提取“Oops Commits”，并使用 TruffleHog 扫描其中的秘密。
• 与 Truffle Security 合作开源了 Force Push Scanner 工具，支持组织或用户扫描自己的“Oops Commits”。
• 强调工具的道德使用，仅用于帮助团队评估潜在风险。

5. 寻找高影响力的秘密
• 扫描自 2020 年以来的数据，发现了数千个活跃的秘密。
• 通过手动搜索（过滤公司邮箱相关提交）、自定义工具（vibe-coded 平台用于分类和可视化）和 AI 辅助分析，筛选出高价值秘密。
• 数据显示：MongoDB 秘密泄露最多，但 GitHub PAT 和 AWS 凭据最具价值；.env 文件是泄露最频繁的文件类型。

6. 案例研究：阻止供应链攻击
• 发现了一个开发者泄露的 GitHub PAT，具有对 Istio 项目（一个开源服务网格，拥有 36k 星标）的管理员权限。
• 该权限可能导致大规模供应链攻击，如修改代码、创建发布或删除项目。
• 通过 Istio 的漏洞报告页面及时报告，团队迅速撤销了 PAT，阻止了潜在风险。

7. 总结与反思
• 项目成功发现了大量秘密，Sharon 通过漏洞赏金获得约 25,000 美元。
• 强调“删除提交并不安全”的观念，一旦秘密被提交，应视为已泄露并立即撤销。
• 开源工具和研究成果旨在帮助社区提高安全意识和防护能力。

AI 摘要：本文详细介绍了如何使用 Framer Motion 和 React 创建一个带有 Gooey 效果的搜索交互组件。作者受到动态岛动画的启发，将 Gooey 效果应用于搜索栏，打造了一个小型但有趣的交互体验。教程涵盖了 Gooey 效果的实现、SVG 滤镜的应用、Framer Motion 的集成、搜索状态管理、动画效果的优化以及针对 Safari 浏览器的兼容性处理，旨在激发开发者创意并提供实用指导。

1. Gooey 效果的创建：
• 介绍了 Gooey 效果的起源，基于 Lucas Bebber 的文章 The Gooey Effect。
• 通过调整 SVG 滤镜中颜色矩阵的 alpha 通道值，实现自定义的 Gooey 效果。
• 提供了具体的代码示例，展示了如何使用 feGaussianBlur 和 feColorMatrix 创建滤镜效果。

2. 应用 Gooey 效果：
• 在主组件中通过 CSS 将 SVG 滤镜应用到父元素上。
• 提供了简单的代码结构，展示滤镜如何与 DOM 元素结合。

3. Framer Motion 集成：
• 使用 Framer Motion 为搜索栏添加动态动画效果，定义了四种状态（初始状态、搜索激活、搜索结果、加载中）来管理交互逻辑。
• 使用 AnimatePresence 组件实现搜索结果的集体展示和个体动画效果。
• 详细解释了 getResultItemVariants 和 getResultItemTransition 函数，用于控制搜索结果项的动画效果（如缩放、位移、模糊效果）。
• 动画设计注重细节，例如通过索引计算延迟实现顺序动画，并使用弹簧动画（spring）增加流畅性。

4. Safari 兼容性挑战：
• 提到 WebKit 对 SVG 滤镜的限制，作者通过 isUnsupported 布尔值对 Safari 浏览器进行了动画调整。
• 强调了兼容性问题的长期存在，并提供了针对性的解决方案。

AI 摘要：本文是关于 CSS shape() 函数系列的第四篇文章，重点介绍了两个较少使用但非常实用的命令：close 和 move 。作者详细解释了 close 命令如何用于闭合形状，以及在特定情况下如何优化代码；同时，move 命令被用于在单一 shape() 定义中创建多个不连续的形状部分，极大地扩展了设计可能性。通过具体的代码示例和应用场景（如切出形状和重复形状），文章展示了如何利用这两个命令实现复杂的 CSS 形状设计。

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

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 伪元素调整图标样式，支持滤镜、不透明度和自定义图像。

AI 摘要：本文详细探讨了在 CSS、Android、iOS、Figma 和 Sketch 等多个平台和设计工具中实现一致的阴影效果（drop shadow）的问题。作者通过对比不同平台的阴影渲染差异，指出模糊半径（blur radius）的处理方式是导致不一致的主要原因，并提供了具体的缩放因子（scale factors）来调整模糊半径，以实现跨平台的视觉一致性。文章还深入分析了各平台的渲染机制和技术细节，为设计师和开发者提供了实用的转换公式和指导。

1. 引言与问题背景
• 介绍了跨平台阴影效果不一致的问题，通过图片对比展示了 CSS、Android 和 iOS 渲染相同阴影参数时的差异（例如 Y 偏移 24px，模糊半径 24px 的阴影在各平台呈现不同）。
• 指出 Android 使用 setShadowLayer 而非 Material elevation，CSS 和 Android 阴影虽接近但仍有细微差异（Android 更模糊）。

2. 浏览器间的阴影一致性
• 讨论了 CSS 阴影在不同浏览器（Safari、Firefox、Chrome）中的表现，发现 box-shadow 在这些浏览器中渲染效果基本一致，截图以 Safari 为主。

3. 设计工具与 CSS 的对比
• 指出 CSS、Sketch 和 Figma 的阴影效果一致，但背景模糊（background blur）不在本文讨论范围内，仅聚焦于阴影效果。

4. 模糊半径的差异分析
• 阴影的参数中，位置偏移和颜色在各平台表现一致，唯独模糊半径的处理方式不同。
• 作者通过重新排列模糊测试结果，发现模糊半径存在 1×、2× 和 3× 的缩放模式，阴影主要集中在 1× 和 2× 范围内。

5. 缩放因子与技术细节
• 解释了 CSS 规范中模糊半径的标准差为模糊半径的一半，而 iOS 的模糊半径是 CSS 的两倍，因此 CSS 到 iOS 的缩放因子为 0.5×。
• Android 使用 Skia 渲染，模糊半径缩放涉及 1 / sqrt(3) 的因子，与 CSS 不完全一致（部分原因是早期 Safari 的影响）。
• 提供了详细的缩放因子表格，用于在 CSS、Sketch、Figma、Android 和 iOS 之间转换模糊半径，例如 CSS 到 Android 为 0.866×，iOS 到 CSS 为 2.0×。
• 通过调整后的对比图和色调分离（posterising）结果，展示了缩放后的阴影效果非常接近，尽管由于渲染方法和代码差异无法完全一致。

6. 应用与结论
• 研究目的是为 Pinwheel 工具导出 Android 和 iOS 阴影代码时提供正确的缩放因子，确保跨平台一致性。
• 总结了实现近似一致阴影的可行性，并感谢 Kit Grose 在审稿中提供的 Skia 代码注释支持。

NuxtLabs, creators of Nuxt and Nitro, are joining Vercel.

Same license, roadmap, and open governance, but now in a joint mission to build the best web.