AI 摘要：本文探讨了如何使用 CSS 和 SVG Filter ( feGaussianBlur ) 创建带有圆角的三角形框，并分享了作者在优化 CSS 选择器性能过程中的经验与教训。

AI 摘要：本文介绍了一种使用 CSS 和 SVG 滤镜为任意形状添加圆角的技巧，通过结合 clip-path 和 SVG 滤镜实现复杂形状的平滑圆角效果，并讨论了该技术的应用场景与浏览器兼容性问题。

katon (@hellokaton)：😎 听说你很懂 Web 渲染？
试试这个用 Three.js 和 Ammo.js 搞的 3D 物理引擎个人主页，
让你在浏览器里体验真实世界的碰撞和互动！
➤ 实时碰撞、互动，物理效果炸裂
➤ 光线投射，点哪打哪
➤ 移动端也能流畅运行
在线体验：https://0xfloyd.com
源码仓库：https://github.com/0xFloyd/Portfolio_2020

AI 摘要：本文为 TypeScript 的枚举（enum）功能辩护，指出当前对其的批评多源于误用而非特性本身的问题。作者强调枚举应作为符号化（symbolic）工具用于内部逻辑，而非直接绑定字面值或暴露为公共 API，并详细分析了错误使用枚举的三大风险及正确实践方法。

1. 引言与背景
• 近年来越来越多开发者批评 TypeScript 的枚举功能，倾向于使用联合类型或常量对象。
• 作者认为问题在于对枚举的误解和误用，而非特性本身。

2. 枚举的符号化本质
• 枚举应代表抽象概念而非具体值（如 "red" 或 #FF0000 ），类似 ES6 的 Symbol 特性。
• 示例：交通灯状态应通过 enum TrafficLight { Red, Yellow, Green } 抽象表示，而非绑定字符串或颜色代码。

3. TypeScript 枚举的陷阱
• 允许字面值赋值：如 enum TrafficLight { Red = "red" } 导致以下问题：
• 抽象泄漏：逻辑层与表示层耦合（如 UI 直接依赖 "red" 字符串）。
• 脆弱性：字符串比较易受大小写或拼写错误影响。
• 公共 API 污染：枚举值暴露后难以修改（如后端 API 返回 "Processing"）。

4. 正确使用建议
• 仅用于内部逻辑：枚举值应作为代码中的符号标签，不直接序列化或展示。
• 显式转换层：通过 Map 或映射函数将枚举值转换为外部需要的表示形式。

5. 结论
• 批评者常抱怨枚举“不易序列化”，但作者指出这是误用——枚举本就不应直接用于序列化场景。
• TypeScript 枚举虽有设计差异，但在符号化场景中仍具价值，关键在于区分抽象与具体表示。

Yazan's Software Thoughts

Understanding the Value of TypeScript Enums

Discover the true purpose of TypeScript enums and how to use them effectively as symbolic representations in your code

AI 摘要：本期探讨了前端技术的最新进展，包括 CSS 自定义 <select> 菜单、更柔和的文本下划线样式、新的 command 和 commandfor 属性，以及 scheduler.yield() 方法优化任务调度。此外，还介绍了流体排版（fluid typography）的改进思路、高延迟环境下的性能优化策略，以及 Chrome 用户体验报告中新增的往返时间（RTT）指标。

1. 新交互属性：command 与 commandfor
• 替代 popovertargetaction 和 popovertarget，无需 JavaScript 即可触发浏览器内置行为，提升按钮交互的可访问性（如自动关联 aria-expanded）。
• 推荐阅读 Keith Cirkel 的技术解析及他在二月份伦敦 Web 标准聚会上的演讲

2. 链接样式优化方案：Chris Coyier 对经典的蓝色链接进行了改进 ，提出通过 currentColor 和透明度调整下划线，平衡可识别性与阅读流畅性。

3. 完全可定制的 <select> 元素
• Chrome 135+ 支持通过 CSS 定制下拉菜单的所有组件（包括选项图标），并支持嵌入 HTML 内容（如图片）。
• Adam Argyle 总结了您需要了解的有关可自定义 <select> 及其提供的创意可能性的所有信息

