AI 摘要：作者在 Filestage 的前端项目中使用 AI Agents（特别是 Claude Code）与 AST（Abstract Syntax Tree）技术，将近千个测试文件、六千多条测试从 React Testing Library v13 迁移至 v14。文章展示了从制定迁移指南、分步提交 PR、编写 codemod、自动化验证到改进 AI 提示的完整过程，最后总结出 AI 在大规模代码迁移中的优势与局限，并强调“小步迭代 + 自动化验证”的工程基本功仍然至关重要。

1. 项目背景与动机
• 公司使用旧版 React Testing Library 编写了 970 个测试文件，总计 6000 多测试用例。
• 升级至 v14 后 API 完全异步化，行为变化大，手动迁移代价极高。
• 作者决定尝试用 AI 辅助完成大规模迁移。

2. 准备与迁移指南
• 首次直接用 Claude Code CLI 自动迁移失败，暴露出测试失败过多、AI 调试混乱的问题。
• 于是转而使用 Claude Web 模式制作详细的迁移指南，分析版本差异与新 API。
• 确定主要变化：异步 API、测试 setup 模式更新、时序逻辑差异需人工介入。

3. 拆分改动与依赖并行安装
• 利用 NPM 的包别名功能同时运行 v13 与 v14，避免一次性大变更。
• 生成迁移指南并提交第一份 PR，保证团队迭代可控。

4. 编写与测试 codemod 自动化工具
• 使用 jscodeshift 解析代码为 AST，再生成批量修改工具。
• 编写输入输出测试用例以验证 codemod 效果（例如导入路径、 renderWithUserEvent 封装替换）。
• 自动测试 codemod 确保修改一致性和可验证性。

5. 实际迁移与 AI 协作循环
• 通过详细 prompt 指令让 Claude Code 分批迁移 10 个测试文件，执行 lint 检查与单测验证。
• 持续观察失败案例，不断改进 codemod 与迁移指南。
• 迁移指南从最初 4500 字扩充到 7500 字；codemod 从 271 行发展到近千行，测试覆盖更完备。
• 共执行 50 次迁移，形成 50 个独立 PR。

6. AI 性能与局限分析
• Claude Code 在调试测试与识别重复模式方面表现优异。
• 局限包括 context 深度不足、长任务遗忘指令、无法稳定维持覆盖率。
• 通过增加 JSON 格式的覆盖率报告输入，AI 能理解覆盖问题并修复。
• 网络波动与服务超限导致中断，验证仍需人工把关。

7. 工程启示与最终成果
• 整体用一周完成迁移，每个 PR 约半小时。
• 若纯人工迁移，估计需数月。
• 迁移过程机械但 AI 显著提升效率。
• 保持验证自动化、关注 edge case、理解底层工具机制，是让 AI 发挥价值的关键。
• 作者展望未来 AI 将进一步解放开发者，从“重复劳动”转向更有创造力的工作。

Eliocapella

Migrating 6000 React tests using AI Agents and ASTs

How I used AI to migrate 970 test files with 6000+ test cases from React Testing Library v13 to v14 in one week, through 50 PRs that would have taken months manually.

AI 摘要：本文介绍了通过将动画关键帧 (@keyframes) 设计为可重用的 Keyframes Tokens，来实现动画系统的标准化与可维护化。作者说明了动画重复定义与全局作用域冲突带来的问题，提出以集中式样式表、命名空间、可定制的 CSS 自定义属性（custom properties）和设计 tokens 的方式来统一所有动画。文中展示了 fade-in、slide-in、zoom、spin、pulse 等动画的动态实现，并讨论了动画叠加、组合 (animation-composition)、可访问性 (prefers-reduced-motion) 与实际项目实施策略。核心思想是：让动画像颜色、字号、间距一样成为可管理的系统资源。

1. 动画混乱的根源
• 各组件独立创建重复的 @keyframes，导致代码冗余。
• CSS keyframes 属于全局作用域，容易被后加载样式覆盖。
• 修改或统一动画需全局搜查，影响维护效率。

2. 统一的解决方案：Keyframes Tokens
• 将动画关键帧集中存放在共享样式表中，形成唯一数据源。
• 利用命名空间（如 kf- 前缀）避免命名冲突。
• 借助 CSS 自定义属性实现动态参数化，支持多场景适配。
• 使动画定义与其他 design tokens（颜色、间距等）协同管理。

3. 构建基础动画库
• Fade In：定义基础淡入动画并统一调用。
• Slide In：通过自定义属性 --kf-slide-from 控制入场方向。
• Zoom：用 --kf-zoom-from/to 实现双向缩放。
• Spin/Pulse：封装连续动画，可控制旋转幅度、脉冲强度。
• Bounce/Elastic：展示复杂缓动（easing）动画封装方法。

4. 动画组合与冲突处理
• 可将多种动画组合，如 fade+slide 或 zoom+pulse。
• 对同一属性冲突时使用 animation-composition: add; 合并动画效果。
• 适当使用动画时间错位（stagger）提升视觉节奏。
• 说明 transform 与单独变换 (translate/scale) 的执行顺序差异。

5. 无障碍与减弱动效（Reduced Motion）
• 利用 prefers-reduced-motion 提供无动画或柔和过渡版本。
• 对需要仍然变换属性的动画定义瞬时完成（instant-in）版本。
• 保留必要动效但平滑化运动，提升可访问性。

6. 实施策略与最佳实践
• 渐进引入：从常见动画（fade、slide）着手。
• 命名规范：统一前缀标识 token 动画。
• 文档化：在 token 文件添加注释说明用途与参数。
• 灵活性与简洁性：仅暴露必要自定义属性。
• 融入设计体系：将 keyframes tokens 视为 design language 的一部分。

