#Newsletter #前端 #周刊更新
周刊第 19 期！
本期东西还挺多的，写死我了～
这周给我的博客站点增加了无需后端的相关推荐和 AI 摘要功能，很开心。
FE Bits Vol.19｜站点新功能与 React 披露两个新的 RSC 漏洞

cos

FE Bits Vol.19｜站点新功能与 React 披露两个新的 RSC 漏洞 | 周刊 | 余弦の博客

本期周刊记录了站点新增“零后端”相关推荐与 AI 摘要；缓存增量构建、上线零开销。生态方面，RSC 披露新漏洞并已修复，Three.js r182 发布，Deno 2.6 推出 dx，TypeScript 7 原生工具链进展显著，CSS 多项新特性推进。

#前端 #新动态 #标准化
Vote for the web features you want to see | web.dev：现在，你可以通过点赞 (upvote) 来影响你最想看到的 Web 特性啦！
WebDX 社区组织推出了一项新功能，允许开发者直接通过“点赞 (upvote)”来表达对特定 Web 特性的需求，以帮助浏览器厂商优先考虑开发。虽然点赞多不代表直接采纳，但开发者的需求将成为浏览器厂商决策的重要参考因素。

web.dev

Vote for the web features you want to see  |  Blog  |  web.dev

Have you ever wished you could just poke the browser vendors and say, "Hey, I need this!"? Well, now you can.

#优质博文 #前端 #CSS #AI #MCP #debug
这个好啊，Chrome DevTools MCP 终于能直接介入浏览器调试了。

Let your Coding Agent debug your browser session with Chrome DevTools MCP

AI 摘要：Chrome DevTools MCP 迎来了重大更新，现在允许 AI 编程助手直接连接到活跃的浏览器会话。这项新功能极大地提升了调试效率，编程助手可以重用现有登录会话、访问活跃的调试面板（如网络面板和元素面板），从而实现手动调试与 AI 辅助调试的无缝切换。文章详细介绍了这一功能的实现原理、安全措施（如用户授权弹窗和控制横幅）以及如何配置和使用，为开发者提供了更智能、更便捷的调试体验。

以下是方便搜索索引的大纲(AI 生成)，请读原文

1. Chrome DevTools MCP 新功能概述
• 核心更新：Chrome DevTools MCP 服务器现在支持 AI 编程助手直接连接到活跃的浏览器会话。
• 主要优势
• 重用现有浏览器会话：编程助手可以直接访问已登录的会话，无需重新登录。
• 访问活跃调试会话：编程助手可以直接从 DevTools UI 访问并调查选定的元素或网络请求。
• 工作流改进：实现手动调试与 AI 辅助调试的无缝切换。

2. Chrome DevTools MCP 连接方式
• 现有连接方式
• 使用特定用户配置文件运行 Chrome。
• 通过远程调试端口连接到运行中的 Chrome 实例。
• 在独立临时配置文件中运行多个 Chrome 实例。
• 新增自动连接功能：通过 --autoConnect 选项，MCP 服务器可以请求远程调试连接。

3. 远程调试工作原理及安全措施
• 基础机制：基于 Chrome 现有的远程调试能力。
• 启用步骤：用户需在 chrome://inspect#remote-debugging 中手动启用远程调试。
• 连接流程：
• MCP 服务器配置 --autoConnect 选项后，将尝试连接活跃的 Chrome 实例。
• 用户授权：Chrome 会弹出对话框，要求用户授权远程调试会话，以防止滥用。
• 状态提示：调试会话激活时，Chrome 顶部会显示“Chrome is being controlled by automated test software”横幅。

4. 如何开始使用
• 步骤一：在 Chrome 中设置远程调试
• 导航至 chrome://inspect/#remote-debugging。
• 根据对话框提示允许或禁止传入的调试连接。
• 步骤二：配置 Chrome DevTools MCP 服务器
• 在 MCP 服务器配置中，为 chrome-devtools 服务添加 --autoConnect 命令行参数。
• 示例配置适用于 gemini-cli。
• 步骤三：测试设置
• 运行 gemini-cli 并输入性能检查指令。
• 允许 Chrome 弹窗中的远程调试请求。
• 验证 MCP 服务器是否能成功打开网页并执行性能追踪。
• 更多信息：可参考 GitHub 上的 README 文档获取完整说明。

