AI 摘要：本文主要聚焦于前端开发领域的最新动态和技术更新，尤其关注 WWDC25 带来的 Safari 26 新特性，如 SVG 图标支持、CSS 锚点定位和滚动驱动动画等。同时，文章涵盖了其他前端技术话题，如 contrast-color() 函数、Temporal JS API、响应式图片优化等，并分享了作者对技术趋势和行业现状的个人见解。整体内容旨在为读者提供前沿技术资讯、实用技巧和有趣的资源推荐。

1. Safari 26 新特性（WWDC25 亮点）
• SVG 图标支持：Safari 终于支持 SVG 作为 favicon，标志着“favicon 乱象”的终结，尽管相比其他浏览器晚了数年。
• CSS 锚点定位：介绍 CSS anchor positioning 功能，适用于工具提示和弹出框，Chromium 和 Webkit 已支持，Oddbird 提供了 polyfill。
• 滚动驱动动画：Safari 跟进 Chromium 支持 scroll-driven animations，Firefox 部分支持，作者推荐 Bramus 的免费课程学习相关技术。
• 其他小更新：包括 JS 小幅改进、text-wrap: pretty、contrast-color()、margin-trim 和 progress() 等 CSS 新特性。
• Safari 现状反思：尽管有进步，Safari 在 Web 平台测试中仍有较多失败案例，作者质疑其是否能摆脱“新 IE”的标签。

2. 技术热点与资源
• State of CSS 调查：鼓励读者参与年度 CSS 调查以了解新趋势。
• Import Maps 更新：Shopify 推动了 import maps 规范变更，解决了模块加载和单一 map 限制问题，已在 Chromium 和 Webkit 实现。
• Contrast-color() 函数：Safari 支持该函数，但仅限于黑白对比，作者讨论其局限性并推荐相关阅读。
• Optional Chaining 争议：作者对过度使用可选链 (?.) 提出质疑，认为频繁检查属性存在性可能是代码异味。

3. 有趣项目与工具
• Internet Roadtrip：一个由 Neal 开发的公路旅行，和互联网陌生人共同决定目的地。到目前为止已行驶 3000 多英里
• Temporal JS API：Firefox 率先支持 Temporal，改善了 JavaScript 日期处理体验。
• TypeScript Prettify：介绍一个提高 TypeScript 类型可读性的技巧。
• 响应式图片优化：为响应式图像编写正确的标记是很困难的，推荐一个响应式图片 linter 工具。
• 框架渲染方式：Ryan Carniato 讲解了 React、Vue 等框架的 DOM 渲染方法。
• Text-box 属性：介绍 MDN 上的 text-box 属性，用于未来文本垂直对齐。

4. 实用技巧与工具推荐
• 预加载响应式图片：通过旧的 link 元素预加载图片的技巧。
• 三个开源项目：包括 gron（命令行工具，转换 JSON 使其易于使用 grep 等工具进行搜索）、tweety（浏览器集成终端）和 parrot.live（终端动画）。
• CSS Shape 工具：介绍一个将 SVG 路径转换为 CSS shape() 的在线工具。

Stefanjudis

Web Weekly #160

Preloading responsive images, CSS `contrast-color()` and the long-awaited `Temporal` JS API.

AI 摘要：本文详细介绍了 HTML 规范的一项重要更新，即在属性中对 < 和 > 字符进行转义，以防止变异型跨站脚本攻击 (mXSS) 漏洞。此更新已于 2025 年 5 月 20 日纳入 HTML 规范，并在 Chrome 138 版本中实现，预计于 2025 年 6 月 24 日正式发布为稳定版。文章分析了这一变化对 Web 开发者的影响，涵盖了变化的具体内容、不受影响的场景、可能导致问题的场景以及解决方案，旨在帮助开发者适应这一安全增强措施。

Chrome for Developers

HTML spec change: escaping < and > in attributes  |  Blog  |  Chrome for Developers

What you need to know about this change to how attributes are escaped.

AI 摘要： 本文深入探讨了如何改进 Resize Observer API 的使用体验，通过封装和重构使其更易用和直观。作者从 Resize Observer 的基本使用步骤开始，逐步优化代码结构，提出了一种更友好的 API 设计，类似于事件监听器的模式，并支持回调和选项配置。此外，文章还提供了停止观察的方法，并介绍了 Splendid Labz 工具库中增强版本的 Resize Observer 实现，强调了代码重构在提升可维护性和易用性方面的重要性。