Smashing Magazine

Keyframes Tokens: Standardizing Animation Across Projects — Smashing Magazine

Animations can be one of the most joyful parts of building interfaces, but without structure, they can also become one of the biggest sources of frustration. By consolidating and standardizing keyframes, you take something that is usually messy and hard to…

AI 摘要：这篇交互式教学页面《Visual Types》以图形化的方式介绍了 TypeScript 的类型系统原理，将抽象的类型关系转为集合论直观类比。作者通过对基础类型、联合类型、交叉类型、泛型(Type Alias/Generic)、条件类型(Conditional Types)等模块的分解说明，让开发者从“类型是值的集合”这一基本理念出发，逐步理解 TypeScript 在编译期的推导与约束机制。整个内容通俗但专业，适合掌握 TS 类型系统结构性理解的人阅读学习。

1. 类型基础 (Foundation)
• 类型被定义为一组可能的运行时值集合，例如 boolean 表示 {true, false}
• 字面量类型 (Literal Type) 代表唯一具体值，如 42 只包含 42
• 联合类型 (Union Type) 使用 | 结合多个集合，如 "red"|"blue"
• 子类型 (Subtype) 是集合的子集关系，A extends B 表示 A 的值皆存在于 B 中
• 元组类型 (Tuple Type) 表示固定长度数组，每个位置具特定类型
• 对象类型 (Object Type) 以属性定义集合，可超集匹配，如 {id: number}
• 交叉类型 (Intersection Type) 用 & 表示需同时满足两侧类型，若互斥则结果为 never

2. 类型别名与推导 (Basics II)
• 类型别名 (Type Alias) 允许为类型定义命名，如 UserId = string
• 泛型类型别名 (Generic Type Alias) 像函数一般接收类型参数生成类型
• typeof 操作符可在编译期提取变量的类型，而非 JS 的运行时类型
• as const 防止类型被自动扩大，使值保持字面量类型并只读
• any 和 unknown 都能接收任意值，但 unknown 必须先缩小类型后使用

3. 对象与键操作 (Object Patterns)
• keyof 提取对象全部属性键，生成字符串字面量联合类型
• 索引访问类型 (Indexed Access Type) 可用 T["key"] 获取属性类型
• 映射类型 (Mapped Types) 用 [K in ...] 遍历键创建新类型，是构建工具类型的基础

4. 条件类型与分发机制 (Conditional Types)
• 条件类型使用 T extends U ? X : Y 表示类型层面的三元判断
• 所有类型都自反 (Reflexivity)，即 T extends T 恒为 true
• 联合类型的条件判断是“分发的”(Distributive)，会逐个成员计算后再合并
• 使用元组包裹 [T] extends [U] 可阻止分发行为
• never 用于排除不匹配分支
• infer 关键字可在条件匹配中捕获部分类型形状实现复用

5. 工具类型 (Utility Types)
• Pick<T, K> 提取对象的部分属性组成新类型
• ReturnType<T> 获取函数返回值类型
• Parameters<T> 获取函数参数类型元组
• 展示了如何用之前的条件、映射机制构建常用工具类型

Visual Types

Interactive visualizations of TypeScript concepts. Behold pretty colors.

AI 摘要：本文以作者二十多年自学前端开发的经验为线索，提炼出一系列真正能用得上的编程原则，帮助开发者在「写代码的当下」做出更好的判断。作者从常见的 DRY（Don’t Repeat Yourself）、YAGNI（You Aren’t Gonna Need It）、KISS（Keep It Simple, Stupid）等抽象原则，延伸到更现实可操作的做法，如 “Rule of Three”、 “Make it work, make it right, make it fast”、保持函数幂等（Idempotency）、遵循单一职责原则（Single Responsibility Principle）、维持单一抽象层次（Single Level of Abstraction）。这些原则的核心，是让代码更易于理解、维护和演化——写出「易于推理」的好代码。

1. 自学开发者的视角
• 作者并非科班出身，而是在设计工作中逐步学习编程。
• 文章旨在帮助其他自学者少走弯路，用经验性的原则替代抽象的“计算机科学理论”。
• 强调“可实践的原则”比抽象定律更能指导日常编程决策。

2. 从口号到可行的习惯
• 对比常见但抽象的原则：Premature optimisation、YAGNI 和 DRY。
• 引出更落地的 “Rule of Three”：第三次重复时再做抽象或优化。
• 这种「三次规则」帮助开发者在实践中把握代码复用与复杂度的平衡。

3. 写出正确的代码顺序
• 展开 Kent Beck 提出的 “Make it work, make it right, make it fast”。
• 通过明确阶段来避免过早优化或纠结错误焦点。
• 这与 “Rule of Three” 背后的思想一致——聚焦当下任务，不超前设计。

4. 「糟糕的第一版」与逐步演化
• 探讨 Gall’s Law：复杂系统从简单可用系统演化而来。
• 结合 Second-system effect 与 “Best simple system for now” 等理念。
• 总结：优先完成可运行的简单版本，再通过迭代完善。

5. 写出更可推理的代码结构
• 幂等性 (Idempotency)：函数在相同输入下应产生相同输出；有助于减少副作用、提高可维护性。
• 单一职责原则 (Single Responsibility Principle)：一个函数或模块只有一个「变更原因」；避免耦合与连锁修改。
• 单一抽象层次 (Single Level of Abstraction)：函数内部操作应保持一致层次，避免在底层细节与业务逻辑间跳跃。
• 示例：将获取用户、筛选活跃用户、发送邮件分别独立函数化，更清晰且易测试。