5. 未来展望
• 调试任务交接：AI 编程助手可以接管调试任务，提升效率。
• 面板数据暴露：计划逐步向编程助手暴露更多 DevTools 面板数据。

author Sebastian Benz

Chrome for Developers

Let your Coding Agent debug your browser session with Chrome DevTools MCP  |  Blog  |  Chrome for Developers

We shipped a new feature to the Chrome DevTools MCP server that is going to make it a lot easier for your coding agent to debug your current browser sessions.

#优质博文 #React #前端 #course
Do's and Don'ts of useEffectEvent in React

AI 摘要：useEffectEvent 是 React 新增的 Hook，用来在 Effect 中获取最新的 props / state 而不触发 Effect 重新执行。它通过保持函数引用稳定，解决了“依赖列表必须包含所有变量”导致的频繁重渲染问题。文章列举了它的使用场景、可做与不可做的细节，以及最佳实践和迁移建议，帮助开发者在合适的场景安全使用该特性。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 什么是 useEffectEvent
• 介绍了 useEffectEvent 的核心概念：创建一个始终读取最新值的稳定函数引用
• 说明它如何在不触发 Effect 重跑的情况下访问最新的 props / state

2. 解决的问题
• 通过聊天应用示例，展示传统写法需把所有变量加入依赖导致不必要的重跑
• 对比使用 useEffectEvent 后，仅在真正需要的依赖（如 roomId）变化时才重新执行 Effect

3. Do's 与 Don'ts
• ✅ Do：在 Effect 内直接调用、用于读取最新值、用于需要 Effect 上下文的事件处理、分离响应式与非响应式逻辑、同步调用
• ❌ Don't：在普通 UI 事件处理器中使用、在渲染阶段调用、作为 props 传递、异步或延时调用、替代正常的 memoization

4. 详细示例
• ✅ 正确：在 Effect 中抽离非响应式逻辑（如主题变化）保持连接仅在 roomId 改变时重建
• ❌ 错误：在按钮点击等普通事件中使用 useEffectEvent，建议使用普通函数或 useCallback
• ✅ 正确：在定时器或轮询中读取最新的回调函数（如 onTick）
• ❌ 错误：在异步 fetch 回调中调用 useEffectEvent，可能在组件卸载后仍被调用
• ✅ 正确：在清理函数中也可使用 useEffectEvent 记录页面退出事件
• ❌ 错误：把 useEffectEvent 作为其他 Hook（如 useMemo）的依赖，破坏其稳定性

5. 常见使用场景
• 日志与分析：在路径变化时记录页面访问，内部使用最新的主题、语言、用户 ID 等信息
• 第三方回调：向消息服务订阅回调，回调内部使用最新的用户偏好而无需重新订阅
• 防抖实现：在防抖定时器中使用最新的搜索参数和过滤条件

6. 最佳实践
• 只在确实需要读取非响应式值时使用
• 考虑逻辑是否应该放在 Effect 之外的普通事件处理器里
• 保持 Event 函数单一职责，写清使用原因以便维护
• 等待 stable 版本发布再用于生产环境

7. 迁移路径
• 对比使用 useCallback 并频繁更改依赖或通过 eslint-disable 抑制警告的情形，说明 useEffectEvent 可作为更清晰的替代方案
• 建议先重构组件逻辑，确认是否真的需要该 Hook

author Slicker

slicker.me

Do's and Don'ts of useEffectEvent in React

#新动态 #前端 #播客
微软推出 VS Code Insiders 播客：由 Visual Studio Code 官方团队打造，深度访谈开发者、产品经理以及社区贡献者，解密新特性、实验工具和 AI 驱动的工作流。

想知道世界上最受欢迎的代码编辑器背后究竟发生了什么吗？ VS Code Insiders Podcast 将为你揭开神秘面纱，带你深入了解塑造 Visual Studio Code 未来的功能、决策和人员。

