FE Bits Vol.24 | Rolldown 1.0 RC、Anime.js v4.3 自动布局与 Chrome 145 100vw 滚动条感知 | 周刊

本期网址 https://blog.cosine.ren/post/weekly-24
本周刊更新时间期望是在每周天。
推荐订阅本周刊的 RSS。
公众号前端周周谈 FE Bits，点击阅读原文链接可查看原文。
QQ 讨论小群 598022684 / Discord 群
本周刊文章内容同时也开源在 fe-bits-weekly，欢迎关注。

今天是 2026 年 1 月 25 日，星期天。

个人动态

碎碎念

以下是一些碎碎念杂谈：

越用 AI 会越有种「啊他果然取代不了我」的感觉，尤其是他犯蠢的时候。

但是很多时候又很方便确确实实省下来了很多摸鱼时间，又爱又恨的感觉。

也不奇怪很多程序员会排斥 AI 写代码，因为架构上真的很容易犯蠢，写的代码但凡是个代码洁癖都会感觉哎呦还不如自己来写，但是重复性业务工作真的太省劲了。

虽然下沉市场和资本感觉都在 AI 狂欢，但我体感上的话，感觉其实平常程序员的生活是从写代码变成审计划和审代码改代码了，更爽了，写自己的东西更有劲了 x

ai 真的容易堆屎山，我现在每次写完让 opus 4.5 review 一遍 codex review 一遍都差不多了我再看才能好点儿，不过他们自己 review 的效果还是挺好的。

PS: 仅限前端/ Swift 领域，后端我只能通过同事的使用感受推测。

项目更新

github.com

GitHub - yusixian/moe-copy-ai: ✨ 萌萌哒的 AI 网页数据提取助手 ✨

✨ 萌萌哒的 AI 网页数据提取助手 ✨. Contribute to yusixian/moe-copy-ai development by creating an account on GitHub.

https://github.com/yusixian/moe-copy-ai

GitHub - yusixian/moe-copy-ai: ✨ 萌萌哒的 AI 网页数据提取助手 ✨

我很喜欢现在 Moe Copy AI 的内容提取功能～

现在可以直接选中提取推文串进行总结的，准备下个版本改改加一下常用的选择器，现在还是直接选中元素提取出来进行总结。

然后这周 Moe Copy AI 发了 v0.3.0，太感动了终于有大佬 @hakadao 帮忙改了一下最开始 AI 写的一坨的 UI 了，工作量巨大，现在 UI 清爽多了！（#26）

虽然现在还在陆续改，但是我也看不下去之前的了所以直接推了一版（

更新日志 | 下载

博客更新

然后博客更新这边，最近把我们的 Electron 应用配置上了 Mac 端的 TestFlight，用 GitHub Actions 实现自动化构建和上传。踩了不少坑，记录一下整个流程。

用 GitHub Actions 自动化 Electron 上架 MAS（Mac App Store）

然后给 astro-koharu 添加了无后端的编辑功能，只在本地 dev 模式有，还打算加一个无后端管理本地文章的 CMS 功能，灵感来源于上周发的 OS 即 CMS 文章
编辑器使用的是 BlockNote 是好用的，基于 Prosemirror 和 Tiptap。

另外现在可以自动创建不存在的分类映射了，也可以改～

社区动态

Announcing Rolldown 1.0 RC：Rolldown 正式发布 1.0 发布候选版本（RC），作为 Vite 未来的核心打包工具，它在保持 Rollup 兼容性的同时，凭借 Rust 实现了 10-30 倍的速度提升。此 RC 标志着 API 的稳定性。在 1.0 之前不会有任何破坏性改动。
Vercel 公布了 skills.sh，是一个用于查找和共享代理 Skills 的网站，其中 Remotion 也出了 skill，现在只需要使用 Claude Code 即可通过编程方式制作视频！通过 npx skills add remotion-dev/skills。

Using 100vw is now scrollbar-aware：从 Chrome 145 开始，如果根元素（而非 body ）设置了overflow: scroll，则在 vw 的大小中应考虑默认滚动条宽度，解决了长期以来因视口单位导致的网页多余水平滚动问题。该改进同样适用于 vh（对应水平滚动条）以及视口单位的小、大、动态变体（sv*, lv*, dv*）