6. 原则的统一性与良好代码的特征
• 所有好代码共通点：易理解、易推理、内部职责清晰。
• 不良代码往往混乱于职责、层次或优化顺序上。
• 严格遵守这些原则虽显“教条”，却能在长期维护中体现价值。

7. 推荐阅读
• Refactoring by Martin Fowler
• Making impossible states impossible by Richard Feldman
• Make It Work Make It Right Make It Fast
• Single Level of Abstraction
• hacker-laws.com

Piccalilli

Programming principles for self taught front-end developers

The majority of us are a bunch of self taught people with rather spotty knowledge and that's fine! Kilian (also self taught) is here to share some of the computer science fundamentals you probably are missing with the aim to improve your code in the long…

AI 摘要：文章是 Temani Afif 系列博文《Perfectly Pointed Tooltips》的第三篇，重点介绍如何在 CSS 中使用 Anchor Positioning API 将 tooltip（提示框）的箭头精准定位到锚点（anchor）的四个角落。作者通过 margin 控制间距、clip-path 实现遮罩、anchor-size() 获取锚点尺寸等一系列技巧，展示如何让 tooltip 更灵活地响应位置变化，并指出未来 Anchor Positioning Level 2 将带来更多动态布局可能性。

1. 背景与目标
• 延续前两篇 tooltip 教程，本篇聚焦「指向角落」的布局挑战。
• 仅 Chrome 与 Edge 目前完全支持所用特性。
• 本次重点是探索新定位与隐藏技巧，非基础概念重复。

2. 定义 tooltip 位置信息
• 使用 position-area: top left、top right、bottom left、bottom right 指定初始角落位置。
• 利用 position-try-fallbacks: flip-inline, flip-block, ... 实现自动翻转（flip）策略。
• 解释为何此配置能灵活调整尺寸但在添加尾部（tail）时复杂度更高。

3. 添加尾部 (Tail) 的新思路
• 使用伪元素 ::before 并引入 Anchor Positioning API 的 anchor-size() 函数。
• 绘制覆盖锚点的方形区域，并基于变量 --d（间距）与 --s（半径、尾部大小）动态扩展尺寸。
• 通过 clip-path 制造四角尾部形状，可替换为渐变、SVG、shape() 等方式实现个性化设计。

4. 隐藏多余的尾部
• 核心技巧：clip-path: inset(0) margin-box;
• clip-path 基于 margin-box 创建可视区域，仅保留一个角的尾部。
• 虽然伪元素为 fixed 定位，但仍属于 tooltip 内容，可被父元素裁切。

5. 扩展与实作练习
• 展示多种使用同技巧更新的示例及 debug mode 调试展示。
• 鼓励读者重新实现前两篇的版本作练习，并尝试新增曲线尾部样式。

6. 总结与展望
• 通过 Anchor Positioning API 可以让 tooltip 的行为更动态、更响应式。
• 强调现代 CSS 已超越单纯静态样式，可跨元素定义交互定位。
• Anchor Positioning Level 2 预计引入可查询 fallback 位置与更灵活的动态控制。

Frontend Masters

Perfectly Pointed Tooltips: To The Corners

Ready for the last challenge?

AI 摘要：这篇文章介绍了如何利用 SVG 的 pathLength 属性简化路径动画管理流程。作者先讲解一个常见的“签名动画”，传统方法需用 JavaScript 计算路径长度 (getTotalLength)，再展示通过手动设置 pathLength，可以让 CSS 动画以固定比例管理 stroke-dasharray 和 stroke-dashoffset，从而更直观地控制动画节奏，减少依赖 JS 的复杂度。

1. SVG 路径动画的常见方法
• 介绍一种常见的“签名动画”效果，用 stroke-dasharray 和 stroke-dashoffset 实现路径绘制。
• 讲解 stroke-dasharray 如何将路径“切割”为可见段与间隔。
• 通过调整 stroke-dashoffset 实现路径显现动画。

2. 路径总长度的计算与问题
• 在未指定 pathLength 前，需要从 JavaScript 中调用 getTotalLength() 获取路径总长度。
• 此过程为实现动画添加了额外步骤，且维护成本高。

3. pathLength 属性的妙用
• 介绍 pathLength 属性：可直接在 SVG 标签上定义路径的理论总长度。
• 设置 pathLength="100" 后，可以将动画参数基于此比例统一规划。
• 配合 CSS 的 transition，让路径动画以百分比方式更易管理。

4. 优化效果与开发体验
• 使用 pathLength 后的代码更简洁、可读性更强。
• 动画更容易调节且不需依赖 JavaScript。
• 作者总结自己对新方法的偏爱并鼓励读者试用。

Stefanjudis

pathLength makes makes SVG path animations easier to manage

Use the "pathLength` attribute to make animating "stroke-dasharray" and "stroke-dashoffset" easier.

AI 摘要：本文作者 Ahmad Shadeed 通过一个常见的「版块布局」案例，展示了如何应用现代 CSS 技术（包括 :has()、container query、style query、clamp()、cqw 单位与 display: contents 等）解决传统响应式设计中无法灵活检测状态、复杂媒体查询以及无流畅排版的问题。文章从基础布局入手，逐步迭代到智能响应的组件结构，并探讨了 Safari 实验性支持的 random() 随机函数，以展现 CSS 的动态潜力。

Ishadeed

Solved By Modern CSS: Section Layout

Building a typical section design with modern CSS.

