💬 推荐语

这周的前端更新节奏不减，CSS 世界持续花活创新，从 SVG 转形状到滚动驱动动画；React 则再掀讨论热度，RSC 的边界和“Context 渲染过多”的争议也被一一拆解；工具链方面，ESLint 终于开始原生支持 HTML lint，让代码质量保障更进一步。总之，如果你想知道 2025 年前端该怎么玩，这一周的内容，你值得仔细看看。

🧠 博主点评

从这期内容来看，前端生态进入了“工具整合与语义回归”的新阶段。像 html-eslint、Rslib、View Transitions 的持续演化，说明前端正往“表达更清晰、体验更细腻”的方向进化。而 React 圈依旧火热，RSC（React Server Component）与自定义渲染器的深水区讨论，表明框架开发者正在探索架构的下一个层级。

🗂️ 本期精选目录

Web 开发

🔹如何打造新的表单控件：从底层构建一个原生表单控件，完整介绍交互设计与可访问性实现。

🔹从 SplitText 到 MorphSVG：5 个免费的 GSAP 创意动画 Demo：动效爱好者不容错过，展示如何用 GSAP 插件制作高级动画。

🔹GitHub Copilot 入门：用 AI 构建 React 应用：GitHub 官方出品的 Copilot 教程，带你从 0 到 1 搭建 React 应用。

🔹如何用 Lighthouse 优化网页性能：深入解读 Lighthouse 报告并指导优化实践。

工具

🔹ESLint 支持 HTML 代码校验了！：通过 html-eslint 插件，HTML 文件也能纳入 ESLint 检查体系。

🔹Rslib：基于 Rspack 打包构建的库开发方案：来自 Rspack 团队的新工具，用于快速构建 JS/TS 库。

可访问性（Accessibility）

🔹HTML 邮件可访问性年度报告：全面分析 2025 年 HTML 邮件在可访问性方面的表现与改进方向。

🔹结合 Next.js 和 axe DevTools 打造可访问应用：实战指导，帮助开发者更容易集成无障碍功能。

🔹可访问性之道：用现代方式学习 React/Angular/Vue 的无障碍开发：一套系统性学习最佳实践的在线课程资源。

🔹三款工具助你解决常见 WCAG 2.2 可访问性错误：快速修复网页常见可访问性问题的利器。

CSS

🔹容器查询中的“元素外部空间”检测：扩展容器查询的用法边界，考虑“外部空间”布局。

🔹SVG 转 CSS 形状生成器：支持将 SVG 图形转为 clip-path 等 CSS 样式，提升创作效率。

🔹纯 CSS 实现无限滚动画廊：炫酷滚动展示画廊组件，无需 JS 支持。

🔹用 clip-path: shape() 绘制花朵图形：CSS 创意玩法再升级。

🔹百分比高度的谜团：CSS 高度是如何计算的：解析 percentage-based height 的常见误解。

🔹Scroll 驱动动画在 CSS 轮播图中的应用：结合 CSS Scroll Timeline 实现响应式动效。

🔹平滑动画 border-radius：View Transitions 应用探索：借助 View Transitions API 实现更自然的样式过渡。

🔹CSS Masking：为动画增加一维空间感：遮罩动画的高级进阶玩法。

🔹CSS 如何自动选择对比色：基于背景自动生成可读文本颜色，提升用户体验。

🔹初探 View Transitions：前端视觉过渡的实战尝试。

JavaScript & React

🔹我开始喜欢上 Generator 的使用体验了：作者谈为何 Generator 正逐渐变得顺手。

🔹JavaScript 正则表达式终极指南：详解语法、边界情况与调试技巧。

🔹JS 编译提示：是什么、什么时候用？：深入探讨编译优化 hint 与性能提升的关系。

🔹Angular Can I Use：像 CanIUse 一样检查 Angular API 在不同版本的支持情况。

🔹如何在 React 中集成 Rive 动效：带你了解 Rive 在实际项目中如何协作。

🔹React 真酷，你居然不知道？：一篇不拘一格的 React 使用体验文章，风格狂野但不失干货。

🔹RSC 的极限：一位开发者的实践历程：揭示 React Server Components 的优势与局限。

🔹如何构建自定义 React 渲染器：适合探索底层实现的开发者阅读。

🔹React Three Fiber：在 Web 上实现 3D 渲染：深入理解如何用 React 组织 WebGL 渲染。

🔹别再说 Context 导致频繁渲染了：深入分析 React Context 的性能表现与常见误解。

小结

这期内容可以看作是前端的“全生态热身”：从底层 HTML 与 ESLint 扩展，到高级动画、CSS 语义增强、React 渲染机制探索，一方面是性能与体验的持续优化，另一方面是对复杂架构和可访问性的新尝试。值得点赞的是，多个工具和文档都在“为开发者赋能”上下了不少功夫。

OK，以上就是本次分享，欢迎加我威 atar24，备注「前端周刊」，我会邀请你进交流群👇

🚀 每周分享技术干货
🎁 不定期抽奖福利
💬 有问必答，群友互助