前端周刊第 435 期

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

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

💬 推荐语： 这一周的前端世界依旧热闹：从 Astro 的极速客户端搜索到 HTML 的隐藏 API，再到 WebGL 动画和 CSS 的 view transitions，大厂和社区都在不断推进 Web 的边界。React 官方推出了新基金会，生态格局或将迎来重大变化。

🗂 本期精选目录

Web 开发

🔹《在 Astro 静态站点中添加极速客户端搜索》 https://evilmartians.com/chronicles/how-to-add-fast-client-side-search-to-astro-static-sites?q=1 详细讲解如何在 Astro 站点中集成快速的客户端搜索方案。 推荐指数：⭐⭐⭐⭐

🔹《欧洲的 Cookie 法把互联网搞乱了，布鲁塞尔正试图修复》 https://www.politico.eu/article/europe-cookie-law-messed-up-the-internet-brussels-sets-out-to-fix-it/ 欧盟准备修订“Cookie 法”，重塑网络隐私合规新格局。 推荐指数：⭐⭐⭐

🔹《网页的遗忘角落：你知道 HTML 还有 Tables API 吗？》 https://christianheilmann.com/2025/10/08/abandonware-of-the-web-do-you-know-that-there-is-an-html-tables-api/ 介绍一个几乎被遗忘的 HTML Tables API。 推荐指数：⭐⭐⭐

🔹《HTML 的秘密武器：output 标签》 https://denodell.com/blog/html-best-kept-secret-output-tag 探索 HTML 的 “output” 标签及其潜在用法。 推荐指数：⭐⭐⭐

工具 Tools

🔹《Oxlint JS 插件预览》 https://oxc.rs/blog/2025-10-09-oxlint-js-plugins.html Oxc 团队发布 Oxlint 插件系统预览版，JS 静态分析更强大。 推荐指数：⭐⭐⭐⭐

🔹《Vite：纪录片》 https://www.youtube.com/watch?v=bmWQqAKLgT4 Vite 团队出品纪录片，讲述工具的诞生与崛起之路。 推荐指数：⭐⭐⭐⭐⭐

特效 Effects

🔹《用 GSAP 动画驱动 WebGL Shader：水波、揭示与动态模糊》 https://tympanus.net/codrops/2025/10/08/how-to-animate-webgl-shaders-with-gsap-ripples-reveals-and-dynamic-blur-effects/ 结合 GSAP 与 WebGL 创造高级视觉动画。 推荐指数：⭐⭐⭐⭐⭐

🔹《Smashing Animations Part 5：用 、 与 CSS 媒体查询打造自适应 SVG》 https://www.smashingmagazine.com/2025/10/smashing-animations-part-5-building-adaptive-svgs/ 学习如何用 SVG symbol 和 CSS 构建可响应动画。 推荐指数：⭐⭐⭐⭐

🔹《Ponpon Mania：用 WebGL + GSAP 让羊的漫画梦变成现实》 https://tympanus.net/codrops/2025/10/07/ponpon-mania-how-webgl-and-gsap-bring-a-comic-sheeps-dream-to-life/ 趣味十足的 WebGL 动画实验作品。 推荐指数：⭐⭐⭐⭐

CSS

🔹《View Transitions 新特性（2025 更新版）》 https://developer.chrome.com/blog/view-transitions-in-2025?hl=en 浏览器级视图过渡的新变化与案例。 推荐指数：⭐⭐⭐⭐

🔹《纯 CSS 实现倾斜列布局（详细注释版）》 https://codepen.io/thebabydino/pen/WbrjrZM 无“魔法数”的倾斜列布局技巧，纯 CSS 实现。 推荐指数：⭐⭐⭐⭐

🔹《数字坠落：滚动驱动动画与兄弟索引》 https://frontendmasters.com/blog/numbers-that-fall-scroll-driven-animations-sibling-index/ 利用滚动驱动动画创造数字坠落效果。 推荐指数：⭐⭐⭐⭐

🔹《CSS 计数器实战》 https://frontendmasters.com/blog/css-counters-in-action/ 用 CSS counters 构建自动编号和动态列表。 推荐指数：⭐⭐⭐

🔹《条件圆角：让 border-radius 更灵活》 https://ishadeed.com/article/conditional-border-radius/ 用 CSS 条件逻辑控制圆角显示。 推荐指数：⭐⭐⭐⭐

