前端周刊第 445 期

📢 宣言：每周更新国外论坛的前端热门文章，推荐大家阅读/翻译，紧跟时事，掌握前端技术动态，也为写作或突破新领域提供灵感~

欢迎大家访问：https://github.com/TUARAN/frontend-weekly-digest-cn 顺手点个 ⭐ star 支持，是我们持续输出的续航电池🔋✨！

在线网址：https://frontendweekly.cn/

💬 推荐语

本期内容涵盖 HTML 现状、React2Shell 安全事件复盘与防护、可访问性与性能指标实践、现代 CSS 新能力，以及框架与工具链的最新趋势。

🗂 本期精选目录

🧭 Web 开发

• State of HTML 2025：HTML 生态与能力现状调查（2025）。
• Our $1 million hacker challenge for React2Shell：Vercel 发起 React2Shell 百万美元漏洞挑战。
• Dynamic Datalist: Autocomplete from an API：从 API 动态生成 datalist 自动补全。
• How To Measure The Impact Of Features：如何衡量功能带来的真实影响。
• The <time> element should actually do something：让 <time> 元素“真正有用”的语义与实践讨论。
• An Accessible Guide to WCAG 3.3.9: Going for Gold：WCAG 3.3.9（Going for Gold）可访问性指南。

🛠 工具

• The JavaScript Bundler Grand Prix：JavaScript 打包器“大奖赛”对比与观察。
• Vitest 4 adoption guide: Overview and migrating from Jest：Vitest 4 迁移指南：从 Jest 迁移与注意事项。

⚡ 性能

• Lazy Loading Images Based on Screen Size：按屏幕尺寸进行图片懒加载的策略。
• Optimizing CLS for Infinite Scroll and Load More：无限滚动/加载更多场景的 CLS 优化。
• The Anatomy of LCP — A Deep Dive into Sub-Parts：拆解 LCP：子阶段与优化切入点。

🧪 Demo

• Building Responsive, Scroll-Triggered Curved Path Animations with GSAP：用 GSAP 构建响应式滚动触发曲线路径动画。
• Different Page Transitions For Different Circumstances：不同场景下的页面过渡实现思路。
• Andy Clarke’s Toon Text — Classic cartoon title cards brought to the web using modern css, javascript, and svg：Toon Text：用 CSS/JS/SVG 实现经典卡通标题字效果。

🎨 CSS

• Directional CSS with scroll-state(scrolled)：使用 scroll-state(scrolled) 做方向性样式。
• Connecting Circles With Anchor Positioning：用 Anchor Positioning 连接圆形元素的布局技巧。
• Responsive List of Avatars Using Modern CSS (Part 2)：现代 CSS 实现响应式头像列表（Part 2）。
• Masonry Layout is Now grid-lanes：Masonry 布局的新进展：grid-lanes。
• Bad CSS-Dad Jokes (V)：Bad CSS Dad Jokes（第五弹）。
• Dialog view transitions：Dialog 的 View Transitions 实践。
• VoxCSS — A CSS voxel engine：VoxCSS：一个 CSS 体素引擎。

💡 JavaScript

• Exploring Multi-Brand Systems with Tokens and Composability in Vue：在 Vue 中用 Token 与可组合性构建多品牌设计系统。
• Surviving the RAM Squeeze: Efficiency Tips for JavaScript Developers：JavaScript 开发者的内存效率实践建议。
• When Should JavaScript Devs Use the Power of WebAssembly?：何时该在前端引入 WebAssembly？
• Angular vs. React vs. Vue.js: A performance guide for 2026：Angular/React/Vue 性能对比（面向 2026 的视角）。

⚛️ React

• Introducing RSC Explorer：RSC Explorer 介绍：理解与探索 RSC 的新工具。
• React2Shell exploit: What happened and lessons learned：React2Shell 漏洞事件复盘与经验教训。
• The complete guide to internationalization in Next.js：Next.js 国际化完整指南。
• Vite vs. Webpack for react apps in 2025: A senior engineer’s perspective：2025 年 React 应用：Vite vs Webpack 的工程视角对比。