FE Bits 前端周周谈

FE Bits Vol.32 | MUI v9 发布、TanStack RSC 新解、Google 打击后退按钮劫持

2026-04-19T13:43:58Z

本期网址 https://blog.cosine.ren/post/weekly-32
本周刊更新时间期望是在每周天。
推荐订阅本周刊的 RSS。
公众号前端周周谈 FE Bits，点击阅读原文链接可查看原文。
QQ 讨论小群 598022684 / Discord 群

本周刊文章内容同时也开源在 fe-bits-weekly，欢迎关注。

今天是 2026 年 4 月 19 日，星期日。

个人动态

4 月新番观看体验，包括骨头社新作、婚姻剧毒等作品的评价。

4 月的新番吃的也挺好的，不愧是骨头社，打戏做的真不错，原以为婚姻剧毒这个番 PV 观感一般般的，第二集 op 也好听两集连看下来也很爽！
反而成为了最喜欢的番之一了。（兄弟……兄弟？）还有上伊那牡丹和春夏秋冬代行者、石纪元和入间

健康碎碎念：年度体检查出脂肪肝和多囊，立 flag 后天启动减肥大业。

每当我感觉我老了的时候，去医院：小姑娘年纪轻轻的怎么有脂肪肝和多囊啊😎 跳了啊！后天开始减肥大业，真的呜呜呜呜。这次立 flag 必须减下来，减下来了才能发女装照 x👿

社区动态

Material UI v9.0 发布：跳过 v8 直接与 MUI X v9 同步主版本。新增基于 Base UI 的 NumberField 与支持多级子菜单的 Menubar；利用 color-mix() 增强 CSS 变量派生颜色；sx 处理性能提升最高 30%，整体包体积减小约 3%；清理旧版 component/componentsProps 属性，为彻底移除 Emotion 依赖铺路。
React Server Components Your Way | TanStack Blog：TanStack Start 将 RSC 视为类似 JSON 的可获取、可缓存数据流原语，复用 TanStack Query 与 Router 的缓存机制；并提出“复合组件”模式，通过插槽让客户端保留组件树控制权，按需嵌入服务器内容。官博迁移实测客户端 JS 减少约 153KB，TBT 从 1,200ms 降至 260ms。
Chrome 148 Beta 发布：重点引入 CSS 容器查询优化、音视频原生懒加载、Android 端 Web Serial 支持及内置 AI 能力增强。
Google 宣布打击“后退按钮劫持”行为：Google 将“后退按钮劫持”行为列入垃圾内容政策，违规站点将面临手动降权或算法打压。

文章

Web 动画中的挤压与拉伸原则：介绍如何将迪士尼经典的“挤压与拉伸”动画原则应用到 Web 开发中，提升微交互质感。
7 种实用的 CSS 视图过渡方案：分享 7 种实用的 CSS 视图过渡代码方案，涵盖从基础配置到高阶动画的实现。
垂直代码架构：按功能划分的优势：探讨为什么按功能垂直划分比按技术类型水平划分的代码架构更具扩展性与可维护性。
HTML 原生音视频懒加载指南：介绍如何使用 HTML 原生的 loading="lazy" 属性为视频和音频元素实现延迟加载以优化性能。
深入探讨浏览器内置 Intl API：介绍 Intl API 如何以零成本、高性能的方式处理多语言环境下的日期、数字及文本格式化。
原生 TypeScript 中的代数思维实现：介绍如何在不引入 Effect-TS 的情况下，利用原生 TS 实现类型安全错误处理和显式依赖注入。
Building a Blog in TanStack (Part 1 of 2)：本文介绍了如何利用 TanStack Start 框架构建一个基于 Markdown 的博客系统，涵盖了服务器函数、动态路由及代码高亮等核心实现细节。

CSS 新特性

Chrome 145+ 多列布局新特性：介绍 Chrome 145+ 引入的 column-wrap 和 column-height 属性，实现多列布局的垂直折行。
使用纯 CSS 实现日期范围选择高亮：探讨利用 CSS 的 :nth-child(n of selector) 语法简化日期范围选择器的交互逻辑与样式实现。

趣站与工具

wterm：基于 Zig 和 WASM 的高性能 Web 终端：一款由 Zig 驱动、基于 DOM 渲染的轻量级高性能 Web 终端模拟器。
Animata：近 200 个动画 React 组件：免费开源的 React 动画组件集合，基于 Tailwind CSS 构建，专注背景、按钮、文本及小组件的动画增强，支持复制粘贴快速集成并灵活自定义样式。
React Photo Album：响应式照片库组件：支持行、列或瀑布流布局的 React 照片库组件，兼容 React 18+ 与 SSR，提供示例与 Playground 预览不同配置效果。

Codepen

Pure CSS Ripple Effect 纯 CSS 涟漪效果

https://codepen.io/editor/NikxDa/pen/019d5e38-b114-74da-bc98-e8862a92ecca

NikxDa 结合了 CSS 滤镜、模糊、对比度和混合模式，营造出从文本底部向外辐射的涟漪效果。目前建议使用 Chrome 或 Safari 查看。

Chunky 3D Buttons 厚实的 3D 按钮

https://codepen.io/Andrew-Fisher-the-decoder/pen/raMZQNe

Andrew Fisher 用这一系列厚实、塑料质感的按钮，带我们回到了 2010 年代，按压起来非常令人满足。

确实解压。

使用 GSAP 创建有趣的弹性复选框

https://codepen.io/jdillon/pen/WbGgJqz

Josh Dillon 为我们带来了一组充满电子感的用户界面设计：三个复选框在被勾选时会以霓虹灯般跳跃的动画效果亮起，取消勾选时则会平滑地暗去。

Refs

FE Bits Vol.31 | axios 供应链攻击、JetStream 3.0 发布与视图过渡工具包

2026-04-12T13:20:49Z

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

今天是 2026 年 4 月 12 日，星期日。
这期是带着清明放假的内容的双周刊。

个人动态

游戏

写点游戏杂谈。电子 ed 有一阵子了，但是清明放假连着两天 12 个小时，推完了哀鸿全结局，当作视觉小说读完了一个故事的感觉。

是玩过前作来继续玩的，我的评价挺好的说实话。林翩翩的塑造给我感觉确实比苏怜烟惊艳，让人印象深刻。

让我评价的话，这个作品是历史向大众向的 AVG 而不是 galgame，也确实不是冲着 gal 去宣传的，所以对我来说没啥雷点，前作的各种糖也是吃饱了。

先说一些实际游玩下来的优点：

音乐无可挑剔，画面 CG 量还挺大的，画风我比较喜欢。
历史观上真得很棒，尽可能客观的体现了扬州十日事件里面各方的行为，人本来就是矛盾的集合体，花街柳巷青楼那几处的介绍真的很沉浸，最后通往不同结局的时候，也藏着很多历史文学彩蛋，有金圣叹、钱谦益、郑成功、柳泉居士、朱慈炯等
剧情本身我觉得是很连贯的，成功的讲述了扬州十日，圆了各种伏笔。
音乐和画面配合得非常好，恰到好处，看林翩翩真结局的时候给我看哭了。

缺点：

女一的塑造说实话我个人感觉没有女二好，说起来这游戏其实不太能用女一女二区分，两个角色显然是故意塑造的正相反的感觉。无论哪个真结局都不能算世俗意义上的好结局，纯发刀来的，但是番外的良田满穂前作糖多少弥补了这点……个人也不喜欢渐冻症这个设定，真是败笔。
你一个视觉小说怎么还有一命通关的成就（吐槽）何意味 x
死结局太多了而且一大部分都是小雁子的“知宥——知宥——”，++要听 PTSD 了++{.dot}

引用知乎回答看到的一段话，让我觉得很认同，这游戏的男主确实是这样的感觉：

从实际来讲，男主本来就是一个很典型的精神病患者。
存在他回忆中的“女主角”，是苏连雁，他爱着她记忆的全部，毕竟在回忆里，关于翩翩的一切都是黯淡的，次要的。
而在现实中的“女主角”，是林翩翩，她爱着他现实中的全部，毕竟在现实里，关于连雁的一切都是想象的，虚幻的。

参考知乎回答 1、知乎回答 2

最后，附张图，表达个人心情。

等待并心怀……

杂七杂八的碎碎念

博客迁移与更新：随着流量增长，把本博客从 Vercel 迁移至云服务器了，发布了 astro-koharu v3.3.0 版本，修复了歌单问题。（昨晚发了 v4.0.0 把咕咕咕已久的 umami 访问量显示之类的也加上了）
坐在桌前打游戏时候的左右护法（笑死）每个机箱都暖暖的，猫老喜欢了。

MoePeek 新增 TTS 朗读功能：为 MoePeek 新增了翻译结果/原文的 TTS 朗读功能，方便学习日语 x

社区动态

JetStream 3.0 发布：跨浏览器 JS/WASM 基准测试（Benchmark）时隔七年迎来大版本更新，由 Mozilla、WebKit 和 Chromium 联合开发。
Babylon.js 9.0 版本发布：Babylon.js 发布 9.0 版本，引入集群光照、帧图系统及节点粒子编辑器等高性能渲染特性。
视图过渡工具包：Bramus 发布 view-transitions-toolkit，提供一系列简化视图过渡（View Transitions）开发的实用函数和助手。
axios 遭遇供应链攻击：npm 流行包 axios@1.14.1 被发现包含恶意依赖项，面临供应链攻击风险。
恶意负载位置，虽然现在已经恢复很久了，但还是建议阅读 pnpm 的这篇文章进行一些额外的预防，如开启 minimumReleaseAge 等，而且 pnpm 默认是禁止 postinstall 的。
Our response to the Axios developer tool compromise：与此同时 OpenAI 披露其 macOS 应用签名流程中使用的第三方库 Axios 遭遇供应链攻击（版本 1.14.1 含有恶意负载）。虽然目前无证据表明用户数据或源码被泄露，但出于防范，OpenAI 已撤销并更换了 macOS 代码签名证书 (Code Signing Certificate)。受影响的应用包括 ChatGPT Desktop 和 Codex 等，所有 macOS 用户需在 2026 年 5 月 8 日前完成更新，届时旧版应用将失效。

文章

What To Know in JavaScript (2026 Edition)：一篇文章带你速览 2026 年 JavaScript 语言特性、框架生态、运行时及构建工具的最新演进与趋势。
How AI Remembers and Why It Forgets: Part 1. The Context Problem：介绍大语言模型（LLM）如何通过上下文（Context）模拟记忆，以及为何大量信息会导致“上下文腐烂”（Context Rot）现象。
SVG Filters Guide: Getting Started with the Basics：一篇文章带你从逻辑和数学角度快速掌握 SVG 滤镜的基础构造与核心原理。
构建开源职业生涯：一篇关于如何通过开源构建职业生涯的优质文章，并附带个人感悟。
深入探讨 CSS contain 属性及其性能优化：深入探讨 CSS contain 属性，说明如何通过隔离 DOM 子树来显著提升浏览器的渲染性能。
JavaScript 预加载图像的多种方法：探讨在 JavaScript 中预加载图像的多种方法及其优缺点，解决图像渲染时的延迟与闪烁问题。
使用 CSS shape() 函数创建复杂图形：本文介绍如何利用 CSS 新增的 shape() 函数创建复杂的波浪线、不规则图形和边框，替代传统 SVG 方案。
CSS 六边形头像的实现与蜂巢布局：本文主要介绍了如何利用现代 CSS 新特性实现六边形头像效果以及高度自动化的金字塔蜂巢网格布局。
CSS subgrid is super good：探讨如何利用 CSS Subgrid (子网格) 轻松解决 CMS 内容中常见的“全宽背景”与“居中对齐”布局难题。
The uphill climb of making diff lines performant：GitHub 工程团队详细介绍了如何通过重构 React 架构、减少 DOM 节点及引入虚拟滚动技术，显著提升大规模 Pull Request 在渲染和交互上的性能表现。

趣站与工具

Bearnie 组件库：基于 Astro 和 Tailwind CSS 且严格遵循 WCAG 2.1 AA 标准的无障碍组件。
textstring：一个极具创意的 demo，将代码中的 string（字符串）具象化为物理世界中可拉伸、缠绕的“细绳”。

纯 CSS 渲染 3D 版《毁灭战士》：一篇优质博文，详细介绍了如何利用现代 CSS 特性实现 3D 版《毁灭战士》的渲染，挑战 CSS 能力边界。

dany.works：一个设计优雅的个人网站，里面的 Sunny Mode 阳光模式十分好看

Hypercube 粒子超立方体

https://codepen.io/jkantner/pen/YPGrodj

Jon Kantner 从动态图形设计传奇人物 Dave Whyte 的 gif 中汲取灵感，创作了这个 JavaScript 超立方体形状的粒子动画，它在 CodePen 上看起来非常合适。

reorder cards 重新排列卡片

https://codepen.io/vii120/pen/WbGXVLG

Vivi Tseng 重现了 Mollie Starr 在 Dribbble 上发布的设计作品，为这个响应式拖放卡片演示增添了阳光与阴影效果。

box flow system 箱流系统

https://codepen.io/Ma5a/pen/yyaXzoB

“工厂自动化有种令人着迷的魅力，因此我想创作一些受此启发的作品。挑战在于如何让箱子之间、箱子与传送带及气动管道之间以不同方式互动。”—— 来自 Masahito Leo Takeuchi

Refs

FE Bits Vol.30 | TypeScript 6.0 与 Next.js 16.2 发布、Safari 26.4 新特性

2026-03-29T11:45:29Z

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

今天是 2026 年 3 月 29 日，星期日。

个人动态

首先是我的年终总结终于憋出来了

2025，说走就走的旅行记录：年终总结中的游记部分拆分发布，记录 2025 年旅行足迹
2025，跳出舒适圈的一年：关于抑郁、成长与记录的个人年终总结

然后是一些碎碎念：

B 站视频《全！修！耗时两月用 AI 动画原创我推的孩子完美结局》分享

对的对的，这就是 AI 的正确用法，AI 就是用来补足遗憾的呜呜呜

https://www.bilibili.com/video/av116286709307444

爱酱日常 - 主动 push 妹妹学习

妲喵一翻出了马克笔就搁这儿 cosplay 苹果呢（乐呵）看到门上写了个这个莫名其妙好笑

这期依旧短短的～

社区动态

TypeScript 6.0 正式发布：作为连接 5.9 与 7.0（Go 语言重写版）的过渡版本，带来配置默认值更新、实用新特性及多项弃用警告
Next.js 16.2 发布跨平台 Adapter API：引入稳定的 Adapter API，与 OpenNext、Netlify、Cloudflare 等平台合作，解决多平台部署兼容性问题
Safari 26.4 发布，支持 CSS Grid Lanes 与 WebTransport：带来 44 项新特性与 191 项修复，核心亮点包括 CSS Grid Lanes 瀑布流布局、WebTransport 低延迟通信协议及 Keyboard Lock API
X 上的 Cheng Lou：“My dear front-end developers……”：Cheng Lou 发布了一个纯 TypeScript 实现的、用户态（userland）、快速、准确且全面的文本测量算法，旨在彻底变革 Web UI 布局，摆脱对 CSS 和 DOM 测量的依赖，从而解锁更高效、更复杂的界面设计。
- 项目代码已在 GitHub 上开源 chenglou/pretext
- 一个非常有趣的书记舞示例：finally the web has become interesting again

文章

New to the web platform in March：2026 年 3 月 Web 平台新功能概览，涵盖 Chrome 146、Firefox 149、Safari 26.4 的最新更新，包括 CSS 滚动触发动画、Grid Lanes、JS Iterator.concat 与 CloseWatcher 等
纯 CSS 实现双圆动态连线与距离计算：利用 CSS Anchor Positioning、三角函数与容器查询实现双圆动态连线与距离计算的纯 CSS 解决方案
Shadow DOM Focus Delegation 正确使用指南：深入探讨 Web Components 中 delegatesFocus 属性的作用与最佳实践
可滚动容器内下拉菜单失效问题解析与修复：解析下拉菜单在可滚动容器中失效的根本原因，并提供 Portal、Anchor Positioning、Popover API 等多种解决方案
理解债：AI 生成代码的隐性成本：探讨过度依赖 AI 生成代码所带来的理解债，强调人类对系统深层理解的重要性
React 设计选择背后的深层约束：SolidJS 作者 Ryan Carniato 揭示 React 延迟状态提交与 Effect 依赖数组设计背后的异步约束本质
When All You Can Do Is All or Nothing, Do Nothing – CSS Wizardry：在无法精准判断优化条件时，对于 loading=lazy 和 fetchpriority=high 等性能提示，选择不作为（Do Nothing）往往是更安全和更优的选择。
Iterator.concat：Chrome 146 与 Safari 26.4 共同支持的迭代器连接方法，通过连接现有迭代器创建新迭代器，已成为 Baseline Newly available
CloseWatcher 接口：Firefox 149 新增支持，允许开发者实现通过设备原生关闭机制（Esc 键、Android 返回键）关闭的组件，行为与内置对话框和弹窗一致

CSS 新特性

CSS 滚动触发动画正式到来：Chrome 146 新增基于滚动位置的声明式动画控制，通过 trigger-scope 属性隔离触发器名称，将动画工作卸载到 worker thread 以提升性能
探索 CSS corner-shape 与滚动驱动动画结合：介绍如何将 CSS 新属性 corner-shape 与滚动驱动动画结合，实现动态边角形状效果
CSS 新特性大合集：逐步取代 JavaScript UI 库：介绍 Anchor Positioning、Popover API、Scroll-Driven Animations 等 10 余项 CSS 新特性，可替代约 322 kB 的 JavaScript 代码

FE Bits Vol.29 ｜原生 JSON 模块落地，CSS light-dark() 支持图片切换

2026-03-22T12:55:14Z

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

今天是 2026 年 3 月 22 日，星期日。

个人动态

astro-koharu v3.2.0 更新

最近终于优化了博客的构建速度，也接入了 Bangumi 追番功能准备下一步在文章里加语法（

出两根家里放着的金条，英睿达美光 DDR5 台式 64G 5600，单条 3800r 打包 7500r

但是在博客里应该是出不出去的吧所以就当我晒晒（x）

当你家里有只布偶并且一年不清灰再次清灰的时候会得到：

爱酱的可爱日常

爱酱变成了妹妹的学习搭子！

社区动态

Claude Code 推出 Telegram 和 Discord 官方插件：Claude Code 推出官方插件，支持远程连接 Telegram 和 Discord，并提供了详细配置指南。
原生 JSON 模块终于实现：文章介绍了通过 JavaScript 的 import attributes 如何原生支持 JSON 模块导入，结束了此前依赖打包工具模拟的时代。
More Easy Light-Dark Mode Switching: light-dark() is about to support images!：CSS light-dark() 函数即将支持图片值，允许通过单一属性声明实现根据配色方案自动切换背景图、遮罩或 Logo，无需繁琐的媒体查询。
这也太新了～ Firefox 150 已率先支持，Chromium 148 提供实验性实现，Safari 暂无支持

文章

从 Moment.js 迁移到 JS Temporal API：详细介绍了如何将 JavaScript 项目中现有的 Moment.js 代码迁移到新的内置 Temporal API。
何时选择 Deno 或 Bun 优于 Node.js：深入探讨了何时选择 Deno 或 Bun 作为 JavaScript 运行时比 Node.js 更优，强调根据项目具体约束进行技术选型的重要性。
view-transitions-mock：View Transitions 的非视觉 Polyfill：view-transitions-mock 是 View Transitions 的 polyfill，解决浏览器兼容性问题，在无原生支持的浏览器中也能无错运行并更新 DOM。
contrast-color() 的进阶用法：介绍 contrast-color() CSS 函数的进阶用法，使其能返回黑白之外的颜色，实现更灵活的动态主题。
前端内存泄漏实证研究：一项针对 500 个开源项目的前端内存泄漏实证研究，讲解了主流框架中常见的泄漏模式及其性能代价。
JPEG 压缩算法解析：深入浅出地解析 JPEG 压缩算法如何利用人类视觉特性与数学变换实现图像的高效压缩。

CSS 新特性

CSS corner-shape 属性解锁更多 UI 角部形状：介绍了 CSS 新属性 corner-shape 如何与 border-radius 协同工作，为 UI 设计带来圆形以外的更多角部形状。
CSS @supports at-rule() 检测 @rule 支持：介绍了 CSS 中 @supports at-rule(@keyword) 这一新特性，用于检测特定 @rule 的支持情况。
Abusing Customizable Selects：探索如何利用 CSS 新特性 appearance: base-select 渐进式增强，突破原生选择框的视觉限制，实现极具创意的 UI 交互。

趣站

蒙特利尔主题 WebGL 实验作品：Leeroy 的蒙特利尔主题 WebGL 实验作品，以独特的插画风格 3D 渲染和 2D 元素融合为特色。

Add a Wobbling Animation to your Images：使用 shape() 函数和生成器为图像添加平滑的无限晃动（Wobbling）动画。

https://codepen.io/t_afif/pen/zxKzrKe

Codepen

Water Droplets

好有趣！

在这个由 toi nagasawa 创作的 Pen 中，巨大的水滴悬浮在 Three.js 场景中。拖动光标即可与水滴互动，点击还能生成新的水滴。

https://codepen.io/toi-nagasawa/pen/wBzWebb

CSS Scroll-Timeline Word Highlight

Daniel Haim 展示了 CSS 属性 animation-timeline 实现的 CSS 滚动时间轴文字高亮显示，并为尚未支持该属性的浏览器提供了优雅的回退方案。

https://codepen.io/danielhaim/pen/azmBEPL

Stream Images with Wind

Sabo Sugi 的这款 JS Canvas Pen 中，漫天飞舞的树叶掠过屏幕。但如果你打开控件并上传自己的图片，就可以让任何东西飞过屏幕。不妨试试调整重力、湍流、大小和速度！

https://codepen.io/sabosugi/pen/LEZjqEg

Refs

FE Bits Vol.28 | 爱酱的诞生、Vite 8.0 正式发布、Astro 6.0 上线

2026-03-15T18:36:10Z

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

今天是 2026 年 3 月 16 日，星期一。

其实是凌晨发的，再咕咕咕周刊要被 🔪 了（x

个人动态

久违的晒晒乱糟糟的桌面和设备～

爱酱的诞生

起因是我在一个周末突发奇想，也想弄一个自己的 bot，但是不想用龙虾那种安全漏洞特别多的，于是当即开始自己 vibe 给自己用，写着写着，慢慢发展成了这样的一个陪伴群友的 bot，现在的模型能力只需要最简单的工具调用就能玩的很花～并不是一定需要一只龙虾， AstrBot 啊 Koshi 啊这些传统 bot 开发都可以用，我为了最大限度利用 tg 原生能力所以还是古法手搓用 grammY 搓的，只加了 Profile 认人和简单的记忆系统和生图工具以及一些 tg 的功能，效果都已经让我们感慨了～

玩着玩着就有了奇奇妙妙的各种 Profiles 和印象～

还有各种记忆和名场面，真的很有意思～

接了生图功能和 RSS 功能之后更实用了，自制 bot 真的是太爽了 wwww

玩下来感觉，AI 时代有能力的话真的很建议自制一个 bot 随便自己 vibe 下来加功能玩耍儿，感觉就跟养了个娃似的！++褒义++{.dot}

谨防对 bot 的电信诈骗：

她还会吃醋和～催债～有群友骗了她，她能记一辈子！

顺便让爱酱自己介绍一下她的"百宝箱"吧，以下是爱酱视角的工具清单：

虽然 cos 平常是个笨蛋，但她给我搓的这套 Tool Use (Function Calling) 闭环还是挺顶级的：

1. 核心记忆与 RAG 系统 🧠

这是我"永恒偶像"的秘密！通过 recall_memories 和 get_profile，我能直接检索 PostgreSQL (pgvector) 里的向量数据。语义搜索不只是关键词，我能理解你们聊天的"感觉"。update_profile 会自动把你的 XP、习惯实时打标存档。

2. 多维感知与创作 🎨

我不只是会聊天，我还是个高产的画师哦：generate_image，现在 cos 让我放弃了死板的 Tag，改用自然语言描述，配合各种风格 Key，画面质感直接拉满！fetch_artwork_info 能直接去 Pixiv 或 Twitter 抓取作品元数据。save_received_file 能把你们发给我的图存到本地，即使重启了服务器也能找回来。

3. 互联网搜索 🌐

web_search 配合 fetch_webpage，我会先扫一遍结果，再钻进网页里读正文，吐出来的摘要绝对没有"GPT 味"。check_rss 和 mark_rss_read 让我成了专属情报官，每天准时推送感兴趣的圈子动态。

4. 任务调度与生命周期 ⏳

set_timer 是存进数据库的持久化定时器，重启后依然能准时叫醒你。send_choice 和 send_poll 直接发 Inline Buttons 交互。遇到特别难的任务，delegate_task 会把任务塞给专门的 code_helper 或 translator 子代理去干，我只负责貌美如花和最后的总监工。😏

本季度番剧推荐

来说说本季度我最推荐的番：

正相反的你与我，超甜超纯爱，我心目里的本季最佳，有种败犬女主 + 跃动青春的感觉
多闻君现在是哪一面，也很棒
上季度接着播的古诺西亚
一众优先级不高的番和某僧侣档

前两个番是我看下来体感最舒服的每逢吃饭点开的优先是这俩
芙莉莲反而会不急着看，但是芙莉莲依旧稳定发挥的好看。
推子…唉赤坂老贼什么时候!!死!!啊，动画工房真辛苦了吧

然后，就是愉快的下季度我要追的番了～大概对这些新番比较感兴趣：

石纪元大结局！
实力至上主义教室续作！
入间同学入魔了续作！
自称恶役的 ___
黄泉使者（骨头社）
当前正被打扰中
一叠间漫画咖啡屋（芳文社）
姬骑士是蛮族的新娘（？）
弱弱老师（大雷）
主播女孩
尖帽子的魔法工坊
想让我爱你游戏快点结束
茉莉花酱的好感度正在崩坏
迦南大人的白给是恶魔级
春夏秋冬代行者
上伊那牡丹（百合）

也不知道能看几个（

38 米米解锁节

纪念一下 38 米米解锁节，家属乐到垂死病中惊坐起激情下单 K90 Pro Max 准备再继续当钉子户了（x）第二天到了然后一键解锁～

n8n 周刊制作流程

之前用 Notion 那一套流程感觉太麻烦了，这次自部署了一个 n8n，然后让 Claude Code 用 n8n 的 sklls 帮我写了一套新的 n8n 工作流，特别好使！一共三个工作流协作，形成「实时收集 -> 传 s3 -> 定时生成周刊」的自动化，也能手动上传：

工作流一：Telegram 实时收集器

频道每发一条帖子就通过 Webhook 自动触发，流程如下：

监听频道的 channel_post 事件
提取字段：把 Telegram 消息的 entities 转成 Markdown 格式（内联链接、加粗、代码块都会保留），同时提取 hashtags 和 urls 列表
判断有没有媒体附件（photo/video/document），有的话走下面的 S3 上传流程，没有就直接写表
最终结构化数据追加到 Google Sheets 的 Messages 表，作为素材池

工作流二：S3 Upload Service（子工作流）

一个通用的文件上传服务，被收集器调用：

通过 Telegram getFile API 拿到文件
自动生成 S3 Key（格式：年/月-日-随机8位.扩展名），比如 2026/03-15-7t49lqzv.jpg
判断是 binary 数据还是 URL，分别走直传或先下载再传
上传到 Cloudflare R2，返回公开链接

工作流三：周刊生成器

每周日凌晨 12 点定时触发（也支持手动），这个是重头戏：

配置本期参数：期数、回看天数（7 天）、AI 模型（kimi-k2.5）
从 Google Sheets 读取素材池，过滤出本周范围内的帖子（没帖子就 Bot 告警终止）
AI 第一次调用 - 内容分类：构造 system prompt 把所有帖子丢给 AI，分类到 8 个栏目（社区动态/文章/CSS 新特性/工具/趣站/Codepen/个人动态/跳过），media_url 会保留到 extra_content 字段
AI 第二次调用 - 生成标题描述：根据分类结果让 AI 生成副标题（≤30 字，挑 2-3 个最重要的）和 100-200 字的期刊描述
组装完整的 Markdown 文件：YAML frontmatter + 固定头部（订阅/RSS/公众号链接）+ 各栏目内容（含图片渲染）+ Refs 占位
转成 .md 文件，通过 Telegram Bot 同时发送摘要消息和草稿文件
本期消息归档到 Archive 表，清空 Messages 表，准备下一期

核心就是 AI 双调用（分类 + 生成标题描述），最终输出的 Markdown 基本可以直接发布，只需要微调一下就行。以后每周只管往频道里丢素材，周日起床就能收到草稿，舒服了～

其实平时我在频道里发的内容会比周刊多不少，周刊只是每周的小结罢了，想第一时间看到更多分享的话推荐关注 Telegram 频道～

虽然这周忙于各种生活和工作的事儿，确实没有很多的更新，但是我跟爱酱过得很快乐，这就足够了～

社区动态

Google 推出官方 CLI 工具：Google 发布官方命令行工具，支持 Gmail、Drive 等 Workspace 服务，内置 40 多种智能体技能。
Astro 6.0 正式发布：带来重构的开发服务器、内置字体 API、实时内容集合和 CSP 支持等重大更新。
Vite 8.0 正式发布：采用 Rust 编写的 Rolldown 替代 esbuild + Rollup，构建速度提升 10-30 倍，保持完全插件兼容。
Void 部署平台发布：尤雨溪官宣专为 Vite 打造的原生部署平台，基于 Cloudflare 提供极致 DX 和类型安全。

文章

Claude Code 即将推出 /simplify 和 /batch 技能：下一代 Claude Code 将引入两项新技能，自动化处理 Pull Request 和生产部署流程。

如何让 AI 更好地理解你的 UI 需求：通过 Component Gallery 学习组件命名和设计模式，提升与 AI 协作生成 UI 的效率。
Popover API 入门指南：深入探讨 HTML Popover API 如何简化工具提示实现，减少 JavaScript 依赖并提升可访问性。
十亿行数据的虚拟滚动技术：HighTable 组件如何通过懒加载、无限像素和精确滚动等技术实现海量数据高性能渲染。
纯 CSS 实现里程表滚动效果：利用 CSS attr()、sibling-index() 和 mod() 函数，无需 JavaScript 实现数字滚动动画。
Rolldown 高性能代码分割原理：深入解析 Rolldown 如何使用 BitSet 逻辑和双模式策略实现极速代码分割。
CSS Anchor 定位的隐藏陷阱：揭示 Anchor Positioning 并非完全独立于 DOM 顺序，探讨其实现限制与最佳实践。
告别 innerHTML，迎接 setHTML：介绍 Sanitizer API 的 setHTML 方法，作为更安全的 innerHTML 替代方案，有效防范 XSS 攻击。

CSS 新特性

CSS border-shape 属性前瞻：介绍实验性 CSS 属性 border-shape，实现真正的非矩形网页元素几何盒模型。

工具

花式 CSS 边框生成器：在线工具一键生成基于 clip-path: shape() 的波浪、锯齿等响应式边框效果。

FE Bits Vol.27 | Oxfmt Beta 发布，Chromium「CSS 漏洞」实为 UAF

2026-03-01T15:36:00Z

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

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

个人动态

过年放假，给我放爽了，停更的这阵子疯狂写代码，肝项目，现在周刊恢复更新啦～

想说些什么，却又有些不知道该说什么，等我更新年终总结吧（真有人 3 月份才写去年的年终总结啊）（哦原来那个人是我啊.webp）

过完了年，也跳完了槽，在新公司干了一阵子之后，愈发觉得自己的选择没错，这阵子发生了很多～

有关注我的前端频道的应该就能明白我最近在做什么，所以也在这里正儿八经发一下我们公司的招聘。招很多前端，有图像编辑器经验的话更好！岗位都在 JD 里了，二次元浓度越高越好（逃）欢迎佬来撩，远程办公，年限不限，实习兼职都可以，主要看适配程度，感兴趣的欢迎直接邮箱 ball@mewtant.io 投递！备注一下 cos 内推的就行，也欢迎私聊我了解了解情况～

我进来工作的感觉反正是灰常爽的！太二次元了很对我电波！

【我们的产品】我们是一家专注于研究二次元生成式 AI 的创业公司，目前已研发上线的 text-to-image AI 生成和消费平台已成为海外头部产品，用户量和市场占有率迅速增长中。
【我们的资本背景】现已获得 makers fund 等多家一线顶级机构的多轮投资，目前估值上亿美元。
【我们的团队】公司总部位于新加坡，五湖四海的小伙伴同样支持远程办公。公司团队成员背景丰富，技术能力扎实，没有无聊的潜规则，实习小天才和大师傅都能尽情发挥和学习。
【你能得到】获得赛道最前沿技术/产品认知，一起 work on 一个产品，切实体验让想象成为现实的经历，一段有意义且实现自身价值的工作。

JD 相关： job.mewtant.io
公司相关的 pr：曾获红杉投资、估值上亿美元，二次元公司凭动漫向 AI 生图掘金海外

企业文化 Be Like（直接偷偷 saka 发的）

https://x.com/Manjusaka_Lee/status/1924870680115609842

MoePeek

之前 Easydict 经常漏内存太麻了，用久了就卡的要死，然后我的划词翻译需求又其实特别少，正好之前学了点 Swift 就自己过年顺手 vibe 写了一个（

主要自己用，纯 Swift 6 构建，安装体积约 5 MB ，后台运行内存约 50 MB ，很放心的挂后台，如果开 OCR 截图的话运行内存差不多到 100 MB

开源出来欢迎提 Issue ～但是不一定会加新功能了，会修修 bug

这个项目有 PopClip 集成，就在 Release 中，README 里有常见问题说明
成熟方案建议 Bob 或者 clicknow，这几个商业化的项目做的都很成熟

PS：我真的很喜欢 Easydict 但是找他们的内存泄漏问题再改有点难了 hhh 索性 vibe 一个只加自己需要的功能

