AI 摘要：作者展示了 CVE-2025-55182 漏洞的具体利用方式，说明该漏洞出现在 React Server Components 的反序列化机制中。通过伪造 Chunk 对象以及操控 then 方法触发链式调用，攻击者可以利用 Next.js 的服务端组件解析逻辑实现远程代码执行 (RCE)。文章详细讲述了漏洞的产生原理、攻击向量和具体请求示例，说明此问题的严重性与利用条件。

1. 漏洞背景与影响范围
• 漏洞编号为 CVE-2025-55182，影响 React Server Components 的反序列化过程
• 可在 Next.js 16.0.6 环境下触发
• 利用对象结构中的 $@ 标记机制篡改 Chunk 引用并控制反序列化流程

2. 核心利用思路 (Exploit 原理)
• 使用 $@ 引用构造伪造的 Chunk 实例
• 将 Chunk.prototype.then 作为根对象的 then 属性，使得在 Promise 处理时自动触发攻击逻辑
• 通过修改 status 为 RESOLVED_MODEL 调用 initializeModelChunk 以执行受控对象的代码路径

3. 攻击链实现与触发机制
• 攻击目标是触发 Blob 反序列化流程
• response._formData.get 被重写为 JavaScript Function 构造器，实现任意代码执行
• 构造的 multipart/form-data 请求载荷通过控制 _prefix 字段注入任意命令（例如 child_process.execSync('xcalc')）

4. 安全意义与防护思考
• 漏洞本质源于反序列化信任边界不明与模型解析机制的未过滤输入
• 需加强 React Server Components 的反序列化安全校验
• 建议暂时限制相关功能或升级框架版本

Gist

CVE-2025-55182 React Server Components RCE POC

CVE-2025-55182 React Server Components RCE POC. GitHub Gist: instantly share code, notes, and snippets.

AI 摘要：React 官方披露了一个在 React Server Components (RSC) 中的严重远程代码执行漏洞（CVE-2025-55182），影响多个版本的 react-server-dom 系列包。问题出在 RSC 的负载反序列化逻辑中，攻击者可通过构造恶意 HTTP 请求在服务器上执行任意代码。相关漏洞获评 CVSS 10.0（最高等级），已在 19.0.1、19.1.2、19.2.1 等版本修复。React 团队建议开发者立即升级，并说明了受影响的框架包括 Next.js、React Router、Waku 等。

1. 漏洞概述与影响范围
• 披露的漏洞是针对 React Server Components 的未授权远程代码执行 (Remote Code Execution, RCE) 问题。
• 漏洞编号为 CVE-2025-55182，CVSS 评分为 10.0（极高严重度）。
• 所有使用 RSC 的 React 应用，即使没有定义特定 Server Function 接口，也可能受影响。

2. 受影响版本与安全修复
• 受影响版本：19.0、19.1.0、19.1.1、19.2.0。
• 修复版本：19.0.1、19.1.2、19.2.1。
• 修复建议：立即升级至修复版本的 react-server-dom-webpack、react-server-dom-parcel、react-server-dom-turbopack。

3. 受影响的框架与构建工具
• 部分框架与构建工具依赖或内置受影响包，包含 Next.js、React Router、Waku、@parcel/rsc、@vitejs/plugin-rsc、rwsdk。
• React 团队后续将更新具体升级指令。

4. 技术细节与漏洞原理
• RSC 机制允许客户端通过 HTTP 请求触发服务器端函数。
• 漏洞源于 React 在反序列化客户端请求载荷 (payload) 时的处理缺陷，导致攻击者可执行任意代码。
• 目前细节暂未完全公开，以防在修复完成前遭滥用。

5. 漏洞披露时间线
• 11 月 29 日：由安全研究员 Lachlan Davidson 通过 Meta Bug Bounty 计划报告漏洞。
• 11 月 30 日：Meta 安全部门确认漏洞并与 React 团队协作修复。
• 12 月 1 日：完成修复并与受影响项目共同测试与部署缓解措施。
• 12 月 3 日：在 npm 发布修复版本并正式公开 CVE。

6. 致谢与归属
• 感谢安全研究员 Lachlan Davidson 的发现、报告及协助修复贡献。

react.dev

Critical Security Vulnerability in React Server Components – React

The library for web and native user interfaces

AI 摘要：Chrome 143 正式发布，本次更新带来了对锚点定位元素（anchor positioned elements）的新式容器查询（anchored fallback container queries），改进了背景图像定位语法（side-relative background-position），并新增对 font-language-override 的支持，使开发者可精确控制字体替代语言标签。在提高 CSS 表现力的同时，也强化了排版的一致性与多语言支持。

1. CSS 新特性
• Anchored fallback container queries：新增 @container anchored(fallback)，可基于元素定位的备用状态（position-try-fallbacks）设置不同样式，用于调整锚点元素的连线或动画表现。
• Side-relative background positioning：现在可在 background-position-x/y 长属性中直接使用相对边位置语法（如 left 30px、bottom 20px），提高图像定位灵活性，该特性现已进入 Baseline 新可用级别。
• Font language override：新增 font-language-override 属性，允许为 OpenType 字形替换指定自定义四字语言代码，从而覆盖系统语言设置，便于实现多语言、特殊字体排版控制。

2. 版本信息与资源链接
• 详细更新内容见 Chrome 143 release notes。
• 开发者工具更新详情：What's new in Chrome DevTools (143)。
• 功能状态更新在 ChromeStatus.com。
• Chrome release calendar 提供未来版本发布时间表。

3. 社区与后续更新
• 推荐订阅 Chrome Developers YouTube channel 获取最新视频提示。
• 关注 Chrome 团队在 X 或 LinkedIn 的最新发布。
• 官方将于 Chrome 144 发布时继续更新新功能说明。

Chrome for Developers

New in Chrome 143  |  Blog  |  Chrome for Developers

CSS anchored fallback container queries, side-relative positioning for background position longhands, and more.

