本期周刊记录了赴长沙参加 FEDAY 2025 的见闻与个人博客更新：移植 Fumadocs 风格的移动端目录、为图片加入 LQIP 并显著提升性能；前端动态包括 shadcn 3.6 推出可定制组件库、Storybook v7+ 构建或泄露 .env 的安全公告、TanStack Start 增加 Vue 支持、Chrome DevTools 144 支持单请求限速；技巧分享用 SVG vectorEffect 修复虚线缩放问题；精选多篇 React/CSS/WebGPU/GSAP 优质内容与 CodePen 作品。

AI 摘要：Storybook 团队发布安全公告，披露 Storybook 在特定条件下，可能将 .env 文件中的敏感环境变量意外打包到构建产物中，导致这些秘密信息在发布到网络后泄露。受影响的项目需满足使用 Storybook 7.0.0 及以上版本、在构建时存在包含敏感信息的 .env 文件，并使用特定 process.env 代码模式。官方建议所有受影响用户立即审计并轮换密钥，并将 Storybook 升级至已打补丁的版本，同时调整环境变量的引用方式。部分流行的 Storybook 插件可能触发此漏洞，但漏洞本身存在于 Storybook 核心。

Storybook Blog

Security advisory

Impacted versions 7–10. Patches available now.

一个 Raycast 扩展，可以直接从本地计算机搜索 CSS-Tricks 文章。该扩展使用 WordPress REST API 获取实时搜索结果，提供了一种快速查找和复制文章 URL 的方法。单击结果会显示摘要并在浏览器中打开文章。

Raycast

Raycast Store: CSS Tricks

Search on CSS Tricks

AI 摘要：本文介绍了 Dan Abramov 发布的新工具 RSC Explorer，旨在帮助开发者直观理解 React Server Components (RSC) 的底层工作原理。由于最近 React Server Components 披露了一个严重的安全漏洞，RSC 协议引起了广泛关注。RSC Explorer 是一个开源的单页应用，通过模拟 RSC 协议的读写过程，展示了数据流、代码传输、流式渲染、服务器操作以及无框架路由刷新等核心概念，让开发者能够“所见即所得”地学习 RSC。

GitHub

GitHub - gaearon/rscexplorer: A tool for people curious about the React Server Components protocol

A tool for people curious about the React Server Components protocol - gaearon/rscexplorer

AI 摘要：本文深入解读了 Chrome 团队发布的“CSS Wrapped 2025”年度总结报告，重点介绍了 CSS 在逻辑处理、状态管理和复杂交互方面的新进展。文章详细阐述了可定制的 <select> 元素、纯 CSS 实现的轮播图（Carousel）以及滚动状态查询等功能，并探讨了 CSS 中引入 if() 语句、@function 函数和 sibling-index()/sibling-count() 等逻辑处理工具，这些新特性将大大提升 CSS 的开发体验和应用能力。作者还展望了锚定容器查询（Anchored Container Queries）、嵌套视图过渡组（Nested View Transition Groups）以及文本框修剪（Text Box Trim）等未来特性，强调 CSS 正从单纯的样式语言向构建动态、强大应用的原生工具集转变，开启了一个激动人心的前端新时代。

Smashing Magazine

State, Logic, And Native Power: CSS Wrapped 2025 — Smashing Magazine

CSS Wrapped 2025 is out! We’re entering a world where CSS can increasingly handle logic, state, and complex interactions once reserved for JavaScript. Here is an unpacking of the standout highlights and how they connect to the bigger evolution of modern CSS.

AI 摘要：本文详细介绍了作者如何利用 WebGPU 为个人博客实现下雪背景效果。文章从 WebGPU 的基本概念、与 Metal 等现代图形 API 的对比入手，逐步深入到 Metal 的基础知识，再结合 WebGPU 的实际应用，例如 Bind Group 和 Compute Shader，展示了如何高效地绘制雪花粒子并计算其运动。为了进一步提升性能，作者还分享了如何将渲染逻辑转移到 Web Worker 中的 OffscreenCanvas 进行，确保动画流畅不卡顿。文末展望了 WebGPU 在未来前端动画和机器学习领域的应用潜力。

cyandev.app

WebGPU 开发初体验。

From smartwatches to VR, Google Sans Flex intelligently adapts to any display. ⌚️✨

Our typeface gives you granular control over weight, width, and optical size. Plus, it’s now open-source! Ready to build clearer, more beautiful experiences?

Read more → bit.ly/4s1zYgW

Google Design

Google Sans: Evolving Google’s Typeface - Google Design

Discover the inside story of Google Sans, Google’s iconic brand typeface. From product lockups to code, learn how the Google Sans font family has evolved to solve specific UX design problems.