Visualstudio

Introducing the VS Code Insiders Podcast

The VS Code Insiders Podcast is your insider's guide to the features, decisions, and people shaping the future of Visual Studio Code.

#优质博文 #前端 #html #javascript #css #tools #AI
Useful patterns for building HTML tools

AI 摘要：Simon Willison 在这篇文章中总结了构建 HTML 工具的核心模式：保持单文件、避免 React、使用 CDN 加载依赖、利用复制粘贴、调试工具、URL 与 localStorage 持久化、收集 CORS API、直接调用 LLM、文件操作、可下载文件、Pyodide 与 WebAssembly、复用已有工具以及记录开发过程。通过这些模式，作者在两年内用 LLM 生成了 150+ 个实用工具，并提供了大量示例与源码链接。

Simon Willison’s Weblog

Useful patterns for building HTML tools

I’ve started using the term HTML tools to refer to HTML applications that I’ve been building which combine HTML, JavaScript, and CSS in a single file and use them to …

#碎碎念 #里程碑
？居然有 star 吗。
几乎全是私人仓库和打工打工打工（安详）

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

那我求个 star 让年底的数据更好看一些（逃）今天加了 ai 摘要和相关推荐。

git-wrapped.com

#前端 #新动态 #shadcn #组件库
shadcn 推出 shadcn/create，可以打造专属的 shadcn/ui
立即体验：访问 https://ui.shadcn.com/ 点击 +新建项目

https://fixupx.com/i/status/1999530424234643716

shadcn (@shadcn)：隆重推出 shadcn/create – 打造专属的 shadcn/ui
全面定制。自由选择组件库、图标、底色、主题、字体，打造与众不同的视觉体验。
现已支持 Next.js、Vite、TanStack Start 及 v0 版本。

从最初的提交开始，shadcn/ui 的目标就是为您提供可靠的默认设置：间距、颜色标记、动画效果、无障碍支持，让您在此基础上自由发挥。
调整代码。添加新组件。更改颜色。
借助 npx shadcn create，这一切变得更加轻松。
从组件库开始：Radix 或 Base UI。
我们为Base UI重构了所有组件，保留相同抽象层级。它们与现有组件完全兼容，甚至支持远程注册库中的组件。
添加组件时，我们会自动检测库类型并应用对应转换规则。
同时新增5种视觉风格，助您打造独特设计：
1. Vega——经典shadcn/ui风格
2. Nova——紧凑布局的缩减间距
3. Maia——柔和圆润，间距充裕。
4. Lyra——方正锐利，与单线字体完美搭配。
5. Mira——紧凑型，专为高密度界面设计。
这远不止主题切换。
您的配置不仅改变颜色，更会重写组件代码以匹配设置。字体、间距、结构乃至所用库，一切皆可适配您的偏好。
全新命令行工具将自动完成所有配置。
立即体验：访问 https://ui.shadcn.com/ 点击 +新建项目
特别鸣谢 @base_ui 团队打造的卓越组件库。他们的成果让我们得以在保持抽象层完整的前提下轻松构建所有内容。意义重大。

Shadcn

The Foundation for your Design System - shadcn/ui

A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code.

#趣站 #CSS #WebGL #前端 #新动态 #动画
Shopify Editions Winter 2026

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

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

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

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

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

技术解析：

https://x.com/jh3yy/status/1999131244345405664
jhey ʕ•ᴥ•ʔ(@jh3yy)：今年的版本页面真是太棒了——有太多精彩的细节了 👨‍🍳

很荣幸能参与其中，团队表现出色 👏

除了令人惊叹的 WebGL 技术之外，还巧妙地运用了 CSS 容器查询、计数器、过渡/动画和 SVG！

Shopify

Shopify Editions | Winter '26

The commerce renaissance is here. Explore 150+ product updates across AI, retail, and more.

#碎碎念 #AI
又出了一个圣诞头像！圣诞爱！很开心，爱来自 NovelAI~~
https://www.pixiv.net/artworks/138531626
https://fixupx.com/_cosine_x/status/1999506197108654582