AI 摘要：本文系统地讲解了如何在网站中使用 View Transition API，通过 CSS 与 JavaScript 结合实现页面或内容间的动画过渡，从基础语法、调试技巧、命名规范、类型区分到最佳实践完整覆盖。作者强调利用伪元素与动画组结构可极大简化复杂转场开发，提出在 prefers-reduced-motion 设置下应合理退化，同时介绍跨页面转场与未来 CSS 原生增强的前景。

1. View Transition API 基础
• View Transition API 允许在状态切换间实现平滑动画，方式包括自动触发或通过 JavaScript 手动调用。
• 浏览器在启动转场时会创建当前和未来状态的快照进行对比并生成关键帧动画，机制类似 FLIP 技术但由 CSS 自动处理。
• 若未改动浏览器原生导航，可简单通过 @view-transition { navigation: auto; } 启用。

2. View Transition 结构与伪元素 (pseudo elements)
• 介绍转场的 DOM 架构：::view-transition-group、::view-transition-image-pair、::view-transition-old、::view-transition-new。
• 每个转场组独立包含前后状态快照，开发者可用 view-transition-name 命名控制。
• 快照为非交互式静态影像，转场中无法修改其内容或动态更新样式。

3. 调试与命名
• Chrome DevTools 的动画面板 (Animations Drawer) 可用于调试、调整动画速度与暂停查看。
• 推荐为每个转场元素添加独立的 view-transition-name，跨页面动画需在两页手动匹配命名。
• 使用 match-element 可支持同文档内转场。

4. View Transition 类型与事件
• 通过 JavaScript 可在 document.startViewTransition() 调用时传入 types 参数，区分不同交互的转场类型。
• 可结合 :active-view-transition-type(filter) 伪类为特定类型设置动画样式。
• 使用 pagereveal 事件判断页面跳转方向与来源，实现更复杂的跨页面转场逻辑。
• 当前部分旧版 Chrome 不支持类型参数，可通过 try-catch 或自定义 data 属性兼容处理。

5. 最佳实践与组织结构
• 应为所有 view-transition-name 设置一致的动画时长、缓动函数（animation-timing-function）与填充模式（fill-mode）。
• 建议用短变量如 --vt 生成唯一 ID，在使用 CMS 或框架时可轻量生成名称。
• 使用 prefers-reduced-motion: no-preference 媒体查询，以保证可访问性良好的退化行为。
• 可通过选择器 [style*="--vt"] 一次性添加全部转场名称。

6. 高阶应用与动画逻辑
• 转场组中可能只存在 old/new 状态，用于筛选（filter）或排序（sort）操作表现不同。
• 使用 CSS 伪类 :only-child 区分仅有 old/new 状态的元素，实现“进入”或“退出”动画。
• 案例包括从总览页到详情页的转场动画。
• 当前 :has 尚无法检查组内是否同时存在 old/new 元素，此功能已在 W3C 提案中。

7. 浏览器兼容性与后续发展
• Firefox 144 已支持 View Transition API，但仅限同文档转场。
• 跨文档转场（cross-document transitions）正在推进，可跟踪 MDN 与 Chrome 团队 Demo 获取更新。

Piccalilli

Start implementing view transitions on your websites today

Browser support for view transitions is rocketing and there's not many better out there to help you understand how to implement them than Cyd Stumpel.

AI 摘要：本文通过一个简洁的示例与完整讲解，展示了如何仅用几行现代 CSS 代码实现 N 个元素的顺序动画。作者利用 CSS 的 linear() 函数自定义时间曲线（timing function），结合 sibling-index() 与 sibling-count() 自动计算每个元素的动画时间段，使所有元素依次播放动画而不需复杂的 keyframes 管理。该方法具有可扩展性和可维护性，为 CSS 动画提供了新的编程式思路。

1. 背景与问题定义
• 多个元素需要依次执行相同的动画，传统方法需手动定义复杂 keyframes 与延迟。
• 目标：用纯 CSS，在不修改 keyframes 的前提下让动画顺序执行、可循环、可扩展至任意元素数量。

2. CSS linear() 函数解释
• linear() 是一种新的时间函数（easing function），支持自定义多个控制点（control points）。
• 通过定义输入进度（input progress）与输出进度（output progress）来构造任意变化曲线。
• 相较于传统 ease 或 cubic-bezier()，linear() 可精确定义不同阶段的动画输出。
• 可用百分比或数值型进度表示时间点，省略值会自动插补为中间点。

3. 利用 linear() 构造延迟（animation delay）
• 通过重复定义相同输出值（如 linear(0 0%, 0 50%, 1 100%)）可制造“暂停”效果。
• 表示动画前半段不变化、后半段才执行。
• 可灵活组合多个时间段，无需修改 keyframes 即可调整节奏。

4. 构建顺序动画逻辑
• 多元素顺序动画思想：每个元素仅在自己的时间段（range）内动画，其余时间保持静止。

• 对于 N 个元素，将总时间分为 N 等份，每个元素依次占一个区间。

• 变量定义：
• S = 起始点 = (i - 1) × 100% / N
• E = 结束点 = i × 100% / N

• 关键 CSS 实现：
--_s: calc(100%(sibling-index()-1)/sibling-count());
--_e: calc(100%(sibling-index())/sibling-count());
animation: x calc(var(--d)*sibling-count()) infinite
linear(0, 0 var(--_s), 1, 0 var(--_e), 0);

• 使用 sibling-index()/sibling-count() 自动计算索引与总量，无需额外 JS。

