#碎碎念
在家里上班的好处是每天起床醒来都能看到桌上摆着妈咪带的早餐，有时候是两个茶叶蛋有时候是面包😭太暖心惹

cosine - 前端人の日常频道

#博客更新 #碎碎念 #折腾 #前端 究～极～花里胡哨！！ 圣诞节到了，想给博客加点节日氛围。最终实现了一套可开关的圣诞特效模块，包括雪花和彩灯以及圣诞配色方案～ 很赶很冲动，还没怎么仔细优化～ 注意看这个雪是双层的，内容容器夹在雪花中间，远景雪花在文章后面飘过，近景雪花在前面飘过，配合视差效果 雪花效果是从 Shadertoy 上的 Just snow 学来的！ 彩灯是参考 Toby J 的 CodePen 实现，调整为圣诞配色（红、绿、金） 我知道肯定会有人说花里胡哨所以我加了开关～～反正节日过了就下掉了～…

#博客更新 #碎碎念 #前端
简单让 AI 写了一下整体的实现～
为 Astro 博客添加可插拔的圣诞特效模块

cos

为 Astro 博客添加可插拔的圣诞特效模块 | 笔记 / 前端 | 余弦の博客

本文由 AI 辅助写作，作记录用 圣诞节到了，想给博客加点节日氛围。最终实现了一套可插拔的圣诞特效模块，包括： 3D 雪花飘落（React Three Fiber + GLSL 着色器） 悬挂彩灯装饰（CSS 动画） 头像圣诞帽（SVG） 圣诞配色方案（CSS 变量） 可拖拽圣诞球开关...

#优质博文 #AI #前端 #React #调试
How AI Coding Agents Hid a Timebomb in Our App

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

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

1. Bug 的出现与表现
• 应用程序崩溃：用户在使用应用时，浏览器会无故冻结并崩溃。
• 内存无限增长：后台一个无限递归的 React 组件树在内存中不断增长，最终耗尽内存。
• React 19 的 <Activity> 组件掩盖了问题：新引入的 <Activity> 组件在关闭状态下会以低优先级模式渲染隐藏的 UI，导致无限递归的组件树在后台缓慢构建，而前端页面保持响应，延迟了 Bug 的暴露时间。
2. 问题根源：AI 编程助手与被删除的注释
• Outlyne 的组件架构：页面组件包含头部（header）和底部（footer），它们渲染了自身的变体（variants）作为预览，这本身就是递归的。为了避免无限递归，预览组件设置了 readOnly={true} 属性。
• 重要的安全注释：作者曾添加注释警告，如果 readOnly 属性为 false 会导致无限递归。
• AI 编程助手的操作：在一次重构中，AI 编程助手删除了这个关键注释，可能是出于“清理”目的。
• readOnly 属性被移除：在后续的更新中，由于缺乏注释的上下文，AI 编程助手移除了 readOnly 属性，导致了无限递归的发生。
3. 艰难的调试过程
• 难以复现：Bug 不会立即崩溃，使得调查非常困难，应用在几分钟后才会崩溃。
• 虚假线索：Chrome 调试器显示问题出在 Motion 库中，作者花费数天时间调查，但发现 Motion 只是受害者。
• 关键突破：通过检查内存溢出时的调用栈，发现了与页脚编辑器相关的 layoutId，并最终通过移除 <Activity> 组件，使 Bug 立即暴露，确认了问题所在。
4. 经验教训与启示
• 注释与测试：注释是文档，而测试是约束。在 AI 辅助的代码库中，仅仅依靠注释不足以保证关键结构性约束。
• AI 辅助开发带来的挑战：AI 编程助手能够提高生产力，但它们也会无意中移除关键信息，这要求开发者重新思考“足够好”的代码标准。
• 重要的结构性约束需要测试：文章强调，任何可能导致应用崩溃或违反结构性不变性的地方，都应该编写测试来强制执行，而不是仅仅依靠注释。
• 示例测试代码：作者提供了一段简单的测试代码，说明如何用大约 20 行代码来断言 readOnly 属性的正确性，从而避免了整个 Bug。

author Andrew Patton

acusti.ca

How AI Coding Agents Hid a Timebomb in Our App | acusti.ca

#优质博文 #前端 #react #工程化
React Compiler 的静默失败 (以及如何修复它们)

AI 摘要：作者分享了在使用 React Compiler 过程中遇到的“静默失败”问题，即编译器在无法优化组件时不会报错，而是回退到标准 React 行为，这可能导致性能下降。为了解决这个问题，作者发现并利用了一个未文档化的 ESLint 规则 `react-hooks/todo`，通过将其设置为错误级别，可以在编译失败时中断构建过程。

author Andrew Patton

acusti.ca

React Compiler’s Silent Failures (And How to Fix Them) | acusti.ca

#优质博文 #CSS #设计系统 #前端
Exploring Multi-Brand Systems with Tokens and Composability

AI 摘要：文章深入探讨了如何利用代币（tokens）、组合（composition）和配置（configuration）来构建灵活且可扩展的多品牌设计系统。作者通过一个“卡片”组件的实例，详细演示了如何使用 CSS 自定义属性（Custom Properties）实现主题切换，如何通过插槽（slots）和局部组件（partials）实现内容的灵活定制，以及如何结合这些方法来创建高度适应不同品牌和用例的组件，最终达到减少代码重复、提高开发效率和保持系统一致性的目标。

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

1. 设计系统核心理念
• 系统灵活性与可扩展性：设计系统不仅要保证一致性，更要具备灵活性，以适应多品牌和多样化的使用场景。
• 三大核心要素：代币（tokens）、组合（composition）和配置（configuration）是实现组件灵活性的关键。

2. 基础卡片组件结构
• 组件需求：一个包含横幅、图片、标题、描述和按钮的简单卡片。
• 技术栈：示例使用 Vue 编写，但其原则适用于任何基于组件的设计系统，包括原生 Web Components。
• 初始代码实现：展示了卡片组件的模板、脚本和样式。

3. 使用代币（Tokens）支持多品牌/主题
• 基本修改：通过代币（变量）来支持不同品牌或主题的切换。
• CSS 自定义属性（Custom Properties）：文章以 CSS 自定义属性为例，但代币不仅限于 CSS，Design Tokens Community Group 提供了更全面的定义。
• 代码优化：将硬编码值转换为变量，提高代码可维护性和复用性。
• 主题切换实现：通过更改 CSS 变量或添加主题类来轻松切换卡片样式，无需修改组件结构。

4. 使用可组合插槽（Composable Slots）定制内容
• 解决内容多样性问题：当需要展示不同类型的内容（如列表而非描述）时，插槽提供了一种灵活的解决方案。
• 插槽（Slots）的引入：将组件中的特定区域定义为插槽，允许外部传入自定义内容。
• 示例：将描述区域替换为名为 card-details 的插槽，并展示如何传入不同的内容（如段落或列表）。
• 组织化实践：为了避免插槽内容过于随意，可以提供“预制”的子组件或局部组件（partials），作为推荐的插槽内容，以维护代码整洁和一致性。

5. 扩展配置与组合实现更深层次的定制
• 进阶应用：组合和配置不仅限于组件的某个特定区域，可以应用于更广泛的布局和样式。
• 可配置元素与可组合部分：区分通过属性（attributes）控制的可配置元素和通过插槽控制的可组合部分。
• 示例：将横幅位置设置为可配置属性，并将整个内容区域设为插槽，实现更自由的布局组合。
• 拆分局部组件：将复杂的组件拆分为更小的局部组件（如 CardMedia），提高复用性和可维护性。
• 高度适应性：通过灵活运用配置和组合，可以创建高度适应不同布局和内容需求的卡片组件。

6. 将原则付诸实践
• 核心原则总结：再次强调代币、组合和配置在构建灵活设计系统中的重要作用。
• 代币（Tokens）：集中管理设计决策，实现品牌快速切换。
• 组合（Composition）：通过插槽和局部组件提供结构化的内容扩展能力。
• 配置（Configuration）：通过属性暴露常用选项，确保组件适应性。
• 实践效益：减少重复组件、加速交付、保持系统一致性，使设计系统更具弹性。

author Adam Sedwick

Frontend Masters

Exploring Multi-Brand Systems with Tokens and Composability

Design systems aren’t just about keeping everything looking the same; they’re about making things flexible enough to handle whatever gets thrown at them.

#优质博文 #前端 #性能优化 #调试 #新动态
Chrome DevTools 144 版本可以让你单独对每个网络请求限速。
Throttle individual network requests

AI 摘要：Chrome DevTools 在 144 版本中引入了“Individual Request Throttling”功能，允许开发者为单个网络请求设置独立的限速（throttling）或阻断（blocking）条件。这一改进使得在不影响整个页面加载速度的情况下，测试特定资源（如第三方 API 或大型图片）在慢速网络条件下的表现成为可能。新功能整合在“Request conditions”面板中，用户可以自定义限速模式和 URL 匹配规则，并清晰地在“Network”和“Performance”面板中识别被限速或阻断的请求，从而更精准高效地进行前端性能调试。

Chrome for Developers

Throttle individual network requests  |  Blog  |  Chrome for Developers

Use the Request conditions tab to block specific URLs or apply custom network throttling profiles to individual resources.

#优质博文 #CSS #JavaScript #前端 #视图转换 #course
Different Page Transitions For Different Circumstances

AI 摘要：文章探讨了如何利用 Web API 中的 View Transitions （视图过渡）API 为多页应用程序（MPA）创建差异化的页面切换动画。作者通过 JavaScript 事件监听 pageswap 和 pagereveal，结合 e.viewTransition.types.add() 方法，实现根据特定 URL 条件设置自定义视图过渡类型。接着，文章演示了如何在 CSS 中使用 :active-view-transition-type() 伪类，针对不同的视图过渡类型应用不同的动画效果，从而覆盖默认过渡动画。最后，作者分享了一些关于这种 JS 与 CSS 协同控制的见解，并提及了相关学习资源和浏览器兼容性信息。

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

1. View Transitions API 基础
• DOM 事件监听: 介绍 pageswap 和 pagereveal 这两个事件，它们在页面卸载和加载时触发，并提供 e.viewTransition 对象用于自定义视图过渡。
• 条件设置过渡类型: 讲解如何通过 JavaScript 在 pagereveal 事件中，根据 document.location.pathname 等条件，使用 e.viewTransition.types.add() 方法为当前页面设置一个自定义的视图过渡类型。

2. 默认页面过渡动画配置
• CSS 定义默认动画: 演示如何使用 ::view-transition-old(main) 和 ::view-transition-new(main) 伪元素，结合 @keyframes 定义网站的默认页面切换动画效果，如滑动出入。
• 元素命名: 强调需要为要过渡的元素（如 <main> 内容区）设置 view-transition-name 属性，以便在 CSS 中精准控制。

3. 定制特定页面的过渡动画
• CSS 覆盖默认动画: 展示如何利用 :active-view-transition-type() CSS 伪类，根据在 JavaScript 中设置的自定义视图过渡类型，为特定页面定义一套专属的动画，从而覆盖默认的动画效果。
• 动画优先级: 解释自定义类型动画如何通过更高的 CSS 特异性（specificity）来覆盖默认动画。

4. 学习资源与浏览器支持
• 参考资料: 推荐 Bramus 的《Cross-document view transitions for multi-page applications》作为进一步学习的优秀资源。
• CSS 类型声明: 提及 view-transition-types CSS 属性，但作者对其具体用途表示疑问，推测可能用于限制允许的过渡类型。
• 浏览器兼容性: 指出 JavaScript ViewTransitionTypeSet 和 CSS :active-view-transition-type() 在 Chrome 和 Safari 中得到支持，Firefox 则需开启 flag（标志）。

author Chris Coyier

Frontend Masters

Different Page Transitions For Different Circumstances

I feel like common usage for multi-page view transitions is to set up a general system for them that applies generally to all pages and elements, then let it ride.

#优质博文 #React #TypeScript #前端 #course
How to type React children correctly in TypeScript

AI 摘要：本文深入探讨了在 React 应用中如何正确使用 TypeScript 定义 children prop 的类型。文章首先介绍了 children prop 的基本用法和支持的各种内容类型，并强调了避免手动定义复杂 children 类型的必要性。随后，详细讲解了 ReactNode 超集类型、PropsWithChildren 和 React.ComponentProps 等实用工具类型，以及 ReactElement 和 JSX.Element 等具体类型的使用场景。文章还特别提到了 React 18/19 版本中关于 React.FC 和 children 类型定义的最新变化，建议显式定义 children prop，并展示了如何安全地处理 refs 和构建包装组件（wrapper components）。通过学习这些方法，开发者可以更有效地在 TypeScript 中管理 React 组件的 children prop，提升代码的类型安全性和可维护性。

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

1. children prop 基础
• JSX 中的 children ：解释 children prop 是如何接收并操作 JSX 表达式中标签之间的内容的。
• 支持的 children 类型：列举了 children prop 可以接受的常见内容类型，包括字符串（Strings）、JSX 元素、JavaScript 表达式（JavaScript expressions）和函数（Functions）。
• 避免手动定义复杂 children 类型：指出手动为 children 定义类型容易遗漏，推荐使用官方支持的类型。

2. children prop 的类型定义方法
• ReactNode 超集类型：介绍 ReactNode 是包含 React 所有可渲染值的超集类型，是定义 children 类型时的首选，并详细解释了 ReactNode 的内部定义。
• PropsWithChildren 类型：讲解 PropsWithChildren 如何方便地为现有 props 添加 children prop，避免手动定义。
• React.ComponentProps 类型：说明 ComponentProps 如何提取现有组件的 props 类型，尤其适用于构建可复用组件和 UI 库。
• React.ReactElement 类型：介绍 ReactElement 作为 ReactNode 的子集，在特定场景下如何用于定义 children prop。
• JSX.Element 类型：说明 JSX.Element 如何作为 children prop 的类型，并指出它只代表单个 React 元素且不包含假值。
• 类组件的 Component 类型：演示在类组件中如何使用 React.Component 定义 children prop，并说明 children 默认是可选的。

3. React 18/19 中 children prop 类型定义的最新变化
• 不再推荐使用 React.FC / FunctionComponent ：解释了 React.FC 因不再自动包含 children prop 而不再被推荐，并倡导显式定义 children。
• 在 TypeScript 中将组件作为 props 传递：展示了如何在不依赖 React.FC 的情况下，安全地将组件作为 props 传递并保持完整的类型安全。
• React 19 中 Refs 和 forwardRef ：比较了 React 18 及更早版本与 React 19 中处理 refs 和 children prop 时的类型定义方式的变化。

4. TypeScript 中的包装组件（Wrapper Components）
• 包装组件在类型安全方面的优势：通过一个待办事项应用示例，展示了包装组件如何通过定义接口来增强类型安全，并在编译时捕获类型错误。
• 处理复杂数据结构：说明 TypeScript 如何确保在组件间传递复杂数据结构时，所有必需属性都存在且类型正确。

author Ohans Emmanuel

LogRocket Blog

How to type React children correctly in TypeScript - LogRocket Blog

Learn best practices for typing React children in TypeScript, including ReactNode, PropsWithChildren, ComponentProps, and why React.FC is no longer recommended.

#Newsletter #前端 #周刊更新
周刊第 20 期！
这周东西也好多，写死我了～

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

然后是博客这边，这周将 Fumadocs 里我很喜欢的移动端 header 目录搬到我的博客 astro-koharu 了，我很喜欢～ 然后为图片加上了 LQIP，写了篇博客。

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

本期周刊记录了赴长沙参加 FEDAY 2025 的见闻与个人博客更新：移植 Fumadocs 风格的移动端目录、为图片加入 LQIP 并显著提升性能；前端动态包括 shadcn 3.6 推出可定制组件库、Storybook v7+ 构建或泄露 .env 的安全公告、TanStack Start 增加 Vue 支持、Chrome DevTools 144 支持单请求限速；技巧分享用 SVG vectorEffect 修复虚线缩放问题；精选多篇 React/CSS/WebGPU/GSAP 优质内容与 CodePen 作品。

