前端周刊第 442 期

📢 宣言

我已经计划并开始实践：每周逐期翻译《前端周刊》内的每篇文章，并将其整理发布到 GitHub 仓库中，持续更深度的分享。
欢迎大家访问：https://github.com/TUARAN/frontend-weekly-digest-cn
顺手点个 ⭐ star 支持，是我持续输出的续航电池🔋✨！

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

💬 推荐语

本期周刊聚焦前端技术的创新与实践：从 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 <dialog> 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 生态的持续演进，这一周的前端技术展现出"性能优化 + 原生增强 + 安全防护"的多维度发展。开发者正在获得更强大的原生能力，同时面临新的安全挑战，需要持续关注最佳实践。

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

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