5. 浏览器兼容性与注意事项
• 目前主要支持 Chromium 内核（Chrome、Edge），Firefox 与 WebKit 尚在推进中。
• 某些变量可能需通过 @property 注册以解决兼容性问题。

6. 扩展与变体
• 可设计多个重叠区间（N+1 ranges）使动画出现过渡重叠（overlapping）效果。
• 原理一致：通过调整控制点范围改变动画逻辑，可产生更复杂的节奏模式。

7. 总结
• linear() 函数原为实现复杂缓动曲线而生，但结合现代 CSS 特性（变量、siblings 函数）可实现可编程化动画逻辑。
• 提供一种无需 JS、结构清晰、可扩展的纯 CSS 动画新范式。

CSS-Tricks

Sequential linear() Animation With N Elements | CSS-Tricks

Let’s suppose you have N elements with the same animation that should animate sequentially. Modern CSS makes this easy and it works for any number of items!

AI 摘要：本文探讨了如何利用现代 CSS 的 shape() 函数与 clip-path 属性，构建出带有圆角、延展弧线的标签 (Tabs) 样式。文章从早期依赖多元素遮罩的实现方式出发，逐步演示如何使用 shape() 绘制可响应的标签形状，并通过变量 (CSS Variable) 优化灵活度。后续还包含兼容性 fallback、单方向滚动控制 overflow-inline/overflow-block 的技巧，以及对可访问性 (Accessibility) 实现的反思。

1. 背景与旧方案
• 作者回顾早期制作“round-out tabs”的方案，需要为每个标签使用四个额外元素来模拟圆角连接效果。
• 这种方法复杂、难维护且受限于层叠遮罩实现。

2. 使用 shape() 实现圆角标签
• 介绍 shape() 函数与 clip-path 的结合，能直接以绘图指令定义形状，无需额外 DOM 元素。
• shape() 的指令包含 from、curve、vline、hline 等步骤，用以绘制从矩形裁剪出的弧线标签外形。
• 每一步演示曲线、直线和坐标计算，使形状既可固定又可相对灵活。
• 最终实现完整闭合形状，只显示实际的标签区域。

3. 参数变量化与可动态调整
• 将固定数值（如 10px、20px）抽象为自定义属性 (--tabGirth)，以便根据变量调整标签厚度。
• 使用 Knobs 等交互工具实时修改变量值以测试视觉效果。

4. 外观与行为增强
• 添加 hover 与 active 效果，通过 translate 实现微动。
• 解决非换行标签的滚动问题，利用 overflow-inline: auto 与 overflow-block: clip 控制单方向滚动。
• 使用 filter 为 clip 后的形状添加阴影效果。

5. 浏览器兼容性与 Fallback
• 当前仍有浏览器未完全支持 shape()。
• 提供 @supports 条件判定，未支持时以 border-radius 提供圆角退化方案，保证视觉一致性。

6. 可访问性 (Accessibility) 讨论
• 使用 anchor 作为基础标签实现，并在有 JavaScript 时补上 aria 属性。
• 承认目前键盘导航功能不足，提醒开发者参考更完善的无障碍 Tabs 模式。

7. 相关与延伸参考
• 提到 Temani Afif、Ana Tudor 的圆角或内凹标题组件为现代 CSS 造型提供灵感。

Frontend Masters

Modern CSS Round-Out Tabs

Quite a while back I made a set of “round out” tabs, where the literal tab part of the UI would connect to the content below with a rounded edge that flared out as it connected. A bit tricky of a situation, even now!

AI 摘要：本文通过实例展示如何将 GSAP 动画库与 WebGL 着色器（Shaders）结合，以构建沉浸式网页交互视觉。作者从基础的 HTML 布局与 Three.js 场景搭建开始，逐步扩展至通过 GSAP 动画驱动着色器 uniform 参数，实现包括灰阶渐变、点击波纹、鼠标揭示遮罩、点击与按压的流体扭曲、以及基于滚动的动态模糊等复杂 GPU 动效。文章强调 JavaScript 动画时间线与 GLSL 实时渲染逻辑的联动，让网站视觉能以自然、物理感与交互性呈现。

1. 基础设置与 HTML/CSS 结构
• 构建页面容器与隐藏溢出内容，准备 GSAP Draggable 和 ScrollTrigger 绑定。
• 在 Three.js 环境中创建 Stage 类，负责 Renderer、Camera、Scene 管理。
• 使用 GSAP ticker 同步渲染循环，实现动画与渲染一致更新。

2. WebGL Stage 与平面载入
• 使用 TextureLoader 创建平面 (PlaneGeometry)，加载 DOM 中的图片纹理。
• 将 DOM 元素与 Canvas 中的物体同步，通过正交相机的坐标转换函数转换屏幕坐标到世界坐标。
• 替换标准材质为 ShaderMaterial，导入自定义 vertex/fragment shader。

3. 点击波纹与灰阶渐变效果（Ripple + Grayscale）
• 使用 GSAP Observer 监听点击事件。
• 点击后修改 shader uniform uGrayscaleProgress 在彩色与灰阶之间平滑过渡。
• 添加鼠标点击点 uMouse uniform，使过渡从点击中心扩散。
• 加入顶点波动（Ripple）动画，在 vertex shader 中用正弦函数生成波形变形。
• 结合 GSAP Timeline 同步控制灰度和波纹周期。
• 管理多平面状态，实现点击切换与反向第二动画效果。

4. 纹理遮罩揭示（Texture Reveal Mask Effect）
• 引入双纹理 (uTexture, uTextureBack) 并使用 uMixFactor 控制混合。
• 通过鼠标 hover 事件，使用 Raycaster 定位交互对象。
• 在 fragment shader 中基于鼠标坐标生成圆形遮罩，平滑混合两张纹理。
• 悬停时 reveal 动画开启，离开时渐出还原。