CSS-Tricks

A Better API for the Resize Observer | CSS-Tricks

ResizeObserver, MutationObserver, and IntersectionObserver enhance performance over their predecessors. Zell discusses their API similarities, usage steps, refactoring strategies, and advantages with practical examples.

Aleks(@aleksliving): quick tip for nested radii → your corners will look a lot better if you set the outer radius to the sum of the inner radius + padding

AI 摘要：本文由 Myriam Frisano 撰写，深入探讨了 SVG 中最强大的元素 <path> 的基础知识，重点介绍了直线和角度路径的命令。作者通过简单的示例和可视化工具，帮助读者理解 SVG <path> 元素的语法和规则，旨在让读者能够将 SVG 语义标签转化为 <path> 所能理解的语言。本文是两部分系列文章的第一篇，涵盖了直线命令的基础知识，并为后续的曲线和弧线内容奠定了基础。

1. 引言与背景：
• 介绍了 SVG 的基础知识，指出 <path> 元素虽然复杂，但却是 SVG 中最强大的元素。
• 强调 <path> 在技术绘图和数据可视化中的重要性，并建议初学者先掌握 SVG 基础元素（如 rect、line 等）再深入学习 <path>。

2. 学习前提与文章结构：
• 建议读者熟悉 SVG 的 viewBox 和基础元素语法，推荐先阅读作者之前的入门指南。
• 文章使用 JavaScript 编写代码，注重代码的可读性，通过命名坐标和简化数学计算来降低理解难度。

3. 成功设置：可视化辅助：
• 提供了一个可视化的 viewBox 网格，帮助读者理解坐标和路径命令的关系。
• 强调在 SVG 中添加文本时的可访问性问题，建议在实际项目中优先使用 HTML 渲染文本。

4. 进入 <path> 及其强大的 d 属性：
• 介绍了 <path> 元素的 d 属性，它使用特定的命令语言来定义路径形状。
• 指出非路径元素（如 line、rect）本质上是预定义的路径，而 <path> 需要开发者手动定义形状逻辑。

5. 起点命令：M：
• M 命令用于移动画笔到指定起点，仅设置位置而不绘制任何内容。
• 接受 x 和 y 坐标作为参数，是每个路径的起点。

6. 基础直线命令：M, L, H, V：
• L 命令绘制从当前点到指定点的直线，接受 x 和 y 坐标。
• H 和 V 命令分别绘制水平和垂直线，仅需指定一个坐标（另一个坐标由当前点推导）。
• 通过示例和 CodePen 演示，展示了这些命令的实际效果，并与 <line> 元素进行对比，突出 <path> 的高效性。

7. 使用 Z 命令创建多边形和折线：
• 介绍了 Z 命令，用于闭合路径，类似 <polygon> 元素的效果。
• 通过示例展示了如何使用 <path> 替代 <polyline> 和 <polygon>，并讨论了代码可读性的问题。

8. 相对命令：m, l, h, v：
• 解释了小写命令（如 m, l）表示相对坐标，相对于上一个点的偏移量。
• 通过示例对比绝对和相对命令的优缺点，指出两者各有适用场景。

9. 跳转点：复合路径：
• 介绍了复合路径的概念，利用多个 M 命令实现路径跳转，减少代码冗余。
• 示例展示了如何用单个 <path> 元素绘制网格，替代多个 <line> 元素。

10. 后续内容预告
• 预告了下一篇文章将讨论曲线和弧线命令，进一步扩展 <path> 元素的功能。
• 列举了 Smashing Magazine 上其他相关文章，涵盖 SVG 弧线、无障碍性 SVG 定制和动画等主题。

Smashing Magazine

Decoding The SVG path Element: Line Commands — Smashing Magazine

SVG is easy — until you meet `path`. However, it’s not as confusing as it initially looks. In this first installment of a pair of articles, Myriam Frisano aims to teach you the basics of `` and its sometimes mystifying commands. With simple examples and visualizations…

AI 摘要： 本期 Frontend Focus 第 696 期（2025年6月11日）聚焦于苹果 WWDC 2025 开发者大会的最新动态，特别介绍了 Safari 26 Beta 版本的新功能与改进，同时涵盖了 CSS 领域的最新技术和工具。此外，文章还提供了丰富的教程、工具和资源，内容涉及 CSS 新特性、网页打印优化、UI 组件开发等多个前端开发热点话题，旨在帮助开发者紧跟技术趋势并提升实践能力。