4. 高延迟环境优化策略：Chrome 用户体验报告新增 RTT（往返时间）指标，Harry Roberts 提供应对高延迟的实践建议：协议优化、缓存策略等。

5. 流体排版再思考：Miriam Suzanne 指出当前 clamp() 方案的局限性，主张以用户默认字体大小为基准，避免“魔法数字”计算。

6. Web 平台开发速查表
• Patrick Brosset 整理浏览器新特性追踪与开发者参与标准制定的速查表，它重点介绍了如何追踪可用的功能、浏览器的新功能，以及如何通过发表自己的意见来影响平台的开发。

7. 任务调度优化：scheduler.yield()
• 新的 scheduler.yield() 方法 可以帮助我们分解长任务，从而消除在返回主线程和完成任务之间出现延迟的风险
• 优先执行现有任务而非新建任务，减少主线程阻塞（需注意 Chromium 浏览器兼容性）。
• 该 API 目前仅适用于基于 Chromium 的浏览器，因此如果您决定使用它，则需要为其他浏览器提供回退功能。

Chrome for Developers

Introducing command and commandfor  |  Blog  |  Chrome for Developers

Learn about the new capabilities for declarative behavior on buttons.

It's hard to avoid getting totally drawn in to the soft gradients and texture details of Antoine Wodniack's neon JavaScript black hole.
在 Antoine Wodniack 的霓虹 JavaScript 黑洞作品中，你很难不被柔和的渐变和纹理细节所吸引。

AI 摘要 ：本期 Node Weekly 聚焦 JavaScript 生态的重要更新与工具动态，包括 Express 5.1 正式成为 npm 默认版本、Node.js LTS 版本生命周期提醒、npm 恶意软件事件，以及 V8 引擎优化进展。同时推荐了开发者工具链优化、开源替代方案（如 Teable 和 Neutralinojs），并汇总了 Vue.js 社区报告、LLM 与浏览器交互等前沿技术动态。

1. Express 5.1 成为 npm 默认版本
• Express 5.0 去年发布后经历安全审计和治理重构，5.1 版本现标记为 npm 官方 "latest" 版本。
• 升级需谨慎，官方提供迁移指南。
• 维护者 Wes Todd 幽默称 Express 如同“僵尸”般难以淘汰，团队努力使其恢复活力。(ref)

2. Node.js 版本更新与安全事件
• Node v18.20.8 (LTS) ：本月将结束生命周期，建议升级至 v20/v22。 (ref)
• CI 基础设施漏洞 ：Node.js 测试环境因未公开漏洞临时限制访问，完整报告待发布。
• npm 恶意软件 ：首次发现本地安装包感染其他合法包的反向 Shell 攻击（ReversingLabs 报告）。

3. 工具与框架更新
• Teable：Postgres 上的开源 Airtable 替代品 ：基于 NestJS 和 Postgres 的开源 Airtable 替代方案。
• Nōdo ：通过 Unix Socket 实现 Ruby 调用 Node.js 函数的 IPC 工具。
• Playwright MCP ：微软推出的 LLM 与浏览器交互协议（支持 Claude、Cursor 等模型）。
• Neutralinojs 6.0 ：为 Electron 之类的东西提供了一种有趣的轻量级替代方案，因为它仍然允许您构建在 Linux、Windows 和 macOS 上运行的应用程序，但 Chromium 并未捆绑——而是使用现有安装的浏览器引擎。
• ls-lint 是一个用于检查项目中文件和目录名称的成熟工具。
• 其他工具版本更新 ：zx 8.5（Google 脚本工具）、node-llama-cpp 3.7（本地 LLM）、Fastify 5.2.2 等。
• Gemini AI 新功能：支持生成 HTML/React 组件的画布模式。
• 开发者工具创新：Simon Willison 推出“不完整 JSON 格式化工具”解决调试痛点。

4. 教程与文章
• Land Ahoy: Leaving the Sea of Nodes — V8 JavaScript 引擎团队核心成员发表的一篇技术性很强的文章，解释了 Turbofan（V8 的优化编译器之一）的局限性。如果您不关心 JavaScript 的内部编译和运行方式，请放心，V8 团队正在努力使其运行得更快！
•  如何使用 Node.js 和 Express 设置 TypeScript 本文详细介绍了如何在 Node.js 和 Express 项目中配置 TypeScript，包括初始化项目、安装依赖、配置编译器选项以及设置开发工具链（如 nodemon 和 concurrently）。