AI 摘要：本文展示了如何利用现代 CSS 的新特性 corner-shape 创建一个具备悬停 (hover) 交互的倾斜图片库。通过使用逻辑属性和自定义变量，只需少量代码即可实现具有方向感知 (direction-aware) 的图像倾斜效果。当用户悬停图片时，相邻形态会流畅过渡，视觉上极具动感。文末还比较了使用 clip-path 的替代实现，强调虽然兼容性更好，但缺乏方向感知的智能特性。

1. 组件与功能简介
• 主题为一个倾斜 (skewed) 图片库，展示如何简单实现经典布局。
• 利用现代 CSS 新属性 corner-shape 让图片边角自动响应文字方向。
• 通过 flex 布局与 transition 结合，实现平滑扩展的悬停动画。

2. 核心实现原理
• 定义变量 --s 控制倾斜程度和形状曲率。
• 使用逻辑属性如 border-start-start-radius、border-end-end-radius 确保布局在不同书写方向中正常表现。
• 通过伪类 :hover、:has() 与相邻选择器的配合，让图片在交互时动态调整边形与间距。

3. 替代方案与兼容性
• 提供使用 clip-path 的另一种实现方法。
• 虽然 clip-path 方式浏览器支持度较高，但不具备方向感知能力。
• 建议根据实际兼容需求在项目中选择适合的实现。

4. 延伸与参考
• 推荐阅读作者的其他作品：Direction-Aware Arrow Shape using corner-shape 与 Dynamic Tooltip Position with Anchor Positioning IV。
• 这些示例共同展示了现代 CSS 如何简化复杂动效组件的实现。

Css-Tip

Gallery of Skewed Images with Hover Effect

Using modern CSS and corner-shape to add a fancy galley of images with a reveal hover effect

AI 摘要：本文介绍了如何编写一个高质量的 CLAUDE.md （或AGENTS.md）文件，以帮助大型语言模型如 Claude 在每次会话中准确理解项目上下文。作者强调 Claude 是无状态（stateless）的，需要通过 CLAUDE.md 主动引导项目背景和结构。文中指出主文件应聚焦通用信息、减少冗余指令、避免让模型充当代码检查工具，并提出了“渐进揭示(Progressive Disclosure)”原则来管理上下文信息。结论是：精简、聚焦、人工精心编写的 CLAUDE.md 才能真正成为助力开发的高杠杆点。

1. LLM 基础与 CLAUDE.md 的角色
• 强调 LLM 是无状态的，推理时并不会记忆过往对话。
• CLAUDE.md 文件是让模型理解代码库的唯一常驻入口，每次对话都会自动加载。
• 它的作用类似于为 Claude 提供项目结构图与工作指南。

2. CLAUDE.md 的内容原则：WHAT / WHY / HOW
• WHAT：介绍项目栈、架构与子模块结构，是 Claude 的“路线图”。
• WHY：说明项目目标与各部分用途，帮助 Claude 理解设计动机。
• HOW：告诉 Claude 如何执行任务，如构建流程、测试方式、工具链（例如使用 bun 还是 node）。
• 提醒不要塞入所有命令，应保持“够用、通用、可解释”。

3. Claude 忽略 CLAUDE.md 的原因及机制
• Claude 会根据系统提醒(<system-reminder>)判断上下文是否相关。
• 若文件含过多不相关信息，Claude 会选择性忽略。
• 这种机制是为防止用户使用 CLAUDE.md 添加无关“热修复”指令所设计。

4. 编写高质量 CLAUDE.md 的建议
• 遵循 context engineering best practices。
• 少即是多 (Less is more)：避免过多指令或与代码无关的规则。
• 研究表明 LLM 对 150–200 条指令的响应最为稳定，超过会急剧下降。
• Claude Code 的系统提示占掉约 50 条指令空间，因此应控制在极简范围内。

5. 文件长度与通用性建议
• 上下文窗口应专注于高相关的内容，而非填充冗余背景。
• 建议文件 <300 行，理想情况下 <60 行。
• 仅包含“通用适用”的指令与信息。

6. 渐进揭示 (Progressive Disclosure) 原则
• 将不同任务的指令拆分为独立的 Markdown 文件（如 agent_docs/ 目录）。
• 在主文件中只列出这些文件及简要说明，让 Claude 按需访问。
• 避免代码复制，推荐使用 file:line 引用；引用比拷贝更可维护。

7. Claude 不是代码检查工具
• 不应让 Claude 替代 linter 或 formatter。
• 代码风格应由确定性工具（如 Biome）自动处理。
• 可使用 Stop hook 或 Slash Command 将检查与格式化过程外挂给 Claude 参考，而非直接放入主文档中。

8. 避免自动生成或使用 /init
• 自动生成的文件通常内容冗余或缺乏针对性。
• CLAUDE.md 是高杠杆点，一旦草率配置，会对所有阶段输出产生负面连锁影响。
• 建议人工精雕细琢每一行指令，使其精准可靠。

9. 结论与最佳实践总结
• 明确项目的 WHY / WHAT / HOW。
• 内容简洁、普适、避免多余。
• 采用渐进式信息揭示策略。
• 使用独立工具执行语法或格式检查任务。
• 谨慎维护 CLAUDE.md——它影响整个代理（agent）表现的核心。

www.humanlayer.dev

Writing a good CLAUDE.md

`CLAUDE.md` is a high-leverage configuration point for Claude Code. Learning how to write a good `CLAUDE.md` (or `AGENTS.md`) is a key skill for agent-enabled software engineering.

AI 摘要：Bun 宣布被 Anthropic 收购，将作为 Claude Code、Claude Agent SDK 等产品的核心基础设施。Bun 保持开源与 MIT 许可证，团队与路线图不变，继续专注于高性能 JavaScript 工具和 Node.js 兼容性建设。此次加入为 Bun 带来长期稳定性与更充足资源，也让团队处于 AI 编码革命的前线，加速产品迭代，助力 AI 驱动的开发模式未来。

1. 加入 Anthropic 的背景与不变之处
• Anthropic 收购 Bun，旨在让其成为 Claude Code 与未来 AI 编程工具的运行基础。
• Bun 将继续开源（MIT 许可）、在 GitHub 公开开发，保持原团队管理与代码维护。
• 路线图不变，持续聚焦高性能 JavaScript 工具与 Node.js 替代能力。

2. 与 Anthropic 合作后的变化
• 更紧密参与 Claude Code 与 Claude Agent SDK 的性能优化，让工具更快更轻。
• 获得 AI 工具一手开发动态，Bun 能优先适配未来 AI 编程需求。
• 加速发布周期，强化生态深度。

3. Bun 的起源与演进
• 起点是开发浏览器 voxel 游戏时的性能瓶颈，促生对编译与运行时系统的探索。
• 从 esbuild 移植 JSX/TypeScript 编译器到 Zig，用 JavaScriptCore 构建自有运行时。
• 2022 年发布 Bun v0.1，集打包器、编译器、运行时、测试与包管理于一体。
• 后续版本：
• v1.0（2023 年）正式稳定，融资并扩张团队；
• v1.1 补齐 Windows 支持；
• v1.2 强化 Node.js 兼容与扩展数据库客户端；
• v1.3 加入前端开发服务器、Redis/MySQL 驱动，生产应用激增。

4. AI 编码工具的崛起与契合
• 2024 年后 AI 编码工具突飞猛进，Bun 的单文件可执行特性非常适合 CLI 与 Agent 分发。
• Claude Code、FactoryAI、OpenCode 等关键 AI 工具均基于 Bun。
• 团队自用 Claude Code 实现自动提交与错误修复，提升开发效率。

5. 可持续性与发展方向
• Bun 至今无直接营收，原计划构建云产品，但 AI 生态发展已重塑商业逻辑。
• 加入 Anthropic 避免了 VC 变现压力，转而获得长期稳定支持与核心地位。
• 与其在未来 AI 开发趋势之外摸索，不如进入中心参与制定。

6. 未来展望与愿景
• 目标成为 AI 时代的标准运行时，让 Bun 承载“AI 驱动软件开发”的基础层。
• Anthropic 为其提供长期资源、战略支持与招聘扩展。
• 持续对社区开放、保持 Node.js 兼容、加速工具链性能提升。
• 预期形态类似「Claude Code <> Bun」关系，类比于「Chrome <> V8」等组合。

Bun

Bun is joining Anthropic

Bun has been acquired by Anthropic. Anthropic is betting on Bun as the infrastructure powering Claude Code, Claude Agent SDK, and future AI coding products & tools.

AI 摘要：文章指出当前主流项目仍以传统方式使用 React Hooks（如滥用 useEffect），忽视了 React 在并发模式与异步数据处理上的演变。作者从设计理念出发，提出现代 Hook 的核心精神是“架构化的状态与逻辑管理”，强调使用 useSyncExternalStore、useDeferredValue、useEffectEvent 等新 API 优化性能和可测试性，鼓励开发者更多关注派生状态（derived state）而非副作用（side effects），并顺势迎接以数据为中心的 React 架构。

1. Hook 的角色转变与 React 的新方向
• Hooks 不只是生命周期函数重写，而是模块化、架构化的设计思想。
• React 18/19 的并发特性改变了异步数据处理逻辑，Server Components 与 use() 带来更高层数据抽象。
• 目标是构建“数据先行”的渲染流程，而非依靠组件内部副作用。

2. useEffect 的陷阱与替代方案
• 常见问题是将数据请求、派生计算塞入 useEffect，导致过度触发渲染。
• React 的最佳实践是：所有可在渲染阶段派生的内容应在渲染过程中完成，而非放入 effect 中。
• 引入 useEffectEvent 以访问最新的 state/props 而不触发额外渲染。
• 使用 useMemo、useCallback 处理纯计算逻辑，减少组件不必要的波动。

3. 自定义 Hooks：从重用到封装
• 自定义 Hook 不只是提炼通用逻辑，更是对业务域逻辑的封装。
• 示例：将 window 尺寸监听封装为 useWindowWidth，实现 UI 与逻辑分离。
• 优点包括更高的可测试性以及更干净的组件结构。

4. 外部订阅与 useSyncExternalStore
• React 18 新增 useSyncExternalStore 解决数据源订阅同步、性能与 tearing 问题。
• 适用于浏览器 API（如 matchMedia）、外部状态管理库（Redux、Zustand）等。
• 提供可靠的订阅模式与一致的渲染行为。

5. 并发工具与性能优化
• 使用 startTransition 与 useDeferredValue 在高频输入或筛选操作中保持响应式体验。
• startTransition() 用于延后状态更新，useDeferredValue() 延后派生计算。
• 合理组合能避免输入滞后，同时保护性能。

6. 可测试、可调试的 Hook 架构
• 将业务逻辑封装为 Hooks，以便隔离测试并增强可维护性。
• 借助 React DevTools 检查自定义 Hook 状态流动。
• 提倡将上下文逻辑（如认证、数据提供）提炼为 provider 级 Hook，例如 useAuthProvider。