cosine - 前端人の日常频道

#前端 #安全 #新动态 #React 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://fixupx.com/reactjs/status/1999267418846449786

无恶意吐槽：
在研究 React2Shell 的时候发现两个新的漏洞好笑程度：100%
发现针对新的 DoS 漏洞的修复并未彻底保护某些场景，导致又出现新的漏洞（CVE‑2025‑67779）的好笑程度：1000%

也就是说如果你看到这消息比较早的话你得更新两次 😈

好笑吗，不，我只看到了周五的工作量又增多了

#前端 #安全 #新动态 #React
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 等）亦需同步升级。

• 拒绝服务（高危）： 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 进行升级。

react.dev

Denial of Service and Source Code Exposure in React Server Components – React

The library for web and native user interfaces

#codepen #demo #CSS #动画 #前端
写……写轮眼（x）
花瓣

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

#codepen #demo #WebGL #shader #动画 #前端
美丽，有点想改改色放博客头图。
霓虹正弦波效果 GLSL

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

cosine - 前端人の日常频道

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

#碎碎念 #AI
补充更新一下，Happy CLI 0.11.2 自带的版本是没有 Opus 4.5 只有 Opus 4.1 是因为自带的版本太旧，可以参考这个 issue
https://github.com/slopus/happy-cli/issues/84

cd $(npm root -g)/happy-coder && npm install @anthropic-ai/claude-code@latest --save

更新就可以用上 Opus 4.5 了！

#前端 #demo #CSS #SVG
帅

jhey ʕ•ᴥ•ʔ (@jh3yy): toggle 🌛
brought to life with CSS && SVG

https://fixupx.com/jh3yy/status/1864776491139039423

🧵 Thread • FixupX

jhey ʕ•ᴥ•ʔ (@jh3yy)

toggle 🌛

brought to life with CSS && SVG

Quoting Viewport UI (@viewportui)

Dark mode toggle by @cerpow

There’s no such thing as over-the-top. I wonder if @frrrnd can implement a similar version on our site? 👀

Just kidding, Fer.

#优质博文 #CSS #前端 #新特性
草案
Fit width text in 1 line of CSS

AI 摘要：本文介绍了 CSS 实验性新属性 text-grow 和 text-shrink，它们旨在用一行代码解决文本与容器宽度匹配的经典布局问题。文章详细解释了其语法、可选值和工作原理，同时也指出了当前存在的开放性问题和可访问性考量，并鼓励开发者参与相关讨论。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 新属性介绍与语法
• 介绍了实验性 CSS 属性 text-grow 和 text-shrink，它们可以简洁地让文本宽度适配容器。
• 详细解析了语法结构：text-grow: <fit-target> <fit-method>? <length>?;，并解释了 <fit-target> (如 per-line, consistent)、 <fit-method> (如 scale, font-size) 和可选 <length> 参数的含义。

2. 开放问题与社区讨论
• 指出了该属性在可访问性（如用户放大字体时）和具体行为（如最后一行、行高、内联图片的处理）上仍存在待解决的问题。
• 汇总了社区（如 Una Kravets, Donnie D’Amato）对该技术适用场景（如更适合打印样式）的讨论和思考，并提供了参与 W3C GitHub 议题讨论的链接。

3. 发展脉络与展望
• 回顾了从过去依赖 FitText.js 等复杂方案到如今一行 CSS 可能解决问题的技术演进。
• 整体表达了对这一新属性简化前端开发工作流的期待，同时保持了对其成熟度审慎乐观的态度。

author Geoff Graham

CSS-Tricks

Fit width text in 1 line of CSS | CSS-Tricks

The Chrome team recently prototyped a working solution for fitting text to the width of a container in CSS using a text-grow property.

#优质博文 #CSS #前端 #新特性
酷！
CSS Wrapped 2025