Reddit

Trender07's comment on "Express v5.1.0 is latest!"

Explore this conversation and more from the node community

AI 摘要：本期 JavaScript Weekly 涵盖了多个重要动态，包括轻量级 JS 运行时 Bare 的发布、Deno 与 Oracle 的 JavaScript 商标之争、React 19.1 新特性、Safari 18.4 更新，以及一系列工具和教程推荐。此外，还介绍了 Wasp 全栈框架、Anime.js 4.0 动画库等新工具，并分享了开发者资源和行业趋势。

1. Bare: 轻量级模块化 JS 运行时
• 类似 Node.js 但更精简，基于 V8 和 libuv，支持多引擎。
• 仅提供模块系统、插件系统和线程支持，依赖用户态模块扩展。

2. Deno 与 Oracle 的 JavaScript 商标争议
• Deno 向 USPTO 申请撤销 Oracle 持有的 "JavaScript" 商标。
• Ryan Dahl 呼吁开发者支持，签署公开信反对 Oracle 的商标主张。

3. 社区动态
• Safari 18.4 更新
• 新增 Declarative Web Push、迭代器助手、Error.isError，优化 JSON 解析性能。
• TC39 将讨论 TypeScript 风格枚举提案
• 长期以来一直有人提议将 TS 风格的枚举引入 JavaScript，作者 Ron Buckton 将在下次会议上向 TC39 提出该提案。 这里有一个幻灯片介绍了该提案的好处。
• ES2025 规范 进入候选阶段，预计将于 6 月最终获得批准。
• Express 5.1：长期存在的 Node.js Web 框架得到了升级，5.x 最终成为 npm 上的 latest 标记版本。
• Chrome 135+ 支持 CSS Overflow 5 规范，这使得创建原生滚动和轮播体验变得更加容易。
• Astro 5.6, Ember 6.3, Turborepo 2.5, Node.js v23.11.0, Bun v1.2.8......

5. 教程与文章
• 探讨 JavaScript 同步 await 的可行性（Dr. Axel Rauschmayer） 本文探讨了 JavaScript 中同步与异步代码的“颜色”问题，提出通过同步 await 解决现有异步编程的局限性，但分析了其潜在的性能损耗和操作风险，最终认为该方案可能不可行。
• 我第一次接触 WebAssembly 时学到的经验教训 本文作者分享了首次接触 WebAssembly（ #WASM ）的经验
• Breaking down circular dependencies in JavaScript 本文通过实验深入解析了 JavaScript 中的循环依赖问题，解释了其成因、表现场景、错误机制及解决方案，并对比了不同运行环境（浏览器、Node.js、打包工具）下的差异。
• GitHub 为项目维护者提供的一些提示： 每个维护者都需要知道的 5 个 GitHub Actions
• 如果您想写一篇可以刊登在 JavaScript Weekly 上的博客文章，那么阅读 Michael Lynch 撰写的《如何撰写开发人员阅读的博客文章》 是个不错的主意.. :-)

AI 摘要：本期聚焦 React 19.1 的功能更新、全栈工具链（如 Wasp）、安全漏洞提醒及社区动态（如 styled-components 的未来）。同时推荐了多个实用库（如 TinyBase、React Email）和开发者活动。

1. React 19.1 发布
• 主要更新
• Owner Stacks （开发工具功能）：帮助开发者追踪组件渲染关系。
• 边缘环境流式支持 ：优化边缘计算场景下的性能。
• 服务器端预渲染 RSC 的新 API （与 Parcel 2.14.0 兼容）。
• 增强 Suspense 支持 。
• 未发布官方博客，但包含多项修复和小功能改进。

