📢 宣言：每周更新国外论坛的前端热门文章，推荐大家阅读/翻译，紧跟时事，掌握前端技术动态，也为写作或突破新领域提供灵感~
欢迎大家访问：github.com/TUARAN/fron… 顺手点个 ⭐ star 支持，是我们持续输出的续航电池🔋✨！
在线网址：frontendweekly.cn/
💬 推荐语
本期围绕“AI First 前端架构 + WebMCP 与 Agent 生态 + 大规模性能与工具演进”展开：从“纯前端开发者之死”与 AI-First 前端架构出发，讨论前端角色边界与 AI 协作的新范式；WebMCP 相关多篇文章聚焦“让 Agent 与 Web 协作而非对抗”；虚拟滚动、高表格等实践则展示了在海量数据场景下的前端工程挑战。CSS 板块既有 Chrome CSS 零日漏洞的安全复盘，也有 border-shape、锚点定位、:near()、列表与排版刻度等一系列现代特性；JavaScript 与生态部分涵盖轻量状态管理、循环依赖治理、JS-heavy 性能反思，以及 React Doctor、vue-ecosystem-skills 与网络模拟器等新工具，帮助我们在 AI 与新工具浪潮下重新审视工程实践。
🗂 本期精选目录
🧭 Web 开发
- The Death of the ‘Pure’ Frontend Developer：从“纯前端”到全栈与 DevOps，看前端角色如何在工程化与平台化趋势中演化。
- AI-First Frontend Architecture: From Prompt to Production：探讨以 AI 为一等公民设计前端架构，从 Prompt 到上线的整体链路设计思路。
- WebMCP — a much needed way to make agents play with rather than against the web：从实践者角度阐述 WebMCP 如何让 Agent“与 Web 协作而非对抗”。
- Virtual Scrolling for Billions of Rows — Techniques from HighTable：拆解在“数十亿行”级别数据下实现虚拟滚动的关键技术与性能权衡。
- HTMX + Signals: The Frontend Architecture That Ditches JavaScript Complexity：用 HTMX + Signals 搭建“更少 JS、更高内聚”的前端架构，减少框架复杂度。
🛠 工具
- Fastest Frontend Tooling for Humans & AI：从“人类 + AI”双重视角设计前端工具链，强调冷启动、反馈速度与自动化能力。
- WebMCP: Empowering Agents as First-Class Citizens of the Web：进一步介绍 WebMCP，将 Agent 提升为 Web 的一等公民。
- Announcing Full-Stack Web App Evaluation in Design Arena：展示如何对全栈 Web 应用做自动化评估与基准测试，为 DX/性能决策提供数据支撑。
- Socket Security Analysis Is Now One Click Away on npm：Socket 的安全分析与 npm 集成，让依赖风险检查变成“一键操作”。
✨ 演示/特效
- Reactive Depth: Building a Scroll-Driven 3D Image Tube with React Three Fiber：用 React Three Fiber 构建滚动驱动的 3D 图像“隧道”，适合理解滚动驱动动画和 3D 场景组织。
- Joffrey Spitzer Portfolio: A Minimalist Astro + GSAP Build with Reveals, Flip Transitions and Subtle Motion：Astro + GSAP 打造的极简作品集站点，展示 reveal、FLIP 转场与细腻动效的结合。
- Creating a Smooth Horizontal Parallax Gallery: From DOM to WebGL：从 DOM 到 WebGL 的水平视差画廊实现过程，兼顾体验与性能。
🎨 CSS
- They Hacked the CSS: Inside Chrome’s First Zero-Day of 2026 (CVE-2026–2441)：通过 Chrome 首个 CSS 零日漏洞案例，理解 CSS 与浏览器实现细节中的安全风险。
- modern.css — Stop writing CSS like it’s 2015.：系统整理现代 CSS 写法，帮助你摆脱“2015 年的 CSS 习惯”。
- border-shape: the future of the non-rectangular web：介绍
border-shape特性，展望非矩形 Web 布局的未来。 - Why is Anchor Positioning not working?：排查 Anchor Positioning 不生效的常见原因与调试思路。
- Potentially Coming to a Browser :near() You：提前预览
:near()等即将落地的 CSS 选择器，思考它们在组件化中的用法。 - An in-depth guide to customising lists with CSS：用现代 CSS 深度定制列表样式，从项目符号到布局一网打尽。
- Building Typographic Scales in CSS with :heading(), sibling-index(), and pow()：利用
:heading()、sibling-index()与pow()构建更语义化的排版比例尺。 - The corner cases of implementing CSS corner-shape in Blink：从 Blink 实现角形状
corner-shape的细节中，理解标准到实现的鸿沟。 - Spiral Scrollytelling in CSS With sibling-index()：使用
sibling-index()做“螺旋式”滚动叙事效果的实战示例。 - Anchored Menus and a Lesson in Scoping：通过锚定菜单的实现，复盘作用域与样式隔离的设计经验。
- CSS @container scroll-state: Replace JS scroll listeners now：用
@container scroll-state替代 JS 滚动监听，实现更声明式的滚动交互。 - Tailwind CSS v4: Container Queries and the Death of Media Queries：解读 Tailwind v4 中的容器查询支持，以及它对传统媒体查询的影响。
💡 JavaScript
- Nexus State — Lightweight Atomic State Management for Modern Apps：一款轻量的原子化状态管理库，适用于现代应用的细粒度状态控制。
- Fixing Circular Imports in a Real Frontend Codebase：在真实前端项目中处理循环依赖的案例与总结。
- React Doctor — Let coding agents diagnose and fix your React code.：一个让“Coding Agent”帮你诊断并修复 React 代码的工具思路与产品。
- JS-heavy approaches are not compatible with long-term performance goals：反思 JS 过重架构对长期性能目标的伤害，呼吁更克制的前端策略。
- Anti-libraryism: 10 web APIs that replace modern JavaScript libraries：盘点 10 个可以替代常用 JS 库的 Web API，提倡“反库主义”。
- Ultimate Angular Firebase Setup with AnalogJS：结合 AnalogJS 打造“终极” Angular + Firebase 工程化脚手架。
- vue-ecosystem-skills — AI agent skills for the bleeding edge Vue ecosystem. Built from real docs, issues, and releases：为 Vue 生态打造的 AI Agent 技能集，让 Agent 能“读懂”真实文档与 issue。
- fetch-network-simulator — A development-time API request/response network behavior simulator for frontend applications.：在本地模拟多种网络行为的 API 调试工具，方便前端在开发期验证鲁棒性。