🔹《用 shape-outside 创意排版》 https://css-tricks.com/getting-creative-with-shape-outside/ 用 shape-outside 打造环绕排版和有趣的视觉布局。 推荐指数：⭐⭐⭐⭐

🔹《CSS Grid：更清晰的心智模型与网格线的力量》 https://webkit.org/blog/17474/css-grid-a-helpful-mental-model-and-the-power-of-grid-lines/ 深入理解 CSS Grid 的网格线机制。 推荐指数：⭐⭐⭐⭐

🔹《现代 CSS 颜色实用指南（第一部分）》 https://piccalil.li/blog/a-pragmatic-guide-to-modern-css-colours-part-one/ 现代 CSS 颜色系统入门指南。 推荐指数：⭐⭐⭐⭐

🔹《我们完全错过了 width/height: stretch》 https://css-tricks.com/we-completely-missed-width-height-stretch/ 探讨新特性 width/height: stretch 的实用场景。 推荐指数：⭐⭐⭐

🔹《CSS MCP Server：从 MDN 拉取最新文档的 CSS 智能分析服务》 https://github.com/stolinski/css-mcp 一个提供最新 CSS 文档和分析的 MCP 服务器。 推荐指数：⭐⭐⭐⭐

🔹《CSS 视图过渡新手指南》 https://developer.mozilla.org/en-US/blog/view-transitions-beginner-guide/ MDN 官方推出的 view transitions 入门教程。 推荐指数：⭐⭐⭐⭐

🔹《是否应该在 CSS 中使用 if() 函数？》 https://blog.logrocket.com/css-if-function-conditional-styling-2025/ 探讨 CSS 新增 if() 函数的适用场景。 推荐指数：⭐⭐⭐

JavaScript

🔹《可视化 JavaScript 事件循环》 https://vitalii4reva.com/visual-js-event-loop/ 直观演示 JS 事件循环工作原理的交互可视化工具。 推荐指数：⭐⭐⭐⭐

🔹《Hooks vs. Signals：响应式模型大融合解析》 https://blog.logrocket.com/signals-vs-hooks-reactivity-models/ 比较 Hooks 与 Signals 的响应式思想与实现差异。 推荐指数：⭐⭐⭐⭐

🔹《LangChain.js 被高估了：用 fetch 也能写 AI Agent》 https://blog.logrocket.com/langchain-js-overrated-build-ai-agent-simple-fetch-call/ 反思 LangChain.js 的复杂性，用最简单方式实现 AI 调用。 推荐指数：⭐⭐⭐⭐

🔹《AsterMind-ELM：在浏览器中运行机器学习模型的 JS 库》 https://thenewstack.io/javascript-library-runs-machine-learning-models-in-browser/ 一个支持在浏览器直接跑 ML 模型的轻量 JS 库。 推荐指数：⭐⭐⭐⭐

React

🔹《React 基金会正式成立》 https://react.dev/blog/2025/10/07/introducing-the-react-foundation React 官方宣布成立基金会，未来生态治理更加开放。 推荐指数：⭐⭐⭐⭐⭐

🔹《在 React 与 Next.js 中配置 Tailwind CSS 全流程指南》 https://www.sitepoint.com/tailwind-css-in-react-and-nextjs/ 从零搭建 React + Next.js + Tailwind 项目。 推荐指数：⭐⭐⭐⭐

🔹《为什么开发者放弃 React，转向更轻量的 Preact》 https://thenewstack.io/why-devs-are-ditching-react-for-preacts-simplicity-and-speed/ 探讨 Preact 的性能与简洁优势。 推荐指数：⭐⭐⭐

🔹《为什么 Next.js 在软件工程层面存在不足》 https://blog.webf.zone/why-next-js-falls-short-on-software-engineering-d3575614bd08 从工程角度剖析 Next.js 的设计问题。 推荐指数：⭐⭐⭐

🔹《用 useSyncExternalStore 实现并发 Hydration》 https://kurtextrem.de/posts/react-uses-hydration 介绍 useSyncExternalStore 的并发 Hydration 实践。 推荐指数：⭐⭐⭐⭐

Vue

🔹《Vue 基础：状态管理入门》 https://www.telerik.com/blogs/vue-basics-state-management-vue 从零理解 Vue 的状态管理机制。 推荐指数：⭐⭐⭐

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

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