Anime.js v4.3

Anime.js v4.3 发布，引入强大的自动布局（Auto Layout）动画功能，支持平滑处理复杂的 CSS 布局变换。

这个真的好诶！跨框架造福前端人。

官方提供了文档说明和发布日志，并在 CodePen 上发布了示例集合

找了一个示例如下，太丝滑了：

See the Pen PwzmxwR by juliangarnier (@juliangarnier) on CodePen.

优质文章

不会编程的人能靠 AI 独立开发应用吗？：作者认为，AI 确实大幅降低了“将想法翻译成代码”的技术门槛，但“不会编程”、“靠 AI”和“应用”这些词语的边界远比想象中模糊。在与 AI 协作的过程中，使用者会不自觉地习得编程概念，AI 更多是作为博学但死板的“徒弟”或“翻译官”，帮助有逻辑、有想法的人实现愿景，而非代替思考和定义问题。
Inside Turbopack: Building Faster by Building Less：深入解析 Next.js 的新一代打包工具 Turbopack 如何通过增量计算（Incremental Computation）和细粒度缓存实现极致的开发响应速度。
The Incredible Overcomplexity of the Shadcn Radio Button：探讨了现代前端 UI 框架（如 Shadcn）如何将原本简单的原生单选按钮变得异常复杂，并呼吁回归 CSS 原生开发。
HTTP Archive 2025 Web Almanac | CSS-Tricks：介绍 HTTP Archive 发布的 2025 年度《Web 年鉴》报告，总结了当前 Web 性能、CSS 趋势、可访问性及资源膨胀等核心数据。
The challenges of soft delete：探讨了传统“软删除”模式（如 archived_at 列）带来的长期复杂性，并对比分析了触发器、应用层事件和 WAL 等更优的替代方案。
对于新项目，作者优先推荐基于触发器的方案，因为它部署简单、不引入额外基建，且有效隔离了活跃数据与归档数据。
Rethinking “Pixel Perfect” Web Design — Smashing Magazine：探讨了在多设备、响应式和动态内容的现代 Web 环境下，为何传统的“像素级完美（Pixel Perfect）”观念已不再适用。
localspace：现代化的 localForage 替代方案，提供简单的浏览器存储封装。
Overscroll Effects On Nested Scrollers In All Browsers：Chrome 145 现已支持嵌套滚动容器的过度滚动效果（Overscroll Effects），实现了全浏览器体验的一致性。此前该效果仅在根页面有效，且只有 Safari 和 Firefox 支持子容器的回弹。
How to animate SVG with CSS: Tutorial with examples：这篇教程详细介绍了如何利用 CSS 属性和关键帧动画为 SVG（Scalable Vector Graphics，可缩放矢量图形）添加动态效果，从基础嵌入到复杂的路径动画均有涵盖。

新特性

Follow-the-leader pattern with CSS anchor positioning：介绍如何利用 CSS 锚点定位（CSS Anchor Positioning）实现元素跟随交互目标移动的“随动”（Follow-the-leader）模式。

工具

darula-hpp/shimmer-from-structure：一个能够根据 React 组件实际 DOM 结构自动生成像素级精确骨架屏（Shimmer Skeleton）的工具库。
Better SVG：用于编辑带有实时预览功能的 SVG 文件的 VS Code 扩展程序，包含许多实用功能，例如实时预览、颜色选择器、缩放/平移控件、可编辑的配色方案 currentColor 值、深色背景切换以及 SVGO 集成，一键优化 svg 体积。

趣站与 Codepen 精选

使用 CSS 中的 drop-shadow() 滤镜为不规则形状添加阴影

wad-platform-prod.pages.dev

Adding shadows to irregular shapes in CSS with filter: drop-shadow()

Using box-shadow you can add shadows to any rectangular HTML element. But you can also use filter: drop-shadow() to add shadows to irregular shaped images.

https://www.wearedevelopers.com/en/magazine/675/adding-shadows-to-irregular-shapes-in-css-with-filter-drop-shadow-675