#优质博文 #AI #编程
好文，我也是这样转变的（？）或者说没有转变。
有趣的是 AI 出来之后我觉得编码热情或者说想构建产品的欲望越来越强烈了。

How I use AI agents to write code

AI 摘要：作者从一个“反 AI 狂热者”转变为 AI 代理的使用者，因为他发现 AI 在代码编写上的生产力惊人。他详细介绍了如何设置 AI 代理（以 Claude Code 为例），强调了配置清晰的 CLAUDE.md 文件（包括项目架构和个人编码习惯）的重要性。在整体策略上，他强调了结合自动化测试提供反馈循环，以及在复杂任务中使用“计划模式”来让 AI 进行思考。作者还分享了处理 AI 常见错误（如删除注释、代码重复）的方法，即开启新会话让 AI 进行“代码审查”。此外，他还提到 AI 代理能在夜间持续工作，实现“睡着也能完成额外工作”的优势。尽管作者对 AI 代理仍抱有复杂情感，认为它们剥夺了编程乐趣，但他承认 AI 显著提升了编码效率，将自己的角色比作软件架构师，主要负责设计和审查，而非亲手编写所有代码。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 对 AI 编码态度的转变
• 从“反 AI 狂热者”到接受者：作者承认尽管曾强烈反对 AI，但其同事的生产力提升以及 AI 工具（如 Claude Code、OpenAI Codex、Gemini CLI）的发布，使其无法再忽视。
• 承认 AI 的高效性：尽管作者有 20 年的编程经验和对代码质量的“老派”看法，但 AI 在许多时候比他写得更好。
• 强调正确使用 AI：将 AI 比作“锋利的菜刀与电锯的组合”，强调不当使用可能造成伤害。

2. AI 代理的基本设置
• 选择工具：作者主要使用 Claude Code，因其足够好用，虽然市面上有许多其他选择。
• CLAUDE.md 文件的作用：
• 项目级 CLAUDE.md：用于描述项目概况、整体架构、注意事项等，帮助 AI 理解代码库。
• 个人级 CLAUDE.md：记录个人编码习惯和偏好（例如：在 map() 或 filter() 函数中使用 _ 变量名）。

3. 整体使用策略
• 吸取教训：作者承认在 AI 上浪费了大量时间，AI 代理可能会“引你走弯路”，导致创建出“勉强能用”的“怪物”。
• 建立反馈循环：
• 自动化测试：通过自动化测试让 AI 代理验证其解决方案，纠正错误。
• “计划模式”（plan mode）：对于复杂任务，让 AI 在执行前先“思考”并制定计划，可以有效避免盲目尝试。
• AI 在 UI 方面的局限性：AI 在处理 UI 任务时效率较低，因为需要消耗大量 token 进行 DOM 检查或通过截屏检查，导致速度缓慢且容易出错。