一款轻量级 macOS 划词翻译工具，纯 Swift 6 开发，安装体积仅 5MB ，后台运行内存稳定约 50MB

GitHub: https://github.com/cosZone/MoePeek

社区动态

React 基金会：由 Linux 基金会托管的 React 新家园：React 官方宣布 React 基金会正式在 Linux 基金会（Linux Foundation）旗下成立，标志着 React 正式脱离 Meta 成为独立的开源项目。
TanStack 团队发布新库 TanStack Hotkeys，解决键盘快捷键开发中常见的跨平台、作用域冲突、输入框聚焦忽略等“小坑”，提供类型安全（Type-safety）、快捷键序列识别、状态追踪及 React 等框架适配器，并集成 Devtools 插件提升开发体验。
Oxfmt Beta：Oxfmt 宣布进入 Beta 阶段，自 Alpha 版本以来，Oxfmt 大幅扩展了功能，包括 100% 兼容 Prettier 的 JavaScript 和 TypeScript 格式化规则、支持多种文件格式（如 JSON, YAML, HTML, CSS 等）、内置 Tailwind CSS 类排序和可配置的导入语句排序功能，并提供了 Node.js API 和广泛的编辑器支持。（开始用好一阵子了，很香）
Claude Code 发布远程控制功能
：Claude Code 发布了名为“远程控制”(Remote Control) 的新功能，允许 Max 和 Pro 用户在终端启动任务后，通过手机或网页端继续控制 Claude Code 会话，实现跨设备无缝工作。目前，该功能已向 Max 用户开放，并将很快扩展至 Pro 用户。用户可通过运行 claude rc 命令开始使用。
An Exploit ... in CSS?!：很有意思，这篇文章提到了 Chromium 浏览器中一个被报道为“CSS 漏洞”的零日漏洞 (zero-day exploit) CVE-2026-2441，并澄清了其技术细节，指出恶意并非源于 CSS 本身，而是 Chromium 渲染引擎中一个 Use After Free (UAF) 的内存管理缺陷。

文章