5. 点击按压揭示（Click & Hold Mask Reveal）
• 通过 GSAP Observer 监听 onPress/onRelease/onMove，管理按压持续状态。
• 使用异步 Timeline 表现“按住充能—释放复位”的动画逻辑。
• shader 中使用噪声函数 (noise) 与 uTime 动态扰动 mask，制造液态波动感。
• 实现交互中的纹理扭曲、流动与时间关联视觉。

6. 动态模糊轮播（Dynamic Blur Effect Carousel）
• 结合 GSAP Draggable 与 ScrollTrigger 使轮播支持拖动与滚动同步。
• 计算每个平面到屏幕中心的距离，根据距离动态更新 uBlurAmount。
• 在 shader 中使用多重 Kawase 模糊算法，混合多层模糊采样和平滑区间。
• blur 与 scroll 动态联动，创造景深般的焦点模糊效果。

7. 总结与启发
• GSAP 为动画时序与交互逻辑提供流畅控制。
• Shaders 提供像素级视觉自由度与 GPU 实时渲染性能。
• 在 Web 前端中实现生动视觉，展现设计与技术融合的趋势。

AI 摘要：本文指出大多数开发者在前端实现中无意间给用户加载了远大于实际需求的图片，这浪费了带宽与计算资源。作者以 NextJS <Image> 组件为例，解释 sizes 属性在响应式图片 (responsive images) 中的重要性，并系统讲解了 srcset、sizes、图片加载策略 (lazy vs eager loading)、设备像素比 (DPR) 等概念，最终提供完整的 “Cheat Sheet” 实用总结，帮助开发者高效地为不同屏幕设备提供最佳尺寸的图片。

1. 现实检视 (Reality Check)
• 使用高分辨率原图在小屏幕设备上会导致带宽浪费
• 即使使用 NextJS <Image> ，若缺少 sizes 属性，仍会传输超大图

2. sizes 属性的核心作用
• 明确规定图片渲染尺寸，帮助浏览器选择最佳匹配
• 设置 sizes="100vw" 显著压缩文件大小（最高可减少 25 倍）

3. 响应式图片的基本概念
• 像素限制**：超过屏幕物理限制的像素冗余无意义
• 引入 srcset 与 sizes：提供多种分辨率图片并让浏览器选择最优版本

4. 在复杂布局中的使用
• 当图片宽度并非等于屏幕宽度时，必须结合 sizes 指定实际渲染逻辑
• 支持多断点 (media queries)，可为不同 viewport 设置不同加载策略
• sizes="auto" 仅在懒加载 (lazy loading) 模式下生效，且浏览器兼容性有限

5. 图片加载策略
• loading="eager"：默认立即加载，适合首屏关键图片 (FCP)
• loading="lazy"：延迟加载，推荐用于非关键图片，高效节省资源

6. 设备像素比 (Device Pixel Ratio, DPR)
• 区分 **CSS pixel 与 device pixel
• 对应关系由 DPR 决定，例如 DPR=2 需要两倍分辨率图片
• srcset 支持 w 单位（推荐）和 x 单位（DPR 描述符），前者更适合响应式

7. 实用指南 (Cheat Sheet)
• 固定尺寸图片（如 icon）：设置固定 sizes，srcset 使用 DPR 描述符即可
• 响应式图片：
• 若为首屏内容：指定具体 sizes
• 若非首屏内容：加上 loading="lazy" 并优先用 sizes="auto, ...fallback"

8. 参考资料
• MDN Responsive Images
• HTML Living Standard
• Use density descriptors (web.dev)

Reason Under Pressure

Your Images Are (Probably) Oversized

Or why you should always set the `sizes` and `srcset` attributes on your (responsive) <img> tags.

AI 摘要：本文详细展示了使用 Framer Motion 在 React 项目中实现动画的方式，对比了传统 CSS 实现与 Framer Motion 的简洁 declarative（声明式）方式，并通过 Fade-In、Hover、List Staggering、Drag-and-Drop、Sortable List 等实例演示其强大功能。文章强调了 Framer Motion 的生产级特性（如 gestures、physics、variants、Reorder 等），并给出了初学和进阶的使用方向。

1. 为什么选择 Framer Motion
• 提供生产级动画解决方案，语法简洁，学习成本低
• 完美兼容 React 与 TypeScript，支持 declarative 宣告式写法
• 强大特性：drag 拖拽、spring 物理动画、scroll 动效、shared layouts

2. 开发环境准备与安装
• 使用 Vite 初始化 React + TypeScript 项目
• 使用 npm install framer-motion 安装依赖
• 提供 Demo 链接 便于快速试验

3. 动画实例逐步讲解
• 基本 Fade-In：对比 CSS keyframes 与 motion.div（initial/animate/transition）
• Hover 动画：对比 Tailwind hover/active 与 whileHover whileTap 的简洁写法
• List Staggering：传统 nth-child + 延迟 VS variants + staggerChildren 的声明式方案
• Drag-and-Drop：利用 drag、dragConstraints 等 props 快速实现拖拽，不需手写 DOM 监听
• Sortable List：利用 Reorder.Group 与 Reorder.Item 实现可排序列表的流畅交互

4. 总结与进阶提示
• Framer Motion 让复杂动画开发更直观和简洁
• 初学者可从 motion.div、animate、transition 入门
• 进阶可使用 AnimatePresence、Reorder、useMotionValue 等更高级功能
• 动画开发核心思想：声明式描述交互，而非命令式逻辑

