本周刊更新时间期望是在每周天，网站在建设中……
目前推荐使用 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 安全还有高手：实时更新：Shai-Hulud，史上最危险的 NPM 安全漏洞，影响 CrowdStrike 和数百个流行软件包
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 属性与 :target-current 伪类：介绍如何用纯 CSS 的 scroll-target-group 与 :target-current 实现滚动导航联动，无需额外 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 与开发实践分享的周刊内容。