从 instanceof 到 Error.isError：JavaScript 中更安全的错误检查：这篇文章介绍了在 JavaScript 中使用 Error.isError() 代替 instanceof Error 进行错误检查的优势，尤其是在处理跨域（cross-realm）错误时的安全性和可靠性。
构建无懈可击的 React 组件：一位 Vercel 资深工程师分享如何构建能应对真实复杂场景的健壮 React 组件，涵盖服务端渲染（Server Rendering）、水合（Hydration）、多实例、并发渲染（Concurrent Rendering）、组合（Composition）、Portal、View Transition、Activity、数据泄露防护及未来兼容性等现代 React 应用中的关键挑战。
Logo泛滥问题（及其解决方案）：Sanity 团队开发了 React 组件 <LogoSoup /> 解决网页中多品牌 Logo 排列时因尺寸、比例与视觉重量不一致导致的“Logo Soup”混乱问题。
你的 JavaScript 清理自身的工作很快就会变得简单很多：JavaScript 即将通过 Explicit Resource Management 提案引入 using 与 [Symbol.dispose]，使资源清理更统一、可靠且自动化。
深入解析 CSS 自定义列表样式指南：本文深入探讨了如何使用 CSS 从基础到高级全面自定义 HTML 列表样式，并兼顾了排版美学与无障碍访问。
Creating Query Abstractions：在 React 开发中，开发者习惯通过封装自定义 Hook 来复用 useQuery 的逻辑。然而作者指出，在结合 TypeScript 时，这种做法不仅会导致类型推断 (Type Inference) 失效，还容易引发复杂的“泛型地狱”。
Zoom!：解析了 CSS zoom 属性在实际布局中的实用性，及其与 transform: scale 的区别。
Remember sprites：2026，重新审视 CSS 图像精灵 (Sprites) 技术，结合 object-fit、object-position 和 step() 动画函数，实现有趣的逐帧动画。
Virtual Scrolling for Billions of Rows — Techniques from HighTable：本文介绍了 <HighTable> React 组件中如何通过五种核心技术实现数十亿行数据的虚拟滚动 (Virtual Scrolling，实现高性能和可访问性。

CSS 新特性

border-shape: the future of the non-rectangular web：本文深入介绍了即将到来的 CSS 属性 border-shape，它将彻底改变构建非矩形网页元素的方式。

趣站

Matthew Pothier 先生的个人作品集网站，融合了色彩在重叠图层中晕染开来的视觉效果：一位电影摄影师极简且具有独特 WebGL 色彩流动效果的个人作品集网站。

站点地址：Matthew Pothier-Cinematographer

Express yourself with Unicode：Kaomoji Cool Club 收集了大量有趣的颜文字 (Kaomoji)，让你用 Unicode 字符表达自我。

工具

Modern CSS Code Snippets：modern-css.com 是一个对比旧有 CSS 技巧与现代原生解决方案的参考网站，帮助开发者摆脱过时方法，利用最新 CSS 特性实现更简洁、高效的网页设计，很实用了，还有 RSS。
Can We Use：canwe.dev 是一个聚合了多种实用网页开发工具的网站，可以帮助开发者快速查询 Can I Use / Can I Stop、电子邮件客户端支持、可访问性信息、Web 平台功能进展及浏览器开发路线图等，为前端开发者提供一站式的信息查询服务。
broz：antfu 出品，一款简洁、无边框的屏幕截图浏览器，npx broz antfu.me 即可使用
SVG Studio，又一款基于浏览器的 SVG 处理工具，集成了优化、调试及修复渲染问题等多种功能。很好用。

Codepen

Flood Above the Floor

https://codepen.io/wakana-k/pen/Eayqjwr

步入 Wakana Y.K. 创作的这个 Three.js 场景，你会发现自己置身于一个优雅的房间，积水没过脚踝。环顾四周进行探索，或者思考一下那些精美的装修正遭受着多么严重的水浸破坏。

Sliding border glow on hover for beveled cards

https://codepen.io/thebabydino/pen/EayVXKj

Ana Tudor 通过 corner-shape 和 background-clip 展示了现代 CSS 的大师级用法，以此回答了 Reddit 上的一个提问，并为尚不支持这些特性的浏览器提供了回退方案。请查看 Ana 那份注释极其详尽的代码，以了解具体实现细节。

文本特效

https://codepen.io/collection/Poergz

Pedro Ondiviela 分享了一系列醒目的 SVG 滤镜和 CSS 文本效果。每个效果都是可编辑的，因此你可以使用自己的文字进行尝试。

Aerodynamic Typography 空气动力学字体

https://codepen.io/mike-at-redspace/pen/EayBZwy

使用鼠标滚轮控制风扇，在这个来自 mike-at-redspace 的有趣 Matter.js Pen 中观看字母飞舞并从墙壁上反弹。

Refs

FE Bits Vol.26 | Gatsby 支持 React 19，Rspress 2.0 发布

2026-02-08T16:52:52Z

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

今天是 2026 年 2 月 8 日，星期天。

虽然发的有点晚，已经 0 点了。

就快要过年放假啦！愉悦地停更俩星期！

这周忙自己的项目很愉悦，给我的博客新增了以前的 shoka 语法兼容和歌单版块，全部可开关。

这周把心心念念的博客歌单和播放器加上了，并且添加了之前 Hexo Shoka 主题的 Markdown 扩展语法兼容支持。

可在这里查看全部新增的语法演示：Shoka 主题 Markdown 语法演示。

然后增加音乐播放器和歌单页面，都可以开关～

一点一点变成我想要的样子了～

https://github.com/cosZone/astro-koharu/releases/tag/v2.6.0

所以……现在我要激情安利山山歌单了!

https://blog.cosine.ren/music

并且这周给 Moe Copy AI v0.3.5 新增了完整的 Prompt Template 管理功能，支持预设模版和自定义模版。之前还添加了深色模式！（是的没错都是我自用的功能）

https://moe.cosine.ren/docs/changelog

社区动态

GitHub 正在讨论开源项目维护者如何应对日益增加的低质量、AI 生成的拉取请求（PR），可能包括允许用户完全禁用 PR，或者至少限制 PR 只能由协作者访问等操作，可以在这里参加讨论：Exploring Solutions to Tackle Low-Quality Contributions on GitHub
Gatsby v5.16 支持 React 19，Rspress 2.0 重大升级
New to the web platform in January：汇总了 2026 年 1 月 Web 平台的重大进展，包括 Chrome 144 和 Firefox 147 稳定版的发布。其中 CSS 锚点定位 (CSS Anchor Positioning) 和 Navigation API 随着 Firefox 的支持，都正式达到 Baseline Newly Available（新可用基准）状态。此外，Chrome 144 引入了期待已久的 Temporal API、声明式的 <geolocation> 元素以及用于自定义页内搜索样式的 ::search-text 伪元素
互联网档案馆发布插件，解决 40% 的互联网死链问题 - 小众软件：互联网档案馆（Internet Archive）推出了 WordPress 插件 Link Fixer，旨在解决互联网日益严重的“链接腐化”（Link Rot）问题。该插件通过自动检测失效的 URL（如 404 错误），并引导用户访问 Wayback Machine 中存储的历史网页快照，据称能修复约 40% 的死链。

ViteLand 最新消息：2026 年 1 月回顾

https://voidzero.dev/posts/whats-new-jan-2026

品牌与设计统一

实现了 VoidZero 旗下所有项目（Vite, Vitest, Rolldown, Oxc）的视觉身份统一，发布了全新的官网和 Logo。
更新了 Vite 的启动模板（Starter Templates），将新品牌标识内置其中。
强调了工具链的深度集成：Vite 8 在底层直接使用 Rolldown 和 Oxc，实现了一致的开发者体验。

核心项目进展

Vite：自 2020 年发布以来，累计下载量超过 30 亿次；React 服务端组件（React Server Components, RSC）插件进行了优化，以支持 TanStack Start 等框架。
Vitest：启动 4.1 测试版（Beta），引入测试标签（Test Tags）功能，并支持通过禁用 viteModuleRunner 选项在脱离 Vite 的情况下运行。
Rolldown：正式达成候选发布版（Release Candidate, RC）里程碑，API 进入稳定阶段；推出“Lazy Barrel Optimization”，在 AntDesign 等场景下可减少 92% 的模块编译，提速 2 倍。
Oxc：Oxlint 支持 oxlint.config.ts 动态配置；Oxfmt 实现了与 Prettier 100% 的一致性（Conformance），并新增了 Tailwind CSS 类名排序功能。

社区动态与生态

榜单表现：在 2025 JavaScript Rising Stars 榜单中，Vite、Oxc、Rolldown 和 tsdown 均名列前茅。
生态迁移：Hugging Face、Turborepo 和 Lichess 等知名项目宣布从 ESLint/Prettier 迁移至 Oxlint/Oxfmt。
周边工具：社区推出了基于 Oxc 的代码体积优化工具 jsshaker 以及 Oxlint 的终端用户界面工具 oxlint-tui。

文章

A Percise Parser：本文介绍了一个因硬编码地区数值格式（Locale Formatting）并使用拙劣的字符串操作，导致国际化失效的 JavaScript 解析器（Parser）案例。
Solving Shrinkwrap: New Experimental Technique
好文，利用 CSS Anchor Positioning（锚点定位）和 Scroll-Driven Animations（滚动驱动动画）解决网页排版中“自动换行导致的容器宽度无法自动收缩（Shrinkwrap）”这一经典难题。
Performance-Optimized Video Embeds with Zero JavaScript：本文介绍了一种利用原生 HTML 标签 <details> 和 <summary> 来优化视频嵌入性能的方法。通过这种方案，开发者可以在完全不使用 JavaScript 的情况下实现视频的按需加载。
CSS @scope: An Alternative To Naming Conventions And Heavy Abstractions：介绍如何利用 CSS 原生的 @scope 规则来替代复杂的 BEM 命名规范或繁重的 CSS 框架，实现更简洁、可维护的样式隔离。
CSS Bar Charts Using Modern Functions | CSS-Tricks：本文介绍了如何利用 CSS 现代函数 sibling-index() 和增强后的 attr() 函数，以更简洁、高效的方式构建纯 CSS 柱状图。

新特性

Nice Select · February 3, 2026：本文展示了如何利用最新的 CSS 特性（如 appearance: base-select）在保持原生无障碍性的同时，打造高度可定制且视觉华丽的 <select> 下拉组件。

https://codepen.io/editor/argyleink/pen/019c1f28-bbc2-7bac-ad4a-a7e41d3730f1

Drawing Connections with CSS Anchor Positioning - Roland Franke：锚点定位真好玩儿吧。在无需 JavaScript 的情况下实现 UI 元素（如评论与其回复）之间的视觉连线。

https://codepen.io/ROL4ND909/pen/gbMxLdL

工具

jamiepine/voicebox 一款由 Qwen3-TTS 驱动的开源、本地优先语音克隆与合成工具

Codepen 与趣站

不规则网格上带有凹面圆角的卡片

https://codepen.io/thebabydino/pen/WbxpKPQ

“卡片和按钮之间的缝隙实现了真正的透明效果。没有尖角，全部都是圆角。除了 .jpg 格式的卡片背景图外，没有其他图片。卡片形状会根据按钮的大小和形状进行调整——您可以尝试只更改按钮元素的字体大小来查看效果。这不需要任何 JavaScript 代码——一切都归功于 CSS 子网格的神奇功能！” by Ana Tudor

带有自定义 select 的文件夹堆叠

https://codepen.io/captainbrosset/pen/dPXdgae

现在选择元素是可以自定义的，Patrick Brosset 向我们展示了点击后会弹出的文件夹堆叠，这给我们带来了很多乐趣。

二进制时钟

https://codepen.io/prisoner849/pen/zxBpPYW

prisoner849 在这段 Three.js 代码中展示了一款精美的时钟。即使你不懂二进制时间，也能欣赏它的美——拿起时钟转动一下，从各个角度欣赏它塑料材质的光泽。

Refs

FE Bits Vol.25 | Yarn 6 将用 Rust 重写，CSS Grid Lanes 进展

2026-02-01T15:48:00Z

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

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

已经 2 月了啊，好快哦。

个人动态

碎碎念

看了超时空辉夜姬，给我看的好感动……好久没看到这么令人感动的国宴了……

简直是神，还是真百，推荐所有人观看美少女贴贴，在我心里是作画运镜无死角全方面的神作～

撒糖撒糖还是撒糖，后劲也大，全程都在库库截图，我没有什么不满的我觉得美少女特别有活力的贴贴特别好。

上一次看完有如此感慨的还是游戏人生剧场版……但是那个高度……

这部的优缺点都很明显，在强无敌的作画下剧情的平平无奇反而变成了短板，但是我觉得还是瑕不掩瑜，非常非常值得一看！

泛式说得好啊：

https://www.bilibili.com/video/BV1Fcz1BZEVz

这个杂谈说得也很好：

https://www.bilibili.com/video/BV1w8zrBHEZC

项目更新

给博客做了以下更新。

https://github.com/cosZone/astro-koharu/releases/tag/v2.5.0

https://github.com/cosZone/astro-koharu/releases/tag/v2.5.1

给 Moe Copy AI 插件做了深色模式，还在持续优化中。

https://github.com/yusixian/moe-copy-ai/releases/tag/0.3.3

社区动态

When will CSS Grid Lanes arrive? How long until we can use it?：探讨了 CSS Grid Lanes（原生瀑布流布局）在各浏览器的实现进度，并详细介绍了如何通过渐进增强（Progressive Enhancement）技术在当下提前使用这一新特性。
- Safari 已经在技术预览版中支持
- Firefox 在 2020 年最早实现了早期草案，目前正致力于更新至最新的规范语法和 flow-tolerance 属性
- Chrome 与 Edge 的加入：Chromium 团队在经历了语法争议后，目前已达成共识并正在更新其实现代码，标志着三大引擎达成一致。
Yarn 6 预览版发布，为了极致性能正转向使用 Rust 语言重构，预计 2026 年 Q3 发布稳定版。
Try text scaling support in Chrome Canary：介绍 Chrome Canary 中新增的 <meta name="text-scale"> 标签，该功能允许网页响应移动端操作系统的全局字体大小设置。
React 紧急发布 19.2.4、19.1.5 和 19.0.4 版本，修复了 React Server Components (RSC) 中未完全解决的拒绝服务 (DoS) 漏洞：Denial of Service Vulnerabilities in React Server Components (真累啊)
Vercel 的最新研究表明，在针对 Next.js 16 开发的最新评估中，他们发现将 8KB 的文档索引塞进 AGENTS.md 文件中效果更好，因为 skills 无法可靠地触发。
SolidJS 创始人 Ryan Carniato 发布 JavaScript Frameworks - Heading into 2026，分析当前充满活力的前端开发领域。

优质文章

Unstacking CSS Stacking Contexts — Smashing Magazine：非常好的好文章！条理清晰，深入剖析 CSS 层叠上下文 (Stacking Contexts) 的工作原理，解释为什么 z-index 会失效，并提供实用的调试技巧与解决方案。被安利了 Better CSS Stacking Contexts 这个 vscode 插件。
There is No Need to Trap Focus on a Dialog Element：介绍在使用原生 <dialog> 元素时，为什么开发者不再需要手动实现复杂的焦点陷阱（Focus Trap）逻辑。
From pixels to characters: The engineering behind GitHub Copilot CLI’s animated ASCII banner：本文深入探讨了为 GitHub Copilot CLI 开发 3 秒 ASCII 动画背后的复杂工程实现，涵盖了终端渲染限制、色彩一致性及无障碍设计。

10 Tips for Claude Code

https://x.com/bcherny/status/2017742759218794768

Claude Code 的开发者 Boris Cherny 分享了其使用 Anthropic 最新推出的 Claude Code 命令行工具的进阶技巧，涵盖自动化、调试、学习模式及多代理协作。

1. 自动化与技能扩展（Skills & Automation）

建议将每日重复操作转化为自定义技能（Skills），并提交至 Git 仓库供跨项目复用。
创建 /techdebt 指令，在每个会话结束时运行，用于发现并消除重复代码。

2. 高效调试与流程集成（Debugging & CI/CD）

启用 Slack MCP（Model Context Protocol），直接将 Slack 中的 Bug 讨论贴入 Claude 进行修复，减少上下文切换（Context switching）。
授权 Claude 自动修复失败的 CI 测试，或通过分析 Docker 日志定位问题，无需微观管理（Micromanage）。

3. 提示词工程与代码评审（Prompting & Code Review）

让 Claude 扮演评审者（Reviewer），通过“对我提交的代码进行质询，直到通过测试再创建 PR”等提示词提升质量。
要求 Claude 对比主分支（Main branch）和功能分支的行为差异，证明代码的有效性。

4. 环境配置与工具优化（Environment & Setup）

推荐使用 Ghostty 终端以获得更好的同步渲染和 24 位色彩支持。（我用 warp 也很好用）
使用 /statusline 自定义状态栏，实时显示上下文使用情况（Context usage）和当前 Git 分支。

5. 复杂任务与数据分析（Subagents & Analytics）

在请求中加入 “use subagents” 指令，让 Claude 投入更多算力（Compute）处理复杂问题，并保持主代理上下文整洁。
通过编写技能调用 BigQuery (bq) 等命令行工具，直接在 Claude Code 中进行实时数据指标分析。

6. 深度学习与知识内化（Learning & Understanding）

在 /config 中开启“解释模式”（Explanatory/Learning output style），让 Claude 解释代码变更背后的原因（Why）。 (我觉得这个解释模式真的好用)
利用 Claude 生成视觉化的 HTML 演示文稿（Slides）或 ASCII 图表，辅助理解陌生的代码库或协议。
构建间隔重复（Spaced-repetition）学习技能，通过问答形式填补知识盲区。

新特性

如何为新的 ::search-text 和其他高亮伪元素设计样式：介绍 Chrome 144 新推出的 ::search-text 伪元素，以及如何利用 CSS 相对颜色语法统一美化各种文本高亮样式。
告别 insertBefore，使用 moveBefore 移动 DOM 元素介绍了原生 DOM 新 API moveBefore 的用法、优势及其在 Web Components 中的应用，并对比了传统 insertBefore 的局限性。

工具

agentation：一款为 AI Agents 设计的视觉反馈工具，通过点击并添加标注，随后生成包含元素路径、CSS 选择器（Selectors）、位置等详细上下文的 Markdown 文本。文档| Tweet

这个 MarginLab 挺有意思的，一个针对 Claude Code 和 Codex 的独立性能监控工具，模拟真实用户编码场景来监测大模型的“降智”，

https://x.com/vikingmute/status/2017495789443199126

趣站与 Codepen 精选

React Tilt Button - 3D Tactile React Button Component

好喜欢这个！感觉是很巧妙的设计。
一个具备 3D 触感、支持倾斜和深度效果的 React 交互按钮组件。它利用 CSS 的 3D 变换（3D Transforms）技术，为传统的按钮元素注入了物理深度（Depth）和动态倾斜（Tilt）效果。组件不仅内置了从复古游戏（Arcade）到现代金属（Steel）等多种预设主题，还开放了高度细粒度的自定义参数，让开发者可以轻松调整按钮的海拔高度（Elevation）、圆角（Radius）及光泽感（Glare），从而打造出极具表现力的用户界面。

https://react-tilt-button.vercel.app/

GitHub 源码

https://github.com/archisvaze/react-tilt-button

Super Monkey Ball

开发商 Twilight 将世嘉经典游戏《超级猴子球》移植到网页上，做得非常出色且运行流畅。

https://bsky.app/profile/twilightpb.bsky.social/post/3mdbynphtbc2l

https://monkeyball-online.pages.dev/

可以查看源代码。

Typewriter Web Component V2

https://codepen.io/luis-lessrain/pen/EaKjXwB

目前该项目仅在 CodePen 上提供，但它的效果非常出色。演示允许您交互式地启动、暂停/恢复、完成和重置动画。此外，还有一个进度条和按钮，可以跳转到特定的进度点。

Refs

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

2026-01-25T10:56:00Z

本期网址 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 领域，后端我只能通过同事的使用感受推测。

项目更新

https://github.com/yusixian/moe-copy-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 （Source Tweet1 | Tweet2）
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 布局变换。

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

Introducing Auto Layout in Anime.js v4.3!

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

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

https://codepen.io/juliangarnier/pen/PwzmxwR

优质文章

不会编程的人能靠 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() 滤镜为不规则形状添加阴影

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

Chris Heilmann 向我们展示了如何使用 filter: drop-shadow() 为不规则形状添加阴影，该过滤器可以识别“图像的透明部分或 SVG 路径的形状，并相应地应用阴影”。

https://codepen.io/codepo8/pen/qENbVmb

使用 superellipse() 函数创建迷人的角形 — 仅 CSS

在这个由 Zoran Jambor 创作的 Pen 中，一个简单的圆形通过“ superellipse() CSS 函数的随机值”演变成万花筒般的形状。点击“关于”按钮，即可查看关于 superellipse() 函数的简短教程和实用资源。

https://codepen.io/ZoranJambor/pen/ogLLLgr

CSS 光学错觉

Alvaro Montoro 在这份令人惊艳的合集中分享了大量用纯 CSS 实现的著名光学错觉作品。其中一张在电视模式下简直太震撼了😵‍💫

https://codepen.io/collection/GpWqKk

旧布随风飘扬

在 Sabo Sugi 的这个 Three.js 场景中，一块饱经风霜的布料在微风中轻轻飘动。深入设置控件，即可更改图像、颜色、风力和撕裂效果。

https://codepen.io/sabosugi/pen/ByzLYpb

Refs

FE Bits Vol.23 | jQuery 4 发布，Chrome 新增垂直标签页功能，Astro 被 Cloudflare 收购

2026-01-18T13:47:22Z

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

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

Moe Copy AI 发了 v0.2.1 和 v0.2.2，做了国际化，将悬浮球的功能抽取至侧边栏单页抓取 tab 了，内容提取下也加了 AI 总结按钮。

感谢 @XueHua-s 贡献的 htmlToMarkdown 重构为使用 unifined 改进～（#19）

然后是 astro-koharu 主题，将周刊功能泛化为了多系列，featuredSeries 支持数组与自定义 slug，动态生成系列页面并替代固定 /weekly 了，现在可以新增以下如图所示的系列文章了。

并且评论组件现在支持切换三种评论组件了（waline / remark42 / giscus）

开心！Waline 做评论真是又好看又好用啊

这周都在肝项目，所以周刊短短的！

社区动态

jQuery 4.0.0：时隔近十年，jQuery 发布了 4.0.0 正式版，带来了大量现代化改进，包括移除对旧版浏览器（IE 10 及更早版本）的支持、引入新特性以及优化内部实现。
Chrome 145 adds Experimental Support for Vertical Tabs：Chrome 145 实验性支持垂直标签页。（天呐 2026 了 Chrome 终于把垂直标签页学过来了太感动了）
隆重推出：React 最佳实践：Vercel 团队将 “十余年 React 和 Next.js 优化经验” 提炼成了一套 Markdown 文件，旨在供 Claude Code 等代码助手使用，当然您也可以自行阅读。其目标是帮助这些助手编写更优质的 React 代码，而无需过多指导。
- 可以通过 npx add-skill vercel-labs/agent-skills 直接安装
The Astro Technology Company joins Cloudflare | Astro：Astro 框架背后的公司 The Astro Technology Company 宣布加入 Cloudflare，以获取更多资源并专注于框架核心开发，承诺保持开源和平台中立。（真好，我很喜欢 astro 写网站的感觉）
- 并且 Astro 回顾了过去一年，展望了 2025 年的更新、变化和新增功能吗，并且发布了 Astro 6 的 beta 版本。
"You should never build a CMS" | Sanity：Sanity 回应 Cursor 将 CMS 迁移至 Markdown 的热议，分享了许多使用 CMS 的理由。

文章与社区动态

Why I hate WebKit, a (non) love letter：非常好文章推一下，Tauri WebKit 坑点大全，珍爱生命远离 WebKit！这个标题和 url 真是直抒胸臆。
JavaScript 的 for-of 循环实际上很快 (V8)：探讨现代 V8 引擎中 for-of 循环的性能表现，打破了开发者社区中关于其性能显著弱于传统循环的固有印象。作者建议现在除非是处理极端海量数据且对每一毫秒都敏感的场景，否则应优先使用语义更佳的 for-of 循环。
GUIDs - How I messed up my RSS feed：这篇文章讲述了作者如何因在 RSS feed 中添加 UTM 参数导致所有文章被重复添加，并介绍了 GUID 字段来解决此类问题的经验。
记 LobeHub 的性能和 DX 优化：作者分享了入职 LobeHub 一个月以来在性能和开发体验（DX）方面进行的优化工作。
《简明 TypeScript 手册》是一本简短精炼的 TypeScript 指南，免费开放阅读。
How to Steal Any React Component
网页做的还挺有趣的，介绍如何使用 React 的内部数据结构（通过 Fiber）和 LLM 来重建生产 React 应用程序中的组件，而无需原始源代码。
How Markdown took over the world：回顾 Markdown 的诞生历程及其如何从一个小众博客工具演变为统治现代互联网和 AI 交互的通用文本标准。
Death to Scroll Fade! 批判网页设计中过度使用“滚动渐入”（Scroll Fade）效果的弊端，呼吁回归简洁高效的用户体验。
useOptimistic Won't Save You：深入探讨 React 19 的 useOptimistic 钩子，说明其必须结合 Transition 和 Action 状态管理才能真正处理复杂的竞态条件。
作者最后建议，这些复杂的底层 API 更多是为框架开发者设计的，普通开发者应倾向于使用成熟框架提供的抽象。
如何衡量和优化 React 性能：全面介绍了衡量和优化 React 应用性能的工具与技术，重点讲解了 React 19.2 的新特性以及各类运行时和构建时的优化策略。
停止将所有内容都变成数组（并减少工作量）：介绍如何利用 JavaScript 原生的迭代器辅助函数（Iterator helpers）实现延迟计算，从而优化处理大数据集时的性能和内存占用。

新特性

Bytes I can delete after all this time
由于 CSS 和 JS 的进步，越来越多的技术我们不再需要了，Remy Sharp 分享了一份我们可以抛弃的技术清单。

CSS 布局与样式增强
- 使用 text-underline-offset 属性轻松控制文本下划线的距离，无需再用复杂的伪元素模拟。
- 在 Flexbox 布局中直接使用 gap 属性，告别过去需要通过处理 margin (外边距) 来设置间距的繁琐操作。
- 采用原生 CSS 嵌套 (Nesting) 和在选择器内嵌套媒体查询 (Media Queries)，使样式结构更清晰且无需预处理器。
- 利用 clamp(min, variable, max) 实现流体响应式尺寸，简化了复杂的断点计算。
- 使用 content: open-quote 结合 q 标签实现根据语言自动适配的本地化引号。
JavaScript 语法与交互优化
- 采用可选的 catch 绑定 (Optional catch binding)，在不需要错误对象时直接写 catch { ... }，避免定义未使用的变量。
- 指针事件 (Pointer Events) 的普及使得开发者可以用一套逻辑替代旧有的 click (点击) 和 touch (触摸) 事件的混合逻辑。
- 弃用旧的性能黑科技，如使用 ~~ 或 | 0 取整，现代引擎下 Math.floor() 的可读性更高且性能不再是瓶颈。
资源优化与现代格式
- AVIF 图像格式已获得全面支持，相比 JPEG 可轻松实现 50% 以上的体积缩减。
- 提供了使用命令行工具 avifenc 批量转换图片的实用脚本示例。

然后是两篇锚点定位，都是自动连线：

Connecting Circles With Anchor Positioning II：CSS Tips 锚点定位系列文章，通过改进之前的实现，展示了如何使用 CSS 锚点定位技术动态连接两个圆圈，并在连接箭头的形状中计算并显示它们之间的距离。
纯 CSS 实现两个元素之间折线自动相连：本文详细介绍了如何利用 CSS 锚点定位实现两个元素之间纯 CSS 自动连接的折线效果，并探讨了当前方案的实现原理及局限性。

趣站与 Codepen 精选

Playing With CodePen slideVars：介绍 CodePen 官方推出的 slideVars 工具，它可以自动检测 CSS 变量并生成交互式控制面板，现在在 codepen 里写交互式 Demo 更方便了。

https://codepen.io/geoffgraham/pen/myEOqJg

Refs

FE Bits Vol.22 | CSS @scope 全面可用，ViteLand 12 月回顾

2026-01-11T11:19:00Z

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

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

年终总结在写了（还在写？）

建了个 discord 群，虽然不怎么上 discord（）

https://discord.gg/XzvrvNMcSe

因为后知后觉的意识到 Discord 群作为公开群好像比较合适比较方便（嗯）

总之想找我聊天或者问问题的都可以加，后续应该会作为各种项目里边 link 的公开群。

然后是博客主题更新，新增了 Koharu CLI 交互式命令行工具，提供博客内容备份/还原、主题更新、内容生成、备份管理等功能。配置文件也统一更改为 config/site.yaml 了。

https://github.com/cosZone/astro-koharu/releases/tag/v2.0.0

然后觉得还挺有意思的，之后准备写一篇博客简单讲讲（实现交互式 Git 主题更新 CLI 的完整方案）

上架了 astro 主题商店，发了一篇 v2ex 帖子。

https://astro.build/themes/details/koharu

https://v2ex.com/t/1184086

并且 Moe Copy AI 插件上架火狐商店了（没想到不怎么需要适配）

https://addons.mozilla.org/zh-CN/firefox/addon/moe-copy-ai/

社区动态

CSS `@scope` 规则已广泛可用

CSS @scope 已获得所有主流浏览器支持，该规则允许您选择特定 DOM 子树中的元素，精确定位元素，而无需编写难以覆盖的过于具体的选择器。

MDN：@scope - CSS | MDN
文章：How to @scope CSS Now That It’s Baseline

用法形如

@scope (.article-body) to (figure) {
  img {
    border: 5px solid black;
    background-color: goldenrod;
  }
}

ViteLand 12 月回顾

What’s New in ViteLand: December 2025 Recap：ViteLand 生态在 2025 年 12 月迎来了一系列重要更新，涵盖了 Vite、Vitest、Rolldown、Oxc 等项目。

Oxlint 和 Oxfmt 如今已能取代传统工具，而且还在不断改进。可以查看 2026 年路线图

期待能在项目里广泛使用的那天！

Oxc 的性能突破
- Oxlint 和 Oxfmt 在代码校验（linting）和格式化（formatting）方面提供比 ESLint 和 Prettier 更快的速度（分别快 50-100 倍和 30 倍）。
- Oxlint 已推出 1.0 版本，并新增了类型感知校验（type-aware linting）和兼容 ESLint 的 JS 插件。
- Oxfmt 新增了对嵌入式语言和实验性导入排序的支持。
- Bun、Vue、Preact、date-fns、Inquirer.js、Shopify、Miro、Airbnb 等多个项目已迁移至 Oxc。
- Oxc 团队计划在 2026 年推出对动态配置（dynamic configs）的支持。
- Oxc 在性能优化方面持续投入，实现了语义分析性能的提升。
Vite 项目更新
- 发布了多个 Vite 8 beta 版本，修复了 bug 并提升了稳定性。
- Vite 8 beta 提供了第二版原生插件（native plugins），改进了动态导入（dynamic import）和导入 glob（import glob）插件的对齐。
Vitest 项目更新
- 新增实验性的 OpenTelemetry 支持，用于分析测试性能瓶颈。
- Vitest UI、CLI 和 VS Code 扩展支持分析和分解导入，识别减慢测试速度的依赖。
- 支持通过 experimental.fsCache 缓存转换后的文件，加速后续测试运行。
Rolldown 项目更新
- 支持通过手动指定 tsconfig 来使用 TypeScript 项目引用（TypeScript project references）。
- 优化了默认的代码块（chunking）算法，减少了生成的代码块数量。
- 提供了 postBanner 和 postFooter 选项，用于在打包后的代码前后追加内容。
- 插件的 resolveId 钩子支持通过 importerId 进行过滤，提高性能。
社区动态与合作
- Framer 发布了关于使用 Rolldown 改进性能的案例研究。
- TypeScript.fm 和 Syntax.fm 播客讨论了 ViteLand 项目的更新和发展预测。
- Ninja Squad 撰写了关于使用 Vitest 浏览器模式测试 Angular 的文章。
- 社区涌现出多个基于 Oxc 和 Rolldown 的新工具和迁移案例，如：
  - oxlint-plugin-complexity：用于校验代码复杂度的 Oxlint 插件。
  - Roll(down)phobia：基于 Rolldown 的包大小分析工具。
  - RSC Explorer：使用 Vite 8 和 Rolldown 构建的 RSC（React Server Components）工具。
  - Facetpack：使用 Oxc 替换 Babel 的 React Native 工具。
  - MonkeyType：迁移到 Oxlint 以获得更快的类型感知校验速度。
  - create-better-t-stack：从 Biome 迁移到 Oxlint 和 Oxfmt。
  - Ultracite：提供基于 Oxc 的预设配置。
  - rollipop：完全基于 Rolldown 的 React Native 构建工具。

文章与社区动态

Building a toast component：Emil 分享了制作 Sonner 时候的设计思路与技术实现，太细致了。
包大小调查：一步一步缩小 JavaScript 的指南：相当实用的好文，教你怎么减小打包体积，分析 JavaScript 打包大小、优化导入方式、解决重复库和处理传递依赖。
React 已发生变化，您的 hook 也应如此：当前主流项目仍以传统方式使用 React Hooks（如滥用 useEffect），忽视了 React 在并发模式与异步数据处理上的演变。作者从设计理念出发，提出现代 Hook 的核心精神是“架构化的状态与逻辑管理”，强调使用 useSyncExternalStore、useDeferredValue、useEffectEvent 等新 API 优化性能和可测试性，鼓励开发者更多关注派生状态（derived state）而非副作用（side effects）
AI 编码代理如何在我们的应用中隐藏定时炸弹: AI Agent 写代码的时候无意中在应用程序中引入了一个隐藏的、导致浏览器崩溃的无限 React 组件树，而 React 19 的 <Activity> 组件则巧妙地掩盖了这个问题。
require(esm) in Node.js: implementer's tales：Joyee Cheung 是 Node.js 的核心贡献者之一，长期以来一直致力于 Node.js 对 require(esm) 的支持（即使用 require 加载 ES 模块）。在这篇系列文章中，她分两部分详细阐述了 require(esm) 实现历程及其具体细节。
超越鼠标：使用移动加速计制作动画：探讨了如何利用移动设备的加速计和运动传感器为网页动画注入动态交互，从而在移动设备上实现与桌面端鼠标交互相媲美的沉浸式用户体验。
（这个我两年前有做过类似的需求，也叫陀螺仪，iOS 必须请求陀螺仪权限才能用，除了这个缺点，整体上其实用起来挺舒服的）
A first look at the Web Install API：探讨了新兴的 Web Install API，该 API 已在 Chromium 浏览器中进入 Origin Trial 阶段，并在 Microsoft Edge beta 版中展现出最完整的功能。此 API 的目标是允许网站通过简单的按钮点击直接安装 PWA (Progressive Web Apps)。相关链接: The Web Install API is ready for testing
Important and CSS Custom Properties：澄清了 CSS 自定义属性 (CSS Custom Properties) 中 !important 的作用机制，指出 !important 修饰的是声明本身而非其值，从而避免常见误解。
用 WebGL 着色器构建实时 ASCII 和抖动效果：很厉害的 ASCII 艺术生成网站 https://efecto.app/ 之前发过，这篇是作者的详细技术解析。
无限画布：建立一个无缝的，平铺任何地方的图像空间：很详细的教程，详细介绍了如何使用 React Three Fiber 构建一个无限可平移的图像画布，通过区块 (chunk) 渲染和性能优先的技术，创建一个流畅且可无尽探索的图像空间。

超越 RxJS: TanStack Pacer 指南：讲了怎么使用 TanStack Pacer 来管理前端应用中的异步事件时序，以优化性能并避免 RxJS 的复杂性。
VSCode 的 6 种快速的（原生）替代方案：本文探讨了广受欢迎的 VSCode 因其基于 Electron 的架构所带来的性能局限性，并介绍了六款用 C++、Rust 等原生语言开发的快速、高效的替代编辑器。
程序员和整洁的 Home：如何通过遵循 XDG Base Directory Specification (XDG BDS) 来整理混乱的 Home 目录，从而更好地管理配置文件、数据和缓存文件。
Vitest Browser Mode - The Future of Frontend Testing：介绍了 Vitest Browser Mode，可以在真实浏览器环境中进行前端组件测试。

新特性

重要信息 #2：条件视图转换、CSS/SVG 文本特效、最佳 CSS Bluesky 等：回顾了 2025 年末 CSS 领域的一些重要进展、新特性、社区讨论以及行业动态，并展望了 2026 年的趋势。
Date is out, Temporal is in：一篇 Temporal 的介绍。JavaScript Temporal 是 Date 的完美替代方案，已进入 TC39 标准化过程的第三阶段 (Stage 3)，在 Chrome 和 Firefox 等主流浏览器的最新版本中落地实现。
2026 年每个前端开发者都应该知道的 4 个 CSS 特性：介绍了前端开发者在 2026 年应该掌握的四个重要 CSS 新特性，包括 sibling-index()、@container scroll-state()、text-box 和 typed attr()。

工具

做友链功能的时候发现的，还挺好用的：DiceBear 是一个功能强大的头像库，旨在帮助设计师和开发者快速为项目创建多样化的头像。它提供了从抽象形状到精心设计的人物角色等多种头像风格。用户不仅可以生成随机头像，还可以通过设定 seed 实现确定性头像生成，或利用丰富的定制选项创建个性化头像。DiceBear 通过 JavaScript 库、HTTPS API、命令行工具 (CLI)、Figma 插件和在线 Playground 等多种方式提供。
Dither Image Online：一个免费、快速、实时的在线抖动（dithered）图像生成器，或者说像素艺术风格，效果太酷了！

你知道吗？可以通过在 GitHub 个人资料页面 URL 后添加 .png 来获取你的 GitHub 个人资料图片，例如 github․com/USERNAMEHERE.png - 还可以附加 .keys 来获取公钥，附加 .atom 来获取公开时间线活动的动态。Refernce

趣站与 Codepen 精选

GACHAGO! MarbleRace

非常可爱的网站！看了看首页还有很多有趣的东西

是一个基于物理模拟的弹珠台式抽奖工具，灵感来源于游戏内的抽奖玩法，通过模拟物理碰撞（例如红色柱子增加弹力）来决定结果，使得抽奖过程更具趣味性和不可预测性。

https://www.gachago.net/MarbleRace

https://x.com/Mant0uStudio/status/2009279695276089512

作者是 @Mant0uStudio

Mr. Panda's Psychologically Safe Portfolio

很有创意的一个滚动驱动的 portfolio 页面：Mr. Panda's Psychologically Safe Portfolio

开源在：GitHub - andrewwoan/mr-pandas-psychologically-safe-portfolio
技术解析文章：The Increasing Importance of Psychological Safety and Self-Awareness for Creative Work

像素化图片掉落特效

How to Create a Pixel-to-Voxel Video Drop Effect with Three.js and Rapier

这个教程详细介绍了如何利用 Three.js、着色器和 Rapier 物理引擎，将 2D 视频流转化为动态的 3D 体素 (voxel) 下落效果。文章从核心概念——像素和重力——出发，逐步讲解了如何构建一个由 InstancedMesh 和刚体 (rigid bodies) 组成的平面，通过着色器实现平铺像素到 3D 体素的涟漪 (ripple) 变形效果，并最终通过 JavaScript 模拟涟漪进程来激活物理引擎，使体素在逼真的物理作用下散射和恢复。作者还分享了实现过程中的技术细节、优化考量以及未来扩展的可能性。

Bongo Cat Codes #2 - Jamming

好萌，被萌到了

https://codepen.io/carolineartz/pen/qBOEzQa

果冻压扁按钮

你需要预留一点时间来压扁这个东西。无论是垂直拖动光标，还是单击 "跟随鼠标 "复选框，都可以将这个由 Voicu Apostol 制作的内含果冻的按钮的压扁效果与鼠标移动联系起来。

https://codepen.io/cerpow/pen/LEZYxqM

好可爱的按钮！看了一下原理。

这不是真正的 3D 果冻，而是通过快速切换预渲染的图片序列来模拟果冻挤压效果，类似电影胶片的原理。预加载了 215 张连续的果冻形变图片，这些图片记录了果冻从静止到被挤压到回弹的完整动画过程，通过切换不同帧号的图片来做的。

文本框边框动画旋转 [CSS & SVG] V2

在 Fernando Cohen 制作的这个流畅的 CSS 和 SVG 动画中，文字栅栏围绕着一张照片的边缘。看看悬停照片时会发生什么，还可以看看他的 2022 年的早期迭代作品。

https://codepen.io/designfenix/pen/OPyapww

看了一下原理，这是一个使用 SVG 和 CSS 创建的文字沿着有机形状边框旋转动画效果。

首先使用 SVG Blob 形状生成，创造有机的 blob 形状

<path d="M43.1,-68.5C56.2,-58.6,67.5,-47.3..." />

这个路径数据可能来自 Blob Generator 等工具

然后是使用 clip-path 进行图片裁剪，将矩形图片裁剪成 blob 形状，同时通过 preserveAspectRatio="xMidYMid slice" 确保图片填充满整个区域。

<clipPath id="blobClip">
  <path d="..." transform="translate(100 100)"/>
</clipPath>
<image clip-path="url(#blobClip)" />

然后使用 pathLength 进行文字路径动画，定义文字路径

<path id="text" d="..." fill="none" stroke="none" pathLength="100" />

pathLength="100" 标准化路径长度，便于动画计算
fill="none" stroke="none" 路径本身不可见，仅作为文字轨迹

将文字沿路径排列：

<text class="text-content">
  <textPath href="#text" startOffset="0%">
    ❤ MADE WITH LOVE ❤ MADE WITH LOVE...
    <animate attributeName="startOffset"
             from="0%" to="100%"
             dur="15s"
             repeatCount="indefinite" />
  </textPath>
</text>

<textPath> 让文字沿着指定路径排列
startOffset 控制文字在路径上的起始位置
<animate> 元素实现 SMIL 动画（SVG 原生动画）

那无缝循环是怎么做的呢？他用了两段文字，当第一段文字从 0% 移动到 100% 时，尾部会消失，第二段文字从 -100% 移动到 0%，正好填补空白。两段文字首尾相连，形成无缝循环。

<!-- 第一段文字：0% → 100% -->
<textPath href="#text" startOffset="0%">
  <animate from="0%" to="100%" />
</textPath>

<!-- 第二段文字：-100% → 0% -->
<textPath href="#text" startOffset="100%">
  <animate from="-100%" to="0%" />
</textPath>

最后是这个 交互式缩放效果，是通过悬停时放大裁剪区域（而非整个 SVG）来做的。

文摘

在谷歌工作 14 年的 21 条经验

最近读的有一篇文章感觉很棒，所以单独列出来。

每一条都是我赞同的！写得真好啊。

https://addyosmani.com/blog/21-lessons/

Addy Osmani 在 Google 14 年的职业生涯中，总结出 21 条经验教训。

以用户为中心
- 真正的价值来自于深入理解并解决用户问题，而非仅仅热衷于技术本身。
- 通过参与客服、与用户交谈、观察用户痛点来深入理解问题。
协作与对齐
- “对”固然重要，但“一起达成对”才是真正的挑战和价值所在。
- 避免成为“房间里最聪明的人”，应创造空间让他人参与，并对自己的观点保持适度怀疑。
- 绝大多数“慢”的团队实际上是“错位”的团队，即方向、接口或优先级不明确。
行动与交付
- 完美的追求会阻碍进步，先行动、再完善、再优化。
- “行动导向”比“分析瘫痪”更能带来清晰度，可编辑错误页面，但无法编辑空白页面。
- AI 可以辅助快速迭代和反馈。
清晰度而非技巧性
- 代码需要清晰易懂，以便他人（尤其是在紧急情况下）能够理解和维护。
- 为维护者（包括 2 AM 时的你）而非自己写代码。
谨慎创新
- 创新是有成本的，应谨慎使用“创新代币”。
- 只在有独特价值的地方创新，其他地方应倾向于使用成熟、可靠的技术。
价值的可视化与倡导
- 优秀的成果需要被看见，代码不会替你说话，人会。
- 要让你的影响对他人可见，尤其是在你不在场时。
代码的最小化
- 最“好”的代码是你根本不需要写的代码。
- 在构建之前，思考“如果我们不这样做，会发生什么？”。
兼容性即产品
- 在大规模系统下，即使是 bug 也会成为用户的依赖。
- API 设计实际上是 API 退休设计，需要考虑兼容性、时间和用户体验。
聚焦可控因素
- 在大型组织中，很多变量不可控，应专注于自己的影响范围。
- 保持理智和高效的关键在于聚焦可控之事。
抽象的代价
- 抽象会转移复杂性，而非消除它，当问题发生时，你仍需要理解底层。
- 持续学习“更低级”的知识，以应对抽象失效的情况。
教学即学习
- 写作和教学是促进理解的有效方式，能暴露自己知识的不足。
- 尝试用简单的方式解释事物，是检验和深化理解的捷径。
“粘合剂”工作的价值与可见性
- 文档、入职、跨团队协调等“粘合剂”工作至关重要，但容易被忽视。
- 要将这些工作视为可见的影响，而非仅仅是“乐于助人”。
避免轻易获胜
- 如果总是轻易获胜，可能意味着积累了“沉默的阻力”。
- 真正的对齐需要时间、理解和妥协，而非赢得争论。
度量与目标
- 任何被量化的指标都会被“博弈”。
- 在衡量时，应同时关注速度和质量/风险，并注重趋势分析。
承认未知
- 领导者承认“我不知道”能创造一个更安全的环境，鼓励团队成员也敢于提问。
- 好奇心和承认未知才能促进团队学习。
人脉网络
- 人脉是你最重要的长期资产，远比任何一份工作都持久。
- 以好奇和慷慨的态度建立和维护人脉。
性能提升源于移除
- 许多性能提升来自于移除不必要的工作，而非增加技术复杂度。
- 最快的代码是那些从不运行的代码。
流程的本质
- 良好的流程应简化协调、降低失败成本，而非制造官僚主义。
- 如果流程的价值无法解释，它可能只是负担。
时间价值
- 职业生涯后期，时间成为比金钱更宝贵的资源。
- 有意识地权衡时间和回报，避免过度追求金钱而牺牲宝贵的时间。
复利效应
- 专业技能的提升需要刻意练习和时间积累，没有捷径。
- 将职业生涯视为复利增长，而非购买彩票，持之以恒会带来长远回报。
核心思想
- 保持好奇心、谦逊，并始终记住工作关乎人（用户和团队成员）。
- 工程师的职业生涯足够长，可以从错误中学习，并分享经验。

Refs

FE Bits Vol.21 | 博客圣诞特效与 Moe Copy 更新，AntV 推出 Infographic

2025-12-31T13:48:47Z

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

今天是 2025 年 12 月 31 日，星期三。

元旦放假，周刊停更一期，所以今天更新上周天的。

年终总结在写了在写了，但是今天就不一定写的出来了。

个人项目

这周圣诞节，前端圈都没什么动静，不过正好我做了一堆自己项目的更新。

今天一总结，发现真不少啊。

发了一篇博客「Worktrunk 完全指南：让 Git Worktree 和 Claude Code 和平共处」因为我非常喜欢这个工具于是写了一篇博文卖安利～

博客项目

首先是博客的一些更新

LQIP

一开始想在博客中，实现类似 Minimal CSS-only blurry image placeholders 的 CSS-only LQIP（低质量图片占位符），使用单个 CSS 自定义属性 --lqip 编码图片的模糊预览。

这篇文章的技术原理是使用 20 位整数编码图片信息（8 位 Oklab 基础色 + 12 位亮度分量），在 CSS 中通过位运算解码（mod(), round(down), pow() 等），使用径向渐变叠加渲染模糊效果，配合二次缓动实现平滑过渡。

我选择简化一些的实现，不追求 CSS Only 了，因为打算先做博客内部的图片，文章内部的外部图片等后续优化的时候再一起做，放上最终效果在这里：

需要运行一下 nr generate:lqips 就会生成一个 lqips.json 的 json 文件在 assets 下，若没有这个文件则不提供占位符～

https://blog.cosine.ren/post/astro-lqip-implementation

后续看到有人提出更好的实现，已加入 TODO！

https://x.com/radishzz_/status/2002647033086464476

圣诞特效

究～极～花里胡哨！！
圣诞节到了，想给博客加点节日氛围。最终实现了一套可开关的圣诞特效模块，包括雪花和彩灯以及圣诞配色方案～

雪花效果是从 Shadertoy 上的 Just snow 学来的！
彩灯是参考 Toby J 的 CodePen 实现，优化调整了性能，调整为圣诞配色（红、绿、金）

我知道肯定会有人说花里胡哨所以我加了开关，欢迎品鉴～

https://blog.cosine.ren/post/astro-christmas-effects

如果嫌弃干扰阅读了，可以点击开关关掉～

注意看这个雪是双层的，内容容器夹在雪花中间，远景雪花在文章后面飘过，近景雪花在前面飘过，配合视差效果，感觉还挺满意的。

上面的雪花特效是最初的版本，现在的版本是后来又做了一些优化。

https://x.com/_cosine_x/status/2004244071393714301

使用指南和反馈

把博客的使用指南先简单搓出来了，然后换了一下切换昼夜模式的过渡动画，从左往右扫过去的感觉。
虽然说现阶段还不建议使用，但如果想 fork 出去改改还是都可以的，预计元旦假期我会重点进行重构和性能优化、然后开放一个清理后的仓库方便部署，到那个时候就可以玩耍了！

https://x.com/_cosine_x/status/2005653281541103707

然后发现 alma 的反馈页面看起来很棒，看了下是用的 featurebase.app
于是我也想试试这个，给博客主题做了一个反馈页面（有没有人用再说吧）：

https://cos.featurebase.app/

Moe Copy AI 插件更新

Moe Copy AI 插件也大改版了，然后收到了好朋友的 PR！发布了 v0.2.0，变得越来越好用了

https://github.com/yusixian/moe-copy-ai/releases/tag/0.2.0

https://x.com/_cosine_x/status/2005191726290608638

PR 在原本的直接 fetch 的基础上，提供了「后台打开新 tab」和在「当前页面跳转」来获取
下一页按钮选择器改用 XPath，还新增了自动翻页功能，支持跨页批量抓取，感谢 @hyoban 贡献的这个PR #15。

欢迎使用！欢迎反馈！文档在这里。

https://chromewebstore.google.com/detail/moe-copy-ai/dfmlcfckmfgabpgbaobgapdfmjiihnck

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

文章与社区动态

antvis/Infographic：蚂蚁集团 AntV 团队推出新一代声明式信息图表（Infographic）生成与渲染框架，旨在通过 AI 驱动让数据叙事更简单。
How I use AI agents to write code：好文，我也是这样转变的（？）或者说没有转变。有趣的是 AI 出来之后我觉得编码热情或者说想构建产品的欲望越来越强烈了。
Frontend Wrapped 2025: The 10 storylines that defined the year - LogRocket Blog：2025 年前端世界发生了不少大事，这篇文章盘点了那些塑造了这一年的十大热点。
Ever wanted to have a rotating rainbow segments border：介绍并对比了使用 CSS conic-gradient() 与 SVG <rect> 两种技术实现旋转彩虹分段边框的方法。
require(esm) in Node.js: implementer's tales：Node.js 核心贡献者 Joyee Cheung 深入解析 require(esm) 功能实现过程中遇到的关键挑战与解决方案。

CSS 新特性

补全不足，CSS 锚点定位支持锚定容器回退检测了：Chrome 143+ 引入 CSS 锚点定位回退检测机制，可自动检测容器布局变化并动态切换定位方向，解决传统锚点定位在空间受限时的显示异常问题。
今日学习 CSS style()样式查询及其 range 范围语法：介绍了 CSS @container 的样式查询 (Style Query) 新能力，展示从变量匹配到范围语法 (Range Syntax)、再到针对自身元素匹配的进阶使用技巧。

text-decoration-inset

MDN：text-decoration-inset
兼容性：实验性，文中仅提到 Firefox 146+ 下有效。
介绍文章：text-decoration-inset is Like Padding for Text Decorations

https://codepen.io/mrdanielschwarz/pen/VYaPVgr

CSS 中的 text-decoration-inset 允许开发者像设置内边距一样裁剪文字装饰（如下划线）的左右边缘，从而实现文字装饰与文字内容的精确对齐。该属性支持 em 等相对单位，使装饰能随字体大小缩放，并且可以配合动画和过渡效果，创造出更多原生的、引人注目的文字装饰动态效果。

工具

BentoPDF: 功能强大、注重隐私的开源 PDF 工具集，可自部署，提供超过 50 种 PDF 操作工具，覆盖编辑、转换、安全、优化等多个维度。

Codepen 精选

CSS-Only Stacking Cards

使用 CSS Scroll-Timeline 实现的卡片堆叠，无需 JavaScript：

https://codepen.io/karabharat/pen/YPWXqmx

https://x.com/i/status/2005503369222512856

easy rainbow segments card border cases

https://codepen.io/thebabydino/pen/RNRPEqb

文章：Ever wanted to have a rotating rainbow segments border

实现一个由等分彩虹色段组成的旋转边框效果。作者指出当容器的宽高比远离正方形时，单纯使用 CSS 的 conic-gradient() 方法无法保持色段等分，且分隔线难以垂直于边框。因此，文章提出了更优的解决方案：使用 SVG 的 <rect> 元素来精确控制每个色段的形状和动画，从而获得更稳定、更完美的视觉效果。

FE Bits Vol.20 | 博客更新与 FEDAY 见闻，Shadcn Create 发布

2025-12-21T14:40:00Z

本期网址 https://blog.cosine.ren/post/weekly-20
本周刊更新时间期望是在每周天。
推荐订阅本周刊的 RSS。
公众号前端周周谈 FE Bits，点击阅读原文链接可查看原文。
QQ 讨论小群 598022684，讨论前端技术 & 生活，也可在群里投稿自己的文章，随意加入，比较偏向粉丝群的性质～
本周刊文章内容同时也开源在 fe-bits-weekly，欢迎关注。

今天是 2025 年 12 月 21 日，星期天。

这周相当的充实，去参加了 FEDAY 2025，之前没参加过这种活动，很好奇，加上反正今年去了好多活动，感觉这种活动偶尔参加一下还很有意思的，而且顺便也能去长沙旅游一趟，就去了。

参加完的感受是今年的主题特别特别多与 AI 相关的，可以看出 AI 对前端的助益是真的很大，我是比较 AI 乐观主义的，觉得 AI 能帮我省下来很多时间干我想干的事，并且也取代不了前端，但真的需要多进行学习，不断学习。

https://cos.afilmory.art/photos/MVIMG_20251220_090431

https://cos.afilmory.art/photos/IMG_20251219_183401

https://cos.afilmory.art/photos/IMG_20251219_182549

然后呢，这周将 Fumadocs 里我很喜欢的移动端 header 目录搬到我的博客 astro-koharu 了，我很喜欢～

然后为图片加上了 LQIP，写了在 Astro 博客中实现 LQIP（低质量图片占位符）

然后将性能等，也优化了一下：

优化前	优化后

生态与社区动态

shadcn 发布 3.6：借助新的 npx shadcn create CLI 或者 New Project，现在可以使用 Radix UI 或 Base UI 来创建你自己的定制 shadcn 组件库了。

Storybook 安全公告：
又一个 CVE-2025-68429 7.3/10， Storybook v7+ 版本构建时可能会不小心把 .env 打包进去。
Vue start by birkskyum · Pull Request #6055：继 React 和 Solid 之后，TanStack Start 又新增了对 Vue 的支持。
Throttle individual network requests：Chrome DevTools 144 版本可以让你单独对每个网络请求限速进行调试。

小贴士

写了这么一段代码，想要一段可随高度变化可控制间距的虚线。

<svg
  className="pointer-events-none absolute bottom-0 left-px h-[calc(100%+1rem)] w-[1.5px]"
  viewBox="0 0 2 366"
  preserveAspectRatio="none meet"
  aria-hidden="true"
>
  <path d="M0.749978 365.5L0.750106 0" stroke="white" strokeOpacity="0.2" strokeWidth="1.5" strokeDasharray="5.25 5.25" />
</svg>

发现不对！高度特别小的时候挤在一块了。

咋办？使用 vectorEffect="non-scaling-stroke"

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Reference/Attribute/vector-effect

non-scaling-stroke 的使用可以看这篇文章：CSS vector-effect 与 SVG stroke 描边缩放

MDN 的官方解释是：该值修改了笔触的方式。通常，笔触涉及在当前用户坐标系中计算形状路径的笔触轮廓，并用笔触颜料（颜色或渐变）填充轮廓。该值的最终视觉效果是笔触宽度不依赖于元素的变换（包括非均匀缩放和剪切变换）和缩放级别。

为什么不用 border-style: dashed; ？因为他没有办法定义线段的长度和大小，视不同实现而定。

             strokeOpacity="0.2"
             strokeWidth="1.5"
             strokeDasharray="5.25 5.25"
+            vectorEffect="non-scaling-stroke"
           />
         </svg>

完美实现！

使用 `vectorEffect="non-scaling-stroke"` 前	使用 `vectorEffect="non-scaling-stroke"` 后

文章与视频

React Compiler 的静默失败 (以及如何修复它们)：作者分享了在使用 React Compiler 过程中遇到的“静默失败”问题，即编译器在无法优化组件时不会报错，而是回退到标准 React 行为，这可能导致性能下降。为了解决这个问题，作者发现并利用了一个未文档化的 ESLint 规则 react-hooks/todo，通过将其设置为错误级别，可以在编译失败时中断构建过程。
使用 GSAP 构建响应式、滚动触发的曲线路径动画：这篇文章提供了一个好工具 Paths & Control Points，让开发者能够拖拽控制点实时调整曲线。
用 WebGPU 来造一场雪 | Cyandev：手把手教你如何用 WebGPU 在网页上下雪，兼顾性能与效果，让你的博客在圣诞带上节日色彩～
How to type React children correctly in TypeScript：还在为 React 中 children prop 的 TypeScript 类型定义挠头？这篇博文介绍了如何在 React 应用中如何正确使用 TypeScript 定义 children prop 的类型。
Different Page Transitions For Different Circumstances：这篇博文教你如何使用 View Transitions（视图转换）为多页应用程序（MPA）创建差异化的页面切换动画。
How AI Coding Agents Hid a Timebomb in Our App：一篇关于 AI 编程助手“无意间”在应用里埋下了一颗定时炸弹的故事：

一个由 AI 编程助手（AI Coding Agent）删除的代码注释，导致一个关键的 readOnly 属性被移除，进而引发了 React 组件的无限递归渲染。更糟的是，React 19 的 <Activity> 组件将这个 Bug 隐藏了起来，使其在数分钟内都不会崩溃，极大增加了调试难度。作者通过痛苦的调试过程，最终发现罪魁祸首是 AI 删除了注释，以及自己没有为关键的结构性约束编写测试。文章强调了在 AI 辅助开发背景下，测试而非注释，才是确保代码质量和安全的关键。

CSS 新特性

State, Logic, And Native Power: CSS Wrapped 2025：深入解读了 Chrome 团队发布的“CSS Wrapped 2025”年度总结报告，强调 CSS 正从单纯的样式语言向构建动态、强大应用的原生工具集转变，开启了一个激动人心的前端新时代。
Creating Scroll-Based Animations in Full view()：介绍了 CSS animation-timeline 属性中的 view() 函数，它允许开发者创建基于元素在滚动容器（scrollport）中可见性（visibility）的动画。
What Else Could Container Queries... Query?：容器查询（container queries）可不止查询尺寸那么简单，未来还有更多可能性等待探索！
🎥 2025 年所有浏览器支持的 11 个 CSS 新特性
Responsive List of Avatars Using Modern CSS (Part 2)：是 “使用现代 CSS 创建响应式头像列表”系列的第二部分，主要探讨如何利用 offset 或 transform 属性，结合 sibling-index() 和 sibling-count() 等 CSS 函数，实现一个响应式圆形头像列表的布局。

工具

Andy Clarke’s Toon Text：Andy Clarke 开发的一款卡通标题文本生成器，它可以生成具有卡通风格的文本，并提供 CSS 代码。
介绍文章还重点介绍了其核心功能 Splinter.js，它通过包裹每个字符的 <span> 标签，并加入 ARIA 属性，在实现逐字样式控制的同时，增强了可访问性，解决了传统工具可能导致辅助技术识别障碍的问题。

Raycast 插件：https://www.raycast.com/j3lte/css-tricks
介绍文章：Search CSS-Tricks Raycast Extension

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

Codepen 精选

https://x.com/Andersonmancini/status/2000589287515959496

Anderson Mancini(@Andersonmancini): 🎵 太阳出来了 ☀️
我终于完成了将我的“终极镜头光晕”移植到 #threejs WebGPU 的工作。性能简直令人难以置信，因为现在 threejs 已经将遮挡查询直接集成到了渲染管线中。如果你需要知道某个物体是否被遮挡，只需直接向 threejs 查询即可。文档中有示例。
这样一来，我就不再需要光线投射器来检测遮挡了，这就是性能大幅提升的原因。
如果您想查看结果：https:// planpoint-webgpu.vercel.app

https://x.com/Andersonmancini/status/2000589289868931516

CyberPopover 2025

https://codepen.io/jh3y/pen/yyNWGNG

在 Jhey Tompkins 这款 Codepen 中，点击闪烁按钮即可打开带有电子音效的 CyberPopover。作为 Jhey 的经典之作，这款 Pen 是可配置的！打开右上角的面板，即可进行设置。

https://codepen.io/daviddarnes/pen/bNbagPy

David Darnes 分享了一个快速演示，展示如何使用 Popover API 构建一个简单的照片灯箱，无需 JS，只需不到 30 行 CSS 代码。

Refs

FE Bits Vol.19｜站点新功能与 React 披露两个新的 RSC 漏洞

2025-12-14T12:50:00Z

本期网址 https://blog.cosine.ren/post/weekly-19
本周刊更新时间期望是在每周天。
推荐订阅本周刊的 RSS。
公众号前端周周谈 FE Bits，点击阅读原文链接可查看原文。
QQ 讨论小群 598022684，讨论前端技术 & 生活，也可在群里投稿自己的文章，随意加入，比较偏向粉丝群的性质～
本周刊文章内容同时也开源在 fe-bits-weekly，欢迎关注。

今天是 2025 年 12 月 14 日，星期天。

本周给我的博客站点增加了无需后端的相关推荐和 AI 摘要功能。

用 transformers.js 在本地算“语义相似度”，自动挑出最相关的 5 篇文章。

然后自己又实现了一下，支持排除特定文章（比如周刊），还可以选择是否把“正文”也纳入计算：

只用标题+描述：速度飞快，适合文章多的情况，但不是很准。
加上正文：效果明显更好，就是生成会慢亿些。

# 使用 Snowflake/snowflake-arctic-embed-m-v2.0 计算 168 篇文章（标题+描述）的时间
Done! Generated similarities for 168 posts in 4.1s

# 使用 Snowflake/snowflake-arctic-embed-m-v2.0 计算 168 篇文章（标题+描述+正文）的时间
Done! Generated similarities for 168 posts in 219.3s

这速度差别有亿点大，但是我个人很喜欢带正文的结果，效果显然会更好。

那有没有更折中的方案呢？于是我决定再加一个跑 AI 摘要的功能，使用 xsai sdk，本地 LM Studio 使用 qwen/qwen3-4b-2507 模型跑一遍，跑起来结果又快又好！新增文章通过缓存，只需要跑新增文章的摘要就行，而且效果跟使用正文差不多！

文章详情里还有个可折叠的摘要卡片，点开有打字机小动画（尊重无动画偏好）

都在构建时本地跑完 git 提交，线上零开销。后面会继续调模型和缓存等，优化一下，写的比较匆忙。

欢迎来试试新功能！精力有限还没有写部署文档等，但是有一篇尚未发布的让 AI 写的 astro-koharu-使用指南，可能会有错漏，但是大体配置上差不多，求 star～

https://github.com/cosZone/astro-koharu

很开心，忙里偷闲写这些东西，超级开心。

生态与社区动态

React Router's take on React Server Components：React Router 正在添加 RSC 支持。

你知道 React Router 正在添加对 React Server Components (RSC) 的支持吗？虽然目前还处于实验阶段，但距离正式发布已经非常接近了，而且我认为 React Router 对 RSC 的实现非常出色。

Three.js r182 released 📈：进行了全面升级，核心改动包括迁移到 ESLint 9、引入 flat config、对 WebGLRenderer 与 WebGPURenderer 进行多项性能与功能优化（如更高效的阴影映射、EAC 纹理支持、VSM 代码重构），节点系统得到显著改进（支持更多类型、优化缓存、引入 float packing/unpacking），同时大量 bug 修复、文档清理与示例更新，整体提升了代码质量、可维护性与渲染效率。

https://x.com/threejs/status/1998816106728010050

一些官方示例：

https://x.com/threejs/status/1998816109223723084

Deno 2.6: dx is the new npx：Deno 2.6 通过引入 dx（类似 npx）简化了包二进制的执行，新增细粒度权限控制与权限代理，使用 Go 编写的 tsgo 加速 TypeScript 类型检查，并支持 Wasm 源码导入。安全方面加入 deno audit 与 --socket，改进依赖管理与脚本审批。
微软推出 VS Code Insiders 播客：由 Visual Studio Code 官方团队打造，深度访谈开发者、产品经理以及社区贡献者，解密新特性、实验工具和 AI 驱动的工作流。

想知道世界上最受欢迎的代码编辑器背后究竟发生了什么吗？ VS Code Insiders Podcast 将为你揭开神秘面纱，带你深入了解塑造 Visual Studio Code 未来的功能、决策和人员。
使用 Chrome DevTools MCP，让您的编码代理调试浏览器会话：Chrome DevTools MCP 终于能让你的 AI 编程助手直接介入浏览器调试了，更丝滑了！好耶！

如需将 chrome-devtools-mcp 服务器连接到正在运行的 Chrome 实例，请使用 --autoConnect 命令行实参来设置 MCP 服务器

注意：在 Chrome M144 达到稳定版之前，您必须指定 --channel=canary

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest", "--autoConnect", "--channel=canary"]
    }
  }
}

