AI 摘要：本文为 Tailwind CSS 的 @apply 功能辩护，认为其价值被严重低估。作者通过对比 Sass 的 @include 机制，展示了 @apply 在代码复用、响应式设计和可维护性上的优势，并提供了实用案例（如布局工具类）证明其灵活性，同时指出其虽不如 Sass 混入强大，但结合现代 CSS

1. 作者对 Tailwind 的矛盾态度
• 肯定 Tailwind 方法论在样式可维护性和性能上的优势，但批评原生 Tailwind 的某些设计。
• 强调 @apply 是被低估的核心功能，尽管 Tailwind 创始人 Adam Wathan 曾建议避免使用。

2. @apply 的功能解析
• 允许将 Tailwind 工具类复制到自定义 CSS 中，类似 Sass 的 @include。
• 示例对比单属性工具类（如 p-4）与复杂工具类的应用场景。

3. 与 Sass 混入的对比
• 优势 ：
• 直接用于 HTML 无需额外选择器（如 <div class="utility">）。
• 支持响应式变体（如 md:utility）。
• 劣势 ：
• 不支持多变量或逻辑控制（如 Sass 的 @if/@for）。

4. 实用案例展示
• 布局工具类 ：定义 vertical 和 horizontal 工具类，通过 flex-direction 快速切换布局，并支持响应式（如 sm:horizontal）。
• 网格系统 ：grid-simple 工具类结合 CSS 变量（--cols）动态调整列数，减少重复代码。

5. 灵活使用建议
• 混合 @apply 与原生 CSS 编写复杂布局（如媒体查询内应用工具类）。
• 提倡将 Tailwind 视为工具而非教条，平衡实用性与可读性。

CSS-Tricks

Tailwind's @apply Feature is Better Than it Sounds | CSS-Tricks

Most of the time, people showcase Tailwind's @apply feature with one of Tailwind's single-property utilities (which changes a single CSS declaration). When showcased this way, @apply doesn't sound promising at all. So obviously, nobody wants to use it. Personally…

AI 摘要：本期 JavaScript Weekly 聚焦 2025 年前端生态的最新动态，涵盖 Next.js 15.3 的 Turbopack 构建优化、Node.js 测试最佳实践，以及 Tauri 与 Electron 的桌面应用开发对比。同时介绍了 JavaScript 新特性，以及多个开源工具更新。

1. 博文与教程
• 2025 年开发者应掌握的现代特性：迭代器助手、structuredClone() 深拷贝、集合操作等（Suren Enfiajyan 撰文）。
• Node.js 测试最佳实践：一群精通 Node 的开发者撰写的关于现代 Node 测试的详细指南。
• Tauri vs. Electron: performance, bundle size, and the real trade-offs：对比 Rust 框架 Tauri 的性能优势与适用场景（Costa Alexoglou 分析）。
• React Reconciliation：组件背后的隐藏引擎：React 使用协调算法根据虚拟 DOM 的更改来更新 DOM。了解它的工作原理对于开发更快的应用程序至关重要。

2. 工具与库更新
• Next.js 15.3：现在包括 Turbopack 构建
• Cloudflare 更新：支持 Next.js 一键部署至 Workers、Cloudflare Vite 插件 v1 发布，现在可以在单 Worker 中部署全栈应用（支持 React Router、Astro、Vue.js、Svelte），可以在 Git 仓库中添加 “部署到 Workers”按钮。
• pnpm 10.8、Prisma 6.6、React Native 0.79、Bun 1.2.9......

3. 社区动态
• npm 令牌问题：npm 注册表疑似清除所有访问令牌，建议用户临时创建新令牌。
• Git 20 周年： GitHub 的 Taylor Blau 采访了 Linus Torvalds， 讨论了这一里程碑和该项目的背景。
• p5.j​​s 2.0 似乎即将发布——它的第八个 Beta 版本刚刚发布。beta 2 的发行说明详细介绍了即将推出的功能。
• Mozilla 的 Simon Pieters 告诉我们， H1 元素的默认样式正在发生变化 ，并且浏览器也开始对嵌套部分标题的默认样式进行更改。

WaspDev Blog

Some features that every JavaScript developer should know in 2025

The list of JavaScript features that every web developer should know in 2025 in order to efficiently code in JavaScript.

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: