#优质博文 #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

#优质博文 #design #UX
The f*** off contact page - Nic Chan

AI 摘要：本文作者 Nic Chan 分享了一个早年客户案例，客户是一家服务型设计公司，却执意要模仿大型 SaaS 企业的“劝退式联系页面”（fuck off contact page）——一种通过隐藏真实支持渠道来减少咨询量的设计。作者分析了这种页面为何与客户（服务型公司）获取线索的根本目标相悖，并反思了项目中出现这一问题的根源：折扣报价导致客户不尊重专业意见、未能有效教育客户理解设计流程（如线框图）的价值，以及双方缺乏信任。文章最终倡导设计师应通过公开分享价值观来吸引理念一致的客户。

author Nic Chan

Nic Chan

The f*** off contact page

How to get people to NOT contact you

#优质博文 #前端 #CSS #Astro #ISR #性能优化
想起以前做的 ISR，心血来潮搜一下 Astro 里的 ISR 怎么做，做一下。
On-Demand ISR For Astro on Vercel

AI 摘要：本文详细介绍了如何在 Vercel 平台上为 Astro 静态网站配置按需增量静态再生成 (On-Demand ISR)。文章首先解释了 ISR 和按需 ISR 的概念及其适用场景，然后通过一步步的代码示例，指导读者如何初始化项目、添加 Vercel 适配器并配置 ISR 参数、创建动态页面，以及最关键的部分——如何通过一个受保护的 API 端点来手动触发缓存失效和页面重建，从而实现对静态内容更新时间的精细控制。

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

1. 概念解析
• 什么是 ISR：解释增量静态再生成 (ISR) 的概念，即无需重新构建或部署整个网站即可更新静态内容（如博客文章或 GET API 端点）。
• 什么是按需 ISR：对比传统基于 TTL（生存时间）的 ISR，说明按需 ISR 允许在 TTL 到期前手动使缓存失效并触发重建，从而更精确地控制内容的新鲜度。
• 适用场景：列举按需 ISR 的典型用例，如不常更新但更新后需立即生效的内容，或渲染成本高（计算、时间、外部 API 费用）的频繁访问内容。

2. 项目配置
• 初始化 Astro 项目：使用命令行工具创建一个包含 Tailwind CSS 和 React 的 Astro 项目，并初始化 Git。
• 添加 Vercel 适配器：通过 astro add vercel 命令添加适配器，并在 astro.config.mjs 文件中配置 ISR 参数，包括设置 bypassToken（用于授权缓存失效的密钥）和 exclude（排除 API 路由不被缓存）。

3. 实现与验证
• 创建动态页面：在首页添加一个显示服务器渲染时间戳的组件，用于验证缓存效果。部署后，刷新页面时间戳不变，且响应头 x-vercel-cache 显示 HIT，证实页面来自缓存。
• 实现按需失效端点：创建一个受保护的 API 端点 (/api/invalidate)，该端点接收 POST 请求，内部向目标路由发送带有 x-prerender-revalidate 头（值为 bypassToken）的 HEAD 请求，以触发缓存失效和重建，并验证响应头确认操作成功。
• 测试：通过 curl 命令调用该 API 端点，成功使首页缓存失效，再次访问首页时看到新的时间戳，证明按需 ISR 生效。

author Shawn

Shawn's Blog

On-Demand ISR For Astro on Vercel | Shawn's Blog

Here's how to set on-demand incremental static regeneration for an Astro website when deploying to Vercel.

#优质博文 #CSS #前端
The Hidden Selectors of The HTML Element

AI 摘要：本文来自 Temani Afif 的 CSS 小贴士系列，介绍了除 html {} 与 :root {} 外，还能选中 <html> 元素的几种“隐藏”选择器，如嵌套选择器 &、:scope、:has()、:not() 等，并通过组合操作符展示了多种有趣写法。虽然这些技巧在实际开发中不一定实用，但它们揭示了 CSS Selector 机制的底层逻辑与灵活性，是一次颇具趣味性的语法探索。

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

1. 根元素的经典选择方式
• 介绍了我们熟知的两种方式：html {} 与 :root {}
• 提出问题：是否存在其他隐藏选择器可用于选中 <html> 元素

2. 嵌套选择器（Nesting Selector &）
• 在非嵌套上下文中，& 等效于 :scope
• 可直接用作选择 <html> 元素

3. :scope 选择器
• 当没有定义作用域根节点时，:scope 默认代表整个文档根，即 <html>
• 示例代码展示了如何直接使用 :scope { ... } 来作用于全页面样式

4. :has() 选择器的新奇用法
• <html> 是唯一同时包含 head 与 body 的元素，可利用结构特征进行反向匹配
• 示例：:has(head) 或 :has(body) 都能命中 <html>

5. :not() 与组合筛选
• <html> 是唯一没有父节点的元素，可利用 `:not(* *)`（排除有祖先的元素）进行匹配
• 加入子代组合符 > 可形成如 :not(* > *) 的结构，用“CSS 符号表情”形式趣味收尾

6. 组合选择器的实验与调侃
• 展示 :is() 、:where() 与多重 & 的奇怪组合写法（如 &&&&）
• 指出这些写法在逻辑上可行但缺乏实际用途，更多是对 CSS Selector 灵活性的探索

7. 结语与扩展阅读
• 作者认为这些“隐藏选择器”是有趣但不实用的实验
• 附带更多 CSS Tips，如 Direction-Aware CSS Shapes 与 Direction-Aware Arrow Shape using corner-shape，扩展了方向感知样式的应用视角

author Temani Afif

Css-Tip

The Hidden Selectors of The HTML Element

Discover alternative selectors for the html element beyond the classic `:root{}` and `html{}`