首页 周刊

本期网址 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 事件来计算位移要流畅得多，因为滚动是在合成线程上处理的。

视频讲解在这里

相关文章

  1. Practical CSS Scroll Snapping
  2. CSS scroll snap
  3. Chromium 优化了页面的滚动操作，使其尽可能仅在合成器线程上执行

# Cinematic Ocean Scroll Scene

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

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

Cinematic Ocean Scroll Scene

# 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

  • CodePen Spark #485
  • JavaScript Weekly Issue 764: December 5, 2025
  • 科技爱好者周刊（第 376 期）：太空数据中心的争议
更新于 阅读次数 次

请我喝[茶]~(￣▽￣)~*

cos 微信支付

微信支付

cos 支付宝

支付宝