2. 工具与库更新
• Wasp - 基于 React、Node 和 Prisma 的全栈框架，提供传统全栈开发体验。
• TinyBase v6.0 - 响应式本地优先数据存储，支持 React 19，仅提供 ESM 版本。
• React Email 4.0 - 新增邮件链接分析工具、垃圾邮件评分器及客户端兼容性检查。
• Svggles - 通过 React 增强 SVG 交互性（如发光、动画效果）。
• Remotion React-to-video 工具包添加了一个简洁的听力图模板 ，用于渲染音频媒体的波形样式视图。

3. 安全与社区动态
• Remix/React Router 漏洞 ：CVE-2025-31137 影响 Remix 2 和 React Router 7（Express 适配器用户需注意）。
• 愚人节玩笑 ：Vercel 的 Guillermo Rauch 假称 React 将弃用 className 改用 class，实际未发生。
• styled-components 进入维护模式：社区讨论替代方案 ( Linaria / Vanilla Extract / CSS Modules ......)

4. 其他新闻
• Material UI v7 稳定版发布 。
• React Native Gesture Handler 2.25 ：优化原生触摸 API。
• Express 5.1 发布 ：Node.js 框架正式进入 5.x 阶段。
• Vue.js 2025 社区报告 ：包含对 Evan You 和 Nuxt 团队的深度访谈。

Medium

RIP Styled-Components. Now What?

Styled-components are officially in maintenance mode. No new features or major updates should be expected. Only critical bug fixes and…

不幸的是，其中一些功能在较旧的浏览器中降级得非常糟糕，以至于对于使用卡在 Safari 15 上的旧 iPhone 或 iPad 访问的人来说，即使是颜色和阴影等基本内容也可能根本无法呈现。

For Tailwind CSS v4.1, we put a bunch of effort into coming up with and testing our own framework-specific fallbacks to make your sites render as best as possible in older browsers, even if some super modern things still don't behave quite the same.
对于 Tailwind CSS v4.1，我们投入了大量精力来提出和测试我们自己的特定于框架的回退，以使您的网站在较旧的浏览器中呈现得尽可能好，即使一些超级现代的东西仍然表现得不尽相同。
在 oklab 中定义的颜色现在可以在旧版本的 Safari 中呈现

AI 摘要：Tailwind CSS v4.1 引入了文本阴影、遮罩工具、浏览器兼容性优化等多项新功能，提升开发体验。

Tailwind CSS v4.1 是一个重要版本更新，新增了多项实用功能和优化。主要包括：

• 文本阴影工具（text-shadow-*）：提供五种预设阴影大小，支持颜色和透明度调整。
• 遮罩工具（mask-*）：支持使用图片或渐变遮罩元素，优化了 API 设计。
• 浏览器兼容性改进：在旧浏览器中更优雅地降级，同时充分利用现代浏览器特性。
• 精细文本换行（overflow-wrap）：防止长单词破坏布局。
• 彩色投影支持（drop-shadow）：新增彩色投影工具。
• 输入设备适配（pointer-* 和 any-pointer-*）：针对触摸设备优化设计。
• 基线对齐（items-baseline-last 和 self-baseline-last）：支持将 Flex/Grid 项目对齐到文本最后一行的基线。
• 安全对齐（safe）：防止内容在空间不足时消失。
• 构建优化：支持忽略特定路径（ @source not ）和强制包含工具类（ @source inline(...) ）。
• 新变体：如 noscript、user-valid、inverted-colors 等。

文章还提供了升级指南，支持通过 npm 安装最新版本（CLI、Vite、PostCSS）。

AI 摘要：Chrome DevTools 新增的 Insights 侧边栏将 Lighthouse 的性能分析直接集成到 Performance 面板中，帮助开发者更高效地定位和解决性能问题。

通过将 Lighthouse 的性能分析结果直接集成到面板中，提供更直观的性能问题定位和解决建议。

Insights 侧边栏会列出录制过程中发现的性能或用户体验问题，并允许开发者通过悬停或点击直接在高亮的时间轴上查看相关事件。文章详细说明了如何使用该功能，包括如何展开侧边栏、查看不同页面的性能分析结果，以及如何利用 LCP（Largest Contentful Paint）阶段分析来优化页面加载性能。

此外，文章还介绍了针对页面加载、响应性和布局稳定性等方面的具体分析功能，帮助开发者全面优化网站性能。

Chrome for Developers