WWDC 2025 更新
• 主题演讲：WWDC 2025 主题演讲时长约一个半小时，内容偏向概述，开发者细节较少，可通过 The Verge 的 10 分钟精剪版快速了解，或观看更深入的 State of the Union 更新。
• Safari 26 Beta 与 WebKit 新功能：Safari 版本号从 18 跳跃至 26，与苹果操作系统版本号一致，带来了 60 多项新功能和 100 多项改进，包括 WebGPU 支持、锚点定位、滚动驱动动画等；同时提供近 40 分钟视频，详细讲解 CSS 新特性及音视频、图像、图标等媒体支持。
• 声明式 Web Push：通过 20 分钟视频讲解声明式 Web Push 的工作原理，如何基于现有标准构建通知功能，并保持向后兼容性。

文章、观点与教程
• 部分关键帧动画技巧：Josh W. Comeau 分享了创建动态、可组合关键帧动画的技巧，讲解清晰且注重可访问性。
• CSS contrast-color() 函数探讨：Daniel Schwarz 分析该函数在 Web 可访问性方面的现状、局限性及未来改进方向。
• Scroll-Driven Letter Grid：Chris Coyier 介绍一种利用可变字体随滚动变化的技术，但受限于浏览器支持，Safari 和 Firefox 暂不支持。
• Jen Simmons 谈新 CSS 特性：WebKit 团队的 Jen Simmons 讨论声明式 Web Push、表单控件样式、排版及 contrast-color() 等新特性。
• SVG path 元素解析：Myriam Frisano 讲解 SVG <path> 元素基础及其复杂命令，附带示例和可视化内容。
• Printing the web: making webpages look good on paper：Declan Chidlow 探讨如何通过 CSS 优化网页打印效果，打造整洁易读的文档。
• 其他教程：包括快速部署个人作品集网站、HTML 弹出通知自动关闭、CSS 与 JavaScript 粘性元素代码片段等内容。

工具、代码与资源
• SF Symbols 7：苹果图标库更新至 Beta 版，新增数百符号，总数接近 7000 个。
• Astro 5.9 发布：新增内容安全策略实验支持及 Markdown 渲染辅助函数。
• Storybook 9 更新：UI 组件工具新增交互、视觉和可访问性测试功能，支持 React、Svelte 等多种框架。
• Spectral.js 颜色混合库：基于 Kubelka-Munk 理论实现更接近颜料混合的颜色过渡效果。 #color
• 其他工具：包括 Smooothy 滑块组件、Fulldev UI 内容驱动网站组件库、SmoothUI 动画组件等。

AI 摘要：本文详细探讨了如何通过 CSS 和 SVG 技术解决渐变背景中常见的 banding（色带）问题。作者回顾了过去复杂的解决方案，并提出了一种更优的方法，即使用 SVG 滤镜和位移映射（displacement map）技术来创建颗粒状渐变效果，同时避免改变原始渐变的颜色属性。文章还讨论了当前方法的局限性以及未来改进的可能性，例如使用 filter() 函数直接对渐变背景应用滤镜，并通过多个示例展示了颗粒效果在不同场景中的应用。

1. 引言与问题背景：文章首先介绍了渐变背景或渐变蒙版中常见的 banding 效应，通过示例图片直观展示了这一问题，强调了解决此问题的必要性。
以往解决方案的不足：
• 增加渐变停止点（Easing）：通过添加更多颜色停止点来缓解 banding，但作者认为此方法不够理想。
• 叠加噪声层：早期方法通过伪元素叠加渐变层和噪声层并混合，但这种方法复杂且效果不佳。
• 改进后的叠加方式：后续尝试通过透明渐变末端显示噪声层，但仍存在复杂性和颜色失真的问题。
• SVG 滤镜初步尝试：作者在第二段视频中提出使用 SVG 滤镜生成噪声并叠加到渐变上，但仍不满意此方案。
• 叠加噪声与渐变的核心问题：所有叠加方法都会改变原始渐变的亮度、饱和度等属性，降低噪声透明度则会减少颗粒效果，影响解决 banding 的效率。

2. 更优解决方案：位移映射
• 原理说明：使用噪声层作为位移映射，通过 RGBA 通道值决定渐变像素在 x 和 y 轴上的偏移，避免直接叠加噪声改变颜色。
• 代码实现：通过 SVG 滤镜（feTurbulence 和 feDisplacementMap）生成噪声并应用位移效果，详细解释了滤镜参数和 CSS 布局处理。
• 问题修复：解决滤镜应用后边界内透明像素和边界外不透明像素的问题，使用 feBlend 和滤镜区域限制（或 clip-path）来优化结果。