7. 数据优先的 React 应用与未来趋势
• React 正向 Server Components、Action-based 数据流演进，弱化客户端副作用依赖。
• 新 API：[use()](https://react.dev/reference/react/use)、useActionState、useEffectEvent 等用于处理并发与异步状态。
• 重点是减少 “万能 useEffect” 模式，构建清晰、声明式的数据驱动结构。

8. Hook 作为架构模式
• Hooks 体现的是一种思考方式：派生状态应在渲染时生成，副作用仅限外部交互。
• 推荐模式：小而专注的 Hooks、明确的客户端/服务端边界、结合并发机制以优化用户体验。
• React 正在从“组件驱动”走向“数据驱动”阶段，现代 Hooks 是这种转变的核心载体。

AI 摘要：本文由 Ana Tudor 撰写，灵感来自 Vivi Tseng 的 CodePen 实验，探索如何用极简的 CSS 实现一种“非正方形图片模糊扩展”效果——图片在较短边方向通过自身的模糊副本自然填补为方形背景。文章逐步从理论四行 CSS 实现入手，延伸到浏览器兼容性问题、替代方案（CSS 变量、SVG filter）以及跨浏览器处理方式，并在最后提出动态方向渐隐和计算图像纵横比的方案。整体展示了 CSS filter、backdrop-filter、container query、mask、attr() 等高级特性的组合运用。

1. 简介与问题动机
• 作者想用单个 img 元素与最少的 CSS 声明，实现非方形图片的模糊填充背景。
• 对比现有需额外元素的方案，希望找到更优雅的实现。
• 展示目标效果：图片保持比例，四周模糊延伸成方形视觉。

2. 基本实现思路（四行 CSS 方案）
• 第一步：固定 width: min(100%, 23em) 以控制尺寸。
• 第二步：设定 aspect-ratio: 1 让图片框为正方形。
• 第三步：使用 object-fit: contain 保持图片纵横比并留白。
• 第四步：用 background: filter(src(attr(src)), blur() …) 将自身模糊版本作为背景。
• 说明 filter() 与 src() 的 CSS 机制、attr() 的动态属性取参功能。

3. 浏览器支持问题（Support Sadness）
• Safari 支持 filter()，Chromium 家族支持新版 attr()，但尚无浏览器支持全部特性。
• Chrome、Firefox、Safari 当前的支持状态 bug 链接一览。
• 因此四行完美方案暂无法跨浏览器落地。

4. 实用替代办法（Current Options）
• 用 CSS 变量 --img 保存图片 URL 代替不支持的 src(attr(src))。
• Safari-only 测试用 Epiphany 浏览器可验证。
• 模糊边缘透明问题原因：blur() 会在边缘像素引入透明度。
• 使用 SVG filter + edgeMode="duplicate" 替代 CSS blur() 修复边缘透明。
• 展示最终无半透明边缘的 Safari 可运行版本 Demo。

5. 跨浏览器版本设计（backdrop-filter 方案）
• 结构：在 .wrap 容器上设置背景为图片，img 叠在上面。
• backdrop-filter: blur() 模糊容器背景，实现视觉层叠。
• 修复 inline 元素底部空隙，建议 display: grid 保持对齐。
• 完整方案兼容主流浏览器，效果与原始类似。

6. 增强与 fading 效果
• 实现图片边缘平滑过渡到模糊背景：利用伪元素 ::before。
• 采用 grid 堆叠控制层级，通过 z-index 调整前后关系。
• 利用 mask: linear-gradient() 按方向渐隐；
• 若已知方向，可用 data-orientation 属性。
• 若有已知宽高比，可利用 sign() 函数自动判定横竖。
• 特殊情况：正方形图片需中间值（--bit 标志）避免对角线渐隐。

7. 当图像比例未知（Unknown Aspect Ratio）
• 提出两种策略：
• SVG filter 模糊生成 alpha mask（Safari 专用）。
• 详细分解 feGaussianBlur 和 feComponentTransfer 原理；
• 调整 alpha 映射以强化平滑透明带；
• 结果非线性渐变更自然但控制困难。
• 纯 CSS 容器比例计算方案：
• 结构上引入额外 .rect 容器与隐藏副本 img；
• 利用 container query 的 100cqw/100cqh 算出纵横比；
• 自动生成 mask 渐隐角度，适配所有主流浏览器。

8. 拓展与实验方向
• 可在 backdrop-filter 链中加入更多视觉特效（如 sepia()、hue-rotate()）。
• 展望未来 CSS 函数全面支持后的更简洁实现。

Frontend Masters

Non-Square Image Blur Extensions

I recently came across this CodePen demo by Vivi Tseng, which creates the blur extension effect by placing a square div with a blur() beneath the img element and I couldn’t help but think a simpler solution should be possible with a single img element and…

AI 摘要：Koi Security 揭露了名为 ShadyPanda 的威胁行为者在过去七年间通过伪装的浏览器扩展发动攻击，从最初的联盟欺诈到最终的远程代码执行 (RCE, Remote Code Execution) 与间谍软件(SPYWARE) 操控，总计感染了超过 430 万 Chrome 与 Edge 用户。该攻击者利用浏览器商店的信任与自动更新机制，先积累用户再通过静默更新“武器化”扩展。研究揭示，此类威胁并非单一事件，而是浏览器扩展生态系统的结构性安全缺陷——信任被系统性滥用。

1. 威胁概述与发现经过
• Koi 研究团队追踪到长达七年的浏览器扩展攻击链，命名为 ShadyPanda。
• 总计影响 430 万 Chrome 与 Edge 用户，两条主要恶意活动：一为 RCE 后门感染 30 万用户，另一为间谍软件监控 400 万用户。
• 攻击者通过合法推广与 Google 认证获得用户信任，再利用静默更新执行恶意代码。

2. 第一阶段：壁纸欺诈与联盟滥用 (2023)
• 共 145 个伪装成壁纸或效率工具的扩展程序，在 Chrome 与 Edge 市场上发布。
• 利用联盟营销注入追踪代码、窃取佣金，并通过 Google Analytics 收集与兜售浏览数据。
• 攻击者学会了三大关键经验：审核只关注初次上架；用户信任“高安装量+好评”；伪装时间越长危害越大。

3. 第二阶段：搜索劫持与主动控制 (2024 初)
• 改以控制浏览器核心行为为目标，如 Infinity V+ 劫持搜索请求、篡改结果。
• 实施 Cookie 数据外泄与实时键入监控，通过明文 HTTP 发送用户输入数据。
• 攻击者虽被多次下架，但逐渐提升隐蔽性与数据利用能力。

4. 第三阶段：长线布局与后门植入 (2018–2024)
• 多个扩展（如 Clean Master）先以合法身份运营多年，获得“精选(Featured)”与“验证(Verified)”标记。
• 于 2024 年中期推送恶意更新，触发远程代码执行框架。
• 恶意负载可每小时从 C&C (Command and Control) 服务器获取命令，具备完全浏览器访问权限。
• 收集完整浏览数据、设备指纹、加密外传；能躲避分析并执行中间人攻击 (MITM)。
• 尽管部分扩展被移除，后端基础设施仍活跃于受感染浏览器。

5. 第四阶段：间谍网络与大规模监控 (2023–今)
• Clean Master 背后的同一发行商 Starlab Technology 推出 5 款新扩展，在 Edge 市场累积超 400 万安装。
• WeTab 新标签页 alone 拥有 300 万用户，持续收集访问记录、搜索输入、点击轨迹与完整指纹。
• 数据实时传输至多个中国服务器与 Google Analytics，用于行为分析与潜在情报搜集。
• 当前仍在 Edge 市场上架，具有全面权限且可随时被“武器化”。

6. 七年战术演进与系统漏洞
• 几个阶段由浅入深：从简单的联盟欺诈到长期潜伏与数据控制。
• 共通特征：代码签名相似、基础架构重叠、混淆方式演化一致。
• 核心问题在于浏览器扩展生态的信任模型：审核仅限初期、缺乏动态监控。
• 自动更新机制成为主要攻击向量，无需钓鱼或社工即可实现大范围感染。

7. 结语与安全启示
• 根本教训：信任本身是最大的漏洞。
• 静态代码审核无法应对多年潜伏的攻击链。
• Koi Security 推出行为分析与风险评分方案，关注“扩展安装后实际行为”而非声称功能。
• 呼吁浏览器平台与企业加大对行为监测与扩展生态安全的关注。

AI 摘要：文章深入浅出地介绍了 CSS Subgrid 的原理、语法以及在实际布局中的强大应用。作者从传统嵌套 Grid 布局的局限出发，展示 Subgrid 如何让子元素共享父网格结构，从而解决嵌套布局中兄弟元素协调、行列同步、可访问性与语义等长期难题。文末作者也提醒了 Subgrid 的坑点（如行空间保留、编号重置和不支持流式网格）及兼容性策略，最后展示了灵活采用 Subgrid 逐步优化布局的思路。

1. Subgrid 基础与语法逻辑
• 传统 CSS Grid 仅支持直接子元素参与布局，嵌套元素难以精确控制。
• Subgrid 允许共享父级 Grid 的行列定义，实现层级布局的连贯性。
• 示例演示如何让 <ul><li> 等语义化标签参与同一布局网格。
• 对比 Flexbox 及嵌套 Grid 的替代方案，指出 Subgrid 提升结构语义与简洁性。

2. 新布局可能性（New layout possibilities）
• 演示艺术作品集卡片布局中跨元素对齐的问题。
• Subgrid 能让兄弟卡片实现列宽一致、响应式调整，避免文字长度影响列宽。
• 动态响应内容变化，提高布局的自适应表现与一致性。

3. 使用 Subgrid 时的坑点与避坑指南（Subgrid Gotchas）
• 行空间保留(Row reservation)： 必须显式定义跨越行数，否则子网格会被压缩成单行。
• 网格线编号重置： Subgrid 继承父网格模板但重编号，索引从 1 重新开始。
• 不支持流式网格(Fluid grid)： auto-fill / auto-fit 等流体布局参数目前无法与 Subgrid 结合。
• 浏览器兼容性： 主流浏览器 2023 起支持，但覆盖率未达 90%，需提供 Fallback。

4. 向后兼容策略（Fallback for older browsers）
• 使用 @supports not (grid-template-columns: subgrid) 提供替代布局。
• 优先保证视觉与交互体验的一致性，而非强求原样重现。
• 建议在小规模组件中逐步应用 Subgrid。

5. 实战展示与结语
• 以 Stripe Developer 网站为典范，展示多层 Subgrid 嵌套布局的极限用法。
• 鼓励开发者从小范围、局部组件开始接入 Subgrid 改造。
• 强调 Subgrid 带来的语义与结构清晰性提升，呼吁更多实验与实践。

Joshwcomeau

Brand New Layouts with CSS Subgrid • Josh W. Comeau

Subgrid allows us to extend a grid template down through the DOM tree, so that deeply-nested elements can participate in the same grid layout. At first glance, I thought this would be a helpful convenience, but it turns out that it’s so much more. Subgrid…

AI 摘要：这篇文章详细记录了制作 WebGL 个人作品集的全过程。文章展现了一个从最初构想到最终实现的探索旅程。文中涉及诸多技术，包括 Next.js、Three.js、React Three Fiber 以及 GSAP（含 MorphSVG 插件），并分享了多个实现细节，如 Fold 效果、MeshPortal 场景嵌入系统、基于滚动速度的 Shader 动效，以及 SVG 到 Canvas 的性能优化。最终，作品以戏剧化的视觉语言融合作者在戏剧、电影与编程三重背景下的美学追求。

1. 起点：Fold 效果与创意萌芽
• 以 Vector Projection 实现自由方向的折叠效果
• Shader 中的假阴影计算增加立体感
• 从最初“主特效”到成为创意起点的自我修正

2. 构建中：角色与 MeshPortal 系统
• 创建带角色的屏幕，利用 Mixamo 动作资源
• 引入 MeshPortal 技术，将独立 3D 场景限制在屏幕范围内
• 建立系统实现 WebGL 与 DOM 布局同步（mask 区域）
• 采用 hash-based 导航配合 GSAP 动画实现平滑过渡

3. 节奏延伸：让角色起舞与滚动动效
• 通过基于速度的 Stretch Shader 让文字响应滚动加速度
• 利用 depth-aware 动线制造空间层次
• 前端 JS 调控 Shader uniform 实现自然的运动衰减与模糊

4. 创意突破：不再拘泥于“屏幕”
• 从平面屏幕过渡到文字形态（Morphing Plane to Text）
• 借助 GSAP MorphSVG 插件实现路径平滑过渡
• 优化性能：通过 Canvas 渲染替代 SVG DOM 调用，保持 60fps
• 将“WHO” 文字转化为剧场式的舞台： Cinema、Theater、Code 三部分，用视频投影营造剪影效果

5. 闭环：Contact 页与「MEET ME」交互收尾
• 通过算得精确的 DOM 与 WebGL 匹配 mask 完成动态过渡
• 使用 GSAP 的 back.out 缓动创造富表现力的弹性动画
• 利用镜头视角（FOV）和空间深度营造收尾的视觉叙事
• 以贴纸元素作为呼应起点的个人符号，为项目画上圆满句号

6. 总结与思考
• 作品的发展不是强行设计，而是对“创意呼吸”的倾听
• 通过“让过程塑形”，实现技术与自我表达的统一
• 最终成果是一种情感与视觉共鸣的体验，而非单纯代码演示

AI 摘要：本文介绍如何利用 CSS Overflow Module Level 5 的新特性（如 ::scroll-button() 与 ::scroll-marker）创建一个完全不用 JavaScript 的原生 CSS 轮播组件。通过结合 HTML 的复选框控制展示项、CSS 伪元素控制滚动行为与可视化反馈，作者实现了可动态增删轮播项、支持自动滚动、滚动锚点定位的完整组件。文章分为三步：HTML 结构设计、基础样式编写与添加按钮/标记逻辑，展示了未来 CSS 在交互与状态管理上的潜力。

1. CSS 新特性简介
• 概述 CSS Overflow Module Level 5 模块，引入 ::scroll-marker 与 ::scroll-button() 两个新伪元素。
• 说明这些特性如何在滚动内容中自动生成导航控件，无需脚本交互。
• 当前仅 Chrome 142+ 提供支持，但为未来原生组件交互铺路。

2. HTML 结构与逻辑绑定
• 使用 <input type="checkbox"> 控制轮播项的显示与隐藏。
• 每个复选框对应一个 <li> 滑块，可预选或取消以动态控制内容。
• 通过 .component:has(input:not(:checked)) 实现逻辑选择，隐藏未选项。
• 结构层清晰，可改造为 <form> 以实现数据序列化提交。

3. CSS 基础样式与响应式设计
• 使用 max-width 与 aspect-ratio 实现轮播容器的响应式尺寸。
• 当存在选中项时使用 display: flex; 和 min-width: 100% 水平展示滑块。
• 未选中时显示占位样式，增强组件的状态反馈。

4. 滚动控制与标记实现
• 使用 scroll-snap-type: x 与 scroll-behavior: smooth 实现平滑滑动与对齐。
• 通过 anchor-name 将轮播容器转变为锚点，利用 position-anchor 精准定位滚动按钮与标记组。
• scroll-marker-group 属性控制标记插入位置，可调节排列与间距。
• 各标记通过伪类 :target-current / :target-before / :target-after 呈现不同状态风格。
• 实际布局通过固定定位 (position: fixed) 与锚点对齐 (justify-self: anchor-center) 来分布按钮与标记。

5. 滚动按钮的添加与行为控制
• 使用 ::scroll-button(left/right) 生成左右切换箭头。
• 通过 :enabled 控制显示状态，避免无效方向交互。
• 再次利用锚点定位调整按钮相对位置，内容用 Unicode 符号构建箭头。
• 补充 scroll-snap-align: center，保证切换时对齐完整幻灯片。

6. 扩展与应用
• 相同机制可拓展至分页、标签页等滚动式界面组件。
• 展示了未来 CSS 在状态驱动组件中的可行性与可维护性。
• 示例：产品展示轮播，可根据颜色选项动态切换视图。

Frontend Masters

How to Add and Remove Items From a Native CSS Carousel (…with CSS)

The CSS Overflow Module Level 5 defines specs for scrolling controls that enable users to navigate overflow content without manually scrolling (like click-and-dragging the scrollbar, the trackpad, a scrollwheel, or the like). This includes scroll buttons…

AI 摘要：Harmony Intelligence 团队报告发现 Next.js 自托管版本存在严重的拒绝服务（DoS）漏洞，攻击者仅需一个精心构造的 HTTP 请求即可导致服务器内存被耗尽而崩溃。漏洞由 AI AppSec Agent 在测试期间意外发现，已由 Vercel 于 2025 年 10 月修复。防御建议是尽快升级至 Next.js 15.5.5 或以上版本，并在生产环境使用可限制请求大小的反向代理，因为仅靠请求频率限制并不能防御此类攻击。

1. 漏洞概述
• 漏洞类型：拒绝服务 (DoS)，通过发送大体积的 HTTP 请求流导致服务器内存耗尽并崩溃。
• 受影响范围：所有带有中间件的自托管 Next.js 服务器（Vercel 托管的不受影响）。
• 受影响版本：≤15.5.4、14.x、13.x 等旧版本。

2. 发现经过
• 漏洞在测试 AI AppSec Agent 能否独立识别已知认证绕过问题（CVE-2025-29927）时意外被触发。
• AI 代理可访问源代码并在安全沙盒中运行，对应用执行自动化渗透探索。
• 意外发现 Next.js 官方源码中 cloneBodyStream 函数复制无大小限制的请求体，从而导致内存占用过高。

3. 技术细节
• 漏洞根源在于 body-stream.ts 中的 cloneBodyStream：函数会将整个请求流读入内存。
• 攻击者仅需持续发送数据流片段即可造成服务器崩溃，资源消耗极低。
• 修复补丁通过在内存缓冲区超过 10MB 时抛出异常来限制流大小。

4. 影响与安全评级
• 全球 300 万个活跃 Next.js 部署中约 55% 为自托管环境（企业约 80%）。
• 初始漏洞报告时 Vercel 尚未在文档中明确推荐使用反向代理限制请求大小。
• 推荐 CVSS v3.1 评分 7.5（高危），依据类似 Node.js 漏洞 (CVE-2018-12121) 的评估逻辑。

5. 缓解措施（Mitigation）
• 推荐立即升级至 Next.js 15.5.5 或 16.0.0 及以上版本。
• 配置诸如 nginx 的反向代理来限制请求体大小，例如默认 client_max_body_size = 1MB。
• 确保应用服务器不对外直接暴露，全部流量应经过代理层。
• 仅靠应用层的 rate limit、bodyParser.sizeLimit 或 express-rate-limit 等代码级限制无效，因为漏洞触发点在中间件执行前。

6. 信息披露时间线
• 2025-08-07：私下通知 Vercel 并持续每周跟进。
• 2025-09-23：Vercel 第一次回应。
• 2025-10-13：Vercel 发布补丁 (v15.5.5)。
• 2025-11-26：公开披露与缓解方案发布。

Harmonyintelligence

Harmony Intelligence - Taking down Next.js servers for 0.0001 cents a pop

Our AI AppSec Agent discovered an unauthenticated DoS vulnerability that crashes a self-hosted Next.js server with a single HTTP request and negligible resources.

AI 摘要：作者在 Filestage 的前端项目中使用 AI Agents（特别是 Claude Code）与 AST（Abstract Syntax Tree）技术，将近千个测试文件、六千多条测试从 React Testing Library v13 迁移至 v14。文章展示了从制定迁移指南、分步提交 PR、编写 codemod、自动化验证到改进 AI 提示的完整过程，最后总结出 AI 在大规模代码迁移中的优势与局限，并强调“小步迭代 + 自动化验证”的工程基本功仍然至关重要。

1. 项目背景与动机
• 公司使用旧版 React Testing Library 编写了 970 个测试文件，总计 6000 多测试用例。
• 升级至 v14 后 API 完全异步化，行为变化大，手动迁移代价极高。
• 作者决定尝试用 AI 辅助完成大规模迁移。

2. 准备与迁移指南
• 首次直接用 Claude Code CLI 自动迁移失败，暴露出测试失败过多、AI 调试混乱的问题。
• 于是转而使用 Claude Web 模式制作详细的迁移指南，分析版本差异与新 API。
• 确定主要变化：异步 API、测试 setup 模式更新、时序逻辑差异需人工介入。

3. 拆分改动与依赖并行安装
• 利用 NPM 的包别名功能同时运行 v13 与 v14，避免一次性大变更。
• 生成迁移指南并提交第一份 PR，保证团队迭代可控。

4. 编写与测试 codemod 自动化工具
• 使用 jscodeshift 解析代码为 AST，再生成批量修改工具。
• 编写输入输出测试用例以验证 codemod 效果（例如导入路径、 renderWithUserEvent 封装替换）。
• 自动测试 codemod 确保修改一致性和可验证性。

5. 实际迁移与 AI 协作循环
• 通过详细 prompt 指令让 Claude Code 分批迁移 10 个测试文件，执行 lint 检查与单测验证。
• 持续观察失败案例，不断改进 codemod 与迁移指南。
• 迁移指南从最初 4500 字扩充到 7500 字；codemod 从 271 行发展到近千行，测试覆盖更完备。
• 共执行 50 次迁移，形成 50 个独立 PR。

6. AI 性能与局限分析
• Claude Code 在调试测试与识别重复模式方面表现优异。
• 局限包括 context 深度不足、长任务遗忘指令、无法稳定维持覆盖率。
• 通过增加 JSON 格式的覆盖率报告输入，AI 能理解覆盖问题并修复。
• 网络波动与服务超限导致中断，验证仍需人工把关。

7. 工程启示与最终成果
• 整体用一周完成迁移，每个 PR 约半小时。
• 若纯人工迁移，估计需数月。
• 迁移过程机械但 AI 显著提升效率。
• 保持验证自动化、关注 edge case、理解底层工具机制，是让 AI 发挥价值的关键。
• 作者展望未来 AI 将进一步解放开发者，从“重复劳动”转向更有创造力的工作。

Eliocapella

Migrating 6000 React tests using AI Agents and ASTs

How I used AI to migrate 970 test files with 6000+ test cases from React Testing Library v13 to v14 in one week, through 50 PRs that would have taken months manually.

AI 摘要：作者以一种反思式的语气询问开发者——我们为什么要在浏览器里使用 React？文章从技术惯性、前后端职责演变、开发者文化到框架优先级等多个角度分析 React 的盛行原因与隐形代价。作者最终的立场是：在服务端使用 React 无可厚非，但在客户端运行 React 则可能损害用户体验。若仅因文化或团队习惯而加载庞大的 React 库，不如考虑 Preact、Astro 或直接用原生 JavaScript（vanilla JS），以提升性能和用户友好度。

1. 选择 React 的现象与动机
• 多数开发者使用 React 并非出于设计或性能考虑，而是出于团队惯性或工作要求。
• 作者将“被强制使用的技术”定义为企业级软件（enterprise software）。
• 惯性（Inertia）被认为是 React 持续流行的首要原因。

2. 前端与后端的边界变化
• 过去前端与后端有清晰分工，如 HTML、CSS、JavaScript 属于前端，PHP、Ruby、Python 属于后端。
• 随着 JavaScript 可在服务器端执行，开发者常忽视客户端代码的性能代价。
• 客户端执行环境有限，文件体积和加载时间至关重要，而服务端则可通过硬件“买掉”性能瓶颈。

3. React 开发者文化与生态迁移
• React 从最初强调虚拟 DOM 到后来因组件化架构与 JSX 被开发者喜爱。
• React 不再只是前端库，而是类似 Rails、Django 的全栈式生态。
• 这种文化层面的认同让开发者倾向于“全用 React”，即便这并不总是对用户友好。

4. 框架优先级与替代方案
• Next.js 推行服务端渲染（SSR），但仍倾向输出同样的客户端 React 代码，造成资源浪费。
• Astro 框架提出“最小化客户端 JavaScript”的思路，保留 JSX 作者体验但减轻用户负担。
• React/Next/Vercel 生态的惯性使这种思路被边缘化，但 Astro 展示了另一种可能。

5. 回归问题：为什么在浏览器使用 React？
• 若使用 React 只是团队协作或文化原因，可仅在服务端保留 React。
• 前端若非单页应用（SPA），应尽量减少 JavaScript 框架负担。
• 若确需前端状态管理，可考虑 Preact 或探索原生 JavaScript 的能力。
• 作者倡导：让框架留在服务器，充分利用浏览器本身的强大功能。

AI 摘要：这篇文章探讨了 CSS 新特性 light-dark() 与经典媒体查询 prefers-color-scheme 之间的区别。作者原以为前者可以“一键取代”后者，但在实际项目中发现，light-dark() 依赖于 color-scheme 属性的正确设定，而 prefers-color-scheme 完全基于操作系统的偏好。两者虽然目标相似（响应亮/暗模式），却响应机制不同，导致主题切换时的表现并不一致。开发者在实现自定义主题时，应理解它们的区别，以正确控制组件的配色逻辑。

1. 新特性背景与初衷
• 作者在 “Today I learned” 系列中分享 CSS 的最新学习经验
• 以为 light-dark() 能替换 prefers-color-scheme，从而精简代码
• MDN 对 light-dark() 的定义：能为属性设置两种颜色，而无需媒体查询

2. light-dark() 的工作条件
• 必须在 :root 或容器上设置 color-scheme: light dark; 才能生效
• 若未设定 color-scheme，light-dark() 无法根据系统主题切换
• prefers-color-scheme 无论 color-scheme 是否存在，都能响应操作系统主题

3. 实际项目中的表现差异
• 以 Web Weekly 网站重构为例，作者使用 Tailwind CSS 配置了自定义颜色变量
• light-dark() 自动翻转颜色逻辑，但 prefers-color-scheme 与 color-scheme 之间无联动
• 当通过 color-scheme 切换主题时，light-dark() 能正确响应；而 prefers-color-scheme 仍只看系统设置
• 这种行为差异源于 prefers-color-scheme 的历史兼容性设计

4. 结论与经验
• light-dark() 并非 prefers-color-scheme 的替代品，而是基于 color-scheme 工作的全新机制
• prefers-color-scheme 更偏向全局系统偏好，light-dark() 更适合组件级主题控制
• 实现主题切换前，应明确两者触发机制，避免预期不符

Stefanjudis

light-dark isn't the same as prefers-color-scheme

`light-dark()` and `prefers-color-scheme` treat the defined `color-scheme` values differently.

AI 摘要：文章宣布 WebGPU 正式在 Chrome、Edge、Firefox 与 Safari 上全面支持，这标志着网页端高性能计算和 3D 图形的新时代。WebGPU 不仅替代 WebGL，更在性能与设计层面跃升，支持现代 GPU 功能、Compute Pipeline（通用计算管线）和 Render Bundles（渲染指令集复用）等特性，为游戏、AI 推理、视频处理和物理仿真提供桌面级性能。文章还介绍了各浏览器与操作系统的支持情况以及生态圈的成熟度，包括 Babylon.js、Three.js、ONNX Runtime、Transformers.js 等框架的支持，并感谢各大公司与开发者的多年协作。

1. WebGPU 的意义与特性
• WebGPU 是 WebGL 的继任者，提供更现代、更高效的 GPU 接口。
• 设计包含符合 JavaScript 习惯的 API 与现代着色语言（Shader Language）。
• 支持 Compute Pipeline，让网页端可以执行机器学习推理、模型训练、视频处理等高性能任务。
• Render Bundles 能记录并重用渲染命令，提高性能、降低 CPU 开销。
• 示例：Babylon.js 的 Snapshot Rendering 通过 Render Bundles 提升渲染性能约 10 倍。

2. 浏览器与系统支持现状
• Chrome / Edge：在 Windows（Direct3D 12）、macOS、ChromeOS 自 v113 起支持；Android 自 v121 起支持。
• Firefox：Windows 自 v141 起支持，macOS ARM64 自 v145 起支持。
• Safari：在 macOS、iOS、iPadOS、visionOS 的版本 26 中支持。
• Linux、Android 及部分平台的支持仍在持续开发中，可查看 Implementation Status。

3. WebGPU 生态系统的成长
• 主流框架已支持 WebGPU，包括 Babylon.js、Three.js、PlayCanvas、ONNX Runtime、Transformers.js、React Native WebGPU、TypeGPU、Unity WebGPU。
• 底层引擎如 Dawn (Chromium) 与 wgpu (Firefox) 可独立使用，方便跨平台开发。
• 借助 WebAssembly (Wasm)、Emscripten、Rust web-sys 等工具，可将原生 GPU 应用移植至 Web。

4. 致谢与社区协作
• WebGPU 的成功来自 W3C GPU for the Web Working Group 的多年协作。
• 感谢多家公司与贡献者，包括 Apple、Google、Intel、Microsoft、Mozilla 等。
• 特别致谢开发者 Corentin Wallez、Ken Russell、Thomas Lucchini 等。

web.dev

WebGPU is now supported in major browsers  |  Blog  |  web.dev

Read about the biggest web graphics launch since WebGL. WebGPU is supported across major browsers, bringing unparalleled performance to the web.

AI 摘要：文章介绍了 Chrome 144 对 CSS 属性 overscroll-behavior 的改进：该属性现在在“不可滚动的滚动容器”上也有效，这意味着开发者可以用简单的 CSS 代码阻止页面在对话框（<dialog>）打开时滚动。作者解释了这一特性的技术背景、过去的限制及其在不同浏览器支持上的现状，并展示了一个实现示例。

Bram.us

Use overscroll-behavior: contain to prevent a page from scrolling while a <dialog> is open

Chrome 144 features a small change to overscroll-behavior: it now also works on non-scrollable scroll containers. While this change might seem trivial, it fixes an issue developers have been dealing with for ages: prevent a page from scrolling while a (modal)…