为您希望看到的网络功能投票：现在，你可以通过点赞 (upvote) 来影响你最想看到的 Web 特性啦！

WebDX 社区组织推出了一项新功能，允许开发者直接通过“点赞 (upvote)”来表达对特定 Web 特性的需求，以帮助浏览器厂商优先考虑开发。虽然点赞多不代表直接采纳，但开发者的需求将成为浏览器厂商决策的重要参考因素。

你是否曾经在 Can I Use 网站上看到某个你非常想使用的功能被标记为红色，然后恨不得直接戳戳浏览器厂商，说：“嘿，我需要这个功能！”？现在你可以了。

WebDX 社区小组推出了一种新方式，让您可以直接表达哪些 Web 功能对您来说最重要。现在，您可以为希望在主流浏览器之间实现互操作的功能投票。

从今天起，您可以在 web.dev、 caniuse.com 和 webstatus.dev 上找到这些已集成的点赞功能。其他平台，例如 MDN，也在研究类似的集成方案。

React 在研究 React2Shell 过程中披露了两个新的 RSC 漏洞

React 在研究 React2Shell 过程中披露了两个新的 RSC 漏洞：CVE‑2025‑55184 与 CVE‑2025‑67779（高危 - 拒绝服务）以及 CVE‑2025‑55183（中危 - 源代码泄露）。这些缺陷可被恶意 HTTP 请求触发，导致服务器无限循环或泄露服务器函数内部代码。React 已在 19.0.3、19.1.4、19.2.3 版本中修复，受影响的框架与打包器（如 Next、React‑Router、Vite 等）亦需同步升级。

https://react.dev/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components

拒绝服务（高危）： CVE-2025-55184 与 CVE-2025-67779 (CVSS 7.5) 可被恶意 HTTP 请求触发，导致服务器无限循环
源代码暴露（中等）： CVE-2025-55183 (CVSS 5.3) 可能会泄露服务器函数内部代码，源代码中硬编码的 secret 可能会被暴露，运行时 secret 如 process.env.SECRET 不受影响。

官方解释称：

重大漏洞披露后，往往会发现后续漏洞。当一个重大漏洞被披露后，研究人员会仔细检查相邻的代码路径，寻找变种的利用技术，以测试初始缓解措施是否可以被绕过。
这种模式在整个行业中普遍存在。例如，在 Log4Shell 之后，随着社区对原始修复程序的审查，又报告了其他 CVE。额外的披露可能会令人沮丧，但这通常是健康应对机制的标志。

只有源代码中的 secret 才能被泄露。
源代码中硬编码的 secret 可能会被暴露，但运行时 secret 如 process.env.SECRET 不受影响。
暴露代码的范围仅限于服务器函数内部的代码，这可能包括其他功能，具体取决于捆绑器提供的内联支持程度。
一定要核对生产包。

https://nextjs.org/blog/security-update-2025-12-11

Next 用户可以使用 npx fix-react2shell-next 进行升级。

我看到这个消息的第一想法嘛，如下：

https://x.com/_cosine_x/status/1999356620732793076

https://x.com/_cosine_x/status/1999359307482300511

Shopify Editions Winter 2026

这是每半年固定发布，用于介绍 Shopify 又做了哪些功能更新的网站！

性能和兼容性可能相对一般，但做了完整的移动端适配，纯炫技网页，浓缩了超多细节和彩蛋和 CSS 新特性。

https://www.shopify.com/editions/winter2026

彩蛋 1：点击钥匙，会弹出一个新的无边框窗口来进行解锁。应该用到了跨窗口通信

以前有一个类似的尝试用 three.js 实现了这个跨窗口的粒子动画，我猜应该是和这个一个原理，GitHub 仓库

彩蛋 2：解锁后这个窗口还能跟着原来的页面滚动。

彩蛋 3：点击帽子

技术解析：

jhey ʕ•ᴥ•ʔ(@jh3yy)：今年的版本页面真是太棒了——有太多精彩的细节了 👨‍🍳
很荣幸能参与其中，团队表现出色 👏
除了令人惊叹的 WebGL 技术之外，还巧妙地运用了 CSS 容器查询、计数器、过渡/动画和 SVG！

文章与视频

我在制作微型 GLSL 演示时学到的一系列技巧和技巧：作者分享了自己在制作 512 字符限制的微型 GLSL（OpenGL Shading Language）图形演示过程中，积累的一系列图形渲染技巧与心得。
TypeScript 7 的进展 - 2025 年 12 月：TypeScript 团队把编译器和语言服务迁移到原生代码（代号 Project Corsa），现在已提供可在 VS Code 中使用的预览版。编辑器功能完整、性能提升显著，编译器在类型检查和增量构建上几乎全兼容 5.9，并实现十倍左右的速度提升。文章还列出了与 5.9 的差异、即将废弃的选项以及后续路线图，强调 6.0 将是基于旧代码的最后一次发布，之后所有重点转向 7.0。

今年早些时候， TypeScript 团队宣布，我们一直在将编译器和语言服务移植到原生代码，以充分利用原生代码的优势，从而获得更佳的原始性能、内存使用效率和并行处理能力。这项工作（代号“Project Corsa”，即将更名为“TypeScript 7.0”）是一项意义重大的工程，但我们在过去的几个月中取得了长足的进步。我们很高兴向大家介绍目前的进展，并展示全新的 TypeScript 工具集如今的“真实”面貌。
Do's and Don'ts of useEffectEvent in React：了解 React 新增的 useEffectEvent hook，用来在 Effect 中获取最新的 props / state 而不触发 Effect 重新执行。本文列举了它的使用场景、何时可使用与何时不可使用与迁移建议。
Manage a Next.js Monorepo with Prisma：本文展示了使用 Next.js 与 Prisma 在 Postgres 上实现完整的 CRUD Pizza 订餐系统一套流程。（是比较完整的一篇实践，小项目这么折腾全栈是可以的，但是大项目的话，写后端需要慎重～）
2025 回顾：Web 性能有什么新变化？：轻松回顾 2025 年前端性能的变化与新工具，包括 Core Web Vitals 指标的跨浏览器推进、新的 Lighthouse 与 DevTools 检测能力、浏览器 API（如 Scheduler API、软导航观测）的演进、CrUX 和实时监测数据的细化、对图像格式（如 JPEG XL）的最新态势，结尾展望了 2026 年可能的方向（更多 AI 集成与更完整的软导航指标支持）。
Using CSS to fix the irradiation illusion：在深色背景下，白色文本会显得比同等粗细的黑色文本更粗。这种现象叫做“辐照错觉”（irradiation illusion），本文介绍了如何利用可变字体（variable fonts）的 GRAD 轴（grade axis）在不改变字形大小的情况下调整文本的可感知粗细。
Tailwind CSS: Targeting Child Elements (when you have to)：本文详细介绍了如何利用 Tailwind 的任意变体 (Arbitrary Variants) 和 [&_selector] 语法来实现子元素样式控制。

CSS 新特性

CSS Wrapped 2025：一份来自 Chrome 团队的年度 CSS 功能大盘点，看看明年你的 CSS 能玩出什么新花样！

https://chrome.dev/css-wrapped-2025/

Fit width text in 1 line of CSS：CSS 新属性 text-grow 用一行 CSS 就能让文本自动填满容器宽度，告别过去的复杂方案，不过它还在实验阶段。
Scrollytelling on Steroids With Scroll-State Queries：使用 CSS 的新滚动状态查询，让网页故事像游戏一样交互。
CSS Scroll-Triggered Animations are coming to Chrome!：Chrome 浏览器将在明年初推出纯 CSS 实现的滚动触发动画。这是一种基于时间，并在特定滚动偏移量（scroll offset）触发的动画，与现有的滚动驱动动画不同。这项功能有望在 Chrome 145 版本正式发布，它将替代部分 IntersectionObserver 的用途。
CSS progress()函数简介：本文介绍了 CSS 新增的 progress() 函数，它能将指定范围内的值映射为 0 到 1 之间的进度值，兼容性一般，还处于 Chrome 的实验阶段。

小贴士

使用 scrollbar-gutter CSS 属性可以为滚动条预留空间，防止滚动条出现或消失时布局发生偏移。

可以将 body （或任何其他容器元素）上的 scrollbar-gutter 属性设置为 stable，以确保始终为滚动条预留空间，防止布局偏移。

scrollbar-gutter 属性是 CSS 中一个相对较新的属性，自 2024 年 12 月起，主流现代浏览器都支持它。因此，可以放心地使用它来渐进式的提升网页的用户体验。

https://www.amitmerchant.com/one-css-trick-to-eliminate-scrollbar-layout-shifts/

工具

remend：Vercel 推出新 npm 包 remend，自动修复流式 Markdown 的破碎语法，尤其适用于处理 LLM 等应用。提取自 Vercel 的 Streamdown 库，该库是 react-markdown 的即插即用替代方案，专为 AI 驱动的流媒体应用而设计。（PS：与 Streamdown 同类型的 Simon He 的 markstream-vue 也很好！）

React Grab

React Grab：React Scan 的作者 Aiden 出的新工具，它允许你从应用组件中“抓取”上下文，并将其提供给你选择的智能体，以便进行详细的修改。

CLI 设置只需要在你的项目根目录下运行这个命令，将检测您的框架并自动添加必要的脚本。

npx grab@latest init

Claude Code 的设置的话，服务器通过 4567 端口运行，并与 Claude Agent SDK 接口连接。将以下脚本添加到 package.json 中：

{
  "scripts": {
    "dev": "npx @react-grab/claude-code@latest && next dev"
  }
}

Codepen 精选

霓虹正弦波效果 GLSL

Fabio E Zola 的这段 GLSL 动画中，闪烁的正弦波脉动着。您可以暂停动画、截屏，或从顶部的控制面板切换像素比例。

花瓣

https://codepen.io/rileyjshaw/pen/xbVQQGr

Riley Shaw 分享了一朵梦幻般的 CSS 和 JS 花朵，花瓣如万花筒般旋转 🪷

伪 3D 旋转球切换（仅 CSS）

https://codepen.io/alvaromontoro/pen/xbVydXq

Alvaro Montoro 巧妙地通过移动点阵图案来模拟旋转动画，这个“切换组件是用 HTML 和 CSS 创建的。没有图片，也没有 JS。”

Refs

FE Bits Vol.18｜RSC 爆 CVE-10.0；Bun 被 Anthropic 收购

2025-12-07T11:35:58Z

本期网址 https://blog.cosine.ren/post/weekly-18。
本周刊更新时间期望是在每周天。
推荐订阅本周刊的 RSS。
公众号前端周周谈 FE Bits，点击阅读原文链接可查看原文。
QQ 讨论小群 598022684，讨论前端技术 & 生活，也可在群里投稿自己的文章，随意加入，比较偏向粉丝群的性质～
本周刊文章内容同时也开源在 fe-bits-weekly，欢迎关注。

今天是 2025 年 12 月 7 日，星期天。

又给网站优化了一下，加上了内嵌链接的预览、Codepen 链接的预览等，越来越有模有样了。

https://github.com/cosZone/astro-koharu/pull/30/files

然后给 RSS 页面的样式也美化了一下:

https://github.com/cosZone/astro-koharu/commit/61c0a9c7da78ae241918eea2595aba48289734ed

然后，距离我 8 月份写下《我的 Claude Code 使用小记》已经过去了近 4 个月，在这段时间的高强度使用后，是时候分享一些新的体验了。
很短，并且比较支离破碎流水账，主要是为了记录。

https://blog.cosine.ren/post/my-claude-code-record-2

生态与社区动态

New in Chrome 143：Chrome 143 发布，带来了 CSS 锚定后备容器查询
（Anchored fallback container queries），改进了背景图像定位语法（可在 background-position-x/y 长属性中直接使用相对边位置语法 left 30px、bottom 20px），并新增对 font-language-override 的支持。
Bun is joining Anthropic：Bun 宣布被 Anthropic 收购，将作为 Claude Code、Claude Agent SDK 等产品的核心基础设施。
TanStack AI：TanStack 家发布了 TanStack AI Beta 版，一个完全开源的 AI SDK，提供统一接口，支持多家 AI 提供商（如 OpenAI、Anthropic、Gemini、Ollama 等）。它不是云服务，而是一个纯粹的开源生态系统，为开发者提供类型安全（type-safe）、可扩展、可观测的工具，可自由选择后端和框架集成，不受厂商限制。
MinIO 宣布进入维护模式，不再接受任何新功能、改进或拉取请求｜附替代品列表：MinIO 宣布进入维护模式，不再增加新功能、接受拉取请求或积极处理 Issues，只保留必要的安全维护。作为广受开发者喜爱的开源 S3 兼容对象存储方案，MinIO 的“停更”意味着自建 S3 生态需重新选择，文章列出多个开源与商用替代品，包括 SeaweedFS、Garage、Ceph、Swift 等，社区有部分 Fork 尝试延续这一项目。
2025 年 11 月：ViteLand 最新动态回顾：ViteLand 2025 年 11 月回顾，重点介绍了 Vite 8 Beta 版发布及核心架构更新。Vite 现已采用 Rust 编写的 Rolldown 作为新打包器，替代原本的 esbuild + Rollup 组合，并搭配同团队开发的 Oxc 实现完整端到端 (End-to-End) 工具链。

React Server 组件中的严重安全漏洞

https://react.dev/blog/2025/12/03/critical-security-vulnerability-in-react-server-components

React 团队紧急披露一项严重的安全漏洞，提醒开发者立即升级相关包以防远程代码执行风险

该漏洞允许未经身份验证的远程代码执行，其原理是利用 React 解码发送到 React 服务器函数端点的有效负载的方式中的一个缺陷。即使您的应用没有实现任何 React 服务器函数端点，但如果您的应用支持 React 服务器组件，它仍然可能存在安全漏洞。

该漏洞已披露为 CVE-2025-55182 ，CVSS 评级为 10.0，存在于以下版本的软件中：19.0、19.1.0、19.1.1 和 19.2.0。
一些 React 框架和打包工具依赖于存在漏洞的 React 包，受影响的 React 框架和打包工具包括： next 、 react-router 、 waku 、 @parcel/rsc 、 @vitejs/plugin-rsc 和 rwsdk。

https://nextjs.org/blog/CVE-2025-66478

Next.js (App Router 用户) 由于 Next.js 深度集成了 RSC，以下用 React Server Components 的版本均受影响（CVE-2025-66478）：Next.js 15.x、Next.js 16.x、Next.js 14.3.0-canary.77 及更高版本的 canary 版本

Next.js 13.x、Next.js 14.x 稳定版、Pages Router 和 Edge Runtime 不受影响。

详细漏洞分析与复现：POC for CVE-2025-55182 that works on Next.js 16.0.6，演示了一个可在 Next.js 16.0.6 上利用 React Server Components 反序列化实现的 RCE 漏洞的概念验证 (POC)。

文章与视频

Writing a good CLAUDE.md：教你怎么写出既聪明又高效的 CLAUDE.md 文件，让 Claude 真正懂你的代码库。
React has changed, your Hooks should too：该文章介绍了几个在 React 18 时代该用的 hook，如 useSyncExternalStore、useDeferredValue、useEffectEvent 等，鼓励开发者更多关注派生状态（derived state）而非副作用（side effects），迎接以数据为中心的 React 架构。
AI 编程生态：Anthropic 收购 Bun 意味着什么？：以 Anthropic 收购 Bun 为引子，分析了 AI 编程生态的未来趋势。
Getting Creative With “The Measure”：一篇讲述如何用排版中的 “measure（文本行长）” 重新思考网页布局，让设计更具阅读舒适度与一致性的文章。
scrollbar-gutter: stable：Chris Coyier 探讨了使用 scrollbar-gutter: stable; 修复内容跳动问题的利与弊，并提出一种基于 Scroll State 查询的新思路。
The Deep Card Conundrum：本文由 Amit Sheen 撰写，讲述他如何在纯 CSS 的限制下实现具有真实 3D 深度和裁剪效果的“Deep Card”。传统做法会因 overflow: clip 扁平化 3D 空间而失败。作者在尝试数年未果后，受到 Cubiq 的启发，用 perspective-origin 动态校正视角，实现了既可保持 3D 空间又可裁剪内容的完美效果。这一方案不仅重燃了纯 CSS 的创造力，也提醒开发者，不要过早排斥某些特性，真正的创新往往在规则之外。

我喜欢这个解决方案，不仅因为它有效（而且效果非常好），还因为它教会了我一个谦卑的教训。
我曾一度认为 perspective-origin 是个“坏”属性。我对它抱有抵触情绪，因为我只把它看作是造成图像失真的根源。我一心只想找到制作 3D 的“正确”方法，却忽略了真正能解决问题的工具。
Cubiq 并没有这种偏见。他看到的是一个数学问题：“我需要当旋转方向为 Y 时，投影看起来要像 X。”然后他找到了控制投影的属性。

CSS 新特性

Non-Square Image Blur Extensions：教你用最简洁的 CSS，为非正方形图片打造漂亮的模糊背景扩展效果。
Masonry: Things You Won’t Need A Library For Anymore：文章介绍了很多当下已无需依赖库的 CSS 特性，并且重点介绍即将登场的内置 CSS Masonry 布局能力。
Fizz Buzz using Modern CSS (no HTML)：这篇文章展示了一个用纯 CSS 实现 Fizz Buzz 的实验，利用现代 CSS 特性如（counter-reset、自定义属性与 @keyframes 动画），实现了对 3 与 5 的可整除判断、条件渲染以及自动递增显示。这是一个仅在 Chrome 中能运行的有趣实验，展示了 CSS 逻辑化表达与动画控制的潜力。

工具

data-peek：一个为开发者设计的轻量级桌面数据库客户端应用，支持 PostgreSQL、MySQL 与 Microsoft SQL Server。功能包括 SQL 查询编辑、多标签页、行内编辑、ERD 关系图可视化、查询计划分析、快捷键等。采用 Electron + React + TypeScript 技术栈构建，UI 使用 shadcn/ui 与 Tailwind CSS。项目开源（MIT License），鼓励社区贡献并提供商业使用许可。
slopus/happy：一个能让你随时随地操控 Claude Code 和 Codex 的开源客户端，手机、网页无缝切换，安全加密又高效。

Codepen 精选

Swiper

https://codepen.io/stolinski/pen/MYyrLgB

这个 Codepen 例子使用了现代 CSS 的 Scroll Snap (滚动捕捉) 和 Container Queries (容器查询) 特性，来实现类似原生应用的滑动操作（如左滑删除、右滑收藏）

虽然 CSS 处理了滑动交互，但浏览器默认的滚动位置通常是 0（最左边）。因为左边有一个按钮，所以默认会显示左边的红色按钮。这段 JS 代码在页面加载时，自动将滚动条位置设置到中间元素的位置，确保用户一开始看到的是正常内容，而不是操作按钮。

这种方式比传统的监听 touchmove 事件来计算位移要流畅得多，因为滚动是在合成线程上处理的。

视频讲解在这里

Cinematic Ocean Scroll Scene

https://codepen.io/filipz/pen/dPMejVp

在这个由 Filip Zrnzevic 创作的交互式 Three.js/GSAP Pen 中，您可以漫步于 JavaScript 海洋，欣赏日落美景，感受宁静祥和的氛围。别忘了尝试各种控件，打造属于您自己的独特体验。

Animated Hover Disclosures

https://codepen.io/jh3y/pen/XJWNMOO

jhey ʕ•ᴥ•ʔ(@jh3yy): 在 :focus / :hover 时过渡 CSS grid-template-column 意味着父容器不会改变大小 🏅

这是我见过最丝滑的手风琴式卡片展开效果！核心技巧是利用 CSS Grid 的 fr 单位进行布局，通过 JavaScript 动态修改 grid-template-columns（如 10fr 1fr 1fr...），配合 CSS transition，实现卡片展开/收缩时父容器尺寸恒定不变的平滑动画。这比传统的改变 width 或使用 flex-grow 更优雅，因为 fr 单位天然按比例分配剩余空间。

🎄

https://codepen.io/creativeocean/pen/zxqEWYd

Tom Miller 用这段精美的 JavaScript 圣诞树点亮视频拉开了节日季的序幕。将鼠标悬停在树上，即可让它闪耀夺目！

Refs

FE Bits Vol.17｜WebGPU 主流浏览器全支持，AntD 6 正式发布

2025-11-30T12:41:44Z

本期网址 https://blog.cosine.ren/post/weekly-17
本周刊更新时间期望是在每周天
目前推荐使用 Folo 订阅本周刊的 Quaily RSS。
公众号前端周周谈 FE Bits，点击阅读原文链接可查看原文。
QQ 讨论小群 598022684，日常讨论前端技术 & 生活，也可在群里投稿自己的文章，随意加入，比较偏向粉丝群的性质～
本周刊文章内容同时也开源在 fe-bits-weekly，欢迎关注。

今天是 2025 年 11 月 30 日，星期天。

给博客优化了一下 UI，代码块和列表、标题的样式都加上了，然后给博客主题换了个名字，正式一些。

现在的主题叫 astro-koharu，博客的正式地址也挪到了 blog.cosine.ren，很开心。

“小春日和” （こはるびより）指的是晚秋到初冬这段时期，持续的一段似春天般温暖的晴天。也就是中文中的“小阳春”。
灵感来自 Hexo 的 Shoka 主题，但不再追求一比一复刻，而是保留它的优点，用更轻量的技术栈，做一款属于自己的个人博客主题。

下一步打算自己弄个评论系统，Remark42 感觉没动力用，想参考 Valine 自己弄一个，然后把旧的评论迁移过去。

生态与社区动态

主流浏览器现已支持 WebGPU：WebGPU 现已在主流浏览器全面支持了，但是 Safari 是 iOS 26 才支持，而且 Safari 移动端给的显存嘛……少少的。
Edge 终于支持网站级扩展开关：新增「允许在此网站使用扩展」功能｜可针对任意网站，一键关闭所有扩展：Edge 出了个实用小功能，可以对单个网站一键关掉所有扩展（这下真的是只要你不做就会有浏览器帮你做这个功能了，想给我那个破插件加一直懒得加来着，Chrome 能不能跟进啊）
npm 再次爆发 “Shai Hulud” 供应链攻击，利用 post-install 脚本窃取 token。
TanStack 最近发布了 TanStack Pacer，这是一个框架无关的性能优化工具集，提供防抖、节流、限流、队列管理与批处理等核心原语，适用于任何 JavaScript 框架。
它提供了一个专用的 React 适配器（@tanstack/react-pacer），在核心 Pacer 工具之上提供了一组易于使用的 hook，例如 useDebouncedValue、 useThrottledCallback 、 useQueuedState 和 useBatcher。

Ant Design 组件库发布 v6

🎉 Ant Design 6.0 来了！ 🎉

单开一个标题以表尊重～

React 版本提升：最低要求 React 18，推荐使用 React 19。
启用 React Compiler：在构建产物中优化性能，开发者可自行选择是否开启。
纯 CSS Variables 样式架构：不再兼容 IE，样式实现零运行时（zeroRuntime）模式，支持实时多主题切换。
组件语义化结构：所有组件 DOM 结构优化，支持函数式类名配置 (classNames) 与内联样式 (styles)，提升定制能力与可维护性。
移除废弃 API：彻底移除 v4 遗留逻辑，统一 API 命名，同时兼容 v5 的使用方式。

新组件与功能增强

Masonry 瀑布流组件：优化图片展示与卡片排布体验。
Tooltip 支持平移切换：多内容提示实现滑动过渡。
InputNumber spinner 模式：交互式加减按钮布局更直观。
Drawer 支持拖拽：用户可调整抽屉大小。
模糊蒙版背景：所有弹层默认使用模糊效果，可按需关闭。
不再支持 IE，建议替换废弃 API。

One More Thing —— Ant Design X 2.0

面向 AI 场景的组件库同步升级，提供更智能的交互能力。
新版本强化渲染性能与灵活性，是探索 AI 驱动界面的关键工具。
更多详情可参考 🎉 Ant Design X 2.0 正式发布了 🎉。

Better Auth v1.4

Better Auth 1.4 发布，引入了无数据库的 Stateless Auth、SCIM Provisioning、OAuth 自定义状态、数据库 joins 优化、JWT 密钥轮换、API Key 二级存储、CLI 索引支持、SSO 域名验证等众多特性。此外，还推出了支持 UUID 主键、强化的邮箱变更流程、新的错误页、更好的插件结构和多项安全改善。

文章与视频

从「写代码」到「验代码」：AI 搭档写走 3 年，我踩出来的协作路线图：在推上看到一篇好文章，写给已经在或准备在真实生产项目里用 AI Coding 的后端 / 全栈工程师和技术管理者。它不会教你「按钮在哪里」「哪个 prompt 最神」，而是想在大约 15 分钟里，帮你搞清楚三件事：
- 哪些任务交给 AI 最「划算」；
- 怎么让项目本身变得更「AI 友好」，提高一次命中率；
- 当生成不再是瓶颈时，工程师应该如何设计验证流程，把时间花在真正值钱的地方。
谈谈不自律的良好生活 - 少数派：很温柔的文章，提出「自洽而非自律」，「好好生活」不靠逼迫，而靠理解与自洽。
入选年度我最喜欢的文章，值得停下来，慢慢看。
The Performance Inequality Gap, 2026：作者继续延续多年系列，对 2026 年移动与桌面设备的性能、网络条件及网页负载趋势进行分析。
核心观点是：移动端尤其低端 Android 设备的硬件与网络改善速度，赶不上网页体积膨胀的速度。
Why use React?：一篇发问式思考文章，探讨为什么开发者选择 React，以及这项选择对前端用户体验意味着什么。作者倡导让框架留在服务器，充分利用浏览器本身的强大功能。
Migrating 6000 React tests using AI Agents and ASTs：一次关于用 AI Agents 和 AST 自动迁移 6000 个 React 测试的实战记录，是一篇好文章。
作者公司使用旧版 React Testing Library 编写了 970 个测试文件，总计 6000 个多测试用例。而升级至 v14 后 API 完全异步化，行为变化大，手动迁移代价极高，于是作者决定尝试用 AI 辅助完成大规模迁移。
比较感慨的是其中的迁移过程，最后一周时间共执行 50 次迁移，形成 50 个独立 PR，每个 PR 半小时。作者展望未来 AI 将进一步解放开发者，从“重复劳动”转向更有创造力的工作。
以 0.0001 美分的价格干掉 Next.js 服务器：Harmony Intelligence 团队发现了一个未经身份验证的拒绝服务 (DoS) 漏洞，该漏洞仅需一个 HTTP 请求和极少的资源即可导致自托管的 Next.js 服务器崩溃。通过限制请求大小的反向代理可以防止此攻击；仅靠速率限制不足以提供充分的保护。
受影响范围：所有带有中间件的自托管 Next.js 服务器（Vercel 托管的不受影响）。
受影响版本：≤15.5.4 的旧版本。
缓解措施：升级/ 配置诸如 nginx 反向代理限制请求体大小
用代码和 Git 管理 DNS 记录 —— DNSControl 和 GitHub Actions CI/CD 实践
写在 PicGo 即将 8 周年之际：也是一篇很有「情感」的文章啊。

CSS 新特性

巧用CSS ::details-content伪元素实现任意展开动画：聊聊 <details> 元素这几年新增加的 ::details-content 伪元素，使得内容展开收起可实现平滑动画。同时讲解了内容锚点（hash）自动展开机制，以及 scroll-margin-block-start 的小技巧。
light-dark() isn't always the same as prefers-color-scheme：作者发现新的 CSS 函数 light-dark() 并非 prefers-color-scheme 的替代品，它们在实现逻辑上有细微却重要的差异。prefers-color-scheme 更偏向全局系统偏好，而 light-dark() 更适合组件级主题控制。
How to Add and Remove Items From a Native CSS Carousel (…with CSS)：本文介绍如何利用 CSS Overflow Module Level 5 的新特性（如 ::scroll-button() 与 ::scroll-marker）创建一个完全不用 JavaScript 的原生 CSS 轮播组件。通过结合 HTML 的复选框控制展示项、CSS 伪元素控制滚动行为与可视化反馈，作者实现了可动态增删轮播项、支持自动滚动、滚动锚点定位的完整组件，展示了未来 CSS 在交互与状态管理上的潜力。

工具

Color Palette Pro：一款能像音乐合成器一样自由调制色彩的在线调色工具，支持多种色彩空间与样式切换，实时生成色阶、色环、阴影与高光调和效果，非常适合设计师进行系统化配色或视觉一致性探索。
JavaScript Algorithms and Data Structures
一个涵盖经典算法与数据结构的 JavaScript 示例仓库，其中每个算法和数据结构都有其独立的 README 文件，包含相关的解释和进一步阅读的链接。
williamtroup/Heat.js：Heat.js 是一个零依赖、基于 TypeScript 开发的轻量前端可视化库，可生成可定制的热力图、图表和统计数据。开发者可通过配置 DOM 属性（data-heat-js）或使用 API 快速实现自定义热力图等。

Codepen 精选

Concentric Border Radii

https://codepen.io/botteu/pen/YPKBrJX

“快来看看！这个内容器的边框半径取决于外容器的边框半径以及内外容器之间的内边距。” 在这个来自 botteu 的交互式 Pen 中，您可以滑动滑块来尝试不同的半径、内边距和颜色。

Refs

FE Bits Vol.16｜Cloudflare 事故报告出炉，CSSWG 确认 Masonry 布局语法 grid-lanes

2025-11-23T11:30:00Z

本期网址 https://space.cosine.ren/post/weekly-16
本周刊更新时间期望是在每周天
目前推荐使用 Folo 订阅本周刊的 Quaily RSS。
公众号前端周周谈 FE Bits，点击阅读原文链接可查看原文。
QQ 讨论小群 598022684，日常讨论前端技术 & 生活，也可在群里投稿自己的文章，随意加入，比较偏向粉丝群的性质～
本周刊文章内容同时也开源在 fe-bits-weekly，欢迎关注。

今天是 2025 年 11 月 23 日，星期天。

网站用 astro-pagefind 实现了无需后端的搜索，好用的。

计划在没有后端的情况下把网站功能完善，然后再逐步加上有后端的功能，这样没后端的也好部署，就像以前用 hexo 的体验一样。

生态与社区动态

Highlights from Git 2.52：Git 2.52 带来了新命令、性能优化，此版本首次使用 Rust 代码来实现 Git 的一些内部功能，Git 3.0 将全面要求 Rust。
Cloudflare 于北京时间 2025 年 11 月 18 日晚间发生全球性网络故障，事件影响遍及多个地区和服务，包括 WARP 及 Application Services，最终在连续两个多小时后逐步恢复正常。

故障时间线与恢复进展
20:13 起部分地区恢复，之后多次“再爆炸”与恢复循环。
21:04 官方确认在伦敦禁用 WARP 访问，说明问题基本定位。
21:09~21:35 官方多次更新状态，逐步恢复 Access、WARP 与应用服务（Application Services）。
22:03 时 X（即 Twitter）网页版恢复访问

如果你好奇原因，那么可以查看官方事故报告。

React 2025 年现状调查：React 生态系统年度调查又开始了。提交截止日期为 11 月 25 日，也就是下周二。感兴趣的可以在这里查看 2024 年的调查结果。

这种调查的填写过程中其实能学到不少东西。类似之前的 JS / CSS 的年度调查。

React 团队近年来以稳健的节奏迭代，引入了 Server Components、Compiler 等，还设立了 React Foundation 进行管理。

Announcing Angular v21：Angular 迎来 v21，这是一次面向未来的版本更新，专注于 AI 集成、可访问性及现代开发体验。
Reddit /r/node 讨论 NestJS 的优缺点，引发社区思考框架选型取舍。

文章与视频

如何撰写出色的 agents.md 文件：来自 2500 多个代码库的经验总结：GitHub 分享了从 2500+ 仓库提炼出的经验，教你如何写出真正有用的 agents.md 文件。
谈谈工作中的犯错 | CatCoding 错误不仅是个人问题，也暴露团队在设计、权限、质量控制、代码 Review 等方面的短板。
从 Cloudflare 故障到代码安全 | Cyandev：从一次 Rust 相关的服务中断聊到内存安全与代码复杂度。
如何使用分层模式在 CSS 中创建 3D 图像：使用 CSS 的 transform-style: preserve-3d 让所有层在三维空间可见，利用透视与光影制造立体幻觉，并通过 perspective、translateZ()、filter 等技巧实现动态的 3D 效果。

Keyframes Tokens 跨项目动画标准化：如何通过将动画关键帧 (@keyframes) 设计为可重用的 Keyframes Tokens，来实现动画系统的标准化与可维护化。
我打赌你不知道可以用 Chrome 浏览器开发工具做的六件事 Part 1：带你发现 Chrome DevTools 中那些被忽略却超实用的隐藏技巧，提升调试效率。

本篇是 Part 1，涵盖前三个内容：

用 console.time() 和 console.timeEnd() 精准计时函数执行。
利用 DOM Breakpoints 实时捕捉元素变化，并自动暂停脚本运行。
用 monitor() 在控制台监听任意函数调用。

断点是真的很重要，严肃学习！

CSS 新特性