AI 摘要：本文是 Chrome 团队对 2025 年即将到来或已部分实现的 CSS 新特性的全面总结。文章涵盖了从交互增强（如无 JavaScript 的对话框控制、兴趣触发器）、UI 组件现代化（如完全可自定义的 select 元素、原生 CSS 轮播）、布局与定位革新（如锚点容器查询、滚动状态查询），到 CSS 语言能力提升（如 if() 条件语句、自定义函数、增强的 attr() 函数）等多个方面。这些特性旨在让开发者能够用更声明式、更简洁且高性能的代码构建更丰富、更易访问的 Web 体验。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 交互与行为增强
• Invoker Commands**：通过 commandfor 和 command 属性，无需 JavaScript 即可声明式地控制 <dialog> 和 [popover] 元素的显示、隐藏等操作，并支持自定义命令。
• Dialog Light Dismiss：为 <dialog> 元素新增 closedby 属性，实现类似 Popover 的“轻关闭”行为（点击外部或按 ESC 键关闭）。
• Interest Invokers：通过 interestfor 属性，为按钮或链接提供声明式的悬停/聚焦触发 UI（如工具提示），并可设置 interest-delay 控制延迟。
• ToggleEvent.source：在 ToggleEvent 中新增 source 属性，用于识别触发 popover/dialog/details 切换操作的具体元素。
• DOM State-Preserving Move：新的 moveBefore() DOM API，在移动元素（如 iframe、视频）时能保持其内部状态（播放、焦点等），不会重新加载。

2. UI 组件与控件
• Customizable select：通过 appearance: base-select 解锁对 <select> 元素的完全 CSS 定制，包括下拉列表、选项样式，并支持在 <option> 内使用 HTML 内容。
• ::scroll-marker/button()**：新增 CSS 伪元素，用于创建原生的、可访问的轮播导航按钮和标记点，无需 JavaScript。
• scroll-target-group：将一组锚点链接转换为滚动标记组，结合 :target-current 伪类实现“滚动侦测”高亮效果。
• text-box features：通过 text-box-trim 和 text-box-edge 属性，基于字体的视觉边界（如大写字母高度）精确控制文本垂直对齐，实现完美视觉居中。

3. 布局、定位与滚动
• Anchored container queries：结合 CSS 锚点定位，使用 container-type: anchored 和 @container anchored(fallback: ...) 查询，让元素能根据其定位回退状态（如从底部翻转到顶部）自适应样式。
• Scroll-state queries：通过 container-type: scroll-state，让子元素能查询父容器是否处于“可滚动”、“吸附”或“固定”状态，并据此应用样式。
• scrollIntoView() container：scrollIntoView 方法新增 container: 'nearest' 选项，确保只滚动最近的祖先滚动容器，而非整个视口。
• Stretch sizing keyword：新的 stretch 尺寸关键字，让元素在考虑外边距的情况下填满包含块，不同于 100%。
• corner-shape：新的 corner-shape 属性，提供除圆角外的多种边角形状（如斜面、凹口、圆弧、方圆形），并支持 superellipse() 函数进行精细控制。

4. CSS 语言与表达能力
• Tree counting functions：新增 sibling-index() 和 sibling-count() CSS 函数，用于获取元素在兄弟节点中的索引和总数，简化交错动画等效果。
• Advanced attr() function：增强的 attr() 函数，现在可用于任何 CSS 属性，并能将属性值解析为颜色、长度、数字等特定类型。
• if() statements：新的 CSS if() 函数，内联支持条件判断，可与 media()、supports()、style() 查询结合，简化动态样式逻辑。
• Custom Functions：支持使用 @function 定义自定义 CSS 函数，提高样式代码的复用性和可读性。
• Expanded range syntax：现在样式查询和 if() 语句中支持使用范围语法（如 >, <），允许对自定义属性值进行大小比较。
• shape() function：新的 shape() CSS 函数，用于创建复杂、响应式的裁剪路径，比 clip-path: path() 更易于维护和动画。

5. 动画与过渡
• Nested View Transition Groups：视图过渡 API 支持嵌套的 ::view-transition-group ，通过 view-transition-group: nearest 属性在过渡期间保留 3D 变换和裁剪效果。

author Una Kravets