本周刊更新时间期望是在每周天,网站在建设中……
目前推荐使用 Folo 订阅本周刊的 Quaily RSS。
公众号 前端周周谈 FE Bits,点击阅读原文链接可查看原文。
QQ 讨论小群 598022684,日常讨论前端技术 & 生活,也可在群里投稿自己的文章,随意加入,比较偏向粉丝群的性质~
本周刊同时也开源在 fe-bits-weekly,欢迎关注。
今天是 2025 年 9 月 28 日,星期天,快到国庆假期了呢。下周假期,周刊停更一期!
决定还是给周刊写个网站,争取在十一假期里把周刊网站整出来~
# 生态与社区动态
Chrome DevTools (MCP) for your AI agent:Chrome 推出 MCP 服务,将 DevTools 能力赋能 AI 编程助手,实现实时调试和性能分析。GitHub 地址
NuxtUI Pro 现在也开源免费了。Nuxt UI v4:Nuxt UI v4 正式发布,统一了 Nuxt UI 与 Nuxt UI Pro,提供 110+ 组件、12 模板及完整 Figma Kit。开源地址
Announcing Cloudflare Email Service’s private beta:Cloudflare 推出 Email Service 私有测试版,提供集成的邮件发送与路由功能,简化开发者应用中的邮件处理。
Cloudflare 推出了基于 worker 的邮件发送能力,这样真的一站式搞定了自定义域名邮箱的收发。任何人都可以简单快速的搞定自己的域名邮箱(尤其是独立开发者们)
而且还可以导入外部库,让邮件样式更加美化,这哪还需要啥 resend 啊
Source
Our plan for a more secure npm supply chain:GitHub 公布强化 npm 供应链安全的路线图,聚焦身份认证、发布机制与社区协作,以应对近期攻击事件。包括本地发布强制启用双因素认证(2FA)、具有七天有限生命周期的细粒度令牌和 Trusted publishing。
Webflow Donates $150,000 to Support Astro's Open Source Mission:Webflow 成为 Astro 最新官方赞助商,捐赠 15 万美元并宣布采用 Astro 驱动其 AI 应用生成能力。
# 文章与视频
Your Images Are (Probably) Oversized:一篇深入探讨网页前端中图片加载与优化的文章,重点揭示开发者常见的 “图片过大” 问题,并提供
srcset
与sizes
的最佳实践指南。You may be looking for a useSyncExternalStore:当你用
useEffect
+useState
写订阅逻辑时,其实可能应该用useSyncExternalStore
来避免客户端渲染抖动 (jank)。Stop using .reverse().find(): meet findLast():介绍 ES2023 新增的
findLast()
和findLastIndex()
方法,替代繁琐的.reverse().find()
实现更高效的数组反向查找。Animating Elements through framer motion with React.js:一文介绍如何通过 Framer Motion 在 React 中实现丰富动画效果,从基础到进阶实例演示。
The Web’s Most Tolerated Feature - Bocoup:一篇回顾 CSS
zoom
属性从 IE 独有特性到最终进入标准规范的 25 年历程We Keep Reinventing CSS, but Styling Was Never the Problem:文章探讨了前端开发中不断 “重塑” CSS 的现象,并指出问题根源并非 CSS 本身,而是现代前端架构与 CSS 的错位。
Subgrid: how to line up elements to your heart’s content:介绍 CSS Grid 中的 Subgrid 功能以及如何在实际场景中保持元素对齐。
CSS offset and animation-composition for Rotating Menus:讲解如何用 CSS 的
offset
和animation-composition
将菜单项布局在圆形路径上,来高效实现旋转菜单动画。
# CSS 新特性
The Big Gotcha With @starting-style:深入探讨 CSS 新特性 @starting-style 的优势与陷阱,以及如何应对其特有的 specificity 问题。
Integrating CSS Cascade Layers To An Existing Project:本文通过一个真实的 Discord Bot 网站案例,详细展示了如何将 CSS Cascade Layers 集成到已有的杂乱 CSS 项目中。
CSS Typed Arithmetic:文章介绍 CSS 类型化算术(CSS Typed Arithmetic)的概念和规则,强调其核心突破在于允许将带单位的值相除,得到一个可复用的无单位数值。此功能让不同 CSS 数据类型之间可以互相计算与转换,从而实现过去只能依赖 JavaScript 或黑科技技巧的动态布局和交互。借助 Typed Arithmetic 可实现诸如字体大小影响透明度、元素宽度控制颜色或动画路径等操作。
# 趣味项目与工具
NickvanDyke/eslint-plugin-react-you-might-not-need-an-effect:一个 ESLint 插件,用于检测 React 中不必要的
useEffect
,让代码更简洁、更快、更安全。IINA 开源 macOS 播放器最近新增 JavaScript 插件系统,扩展功能性。(这个是我一直在用的播放器)
abinthomasonline/repo2txt:一个可在浏览器运行的工具,将 GitHub 仓库或本地目录转换为格式化文本文件,方便用于 LLM 提示输入。
- Logoipsum: 100 个免费的 SVG 占位符标志。一种在设计中临时添加逼真外观标志的巧妙方法。允许您从 10 个不同的类别中选择,并可以交互式地在本站导航栏中预览所选标志。
FlyCut Caption:一个基于 Whisper 模型与 Transformers.js 的视频字幕生成与编辑工具,支持全流程的智能字幕识别、编辑、预览和导出。Demo
Colf:一个新颖的在线编程挑战,结合 leetcode、code golf 与 AI prompting 的在线挑战平台,看谁用最少 token 完成编程任务。
The Coyier CSS Starter:Chris Coyier 的个人化 CSS Starter,强调实用性、可读性与易用性,并非传统 CSS Reset。
# 生态更新
TanStack Start v1 Release Candidate | TanStack Blog:TanStack Start 发布 v1 候选版(Release Candidate),进入即将稳定的最后阶段。
Middleware in React Router:React Router 7.9.0 稳定支持 middleware 功能,为开发者带来更灵活的请求处理和数据共享能力。
Wasm 3.0 Completed - WebAssembly:Wasm 3.0 正式发布,带来包括 64 位寻址、多内存、GC、类型系统增强、异常处理等在内的重大更新,迈向更强大的跨语言低层平台。
# Refs
JavaScript Weekly Issue 754: September 26, 2025:本期聚焦 AI 代码审查、CLI 工具、前端框架更新以及多个新版本发布。
React Status Issue 445: September 24, 2025:React 生态最新动态,每周精选资讯、框架发布、工具更新与社区新闻。
Frontend Focus Issue 710: September 24, 2025:前端周刊,汇总 CSS、WebAssembly、AI 工具等最新动态与资源分享。
Awesome JavaScript Weekly - Issue 488, Sep 25, 2025:本期涵盖 JavaScript 相关的新工具、库、数据库更新和开发资源推荐。
683: iOS 26 Safari, Material Support on the Web, and Fixing The Button Problem:讨论 Safari iOS 26 新功能、CSS 美学、TypeScript 适用场景与技术栈重构思考。
科技爱好者周刊(第 367 期):Nano Banana 的几个妙用:谷歌最新图像模型 Nano Banana 的应用案例与科技热点合集。