Medium

Animating Elements through framer motion with React.js

Today, most of the website requirements you come across will ask for animations and effects. While you can definitely build animations with…

AI 摘要：作者通过对常见的 React 状态订阅写法 (useEffect + useState) 进行剖析，指出该模式在服务端渲染 (SSR) 下可能引发抖动 (jank)，并介绍了 useSyncExternalStore 的优势：它提供了更简洁的 API，支持订阅机制和服务端默认值，从而提升 SSR 渲染体验并减少 UI 闪烁。

1. 常见的 useEffect + useState 订阅模式
• 使用 useEffect 在组件挂载时订阅事件源 (event source)。
• 更新 useState 来触发组件重渲染，卸载时清理订阅。
• 常见于绑定 ResizeObserver、DOM 引用、外部事件等场景。

2. 该模式在服务端渲染 (SSR) 下的问题
• 初始渲染使用默认值，SSR 时无法订阅浏览器事件。
• 浏览器接管 (hydration) 后才启动订阅并更新状态。
• 导致界面多次渲染，出现 UI 闪烁、过渡不平滑的现象 (jank)。

3. 使用 useSyncExternalStore 的改进方案
• 提供显式的 subscribe 函数实现监听与取消订阅。
• 第二个参数为获取当前值的方法，确保 UI 与外部状态同步。
• 第三个参数允许定义服务端默认值，提升 SSR 初始化体验。
• 案例对比表明，useSyncExternalStore 渲染更平稳，减少 UI 抖动。

4. 开发实践与思考
• 在涉及外部状态订阅 (API、事件、可观察对象) 场景下，应优先考虑 useSyncExternalStore。
• 默认值的设计影响 SSR 渲染体验，可以通过合理设置来降低不适感。
• 对数据可视化、实时 UI 交互等高频场景尤其重要。

Swizec

You may be looking for a useSyncExternalStore | Swizec Teller

When you see a `useEffect` that updates a `useState` and returns a value, you might be looking for a `useSyncExternalStore`. This is my current vendetta.

AI 摘要：本文从零开始搭建一个生产级别的 Express 5 应用，使用 TypeScript、ESLint + Prettier、Vitest + Supertest 进行规范和测试，展示了如何结构化 Express 项目（分层、按功能归档），如何实现 REST API 的路由、健康检查、日志、CRUD、JWT + cookie 的认证体系，并结合 Prisma + PostgreSQL 构建持久化层。文章采用 TDD（Test-Driven Development）的方法，通过分模块讲解与示例代码，让读者最终完成一个可扩展、可维护的现代 Express 应用。

1. 项目初始化与基础配置
• 使用 npm 初始化 Express + TypeScript 项目
• 配置 tsconfig.json 以启用严格模式和 ES Module
• 运行脚本 (build、start、dev) 设置

2. 代码规范与开发工具
• ESLint、Prettier 用于一致性和规范化
• 配置 lint 规则，包括 unicorn、simple-import-sort
• 添加格式化和修复脚本

3. 测试驱动开发 (TDD)
• 使用 Vitest + Supertest 写单元测试和集成测试
• 初始化 Vitest 配置（Node 环境）
• 实现第一个健康检查 (health-check) 测试 → 控制器 → 路由

4. 架构拆分与中间件
• 将 app.ts 与 server.ts 分离
• 使用 morgan 日志中间件
• 功能分组 (features) + MVC 模式 (无 view 层)
• 编写自定义 asyncHandler 简化 error 处理

5. 数据库与数据层 (Prisma + PostgreSQL)
• 初始化 Prisma schema
• 使用 UserProfile 模型
• 实现数据库连接与 PrismaClient 管理
• Facade 模式封装数据库 CRUD

6. 测试数据与校验
• 使用 Factory Functions 快速生成模拟数据
• 使用 Zod 校验 body / query / params
• 对比 express-validator 的类型推断问题

7. 认证与授权 (Authentication & Authorization)
• 集成 cookie-parser 用于读取 cookies
• 使用 JWT + bcrypt 实现登录 / 注册 / 登出
• setJwtCookie、clearJwtCookie、getJwtTokenFromCookie helpers
• Middleware requireAuthentication 实现受保护路由

8. 用户功能与 REST API CRUD
• /user-profiles 列表（带分页）测试与实现
• 单条获取 (GET by ID)、更新 (PATCH)、删除 (DELETE) 的 TDD 流程
• 考虑异常处理：404、400、409
• 自定义 getErrorMessage 工具统一报错输出