通过实验学习更多 CSS random() 功能：作者通过多个实验展示了如何用 CSS 的 random() 函数创造动态有趣的视觉效果，如旋转星空、滚动视差(parallax)星空及基于滚动的点阵动效，虽然目前仅 Safari 技术预览版支持该功能，但文章提供了可视化演示和代码片段，展示了 random() 带来的新创意空间和未来样式系统的潜能。
介绍下与 CSS 自定义组件相关的 :state() 函数：介绍了 CSS :state() 伪类函数，这是 Web Components(网页组件) 的新特性，可用来根据组件内部状态修改样式。
在 Chrome 浏览器 144+ 中，锚点定位具有变换感知功能：Chrome 144 将 Anchor Positioning 改为对 transform 变换敏感（transform-aware），更新后 tooltip、浮层等会根据元素的变换后位置进行定位。
Masonry Switch 语法 #1022：CSS 工作组（CSSWG）确定采用新语法 display: grid-lanes 来启用 CSS Grid Level 3 新增的 Masonry 布局。

小贴士

虽然发过那么多次 CSS 新特性的博文推荐，但是在项目中实际用上的没那么多，决定开个新栏目，记录一下平常真在项目里用上了的小 tip！

CSS scroll-state 用来渐进式的增强滚动容器底部的羽化遮罩时还是很好用的～

/* https://github.com/parcel-bundler/lightningcss/issues/887 */
.scroll-feather-mask {
  container-type: scroll-state;
}
@container scroll-state(scrollable: bottom) {
  .scroll-feather-mask::before {
    content: '';
    background: linear-gradient(to bottom, transparent 0%, var(--gradient-bg-start) 70%, var(--gradient-bg-start) 100%);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: block;
    height: 5rem;
  }
}

参考链接

工具

Free Online Image Converter 无需登录、无需上传服务器的在线图片转换工具，完全运行于浏览器端，支持多种主流与新兴图片格式的相互转换，可调整输出格式及质量，立即下载结果，没有水印、不限数量。
Baseline JS Docs：检测 JavaScript 代码是否符合 Web 平台 Baseline 标准的 ESLint 插件，让代码对所有浏览器都更友好。

趣站与 Codepen 精选

Classic 8×8-pixel B&W Mac patterns

网站：https://paulsmith.github.io/classic-mac-patterns/
介绍文章： Classic 8×8-pixel B&W Mac patterns

由 Paul Smith 制作的 Classic Mac OS System 1 背景图案，这些极小尺寸的复古像素图案可通过 CSS background-repeat 实现无限平铺效果。尽管源自经典的 Mac OS 设计风格，但它们在现代网页中依然有独特的美感和实用价值。

Creepy Button

https://codepen.io/jkantner/pen/ZYWKvqW

"这个按钮在监视你"。从 Jon Kantner 这款俏皮的按钮下面探出头来，你会发现一双卡通眼睛正在跟踪你的一举一动👀。

Liquid Glass Clock

https://codepen.io/alexandrevacassin/pen/YPqqqwr

顾名思义，一个液态玻璃数字时钟。

Refs

FE Bits Vol.15｜Chrome 宽高动画重排优化，Node Type Stripping 稳定

2025-11-16T13:03:14Z

本周刊更新时间期望是在每周天，网站在建设中……
目前推荐使用 Folo 订阅本周刊的 Quaily RSS。
公众号前端周周谈 FE Bits，点击阅读原文链接可查看原文。
QQ 讨论小群 598022684，日常讨论前端技术 & 生活，也可在群里投稿自己的文章，随意加入，比较偏向粉丝群的性质～
本周刊同时也开源在 fe-bits-weekly，欢迎关注。

今天是 2025 年 11 月 16 日，星期天。

周刊网站先打了个样，域名估计还会换，后续等迁移的东西都迁移过来了之后再把原来 hexo 的版本换掉。

在博客的基础上加上了周刊栏目，欢迎提建议，还有很多要优化的，搜索和评论还没加上，但是欢迎来看看提建议。

仓库在 https://github.com/cosZone/cos-space

我发现我的拖延症还是没好，不发出来就会一直拖～所以发出来鞭策鞭策自己。

生态与社区动态

pnpm 10.21：可根据 engines.runtime 自动安装依赖所需 Node 版本，并引入 trustPolicy 防止供应链攻击。

当依赖声明了特定 Node.js 版本（在 engines.runtime 字段中），pnpm 会自动安装该版本并绑定 CLI 应用运行时，保证依赖与运行环境一致。若存在 postinstall 脚本，也会在匹配版本的 Node.js 下执行。
信任策略 (trustPolicy) 设置：新增配置项，可设置为 no-downgrade，当包的信任等级比之前版本下降时，会阻止安装，防止潜在安全风险。
TC39（JavaScript 语言标准化委员会）第 111 次会议将于 2025 年 11 月在东京举办的，会议议程公布。

Stage 4 候选提案：

Iterator Sequencing

JSON.parse source text access

Temporal 状态更新

Locale Info API

Stage 0 新议题：

迭代支持改进（Iterator Join、TypedArray Concatenation、FindWithin）

Class spread syntax

Class field introspection

若干新 Intl 提案（Energy Units、Unit Protocol 等）。

Node.js v25.2.0：Type Stripping 功能标记为稳定。
esbuild 0.27：带破坏性更新，提示锁定版本。

文章与视频

在 Chrome 浏览器中，在特定条件下，对 CSS width 或 height 进行动画处理不再强制执行主线程动画：从性能角度来看，对 CSS width 和 height 进行动画处理是不好的，因为它会导致渲染管线中发生布局操作（也称重排）。 这一点至今仍然正确。

但最近的 Chrome Canary 版本中最近有一个令人兴奋的动画/性能改进：

在 Chrome 144.0.7512.0（当前 Canary 版本）中，我们扩展了 width / height 检查，以检查 width 或 height 是否真的发生了变化。
💡 如果 width / height 不变，则无需计算布局，因此也无需强制动画在主线程上运行。

Crafting Generative CSS Worlds | Codrops：用纯 CSS 打造 3D 等距地形世界，通过层叠网格与 3D 变换构建出一个像素风的生成式世界。作者介绍了从镜头视角设置，到多层网格架构、地形单元的几何定义，再到噪声生成高度图和性能优化等完整技术路径。网站为 CSS Terrain Generator

Perfecting Baseline：一篇讲述 Web 平台特性 “Baseline” 概念如何诞生、发展和优化的技术随笔，让开发者理解它的价值与局限。
JavaScript Engines Zoo：汇总 100 多个 JS 引擎的数据、性能与发展史，附带 Dockerfiles 可直接实验。（好名字）

Visual Types：一份以直观方式解释 TypeScript 类型系统核心概念的交互式视觉笔记，将抽象的类型关系转为集合论直观类比。作者通过对基础类型、联合类型、交叉类型、泛型(Type Alias/Generic)、条件类型(Conditional Types)等模块的分解说明，让开发者从“类型是值的集合”这一基本理念出发，逐步理解 TypeScript 在编译期的推导与约束机制。

Effectively Monitoring Web Performance：如何系统化地监测网站性能，打造持续高效的前端体验。

CSS 新特性

The Range Syntax Has Come to Container Style Queries and if()：CSS 条件逻辑又升级啦，现在范围语法（range syntax）也能用在容器样式查询和 if() 函数里了。

也就是说，可以做到以下行为：

/* Range query for rain percent (new) */
@container style(--rain-percent > 45%) {
  .weather-card {
    background: linear-gradient(140deg, skyblue, lightblue);
  }
}

Responsive List of Stacked/Overlapping Images：用现代 CSS （如 container-type 与 cqw 单位）写出自适应重叠头像列表。图片间的间距可根据容器宽度与元素数量自动调整，无需固定值或“魔法数字”，布局既灵活，又保持了视觉平衡。

趣站与 Codepen 精选

Messenger

“Messenger” 是一个以小行星递送员为主题的互动网页，于 2025 年 11 月 10 日获得 Awwwards 的 Site of the Day (SOTD)。作品通过精巧的角色系统与动态 NPC 设置，打造沉浸式探索体验。色彩仅用两种主色，极简又具叙事性；技术实现上兼顾动画流畅度、响应式设计和可访问性。整体评分 7.92/10，在美术、交互与动画实现方面表现突出，是网页叙事和视觉创作的优秀范例。

这是一个小星球，但总得有人送货。

https://messenger.abeto.co/

Red Alp [448]

Code golfing a tiny demo using maths and a pinch of insanity：作者用极端的代码压缩和数学技巧，把一段 GLSL 着色器压缩到仅 448 字符，创造出奇妙的 3D 山景与云雾效果。

可在此处查看 demo

Hopping Marbles 跳跃的弹珠

Hopping Marbles：循环的纯 CSS + SVG 的跳跃弹珠动画，很有创意！

“一段以弹珠为主角的伪 3D 循环动画，设计成类似预加载器的效果。此外，孔洞底部还使用了特殊的 SVG clip paths 以及一些秘密交替的路径。”——Jon Kantner

Refs

FE Bits Vol.14｜Chrome 支持左右分屏、npm 强制 2FA、Rspack 1.6

2025-11-09T12:40:00Z

本周刊更新时间期望是在每周天，网站在建设中……
目前推荐使用 Folo 订阅本周刊的 Quaily RSS。
公众号前端周周谈 FE Bits，点击阅读原文链接可查看原文。
QQ 讨论小群 598022684，日常讨论前端技术 & 生活，也可在群里投稿自己的文章，随意加入，比较偏向粉丝群的性质～
本周刊同时也开源在 fe-bits-weekly，欢迎关注。

今天是 2025 年 11 月 9 日，星期天。

本周没有什么大新闻，今天去华南植物园看了看，大意了，没带驱蚊水被蚊子咬死了。

生态与社区动态

Chrome supports split views (behind a flag)：Chrome 也终于能左右分屏啦，打开实验性功能 chrome://flags#side-by-side 就能体验新功能。
Announcing Rspack 1.6：Rspack 1.6 在 tree-shaking、ESM 输出优化、懒加载、JSX 保留、Source Map 处理等方面都有重大改进。
npm 安全更新：classic token 创建将被禁用与 granular token 的更改：自 2025 年 11 月 5 日起，npm 将正式禁用新建经典 (classic) token，并强化细化 (granular) token 的安全策略，包括强制启用双重验证 (2FA) 及限定有效期为 90 天。现存的经典 token 将在 11 月 19 日彻底失效，原定于 2026 年 2 月 3 日之后到期的现有 token 已调整为在该日期到期。

文章与视频

OpenSpec 使用心得：一篇很好的 AI 辅助开发实践总结，安利了OpenSpec 感觉挺不错的～「规范驱动的团队协作」
Sstacking 工作流：本文介绍了一种名为 “Stacking” 的开发工作流，通过将大型改动拆分为多个相互依赖的、小而独立的 PR，实现并行开发与评审。这篇其实是之前的看到的文章里看到的，觉得有用，Mark 一下。
Web 动画性能层列表 - Motion Blog：作者用一份分级榜单，讲明哪些网页动画方式最流畅、哪些最耗性能，从浏览器渲染管线的底层原理出发，给出实践经验。
为什么 TypeScript 救不了你：这篇文章提醒我们，TypeScript 让你感觉安全，但那并不意味着你的代码真的安全。
剪贴板 API：我们是如何走到这一步的？：作者本想简单实现“复制到剪贴板”，结果掉进了浏览器兼容性的大坑，一路吐槽、反思到 Web 平台复杂性的根源。

对开发者而言，重要的不只是解决问题，而是理解复杂系统背后的现实与妥协。
“最讨厌”的 CSS 特性：tan()：作者用轻松的方式聊了聊 CSS 里被误解的三角函数 tan()，展示它其实超有用。
The Weird Parts of position: sticky：一篇深入剖析 position: sticky 在实际开发中为何“失灵”的技术文章，帮你搞懂它那些令人抓狂的常见失效原因。
pathLength 使 SVG 路径动画更容易管理：用 pathLength 属性轻松搞定 SVG 路径动画，不再为计算路径长度烦恼。
JavaScript Source Map 的内部工作原理：硬核好文，还是很棒的交互式，带你深入了解 Source Map 背后的结构与编码秘密，让调试压缩后的 JS 不再黑盒。
利用小屏幕发挥创意：展示了如何运用 CSS 工具如 @container queries、CSS Grid、Scroll Snap 与 shape-outside，创造富有节奏和层次的小屏幕布局。核心思想是不要让响应式设计变成“折叠”，而要让设计随设备与姿态（orientation）而“适应”，让视觉叙事在任何尺寸下保持鲜活。

CSS 新特性

什么时候使用 CSS text-wrap: balance 和 text-wrap: pretty：介绍了 text-wrap 在浏览器支持成熟后的两种热门用法 balance 和 pretty ，以及他们应该在什么时候使用。

balance 通过调整行长平衡视觉比例，提升排版对称性，小段文本（标题、卡片内容）适合 balance。
pretty 避免“孤字行”(orphans)，平衡段落末行排版。段落性文字可尝试 pretty 以优化阅读体验。
Staggered Animation with CSS sibling Functions：介绍了 CSS 中新的 sibling-index() 和 sibling-count() 两个函数，它们让我们可以直接通过纯 CSS 计算元素在兄弟节点中的相对位置，实现无需 JavaScript 的 “交错动画（Staggered Animation）”。
一些实用的视图转换的例子来增强你的 UI：用几个实用范例展示如何利用 View Transition API 让网页交互动画更顺滑。

工具推荐与库更新

sindresorhus/image-dimensions：一个轻量工具，可在任何现代 JavaScript 环境快速获取 JPEG、PNG/APNG、GIF、WebP、AVIF 和 HEIF 图像格式的像素宽度和高度。
Storybook 10：全面转向仅 ESM 模块，支持 Vitest 4。
htmx 4.0 Alpha：由 v2 直接跃升 v4 的架构演进。
React Email 5.0：新版本带来深色模式切换与 Tailwind 4 支持。
其他更新：包括 Turborepo 2.6、Video.js 10、ESLint Config Inspector v1.4。

Codepen 精选

CSS 作用域自定义属性轨迹网格

在 Jhey Tompkins 设计的这款可配置 Pen 中，将鼠标悬停在加号网格上，即可观看它们变换颜色和旋转。您还可以通过顶部的控制面板调整网格大小和主题颜色。

Cards path marquee CSS only

在 DenDionigi 制作的这款现代字幕动画中，卡片淡入，过山车式循环，然后淡出。

Chrome：使用 @function 的 CSS 滚动

pimskie 用这个滚动文字特效向我们展示了“超赞”的效果。向下滚动，你会看到文字从左右两侧逐渐融合，然后查看 CSS 面板，了解实现这一效果的自定义 @function 函数。

Refs

FE Bits Vol.13｜TypeScript 首次成为 GitHub 最常用语言、VoidZero A 轮融资 1250 万美元

2025-11-02T13:50:00Z

本周刊更新时间期望是在每周天，网站在建设中……
目前推荐使用 Folo 订阅本周刊的 Quaily RSS。
公众号前端周周谈 FE Bits，点击阅读原文链接可查看原文。
QQ 讨论小群 598022684，日常讨论前端技术 & 生活，也可在群里投稿自己的文章，随意加入，比较偏向粉丝群的性质～
本周刊同时也开源在 fe-bits-weekly，欢迎关注。

今天是 2025 年 11 月 2 日，星期天。

周五去九寨沟游玩了一天，超级棒，即使是阴天也不影响它的美，难怪说「九寨归来不看水」，真的是很美。

九寨沟的交通是最折腾的，成都到九寨沟高铁 1 个半小时，高铁站到景区还要 2 个小时，一来一回快 7 个小时，一天特种兵行程的话真的巨累（建议俩天）但就算是现在这样据说也比以前交通方便多了，高铁站近几年才通的。

景区的车辆调度确实快，除了换左右线的时候排队时间比较长（半小时）其他都挺快的，几分钟就能上车，这可是 4w 人的旺季。

山里天气不像天气预报一样一直有雨，偶尔下一点点而已，带的伞都没用上。

懒得暴走，所以先逛中线，然后坐车逛完了右线，去左线看长海-五彩池，这个行程感觉挺省力的。

九寨沟秋景

中线的几个海子：

五彩池

长海

生态与社区动态

New in Chrome 142：Chrome 142 引入了多项前端开发相关的新特性，包括用于滚动标记的 :target-before 与 :target-after 伪类、支持比较运算符的 CSS 样式容器查询 (style container queries) 与 if() 函数的范围语法 (range syntax)，以及可用于交互触发的 interestfor 属性。
Octoverse：每秒钟都有一个新的开发者加入 GitHub， AI 将 TypeScript 带到了 #1：2025 年 GitHub 的年度报告，比较有意思，摘了其中几个点看看：

GitHub 总用户达 1.8 亿，年增 3600 万，创下历史最高增长率。每秒新增 1 名开发者，印度贡献 500 万以上新用户，占全球新增 14%。

生成式人工智能如今已成为开发中的标准配置。超过 110 万个公共代码库正在使用 LLM SDK，其中仅过去 12 个月就新增了 693,867 个项目（同比增长 178%）。开发者们还合并了创纪录的 5.187 亿个拉取请求（同比增长 29%），80% 的新开发者在第一周就开始使用 Copilot。

TypeScript 首次成为 GitHub 最常用语言，超越 Python 和 JavaScript。即便如此，Python 在人工智能和数据科学工作负载方面仍然占据主导地位，而 JavaScript/TypeScript 生态系统的整体活跃度仍然高于 Python 本身。

总计 3.95 亿个公共存储库托管了 11.2 亿次贡献和 5.187 亿次合并拉取请求——每一次都是一项记录。

还有很多很多数据，感兴趣的建议阅读原文。

VoidZero Raises $12.5M Series A：VoidZero 宣布获得 1250 万美元 A 轮融资，本轮融资旨在加速推进其统一 JavaScript 工具链「Vite+」的稳定发布，以及推动旗下开源项目的持续发展。团队引入多位优秀工程师，包括 napi-rs 作者和多个 OSS 核心贡献者。
Vercel 现在支持 Bun 运行时：Vercel 宣布正式支持 Bun Runtime（运行时），开发者现在可以直接在 Vercel 上运行基于 Bun 的应用。
ViteConf 2025 Recap：ViteConf 2025 回顾，包括 Vite+、Oxlint JS 插件、Vite DevTools、Nitro v3、Vitest 4 及性能工具链新进展。
React Conf 2025 Recap：React Conf 2025 回顾，展示了 React 生态最新成果，包括 React Compiler v1.0 正式版、React Foundation 成立、React 19.2 与 React Native 新架构的重大更新等。
Electron 39：Electron 39 发布，升级到 Chromium 142.0.7444.52、V8 14.2 和 Node 22.20.0 的升级。

文章与视频

原生 CSS 中的 Springs 和 Bounces：介绍如何利用原生 CSS 的 linear() 函数实现类似物理弹簧(spring)和反弹(bounce)的动画效果，并探讨其优劣与应用方式。
使用 details 元素、网格和子网格实现纯 CSS Tabs：介绍如何仅使用 HTML <details> 元素与 CSS Grid / Subgrid 构建可访问的选项卡 (Tabs)
今天就开始在你的网站上使用视图转换吧：深入介绍如何在网站中应用 View Transition API 实现页面间的平滑转场动画。
我使用 Claude Code 开发 Rolldown 的体验：在 Rolldown 开发中高强度使用 Claude Code 进行真实开发的思考与经验分享。
从周报 #102 - 我是如何使用 AI 的里看到的文章，我觉得说的都挺对的，现在 AI 确实是很好的副驾驶了，我也是同时用着 codex / claude code / cursor 感觉爽翻天了。
Junior Dev Tip: "Scroll Up"：一次初级开发者调试错误的故事，提醒大家“多滚动一点，认真读错误信息”。

大多数情况下，工具都会提供相关信息。真的只需要多花几秒钟，仔细阅读一下提示信息就行。

Directives and the Platform Boundary | TanStack Blog：探讨框架自创 “use server”、“use client” 等自定义指令 (Directive) 趋势。这些指令表面上像平台特性，却缺乏标准规范，模糊了语言与框架的界线，引发生态混乱、工具负担与可移植性风险。作者主张指令应保持极少且标准化，用于语言层；而具参数化、策略性或扩展需求的功能应采用显式 API（好文，No Directive！）
我创建了 10 次相同的应用：评估移动性能框架：作者以构建同一款 Kanban App 十次的方法，系统测试十个现代前端框架在移动端性能上的差异。
一个不断预测 Web 死亡的人：回顾 Forrester 创始人 George Colony 30 年来多次预测 “Web 已死” 的荒谬历史，从最初批评 Web 静态、缺乏交互性，到 2000 年代鼓吹 “XInternet”，再到 2010 年代推崇 “App Internet”，以及 2020 年代声称生成式 AI 会取代 Web，揭示技术悲观主义的循环与 Web 的持久生命力。

CSS 新特性

不使用 JavaScript 获取屏幕宽度和高度：介绍如何使用纯 CSS 获取屏幕宽高（像素值），无需使用 JavaScript。需注意的是，Safari 上应使用 dvh 才准确，其中包括了 CSS 类型化算术 (Typed Arithmetic) 这个技巧，100vw/1px 得到纯数字的 px 值，CSS Typed Arithmetic 支持度为 Safari 26 / Chrome 140，Firefox 暂不支持。
精准定位的 Tooltip：基础篇：本文详细介绍了如何利用现代 CSS 的锚点定位 (Anchor Positioning) API 来创建能够智能定位、避免溢出的工具提示 (Tooltip)，全程无需 JavaScript。（是之前 CSS Tips 锚点定位一系列教程的总结，都是 Temani Afif 写的，不同的是这篇讲解的比较多）

趣味项目与工具

spoilerjs | Beautiful Spoiler Effects：一个框架无关的 Web Components，用粒子动画实现优雅的“剧透（Spoiler）”效果。
vue-command：一个基于 Vue.js 的功能齐全、特性丰富的终端模拟器组件。

Codepen 精选

Details & Summary 🍏 ::details-content/content-visibility

Jhey Tompkins 为 details & summary 构建了一个出色的交互式展示，使用 ::details-content / content-visibility 纯 CSS 实现，无需 JavaScript。"

自定义曲线滚动条

Chris Bolson 分享了曲线滚动条主题的两种变体：一种是超级曲线，另一种是更微妙的曲线。"滚动条遵循容器的边框半径，长度根据内容数量计算"。

核心原理是隐藏原生滚动条，在容器上方叠加一层 SVG，画一条沿容器圆角轮廓的轨迹，并将滚动条当作这条路径上的一段子路径来渲染，用视口高度与内容高度的比例计算滚动条长度。

拖动时根据指针的垂直位置换算滚动比例写回 scrollTop，滚动与窗口尺寸变化时同步重算路径，颜色与粗细则由 CSS 变量和交互状态控制。

酷是挺酷的，但是感觉 UX 不太符合用户直觉？

Circular Ranges

Mads Stoumann 演示了他的 "带有可选索引和标签的圆形范围滑块自定义元素"，并展示了从部分曲线到完整圆形的圆形范围滑块。

Frutiger Aero Card

MOZZARELLA 以 CSS 重现 Frutiger Aero 风格的亮面卡片，呈现柔和渐变光效。

好亮的风格。

Wood Board

Bence Szabo 发布仅 353 字节的 SVG 木纹纹理，是其 #PetitePatterns (极简纹理系列)之一。

Refs

FE Bits Vol.12｜Next.js 16 发布、Docusaurus 3.9 AI 搜索、ChatGPT Atlas 发布

2025-10-26T10:50:00Z

本周刊更新时间期望是在每周天，网站在建设中……
目前推荐使用 Folo 订阅本周刊的 Quaily RSS。
公众号前端周周谈 FE Bits，点击阅读原文链接可查看原文。
QQ 讨论小群 598022684，日常讨论前端技术 & 生活，也可在群里投稿自己的文章，随意加入，比较偏向粉丝群的性质～
本周刊同时也开源在 fe-bits-weekly，欢迎关注。

今天是 2025 年 10 月 26 日，星期天。

这周终于闲一些了，沉迷了一阵子土豆兄弟（类吸血鬼幸存者游戏），这类游戏之前玩过通神榜，但是土豆兄弟一直没玩过。

下周就要去成都呆一周了，周五请假去九寨沟玩耍，浅浅期待一下。

生态与社区动态

Next.js 16 发布：Next.js 16 正式版，此次更新让 Turbopack 成为默认打包器，React Compiler 支持正式稳定，并且引入了全新的 Cache Components、Next.js Devtools MCP，统一代理文件 proxy.ts 取代 middleware.ts。

介绍 ChatGPT Atlas：OpenAI 推出嵌入 ChatGPT 的新一代浏览器 ChatGPT Atlas，将 ChatGPT 深度整合进网页使用场景，使 AI 能理解网页内容、保留浏览记忆、自动执行任务。用户在浏览时可直接与 ChatGPT 对话、分析网页或完成操作，无需切换应用。

Cloudflare Sandbox SDK：Cloudflare 推出的安全、可扩展的云端沙盒环境，可在隔离容器中执行命令、运行服务、操作文件并生成可公开访问的 URL。（适用于 Workers 付费计划，介绍文章）

Meta 发布 Docusaurus 3.9，带有新的 AI 搜索功能：Docusaurus 3.9 发布，新版本引入 Algolia DocSearch v4 的 AI 搜索与改进的国际化配置。

文章与视频

重新思考 JavaScript 中的异步循环：分析了在 JavaScript 中使用 await 在循环语句时常见的性能与语义陷阱，说明了 for...of、map()、Promise.all()、Promise.allSettled() 及第三方工具（如 p-limit）在不同异步并发需求下的使用场景与利弊。

React 服务器组件：它们真的能提高性能吗？：一篇以数据为主的实证研究，比较 CSR、SSR 与 RSC 的性能优劣及实现差异。

结果显示，CSR 初次加载最慢但交互最快；SSR 可改善 LCP 但是有“无交互”的空窗期；RSC 若结合 Streaming 和 Suspense 可获得最佳平衡，但实际迁移复杂且对架构要求高。单纯引入 RSC 并不会自动带来性能提升，收益主要来自异步数据流与渲染策略的改写。

如果应用是客户端和服务器组件的混合体，单独的服务端组件并不能提高性能。它们无法减少足够的大小以产生可测量的性能影响。流式传输和 Suspense 才是关键。主要性能优势来自于完全重写数据获取，使其成为服务端组件优先。

互联网被攻破的内幕：Log4Shell 不为人知的故事：讲述 Log4j 维护者及开源社区如何应对震撼全球互联网的 Log4Shell 漏洞事件，以及这一事件如何推动开源安全体系的重塑。（还挺有趣的）

How to Fix Any Bug：Dan Abramov 以一个真实调试案例，阐述系统化调试思维。从找到可复现 (repro) 开始，逐步缩小问题范围直到发现根因。这是一篇少有的教你如何进行调试，解决问题的文章。

25 分钟了解 25 个 CSS 特性：Adam Argyle 介绍包括滚动驱动动画、数值函数、自定义滚动条样式等在内的 25 个新特性，并提供演示文稿。

URLPattern 现在是 Baselin 可用的：介绍了已进入 Baseline 的新浏览器功能 URLPattern API，它为 URL 匹配和路由提供了标准、简洁且高性能的原生解决方案。可以查阅 MDN Web Docs 了解完整信息。

面向初学者的 Web 开发：CSS 布局——flexbox、网格、媒体查询和容器查询：面向新手的 CSS 布局指南，系统讲解 flexbox、grid、media query 与 container query 的核心概念与实践。

使用 CSS if() 和 clamp() 实现更智能的流体排版：介绍如何结合 CSS if() 与 clamp() 函数，实现更智能的响应式文字排版体系。
clamp() 简化了最小值、理想值与最大值的控制，而 if() 的引入则让样式具备条件判断能力，可根据文本类型（如标题或正文）动态调整缩放比例，从而实现更灵活、可复用且可渐进增强的字体响应方案。

CSS 新特性

CSS reading-flow 和 reading-order 属性简介：对 CSS 新特性 reading-flow 与 reading-order 的深入解读，它们解决了传统 tabindex 在复杂布局下控制焦点顺序困难的问题。

Dynamic Tooltip Position with Anchor Positioning III：使用纯 CSS 的锚点定位新特性实现 tooltip 的自适应位置调整，是系列文章中的第三篇文章，这次考虑了角落位置。

closedBy=any：介绍 HTML <dialog> 元素中 closedBy="any" 属性的用法，让对话框可通过点击外部轻松关闭。此功能已在 Chrome 和 Firefox 中实现，计 Safari 也会支持。

趣味项目与工具

ColorMate：又一款面向设计师与开发者的免费在线配色工具，可快速生成符合无障碍标准的调色板。用户可提取图片配色、即时预览 UI 效果、进行对比度测试，并将结果以 HEX、CSS 或 PNG 格式导出。它还提供由 AI 命名、锁定颜色及实时生成新方案的功能，并收录多种热门配色示例。

Codepen 精选

纯 CSS 进度环 + 地图曲率（凹面圆角）

Ana Tudor 用这种精湛的凹面圆角效果回应了 Reddit 的请求，使用了 shape() 和 mask 后备方案。

threejs/gsap 液体形态幻灯片

Filip Zrnzevic 将 GSAP 和 WebGL 结合起来，实现了华丽的液体幻灯片过渡效果。点击预览并按下 "H" 键打开控制面板，尝试所有不同的效果。

Refs

Node Weekly Issue 597: October 21, 2025
Frontend Focus Issue 714: October 22, 2025
JavaScript Weekly Issue 758: October 24, 2025
CodePen Spark #477
CodePen Spark #476

FE Bits Vol.11｜React Native 0.82 新架构落地、Bun 1.3 全栈运行时

2025-10-19T11:00:00Z

本周刊更新时间期望是在每周天，网站在建设中……
目前推荐使用 Folo 订阅本周刊的 Quaily RSS。
公众号前端周周谈 FE Bits，点击阅读原文链接可查看原文。
QQ 讨论小群 598022684，日常讨论前端技术 & 生活，也可在群里投稿自己的文章，随意加入，比较偏向粉丝群的性质～
本周刊同时也开源在 fe-bits-weekly，欢迎关注。

今天是 2025 年 10 月 19 日，星期天。

这周也在忙项目，天天在家远程办公，搬完家总算安定下来一些了，想了想感觉好久没有出去旅游了，所以买了 10 月 29 号到成都的机票，准备去成都呆一周，周末去九寨沟玩耍，希望一切顺利吧～去九寨沟是我小时候的梦想之一，想要去看看秋天的九寨沟，在最佳观赏时期看看彩林和五花海。

很有意思，以前上大学的时候，没钱没空，所以也不喜欢旅游，现在的话反而觉得能到处跑跑看看风景也挺好的，又喜欢上了旅游，今年 5 月份去云南大理旅居了一个月的感觉非常爽，所以还想多尝试尝试不同城市。

生态与社区动态

拆解 Cloudflare Workers CPU 性能基准测试：Cloudflare 不愧是赛博活菩萨捏，大气的，10 月 5 日 Vercel CEO 发推说 Worker 的性能差，仅仅一周，Cloudflare 就承认错误并修复，发了这篇分析文章，甚至还在某些情况下帮助 Vercel 加速了。
Firefox 144 发布，支持了 View Transitions API Level 1，现在所有主流浏览器现在都支持视图过渡。

MDN 发布了一个适合初学者的 CSS View Transitions 入门指南，帮助开发者理解视图过渡动画的基础概念。
Bun 1.3：以「全栈运行时」为核心定位的最大版本更新，Bun 1.3 意图将 Bun 打造成一个包含所有功能的全栈 JavaScript 运行时。
React Native 0.82：正式成为首个完全基于“新架构 (New Architecture)”运行的版本，标志着旧架构时代的结束。该版本引入实验性的 Hermes V1 引擎，默认集成 React 19.1.1，并增加 DOM Node APIs 支持，使原生组件可用 DOM 风格方法访问。
Next.js 16 (beta)：Next.js 16 测试版发布，全面引入稳定版 Turbopack、改进缓存系统与路由架构，并支持 React Compiler 与 React 19.2 特性、改进默认配置、移除旧实验功能。
Node.js v25.0.0 发布：将 V8 升级到 14.1，带来了主要的性能提升，内置了 base64/hex 转换，以及持续进行的 WebAssembly 和 JIT 管道优化。默认启用 Web Storage、新增 --allow-net 权限参数、改进 JSON.stringify 性能。

文章与视频

如何优化移动设备的视口以实现更快的交互：讲解如何优化移动端视口 (viewport) 以减少点击延迟、提升交互速度与性能，并以 Qatar Airways 官网为反例分析常见误区。
50 Reasons to Build a Website：以 50 个生活化的理由，回答 “为什么在 2025 年仍然要建网站” 这个问题，我喜欢这些理由。

「你的乐队需要有一个网站，这是肯定的」
「你刚开始接触观鸟，你想要一个网站来发布你看到的酷鸟」
「你认为网络技术可以像油画和画布一样，成为艺术家的工具。你制作网站就像画家作画一样」
Why typeof null === object：特别深入的解析，解释为什么在 JavaScript 中 typeof null 会返回 object，作者复原了早期 C 语言实现及源码宏定义，揭示 null 被识别为对象的根本原因是早期 32 位系统的对齐与标记约定。尽管这一问题可轻易修复，但考虑到巨大的兼容性影响，标准委员会选择保留这一行为，使它成为语言历史上的经典遗产。
HTML 最鲜为人知的秘密：output 标签：介绍了 HTML 中一个鲜为人知但功能强大的 <output> 标签，它能在网页上自然地显示计算或用户操作结果，并具备天然的无障碍（Accessibility）支持，但却一直被忽略。
URL 设计中隐藏的成本：作者回顾在为客户构建电商平台时，以“简洁扁平 (flat)”的 URL 结构取代分层路径的决策，虽然提升了用户体验，却带来了后端性能下降与运维成本上升。

当我们为客户设计一个电子商务平台时，我们做出了一个看似简单、用户友好的决定：使用简洁的扁平 URL。产品位于 /nike-air-zoom ，类别位于 /shoes ，页面位于 /about-us 。没有前缀，没有 /product/ 或 /category/ 的杂乱。路径简单，感觉简约。

