AI 摘要：Chrome 143+ 引入 CSS 锚点定位回退检测机制，可自动检测容器布局变化并动态切换定位方向，解决传统锚点定位在空间受限时的显示异常问题。

AI 摘要：Waku 是一个专注于静态与动态混合渲染的 React 框架，现已发布 1.0-alpha 版本并标记公共 API 为稳定状态。该框架特别适合构建营销网站、博客、文档站和轻量级电商等大部分静态内容但包含少量动态路由的场景。Waku 提供灵活的路由配置方式（文件路由和配置路由），支持在布局、切片和页面级别独立设置渲染配置，可实现静态渲染、动态渲染或混合渲染。团队后续将专注于 bug 修复和兼容性改进，并为每个版本提供发布说明和迁移指南。

Waku

Waku 1.0 (alpha) — Waku

Waku's public APIs are now marked as stable.

AI 摘要：本文深入探讨了如何利用 CSS 实现元素在滚动时从 position: sticky 切换到 position: fixed 的视觉效果。文章提供了两种主要方法：一是结合 view() 函数和 keyframes 实现基于滚动驱动的动画，详细讲解了布局、相对尺寸设置（使用容器查询单位 cqw）以及如何精确调整元素位置以避免切换时的跳动；二是利用尚处于实验阶段的滚动状态查询 (scroll-state)，这种方法代码量更少，但浏览器兼容性较差。文章强调了在两种定位模式下保持元素尺寸和位置的连贯性是实现流畅过渡的关键，并讨论了这种效果在用户界面（如 CTA 按钮、横幅）中的实际应用场景。

使用自定义模型实现粒子爆炸，精确地限定在圆柱体内。
演示 particles.sujen.co

AI 摘要：作者从一个“反 AI 狂热者”转变为 AI 代理的使用者，因为他发现 AI 在代码编写上的生产力惊人。他详细介绍了如何设置 AI 代理（以 Claude Code 为例），强调了配置清晰的 CLAUDE.md 文件（包括项目架构和个人编码习惯）的重要性。在整体策略上，他强调了结合自动化测试提供反馈循环，以及在复杂任务中使用“计划模式”来让 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，并正在向前发展。

AI 摘要：文章回顾了 2025 年前端领域的十大关键事件，涵盖了 TypeScript 和 Tailwind CSS 的持续普及、服务端渲染（SSR）的全面应用、CSS 新特性的爆发式发展、Rust 在前端工具链中的崛起，以及 TanStack 生态系统的蓬勃发展。文章还提到了 React 19.2 带来的异步（Async）编程范式转变，但同时也揭示了 npm 供应链攻击和 React2Shell 漏洞等严重安全问题。最重要的是，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 助手被整合到命令行工具中，极大地提高了开发效率，尽管作者半开玩笑地指出它们似乎“一心想取代开发者”。

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.