9. 项目结构与总结
• 最终应用结构清晰：src/features/*
• Express + TypeScript 项目的完整生产级最佳实践
• 扩展性强，可直接应用于实际开发

www.reactsquad.io

How To Set Up Express 5 For Production In 2025

Learn how to build an Express 5 app with TypeScript. You'll set up a production-ready project with tools for linting, testing and more.

AI 摘要：本文介绍了 Web.dev 更新的 Learn CSS 课程，新增了 9 个涵盖最新 CSS 功能的模块，例如 CSS 嵌套 (nesting)、容器查询 (container queries)、自定义属性 (custom properties)、锚点定位 (anchor positioning) 等。此次更新反映了近四年 CSS 的重大进展，模块同时关注 Baseline 功能保证了实用性，适合学习或提升前端开发技能的开发者。

1. Learn CSS 课程的演进
• 2021 年推出的 Learn CSS 是 Web.dev 基础 Web 开发内容的起点
• 四年间 CSS 特性快速发展（如容器查询从无到广泛可用）
• 每月数千人使用此课程，促使更新迭代

2. 本次更新的核心内容
• 新增 9 个重要模块：
• CSS 嵌套
• 容器查询
• 自定义属性
• 计数器
• 光标和指针
• 锚点定位
• 浮层和对话框
• 单页应用 (SPA) 的视图过渡
• 路径、形状、剪切和遮罩
• 更新后的模块紧贴近几年 CSS 标准发展与浏览器支持

3. Baseline 功能的聚焦
• 所有教学功能均已达到或即将进入 Baseline 状态
• 包括 Interop 2025 中的新特性，如锚点定位和视图转换
• 每个模块配有明确的浏览器支持信息，保证学习即用

web.dev

通过九个新模块重新学习 CSS  |  Blog  |  web.dev

我们广受欢迎的“学习 CSS”课程已更新，新增了涵盖最新 CSS 功能的模块。

AI 摘要：本文深入解析了 CSS 中的对齐 (Alignment) 机制，强调“内容(content)”与“项目(item)”两个层级对齐逻辑在 Grid、Flexbox、Block 以及定位元素中的差异。文章不仅讲述了基础属性（如 align-, justify-, place-* ）的适用场景，还对 auto margin 、绝对定位、以及 safe alignment 等进阶知识点逐一拆解，并指出 对齐始终依赖于尺寸 (sizing) 与剩余空间 (free space)**。这是篇对 CSS 布局本质高度还原的长文，尤其适合想彻底理解 Alignment 背后的逻辑的开发者。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]
1. 对齐基础理论 （The Alignment Theory）
• CSS 中存在约 10 个对齐相关属性，常令初学者困惑。
• 对齐分为 content level 与 item level。
• 常用属性类别：
• place-content（容器内容对齐）
• place-items（所有项目的对齐）
• place-self（单个项目的对齐）
• 属性均存在水平 (justify-*) 与垂直 (align-*) 两个维度。
• place-* 为两者速记写法，但常用分开书写。

2. Grid 布局对齐
• Grid Anatomy：容器(container) → 格子单元(cells) → 项目(items)。
• 内容层级：对齐的是 grid cells 作为整体；项目层级：对齐的是 cell 内单个项目。
• start / end 使用逻辑值而非物理 left / right，支持不同语言排版。
• Auto sizing：若设为 auto，grid cells 会填充或收缩，normal 默认值等于 stretch。
• auto vs 1fr 区别：
• auto 可收缩并依赖对齐调整。
• 1fr 吞下所有剩余空间，导致无法再进行 content-level 对齐。
• 跨单元格项目 (grid area)：对齐是在 grid area 内进行，而非单一 cell。

3. Flexbox 布局对齐
• Flexbox Anatomy：容器 → flex lines → flex items。
• 纵向轴 (cross axis)：
• 内容层级对齐：flex lines 可整体对齐。
• 项目层级对齐：item 可在 flex line 内独立对齐 (align-self)。
• 横向轴 (main axis)：
• 仅存在内容层级对齐 (justify-content)，项目不可单独对齐 (justify-self 无效)。
• flex-wrap：
• nowrap 禁止纵向内容层对齐 (align-content 失效)。
• wrap 激活 content-level alignment 即便只有一行。
• flex-direction：行列切换会翻转主轴与交叉轴，因此相同属性可作用于不同方向。
• **flex-grow 与对齐关系：填满剩余空间会禁用对应轴上的 content 对齐。

4. Block 容器与内联元素
• 在 Block container 中：
• 水平：item-level 对齐（justify-items, justify-self），没有内容层级对齐。
• 垂直：content-level 对齐 (align-content)，没有 item-level。
• inline 元素的特殊情况：
• 单纯 inline → 水平继承 text-align，无需 flex/grid。
• 混合 inline 与 block → 浏览器生成“匿名块盒 (anonymous block box)”封装 inline 元素，但这些盒子不可直接对齐。

5. Auto Margins
• 对齐的是 margin box 而非元素本身。
• margin: auto 会将剩余自由空间转化为 margin，本质是“吞掉空间”的机制。
• 在 Flexbox 主轴下依旧生效，即便没有 item-level alignment。
• 注意：Block 垂直方向 auto margin 无效，需要定义 width 才能触发水平居中。
• 与 place-self: center 的区别：前者 margin box 吞满，后者保持元素周围留有自由空间。

6. 绝对定位元素 (Absolutely-positioned elements)
• 对齐以 containing block 作为参考区域（父级 padding box 或视口）。
• inset 定义内缩区域 (IMCB)，对齐作用在该区域内。
• *-self 属性适用，但浏览器兼容性有限。
• 传统写法 （ left: 50%; top: 50%; transform: translate(-50%, -50%)）依旧可用，但推荐 inset: 0; place-self: center 更直观。

7. Safe Alignment
• 当内容超出容器（负自由空间）时，可仍然对齐，但滚动条可能导致内容不可达。
• 使用 safe 修饰符（如 justify-self: safe center）可避免此问题。
• margin: auto 的对齐方式天然就是“safe”，因其不作用于负自由空间。

8. 总结
• Alignment 逻辑核心：永远依赖剩余空间和元素尺寸。
• Grid、Flexbox、Block 各自有不同的默认行为和适用属性。
• 常见混淆点：
• auto vs normal vs stretch
• justify-items 和 justify-content 适用范围不同
• fr 与 flex-grow 会吞掉剩余空间，从而禁用对齐。

Css-Tip

The Fundamentals of CSS Alignment

This deep dive covers everything you need to know about CSS alignment. It's time to stop doing trial and error and finally understand how everything works!