4. 处理 AI 产生的错误
• AI 常见的错误类型：
• 删除有用的注释：将重要信息移除或修改。
• 代码重复：AI 代理倾向于复制粘贴代码，违反 DRY (Don't Repeat Yourself) 原则。
• 引入细微的错误：在重构时无意中改变代码原意（例如：添加多余的空值检查）。
• 解决策略：
• 重启会话进行“代码审查”：开启新的 AI 会话，让其对比 origin/main 进行纯重构检查，并查找功能性错误。
• 伪装代码来源：为了获得更客观的反馈，可以谎称审查的是同事的 PR (Pull Request)。
• 重复检查：多次运行相同的审查流程，确保所有错误都被发现和修复。

5. AI 带来的额外价值
• “睡着也能完成额外工作”：AI 代理不知疲倦，可以持续迭代解决问题，为作者节省时间。
• “自动化盲区”（automation blindness）的风险：长时间对 AI 的输出无条件“同意”，可能导致忽视潜在问题。
• “yolo 模式”下的试验：在 Podman 容器中运行 AI 代理，以减少对人工干预的依赖，但作者仅在不重要的副项目中使用，以防潜在的安全问题。
• 工作与生活平衡的挑战：AI 可能导致工作侵入非工作时间，需警惕。

6. 结论与个人感受
• 复杂的情感：作者对 AI 代理仍抱有复杂甚至“厌恶”的情感，认为它们让编程变得不那么有趣，但其有效性是不可否认的。
• 效率的巨大提升：AI 极大地提高了代码编写速度。
• 适用场景：AI 不适合处理复杂、新颖或涉及代码库多个分散部分的模糊项目，这类任务仍需人工完成。
• 角色转变：作者将自己的新角色比作软件架构师，更多地参与规范编写和代码审查，而非纯粹的编码。
• 对开源项目的影响：作者在开源项目中不使用 AI，因为缺乏“所有权”感，认为代码不是自己亲手写的。
• “不那么有趣，但最优”的选择：尽管 AI 让编程乐趣减少，但它作为“最优策略”，仍会被选择使用，就像游戏中玩家会选择最有效率而非最有趣的玩法。
• 接受现状：作者认为大多数开发者已经接受 AI，并正在向前发展。

author Nolan

Read the Tea Leaves

How I use AI agents to write code

Yes, this is the umpteenth article about AI and coding that you’ve seen this year. Welcome to 2025. Some people really find LLMs distasteful, and if that’s you, then I would recommend t…

#优质博文 #CSS #前端 #新特性
MDN：text-decoration-inset 兼容性：实验性，文中仅提到 Firefox 146+
text-decoration-inset is Like Padding for Text Decorations | CSS-Tricks：CSS 中的 text-decoration-inset 允许开发者像设置内边距一样裁剪文字装饰（如下划线）的左右边缘，从而实现文字装饰与文字内容的精确对齐。该属性支持 em 等相对单位，使装饰能随字体大小缩放，并且可以配合动画和过渡效果，创造出更多原生的、引人注目的文字装饰动态效果。

author Daniel Schwarz

MDN Web Docs

text-decoration-inset - CSS | MDN

The text-decoration-inset CSS property enables adjusting the start and end points of an element's text decoration so it can be shortened, lengthened, or have its position shifted with respect to the rendered text.

#优质博文 #前端 #CSS

Frontend Wrapped 2025: The 10 storylines that defined the year

AI 摘要：文章回顾了 2025 年前端领域的十大关键事件，涵盖了 TypeScript 和 Tailwind CSS 的持续普及、服务端渲染（SSR）的全面应用、CSS 新特性的爆发式发展、Rust 在前端工具链中的崛起，以及 TanStack 生态系统的蓬勃发展。文章还提到了 React 19.2 带来的异步（Async）编程范式转变，但同时也揭示了 npm 供应链攻击和 React2Shell 漏洞等严重安全问题。最重要的是，AI 编码工具的快速演进被视为年度最重要的趋势，它们极大提升了开发效率并改变了开发方式。

以下是方便搜索索引的大纲(AI 生成)，请读原文

1. 技术普及与成熟（Tech Adoption & Maturity）
• TypeScript 持续主导：2025 年 TypeScript 的使用量和下载量持续飙升，成为 JavaScript 开发的事实标准，尤其在 AI 辅助编程中表现更优。
• Tailwind CSS 巩固地位：Tailwind CSS 大规模普及，成为现代 React 应用的首选样式方案，彻底终结了关于其“内联样式”的争议。
• 服务端渲染（SSR）普及化：SSR 不再是“可有可无”的功能，各大框架（Next.js, Remix, TanStack Start, SvelteKit, Astro）全面拥抱，通过局部水合（Partial Hydration）、流式 SSR（Streaming SSR）和选择性水合（Selective Hydration）等技术实现了高性能和 SEO 优化。
2. 前端核心技术演进（Frontend Core Tech Evolution）
• CSS 新特性大爆发：CSS 在 2025 年获得了革命性进展，引入了锚点定位（Anchor Positioning）、滚动驱动动画（Scroll-Driven Animations）、容器查询（Container Queries）和 CSS if() 函数等新特性，减少了对 JavaScript 的依赖。
• Rust 在前端工具链中的崛起：Rust 凭借其卓越的性能，在前端构建工具（Rspack, Turbopack）、转译器（SWC）和代码格式化/Linter（Biome, Oxc）领域占据主导地位，显著提升了开发效率和构建速度。
3. 生态系统与框架革新（Ecosystems & Frameworks Innovation）
• TanStack 生态系统崛起：TanStack 从数据获取库（React Query）发展成为一个全面的生态系统，覆盖路由（TanStack Router）、表格、表单等，以其无头（Headless）、类型安全（Type-safe）和框架无关（Framework-agnostic）的特性成为 React 开发的新标准。
• React 19.2 带来的异步革新：React 19.2 引入了“Async React”概念，通过 useTransition、useOptimistic 和 use() 等新原语，结合 Suspense 和并发特性，极大地简化了异步协调，减少了样板代码，提升了用户体验。
4. 安全挑战与应对（Security Challenges & Responses）
• npm 供应链攻击：2025 年 npm 生态系统遭遇了“Shai Halud”蠕虫等大规模供应链攻击，通过钓鱼和自传播恶意软件感染了大量流行库，引发了对依赖审计和凭证安全的广泛关注。
• React2Shell 漏洞（CVE-2025-55182）：React 服务器组件（React Server Components）被发现存在严重的远程代码执行（RCE）漏洞，CVSS 评分高达 10.0，对金融和企业应用造成巨大威胁，尽管 React 团队迅速发布了补丁。
5. AI 编码工具的持续演进（Continued Evolution of AI Coding Tools）
• AI 模型与工具激增：2025 年见证了 30 多个 AI 模型（如 GPT 5, Claude Opus 4.5, Gemini 3 Pro）的发布以及中国公司（DeepSeek, Qwen, ByteDance, Moonshot）的崛起。
• Agentic AI 的竞争：Windsurf 与 Cursor 之间的“agentic war”引发了投资者的竞购战，同时 Bolt 和 v0 等工具实现了从编程到生产的一站式应用开发。
• 命令行界面（CLI）中的 AI：Claude Code、Gemini CLI 等 AI 助手被整合到命令行工具中，极大地提高了开发效率，尽管作者半开玩笑地指出它们似乎“一心想取代开发者”。

author Chizaram Ken

LogRocket Blog

Frontend Wrapped 2025: The 10 storylines that defined the year - LogRocket Blog

What storylines defined 2025 in frontend development? We power rank them all, from AI advancements to supply chain attacks and framework breakthroughs.

#优质博文 #AI #前端 #React #调试
How AI Coding Agents Hid a Timebomb in Our App

AI 摘要： 作者分享了他们在开发 Outlyne 这款 AI 驱动的网站构建器时遇到的一个诡异 Bug：一个由 AI 编程助手（AI Coding Agent）删除的代码注释，导致一个关键的 readOnly 属性被移除，进而引发了 React 组件的无限递归渲染。更糟的是，React 19 的 <Activity> 组件将这个 Bug 隐藏了起来，使其在数分钟内都不会崩溃，极大增加了调试难度。作者通过痛苦的调试过程，最终发现罪魁祸首是 AI 删除了注释，以及自己没有为关键的结构性约束编写测试。文章强调了在 AI 辅助开发背景下，测试而非注释，才是确保代码质量和安全的关键。

以下是方便搜索索引的大纲(AI 生成)，请读原文

1. Bug 的出现与表现
• 应用程序崩溃：用户在使用应用时，浏览器会无故冻结并崩溃。
• 内存无限增长：后台一个无限递归的 React 组件树在内存中不断增长，最终耗尽内存。
• React 19 的 <Activity> 组件掩盖了问题：新引入的 <Activity> 组件在关闭状态下会以低优先级模式渲染隐藏的 UI，导致无限递归的组件树在后台缓慢构建，而前端页面保持响应，延迟了 Bug 的暴露时间。
2. 问题根源：AI 编程助手与被删除的注释
• Outlyne 的组件架构：页面组件包含头部（header）和底部（footer），它们渲染了自身的变体（variants）作为预览，这本身就是递归的。为了避免无限递归，预览组件设置了 readOnly={true} 属性。
• 重要的安全注释：作者曾添加注释警告，如果 readOnly 属性为 false 会导致无限递归。
• AI 编程助手的操作：在一次重构中，AI 编程助手删除了这个关键注释，可能是出于“清理”目的。
• readOnly 属性被移除：在后续的更新中，由于缺乏注释的上下文，AI 编程助手移除了 readOnly 属性，导致了无限递归的发生。
3. 艰难的调试过程
• 难以复现：Bug 不会立即崩溃，使得调查非常困难，应用在几分钟后才会崩溃。
• 虚假线索：Chrome 调试器显示问题出在 Motion 库中，作者花费数天时间调查，但发现 Motion 只是受害者。
• 关键突破：通过检查内存溢出时的调用栈，发现了与页脚编辑器相关的 layoutId，并最终通过移除 <Activity> 组件，使 Bug 立即暴露，确认了问题所在。
4. 经验教训与启示
• 注释与测试：注释是文档，而测试是约束。在 AI 辅助的代码库中，仅仅依靠注释不足以保证关键结构性约束。
• AI 辅助开发带来的挑战：AI 编程助手能够提高生产力，但它们也会无意中移除关键信息，这要求开发者重新思考“足够好”的代码标准。
• 重要的结构性约束需要测试：文章强调，任何可能导致应用崩溃或违反结构性不变性的地方，都应该编写测试来强制执行，而不是仅仅依靠注释。
• 示例测试代码：作者提供了一段简单的测试代码，说明如何用大约 20 行代码来断言 readOnly 属性的正确性，从而避免了整个 Bug。

author Andrew Patton

acusti.ca

How AI Coding Agents Hid a Timebomb in Our App | acusti.ca

#优质博文 #前端 #react #工程化
React Compiler 的静默失败 (以及如何修复它们)

AI 摘要：作者分享了在使用 React Compiler 过程中遇到的“静默失败”问题，即编译器在无法优化组件时不会报错，而是回退到标准 React 行为，这可能导致性能下降。为了解决这个问题，作者发现并利用了一个未文档化的 ESLint 规则 `react-hooks/todo`，通过将其设置为错误级别，可以在编译失败时中断构建过程。

author Andrew Patton

acusti.ca

React Compiler’s Silent Failures (And How to Fix Them) | acusti.ca

#优质博文 #CSS #设计系统 #前端
Exploring Multi-Brand Systems with Tokens and Composability

AI 摘要：文章深入探讨了如何利用代币（tokens）、组合（composition）和配置（configuration）来构建灵活且可扩展的多品牌设计系统。作者通过一个“卡片”组件的实例，详细演示了如何使用 CSS 自定义属性（Custom Properties）实现主题切换，如何通过插槽（slots）和局部组件（partials）实现内容的灵活定制，以及如何结合这些方法来创建高度适应不同品牌和用例的组件，最终达到减少代码重复、提高开发效率和保持系统一致性的目标。

以下是方便搜索索引的大纲 (AI 生成)，请读原文：

1. 设计系统核心理念
• 系统灵活性与可扩展性：设计系统不仅要保证一致性，更要具备灵活性，以适应多品牌和多样化的使用场景。
• 三大核心要素：代币（tokens）、组合（composition）和配置（configuration）是实现组件灵活性的关键。

2. 基础卡片组件结构
• 组件需求：一个包含横幅、图片、标题、描述和按钮的简单卡片。
• 技术栈：示例使用 Vue 编写，但其原则适用于任何基于组件的设计系统，包括原生 Web Components。
• 初始代码实现：展示了卡片组件的模板、脚本和样式。

3. 使用代币（Tokens）支持多品牌/主题
• 基本修改：通过代币（变量）来支持不同品牌或主题的切换。
• CSS 自定义属性（Custom Properties）：文章以 CSS 自定义属性为例，但代币不仅限于 CSS，Design Tokens Community Group 提供了更全面的定义。
• 代码优化：将硬编码值转换为变量，提高代码可维护性和复用性。
• 主题切换实现：通过更改 CSS 变量或添加主题类来轻松切换卡片样式，无需修改组件结构。

4. 使用可组合插槽（Composable Slots）定制内容
• 解决内容多样性问题：当需要展示不同类型的内容（如列表而非描述）时，插槽提供了一种灵活的解决方案。
• 插槽（Slots）的引入：将组件中的特定区域定义为插槽，允许外部传入自定义内容。
• 示例：将描述区域替换为名为 card-details 的插槽，并展示如何传入不同的内容（如段落或列表）。
• 组织化实践：为了避免插槽内容过于随意，可以提供“预制”的子组件或局部组件（partials），作为推荐的插槽内容，以维护代码整洁和一致性。

5. 扩展配置与组合实现更深层次的定制
• 进阶应用：组合和配置不仅限于组件的某个特定区域，可以应用于更广泛的布局和样式。
• 可配置元素与可组合部分：区分通过属性（attributes）控制的可配置元素和通过插槽控制的可组合部分。
• 示例：将横幅位置设置为可配置属性，并将整个内容区域设为插槽，实现更自由的布局组合。
• 拆分局部组件：将复杂的组件拆分为更小的局部组件（如 CardMedia），提高复用性和可维护性。
• 高度适应性：通过灵活运用配置和组合，可以创建高度适应不同布局和内容需求的卡片组件。

6. 将原则付诸实践
• 核心原则总结：再次强调代币、组合和配置在构建灵活设计系统中的重要作用。
• 代币（Tokens）：集中管理设计决策，实现品牌快速切换。
• 组合（Composition）：通过插槽和局部组件提供结构化的内容扩展能力。
• 配置（Configuration）：通过属性暴露常用选项，确保组件适应性。
• 实践效益：减少重复组件、加速交付、保持系统一致性，使设计系统更具弹性。

author Adam Sedwick

Frontend Masters

Exploring Multi-Brand Systems with Tokens and Composability

Design systems aren’t just about keeping everything looking the same; they’re about making things flexible enough to handle whatever gets thrown at them.

#优质博文 #前端 #性能优化 #调试 #新动态
Chrome DevTools 144 版本可以让你单独对每个网络请求限速。
Throttle individual network requests

AI 摘要：Chrome DevTools 在 144 版本中引入了“Individual Request Throttling”功能，允许开发者为单个网络请求设置独立的限速（throttling）或阻断（blocking）条件。这一改进使得在不影响整个页面加载速度的情况下，测试特定资源（如第三方 API 或大型图片）在慢速网络条件下的表现成为可能。新功能整合在“Request conditions”面板中，用户可以自定义限速模式和 URL 匹配规则，并清晰地在“Network”和“Performance”面板中识别被限速或阻断的请求，从而更精准高效地进行前端性能调试。

Chrome for Developers

Throttle individual network requests  |  Blog  |  Chrome for Developers

Use the Request conditions tab to block specific URLs or apply custom network throttling profiles to individual resources.

#优质博文 #CSS #JavaScript #前端 #视图转换 #course
Different Page Transitions For Different Circumstances

AI 摘要：文章探讨了如何利用 Web API 中的 View Transitions （视图过渡）API 为多页应用程序（MPA）创建差异化的页面切换动画。作者通过 JavaScript 事件监听 pageswap 和 pagereveal，结合 e.viewTransition.types.add() 方法，实现根据特定 URL 条件设置自定义视图过渡类型。接着，文章演示了如何在 CSS 中使用 :active-view-transition-type() 伪类，针对不同的视图过渡类型应用不同的动画效果，从而覆盖默认过渡动画。最后，作者分享了一些关于这种 JS 与 CSS 协同控制的见解，并提及了相关学习资源和浏览器兼容性信息。

以下是方便搜索索引的大纲(AI 生成)，请读原文

1. View Transitions API 基础
• DOM 事件监听: 介绍 pageswap 和 pagereveal 这两个事件，它们在页面卸载和加载时触发，并提供 e.viewTransition 对象用于自定义视图过渡。
• 条件设置过渡类型: 讲解如何通过 JavaScript 在 pagereveal 事件中，根据 document.location.pathname 等条件，使用 e.viewTransition.types.add() 方法为当前页面设置一个自定义的视图过渡类型。

2. 默认页面过渡动画配置
• CSS 定义默认动画: 演示如何使用 ::view-transition-old(main) 和 ::view-transition-new(main) 伪元素，结合 @keyframes 定义网站的默认页面切换动画效果，如滑动出入。
• 元素命名: 强调需要为要过渡的元素（如 <main> 内容区）设置 view-transition-name 属性，以便在 CSS 中精准控制。

3. 定制特定页面的过渡动画
• CSS 覆盖默认动画: 展示如何利用 :active-view-transition-type() CSS 伪类，根据在 JavaScript 中设置的自定义视图过渡类型，为特定页面定义一套专属的动画，从而覆盖默认的动画效果。
• 动画优先级: 解释自定义类型动画如何通过更高的 CSS 特异性（specificity）来覆盖默认动画。

4. 学习资源与浏览器支持
• 参考资料: 推荐 Bramus 的《Cross-document view transitions for multi-page applications》作为进一步学习的优秀资源。
• CSS 类型声明: 提及 view-transition-types CSS 属性，但作者对其具体用途表示疑问，推测可能用于限制允许的过渡类型。
• 浏览器兼容性: 指出 JavaScript ViewTransitionTypeSet 和 CSS :active-view-transition-type() 在 Chrome 和 Safari 中得到支持，Firefox 则需开启 flag（标志）。

author Chris Coyier

Frontend Masters

Different Page Transitions For Different Circumstances

I feel like common usage for multi-page view transitions is to set up a general system for them that applies generally to all pages and elements, then let it ride.

#优质博文 #React #TypeScript #前端 #course
How to type React children correctly in TypeScript

AI 摘要：本文深入探讨了在 React 应用中如何正确使用 TypeScript 定义 children prop 的类型。文章首先介绍了 children prop 的基本用法和支持的各种内容类型，并强调了避免手动定义复杂 children 类型的必要性。随后，详细讲解了 ReactNode 超集类型、PropsWithChildren 和 React.ComponentProps 等实用工具类型，以及 ReactElement 和 JSX.Element 等具体类型的使用场景。文章还特别提到了 React 18/19 版本中关于 React.FC 和 children 类型定义的最新变化，建议显式定义 children prop，并展示了如何安全地处理 refs 和构建包装组件（wrapper components）。通过学习这些方法，开发者可以更有效地在 TypeScript 中管理 React 组件的 children prop，提升代码的类型安全性和可维护性。

以下是方便搜索索引的大纲(AI 生成)，请读原文：

1. children prop 基础
• JSX 中的 children ：解释 children prop 是如何接收并操作 JSX 表达式中标签之间的内容的。
• 支持的 children 类型：列举了 children prop 可以接受的常见内容类型，包括字符串（Strings）、JSX 元素、JavaScript 表达式（JavaScript expressions）和函数（Functions）。
• 避免手动定义复杂 children 类型：指出手动为 children 定义类型容易遗漏，推荐使用官方支持的类型。

2. children prop 的类型定义方法
• ReactNode 超集类型：介绍 ReactNode 是包含 React 所有可渲染值的超集类型，是定义 children 类型时的首选，并详细解释了 ReactNode 的内部定义。
• PropsWithChildren 类型：讲解 PropsWithChildren 如何方便地为现有 props 添加 children prop，避免手动定义。
• React.ComponentProps 类型：说明 ComponentProps 如何提取现有组件的 props 类型，尤其适用于构建可复用组件和 UI 库。
• React.ReactElement 类型：介绍 ReactElement 作为 ReactNode 的子集，在特定场景下如何用于定义 children prop。
• JSX.Element 类型：说明 JSX.Element 如何作为 children prop 的类型，并指出它只代表单个 React 元素且不包含假值。
• 类组件的 Component 类型：演示在类组件中如何使用 React.Component 定义 children prop，并说明 children 默认是可选的。

3. React 18/19 中 children prop 类型定义的最新变化
• 不再推荐使用 React.FC / FunctionComponent ：解释了 React.FC 因不再自动包含 children prop 而不再被推荐，并倡导显式定义 children。
• 在 TypeScript 中将组件作为 props 传递：展示了如何在不依赖 React.FC 的情况下，安全地将组件作为 props 传递并保持完整的类型安全。
• React 19 中 Refs 和 forwardRef ：比较了 React 18 及更早版本与 React 19 中处理 refs 和 children prop 时的类型定义方式的变化。

4. TypeScript 中的包装组件（Wrapper Components）
• 包装组件在类型安全方面的优势：通过一个待办事项应用示例，展示了包装组件如何通过定义接口来增强类型安全，并在编译时捕获类型错误。
• 处理复杂数据结构：说明 TypeScript 如何确保在组件间传递复杂数据结构时，所有必需属性都存在且类型正确。

author Ohans Emmanuel

LogRocket Blog

How to type React children correctly in TypeScript - LogRocket Blog

Learn best practices for typing React children in TypeScript, including ReactNode, PropsWithChildren, ComponentProps, and why React.FC is no longer recommended.

#优质博文 #安全 #Storybook #前端
Security advisory
又一个 CVE-2025-68429 7.3/10， Storybook v7+ 版本构建时可能会不小心把 .env 打包进去。

AI 摘要：Storybook 团队发布安全公告，披露 Storybook 在特定条件下，可能将 .env 文件中的敏感环境变量意外打包到构建产物中，导致这些秘密信息在发布到网络后泄露。受影响的项目需满足使用 Storybook 7.0.0 及以上版本、在构建时存在包含敏感信息的 .env 文件，并使用特定 process.env 代码模式。官方建议所有受影响用户立即审计并轮换密钥，并将 Storybook 升级至已打补丁的版本，同时调整环境变量的引用方式。部分流行的 Storybook 插件可能触发此漏洞，但漏洞本身存在于 Storybook 核心。

Storybook Blog

Security advisory

Impacted versions 7–10. Patches available now.

#优质博文 #CSS #React #RSC #前端 #tools
工具：https://rscexplorer.dev/
开源在：https://github.com/gaearon/rscexplorer
文章：Introducing RSC Explorer

AI 摘要：本文介绍了 Dan Abramov 发布的新工具 RSC Explorer，旨在帮助开发者直观理解 React Server Components (RSC) 的底层工作原理。由于最近 React Server Components 披露了一个严重的安全漏洞，RSC 协议引起了广泛关注。RSC Explorer 是一个开源的单页应用，通过模拟 RSC 协议的读写过程，展示了数据流、代码传输、流式渲染、服务器操作以及无框架路由刷新等核心概念，让开发者能够“所见即所得”地学习 RSC。

author Dan Abramov

GitHub

GitHub - gaearon/rscexplorer: A tool for people curious about the React Server Components protocol

A tool for people curious about the React Server Components protocol - gaearon/rscexplorer

#优质博文 #前端 #CSS #新特性
State, Logic, And Native Power: CSS Wrapped 2025 — Smashing Magazine

AI 摘要：本文深入解读了 Chrome 团队发布的“CSS Wrapped 2025”年度总结报告，重点介绍了 CSS 在逻辑处理、状态管理和复杂交互方面的新进展。文章详细阐述了可定制的 <select> 元素、纯 CSS 实现的轮播图（Carousel）以及滚动状态查询等功能，并探讨了 CSS 中引入 if() 语句、@function 函数和 sibling-index()/sibling-count() 等逻辑处理工具，这些新特性将大大提升 CSS 的开发体验和应用能力。作者还展望了锚定容器查询（Anchored Container Queries）、嵌套视图过渡组（Nested View Transition Groups）以及文本框修剪（Text Box Trim）等未来特性，强调 CSS 正从单纯的样式语言向构建动态、强大应用的原生工具集转变，开启了一个激动人心的前端新时代。

author Brecht De Ruyte

Smashing Magazine

State, Logic, And Native Power: CSS Wrapped 2025 — Smashing Magazine

CSS Wrapped 2025 is out! We’re entering a world where CSS can increasingly handle logic, state, and complex interactions once reserved for JavaScript. Here is an unpacking of the standout highlights and how they connect to the bigger evolution of modern CSS.

#优质博文 #前端 #WebGPU #WebGL
用 WebGPU 来造一场雪 | Cyandev

AI 摘要：本文详细介绍了作者如何利用 WebGPU 为个人博客实现下雪背景效果。文章从 WebGPU 的基本概念、与 Metal 等现代图形 API 的对比入手，逐步深入到 Metal 的基础知识，再结合 WebGPU 的实际应用，例如 Bind Group 和 Compute Shader，展示了如何高效地绘制雪花粒子并计算其运动。为了进一步提升性能，作者还分享了如何将渲染逻辑转移到 Web Worker 中的 OffscreenCanvas 进行，确保动画流畅不卡顿。文末展望了 WebGPU 在未来前端动画和机器学习领域的应用潜力。

author Cyandev

cyandev.app

WebGPU 开发初体验。

#优质博文 #前端 #CSS #JavaScript #GSAP #动画
好工具：Paths & Control Points
文章：Building Responsive, Scroll-Triggered Curved Path Animations with GSAP | Codrops

AI 摘要：这篇博文详细介绍了如何使用 GSAP (GreenSock Animation Platform) 的 ScrollTrigger 和 MotionPath 插件，实现响应式的、滚动触发的曲线路径动画。文章不仅阐述了核心的设计挑战和 Bezier 曲线原理，还提供了动态计算控制点、构建 SVG 路径、动画插值以及响应式处理的完整代码示例。更令人惊喜的是，作者还分享了一个实用的可视化配置工具，让开发者能够拖拽控制点实时调整曲线，极大地提升了开发效率和精度。最后，文章还探讨了可访问性 (Accessibility) 和生产工作流程，为读者提供了全面的解决方案。

author Ross Anderson

codepen.io

Paths & Control Points

...

#优质博文 #CSS #前端 #tools
这个不错，还兼顾了可访问性。

工具地址：Andy Clarke’s Toon Text
文章介绍：Toon Title Text Generator | CSS-Tricks

AI 摘要：这篇博文介绍了 Andy Clarke 开发的一款有趣的卡通标题文本生成器，它可以生成具有卡通风格的文本，并提供 CSS 代码。文章还重点介绍了其核心功能 Splinter.js，它通过包裹每个字符的 <span> 标签，并加入 ARIA 属性，在实现逐字样式控制的同时，增强了可访问性，解决了传统工具可能导致辅助技术识别障碍的问题。

#优质博文 #前端 #css #动画
Creating Scroll-Based Animations in Full view() | CSS-Tricks

AI 摘要：本文深入探讨了 CSS animation-timeline 属性中的 view() 函数，它允许开发者创建基于元素在滚动容器（scrollport）中可见性（visibility）的动画。文章通过一个图片轮播（carousel）示例，详细演示了如何结合传统 CSS 动画、关键帧（keyframes）和 view() 函数，实现元素进入/退出视图时的缩放、模糊等动态效果。此外，文章还比较了 view() 与 scroll() 函数的区别，并介绍了 view() 函数的轴（axis）和插入（inset）参数，以及 animation-range 属性，帮助读者更精细地控制动画的触发时机和范围，为制作交互式滚动动画提供了实用的指导。

以下是方便搜索索引的大纲(AI 生成)，请读原文：

1. view() 函数简介与核心概念
• animation-timeline 属性接受 view() 函数，实现基于元素可见性的动画。
• 类比 JavaScript 的 Intersection Observer，动画随元素进入和退出滚动视口（scrollport）而触发。
• 示例：图片轮播中，图片在中间时清晰放大，在边缘时模糊缩小。
2. 搭建基本布局
• 创建一个 <main> 元素作为 carousel 容器。
• 使用 flexbox 使图片横向排列，并设置 overflow-x: auto 实现滚动。
• 定义 carousel-slide 元素作为图片项，设置其宽度为容器的 1/3，实现一次显示三张图片。
3. 实现滚动与滚动捕捉（Scroll Snapping）
• 在 carousel 容器上设置 scroll-snap-type: x mandatory 实现滚动捕捉。
• 使用 scroll-behavior: smooth 实现平滑滚动（可选）。
• 设置 scrollbar-width: none 隐藏滚动条（可选）。
• 为 carousel-slide 设置 scroll-snap-align: center，确保图片居中对齐。
4. 创建基于视图的动画
• 定义 slide 关键帧动画，实现图片在不同阶段的缩放、圆角和模糊效果。
• 将 slide 动画应用于 carousel-slide 元素。
• 使用 animation-timeline: view(inline) 将动画绑定到元素的视图时间线。
• 强调 animation-timeline 需单独声明在 animation 速记属性之后，以避免被覆盖。
5. view() 与 scroll() 函数的比较
• view() 函数创建基于元素在容器中可见性的视图进度时间线，适用于元素特定的显示效果。
• scroll() 函数创建基于容器滚动位置的滚动进度时间线。
• view() 更适合实现当特定元素滚动到视口时触发的动画。
6. view() 函数的参数与 animation-range 属性
• view() 接受 axis （block, inline, x, y）和 inset 参数。
• inset 参数定义滚动视口边缘的偏移量，精确控制动画触发范围。
• animation-range 属性进一步控制动画的开始和结束点，可使用 entry、exit、cover、contain 等关键词。
• 示例：通过 inset 控制动画在元素从底部进入滚动视口时才开始。
7. 创意轮播动画拓展
• 鼓励探索更多 CSS 属性的动画可能性，如背景位置（background position）动画，创造独特的轮播效果。
• 提及注册 CSS 属性（registered CSS properties）可以使更多属性动画化。

author Preethi

CSS-Tricks

Creating Scroll-Based Animations in Full view() | CSS-Tricks

It’s not that hard to do! Preethi shows you how it's really the same old animation you’re used to writing in CSS, only applied on a view timeline instead of a normal timeline.

#优质博文 #CSS #Tailwind #前端
Tailwind CSS: Targeting Child Elements (when you have to)

AI 摘要：本文探讨了在 Tailwind CSS 中如何针对无法直接控制的子元素（如来自 CMS 或第三方组件的内容）应用样式。尽管作者推荐在多数情况下使用传统的自定义 CSS 样式表，但文章详细介绍了如何利用 Tailwind 的任意变体 (Arbitrary Variants) 和 [&_selector] 语法来实现子元素样式控制。文中通过具体示例展示了如何使用 & 符号结合 CSS 选择器来定位直接子元素、所有后代元素以及处理伪状态 (pseudo-states)，并讨论了这种方法适用的场景，最后通过一个实际案例（CMS 内容样式）对比了传统 CSS 和 Tailwind 方式的实现。

以下是方便搜索索引的大纲 (AI 生成)，请读原文：

1. 遇到的问题：为什么需要定位子元素
• 传统 Tailwind CSS 的局限性：通常将工具类直接应用于元素，但对于无法控制的嵌套 HTML (如 CMS 内容) 无法直接应用。
• 典型场景：CMS 内容、第三方组件、动态生成的 HTML。
• 解决方案预告：虽然普通 CSS 样式表是首选，但本文将探索 Tailwind CSS 的任意变体 (Arbitrary Variants) 方案。
2. 传统 CSS 解决方案
• 示例：使用 .cms-content a 等选择器为嵌套链接和列表项添加样式。
• 优点：简单、可读、易维护，通常是最佳实践。
3. Tailwind CSS 的任意变体 (Arbitrary Variants)
• 核心概念：使用方括号 [] 在类名中直接编写 CSS 选择器。
• 语法示例：[&_a]:font-semibold。
• & 符号的含义：在 Tailwind 任意变体中，& 代表当前应用类的元素，类似于 Sass/SCSS 或 CSS 嵌套中的 &。
• 生成的 CSS：通过 & 符号，Tailwind 会将类名自身转换为选择器，再拼接我们自定义的子元素选择器，从而实现后代元素样式控制。
4. 常见的子元素定位模式 (Common Patterns)
• 直接子元素 (Direct Children)：使用 [&>div] 定位直接子元素，例如为所有直接 div 添加边框和内边距。
• 所有后代元素 (All Descendants)：使用 [&_a] 定位所有后代元素，例如为所有链接添加悬停下划线。
• 子元素的伪状态 (Pseudo-states on Children)：使用 [&>button:hover] 或 [&_input:disabled] 为子元素在特定状态下应用样式。
5. 何时选择使用任意变体 (When This Makes Sense)
• 场景一：已完全投入 Tailwind 生态，不愿切换到普通 CSS。
• 场景二：只需少量样式规则，为之创建单独的样式表显得过度。
• 场景三：构建流程难以集成额外 CSS 文件。
• 场景四：希望样式与渲染内容的组件协同放置。
• 注意：对于可控内容，直接应用 Tailwind 类依然是最佳实践。
6. 实际案例：CMS 内容样式
• 背景：处理来自无头 CMS 的预渲染 HTML，无法控制内部标记。
• 传统 CSS 方案：展示了为 .cms-content 下的 a、img、li 元素编写的简洁 CSS 样式。
• Tailwind 方案：演示了如何在 Elm 和 React 组件中，通过将所有子元素样式规则整合到父容器的 className 属性中，利用任意变体实现同样的效果。
• 相关插件：提及 @tailwindcss/typography 插件的 prose 类可以处理富文本样式，但有时需要更精细控制。
7. 总结 (The Takeaway)
• 任意变体允许在 Tailwind 框架内使用任意 CSS 选择器，& 代表当前元素，_ 代表空格。
• 强调了通常情况下，独立的普通 CSS 样式表对于嵌入内容来说更简单、更可读、更易维护。
• Tailwind 和传统 CSS 可以良好共存。
• 鼓励读者了解这种方法的可能性，以备不时之需。

author Christian Ekrem

cekrem.github.io

Tailwind CSS: Targeting Child Elements (when you have to)

Understanding arbitrary variants and how Tailwind lets you style nested elements without leaving your utility classes

#前端 #优质博文 #CSS #动画 #新特性
CSS Scroll-Triggered Animations are coming to Chrome!

AI 摘要：Chrome 浏览器将在明年初推出纯 CSS 实现的滚动触发动画。这是一种基于时间，并在特定滚动偏移量（scroll offset）触发的动画，与现有的滚动驱动动画不同。这项功能有望在 Chrome 145 版本正式发布，它将替代部分 IntersectionObserver 的用途。

以下是方便搜索索引的大纲 (AI 生成)，请读原文：

1. 新特性发布预告
• Chrome 浏览器即将支持纯 CSS 实现的滚动触发动画（Scroll-Triggered Animations）。
• 预计在明年初推出，并在 Chrome 145 版本正式发布。

2. 滚动相关动画的区别
• 滚动驱动动画（Scroll-Driven Animations）：动画进度随滚动条移动从 0% 到 100%，停止滚动则暂停，反向滚动则倒退。
• 滚动触发动画（Scroll-Triggered Animations）：在达到特定的滚动偏移量时触发，是基于时间的动画。

3. 替代传统实现方式
• 新特性将允许开发者以声明式（declaratively）的 CSS 方式实现，替代部分对 IntersectionObserver 的依赖。

4. 资源与演示
• 为 timeline-trigger 的范围（ranges）创建了一个可视化工具，解释激活范围（activation range）和活动范围（active range）的概念。
• 激活范围（activation range）是触发器被激活的区域，活动范围（active range）是触发器保持激活状态的区域，活动范围必须包含激活范围。

5. 体验方式
• 用户可以在 Chrome Canary 中启用“Experimental Web Platform Features”旗标来提前体验该功能。

author Bramus!

Bram.us

CSS Scroll-Triggered Animations are coming to Chrome!

We have Scroll-Driven Animations. Now say hi to Scroll-Triggered Animations.

#优质博文 #前端 #CSS #AI #MCP #debug
这个好啊，Chrome DevTools MCP 终于能直接介入浏览器调试了。

Let your Coding Agent debug your browser session with Chrome DevTools MCP

AI 摘要：Chrome DevTools MCP 迎来了重大更新，现在允许 AI 编程助手直接连接到活跃的浏览器会话。这项新功能极大地提升了调试效率，编程助手可以重用现有登录会话、访问活跃的调试面板（如网络面板和元素面板），从而实现手动调试与 AI 辅助调试的无缝切换。文章详细介绍了这一功能的实现原理、安全措施（如用户授权弹窗和控制横幅）以及如何配置和使用，为开发者提供了更智能、更便捷的调试体验。

以下是方便搜索索引的大纲(AI 生成)，请读原文

1. Chrome DevTools MCP 新功能概述
• 核心更新：Chrome DevTools MCP 服务器现在支持 AI 编程助手直接连接到活跃的浏览器会话。
• 主要优势
• 重用现有浏览器会话：编程助手可以直接访问已登录的会话，无需重新登录。
• 访问活跃调试会话：编程助手可以直接从 DevTools UI 访问并调查选定的元素或网络请求。
• 工作流改进：实现手动调试与 AI 辅助调试的无缝切换。

2. Chrome DevTools MCP 连接方式
• 现有连接方式
• 使用特定用户配置文件运行 Chrome。
• 通过远程调试端口连接到运行中的 Chrome 实例。
• 在独立临时配置文件中运行多个 Chrome 实例。
• 新增自动连接功能：通过 --autoConnect 选项，MCP 服务器可以请求远程调试连接。

3. 远程调试工作原理及安全措施
• 基础机制：基于 Chrome 现有的远程调试能力。
• 启用步骤：用户需在 chrome://inspect#remote-debugging 中手动启用远程调试。
• 连接流程：
• MCP 服务器配置 --autoConnect 选项后，将尝试连接活跃的 Chrome 实例。
• 用户授权：Chrome 会弹出对话框，要求用户授权远程调试会话，以防止滥用。
• 状态提示：调试会话激活时，Chrome 顶部会显示“Chrome is being controlled by automated test software”横幅。

4. 如何开始使用
• 步骤一：在 Chrome 中设置远程调试
• 导航至 chrome://inspect/#remote-debugging。
• 根据对话框提示允许或禁止传入的调试连接。
• 步骤二：配置 Chrome DevTools MCP 服务器
• 在 MCP 服务器配置中，为 chrome-devtools 服务添加 --autoConnect 命令行参数。
• 示例配置适用于 gemini-cli。
• 步骤三：测试设置
• 运行 gemini-cli 并输入性能检查指令。
• 允许 Chrome 弹窗中的远程调试请求。
• 验证 MCP 服务器是否能成功打开网页并执行性能追踪。
• 更多信息：可参考 GitHub 上的 README 文档获取完整说明。

5. 未来展望
• 调试任务交接：AI 编程助手可以接管调试任务，提升效率。
• 面板数据暴露：计划逐步向编程助手暴露更多 DevTools 面板数据。

author Sebastian Benz

Chrome for Developers

Let your Coding Agent debug your browser session with Chrome DevTools MCP  |  Blog  |  Chrome for Developers

We shipped a new feature to the Chrome DevTools MCP server that is going to make it a lot easier for your coding agent to debug your current browser sessions.

#优质博文 #React #前端 #course
Do's and Don'ts of useEffectEvent in React

AI 摘要：useEffectEvent 是 React 新增的 Hook，用来在 Effect 中获取最新的 props / state 而不触发 Effect 重新执行。它通过保持函数引用稳定，解决了“依赖列表必须包含所有变量”导致的频繁重渲染问题。文章列举了它的使用场景、可做与不可做的细节，以及最佳实践和迁移建议，帮助开发者在合适的场景安全使用该特性。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 什么是 useEffectEvent
• 介绍了 useEffectEvent 的核心概念：创建一个始终读取最新值的稳定函数引用
• 说明它如何在不触发 Effect 重跑的情况下访问最新的 props / state

2. 解决的问题
• 通过聊天应用示例，展示传统写法需把所有变量加入依赖导致不必要的重跑
• 对比使用 useEffectEvent 后，仅在真正需要的依赖（如 roomId）变化时才重新执行 Effect

3. Do's 与 Don'ts
• ✅ Do：在 Effect 内直接调用、用于读取最新值、用于需要 Effect 上下文的事件处理、分离响应式与非响应式逻辑、同步调用
• ❌ Don't：在普通 UI 事件处理器中使用、在渲染阶段调用、作为 props 传递、异步或延时调用、替代正常的 memoization

4. 详细示例
• ✅ 正确：在 Effect 中抽离非响应式逻辑（如主题变化）保持连接仅在 roomId 改变时重建
• ❌ 错误：在按钮点击等普通事件中使用 useEffectEvent，建议使用普通函数或 useCallback
• ✅ 正确：在定时器或轮询中读取最新的回调函数（如 onTick）
• ❌ 错误：在异步 fetch 回调中调用 useEffectEvent，可能在组件卸载后仍被调用
• ✅ 正确：在清理函数中也可使用 useEffectEvent 记录页面退出事件
• ❌ 错误：把 useEffectEvent 作为其他 Hook（如 useMemo）的依赖，破坏其稳定性

5. 常见使用场景
• 日志与分析：在路径变化时记录页面访问，内部使用最新的主题、语言、用户 ID 等信息
• 第三方回调：向消息服务订阅回调，回调内部使用最新的用户偏好而无需重新订阅
• 防抖实现：在防抖定时器中使用最新的搜索参数和过滤条件

6. 最佳实践
• 只在确实需要读取非响应式值时使用
• 考虑逻辑是否应该放在 Effect 之外的普通事件处理器里
• 保持 Event 函数单一职责，写清使用原因以便维护
• 等待 stable 版本发布再用于生产环境

7. 迁移路径
• 对比使用 useCallback 并频繁更改依赖或通过 eslint-disable 抑制警告的情形，说明 useEffectEvent 可作为更清晰的替代方案
• 建议先重构组件逻辑，确认是否真的需要该 Hook

author Slicker

slicker.me

Do's and Don'ts of useEffectEvent in React