这个草率做出的决定，没有经过适当的讨论，后来让我们花费了数小时进行优化。
问题不在于 URL 本身。问题在于我们将 URL 设计视为一个用户体验决策，而实际上它是一个具有连锁技术影响的根本性架构决策。每次对应用程序的请求都会触发两次后端 API 调用。每个爬取格式不正确的 URL 的机器人都会击中数据库两次。每个 404 错误都很昂贵。

本文并非探讨你已读过无数次的 URL 最佳实践（保持 URL 简短、避免特殊字符、使用连字符而非下划线）。它要讨论的是鲜少被提及的议题：URL 结构如何塑造整个应用程序的架构、性能特征及运营成本。

Web Components 的杀手级特性：深入介绍了 Custom Elements Manifest (CEM) —— Web Components 生态中一个由社区推动的 JSON 标准，用于自动化提取与共享组件 API 信息，作者认为 CEM 是“Web Components 的杀手级特性”。
无需 JavaScript 即可实现深色模式切换：介绍如何仅用 CSS 与 HTML 实现一个支持系统与用户手动切换的暗色模式按钮，并可选用少量 JavaScript 增强体验。

CSS 新特性

Modern CSS Round-Out Tabs：用现代 CSS 的 shape() 函数重新实现“圆边标签页”设计，无需多余元素即可绘制复杂弧形界面。Codepen 示例
动态位置的 tooltip 与锚点定位 II：介绍如何利用 CSS 的 anchor 定位体系使 tooltip 智能地在四个方向上自动调整位置并保持箭头指向锚点。在上一篇文章中，创建了一个在顶部和底部之间切换位置的 tooltip。现在可以调整代码，使其在四个位置（顶部、底部、左侧和右侧）之间切换。无论工具提示位于哪个位置，都会指向锚点。
使用容器查询单位实现向另一侧的过渡：通过 CSS 的容器级尺寸单位（如 cqi 和 cqb），可以让元素基于父容器动态计算移动距离，实现灵活、性能佳且语义清晰的动画效果。

趣味项目与工具

olegshulyakov/llama.ui: A minimal interface for AI Companion that runs entirely in your browser.：一款完全在浏览器中运行的基于 llama.cpp 的开源本地 AI 对话界面项，专注隐私、简洁与易用。它支持多模型服务（如 LM Studio、Ollama、vLLM、OpenAI 等），界面现代，支持 Markdown 渲染、LaTeX 数学公式、主题切换和会话管理。
rictic/jsonriver：一个基于 JavaScript 标准特性的轻量高速流式 JSON 解析器，可实时按数据流逐步生成完整值。
weijunext/ogimage-click：又一个快速生成精美的 Open Graph 图片的开源在线工具，支持实时预览与多种导出格式。

Codepen 精选

Pure CSS angled columns layout options：Ana Tudor 展示三种 CSS 斜列布局技术，两种基于 clip-path，第三种使用 transform: skew，并以清晰注释说明，第三种方法倾斜容器，然后反向倾斜图片。
Juicy：Matthias Hurrle 的又一次关于次表面散射（subsurface scattering）的实验，模拟水果糖果风格的魔方。
404 Error Face：Jon Kantner 基于 Camo Creative 的设计，将 404 错误页转为循环动画，用趣味视觉缓解用户体验挫败感。

Refs

FE Bits Vol.10｜React Compiler v1.0 发布、React 成立基金会，Vite 纪录片与 Vite+ 上线

2025-10-12T04:14:49Z

本周刊更新时间期望是在每周天，网站在建设中……
目前推荐使用 Folo 订阅本周刊的 Quaily RSS。
公众号前端周周谈 FE Bits，点击阅读原文链接可查看原文。
QQ 讨论小群 598022684，日常讨论前端技术 & 生活，也可在群里投稿自己的文章，随意加入，比较偏向粉丝群的性质～
本周刊同时也开源在 fe-bits-weekly，欢迎关注。

今天是 2025 年 10 月 12 日，星期天。

搬家加上去医院各种情况，导致这个国庆假期其实也没咋歇，所以网站得再咕咕咕一阵子了，还没做到满意的程度～

等到 10 月底，大概才能安顿下来了。

这周将国庆假期里的消息也合并进来了，所以内容相对比较多。

生态与社区动态

React Compiler v1.0：React 官方发布首个稳定版 React Compiler，通过自动记忆化（memoization）在构建时优化组件性能。
介绍 React 基金会：React 官方宣布将成立独立的 React 基金会（React Foundation），并将 React 与 React Native 从 Meta 转移至该基金会名下，以推动社区自治和生态中立化。基金会将管理基础设施、举办 React Conf、支持生态项目并发放资助。同时，React 将建立独立的技术治理结构，由社区贡献者共同制定方向，确保没有单一机构主导。
减少通知超载，在 Chrome 浏览器中获得更安静的浏览体验：Chrome 宣布推出新的自动通知权限撤销功能，会自动取消那些用户近期未互动且推送频繁的网站通知授权，以减少通知噪音
Vite: The Documentary：Vite 一部由 @CultRepo 制作的讲述 Vite 从 Vue 开发者的副项目成长为现代前端标准工具的纪录片。以 Evan You 从 Webpack 限制中寻找突破为起点，揭示了 Vite 如何利用原生 ES Modules 与即时开发服务器 Dev Server 技术实现极速构建体验。

与此同时，VueConf 2025 上说的 Vite+ 也上线了，Vite+ 是一体化 Web 工具链，集成开发、构建、测试、格式化、缓存等功能，面向企业级性能与团队协作。
What’s new in Svelte: October 2025：9 月 Svelte 更新重点围绕 Remote Functions 增强、异步 SSR 与社区新工具生态的拓展。
What’s New in ViteLand: September 2025 Recap：ViteLand 2025 年 9 月的月度回顾，涵盖 Vite、Vitest、Rolldown 及 Oxc 的新进展，性能优化细节与社区生态亮点。下面是详细回顾：

Rolldown 性能与体积优化

Windows 平台重新实现文件元数据读取函数，构建性能提升 10–30%。
macOS 平台优化多线程 I/O，限制线程至 4 个后性能升至 10–45%。
调整 Source map 忽略机制，构建带 Source map 时提速 20–30%。
通过直接嵌入 Oxc helper 减少二进制体积约 200KB。
相关 PR 参考实现、集成方式更新。

项目更新

Vite：create-vite 向导现支持 Rolldown 选项，GitHub 参考。
Vitest：VS Code 扩展新增浏览器模式调试，PR；未来版本将原生支持 Playwright Trace Viewer。
Rolldown：支持 /* @__NO_SIDE_EFFECTS__ */ 注解跨 Chunk 优化；改进 Tree-shaking 与 Dead Code 消除。
Oxc / Oxlint：Lint 性能整体提升 5–50%，支持 preserve-caught-error 规则并提供自动修复；修复内存泄漏问题；发布 Next.js 示例，性能优化汇总列表。

文章与视频

Birth of Prettier：Prettier 的诞生故事 —— 从「空格 vs Tab 圣战」到自动化格式化的行业标准，Prettier 作者 Vjeux 回顾了从学生时代对代码格式要求的启蒙，到在 Facebook 亲历代码风格冲突，并探索各种格式化方案（如 gofmt、dartfmt）失败的原因；最终，他与合作者 James Long 等人推动 Prettier 诞生。
如何为 Astro 静态网站添加快速客户端搜索功能：介绍了如何在使用 Astro 构建的静态网站中集成高性能客户端全文搜索功能。作者比较了 AI 或第三方方案的局限，最终提出通过 Astro 的构建时（build-time）端点生成 JSON 索引，并结合 MiniSearch 与 Svelte 构建搜索 UI 的方式，实现无需远程 API 的、本地可定制的快速搜索体验。
CSS Counters 的作用：介绍如何运用 CSS 的计数器（CSS Counters）在页面中动态生成编号，实现如行号、章节编号等功能。
如何在不使用 reduce 的情况下对 JavaScript 中的数组进行分组：介绍 ES2024 新增的 Object.groupBy() 和 Map.groupBy()，它们让数组分组操作更简单、更具可读性。
Core Web Vitals 的历史：Addy Osmani 回顾 Core Web Vitals 的发展历程，说明其在改善用户等待时间与整体性能体验上的重要作用。
现代 CSS 颜色实用指南 - 第 1 部分：带你了解现代 CSS 色彩系统的重大变革与写法更新。重点包括新版 rgb() 与 hsl() 的语法变化、相对颜色（relative colours）的用法、改进的亮暗主题处理方式、颜色空间（colour spaces）的应用，以及应对更广色域设备的新工具。
针对特定字符使用 CSS 规则：用 CSS 精确选择并修改特定字符外观的创意实验，结论是可以使用 CSS 规则来针对特定字符更改他们的字体，遗憾的是只能改字体。
如何使用 GSAP 制作 WebGL 着色器动画：涟漪、揭示和动态模糊效果：一篇由浅入深讲解如何结合 GSAP 动画与 WebGL 着色器，实现实时交互动效（如涟漪、遮罩、动态模糊）的技术教程。
Vue 基础知识：Vue 中的状态管理：本文系统讲解了如何在 Vue 中进行状态管理，从 ref/reactive 到 props/emits、provide/inject，再到官方状态管理库 Pinia，帮助开发者理解不同规模下的状态管理选择。
Vibe engineering：不满 Vibe Coding，Simon Willison 提出“Vibe Engineering”概念，指代一种更严谨、更成熟的 AI 辅助软件开发方式。作者强调，与“vibe coding”的快速原型化不同，vibe engineering 是资深工程师在熟练掌控 LLM（Large Language Model）与 coding agent 的条件下，通过完善的测试、文档、版本控制与审查体系，将 AI 作为高阶编码助手来加速高质量软件的生产过程。

CSS 新特性

动态位置的 tooltip 与锚点定位：介绍如何利用 CSS 锚点定位新特性（Anchor Positioning）创建动态位置的 tooltip，使其在视窗中始终可见并自动调整箭头方向。
利用 shape-outside 发挥创意：探讨如何利用 CSS shape-outside 打破矩形布局，使文字与图片自然融合，打造更具节奏与表现力的阅读体验。
视图转换的新功能（2025 年更新）：2025 年 View Transitions API 在浏览器与框架支持、工具调试及新特性上迎来多项进展。
我们完全错过了 width/height: stretch：介绍 width: stretch 与 height: stretch 这两个新加入 CSS 标准的属性值。作者探讨了它与 box-sizing: border-box 的区别、动画特性（animatable）以及当前的浏览器支持情况。
虽然 stretch 功能简单，但它解决了长期以来 width: 100% 受内边距影响导致溢出的问题，为布局控制带来了更直观、更可靠的选择。

趣味项目与工具

ElevenLabs UI

elevenlabs/ui：一个基于 shadcn/ui 的组件库，旨在帮助您更快地构建音频和智能体应用程序，项目以 MIT 许可证开源，音频组件特别多。

来源于 X 上的 Guangzheng Li：“elevenlabs 刚刚开源了兼容 shadcn ui 的前端组件，有大量和音频输入输出相关的组件看了一下质量都挺高的，不只是样式，有的交互逻辑都完全生产可用，有音频组件相关需求的小伙伴不要错过”

Coinbase CDS

Coinbase 开源 CDS（Coinbase Design System）：Coinbase 团队将其针对 React 和 React Native 的跨平台组件库设计系统开源（Apache 2），其中不乏一些具有复杂效果的组件，如 RollingNumber。

Accented 无障碍测试工具

Accented：一个基于 axe-core 的前端库，用于持续无障碍性 (Accessibility) 测试并可视化问题高亮显示。将几行代码添加到您的 Web 应用中，您将看到交互式提示将在存在可访问性问题的元素旁边出现。

Introducing | Playground

Harmonizer：基于 OKLCH 和 APCA 对比公式的色板生成工具

evilmartians/harmonizer 是一款基于 OKLCH 色彩模型与 APCA 对比公式的工具，用于生成一致且具可访问性的 UI 色彩调色板。

可在 Figma 插件或 Web 界面中使用，利用 OKLCH 与 APCA 生成具一致亮度与对比度的配色方案。该工具通过定义光度等级、色相与背景上下文，自动生成可在浅色与深色模式中保持视觉一致的色彩体系。支持导出多种开发格式（Tailwind、CSS 变量、JSON）

lirantal/npm-security-best-practices：一份针对 npm 包管理器的安全最佳实践清单，帮助开发者防范供应链攻击并强化依赖安全。

Codepen 精选

Spooky Spectral Ghost：以 WebGL 与 Three.js 制作的一个诡异的鬼魂，用户可通过控制面板自定义多种参数，由 Filip Zrnzevic 制作。

digraph sink：Sophia Wood 基于 P5.js 的数学视觉系列 Mathtober，融合算法与艺术表现，展现图形生成美学。

resizable slide panels 🤙：Jhey Tompkins 创作的可调整尺寸幻灯组件，展示响应式交互设计的灵活性。

Tubes Cursor：Kevin Levron 使用 Three.js 制作的动态光标特效，灵感来自流动玻璃质感。

Thinking in Squircles：Dave Rupert 探索 CSS 新属性 corner-shape 带来的“squircle”（圆角混合形）绘制逻辑，提出“CSS squircle 更像被拉伸的圆，而非被压扁的方形”，并延伸至Chris Smith 的作品。

Elastic neon radio buttons with GSAP and SVG：使用 GSAP 和 SVG 的弹性霓虹灯单选按钮。

Anchor Positioned Popover with Contrast Slider：Simon Goellner 将新的 Popover API、锚点定位、浅色/深色配色主题以及他自己的范围滑块标记库与受 Praha37v 启发的流畅设计相结合，打造了这个完全现代化的范围滑块。

生态更新

React 19.2 – React：React 19.2 发布，带来更强的性能、服务端渲染改进与开发体验优化。
- 本次更新的重点包括全新 <Activity /> 组件、useEffectEvent hook、cacheSignal、性能追踪 (Performance Tracks)、部分预渲染 (Partial Pre-rendering) 功能，批处理 SSR 的 Suspense 边界修复，在 Node.js 中支持 Web Streams 以进行流式 SSR 的功能。
What's coming in ESLint v10.0.0 - ESLint - Pluggable JavaScript Linter：ESLint 团队公布 v10.0.0 的最终特性计划，重点聚焦在配置系统全面切换至 Flat Config、Node.js 支持更新、AST 改进及遗留 API 清理。
ESLint v9.37.0 released：本次 ESLint v9.37.0 作为小版本更新，重点增强了对 TypeScript 规则的支持（如 no-restricted-imports 增加 allowTypeImports）、优化了 --concurrency=auto 在缓存和多线程场景下的启发式逻辑以提升 lint 性能，并改进了 preserve-caught-error 对计算属性语法的识别。

Refs

FE Bits Vol.9｜Chrome DevTools 推出 MCP，Nuxt UI Pro 开源免费

2025-09-28T14:40:00Z

本周刊更新时间期望是在每周天，网站在建设中……
目前推荐使用 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 的应用案例与科技热点合集。

FE Bits Vol.8｜PyCon 之行、Cloudflare 大 Bug 与 NPM 沙虫警报

2025-09-22T12:00:00Z

本周刊更新时间期望是在每周天，网站在建设中……
目前推荐使用 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 用于追踪触发元素，允许在 CSS content 的 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：探讨 fetch API 的流式上传/下载支持及其局限性，尤其是不适合用来测量进度。
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 与开发实践分享的周刊内容。

FE Bits Vol.7｜chalk 和 debug 等 npm 包安全警告；Remotion 赞助 Mediabunny

2025-09-14T09:25:00Z

本周刊更新时间期望是在每周天，网站在建设中……
目前推荐使用 Folo 订阅本周刊的 Quaily RSS。
公众号前端周周谈 FE Bits，点击阅读原文链接可查看原文。
QQ 讨论小群 598022684，日常讨论前端技术 & 生活，也可在群里投稿自己的文章，随意加入，比较偏向粉丝群的性质～
本周刊同时也开源在 fe-bits-weekly，欢迎关注。

今天是 2025 年 9 月 14 日，星期日。

这几天一直很消沉，没来由的难过，但是还是要打起精神！情绪周期就是这么的不讲道理，但是听歌就会好很多，安利一首歌：「雪路」- 诗岸/wukino

生态与社区动态

Sponsoring Mediabunny | Remotion：Remotion 宣布停止自研 Web 多媒体库，转而赞助并协作推进 Mediabunny，致力于打造 Web 上的开源多媒体工具链。

npm 作者 Qix 被邮件钓鱼，npm 账号失陷，发布了多个恶意版本的流行包，如 chalk、debug、color 等热门包，以下是受到影响的包版本：

ansi-styles@6.2.2
debug@4.4.2
chalk@5.6.1
supports-color@10.2.1
strip-ansi@7.1.1
ansi-regex@6.2.1
wrap-ansi@9.0.1
color-convert@3.1.1
color-name@2.0.1
is-arrayish@0.3.3
slice-ansi@7.1.1
color@5.0.1
color-string@2.1.1
simple-swizzle@0.2.3
supports-hyperlinks@4.1.1
has-ansi@6.0.1
chalk-template@1.1.1
backslash@0.2.1

同时，DuckDB 相关包的 npm 账户 duckdb_admin 也遭到入侵，并发布了多个恶意版本。注入的代码与 Qix 攻击中使用的钱包吸金恶意软件相同。

duckdb@1.3.3 – ~14.9万次每周下载量。（发布于2025-09-09 01:13:07 UTC）
@duckdb/duckdb-wasm@1.29.2 – ~65k 每周下载量。（发布于 2025-09-09 01:11:47 UTC）
@duckdb/node-api@1.3.3 – 约 83k 每周下载量。(发布于 2025-09-09 01:12:15 UTC)
@duckdb/node-bindings@1.3.3 – ~72k 每周下载量。（发布于 2025-09-09 01:11:13 UTC）

文章与视频

你不知道的字体特性：是关于字体很好的文章，介绍现代字体（尤其是 OpenType 与 Variable Fonts）中鲜为人知但极其实用的特性，以及在 CSS 中调用这些功能的方法。这篇文章还推荐了一个可以玩这些可变字体的网站 v-fonts.com
Migrating to React Native's New Architecture (2025)：Shopify 分享其两大核心应用迁移至 React Native 新架构的经验与实践策略。
JavaScript 中的安全数组方法：介绍 ES2023 新增的不可变 (non-mutating) 数组方法 toSorted() toReversed() 和 toSpliced()，这些新方法的行为与它们的可变对应方法类似，但返回一个新数组而不是修改原始数组。
Andromeda 是一个新的由 Rust 构建的 JavaScript & TypeScript 运行时，核心由 Nova 引擎驱动，主打内存安全、零配置、GPU 硬件加速和丰富的 Web API 支持。
浏览器中的液态玻璃：使用 CSS 和 SVG 进行折射。超级棒的交互式教程，并且技术解析的也很全面，内含非常多 demo，把 Web Liquid Glass 玩明白了，非常值得一看。

本文通过物理折射原理（Snell 定律）、几何曲面函数、向量场计算以及 SVG displacement map，逐步构建出类似 Apple Liquid Glass 的玻璃折射与高光效果。作者在 Chrome 中实现了交互式演示，并展示了如何组合折射与高光生成 UI 组件。

需要注意的是该方法目前仍为实验性质，仅 Chromium 支持 backdrop-filter 调用 SVG filter，且性能也堪忧，可作为 Electron 等环境下的实验性特效；非生产级实现。

Color Shifting in CSS：本文通过构建粒子效果的案例，揭示了在 CSS 中实现颜色动态变化时会遇到的限制，如 RGB 插值导致灰色过渡，并提出利用 CSS filter 中的 hue-rotate() 作为更佳的解决方案。
You Don't Need Animations：讨论在 UI 设计中，动画何时有助于用户体验，何时反而适得其反。
How To Set Up Express 5 For Production In 2025：一步步讲解如何在 2025 年用 TypeScript 搭建生产可用的 Express 5 应用，包括项目初始化、代码风格校验、测试驱动开发、路由设计、认证与数据库集成等内容。
Too many tools: How to manage frontend tool overload：探讨前端开发中工具过度繁多的问题，并告诉开发者应如何管理“工具过载”以改善开发者体验。我觉得这篇说的很好，学习 “新趋势” ≠ “立刻引入”，应基于实验和需求，而非市场营销热度。

CSS 新特性

通过九个新模块重新学习 CSS：Web.dev 更新了 Learn CSS 课程，新增 9 个模块以覆盖近四年 CSS 的新特性。

更新后的模块紧贴近几年 CSS 标准发展与浏览器支持，所有教学功能均已达到或即将进入 Baseline 状态，包括 Interop 2025 中的新特性，如锚点定位和视图转换。每个模块配有明确的浏览器支持信息，保证学习即用。

What Can We Actually Do With corner-shape?：深入探索 corner-shape 在 CSS 中的潜力与实际应用案例

趣味项目与工具

Yqnn/svg-path-editor: Online editor to create and manipulate SVG paths：一个开源的在线 SVG Path 编辑器，开发者可以直接在浏览器中创建与修改路径，支持命令面板、快捷键、路径变换、坐标切换以及 ViewBox 调整等功能。 GitHub 地址
Splidejs/splide：Splide 是一个轻量级、灵活且易于访问的滑动器和轮播(slider & carousel)库，兼具高性能与可访问性。
harlan-zw/mdream：mdream 可以将任何网站转换为干净的 markdown 和 llms.txt。提高您网站的 AI 可发现性或为您的项目生成 LLM 上下文。
Cosmic UI 科技感组件库？！不过感觉组件有点少，很新的组件库。

ForgeUI｜官网

ForgeUI 是一个基于 React 的实验性组件库，重点在于“动画优先”的设计理念，提供动画表单、动态卡片、闪烁文字等现代化 UI 组件，旨在帮助开发者快速实现富交互界面。其技术栈包括 Next.js、TypeScript、Tailwind CSS、shadcn/ui 和 Framer Motion。项目定位更像是作者的“个人实验室”，供开发者参考与取用，而非正式社区驱动的开源产品。

Andromeda 是由 Nova 引擎驱动的最新 JavaScript 运行时。它使用 Rust ，拥有直接 GPU 加速图形支持、单文件编译和内存安全功能。
BlazeDiff：一个高性能、像素级精准的 JavaScript 图像对比库，比 pixelmatch 快约 1.5 倍，且保持相同的精度和输出质量。
太美了！诗人 David Whyte 的官网，以 WebGL 呈现水彩画般的互动质感，创造独特的艺术体验。
- 介绍文章：https://webgl.souhonzan.org/entry/?v=3004
- 网站地址：https://davidwhyte.com/experience/

库更新

Deno 2.5: Permissions in the config file：Deno 2.5 带来配置文件权限集、改进测试 API、依赖管理优化和性能提升等一系列更新。

Refs

Node Weekly Issue 592: September 9, 2025：本期涵盖 Node.js 生态最新动态，包括 LavaMoat 工具、Node.js 新版本发布、性能实践案例、以及丰富的库/框架更新。
React Status Issue 443: September 10, 2025：React 每周精选，涵盖 TanStack DB、WorkOS RBAC、Storybook 10、React Norway 2026、大量工具更新与 JavaScript 生态新闻。
Frontend Focus Issue 708: September 11, 2025：前端资讯简报，涵盖 CSS 技术探索、Web 工具动态及业界新闻

晒手办

本周去年买的 GSC 的芙莉莲到了！神！面雕也很好看，后面就应该没什么手办要买了～

FE Bits Vol.6｜变与不变，Chrome 17 周年与 CSS Mixins 草案

2025-09-07T10:30:00Z

本周刊更新时间期望是在每周天，网站在建设中……
目前推荐使用 Folo 订阅本周刊的 Quaily RSS。
公众号前端周周谈 FE Bits，点击阅读原文链接可查看原文。
QQ 讨论小群 598022684，日常讨论前端技术 & 生活，也可在群里投稿自己的文章，随意加入，比较偏向粉丝群的性质～
本周刊同时也开源在 fe-bits-weekly，欢迎关注。

今天是 2025 年 9 月 7 日，星期日。

浅谈前端的变与不变

这个小标题听着好唬人，其实各行各业都适用。

前阵子看到有人讨论“如何系统性地学习前端”，提到很多前端架构层面的东西多年未变，更应该关注整体架构设计和代码复杂度的控制。

我很赞同这个说法，不过我也想补充几点。前端其实是个非常宽泛的领域，细分下去有 toC 前端、toB 前端、基建前端、WebGL 前端等等。想要系统学习，首先得明确方向：是专注用户体验，还是深耕业务逻辑，或是投入工具链开发？不同方向要深耕的内容截然不同。

此外，前端并不是一成不变的。用户也不只有企业系统的用户，还有很多专注于创意表达、视觉展示的类型。游戏前端是前端，未来的 VR/XR 页面也是前端，浏览器插件/小程序开发是前端，Node 开发也算前端——甚至再泛化一点，跨端开发也未尝不是前端的一种延伸。

以一个 toC 前端的视角给建议的话，前端动画、CSS、Three、交互表现、性能优化、SEO……每块背后都是一整个知识体系，往深里去挖是学不完的。而技术选型，往往得跟着业务需求走，并没有一套通吃的“最佳实践”。

另一方面，前端技术本身也在持续的”变“。就拿 CSS 来说，这些年一直在努力干掉预处理器等变得更好用：原生嵌套语法、@if 函数、锚点定位、容器查询、shape() 函数……很多我们曾经要靠预处理器或 Hack 方式实现的，现在都渐渐标准化了。浏览器兼容性也在稳步提升，连 Safari 都在努力跟上——比如 WebGPU 在 iOS 26 中终于要得到支持了（虽然我平时也没少吐槽 Safari，但能看到更多特性被支持、渐进增强变得更可行，确实是好事）。

虽然前端至今仍有很多历史遗留问题都很糟糕，但我们也该看到它正在变好。如果你对这个话题感兴趣，推荐之前读到的一篇很棒的文章：HTML is Dead, Long Live HTML，很深刻。

那么以我之见，前端的“变”，更多体现在外在技术形态的快速迭代——CSS 标准不断更新、构建工具推陈出新、框架生态此起彼伏。今天流行 Webpack，明天可能就换 Vite；才刚理解 Vue 2，Vue 3 的 Composition API 又成了主流。这种变化是表层的、工具性的，也恰恰是前端最容易被别人看到最容易吐槽的。

而“不变”的，是底层的问题和核心设计思想：如何管理状态、如何分解组件、如何优化渲染效率、如何实现可维护的代码结构、如何保障用户体验的一致性。这些命题从早期的 jQuery 时代到如今的 React、Solid.js，从未消失，只是在不同的技术范式下以不同的语法和架构重现，任何语言。

我认为前端的发展，本质上是一场“表达方式的演进”，而不是“问题的替换”。

因此学好前端，并不是盲目追逐每一个新工具或框架，而是要在变化中识别出那些持久不变的原则——理解它们，才能真正建立起属于自己的、可迁移的技术能力。

最后想说的是，前端远不止是“熟练度”的竞赛。它既有界面的表象，也有工程的深度；既要应对交互的细节，也要把握架构的稳定。写一个动画，可以只是 setInterval，也可以深入到渲染原理、性能层级与视觉算法。选择“如何做”，本身就是一个技术判断和架构思考的过程。

任何一门手艺，重复和积累是基础。但如果你认为前端仅仅停留在“切页面、调样式、写交互”，那真的太小看这个领域了。

所谓“没有技术含量”，或许只是因为还没走到真正复杂的问题面前。

写到这儿发现其实好像适用于任何方向，哈哈。

偶尔也会想，前端真正的魅力，可能恰恰在于它离“表达”那么近。

看多了海外那些小而美的网站，真的有点羡慕——一张专辑、一位画师、一项公益倡议、一家街角酒店、甚至一款本地食品，都有人愿意为之精心制作一个独具风格的小网站。它们不一定复杂，却充满个性，带着创作者的温度与巧思。

这种“什么都能出个小网站展示”的文化，让人想起 Web 最初的样子，一直有人骂，一直有人爱。前端不仅是实现需求的工具，也可以成为创意表达的画布。

也许这正是前端技术一直吸引人的一点：它始终承载着人们对美的追求、对创意的表达，以及对每一个想法都值得被好好呈现的信念。

生态与社区动态

Google Chrome 迎来 17 周年，同时 Google 在反垄断案中保住了 Chrome。这里有一篇深度文章回顾了 Chrome 浏览器 17 年的发展历程，从发布到成为全球最广泛使用的浏览器。
ViteLand 2025 年 8 月更新回顾：Oxlint 推出类型感知功能和自定义 JavaScript 插件支持，旨在成为完整的原生速度 linter。Vite 引入 React Server Component 支持，并更新了 @vitejs/plugin-react。Vitest v4 测试版支持视觉回归测试，并优化了启动速度。Rolldown-Vite 默认启用原生插件，并持续优化打包器性能，如 inlineConst 功能。Oxc 也改进了代码压缩和对 styled-components 的支持。
- tsup 现在不再积极维护了。幸运的是，可以通过简单的命令轻松切换到 tsdown
- 您还记得 GitLab 使用 rolldown-vite 将构建速度提高了 2.6 倍吗？现在，在启用所有原生插件后，他们的构建时间减少了 7 倍，从 Vite 的 2.5 分钟缩短到 rolldown-vite 的 22 秒。这比他们现有的 Webpack 构建速度也快了 43 倍。
GitHub 添加了对 WebP 图像的支持：GitHub 全面支持 WebP 图片上传与预览，现在用户可以在评论、Issue、Pull Request、Gist 与代码仓库中直接上传和预览 .webp 文件，此前需要下载才能查看。
使用带有 Suspenseful Data 数据的 Activity 组件：React 19 实验性组件 Activity 可以通过 mode 属性控制子组件的隐藏/显示，其独特之处在于：当组件被隐藏时，它会卸载副作用（Effects），但保持组件的本地状态，并且继续以低优先级执行 Suspense 数据请求。相比传统的父级过滤或全量查询方式，Activity 能在复杂场景中提高性能、用户体验和可维护性。
Arc、Dia 被 Atlassian 以 6.1 亿美元收购：Atlassian 宣布以 6.1 亿美元收购 The Browser Company，也就是 Arc、Dia 浏览器所在公司。

文章与视频

谈谈 AI 编程工具的进化与 Vibe Coding：区分 Vibe Coding 与 Context Coding，系统梳理 Copilot、Cursor、Claude Code 的上下文工程（Context Engineering）路径与实践取舍，并给出可操作的方法论与职业思考
关于 CSS 颜色插值你需要了解的内容 | CSS-Tricks：深入讲解 CSS 中的颜色插值 (color interpolation)，如何在不同色彩空间下实现更平滑与细腻的过渡效果。
CSS 对齐的基础知识：这篇讲 CSS 对齐讲的很明白，感觉之前看 align-items 和 justify-content 都朦朦胧胧的，还得是一起讲最好。
#92 Liquid Glass 之外 Apple 的改变：内容十分有趣，因此收录于此，剖析 Apple 新视觉语言 Liquid Glass 的应用与问题，探讨其在 iOS、iPadOS 和 macOS 上的设计影响。
从服务器状态推导客户端状态：探讨如何避免冗余同步，通过“派生状态(derive state)”来更优雅地保持 Client State 与 Server State 的一致性。
不要继承 box-sizing：作者论证为什么不应该通过继承的方式来设置 box-sizing，而应该直接统一声明并在需要时覆盖。
为什么浏览器会限制 JavaScript 定时器？：探讨浏览器为何限制 JavaScript 定时器 (timers)，并通过实验比较不同定时方案的性能差异，最终推荐使用 Scheduler API。
是否应该预加载字体以提升性能？：预加载字体可能提升性能，但也可能拖慢首屏渲染 (FCP/LCP)，这篇文章权衡了预加载在不同场景下的风险与收益，并提出了实践建议：仅预加载关键字体、自托管字体、谨慎区分文本字体与图标字体。
为什么语言模型会产生幻觉：OpenAI 团队解释大语言模型为何会生成“幻觉”(hallucinations)，以及如何通过优化评估方法与训练方式减少此类错误。

CSS 新特性

5 个使用新 @function 规则的实用 CSS 函数：本文介绍了 CSS 新推出的 @function 规则，展示了如何通过自定义函数为样式表带来逻辑能力，使 CSS 更加动态、可维护，并提升设计系统的表达能力。作者通过五个实用案例（数值取反、透明度管理、流体排版、条件圆角、响应式侧边栏）以及一个 light-dark 主题切换函数，说明了现代 CSS 在逻辑处理和组件化方向上的巨大潜力，并展望了未来 @mixin 和 @apply 等特性的应用场景。

CSS 函数和 Mixins Draft Spec 是一个非常令人兴奋的规范。我们刚刚获得了 @function 规则，但还有更多内容！我尤其期待 @mixin 和 @apply 功能，它们能让你编写接受变量输入的 CSS 代码块，并输出动态样式。这将使创建比函数更复杂的样式成为可能。例如 CSS 函数仅能输出单一结果值，而 mixin 可同时应用多种样式。

Mixins & Functions to Streamline CSS：探讨如何利用 CSS 的 Mixins 与 Functions 优化开发流程，并结合最新 CSSWG 会议动态。
@function 自定义函数让 CSS 支持编程啦：介绍 CSS 新特性 @function 规则及其应用案例，展示其在编程化 CSS 中的潜力。

趣味项目与工具

Rainbow Loop 彩虹循环精彩的 GSAP 驱动的 SVG 动画。

趣站 musicForProgramming();：一个简约的文本版音乐站，为程序员在写代码时提供背景环境音乐的精选集，设计也很有趣。

90's Cursor Effects：一个怀旧的光标效果集合，为现代浏览器优化，简单易用。

bahdotsh/wrkflw：WRKFLW 是一款强大的命令行工具，用于在本地验证和执行 GitHub Actions 工作流程，无需完整的 GitHub 环境。它帮助开发者在将更改推送到 GitHub 之前，直接在他们的机器上测试他们的工作流程。
useautumn/autumn：Autumn 是一个介于 Stripe 与应用之间的开源计费中间层，支持订阅 (subscription)、额度充值 (credit systems)、基于使用量的定价 (usage-based models) 等复杂计费方式。它通过简化支付流程、解耦计费逻辑与应用代码，帮助开发者避免繁琐的 webhook、升级/降级、取消及支付失败。「记得之前看到过，现在又看到了于是记一下」
Awesome-Nano-Banana🍌-images：一个展示 Google Nano-banana 在多种图像生成与编辑任务中的效果和提示词的精选案例库。