Insights sidebar in the DevTools Performance panel  |  Blog  |  Chrome for Developers

Learn about the new performance insights, the power of Lighthouse directly in the DevTools Performance panel.

AI 摘要：本文介绍了如何设计高转化率的表单。文章涵盖了表单设计的重要性、表单构成要素（操作、描述符、输入控件、反馈机制）、表单类型（简单表单、向导式表单、可导航表单）、十个表单设计最佳实践（简洁、清晰标签、避免只用占位符文本、分组相关字段、单列布局、有效处理错误、预防错误、启用内联验证、确保无障碍性、移动端优化）以及三个表单创建工具（Typeform, Zoho Forms, Jotform）的优缺点。核心要点在于：保持表单简洁明了，减少摩擦以鼓励填写完成，优先考虑无障碍性和包容性。

LogRocket Blog

Better form design: UX tips, tools, and tutorial - LogRocket Blog

When designed well, forms can leave a user feeling delighted and accomplished. These guidelines can help you create a smooth user experience.

AI 摘要：介绍如何使用 CSS 的 conic-gradient() 和 repeating-conic-gradient() 创建条纹和爆发式背景效果。

文章首先回顾了使用 CSS 线性渐变（linear-gradient 和 repeating-linear-gradient）创建条纹背景的基本方法，并介绍了新的简化语法。接着，作者将这一概念扩展到圆锥渐变（conic-gradient），展示了如何通过硬色停（hard stops）创建爆发式背景效果。文章还提到如何通过叠加径向渐变（radial-gradient）调整中心区域，并参考了 Robinhood 首页的设计，探讨了如何通过更多渐变或 SVG 实现更复杂的动态效果。最后，作者鼓励读者尝试用 @property 实现动画效果。

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:

还搜到了这个，小破站其实早就全面切换到 AVIF 了：
https://www.bilibili.com/opus/775386423432839251

结论可以直接拿来用：
2022 年以前，B 站主流图片格式为 WebP，在对基础设施成本做回顾的过程中，定位到静态资源 CDN 成本是重要的组成部分。随着业界技术的逐渐成熟，经过相关调研，我们认为 AVIF 在 B 站大规模落地存在可行性。

在相同格式相同编码器下，可以简单的认为编码速度、图像质量与图片体积构成一个不可能三角，需要通过调整编码速度参数（下称 speed）与图像质量参数（下称 quality），在三者之间做取舍。

我们选取了三百万线上真实的缩略图请求，于实验环境进行回放，尽可能贴近 B 站实际使用场景。对同一个缩略请求，我们会使用线上现有编码参数，生成 PNG 和 WebP 两个版本，并用几个不同档位的 speed 和 quality，生成若干个 AVIF 版本，其中 PNG 被认为是无损格式，用作比较基准。

PSNR 可以被用于衡量原图与编码后图片的差异大小，一般大于 30 dB 即可认为人眼较难察觉出图像差异，大于 20 dB 被认为人眼观感差异不明显。PSNR 不能代替人类主观评价，但定量实验中，我们需要一个客观指标。无特别描述的前提下，下文提及 WebP/AVIF 的图像质量时，指的是 PSNR ( PNG → WebP ) 和 PSNR ( PNG → AVIF ) 的数值大小。

经过持续数天的流量回放实验，我们有以下定性结论：

1. speed 对编码耗时影响显著，对图像质量与图片体积影响不大。

2. 相同 speed/quality 的前提下，图片越大，AVIF 相对 WebP 的体积优势越明显。

3. 相同 speed/图片大小 的前提下，质量(quality)越高，AVIF 相对 WebP 的体积优势越明显。

对齐图像质量（PSNR 差值不超过 1）的前提下，我们有以下定量结论：

1. B 站主流缩略图场景下，AVIF 相比 WebP 平均体积优化在 35% 左右。

2. B 站主流缩略图场景下，AVIF 相比 WebP 耗时增长 4 ~ 5 倍，图片越大，耗时增长越明显，视频预览图等超大图场景，耗时增长 20 倍以上。

B 站主流缩略图场景下，AVIF 4 线程编码耗时约为单线程的 73%，CPU 开销是单线程的 115%，且进一步增大并发度的收益不高。