3. 当前方案的问题与临时解决方案：
• 滤镜影响整个元素：滤镜会影响元素的所有内容（如文本、阴影），导致不希望看到的效果。
• 解决方法：通过伪元素分离渐变背景并应用滤镜，避免影响其他内容，提供了具体的 CSS 代码实现。

4. 未来改进方向：
• 使用 filter() 函数：提出直接对背景渐变应用滤镜的理想方法，简化代码，但目前仅 Safari 支持，呼吁其他浏览器实现此功能。
• 应用场景扩展：特别提到在蒙版渐变（如径向渐变蒙版）中应用颗粒滤镜的潜力，并讨论了跨浏览器兼容性问题和临时替代方案。

5. 更多示例：
• 颗粒状图像阴影：展示如何通过复杂滤镜创建颗粒状阴影效果，解决阴影边缘的 banding 问题。
• 颗粒状图像渐变淡出：通过位移半透明边缘像素实现颗粒状淡出效果。
• 噪声渐变圆盘：利用 SVG 径向渐变和滤镜创建独特的颗粒效果。
• 动画渐变发光边框：在流行的渐变发光边框中应用颗粒效果，提升视觉效果。
• 颗粒状 CSS 背景：通过多层线性渐变模拟网格渐变，并应用颗粒滤镜解决 banding。
• 颗粒状 SVG 背景：通过叠加不同形状和渐变填充的 SVG 元素，模糊并应用颗粒滤镜，创造抽象背景效果。

AI 摘要：本文详细介绍了如何使用 React Native、Expo、NativeWind 和 Reanimated 开发一款快节奏的移动游戏 NeonCity。作者分享了从灵感来源到具体技术实现的完整开发过程，涵盖了游戏的 UI 设计、手势检测、精灵图技术（Sprite Sheet）优化、性能提升以及使用 EAS Build 进行部署的经验。NeonCity 是一款设定在未来城市背景下的休闲游戏，玩家通过滑动屏幕匹配箭头方向以获得高分，游戏结合了快节奏的音乐和炫酷的视觉效果。

• 引言与灵感来源：作者受《赛博朋克：边缘行者》的启发，与设计师 Woojae Lee 合作，在 2023 年夏天启动 NeonCity 项目，目标是打造一款视觉效果出色的未来城市游戏。
• NeonCity 游戏简介：游戏设定在 2077 年的未来城市，玩家需在 1 分钟内通过滑动屏幕匹配从上方落下的箭头方向，连续准确操作可获得连击加分，使用倍率道具可进一步提升分数，配合城市风格的快节奏音乐和炫目视觉效果。
• 技术架构概述：文章介绍了使用 React Native 和 Expo 构建游戏的技术决策，展示了如何通过现代工具和技术实现跨平台移动游戏开发。
• UI 设计：使用 NativeWind 构建 UI，确保跨平台一致的用户体验，并简化维护。
• 手势检测：通过 react-native-gesture-handler 的 Pan Gesture 自定义钩子实现四个方向的手势检测（上、下、左、右），利用三角函数计算手势角度以优化性能。
• 精灵图技术（Sprite Sheet）：采用精灵图技术优化游戏中箭头的持续下落动画，将多个精灵图合并为单张大图，通过调整视口显示特定精灵，减少网络请求和内存使用，提升渲染性能。
• 实现方式：使用 React Native 和 Reanimated 的样式能力，通过 translateX 和 translateY 属性动态裁剪精灵图，确保只显示目标精灵。
• 避免不必要的重新渲染：使用 Reanimated 的共享值（Shared Values）在 UI 线程直接更新精灵位置，绕过 React 渲染周期，实现 60 FPS 的流畅动画。
• 游戏部署：选择 Expo 作为开发平台，利用 Expo SDK 处理原生代码生成（Expo CNG）和 SDK 版本管理，使用 EAS Build 简化 Android 和 iOS 部署流程，近期引入的 M4 Pro 工作线程将 iOS 构建速度提升了 1.85 倍。
• 开源与致谢：作者将 NeonCity 项目开源，鼓励更多开发者使用 React Native 和 Expo 开发应用，并感谢了项目中提供设计、代码审查和图形反馈的团队成员。
• 总结与资源推荐：作者推荐了学习 Reanimated 的教程资源，并提供了 NeonCity 的 GitHub 仓库链接，供开发者参考和学习。

