本周刊更新时间期望是在每周天，网站在建设中……
目前推荐使用 Folo 订阅本周刊的 Quaily RSS。
公众号 前端周周谈 FE Bits，点击阅读原文链接可查看原文。
QQ 讨论小群 598022684，日常讨论前端技术 & 生活，也可在群里投稿自己的文章，随意加入，比较偏向粉丝群的性质～
本周刊同时也开源在 fe-bits-weekly，欢迎关注。
今天是 2025 年 9 月 22 日，星期一。上周真是忙的晕头转向，所以推迟到今天才更新。
上周五请了假去上海，逛了上海海洋水族馆。
周六参加了 pycon 见了偶像 Manjusaka，值了，晚上航班还延误了，从晚上 8 点一直到凌晨 4 点才到家，好惨啊。
《不要用 Next.js.webp》
生态与社区动态
- 深入了解 Cloudflare 2025 年 9 月 12 日的仪表板和 API 中断情况： React
useEffect使用不当导致 Cloudflare 仪表盘宕机的案例，提醒开发者谨慎处理副作用。
文中详细回顾了 Cloudflare 宕机事件。事故由前端 React useEffect 依赖配置错误引发，高频 API 调用叠加了服务端更新，造成雪崩式过载。Cloudflare 分享了事故时间线、恢复措施以及未来的改进方向，包括自动化回滚、容量管理、请求重试控制和可观测性提升等关键经验。
也算是前端界的大 bug 了（乐）
NPM 生态系统出现极具破坏性的蠕虫病毒，以沙丘中的虚拟生物沙虫命名，能够自动感染其他 NPM 包。 沙虫病毒的工作方式是当感染开发者设备后，会自动搜寻各种凭据包括 NPM 凭据，然后自动篡改这名开发者有权限操作的包并加入蠕虫，目前已经有超过 178 个软件包被感染。
-
Meet the GitHub MCP Registry: The fastest way to discover MCP Servers：GitHub 推出官方 MCP Registry，统一入口快速发现和使用 MCP servers。
-
New in Chrome 140：Chrome 140 更新了
ToggleEvent的新属性source用于追踪触发元素，允许在 CSScontent的 alt 文本中使用counter()和counters()提升无障碍体验，以及在@font-face规则中支持font-variation-settings描述符，用于更精细的字体调整。这些改进提升了开发者调试、无障碍支持和排版控制的能力。 -
Help Us Raise $200k to Free JavaScript from Oracle | Deno：Deno 发起众筹，请求社区支持诉讼，挑战 Oracle 对 “JavaScript” 商标的垄断，使其回归公共领域。
-
Safari 26 更新可独立安装，无需整个 macOS 更新。
你知道吗？在 macOS 上，您只需更新到 Safari 26，同时仍可保持在 macOS 15 Sequoia 或甚至 macOS 14 Sonoma 上。 前往 > 系统设置 > 通用 > 软件更新。在“也可用”下，您会找到 Safari。点击“立即更新”。
Did you know that on macOS, you can update just to Safari 26, while remaining on macOS 15 Sequoia or even macOS 14 Sonoma? Go to > System Settings > General > Software Update. Under “Also Available” you’ll find Safari listed. Click “Update Now”.
-
Browserslist 已支持 Baseline 功能匹配
-
Interop 2026 特性征集，鼓励开发者提出统一实现的标准 (Propose a feature)
-
Chromium 新增
ariaNotify()方法，便于辅助技术信息传递。
文章与视频
-
You Don’t Need Animations：讨论动画的使用场景与设计原则，强调合理使用而非泛滥。
-
Apple has a private CSS property to add Liquid Glass effects to web content：作者在研究 WebKit 更新日志时发现 Apple 正在引入一个私有 CSS 属性
-apple-visual-effect，它可以让 Web 内容利用 Liquid Glass 效果。虽然该功能目前既不能在 Safari 上使用，也无法通过常规 WKWebView 使用，除非启用私有设置useSystemAppearance，因此开发者不能直接用于 App Store 应用。但这一变化揭示：Apple 自己已经在内部使用该功能，说明 webview 在系统应用中的整合比用户意识到的更深入，印证了所谓 “The Toupée Theory of In-App Webviews” —— 好的 webview 被无感知地使用，坏的才被用户注意。 -
谈谈 AI 编程工具的进化与 Vibe Coding：这篇文章讲的观念我很认可，Vibe Coding 并不是一个好名字，更愿意把基于 AI 辅助编程的方式称之为 Context Coding 即上下文编程。
-
面向现实世界的中低端移动设备（2025 年）：探讨 2025 年真实低端与中端手机在 Web 性能测试中的选机建议与方法论。
-
Oh no, not again… a meditation on NPM supply chain attacks：关于 NPM 软件供应链攻击现状与历史的反思。
-
How to keep package.json under control：探讨在复杂 React 应用中如何管理和精简
package.json依赖，提出一系列依赖治理方法与工具。 -
Fetch streams are great, but not for measuring upload/download progress：探讨
fetchAPI 的流式上传/下载支持及其局限性，尤其是不适合用来测量进度。 -
Replace Your Animated GIFs with SVGs：深入介绍如何用 SVG 动画替代传统 GIF，实现更小文件体积与更高可扩展性
-
While you’re fixing the fun stuff, fix the important stuff too：在修复有趣的小问题时，不妨顺手解决更重要的底层问题。
CSS 新特性
-
你需要知道的现代 CSS（2025 版）：本文梳理了 2025 年现代 CSS 的最新进展，包括动画到
auto、@function、if()、text-wrap、linear()easing、shape()、增强的attr()、reading-flow等特性。这些新功能大多提升了样式抽象能力、响应式设计的灵活性和排版的可控性，同时展现了 Chrome 为主、Safari/Firefox 跟进的支持现状，并给出 Polyfill 和渐进增强的可行性建议。 -
又一个 JS 交互被干掉了：如何实现导航菜单匹配？关于 scroll-target-group 属性与
伪类：介绍如何用纯 CSS 的 scroll-target-group 与 实现滚动导航联动，无需额外 JS。之前看到了不少英文博文解析，中文的可算有张鑫旭大佬的了。
趣味项目与工具
-
linear() easing generator：可以将 JavaScript 或 SVG 中的缓动函数 (easing function) 转换为 CSS
linear()格式，从而在无需 JavaScript 的情况下实现复杂的动画效果，例如 bounce、spring、elastic 等。是从上文「使用 CSS linear()函数实现更逼真的物理动画效果 」中看到的工具。
-
bahdotsh/wrkflw: Validate and Run GitHub Actions locally：一款本地运行和验证 GitHub Actions 的命令行工具。
-
cchanxzy/react-currency-input-field: React component for an input field：一个轻量级 React 货币输入组件，支持多种格式化与国际化配置。
-
webpro-nl/knip：一个帮助 JavaScript / TypeScript 项目检测未使用文件、依赖和导出的分析工具，是在上面的文章中看到的。
-
WisPaper 是复旦大学研发的免费学术智能助手，面向科研人员，整合了 AI 学术搜索、本地文献管理、精准翻译、智能对话和核心总结等功能，帮助研究者快速检索全球高质量文献，突破语言障碍，提炼摘要要点，大幅提高科研效率。（从小众软件处看到的）
-
史上最简单，在线 FFmpeg！浏览器直接用 + AI 懂人话，不用下载、不用命令行：一款通过浏览器即可使用的 FFmpeg 工具，支持自然语言操作和本地处理。在线地址：https://vidmix.app/ffmpeg-in-plain-english/
-
Volume: A 3D OKLCH Color Palette Creator：3D 色彩选择工具，将配色体验转化为空间化探索。
- Gallery Button：超酷的纯 CSS 相册预览动画，具备折叠展开的纸张效果。
- [WebGL] Refraction cursor over video：基于 shader 实现类似液态玻璃的折射光标效果
生态更新
-
pnpm 10.16 新增 minimumReleaseAge 设置，延迟依赖安装，避免第一时间安装可能受攻击的版本，允许通过 minimumReleaseAgeExclude 针对特定包（如 webpack）排除该限制，始终获取最新版本。近期流行包被攻击事件频发，pnpm 借此降低恶意版本扩散风险。
-
Lynx 3.4 正式发布：带来 HarmonyOS 支持、新开发者工具、输入组件与动画增强等多项更新。
-
WebKit Features in Safari 26.0：Safari 26.0 带来 Safari 26.0 增加了 75 项新功能、3 项弃用和 171 项其他改进，涵盖 CSS、WebGPU、Digital Credentials API、visionOS 沉浸式媒体、SwiftUI 集成等。
-
Node.js v24.8.0 Release：Node.js 发布 v24.8.0（Current）版本，带来重要功能更新与修复。
- 引入了对 HTTP/2 网络调用在 Chrome DevTools 的调试支持。
- 对 crypto 模块新增了多项 Web Cryptography 算法（如 Ed448、ML-DSA、KMAC、Argon2、SLH-DSA 等）
- 为 worker 添加 cpu profile API。
Refs
- React Status Issue 444: September 17, 2025：本期涵盖 React 社区动态、依赖管理最佳实践、AI 代码审查工具、前端新版本发布与 JavaScript 生态最新进展。
- Node Weekly Issue 593: September 16, 2025：本期聚焦 Node.js 与生态更新，包括包管理安全、Electron 与 QUIC 进展、新书与教程推荐，以及工具与社区动态。
- Frontend Focus Issue 709: September 17, 2025：前端领域的最新动态、技术文章与工具资源合集。
- Web Weekly #168：一周前端与 Web 技术动态，涵盖 CSS、可访问性、浏览器新特性以及工具推荐。
- CodePen Spark：一份 CodePen 精选，涵盖 CSS 动画、WebGL 效果、前端新 API 与开发实践分享的周刊内容。
喜欢的话，留下你的评论吧～