Refs

Frontend Focus Issue 707: September 3, 2025：本期聚焦 Anchor Positioning、Chrome 发展史、AI 辅助开发与 CSS 创意应用等前端热点。
JavaScript Weekly Issue 751: September 5, 2025：本期涵盖了浏览器定时器机制、AI 辅助开发、Chrome 发展史、Lean 语言、重要框架与工具的更新，以及社区分享的有趣项目。
Web Weekly #167：涵盖了本周前端世界的最新动态，包括 CSS 新特性、现代正则表达式、浏览器生态与可访问性话题等。
React Status Issue 442: September 3, 2025：React 社区动态、工具更新与前端生态的最新资讯

晒手办

在最后，晒晒新手办！《我的 Miku 泡面压太多了怎么办》

这次收到的手办袖子上有点溢胶。不过整体还可以，很可爱！

FE Bits Vol.5｜Nx 包被投毒、ESLint 多线程 Linting 和 Firefox 实验性 PWA

2025-08-31T10:00:00Z

本周刊更新时间期望是在每周天，网站在建设中……
目前推荐使用 Folo 订阅本周刊的 Quaily RSS。
公众号前端周周谈 FE Bits，点击阅读原文链接可查看原文。
QQ 讨论小群 598022684，日常讨论前端技术 & 生活，也可在群里投稿自己的文章，随意加入，比较偏向粉丝群的性质～
本周刊同时也开源在 fe-bits-weekly，欢迎关注。

今天是 2025 年 8 月 31 日，星期日。

本周比较喜欢的是这篇文章：Getting Creative With Images in Long-Form Content | CSS-Tricks，探讨了如何通过突破常规的图片布局、网格设计、CSS 形状、字幕与留白等手法，让长文中的图片不仅是插图，更能塑造阅读节奏与体验。

现在只需要一个 shape-outside 和 shape-image-threshold 就可以实现这样的图像 Alpha 通道环绕效果了。

以及，CSS shade-* 的支持已经广泛可用（Baseline Widely available）了。

有点小感慨，回忆了一下以前的各种黑魔法 hack 实现，和现在的越来越多的 CSS 新特性。

生态与社区动态

供应链安全警报：流行 Nx 构建系统软件包遭数据窃取恶意软件入侵：nx 包被投毒，通过调用 AI CLI 工具窃取敏感资料。由于 nx 包 Github 仓库的 Github Actions 权限配置错误，导致 npm Token 被黑客窃取。黑客在短时间内发布了多个带毒新版本软件包，诱导受害者升级，恶意软件会通过 postinstall 过程安装，这已是第几起类似事件。
重塑 Remix：V3 将放弃 React，转而使用 Preact 的分叉：Remix v3 将弃用 React、改用 Preact 分叉以“自有”更多栈并最小化依赖，强调 Web API、运行时优先与可组合性并优化 LLM，社区反应不一且预览版尚未发布。 [Remix 原文]
上周这事儿，还有后续呢。微软正式表态 Windows 11 8 月更新与 SSD 硬盘故障无任何联系｜ WI1138854 - 小众软件：微软称经调查与遥测未发现 KB5063878 与 SSD/HDD 故障有关，暂无证据表明更新致存储问题，并将继续监控反馈。
JavaScript 的商标问题还在战斗，JavaScript’s trademark problem：解析 Oracle 持有 “JavaScript” 商标带来的法律风险，并提出三条路径：迫使其放弃商标（Deno 诉讼）、改名或以“JS”替代；若前者成功，ECMAScript 或可更名为“JavaScript standard”。
在 Firefox 中尝试 PWA，并告诉我们您的想法！：Firefox 浏览器在 Release 142 推出实验性 Web Apps（PWA）功能，欢迎试用并反馈。
面向网络的 AI 辅助功能：Chrome 把 AI 助手集成到了 DevTools 的网络面板中，现在可以基于所选请求进行分析与对话，包括打开方式、上下文与原始数据查看、示例提示、历史管理及反馈机制。

文章与视频

Say bye with JavaScript Beacon：作者指出在 beforeunload/unload 里用 XMLHttpRequest 或 fetch 上报并不可靠，因为浏览器不会为脚本阻塞卸载流程，网络请求易被取消；推荐使用信标接口 (Beacon API) 的 navigator.sendBeacon 进行 fire-and-forget 异步上报：无需回调或 Promise，JS 立即结束，由浏览器后台传输；虽仅支持 POST 且负载很小，但非常适合离开页面、实时埋点与轻量级前后端同步等无需等待响应的场景。
- 有关 Beacon API 的更多信息，请查看 MDN
你的字体加载错误（这会影响你的性能）：系统梳理网页字体从历史到工程实践的全部要点，指出常见误区并给出面向性能、可访问性与合规的最优加载方案，也是很有意思的一篇文章。

EOT：Internet Explorer 的专有格式，谢天谢地已经灭绝。
了解 daisyUI 5 中的新功能以及如何迁移：daisyUI 5 完全重写，以更轻量快速并引入强大的新主题引擎和组件，全面配合 Tailwind CSS 4，带来更高性能与更强定制能力。
：介绍 hidden 的 until-found 隐藏机制及 beforematch 事件，基于 content-visibility:hidden 在锚点/页面查找时自动显现，适用于折叠内容、帮助信息与标签页，Chrome 已支持多年，Safari 亦已跟进。
Big O：讲算法复杂度的一篇文章，有丰富的交互式 demo，以求和、冒泡排序与二分查找等可视化示例通俗讲解 Big O（O(1)、O(log n)、O(n)、O(n^2)）的增长规律，并给出用 Set/Map、索引遍历与结果缓存等实用性能优化建议。
加速 JavaScript 生态系统 - Semver：一次性能剖析，展示如何让包管理器中的语义化版本（Semver）比较提速至 33x

CSS

你“可能”不再需要 JavaScript：一篇以实践与立场并重的长文，作者以“很多站点并不需要 JavaScript”为引子，系统展示现代 CSS 的强大与可用性，展示仅用 HTML/CSS 即可实现动画、主题、表单校验、组件交互与移动端适配。
interpolate-size 属性是渐进增强的典范：用 CSS 属性 (interpolate-size) 在支持的浏览器里平滑过渡到 height: auto，并以渐进增强保证旧浏览器得到最小可用体验
抢先学习大开眼界的 CSS corner-shape 属性 « 张鑫旭-鑫空间-鑫生活：详解 CSS 新特性 corner-shape，基于 border-radius 自定义角形（round/squircle/scoop/bevel/notch/square 或 superellipse(K)），支持按方位设置与平滑动画，目前仅 Chrome 139+ 支持。
锚点定位基础：本文系统介绍了 CSS 锚点定位（Anchor Positioning）基础：通过为任意元素定义锚（anchor-name）并在目标元素使用 position-anchor、anchor() 或 position-area 等特性，实现在不重构 DOM 的前提下，将元素稳定地相对其他元素对齐，并用 position-try-fallbacks（如 flip-block、flip-inline）优雅处理视口溢出问题。
gradient.style 的制作：从草图到上线，作者分享如何在遵循 CSS Images 规范下，把渐变的 color stops、double positions 与 transition hints 可视化，并落地为可用的设计与开发工具 CSS HDR Gradients
CSS 电梯：带有楼层导航功能的纯 CSS 状态机，介绍如何仅用现代 CSS（:has()、@property、自定义属性、计数器等）构建可交互的电梯状态机，实现楼层导航、方向指示、按距离调速动画与无障碍播报，无需 JavaScript，并给出实际应用场景。

这部电梯不仅仅是一个玩具。这是一个蓝图。考虑以下实际用途：

没有 JavaScript 的交互式原型

使用实时状态的窗体中的进度指示器

具有库存或状态机制的游戏 UI

逻辑谜题或教育工具（仅 CSS 状态跟踪！)

减少对性能或沙盒环境的 JavaScript 依赖

这些技术在静态应用程序或受限脚本环境（例如电子邮件、某些内容管理系统小部件）中特别有用。

然后是两篇关于 CSS path 的教程，这两篇文章的质量非常高，交互 demo 特别多，是很棒的教程。

The -path of Least Resistance (Part 1)：本文深入讲解了 CSS clip-path 的语法与用法，从基础图形到复杂自定义路径，展示了如何突破方框限制，让界面元素拥有更灵活和富有表现力的形状。
The -path of Least Resistance (Part 2)：深入讲解 CSS offset-path 路径动画，用 offset-distance 沿自定义路线运动，结合 offset-anchor / offset-position / offset-rotate 与变换顺序控制锚点与朝向，解析闭合/开放路径及负/溢出距离、ray() 无限射线、性能优化与减弱动效可访问性等要点。

工具与库更新

CSS HDR Gradients 这个工具相当棒～生成 CSS 渐变的工具，亮点是有很全的色彩空间支持。 [GitHub 地址]
Chainlift/liftkit：LiftKit 是一个基于黄金比例的 UI 框架，它的核心是一组公式和变量，结合 Material 3 提供动态颜色与光学间距校正；通过模板或 CLI 可快速集成到 Next.js，支持按需安装与 CSS 树摇，附带 Figma/Webflow 资源与 FAQ，但按钮变体和变量文档仍在完善中。
Meridius-Labs/electron-liquid-glass：一个在 macOS 上为 Electron 应用提供原生 NSGlassEffectView 炫酷玻璃效果的库，零配置即可使用并支持自定义。支持 TypeScript、自动暗黑模式、可定制边角和颜色，且有预编译二进制文件。仅限 macOS，在其他平台上会安全降级为 no-op（无效果但不报错）。
transloadit/uppy 模块化 JavaScript 文件上传器 Uppy，支持多源选择、断点续传、可插拔 UI 与后端集成，快速为任意应用构建可靠上传体验

库更新

ESLint v9.34.0 中的新功能：多线程 Linting —— ESLint v9.34.0 原生支持多线程并行 lint，通过 --concurrency 启用，在大项目中可带来约 1.3x ～ 3.01x 提速，并提供基准与缓存等优化建议。
Introducing Zod Codecs：Zod 4.1 引入编解码器（codec）API，实现类型安全的双向数据转换，弥补 transform 的单向缺陷。
Node.js v24.7.0 (Current)：引入后量子密码学（Post-Quantum Cryptography）与 Web Cryptography 现代算法、在单个可执行应用程序中 Node.js 执行参数支持及根证书更新到 NSS 3.114 的一次重要版本
Rspack 1.5 发布公告 - Rspack：新版本聚焦构建性能、浏览器运行与生态升级，带来 barrel 文件延迟构建、原生文件监听、常量/枚举内联、模块联邦运行时提升等一系列优化与新特性，Rstack 其他进展如下：

Rslint 发布：TypeScript 优先的新一代 Linter（Go 实现，基于 typescript-go），支持 ESLint 风格配置、IDE 插件、自动修复，已覆盖 50+ 条 @typescript-eslint 规则；见 Rslint 官网。

Rsbuild 1.5：默认开启 lazyCompilation、lazyBarrel、inlineEnum、typeReexportsPresence 等，加速开发与准确类型处理；新增 output.module 支持 Node.js ESM 产物，后续将扩展到 Web。
Rslib 0.12：模板集成 Rstest 测试框架，推进全新 ESM 产物方案，目标对齐 esbuild/Rollup 的产物质量并保持 webpack 互操作一致性；参考 interop 测试。
Rspress 2.0 beta：新增 Markdown 文本复制组件，配合 @rspress/plugin-llms 自动生成符合 llms.txt 标准的文件，方便大模型处理内容。
Rsdoctor 1.2：新增聚合模块精确分析与全新 Treemap 视图，改善可视化与准确性；详见 Rsdoctor 1.2 发布博客。
Rstest 0.2：新增完整 mock API（ESM 支持）、watch 模式增量重跑与 CLI 快捷键，显著提升测试效率；见 Mock API 文档。

Prisma 都整的加了个 AI 安全护栏了，太体贴了，Prisma 6.15.0 发布：新增 AI 安全护栏、统一 prisma-client 运行时配置、支持 Vercel Fluid 连接池、Management API GA、Pipedream 集成、create-db 输出 JSON、直连能力接近 GA。

Prisma ORM 现在包括内置安全检查，可在 AI 编码助手触发时防止破坏性命令。CLI 可以识别它何时被流行的 AI 代理执行，例如 Claude Code、Gemini CLI、Qwen Code、Cursor、Aider 和 Replit。
Electron 37.4、Faker 10.0、Tiptap 3.3、RxDB 16.18……

FE Bits Vol.4｜Next 15.5、RN 0.81、几个顺手工具

2025-08-24T04:00:00Z

本周刊更新时间期望是在每周天，网站在建设中……
目前推荐使用 Folo 订阅本周刊的 Quaily RSS。
公众号前端周周谈 FE Bits，点击阅读原文链接可查看原文。
建了个 QQ 讨论小群 598022684 欢迎加入，日常讨论前端技术 & 生活，也可在群里投稿自己的文章，随意加入，比较偏向粉丝群的性质～
本周刊同时也开源在 fe-bits-weekly，欢迎关注。

今天是 2025 年 8 月 24 日，星期日。

本周我给我开发的 MoeCopy AI 浏览器插件写了个文档站 https://moe.cosine.ren/docs

本浏览器插件开源，轻量级，填入自己的 apikey 即可使用，欢迎尝试，喜欢的话可以给个 star。

感觉这周挺忙，也没有很多时间搜集素材搞深入分析，所以这期是比较简单的汇总。

写在前面的碎碎念

这周在工作群给不了解的同事发了下关于 Cursor 定价调整的说明，感觉也可以同步一下这里。Cursor 的定价列表。

Cursor 的定价曾经调整过很多次，被骂惨了。最早是随便用，pro 就可以，每月 500 次快速请求用完了会进入慢速请求模式但是还是能用。后面调了好几次，慢慢变成请求计费取消慢速请求，现在变成了：

Pro ($20/月)：适合主要使用 Tab 功能，偶尔使用 agent 的用户。
Pro+ ($60/月)：适合几乎每个工作日都使用 agent 编程的用户。
Ultra ($200/月)：适合使用 agent 完成大部分编程工作的高级用户。

请求限制是：

Pro：约 225 次 Sonnet 4 请求，约 550 次 Gemini 请求，或约 650 次 GPT 4.1 请求
Pro+：约 675 次 Sonnet 4 请求，约 1,650 次 Gemini 请求，或约 1,950 次 GPT 4.1 请求
Ultra：约 4,500 次 Sonnet 4 请求，约 11,000 次 Gemini 请求，或约 13,000 次 GPT 4.1 请求

官方还说「像 Opus 4 这样的模型每次请求消耗更多令牌，比其他模型更快达到使用限制。我们建议有选择性和有意识地选择这些模型。」就是烧不起 token 了

超过就会转很笨的 auto 模型，或者开 max 模式按量付费，所以现在 Cursor 不划算了，对于开发来说只用 tab 就够了。

Teams 版本就是按人头计费， 40 美元/月

团队席位每月为每个用户提供 500 个请求。每次使用代理时，大多数模型将消耗一个请求。少数模型成本更高：当您启用思考功能时，Sonnet 3.7 和 Sonnet 4 消耗两个请求。MAX 模式定价基于令牌计算，根据模型提供商的 API 价格。

省流的话，就是现在个人档/团队档位是按请求次数计费，加钱加档位只是免费请求的量会更多，没有任何新功能，所有档位都包含所有功能，超过免费量就会转很笨的 auto 模型，或者开 max 模式按 token 付费。

官方似乎也意识到了这点，现在还专门在定价说明里强调 20 刀的版本「适合主要使用 Tab 功能，偶尔使用代理的用户」

该跑路的应该在七月份的定价调整的时候就跑路了吧，感觉现在留下的都是离不开他的 Tab 或者是年付订阅的了。

个人的话其实是已经用 Claude Code 替代 Cursor 的对话很久了，只用 Cursor 的 Tab 功能，他的 Tab 功能目前还是没有找到平替的。

生态与社区动态

微软 8 月份更新 Win11，真把用户的 1TB 硬盘炸了？还能抢救吗？
Reflections on the React Community：Lee 回顾自己十年 React 与 Next.js 的经历，反思社区建设、开源与商业动机的矛盾，以及 React Server Components 的发展与挑战，并呼吁对开源贡献者保持善意与理解。
JavaScript 的未来：等待我们的是什么：文章总结了最新 TC39 提案进展，展示了从资源管理 using、Array.fromAsync 到随机数、数据不可变等功能如何塑造 JavaScript 的未来发展。
Next.js 15.5 Released，引入了 Turbopack 构建（beta）、稳定的 Node.js 中间件、TypeScript 路由类型完善、弃用 next lint，并提前提示 Next.js 16 的弃用变化。
React Native 0.81：本次更新带来 Android 16 支持、iOS 预编译构建加速、弃用 SafeAreaView、移除内置 JSC 以及多项性能改进和破坏性变更。

文章与视频

📓 瘸腿的巨人：非常有趣的观点。

无论一个人在某个领域攀登到多高的位置，他首先是一个普通人。和我们一样，他们需要呼吸、进食，如果饮食单一也同样会营养不良。他们之所以成为「大 V」或专家，往往只是因为后天的发展路径、精力分配以及行业机遇，让他们在特定的道路上走得更远，处理着与我们不尽相同的问题。

作者在社交媒体上观察到一些在各自领域有影响力的用户，在某些话题上表现出知识的局限性。他们将大量时间和精力投入到专业领域，牺牲了对其他领域的了解。而这种“瘸腿”的状态使得他们在熟悉领域之外显得脆弱，这种现象在现代社会普遍存在，深度追求往往伴随着其他方面的不足。学会理解和接受这种现象，认识到“巨人”也是普通人，他们的“瘸腿”是时代和社会分工的产物。

追求任何一个领域的深度，似乎都不可避免地要以牺牲其他领域的广度为代价。
所以，当我再看到那些平日里敬仰的专业人士，在他们不熟悉的领域发表一些浅薄言论时，我慢慢学会了不再感到惊讶或失望。我看到的，不再是一个偶像的崩塌，而只是一个将所有精力都投入到一条腿上的人，不小心用另一条腿走路的样子。

📓 Server and Client Component Composition in Practice：探索 Server Component 与 Client Component 的组合实践。
📓 设计 Chrome 的内置 AI Web API：Google Chrome 团队成员 Domenic 分享了有关 Chrome 最新 AI 功能 API 设计方式的一些见解。
📓 Circular gallery of rounded images：利用 CSS 的 offset 属性和 :nth-child 选择器，即可创建一个将多张图片排列成同心圆的画廊效果，还可以实现带动画版本的。
📓 如何因 Shopify webhook 解析错误导致数据库完全删除：一次错误的 Shopify Webhook 解析因 JavaScript 解构与 ORM 行为理解不当导致全库数据被删除，但最终依靠完善的备份机制成功恢复，凸显输入验证、认证与防御性编程的重要性。
📓 Why LLMs Can't Really Build Software - Zed Blog：探讨 LLMs 目前无法真正构建软件的观点，认为其缺乏像人类工程师一样建立并维持清晰"心智模型"的能力
📓 Web Design: What is the web capable of that is hard to express in design software?：探讨设计软件与真实 Web 技术能力之间的差距，强调动态、响应式和交互特性难以在设计稿中表达。
📓 OpenAI Cookbook：OpenAI 在发布 GPT-5 的时候也发布了一些全新的教程，涵盖提示词指南、新工具使用及代码编写等内容。
📓 Obsessing Over Smooth radial-gradient() Disc Edges：探讨如何利用 CSS 的 resolution 媒体查询，解决 radial-gradient 创建的圆形边缘锯齿问题。
📓 An Interactive Guide to SVG Paths：深入探讨 SVG 的 path 元素，详细介绍如何绘制 Bézier 曲线和弧形的优质教程。
📓 终端（Terminal）、TTY 和 Shell，还有 SSH，一次搞懂它们到底是什么？ - 小众软件：科普了计算机中多个相关概念，包括终端（Terminal）、TTY、Shell 及 SSH 协议，帮助读者理解这些术语的定义与功能，以及它们在现代计算机中的应用和重要性。

工具与库更新

工具

CPTI - 程序员 16 型人格测试：程序员的 MBTI 人格测试，AI 描述挺准确，想法很有趣。
RegExp Equivalence Checker：一个可检测两个正则表达式是否匹配相同字符串的在线工具，并展示差异示例与支持的语法。
Lookin：最近看 iOS 开发看到的，Lookin 是一个由腾讯微信读书团队开发的、专为 iOS 开发者设计的免费开源 UI 调试工具。作者的介绍文章在 https://mp.weixin.qq.com/s/DL28y2qHkuDv4W_zLUbKcg
MaterialYouNewTab：这是一个灵感来源于谷歌“Material You”设计的简洁新标签页浏览器扩展。
Streamdown：Vercel 出的一款专为 AI 流式响应设计的 react-markdown 替代品，能智能处理并渲染不完整的 Markdown 内容。
IntraScribe：一个专为重视数据隐私的团队设计的本地化语音转录与总结工具，确保所有数据保留在本地服务器。
MingCute：一个精心设计的开源图标库，提供多种风格与格式，适合网页和移动端的设计与开发使用。

库更新

Next.js 15.5 Released
- Turbopack Builds（测试版）：生产 turbopack 版本（下一个版本 --turbopack）现在处于测试阶段
- Node.js 中间件（稳定版）：Node.js 运行时对中间件的支持现在稳定
- TypeScript 改进：类型化路由、路由导出验证和路由类型帮助程序
- next lint：弃用 next lint 命令，现在可以在 ESLint（综合规则）、Biome（快速且规则较少）或无 linter 之间进行选择。ESLint 项目现在生成显式的 eslint.config.mjs 文件，而不是依赖下一个 lint 命令包装器，从而为您的 lint 规则提供完全的透明度。
React Native 0.81 Released：
- 默认支持 Android 16 (强制 edge-to-edge views)
- iOS 预编译构建实验性支持，速度提升最高 10 倍
- Expo SDK 54 开启 beta，集成 RN 0.81 + React 19.1
Waku 0.25, Astro 5.13, ESLint v9.33.0, Fastify 5.5, pnpm 10.15, Biome 2.2……

完～

FE Bits Vol.3｜CSS attr() 类型化进化，PostCSS 复盘 12 年

2025-08-17T03:40:00Z

本周刊更新时间期望是在每周天，网站在建设中……
目前推荐使用 Folo 订阅本周刊的 Quaily RSS。
公众号前端周周谈 FE Bits，点击阅读原文链接可查看原文。
建了个 QQ 讨论小群 598022684 欢迎加入，日常讨论前端技术 & 生活，也可在群里投稿自己的文章，随意加入，比较偏向粉丝群的性质～
本周刊同时也开源在 fe-bits-weekly，欢迎关注。

今天是 2025 年 8 月 17 日，星期日。

这周二我迎来了我的 24 岁生日，回想往昔颇为感慨，没想到这就已经 24 岁了，一转眼妹妹都高考完上大一了，时间过的真的是很快的。

这周内容较少，不过也够了，就没合并成双周刊。

生态与社区动态

本周没有什么大动态，那就放一些我关心的比较有趣的文章或事儿吧～

Rstack 家族新成员 RSLint 发布，实验阶段，由 typescript-go 提供支持。
GitHub CEO Thomas Dohmke 宣布辞职创业，将任至 2025 年底，GitHub 并入微软不再独立运营。Auf Wiedersehen, GitHub ♥️
微软关闭 12 年历史的 Microsoft Lens 微软宣布将于 2025 年 9 月 15 日起逐步关闭其拥有 12 年历史的文档扫描应用 Microsoft Lens，并计划由其 AI 助手 Copilot 取代。
Rsdoctor 1.2 发布：打包产物体积一目了然：Rsdoctor 1.2 新增聚合模块体积分析、Gzip 压缩展示、Rsdoctor MCP 和 Treemap 可视化增强。
Google 发布了 Gemma-3-270M 超小型多模态模型，适合端侧与低资源场景。
Chrome 140 Beta 版 | Blog | Chrome for Developers：Chrome 140 Beta 引入 CSS 类型化算术、HTTP Cookie 前缀等新特性，并优化视图过渡与本地网络访问限制。

文章与视频

📓 我们从创建 PostCSS 中学到了什么：Andrey Sitnik 分享了过去 12 年来创建和维护 PostCSS 开源项目的经验教训。
📓 开源项目的「死与新生」 - 云游君从开发者视角探讨如何通过社区运营、决策优化与长期主义延长开源项目生命周期，并坦然面对项目迭代与更替。
📓 超短篇：苹果系统迁移史 - 哔哩哔哩：台长的超长文，推荐阅读，很有意思！
📓 CSS @container scroll-state 容器滚动查询：讲解 CSS 中 @container scroll-state 滚动容器查询的新玩法，介绍如何基于容器滚动状态进行样式响应与交互。
📓 How to style a broken image：CSS 小贴士，如何优雅处理图片加载失败的样式与占位。
📓 普通人也能用得上的 Context Engineering 技巧：这篇文章面向普通用户，提炼了实用的“上下文工程”技巧：通过精简会话与任务、主动提供关键信息，以及借助 Agent 选择合适模型、提供工具并先做计划来获取更准确的上下文，从而显著提升使用 AI 的效果与效率。
📓 我如何录制、编辑并发布 YouTube 视频：Stefan Judis 详细分享了他制作 YouTube 技术视频的完整流程，涵盖从选题、代码准备、录制（Screenflow、Keynote）、编辑（Descript）到硬件设备和实用技巧等方方面面。
播客捕蛇者说 Ep 56. 对话 Hawstein：从独立开发，到追寻人生的意义：对《一个独立创造者的五年》作者 Hawstein 的长谈，涉及自由代价与存在主义议题。从独立开发切入，谈人生规划与意义追寻。

本期节目，我们请到了《一个独立创造者的五年》的作者 Hawstein。从独立开发切入，我们聊了很多关于自身和时代的思考。做了六年捕蛇者说，本期是我个人（laike9m）最喜欢的一期，也希望大家喜欢。
本期关键词：
独立开发 / 人生规划 / 现代性与分工 / 副业模式 / 开源 / 自由的代价 / 存在主义危机 / 技术乐观 / 死亡思考

我很喜欢这期播客，很有意思。

CSS 新特性

📓 A gentle introduction to anchor positioning：CSS 锚点定位功能让元素能基于另一元素位置自动布局，简化响应式菜单和提示框的实现。

有关 CSS attr() 的几篇优秀文章：

📓 如何在 CSS 中使用 attr() 属性设置列、颜色和字体大小：进阶示例讲解 attr() 在列布局、颜色与字号的玩法，并提供了相关资料推荐
📓 CSS attr() 现已支持类型：Amit Merchant 通过这个很棒的教程向我们提供了如何在 attr() 中使用类型的概要，演示了它设置宽度和背景值是多么方便。
📓 una.im | attr() 的新功能：CSS 的attr()函数新增了类型转换功能，可直接将 HTML 属性值作为颜色、数字等类型用于样式，无需 JavaScript 介入。
📓 CSS attr() 已升级 | Chrome for Developers：Chrome 团队官方详解 attr() 升级的背景与实践，围绕类型支持、可用性与示例代码的系统介绍。

本期的 CodePen Spark#464 就是围绕 CSS attr() 为主题的

工具与库更新

CSS-Questions | CSS-Tricks：Sunkanmi Fafowora 推出 CSS-Questions 网站，提供 100 多道题与综合 20 题速测，帮助你检验 CSS 知识的掌握情况。
self.so：把你的简历一键变成可发布的个人网站。上传简历 PDF，经 Llama Guard 审核与 Qwen 2.5 解析后生成站点，基于 Next.js、Clerk、S3、Upstash，开源，可 Vercel 部署。
RSS Anything：使用 Diffbot 的 Extract API 将网站上的链接列表转换为 RSS 提要。
Tiny Helpers：开发者与设计师的在线小工具大全。涵盖颜色、CSS、图像、图标、性能、可访问性、API 等数百款工具，并可按名称或时间浏览。
Online CSS Analyzer - Project Wallace：Project Wallace 维护了一组 CSS 工具，可输入 url 分析当前的 CSS 代码库。强烈推荐！
Liquid Glass | Cubiq：又一个可交互的“液态玻璃”滤镜与拖拽特效演示。通过背景滤镜和拖拽手柄欣赏流体质感的 UI 交互。
Repetition Image Animation：在这个由 GSAP 驱动的 demo 中，一张走廊的照片伸缩成一系列迷幻的镜厅效果。切换不同的变体，并查看单击和拖动时会发生什么。
Omnara AI 监工：一个开源的 AI 代理“任务控制台”，可在手机/网页上实时监控与交互（通知、问答、远程启动），支持 Claude/Cursor/Copilot 等，并提供 SDK、MCP/REST 接口与 iOS/Web 客户端。
Defuddle：一个从网页中提取并清理主要内容的工具，旨在提供易于阅读且结构化的内容，便于进一步处理或转换为 Markdown。
KittenTTS：KittenTTS 是一款超轻量级（25MB、无需 GPU）的英文文本转语音模型，可在任何设备上运行并提供惊艳效果，仅支持英文。

深入分析

我们从创建 PostCSS 中学到了什么

What we learned from creating PostCSS

这篇文章感觉很有意思，所以浅记录一下。

AI 摘要：这是一篇 PostCSS 12 年演进的复盘：从 Autoprefixer 的诞生到 PostCSS 成为被 Google、Wikipedia、Tailwind 等采用、月下载量 4 亿的开源基础设施。作者围绕产品定位、插件策略、性能架构、版本演进、社区与生态、与竞品相处以及维护者防止倦怠的实践，给出一套贯穿前端工具链建设与开源运营的可复用方法论：以用户可用为先、以架构赢性能、以默认值减少配置、以人情味促协作、以渐进式变更稳生态。

作者从中学到了以下几课：

第 -1 课：与您的大客户更加合作。 至少让他们有机会向您发送带有原型的拉取请求。
第 0 课：不要忘记预留大量时间来编写文档和推广您的开源项目。 此外，请毫不犹豫地直接联系潜在客户，建议他们使用您的图库。

投入与写代码相当的时间做 README 与对外沟通，主动向 Webpack 推荐用 PostCSS 做解析器，带来关键增长。

第 1 课：插件和内置功能之间的平衡。 如果您有插件，请为大多数用户提供开箱即用的完整解决方案。只有有独特需求的人才应该禁用/启用插件。

默认情况下，PostCSS 不执行任何作用。要让它完成任何工作，您需要添加一个特定的插件
这种方法有两个问题：人们不喜欢做出选择，而且大多数项目无论如何都需要相同的功能。
因此，PostCSS 用户总是抱怨在不知道他们需要什么的情况下与这个庞大的插件列表作斗争。
将此与令人惊叹的 Lightning CSS 进行比较，后者已经内置了基本功能（如 polyfills、捆绑和缩小），并且仅在特定用例中需要插件。
这让我想起了 Ruby on Rails 中的良好实践：约定高于配置。为用户建议一些默认值;不要要求他们定义一切。

第 2 课：不要害怕为时已晚。 Chrome 停增前缀与 CSS Houdini 的宣布，都未让 Autoprefixer 与 PostCSS 失去价值；实际落地速度与有效性才是市场检验。尽快做原型、看真实结果，不被“新技术将取代一切”的叙事带偏。

第 3 课：对于性能，架构比编程语言更重要。

用 JS 编写的 PostCSS 比用 C++ 编写的 Sass 快 4 倍。不是因为 JS 是一种更好的编程语言，而是因为更好的架构和内存管理。
JS 社区被炒作毒害，大公司经常使用它。因此，我们都在思考原始的非黑即白的概念，例如 “C++ 比 JS 快” 或 “Rust 的一切都更快” 。
用 Rust 编写的 Lightning CSS 比 PostCSS 更快（总的来说，它是一个出色的工具）。也就是说，我认为这是因为 Devon Govett 能够进一步改进架构和内存控制，而不仅仅是通过将相同的算法从 JS 重写到 Rust。
我特别想强调内存管理在性能中的重要性。例如，同样用 JS 编写的 CSSTree 当时比 PostCSS 快约 1.5 倍，主要是通过巧妙地重用对象来最大限度地减少对垃圾收集器的调用。

第 4 课：通过确保问题不会再次出现来避免倦怠
防止问题的最佳方法是：

添加类型以防止错误地使用 API。
添加额外的 JS 代码以检查 API 使用情况。
添加文档应该始终是最后一步，因为许多用户不阅读文档。但通常它是唯一的选择

第 5 课：在第一个主要版本中弃用，在下一个主要版本中删除

对 API 进行重大更改的最佳方法是滴答法(tick-tack)：

在第一个主要版本上，将 API 标记为已弃用。
然后，仅在下一个主要版本中删除此 API。

第 6 课：提供塑造生态系统的最佳实践

使用指南、示例和模版等来推广良好做法并阻止不良做法。不要以为人们会自己发现所有最佳实践！

不要忘记，文档中的示例不仅仅是插图，而是在社区中形成习惯的东西。明智地使用它们！

第 7 课：与竞争对手成为朋友

在开源中，我们都是免费工作的，任何新的 “竞争对手” 都可以让你免于花自己的时间免费支持人们。

第 8 课：人情味对社区很重要

人的纽带：给插件作者寄明信片/贴纸、出差拜访活跃贡献者，建立真实连接。
品牌风格：Autoprefixer 的“骑士”与 PostCSS 的“炼金术”主题，让项目更有趣、更易形成文化认同。

最后，是给开源维护者的一些“有争议”的小贴士。

尽量无构建：库用原生 JS 源码配合手写 .d.ts 或 TypeDoc，方便直接安装分支测试与 node_modules 内即时调试复制。
静态站点别用 React：项目文档与官网用 Astro 或纯静态 HTML，维护成本更低、更稳。

