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

AI 摘要：本文详细探讨了 CSS Grid 中三种常见的列宽设置方式（ 1fr 1fr 、auto auto 和 50% 50% ）在不同场景下的表现和差异。作者通过多个示例和截图，分析了这些设置在处理间距（gap）、内容大小、溢出等问题时的行为差异，指出 fr 单位通常表现最为直观和可预测，但也存在“blowout”问题，并提供了解决方案如 minmax(0, 1fr) 。此外，文章还提及了列宽的混合使用以及其他关键词如 min-content 和 max-content 的潜在价值。

AI 摘要：本期 Node Weekly 聚焦 Node.js 生态系统的最新动态与技术更新，重点讨论了 Node.js 版本生命周期管理、技术提案进展以及一系列工具和库的更新。文章强调了旧版本（如 v18 及更早版本）已进入 EOL 状态，建议开发者直接升级到 v22 以获得更好的未来支持，同时介绍了 Node v24.2.0 的新功能、TC39 会议的技术提案、Jest 30 的重大改进，以及多个 Node.js 相关的工具和库的最新版本发布。此外，还涵盖了 JavaScript 生态系统的其他重要动态，如 Rolldown-Vite 带来的构建速度提升、CSS 2025 年度调查。

1. 社区动态
• Matteo Collina 指出 Node.js v18 及更早版本现已 EOL。他详细分析了这对旧版本用户意味着什么，以及为什么应该跳过活跃的 LTS v20 版本，直接升级到 v22 版本，以最大程度地适应未来发展。如果您必须继续使用旧版本，Matteo 分享了一个可供考虑的选项。
• Node v24.2.0（Current）发布：引入 import.meta.main，一个新的布尔值，用于判断当前 ES 模块是否为进程的入口点，便于在模块直接运行时执行特定代码；移除了 nghttp2 中对 HTTP/2 优先级信号的支持；使用权限系统时无需将应用程序入口点传递给 --allow-fs-read
• TC39 会议与技术提案：Sarah Gooding 总结了 TC39 近期会议讨论和推进的提案，包括 Array.fromAsync、Error.isError 和显式资源管理。

2. 测试框架与工具更新
• Jest 30 发布，带来了一系列重大改进，标志着数年来的一次重要版本更新。
• SQLite-JS：一个有趣的 SQLite 扩展，允许使用 JavaScript 编写自定义 SQLite 函数。

3. 博文教程
• Native Hot Module Reloading in Node via Module Hooks：通过模块钩子实现原生高效的“热模块”功能
• Unpacking Config and Environment Variables in Node：Liran Tal 分享了在 Node.js 中处理配置和环境变量的挑战及最佳实践
• Postgres 迁移：推荐使用 node-pg-migrate 处理 Node.js 中的 Postgres 迁移（作者：Boas Falke）。
• 构建 API：探讨如何使用 Node.js 和 gRPC 构建 API
• 在 Node 中使用 SQL 和 Sequelize：介绍在 Node.js 中使用 Sequelize 进行 SQL 操作

4. 代码与工具推荐
• Mock Service Worker：一个用于 REST/GraphQL API 模拟的库，支持拦截请求并模拟响应
• tz-lookup：基于经纬度的快速时区推断工具，以速度和大小为代价换取准确性
• 其他工具更新：包括 Babel 8 Beta、Prisma 6.9、OpenAI Node 5.2、MongoDB Node.js Driver 6.17 等多个库和框架的最新版本发布。

5. 其他 JavaScript 生态动态
• Rolldown-Vite：Evan You 宣布了基于 Rust 的快速 JavaScript 打包工具 Rolldown 的 Vite 替代包，许多开发者报告构建时间显著缩短。
• Gleam：一种针对 Erlang 和 JavaScript 运行时的语言，编译到 JS 的速度提升了 30%。
• State of CSS 2025：CSS 年度调查现已开放参与。

Josh Dillon continues an electrifying exploration of glitch animation in UI with this set of radio buttons. Make sure to visit Josh's collections for more.

AI 摘要：Oxlint 1.0 作为首个稳定版本正式发布，这是一个基于 Rust 开发的 JavaScript 和 TypeScript 代码检查工具，性能比 ESLint 快 50~100 倍，支持超过 500 条 ESLint 规则，并在 Shopify、Airbnb 等大公司中得到应用。Oxlint 强调快速、零配置的特性，便于开发者快速上手，同时支持通过配置文件进行定制化，并提供与 ESLint 的平滑迁移工具和插件支持。未来，Oxlint 将继续优化性能、支持自定义规则和更精细的配置，团队也在不断壮大，期待社区反馈以推动项目发展。

void(0)

Announcing Oxlint 1.0

The first stable version of Oxlint, a fast & easy-to-use Rust-powered linter for JavaScript and TypeScript, is out. Learn about its 50~100x speed advantage over ESLint, support for 500+ rules, real-world adoption by major companies, and easy migration.

看到 alist 被以非常丑陋的姿态卖掉，对作者、用户、收购方都是个悲剧，感觉非常可惜，但从开源作者的角度又挺理解原作者的，现在破口大骂资本的 alist 用户应该都没体会过开源的苦，看不到作者的长期孤独贡献，只看到又少了一个可以白嫖的项目

看图二就知道这显然不是一个健康的开源项目状态，作为一个 50k stars 的顶流项目，contributors 只有 100 多，第二名非机器人 contributor 的贡献量刚到作者的 8%，再往下更是断崖减少，作者从 2024 年就已经很少提交了，后面也一直没有其他维护者接手，除非作者积极回归，这项目的最终死亡已经是必然了，只是开始死亡的时间在一年半之前

反观 RSSHub，虽然 star 没 alist 多但 contributors 人数接近 10 倍，在作者贡献量下降的时期也及时有其他维护者补充，总体维护效率并没有下降反而一直在上升

总之 alist 一直都不是一个健康的开源状态，离开作者根本无法存活，作者又长期得不到足够的帮助和资助，用户也视而不见反而都在反资本，至于那些非 contributors 趁热度 fork 出的各种 blist xlist，如果 forker 在 alist 还有救的时候都没想着去提交一行代码，现在等 alist 死了才出来扛大旗，真的能相信他们能够长期任劳任怨地维护吗？

对用户，与其破口大骂资本，不如想想你现在除了 alist 还在白嫖哪些开源项目，去看看它们还好么，有什么可以帮上忙的，哪怕只是去送上一份感谢，可能都能让那些可怜的牛马开源作者开心上好几天，能让项目多维持几天

对开源作者，怎么让开源项目到达健康可持续的状态，而不是最后被迫廉价丑陋变现，是一个值得更多思考的问题

一定程度上理解作者的选择，但作者在卖掉Alist的过程中，没有保持信息的公开透明，我认为也是导致目前这个局面的原因之一。暂且不提征求社区的意见，如果能够说明这样做的动机和项目未来的方向，我认为对于各方来说都会更好接受一些。