🧭 前端周刊第442期（24–30 Nov 2025）

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

1_RrN8JaYWmK1fa_2NSvifEw.webp

💬 推荐语

本期周刊聚焦前端技术的创新与实践：从 WebGL 史诗级场景的模块化渲染系统，到 UrlPattern 构建自定义路由；从 CSS Subgrid 的全新布局能力，到 React 生态的持续演进。性能优化、安全防护、原生能力增强，前端开发正在向更高效、更安全、更原生的方向迈进。

🗂 本期精选目录

🧭 Web 开发

• Building The Monolith: Composable Rendering Systems for a 13-Scene WebGL Epic：构建单体应用：13 场景 WebGL 史诗的模块化渲染系统，可组合架构设计实践。
• Build Your Own Router with UrlPattern：使用 UrlPattern 构建自己的路由系统，原生 API 的灵活应用。
• Letting the Creative Process Shape a WebGL Portfolio：让创意过程塑造 WebGL 作品集，设计思维与技术实现的完美结合。
• The Shai-Hulud 2.0 npm worm: analysis, and what you need to know：Shai-Hulud 2.0 npm 蠕虫分析：你需要了解的安全威胁与防护措施。
• The Performance Inequality Gap, 2026：性能不平等差距 2026：设备性能差异对用户体验的影响分析。
• What's new in Astro — November 2025：Astro 十一月更新：新特性与改进一览。
• New to the web platform in November：Web 平台十一月新特性：原生能力持续增强。

🎨 CSS

• Brand New Layouts with CSS Subgrid：CSS Subgrid 的全新布局能力，网格布局的下一代进化。
• How to Add and Remove Items From a Native CSS Carousel (…with CSS)：如何用纯 CSS 在原生轮播图中添加和删除项目，无需 JavaScript 的交互实现。
• Generating Utility Classes from Design Tokens using Style Dictionary：使用 Style Dictionary 从设计令牌生成工具类，设计系统自动化实践。
• Use overscroll-behavior: contain to prevent a page from scrolling while a is open：使用 overscroll-behavior: contain 防止对话框打开时页面滚动，提升用户体验。
• Introduction to CSS if Statements and Conditional Logic：CSS if 语句和条件逻辑入门，样式中的条件判断新特性。
• On Inheriting and Sharing Property Values：关于继承和共享属性值，CSS 属性传递机制深入解析。
• Drawing Triangles with CSS Using Borders… an Exception：用 CSS 边框绘制三角形…一个例外情况，技巧与边界案例。
• How to create fancy corners using CSS corner-shape：如何使用 CSS corner-shape 创建精美圆角，新特性带来的设计可能性。
• CSS-in-JS: The Great Betrayal of Frontend Sanity：CSS-in-JS：前端理智的"大背叛"，技术选型的反思与讨论。
• Direction-Aware CSS Shapes：方向感知的 CSS 形状，响应式设计中的智能布局。
• light-dark() isn't always the same as prefers-color-scheme：light-dark() 并不总是等同于 prefers-color-scheme，暗色模式实现的细微差别。
• Using CSS to fix the irradiation illusion：使用 CSS 修复辐照错觉，暗色模式下的字体感知优化。

💡 JavaScript

• Why use React?：为什么使用 React？框架选择的思考与权衡。
• Ripple over React? Evaluating the newest JS framework：Ripple 能否超越 React？最新 JS 框架评估，新框架的潜力分析。
• State of React 2025：React 2025 状态调查，社区生态全景图。
• Intro to Nest.js: Server-side JavaScript development on Node：Nest.js 入门：Node.js 上的服务端 JavaScript 开发，企业级框架实践。
• How to Simplify Your React Components with Derived State：如何用派生状态简化 React 组件，状态管理的最佳实践。

📌 小结

从 WebGL 渲染系统的模块化设计，到 CSS Subgrid 的布局革命；从 npm 安全威胁的深度分析，到 React 生态的持续演进，这一周的前端技术展现出"性能优化 + 原生增强 + 安全防护"的多维度发展。开发者正在获得更强大的原生能力，同时面临新的安全挑战，需要持续关注最佳实践。