Expo Blog

Building NeonCity: A fast-paced mobile game made with React Native, Reanimated, and Expo

Learn how NeonCity was built with React Native, Expo, NativeWind, and Reanimated—featuring sprite sheets, gesture detection, and EAS Build for deployment.

AI 摘要：本文是 React Status 第 431 期的内容，发布于 2025 年 6 月 11 日，涵盖了 React 生态系统的最新动态和前沿技术讨论。文章聚焦于 React 团队成员 Dan Abramov 近期的一系列博客文章，深入探讨了 React Server Components (RSC) 的技术细节和客户端/服务器架构的创新。此外，文章还报道了 Remix 框架的重大转型、React Native 新架构的进展、以及多个工具和库的更新，如 Storybook 9 和 React Final Form 7.0 等。同时，包含了 JavaScript 生态中其他值得关注的技术进展，如 Rolldown 打包工具和 Gleam 语言的性能提升。

1. Dan Abramov 最近的博客系列
• How Imports Work in RSC：介绍了 JavaScript 模块系统的基础知识，并探讨了 RSC 如何扩展模块系统以跨越服务器和客户端环境，解决模块导入的技术挑战。
• Progressive JSON：以 Progressive JPEG 为比喻，阐述了流式 JSON 数据在应用中的动态加载和渲染，结合 React 的 Suspense 功能实现更流畅的用户体验。
• Why Does RSC Integrate with a Bundler?：深入分析了为什么 RSC 需要与打包工具（如 bundler）集成，以及如何协调客户端和服务器代码的复杂性，是一篇技术性较强的文章。
• RSC for Lisp Developers：将 RSC 的理念与 Lisp 语言“代码即数据”的思想进行比较，探讨了服务器组件的设计哲学。
• 额外信息：Dan Abramov 宣布提供 UI 工程和 React 相关的咨询服务，机会可能有限。

2. 生态简讯
• React Native 团队已冻结旧架构代码库，全面聚焦新架构开发。
• React Jam 游戏开发活动回顾：开发者在 10 天内用 React 创建游戏，文章分享了获奖作品。
• Expo 团队分享了一个基于 React Native 和 Reanimated 构建的快节奏游戏案例研究。
• Remix 框架转型：Remix 和 React Router 一年前合并后，如今再次调整方向。React Router 回归 Remix 最初目标，而 Remix 重启为以模型优先、低依赖、Web API 为中心的 Preact 全栈框架。
• React Router 项目也有好消息，包括开发进展更新、新的开放治理模型和未来规划。

3. 技术洞察与教程
• The 3 Ways JavaScript Frameworks Render the DOM：SolidJS 创作者 Ryan Carniato 讲解了框架渲染 DOM 的三种方式，内容深入但易于理解（视频时长 16 分钟）。
• 多篇技术文章，包括 2025 年 React + Flask 项目创建、自定义 useState Hook、2025 React 设计模式与最佳实践、从 Next.js 迁移到 TanStack、SolidJS 教程以及 Remix V3 的缺陷分析。

4. 工具与库更新
• Storybook 9：UI 组件测试工具大更新，新增交互、视觉和无障碍测试功能，支持 React、Svelte、Next.js 等框架。
• Partycles：React 粒子动画库，提供 19 种效果（如烟花、气球），并展示了优秀的项目落地页面设计。
• React Final Form 7.0：高性能表单状态管理库，从 Flow 迁移到 TypeScript。
• Chrome Extension Boilerplate：基于 Vite 和 Turborepo 的 Chrome/Firefox 扩展开发模板，构建速度更快。
• 其他更新包括 Ink 6.0（支持 React 19）、React Native Reanimated 3.18、PrimeReact 10.9.6 等。

5. JavaScript 生态其他动态
• Rolldown-Vite：基于 Rust 的快速打包工具 Rolldown 即将被 Vite 集成，开发者反馈构建时间显著缩短。
• Node 的类型剥离加载器 Amaro 已经达到了 v1.0，标志着 Node.js 对 TypeScript 提供“稳定”支持的下一步。
• Gleam：一种易读易写的语言，编译到 JavaScript 后性能提升 30%。
• 其他技术如 Node.js 原生模块钩子实现热模块重载、Oxlint 1.0 发布等。

overreacted.io

A blog by Dan Abramov