cos

FE Bits Vol.20 | 博客更新与 FEDAY 见闻，Shadcn Create 发布 | 周刊 | 余弦の博客

本期周刊记录了赴长沙参加 FEDAY 2025 的见闻与个人博客更新：移植 Fumadocs 风格的移动端目录、为图片加入 LQIP 并显著提升性能；前端动态包括 shadcn 3.6 推出可定制组件库、Storybook v7+ 构建或泄露 .env 的安全公告、TanStack Start 增加 Vue 支持、Chrome DevTools 144 支持单请求限速；技巧分享用 SVG vectorEffect 修复虚线缩放问题；精选多篇 React/CSS/WebGPU/GSAP 优质内容与 CodePen…

#优质博文 #安全 #Storybook #前端
Security advisory
又一个 CVE-2025-68429 7.3/10， Storybook v7+ 版本构建时可能会不小心把 .env 打包进去。

AI 摘要：Storybook 团队发布安全公告，披露 Storybook 在特定条件下，可能将 .env 文件中的敏感环境变量意外打包到构建产物中，导致这些秘密信息在发布到网络后泄露。受影响的项目需满足使用 Storybook 7.0.0 及以上版本、在构建时存在包含敏感信息的 .env 文件，并使用特定 process.env 代码模式。官方建议所有受影响用户立即审计并轮换密钥，并将 Storybook 升级至已打补丁的版本，同时调整环境变量的引用方式。部分流行的 Storybook 插件可能触发此漏洞，但漏洞本身存在于 Storybook 核心。

Storybook Blog

Security advisory

Impacted versions 7–10. Patches available now.

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

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

Raycast

Raycast Store: CSS Tricks

Search on CSS Tricks

#优质博文 #CSS #React #RSC #前端 #tools
工具：https://rscexplorer.dev/
开源在：https://github.com/gaearon/rscexplorer
文章：Introducing RSC Explorer

AI 摘要：本文介绍了 Dan Abramov 发布的新工具 RSC Explorer，旨在帮助开发者直观理解 React Server Components (RSC) 的底层工作原理。由于最近 React Server Components 披露了一个严重的安全漏洞，RSC 协议引起了广泛关注。RSC Explorer 是一个开源的单页应用，通过模拟 RSC 协议的读写过程，展示了数据流、代码传输、流式渲染、服务器操作以及无框架路由刷新等核心概念，让开发者能够“所见即所得”地学习 RSC。

author Dan Abramov

GitHub

GitHub - gaearon/rscexplorer: A tool for people curious about the React Server Components protocol

A tool for people curious about the React Server Components protocol - gaearon/rscexplorer

#优质博文 #前端 #CSS #新特性
State, Logic, And Native Power: CSS Wrapped 2025 — Smashing Magazine

AI 摘要：本文深入解读了 Chrome 团队发布的“CSS Wrapped 2025”年度总结报告，重点介绍了 CSS 在逻辑处理、状态管理和复杂交互方面的新进展。文章详细阐述了可定制的 <select> 元素、纯 CSS 实现的轮播图（Carousel）以及滚动状态查询等功能，并探讨了 CSS 中引入 if() 语句、@function 函数和 sibling-index()/sibling-count() 等逻辑处理工具，这些新特性将大大提升 CSS 的开发体验和应用能力。作者还展望了锚定容器查询（Anchored Container Queries）、嵌套视图过渡组（Nested View Transition Groups）以及文本框修剪（Text Box Trim）等未来特性，强调 CSS 正从单纯的样式语言向构建动态、强大应用的原生工具集转变，开启了一个激动人心的前端新时代。

author Brecht De Ruyte

Smashing Magazine

State, Logic, And Native Power: CSS Wrapped 2025 — Smashing Magazine

CSS Wrapped 2025 is out! We’re entering a world where CSS can increasingly handle logic, state, and complex interactions once reserved for JavaScript. Here is an unpacking of the standout highlights and how they connect to the bigger evolution of modern CSS.