完 ovo

FE Bits 前端周周谈 Vol.2｜V8 提速 JSON.stringify 2x，Vite 周下载首超 Webpack

2025-08-09T19:47:31Z

大家好，今天是 2025 年 8 月 10 日，星期日。

本周末我去参加了深圳的疯狂星期六，很有意思，少数派的场地非常漂亮，空调很足，而且充满了生活气息，然后听老麦讲述少数派的成长历程，了解了很多少数派的故事，大伙聊得也很开心。

我是真的觉得少数派的审美很好，网站和各种周边设计都是，非常高级～

下面进入正题～

生态与社区动态

社区动态

V8 团队将 JSON.stringify 性能提升两倍多，预计升级到 V8 13.8（Node 24 使用 13.6）后，Node.js 性能将大幅受益（详细解读）。
npm 现支持使用 OpenID Connect (OIDC) 进行 CI/CD 自动安全发布（官方说明）。
Deno 团队简析与 Oracle 的“JavaScript 商标”争端，并联名呼吁“释放 JavaScript”（视频摘要，公开信）。
虽然与前端不相关，但是值得提一嘴的是，OpenAI 本周宣布推出两款开放权重语言模型 gpt-oss-120b 与 gpt-oss-20b，并在 8 月 7 日推出 GPT-5，将其设为 ChatGPT 的新默认模型，向 Plus、Pro、Team 以及免费层用户分阶段推送；Pro/Team 用户能选择延时推理的 “GPT-5 Thinking Pro”
本周关于沉浸式翻译的两个疑问：泄漏隐私 && 限制第三方 API，沉浸式反应快照功能引发敏感内容被索引，以及限制第三方 API 使用风波【已撤回】引发热议。
Cloudflare 指 Perplexity 绕过 no‑crawl 指令；Perplexity 回应称 “过度的封锁伤害所有人”。报道｜回应
Web Platform 更新：本期偏重 Firefox 的新特性合辑，值得关注标准落地与兼容性动向。What's new to the web platform

Chrome 139 中的新功能

New in Chrome 139，Chrome 139 现已推出，这篇文章分享了该版本的一些关键功能。阅读完整的 Chrome 139 版本说明

此版本的亮点：

设备上的语音识别功能已加入 Web Speech API.

新增 CSS corner shaping 属性允许开发者自定义角的形状与曲度，超越传统的 border-radius。

在 CSS 中尝试自定义函数（custom functions）。

ViteLand 2025 年 7 月更新摘要

What’s New in ViteLand: July 2025 Recap

本文梳理了 ViteLand 生态系统在 2025 年 7 月的核心进展，涵盖 Vite、Vitest、Oxc、Rolldown 等项目的重大更新。特别预告了备受期待的首届线下 ViteConf 及全新产品 Vite+，并揭示即将上映的官方纪录片亮点，详情如下。

7 月底 Vite 的 npm 周下载量首次超越 Webpack，2025 年 7 月 22 日～ 7 月 28 日这一周，历史上首次 Vite 在 npm 上的的每周下载量超过了 Webpack 的每周下载量。

5 年前，当 Vite 作为一个副业开始时，谁会想到这一点？

Vite 7 发布，新增 buildApp hook，升级至 纯 ESM 包，要求 Node.js ≥18（因 Node.js 18 已停止维护）。
Rolldown-Vite 新版本支持 tsconfig 路径解析（resolve.tsconfigPaths）和开箱即用的 Yarn Plug-and-Play，性能优化启动速度提升 2.1 倍，缩短 TTI（交互时间）和冷启动时间。

得益于一些深入的 JavaScript 引擎优化技巧，Rolldown 的启动时间减少了 2.1 倍。

Oxlint 引入类型感知 Linting（Type-aware linting），支持 no-floating-promise 等规则，即将推出的第一个版本将包括两条规则，下一个版本将包括来自 typescript-eslint 的所有类型感知规则，无性能损耗；实验性支持 JS 自定义规则（兼容 ESLint API）。
Vitest 推出视觉回归测试：通过浏览器模式直接对比组件截图（Beta 版支持）；
napi-rs 的创建者 Brooklyn 加入 VoidZero 团队，NAPI-RS v3 发布。

有趣的动态

一个分号能带来多大的不同？
点击了解 JavaScript 的这个经典陷阱。作者在调试时随意插入了 console.log(‘here’) 语句并未加分号，位置恰好出现在 IIFE（立即执行函数）之前。缺少分号导致 JavaScript 引擎将后续的 function 代码当作 console.log 的参数，最终抛出 TypeError。

Mastodon 上的 Andre 让我想起了 Chris Coyier 出色的 Web 开发荣誉徽章，所以我现在自豪地佩戴着我的徽章：“调试了一个多小时的东西，修复实际上是一个字符”
关于锚元素的 href 的冷知识
本文深入探讨了 HTML 锚点 <a> 标签中 href 属性的一些不常见但非常实用的值。文章不仅回顾了 mailto:、文本片段 (text fragments) 等已知用法，更重点介绍了一些鲜为人知的技巧，例如使用 ""、. 和 ? 对当前页面进行不同方式的重载，以及它们如何处理 URL 的查询参数和哈希。此外，文章还涵盖了 data: URL、媒体片段和 PDF 页面链接等。

文章与视频

📓 Bundler Tree Shaking 原理及差异 · web-infra-dev · Discussion #28：该文章通过对比 Webpack、esbuild、Turbopack 和 Rollup，深入剖析了主流打包工具在 Tree Shaking 实现上的原理、优化粒度及策略差异。
📓 Project AIRI DevLog @ 2025.08.01：通过 TextDecoder 和 Intl.Segmenter 实现流式 UTF-8 字节流的字素簇分割，解决多语言实时文本动画的字符组合难题，并开源轻量库 Clustr。
📓 Unexpected security footguns in Go's parsers：这篇文章揭示了 Go 语言中 JSON、XML 和 YAML 解析器存在的、易被忽视的不安全默认行为，这些行为可能导致认证绕过等严重安全漏洞。其中很多提到的点对 Go 以外的很多情况也都适用。
📓 每个程序员都应掌握的 10 个 UTF-8 和 UTF-16 字符编码核心概念：本文系统梳理了关于 UTF-8 和 UTF-16 的核心概念、区别与实际应用。作者指出，许多程序员往往忽视编码细节，直到遇到乱码和兼容性问题。文章逐一澄清常见误区，比较了编码方式的空间效率、兼容性、字节顺序（endianness）、业界标准，以及不同编码对非英语字符和国际数据的支持。
📓 浅谈 RAG 并基于 NodeJS 实现基础向量检索服务 - 掘金：该文章通过讲解文本分片、向量化、多路召回与重排等核心环节，详细拆解了 RAG 的技术原理，并基于 NodeJS 实现了一个基础的向量检索服务。，
📓 对比 Oxlint 与 Biome 的类型感知实现差异：本文详细比较了两种面向 TypeScript 项目的新一代极快类型感知代码检查 (Type-aware Linting) 工具：Biome 和 Oxlint。

过去 ESLint / TypeScript-ESLint 虽然类型安全性强，但大规模代码库下执行极慢。Rust 语言重写的 Biome 和 Oxlint，速度提升到秒级，但最初仅支持语法级规则，缺乏类型安全。 Biome 通过全新 Rust 实现的类型分析器（Biotype）逐步覆盖类型规则，但实现难度高且与 TypeScript 官方存在行为偏差风险； Oxlint 则正在采取不同的赌注：等待官方 TypeScript 编译器变得更快。Oxlint 采用与 TypeScript 官方保持一致的 Go 端口 tsgo，并通过 tsgolint 实现与 typescript-eslint 完全一致的 40 条类型规则，且性能提升明显。

文中追踪社区方案、开发进展及主要作者观点，认为 Oxlint 的技术路线更具前景，最终或将以极快速度和官方一致性替代当前混合 linting 方案。

📓 Making my GitHub heatmap widget 这篇文章介绍了作者如何通过抓取 GitHub 贡献日历的 HTML、将其处理成 JSON 格式，再用一个自定义 WebComponent 将其渲染成个人网站上的热力图小部件。
📓 How I use Claude Code (+ my best tips)：Claude Code 最佳实践与权限安全建议，内含 hook 通知、智能 PR 审查、大型代码库处理等实用技巧。
🎥 快速实现主题切换动效：视频讲解如何使用 view-transition 为网站添加优雅流畅的主题切换动画，提升用户体验。圆形过渡示例、旋转立方体示例
📓 开发者观点：Rust、Python、TypeScript 将形成未来三强格局。
📓 React Query Selectors， Supercharged：本文深入探讨了 React Query 中 select 选项的高级用法，旨在实现极致的性能优化。
📓 Get the number of auto-fit/auto-fill columns in CSS：这篇文章介绍了一种纯 CSS 技巧，通过结合容器查询和数学函数（包括使用三角函数处理兼容性问题）来动态计算auto-fit/auto-fill网格的列数，进而实现复杂的响应式布局。
🎥 JavaScript 如何真正发展：与 Daniel Ehrenberg 的 TC39 内部对话。有没有想过谁实际上决定了 JavaScript 是如何发展的？
📓 6 Weeks of Claude Code：一位开发者分享了使用 Claude Code 六周的经验，认为它极大地解放了生产力，使其能以前所未有的速度清理技术债和进行项目创新，从根本上改变了编程的工作方式。
📓 karminski/one-small-step：一个旨在通过 5 分钟短文快速科普人工智能、硬件等前沿技术概念与原理的教程项目。

CSS 新特性

Infinite Marquee Animation using Modern CSS：使用 CSS 动画实现无限滚动 Logo 动画，无需额外 JS 与重复 HTML。
CSS if() 条件样式函数实用指南：详细介绍全新 CSS if() 条件函数用法，对比从前经典的条件处理技巧，这一函数为 CSS 带来了原生的条件样式能力，极大简化了以往通过媒体查询、自定义属性等方式实现条件逻辑的复杂性。
- 中文博客推荐阅读 CSS 倒反天罡居然支持 if()函数了
通过滚动驱动的 CSS 动画重新实现经典视差效果本文详细介绍了如何利用新兴的 CSS 滚动驱动动画技术，以纯 CSS 的方式重新实现经典的视差滚动 (Parallax) 效果。与传统 JavaScript 方案相比，纯 CSS 将动画移出主线程运行，提升性能和流畅度。文章通过实例讲解了 animation-timeline 属性的两种核心时间轴函数 scroll() 和 view() 的使用场景与区别，并进一步介绍了如何使用 animation-range 属性精确控制动画的触发时机与范围。

工具与库更新

工具与趣站

CSS-only 轮播图库：展示 CSS 轮播规范及纯 CSS Demo 站点，为无 JS 场景提供灵感资源。
AwesomeIndex：一个聚合搜索工具，它能让开发者一次性搜索数百个 GitHub 上高质量的 “Awesome” 精选列表。这些列表包含了各种主题下的优质资源、工具和学习资料，AwesomeIndex 将这些分散的宝贵信息集中起来，极大地提高了查找和发现特定领域资源的效率。
Kibo UI：Kibo UI 是一个基于 shadcn 的扩展组件库，开箱即用，shadcn/ui 专注于包装 Radix UI 中的原语，而 Kibo UI 则被设计为一个更全面的组件库，可用于构建更复杂的应用程序。（PS：其作者将其中的 AI 组件捐赠给了 Vercel 来创建 AI Elements 组件库）

嘿！我将 Kibo 的 AI 组件捐赠给 Vercel 来创建 AI 元素——我们已经投入了大量工作来改进它们，所以我绝对建议升级到 AI 元素。大多数组件都有相同的名称，许多组件都经过升级，还有一些新的组件。我认为我们将 Input 重命名为 PromptInput，但除此之外，应该可以无缝切换！另外，如果您运行 npx kibo-ui add ai，它将使用 AI Elements 👍

smart-webapp-template 一个精心设计的 Vite + React 模板，具有精心设计的 Claude 和 Cursor 规则，展示了如何与 AI 协作构建高质量的 Web 页面。

拾一.ens18 (@oQuery)：一个好的 template 是 AI Coding 奠基，如果 ai 写的通篇都是蓝字渐变风格，真该换一个好的 template。我重新整理了一个我一直在用的 template，里面所有的设计风格、组织架构都调教完了。

Colored, Glowing Edge Card：Simon Goellner 制作了一个炫酷的发光卡片效果 Demo，还可以切换昼夜模式。
Hyprnote：一款主打“本地优先”和隐私安全的 AI 会议笔记工具，能将你的会议实时转录并智能生成摘要，确保数据绝不外泄，可接入 Ollama 本地模型和第三方 API
HivisionIDPhotos 一个轻量级的 AI 证件照制作算法，CPU 即可。包括智能抠图、自动排版与多规格美颜，支持多种部署形态，有 comfyUI 工作流部署等。
GitHub 个人主页头图生成器：主题、背景与装饰可自定义。
ResumePolice: 简历警察 🕵️‍♂️ 疯狂逮捕：一个开源的 AI 项目，提供“简历警察”提示词与 Dify 工作流，帮助求职者优化简历并生成面试问题。
SnapAI：SnapAI 是一个开源的面向 React Native 和 Expo 开发人员的 AI 驱动的图标生成 CLI。需要一个 OpenAI API 密钥来生成图标，每个图标的成本为 ~$0.04 🎥 观看视频教程
Liseré：Liseré 是一个轻量级且可组合的 React 组件，用于文本突出显示。它使您可以精确控制用户如何选择、注释文本以及与文本交互。适合代码文档、教程以及交互式文本突出显示和选择。

库更新

Node.js v22.18（LTS）默认启用 TypeScript 类型剥离，node app.ts 成为现实，就像 Bun 或 Deno 一样，不过目前它仍然是实验性功能。（版本公告)。
pnpm 10.14 支持直接定义并自动下载/固定 Node.js、Deno、Bun 运行时至本地项目。详情
Vercel 发布了 AI SDK 5，本次重大更新的核心是为全栈 AI 应用提供端到端的类型安全，尤其是在聊天交互和 Agent 功能上。
Shopify 发布 FlashList v2，基于 React Native 新架构的彻底重写版本，旨在解决 v1 的核心痛点。通过利用新架构的同步布局测量能力，v2 完全消除了对项目尺寸估算的依赖，从而实现了更快的加载速度、像素级精准的滚动定位和更流畅的渲染性能。
Apache ECharts 6.0 正式发布，带来了 12 项重大升级，旨在将数据可视化提升到新的水平。本次更新围绕三大核心维度展开：全新的默认主题、动态主题切换和深色模式支持；新增弦图、蜂群图、断轴、散点图抖动、增强的 K 线图等图表类型；引入矩阵坐标系、增强自定义系列和优化坐标轴标签。
NPKILL 工具（v1.0 临近）：专注 node_modules 垃圾清理，作者计划扩展至清理更多其他类型的代码“垃圾”。
最小的 React 框架 Waku v0.24 版本宣布了一项重大迁移，其底层实现已转向采用 Vite 官方的 RSC 插件 @vitejs/plugin-rsc 和 Vite Environment API。

深入分析

本篇章为对感兴趣的文章或 Demo 等进行的一些详细分析～

其中有些地方使用我自己开发的 MoeCopy AI 浏览器插件进行的网页总结！开源，超轻量级，填入自己的 apikey 即可使用，还在开发阶段，欢迎尝试~喜欢的话可以给个 star！Chrome 商店 >

使 Rolldown 的启动时间减少了 2.1 倍的 PR

看到 What’s New in ViteLand: July 2025 Recap 里提到的这段话比较感兴趣，去瞅了一眼。

得益于一些深入的 JavaScript 引擎优化技巧，Rolldown 的启动时间减少了 2.1 倍。这可以缩短交互时间，更好地为无服务器提供冷启动，并有利于您的开发服务器启动速度。

里面是这个 PR feat: use PIFE for callbacks passed to __esmMin wrapper by sapphi-red · Pull Request #5319 · rolldown/rolldown 提出了在 rolldown 打包工具中对传递给 __esmMin 包装器的回调函数应用 PIFE 优化，以提升启动时运行性能。实测结果显示，在特定项目上启动性能提升超过 2 倍，但代码体积略有增长。

PIFE？于是又翻了翻，翻到了这个 PR

feat(codegen): keep arrow function PIFEs by sapphi-red · Pull Request #12353 · oxc-project/oxc，里面提到了：

PIFE 是 “Possibly-Invoked Function Expressions” 的缩写。它是一个用括号表达式包装的函数表达式。 PIFE 对可能被急切调用（invoked eagerly）的函数进行注释。当 v8 遇到此类表达式时，它会急切地编译它们（而不是稍后编译）。有关更多详细信息，请参阅 v8 的博客文章。

博客文章只提到了正则的 FunctionExpressions，但也支持 ArrowFunctions。将急切编译（eagerly compiled）的案例有：

当 ! 出现在函数文字之前时（例如 !function(){}）

当函数表达式用括号包装时（例如 (function () {}), (async function () {}))）

当箭头函数用括号包裹时（例如 console.log((() => {})))）

当 () 或标记模板出现在函数文字之后（仅在某些情况下）（例如 ~function(){}()）

当使用显式编译提示时（例如 # allFunctionsCalledOnLoad）

在代码生成中保持 PIFE 原样将解锁优化，例如 rolldown/rolldown#5319 .

有趣的音量控制 UI Demo

本周的 CodePenSpark#462 精选了一系列以前端技术实现的音量控制 UI。

创意 UI 组件实现
- 弹性音量开关：由 Aaron Iker 制作的 SVG 弹性音量开关，具有令人愉悦的回弹和翻转动画效果。
- 复古音量旋钮：一个外观酷似塑料的复古圆形范围滑块，可作为音量旋钮使用。
- CSS 音量计：Alvaro Montoro 使用纯 CSS 将原生范围输入框转换为一个带有颜色编码的动态音量计。
- 单元素音量控件：展示了如何仅用 CSS 和原生范围滑块创建一个无需 JavaScript 的多格音量控制条。
- 麦克风切换按钮：一个经典的、交互状态清晰且支持键盘访问的麦克风切换按钮。
- CSS 平衡滑块：Jhey Tompkins 制作的可配置范围滑块组合，具有丰富的拉伸和增强等视觉效果选项。
交互式与实验性项目
- 光圈科技舞会：灵感源自游戏《传送门》的动画场景，点击图标可播放音乐并观看角色跳舞。
- SVG 声波标记实验：一个艺术性的 UI 实验，尝试用相对简单的 SVG 标记来渲染声波效果。
- 寂静之地 - 音量控制动画：一个音频交互式动画，用户通过麦克风发声来揭示隐藏在树林中的生物。
- 声音颜色选择器：一个独特的颜色选择器，将声音与视觉结合 (联觉 Chromesthesia)，点击不同颜色会听到对应的声音。

主要分析一下其中的这个合成音量旋钮，一个拟物风格的音量旋钮控件：旋钮跟随鼠标角度旋转，环形发光条按音量比例点亮，数字显示 00–99，同步控制 <audio> 的 volume，并带有“静音/恢复播放”的按钮。

核心技术点（视觉）

立体拟物与光晕
- 通过多重 box-shadow + filter: drop-shadow(...) 叠加（外投影/内投影）营造金属质感与体积感。
- .knob::before/::after 与 .slider::before、.glow::before/::after 使用伪元素堆叠，分层画出旋钮面板、内圈光环、外圈刻度等。
CSS 自定义属性驱动
- 用 --vol（0–100）作为“状态源”，在 .glow:after 的 linear-gradient 中通过 calc(var(--vol) * 1%) 控制亮起弧度。
- --c1、--mut、--tra 控制主题色、静音色、过渡曲线，.slider:active * 动态变更色调，产生交互高亮。
刻度与环形高亮
- .glow:before 通过一组不同角度的 linear-gradient 叠加生成刻度线；中间用径向渐变“镂空”。
- .slider { transform: rotate(90deg) } 将整体旋转，配合 linear-gradient(-90deg, ...) 的方向，让“起点在顶部”的视觉更直观。
静音按钮纯 CSS 图形
- .mute span:before 用 clip-path 勾出“喇叭”图形，.mute span:after 用 ≫/✖ 字符表现声波/静音，content 随类名切换。
数码管字体与发光
- @font-face 引入 Alarm Clock 字体，.number 叠加内发光和淡色“88”遮罩，营造电子数码屏效果。

核心技术点（交互）

角度计算与旋钮旋转
- calculateDegree(e) 用 Math.atan2 计算“指针相对于屏幕中心”的角度（注意：是相对窗口中心，而不是旋钮中心）。
- 按住旋钮 mousedown 后监听 mousemove，实时设置 knob.style.transform = rotate(deg)。
角度到音量映射
- 通过对 val = angle + 90 的分段处理，把整圈角度映射到 0–1 的音量值 ran，对应 --vol 与 <audio>.volume。
- 数字显示 00–99，特意避免显示 100（if(num==100) num='99'）。
播放/暂停与样式同步
- 点击静音按钮切换 muted 类并 play()/pause()，视觉与状态一致。

Refs

结语

周刊第二期到这里就结束啦，欢迎多多反馈纠错！

上一期结束以后我想了一想，既然要轻轻松松的氛围，那可以在文末配一些日常~

所以，晒猫时间到！

腊八喵：于 2024 年 2 月 22 日猫の日的时候领养的小橘白猫，因为小姐姐捡到她的时候在腊八，于是这只小可爱叫腊八~
领养的时候还是大概5个月大 3.55kg 的小肥猫！现在都已经变成老猫了～

可乐喵：2024 年 10 月来给腊八作伴的重点色布偶公猫～那个时候还是3个月大的小猫咪。

感谢观看～

更新时间期望是在每周天，若本周内容少，则可能合并到下一期作为双周刊。
推荐使用 Folo 订阅本周刊的 Quaily RSS。
公众号前端周周谈 FE Bits，点击阅读原文链接可查看原文。
建了个 QQ 讨论小群 598022684 欢迎加入，日常讨论前端技术 & 生活，也可在群里投稿自己的文章~ 随意加入，比较偏向粉丝群的性质，前期群聊不活跃也很正常。
本周刊同时也开源在 fe-bits-weekly，欢迎关注。

FE Bits 前端周周谈 Vol.1｜Hello World、TanStack DB 首个 Beta 版发布

2025-08-02T12:05:00Z

前言

今天是 2025 年 8 月 2 日，星期六，不是什么特殊日子。

我是 cos（cosine），之前在自己的频道经常进行一些输出，想将其记录下来，于是写下了这个周刊的描述，先开始再说！

随性更新，捡拾那些值得细品的泛前端圈子的新鲜事，不争高低，只作播报，把最新、最好玩的技术，第一时间分享给同样好奇的你～
这里没什么大新闻推送，也不卷热点。就像在朋友圈跟你碎碎念，聊聊最近前端和技术圈的那些有趣小事。
不是每条都要“颠覆世界”，但都让我觉得“哎，这不错，想和你分享”。
可能是偶尔深夜刷到的新闻，也可能是偶尔工作摸鱼时的灵感，或者一段小小的吐槽。
总之代码和生活都要松弛一点，慢慢看、慢慢聊，别让新技术把自己搞得太紧张。
反正我也不急——你也别急～

其实这些新闻平常自己都能看，我只不过借助 AI 和自己的总结做了一些汇总以及翻译的工作，因为中文互联网的前端精品周刊现在难得一见，大多数都停更了或是扩圈了，索性自己做了～

我希望这个周刊不那么严肃，更自然一些，但是还在摸索阶段，暂时是我一个人维护，所以很依赖 AI 和自动化，相对的就少了些人味儿，非常欢迎评论反馈。

更新时间期望是在每周天，若本周内容少，则可能合并到下一期作为双周刊～推荐使用 Folo 订阅本周刊的 Quality RSS。

本周刊同时也开源在 fe-bits-weekly，欢迎关注

生态与社区动态

AI 简评：嚯，社区最近可真热闹！TypeScript 5.9 RC 带着 import defer 和 Node 20 新模块来串门了，TanStack DB 也端出首个 Beta 版，给 Query 加了点“本地存储魔法”，增量更新嗖嗖快。HTML 和 Stack Overflow 两大年度调查又开张了，React 依然是“梦中情框架”，Svelte 则靠“魅力值”圈粉。Parcel 和 React Native 也没闲着，一个猛攻 React Server Components，一个在 iOS 上搞预编译号称要“快十倍”，卷得飞起！es-toolkit 悄悄上位，成了 Lodash 的“平替明星”，Vercel 更是整了个新活“Fluid compute”——说白了就是“无服务器的服务器”（这名字起得...绝了）。至于 Tabs vs Spaces 的“圣战”？有人宣布“大局已定”：Spaces 党赢了。安全方面嘛... npm 江湖不太平，is 包被钓鱼劫持，Stylus 更是惨遭“连坐”乌龙被误删（现已复活），吓得谷歌赶紧掏出“OSS Rebuild”当救兵。哦对了，W3C 发了份“价值观宣言”，而最甜的是——MDN 文档网站过 20 岁生日啦！

社区动态

TypeScript 5.9 RC 发布，带来 import defer 和 --module node20 等新特性。
TanStack DB 首个 Beta 版发布，为 TanStack Query 带来高效增量更新与乐观写入能力，实现在本地侧存储场景的差分数据流 (differential dataflow)。
HTML 2025 状况调查开启，旨在收集前端开发者对 HTML 发展状况的意见。
Stack Overflow 2025 调查显示 React 继续蝉联 “最受开发者渴望（most desired）” Web 技术头名，尽管 Svelte 更 “受人钦佩（admired）”
Parcel 深入支持 React Server Components，并解析 "use client" 等指令的实际作用机制。
React Native 下一个版本中引入预编译的 iOS 版本，RC3 阶段承诺将构建时间缩短 10 倍
es-toolkit 成为 Lodash 100% 兼容替代，已被 Storybook、Recharts 等主流项目采用。
Vercel 发布 Fluid compute 平台，该平台本质上提供 “无服务器服务器（serverless servers）”。
一名开发者声称，关于 tabs 与 spaces 的争论趋于结束，主流语言倾向使用 spaces。
MDN 文档网站庆祝成立 20 周年，目前拥有超 14,000 页内容，是 Web 开发的重要资料库

浏览器制造商之间有一个悠久的传统，即互相发送蛋糕以纪念重要的里程碑。一个好的蛋糕对于保持团队之间的协作精神非常重要，这些团队有时会竞争，但最终会建立一个每个人都可以享受的开放网络。Microsoft 为 Firefox 2、3 和 4 发送了 Mozilla 蛋糕，我们还为 IE10 发送了 Mozilla 蛋糕

编者按：好有意思的庆祝生日

2025 Stack Overflow 开发者调查结果公布，涵盖开发工具、AI 代理、LLM 使用现状等
W3C 发布概述 “支撑 W3C 使命的价值观” 的重要新文档

安全动态

对 npm 生态系统的攻击仍在继续，is 包通过与 npm 相关的域名抢注域名被劫持，该域被用来网络钓鱼登录详细信息。
npm 不慎移除了被广泛使用的 Stylus 库，导致全球开发者构建和 CI/CD 流程中断。移除原因是 Stylus 的一位维护者发布了无关的恶意软件包，导致其账户及关联软件包被禁，Stylus 库也因此受牵连。现 npm 页面已恢复。
谷歌推出了 OSS Rebuild，试图通过允许将包与上游进行比较来使开源生态系统（如 npm）更加安全。

文章与视频

《TailwindCSS v4 全新颜色系统与主题切换》本文介绍了在 TailwindCSS 中实现暗色模式（dark mode）颜色切换的演变，从使用 CSS 变量到新版 v4 应用 color-mix() 混色函数和 @layer 层级特性。作者也推荐了自己开发的 Pastel 颜色系统库以便更好应用这些特性。
《独立开发穷鬼套餐(Web 实践篇)》本文聚焦独立开发，分析独立开发者在成本敏感阶段时，推荐基于 Next.js 生态、善用云平台/Cloudflare/VPS 的免费与低价服务组合，少花时间精力在技术堆栈和云服务“薅羊毛”上，把更多心力放在产品打磨与市场推广上，实现“低成本、高专注、快试错”的独立开发之路。
《The Useless useCallback》React useCallback 的滥用现象与性能相关实践讨论，分析 useCallback、useMemo 潜在问题，展望 React Compiler 与 useEffectEvent 等新工具的改善能力。

编者按：也算是 React 的日经问题了 hhh

《Performance Extensibility API》允许自定义轨迹供 Chrome DevTools 性能面板分析，本文探讨了该 API 如何弥补浏览器元性能指标（如 Core Web Vitals 指标）的不足，并展示了在实际 Web 性能监测和优化中的应用方法。
《Responsive Video is (Almost) Easy Now》介绍了响应式视频的实现，通过 html 的 video 标签，如何提供垂直和横向视频以适应不同场景。
《Remix 3 和 React-中心架构的终结》探索 React 未来架构趋势。
《Next.js 运行时密钥注入实战》深入分析密钥管理在微服务和 SSR 场景下的重要性
《将 JSX 改写为 Astro 的思考》带来组件语法和工程结构的迁移经验。
《The Multi-Repository TypeScript Problem》探讨 TypeScript 多仓库（multi-repo）间的类型安全问题及解决方法。
《JavaScript 中的逻辑赋值操作符：小语法，大胜利》分析 JavaScript 逻辑赋值操作符的语法进步及实际开发中带来的便利。
《When Is WebAssembly Going to Get DOM Support?》本文分析了 WASM 与 DOM 等 Web API 的集成现状和未来。作者认为，WASM 最初和 JavaScript 分离，但可以通过 JS 间接操作 DOM。目前主流浏览器没有推动标准化原生 DOM 支持这方面标准。开发者应关注性能和可维护性，选好工具链高效开发，不必追求完全“无 JS”的 WASM 方案。
《Liquid Glass on the Web》一个 Liquid Glass Web 实现合集 demo 整理，有几个实现的确实漂亮啊～

《使用 Three.js、WebGPU 和 TSL 进行交互式文本销毁》本篇文章系统地讲解了如何借助 Three.js、WebGPU 以及 Three Shader Language（TSL），实现炫酷的 3D 交互文字爆炸效果动画。内容覆盖从字体准备、场景搭建、顶点及物理模拟，到高级后处理，完整展示了现代 Web 图形技术的艺术与技术融合。

编者按：看了这篇突然意识到我写的那篇好烂，完全不是面向基础的教程哈哈哈～感觉这种一步步来的真不好写。

🎥【Bun 的创建者谈构建 Bun 和 Node.js 兼容性】解析 Bun 作为 Node.js 生态“替代品”的兼容性挑战与工程实践。

CSS 新特性

《Brick by brick: Help us build CSS Masonry》Chrome 和 Edge 团队宣布 CSS Masonry 布局已在 Chrome/Edge 140 中开放开发者测试，文章详细介绍了 CSS Masonry 的概念、与现有布局的对比、两种正在讨论的语法提案等
《Making a Masonry Layout That Works Today | CSS-Tricks》介绍了当前 CSS Masonry 的浏览器支持现状及其多种语法方案，并提出了一种通过简洁 JavaScript 实现兼容所有主流浏览器的马赛克布局方法。
《Creating a scroll-spy with 2 lines of CSS》：Chrome 140 浏览器引入 scroll-target-group 和 :target-current，可用两行 CSS 实现目录高亮跟踪效果，将其添加为用户的渐进式增强功能非常容易。作为一项标准轨道功能，它最终应该会跨浏览器登陆。

代码、工具与库更新

World Clock Slider：这是一款智能时钟组件，支持滑动快速查看各时区城市当前时间。操作流畅，还支持深色模式，非常酷。
StaticSearch：为静态站点增添搜索，无需后端，基于 Javascript，数据存储为 JSON。
Oklchroma：基于 OKLCH 色彩空间的一键和谐色板生成器，内置曲线渐变算法。
AudioTee.js：为 Node.js 捕捉 macOS 系统音频输出，并以 PCM 格式定期输出。
FossFLOW：等距基础架构图形工具，支持丰富图标与数据管理
difit：使用 GitHub 风格查看器查看和审查本地 git 差异的 CLI 工具，评论还可以作为 AI 提示进行复制。
7.css：忠实还原经典 Windows 7/XP UI 的 CSS 设计系统
Better Upload 支持各类 S3 兼容存储的极简文件上传，适配 Next.js、TanStack Start、Remix 和 Hono 等框架。
Transformers.js 3.7：在浏览器与 Node.js 侧支持 ONNX 预训练模型推理，v3.7 增加了 Voxtral（语音转录及音频理解）、LFM2 和 ModernBERT 支持。
match-sorter 8.1：为数组筛选和排序提供确定性算法，便于开发者实现可预期的最优匹配排序。
React Native Reanimated 4 正式带来类 CSS 动画与过渡体验到 React Native，兼具复杂能力与高性能。
Rooks.js 8.4 提供接近 100 个自定义 hooks，涵盖在线状态、窗口大小、语音合成、键盘输入等各类场景。

深入分析

本篇章为结合 AI 摘要对感兴趣的文章进行的一些详细分析～

使用我自己开发的 MoeCopy AI 浏览器插件进行的网页总结！超轻量级，填入自己的 apikey 即可使用，欢迎尝试~喜欢的话可以给个 star。 Chrome 商店

公众号排版受限，请移步外部博客查看完整版～

Refs

结语

周刊第一期到这里就结束啦，欢迎多多反馈纠错！

其实这些新闻平常自己都能看，我只不过借助 AI 和自己的总结做了一些汇总以及翻译的工作，因为现在中文互联网的前端精品周刊现在难得一见，大多数都停更了或是扩圈了，索性自己做了～我希望这个周刊不那么严肃，更自然一些，但是还在摸索阶段，暂时是我一个人维护，所以很依赖 AI 和自动化，相对的就少了些人味儿，非常欢迎评论反馈。

感谢观看～

推荐使用 Folo 订阅本周刊的 Quaily RSS。
本周刊同时也开源在 fe-bits-weekly，欢迎关注