呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
联系频道主：@cosine_yu
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
联系频道主：@cosine_yu
好喜欢！
React Tilt Button - 3D Tactile React Button Component：一个具备 3D 触感、支持倾斜和深度效果的 React 交互按钮组件。它利用 CSS 的 3D 变换（3D Transforms）技术，为传统的按钮元素注入了物理深度（Depth）和动态倾斜（Tilt）效果。组件不仅内置了从复古游戏（Arcade）到现代金属（Steel）等多种预设主题，还开放了高度细粒度的自定义参数，让开发者可以轻松调整按钮的海拔高度（Elevation）、圆角（Radius）及光泽感（Glare），从而打造出极具表现力的用户界面。
GitHub 地址 https://github.com/archisvaze/react-tilt-button
#优质博文 #CSS #Chrome #无障碍 #新特性
Try text scaling support in Chrome Canary：介绍 Chrome Canary 中新增的
[以下是方便搜索索引的大纲 (AI 生成)，请读原文]
author Josh Tumath
Try text scaling support in Chrome Canary：介绍 Chrome Canary 中新增的
<meta name="text-scale"> 标签，该功能允许网页响应移动端操作系统的全局字体大小设置。[以下是方便搜索索引的大纲 (AI 生成)，请读原文]
1. 特性概览与背景
• Chrome Canary 现已支持通过 <meta name="text-scale" content="scale" /> 标签来响应系统级的文本缩放。
• 解决了 iOS 和 Android 用户在系统设置中调大字体后，网页内容依然保持原样的问题。
• 该提案已正式进入 CSS Fonts 5 规范，旨在提升移动端网页的无障碍 (Accessibility) 体验。
2. 为什么需要手动开启 (Opt-in)
• 自动强制缩放会导致大量现有网站布局崩溃（例如 LinkedIn 在强制缩放下的导航栏重叠问题）。
• 遵循 WCAG 2.2 标准中关于“调整文本大小 (Resize Text)”和“屏幕回流 (Reflow)”的指南。
• 类似于早期的移动端视口 (Viewport) 标签，需要开发者确认网页能够处理非标准的文字比例。
3. 开发者适配指南
• 技巧 1：不要在 CSS 中覆盖初始字号 (Initial font size)。避免在 :root 级硬编码 px 数值，否则缩放将失效。
• 技巧 2：仅对内容（文字、图标、图像）使用字体相对单位 (Font-relative units)，如 em 或 rem。
• 技巧 3：布局间距（如 padding、margin 或 gap）建议使用固定单位（如 px），以为放大后的文字腾出更多回流空间。
• 技巧 4：在 320px 宽度且 200% 缩放的极端条件下进行测试，确保网站在窄屏手机上依然可用。
4. 未来挑战与展望
• 探讨大标题 (Heading) 与正文 (Body) 缩放比例的差异化处理，避免标题过大导致排版异常。
• 期待其他主流浏览器在未来跟进支持该标准。
author Josh Tumath
#优质博文 #AI #前端
Vercel 的最新研究表明，在针对 Next.js 16 开发的最新评估中，他们发现将 8KB 的压缩后的文档索引塞进 AGENTS.md 文件比使用 skills 效果更好，因为 skills 无法可靠地触发。
原文如下，还挺符合直觉的。
author Jude Gao Software Engineer, Next.js
Vercel 的最新研究表明，在针对 Next.js 16 开发的最新评估中，他们发现将 8KB 的压缩后的文档索引塞进 AGENTS.md 文件比使用 skills 效果更好，因为 skills 无法可靠地触发。
原文如下，还挺符合直觉的。
我们原本以为技能测试能够解决编码代理学习框架特定知识的问题。但在构建了专注于 Next.js 16 API 的评估系统后，我们发现了一些意想不到的情况。
直接嵌入 AGENTS.md 中的 8KB 压缩文档索引实现了 100% 的通过率，而即使有明确的指令告知代理使用技能，技能的最高通过率也仅为 79%。如果没有这些指令，技能的表现甚至不如完全没有文档。
AI 编码代理依赖于会过时的训练数据。Next.js 16 引入了诸如 'use cache' 、 connection() 和 forbidden() 等 API，而这些 API 并不包含在当前的模型训练数据中。当代理不了解这些 API 时，它们会生成错误的代码或回退到旧的模式。
反过来也可能出现这种情况，即您运行的是较旧的 Next.js 版本，而模型却建议使用项目中尚不存在的较新 API。我们希望通过让代理访问版本匹配的文档来解决这个问题。
author Jude Gao Software Engineer, Next.js
Vercel
AGENTS.md outperforms skills in our agent evals - Vercel
A compressed 8KB docs index in AGENTS.md achieved 100% on Next.js 16 API evals. Skills maxed at 79%. Here's what we learned and how to set it up.
#优质博文 #CSS #前端 #层叠上下文 #course
Unstacking CSS Stacking Contexts — Smashing Magazine
非常好的好文章！条理清晰，深入剖析 CSS 层叠上下文 (Stacking Contexts) 的工作原理，解释为什么 z-index 会失效，并提供实用的调试技巧与解决方案。
被安利了 Better CSS Stacking Contexts 这个 vscode 插件
[以下是方便搜索索引的大纲 (AI 生成)，请读原文]
author Gabriel
Unstacking CSS Stacking Contexts — Smashing Magazine
非常好的好文章！条理清晰，深入剖析 CSS 层叠上下文 (Stacking Contexts) 的工作原理，解释为什么 z-index 会失效，并提供实用的调试技巧与解决方案。
被安利了 Better CSS Stacking Contexts 这个 vscode 插件
AI 摘要：这篇文章详细介绍了 CSS 中层叠上下文 (Stacking Contexts) 的核心逻辑，解决了开发者经常遇到的 “为什么设置了 z-index: 9999 元素还是被遮挡” 的困惑。作者将层叠上下文比作“文件夹”，解释了一旦元素被困在父级文件夹中，其 z-index 就只能在内部生效。文章分析了 opacity、transform 等属性如何意外触发层叠上下文，并提供了针对模态框 (Modal)、下拉菜单 (Dropdown) 和工具提示 (Tooltip) 等常见场景的调试清单与修复方案（如 HTML 重构、Portal 传送门、以及 isolation: isolate 属性的应用）。
[以下是方便搜索索引的大纲 (AI 生成)，请读原文]
1. 层叠上下文的基础概念 (Understanding Stacking Contexts)
• 文件夹比喻：网页像桌面，HTML 元素像纸张。层叠上下文就像“文件夹”，文件夹内的纸张（子元素）无论 z-index 多高，都无法超越文件夹本身的层级。
• 黄金法则：子元素的 z-index 仅在当前文件夹内部有效。浏览器首先对文件夹（父级上下文）进行排序，然后再排序其内部的纸张。
• 触发因素：除了定位属性外，opacity (透明度)、transform (变换)、filter (滤镜) 和 contain (包含) 等属性也会因为浏览器性能优化（GPU 加速）而自动创建新的层叠上下文。
2. 常见问题场景分析 (The “Unstacking” Problem)
• 被困的模态框 (The Trapped Modal)：当模态框的父容器（如 Header）层叠顺序低于主体内容时，模态框即便设置极高 z-index 也会被遮挡。
• 没顶的下拉菜单 (The Submerged Dropdown)：导航栏与主体内容的父子层级关系导致菜单显示在下方内容之后。
• 被裁剪的工具提示 (The Clipped Tooltip)：overflow: hidden 会无视 z-index 直接裁剪超出边界的内容，这是另一种特殊的层叠陷阱。
3. 调试与排查工具 (Identifying The Trapped Layer)
• 调试清单：从问题元素开始，逐级向上检查 DOM 树，寻找可能触发层叠上下文的 CSS 属性。
• 高级工具：利用浏览器（如 Edge/Firefox）的 3D 视图查看层级；使用 “CSS Stacking Context Inspector” 插件或 VS Code 插件进行可视化排查。
4. 解决方案与最佳实践 (Unstacking And Regaining Control)
• 重构 HTML 结构：将模态框等组件移出嵌套容器，直接放在 <body> 下，这是最彻底的修复方式。
• 调整父级上下文：修改父容器的 z-index 或移除不必要的上下文触发属性。
• 传送门 (Portals)：在 React/Vue 框架中使用 Portal 技术将组件逻辑上保留在原位，但在 DOM 上渲染到顶层。
• 无副作用的隔离 (isolation: isolate)：利用 isolation 属性显式创建层叠上下文，有效解决负 z-index 导致的背景遮挡问题，且不会像其他属性那样产生布局副作用。
author Gabriel
Smashing Magazine
Unstacking CSS Stacking Contexts — Smashing Magazine
In CSS, we can create “stacking contexts” where elements are visually placed one on top of the next in a three-dimensional sense that creates the perception of depth. Stacking contexts are incredibly useful, but they’re also widely misunderstood and often…
#优质博文 #前端 #AI #Coding #编程技巧 #ClaudeCode
如何在保持“负责任”的前提下，将 AI 编码工具深度集成到日常开发工作流中。
Practical Use Of AI Coding Tools For The Responsible Developer
是个比较贴合大部分正常工程师结合 AI 开发的文章。
[以下是方便搜索索引的大纲 (AI 生成)，请读原文]
author Stefan Kaltenegger
如何在保持“负责任”的前提下，将 AI 编码工具深度集成到日常开发工作流中。
Practical Use Of AI Coding Tools For The Responsible Developer
是个比较贴合大部分正常工程师结合 AI 开发的文章。
[以下是方便搜索索引的大纲 (AI 生成)，请读原文]
1. 负责任的 AI 开发原则
• 定义责任范围： 负责任的开发者必须确保代码质量，不给同事增加评审负担，并遵守公司的安全与隐私政策。
• 安全与验证： 严禁向 AI 泄露密钥 (Secrets) 或敏感客户数据 (PII)；始终将 AI 生成的代码视为“陌生人的代码”，必须经过严格测试。
• 工具准入： 使用前需确保工具已获得公司批准，妥善处理专有代码的合规性。
2. 八大实战场景
• 理解陌生的代码库： 通过 AI 代理快速获取架构概览（入口点、路由、鉴权等），并让 AI 推荐阅读文件的优先级。
• 处理依赖升级的破坏性变更： 在升级 npm 包（如从 plotly.js v2 升至 v3）遇到问题时，利用 AI 快速定位 API 变更并寻找替代方案。
• 跨文件安全复用重构： 在一个文件完成重构后，利用 AI 将相同的重构逻辑安全地推广到其他具有相同模式的文件中。
• 在陌生技术领域实现功能： 借力 AI 在短时间内完成不熟悉领域的任务，例如使用 GLSL 编写复杂的着色器动画。
• 自动化编写测试： 将枯燥的单元测试和集成测试编写工作“外包”给 AI，并要求其涵盖正常路径与边界情况。
• 开发内部分析工具： 利用 AI 快速编写脚本，处理诸如代码重复率分析、数据导出至 Excel 等临时性的辅助任务。
• 现代化改造陈旧代码： 辅助进行重大的架构迁移，例如将十年前的构建流程（如 requireJS）迁移至现代的 Vite 栈。
• 总结与起草： 自动生成 Git 提交信息摘要或起草代码变更说明。
3. 优化建议与最佳实践
• 精细化提示词工程： 提示词越具体，输出质量越高。推荐在 Prompt 结尾增加“开始前你有什么问题要问我吗？”，让 AI 补充缺失的上下文。
• 结合版本控制： 采用小步快跑的提交方式，以便在 AI 生成错误代码或过度修改时能快速回滚。
• 坚持彻底的代码评审： AI 可能会产生幻觉 (Hallucination) 或生成“代码垃圾 (Slop)”。开发者必须逐行审查 AI 输出，保持最后一道质量关卡。
4. 行业反思与挑战
• 警惕技能萎缩： 担心新人开发者过度依赖 AI 而跳过了“解决问题的磨砺过程”，导致基础能力不足。
• AI 非万能钥匙： 卓越的开发能力和解决问题的核心素质永远不会过时，AI 应定位为辅助开发者进行高层级思考的盟友。
author Stefan Kaltenegger
Smashing Magazine
Practical Use Of AI Coding Tools For The Responsible Developer — Smashing Magazine
AI coding tools like agents can be valuable allies in everyday development work. They help handle time-consuming grunt work, guide you through large legacy codebases, and offer low-risk ways to implement features in previously unfamiliar programming languages.…
#优质博文 #AI #CLI
pi0/skillman
感觉不错诶～看到 antfu star 了这个，好奇的看了看，skillman 比较像 AI Agent 界的 npm，通过
pi0/skillman
感觉不错诶～看到 antfu star 了这个，好奇的看了看，skillman 比较像 AI Agent 界的 npm，通过
skills.json 声明式管理技能依赖，底层给予 Vercel 的那个 skills CLI，让你能像执行 npm install 一样一键安装技能，从而避免将庞大的技能源码推送到 Git 仓库。AI 摘要：skillman 是一个基于 Vercel Labs skills 构建的轻量级命令行界面（CLI）工具，旨在为 AI 智能体提供类似软件包管理器的体验。通过引入 skills.json 配置文件，它允许开发者锁定项目所需的技能版本与来源，实现技能的自动化安装与跨环境同步，支持包括 Claude Code 在内的多种智能体终端。
GitHub
GitHub - pi0/skillman: 🤹 Manage project skills and lock them in skills.json
🤹 Manage project skills and lock them in skills.json - pi0/skillman
#优质博文 #JavaScript #DOM #新特性
告别insertBefore，使用moveBefore移动DOM元素
介绍了原生 DOM 新 API moveBefore 的用法、优势及其在 Web Components 中的应用，并对比了传统 insertBefore 的局限性。
author zhangxinxu
告别insertBefore，使用moveBefore移动DOM元素
介绍了原生 DOM 新 API moveBefore 的用法、优势及其在 Web Components 中的应用，并对比了传统 insertBefore 的局限性。
AI 摘要：本文详细介绍了原生 DOM 的一项重要更新 moveBefore 方法。与传统的 insertBefore 不同，moveBefore 能够直接移动节点而无需经历“销毁与重建”的过程，从而完美保留元素的 CSS 动画、焦点状态、<iframe> 加载状态及 Web Components 的生命周期稳定性。作者提供了该方法的实践指南、Polyfill (兼容性补救) 方案。
author zhangxinxu
#优质博文 #React #前端 #性能优化
React Compiler: An Introduction, Pros, Cons & When to Use It | DebugBear
本文深入探讨了 React Compiler（原名 React Forget）的工作原理、优势与局限，以及如何在项目中实际应用这一自动记忆化（Memoization）工具。
[以下是方便搜索索引的大纲 (AI 生成)，请读原文]
author Anna Monus
React Compiler: An Introduction, Pros, Cons & When to Use It | DebugBear
本文深入探讨了 React Compiler（原名 React Forget）的工作原理、优势与局限，以及如何在项目中实际应用这一自动记忆化（Memoization）工具。
AI 摘要：React Compiler 是 Meta 推出的构建时（Build-time）优化工具，旨在通过自动执行记忆化（Memoization）来减少不必要的组件重渲染（Re-render），从而提升应用性能。它能将开发者从繁琐的手动 useMemo 和 useCallback 中解放出来，使代码更简洁。虽然它已在 Meta 等大厂生产环境验证了显著的性能提升，但在处理第三方库兼容性、旧代码重构以及“黑盒”调试方面仍面临挑战。
[以下是方便搜索索引的大纲 (AI 生成)，请读原文]
1. 技术概览与入门指南
• React Compiler 是 Meta 开发的构建时（Build-time）工具，自动为代码添加记忆化逻辑，目标是消除手动管理缓存的负担。
• 经过多年开发，该工具于 2025 年 10 月正式发布稳定版，现已良好支持 Vite、Next.js 和 Rsbuild 等主流构建工具。
• 使用前提是代码必须遵循“React 规则”（Rules of React），建议配合 eslint-plugin-react-hooks 插件进行静态代码分析。
• 开发者可以通过 React Developer Tools（v5.0+）中的 “Memo ✨” 徽章验证组件是否被成功优化。
2. 核心机制与工作原理
• 编译器并不直接使用 React.memo 或 useMemo 等公开 API，而是在编译阶段插入更细粒度（Granular）的缓存逻辑。
• 它可以独立缓存每个 JSX 元素（如 <h2>、<button> 等）和计算过程，而非仅对整个组件进行记忆化。
• 这种细粒度的处理方式确保只有当特定的输入（Props 或 State）改变时，相关的 UI 片段才会重新生成。
3. 核心优势与生产环境表现
• 提升代码质量：减少了为了性能优化而添加的模板代码，使逻辑更直接、更具可读性。
• 避免人为错误：消除了手动维护依赖项数组（Dependency Arrays）时容易产生的闭包陷阱或引用失效问题。
• 实战成效：Meta 在 Instagram 应用中实现了全站 3% 的性能提升；Sanity Studio 报告渲染性能提升了 20-30%；Wakelet 的交互到下次绘制（Interaction to Next Paint, INP）指标提升了近 30%。
4. 局限性与潜在挑战
• 徽章误导性：DevTools 的 “Memo ✨” 徽章仅代表编译器处理过该组件，并不意味着优化一定成功（例如若 Props 存在不稳定的内联引用，组件仍会重渲染）。
• 第三方库兼容性：某些库（如 TanStack Query 或 MUI）的 Hook 会在每次渲染时返回新对象，这会打破编译器的记忆化链，此时仍需手动干预。
• 旧代码重构压力：对于存在大量技术债或违反 React 规则的旧项目，引入编译器可能需要进行大规模的重构。
• 调试难度增加：由于优化逻辑是在构建时生成的“黑盒”逻辑，当出现非预期的重渲染时，排查问题的直观性不如手动代码。
5. 适用场景与性能监控
• 最适合新项目或遵循现代 React 实践、依赖库较少的干净代码库。
• 在启用编译器后，大多数 React.memo 变得冗余，可以安全移除，但对于需要显式控制的场景，仍可保留 useMemo。
• 建议使用真实用户监控（Real User Monitoring, RUM）工具来追踪性能指标（如 INP）在生产环境中的实际改观。
author Anna Monus
Debugbear
React Compiler: An Introduction, Pros, Cons & When to Use It | DebugBear
React Compiler helps optimize React performance by automatically memoizing your app, which can improve your Interaction to Next Paint (INP) scores, eliminate unnecessary re-renders, and make your code cleaner.
#优质博文 #CSS #前端 #新特性
介绍 Chrome 144 新推出的 ::search-text 伪元素，以及如何利用 CSS 相对颜色语法统一美化各种文本高亮样式。
How to Style the New ::search-text and Other Highlight-y Pseudo-Elements | CSS-Tricks
[以下是方便搜索索引的大纲(AI 生成)，请读原文]
author Daniel Schwarz
介绍 Chrome 144 新推出的 ::search-text 伪元素，以及如何利用 CSS 相对颜色语法统一美化各种文本高亮样式。
How to Style the New ::search-text and Other Highlight-y Pseudo-Elements | CSS-Tricks
AI 摘要：这篇文章探讨了 Chrome 144 新引入的 ::search-text 伪元素，它允许开发者自定义浏览器“页面内查找”（Ctrl+F）匹配到的文本样式。作者对比了 ::selection、::target-text 等多种高亮相关伪元素的功能差异，并重点分享了如何利用 CSS 相对颜色语法（Relative Color Syntax）构建一套自动适应背景、高对比度且能区分不同高亮类型的动态样式方案，旨在提升 Web 内容的可访问性与用户体验。
[以下是方便搜索索引的大纲(AI 生成)，请读原文]
1. 核心特性：认识 ::search-text
• ::search-text 专门用于选中页面内查找（find-in-page）匹配到的文本。
• 默认情况下，Chrome 中匹配项为黄色，当前目标项（::search-text:current）为橙色。
• 该伪元素的推出让开发者能够突破浏览器默认 UI，自定义搜索反馈的视觉呈现。
2. 高亮伪元素全集概览
• ::search-text：页面查找匹配文本，包含 :current 状态。
• ::target-text：URL 文本片段（Text fragments）高亮，常用于从搜索引擎跳转后的自动定位。
• ::selection：用户通过光标手动选中的文本。
• ::highlight()：通过 JavaScript 的 Custom Highlight API 定义的自定义高亮。
• ::spelling-error 与 ::grammar-error：主要用于可编辑内容中的拼写和语法错误标记。
3. 设计思路：可访问性与动态样式
• 为什么要自定义：解决默认颜色在特定背景下对比度不足（Color contrast）的问题，并增强视觉强调。
• 技术限制：高亮伪元素支持的 CSS 属性有限，例如 background-clip 和 backdrop-filter 通常无法使用。
• 相对颜色语法（Relative color syntax）：利用 rgb(from var(--bg) calc(255 - r) ...) 实现自动颜色反转，确保高亮色始终与背景色形成强烈对比。
4. 进阶实战：区分重叠的高亮状态
• 视觉区分：当用户在搜索结果中又手动选中了文字，需要确保不同类型的高亮（如 ::selection 和 ::search-text）能被同时辨识。
• 差异化策略：通过反转不同的 RGB 通道（如只反转 R 和 G，或只反转 B）来赋予每种伪元素独特的色调。
• 透明度处理：为非当前目标的高亮添加 alpha 透明度，使它们在相互叠加时产生融合效果，方便用户识别每个高亮的起止位置。
• 兼容性与未来：提及了 contrast-color() 函数在 CSS Color Module Level 5 中的潜力，作为未来更简便的替代方案。
author Daniel Schwarz
CSS-Tricks
How to Style the New ::search-text and Other Highlight-y Pseudo-Elements | CSS-Tricks
Chrome 144 recently shipped ::search-text, which is now one of several highlight-related pseudo-elements. This one selects find-in-page text, which is the text that gets highlighted when you do a Ctrl/Command + F-type search for something on a page and matches…
#优质博文 #CSS #响应式设计 #设计 #前端
好文。在多设备、响应式和动态内容的现代 Web 环境下，为何传统的“像素级完美（Pixel Perfect）”观念已不再适用，并提倡向“设计意图（Design Intent）”转变。
Rethinking “Pixel Perfect” Web Design — Smashing Magazine
author Amit Sheen
好文。在多设备、响应式和动态内容的现代 Web 环境下，为何传统的“像素级完美（Pixel Perfect）”观念已不再适用，并提倡向“设计意图（Design Intent）”转变。
Rethinking “Pixel Perfect” Web Design — Smashing Magazine
AI 摘要：随着 Web 技术的飞速发展，传统的“像素级完美”这一源于印刷时代的理念已成为开发的阻碍。本文指出，由于屏幕尺寸的多样性、内容的动态变化以及对无障碍性的要求，追求绝对的像素匹配会导致代码臃肿和系统脆弱。作者 Amit Sheen 建议开发者与设计师应转向关注“设计意图（Design Intent）”，利用设计令牌（Design Tokens）、流体布局和现代 CSS 特性，构建更具弹性和逻辑性的 Web 体验，而非死磕静态图像中的绝对坐标。
author Amit Sheen
Smashing Magazine
Rethinking “Pixel Perfect” Web Design — Smashing Magazine
Amit Sheen takes a hard look at the “Pixel Perfect” legacy concept, explaining why it’s failing us and redefining what “perfection” actually looks like in a multi-device, fluid world.
#优质博文 #CSS #SVG #前端 #动画 #course
How to animate SVG with CSS: Tutorial with examples
很详细的 svg 动画教程。
How to animate SVG with CSS: Tutorial with examples
很详细的 svg 动画教程。
AI 摘要：文章深入探讨了使用 CSS 动画化 SVG 的基础知识与进阶技巧。作者 Hope Armstrong 首先解释了 SVG 的优势及多种嵌入方式，指出内联（Inline）方式是实现 CSS 控制的最佳选择。随后展示了如何通过 transition 和 keyframes 属性操作 SVG 特有的属性（如 fill、stroke 等），并重点解析了路径绘制动画（Line drawing animation）的实现原理。最后，文章强调了在制作动画时需兼顾无障碍访问（Accessibility）以及选择合适工具的重要性。
LogRocket Blog
How to animate SVG with CSS: Tutorial with examples - LogRocket Blog
Animate SVGs with pure CSS: hamburger toggles, spinners, line-draw effects, and new scroll-driven animations, plus tooling tips and fallbacks.
#优质博文 #Node #后端 #工程化
Dynamic Configuration in Node.js: Beyond Environment Variables
Node.js 应用如何从传统的静态环境变量转向动态配置，以实现无需重新部署即可实时调整系统行为。
author Dmitry Tilyupo
Dynamic Configuration in Node.js: Beyond Environment Variables
Node.js 应用如何从传统的静态环境变量转向动态配置，以实现无需重新部署即可实时调整系统行为。
AI 摘要：文章深入分析了在 Node.js 中使用静态环境变量的局限性，特别是在需要快速响应生产环境变化（如调整频率限制、切换特性开关等）时。作者对比了实现动态配置的三种主流技术方案：轮询 (Polling)、Webhooks 和服务器发送事件 (SSE / Server-Sent Events)，并强调了将“代码部署”与“配置更改”解耦的重要性。通过使用动态配置工具，开发者可以实现更快的事故响应、更安全的灰度发布以及更清晰的权责分离。
author Dmitry Tilyupo
replane.dev
Dynamic Configuration in Node.js: Beyond Environment Variables | Replane
Environment variables are static. Learn how to implement dynamic configuration in Node.js with realtime updates, type safety, and instant rollback.
#优质博文 #前端 #CSS #JavaScript #视图转换
探讨在视图过渡 (View Transitions) 过程中如何保持视频和音频的播放状态，并区分了同页面与跨页面两种场景下的实现差异。
Astro 的持久化过渡效果很好用的。
View Transitions & Playing Video
[以下是方便搜索索引的大纲 (AI 生成)，请读原文]
author Chris Coyier
探讨在视图过渡 (View Transitions) 过程中如何保持视频和音频的播放状态，并区分了同页面与跨页面两种场景下的实现差异。
Astro 的持久化过渡效果很好用的。
View Transitions & Playing Video
AI 摘要：本文主要研究了在 Web 视图过渡 (View Transitions) 期间保持视频/音频播放的技术细节。作者指出，单页面视图过渡 (Same-Page View Transitions) 能够原生支持 (Just Works™) 状态保持，类似于 .moveBefore() 的效果；而多页面视图过渡 (Multi-Page View Transitions) 由于页面卸载则无法直接维持状态。不过，通过利用 pageswap 和 pagereveal 事件配合 sessionStorage 存储视频进度，可以“伪造”出一种近乎无缝的过渡体验。文章还提到了 Astro 框架在此方面的实现以及未来浏览器原生支持跨页面状态保存的可能性。
[以下是方便搜索索引的大纲 (AI 生成)，请读原文]
1. 同页面视图过渡 (Same-Page View Transitions)
• 在单页面环境下，使用 document.startViewTransition 操作 DOM 时，浏览器会自动保留 <video>、<audio> 甚至 <iframe> 的播放状态。
• 这种机制与新兴的 moveBefore() 方法类似，能够确保视频在元素变换位置或样式时持续播放而不中断。
2. 多页面视图过渡 (Multi-Page View Transitions) 的挑战
• 在传统的多页面架构 (MPA) 中，当页面卸载并加载新页面时，所有状态都会丢失，即便新旧页面包含相同的视频元素也无法自动衔接。
• 讨论了 Astro 等框架的实现原理，它们通常通过将页面导航转化为类似单页面应用 (SPA) 的体验来避开这一限制。
• 引用了 Chrome 团队关于跨页面状态保存的讨论，指出这不仅是视图过渡的需求，更是更通用的页面导航状态持久化方案。
3. 手动实现跨页面的“状态伪造”方案
• 使用 CSS 的 @view-transition { navigation: auto; } 启用多页面过渡。
• 为新旧页面的视频元素指定相同的 view-transition-name。
• 利用 JavaScript 监听 pageswap (页面离开前) 和 pagereveal (新页面显示时) 事件，通过 sessionStorage 存取视频的当前播放时间 (currentTime)。
• 虽然在切换瞬间会有轻微的音频/视频停顿 (Blip)，但视觉和逻辑上能达到较好的衔接效果。
4. 扩展应用与工具
• 该技术同样适用于 YouTube 等第三方 <iframe> 嵌入视频，只需结合相应的 Iframe 播放器 API (Iframe Player API) 提取和还原数据。
• 推荐参考 Chrome 官方演示和作者提供的 CodePen 示例进行深度学习。
author Chris Coyier
#优质博文 #前端 #WCAG #HTML
介绍在使用原生
There is No Need to Trap Focus on a Dialog Element
[以下是方便搜索索引的大纲 (AI 生成)，请读原文]
author Zell Liew
介绍在使用原生
<dialog> 元素时，为什么开发者不再需要手动实现复杂的焦点陷阱（Focus Trap）逻辑。There is No Need to Trap Focus on a Dialog Element
AI 摘要：文章探讨了在使用原生 HTML 的 <dialog> 元素时，关于焦点陷阱（Focus Trap）观念的转变。传统的无障碍（Accessibility）建议认为模态框必须将焦点限制在其内部，但作者通过研究发现，原生 <dialog> 的 showModal() 方法允许用户通过 Tab 键切换到浏览器地址栏等界面，这并非缺陷而是被 W3C 认可的有意设计。这种设计为用户提供了更好的逃逸机制和操作灵活性，因此在使用现代原生 API 时，手动编写焦点陷阱代码已成为过时的做法。
[以下是方便搜索索引的大纲 (AI 生成)，请读原文]
1. 核心发现与观念转变
• 作者在测试原生 <dialog> 的 showModal 方法时，发现焦点可以从对话框移动到浏览器地址栏，这挑战了传统的焦点陷阱（Focus Trap）原则。
• 经过深入研究 GitHub 相关讨论，确认如果使用原生 <dialog> 元素，手动实现焦点陷阱已被视为过时的建议。
2. 历史背景与规范误区
• Scott O’Hara 指出 WCAG 规范并未强制要求焦点必须锁定在对话框内。
• 传统的焦点陷阱建议主要针对早期的自定义脚本对话框，当时 inert 属性和原生 <dialog> 尚未得到广泛支持。
• ARIA 创作实践指南（APG）中的旧做法是为了在没有原生特性的情况下模拟行为，其复杂性远高于现在的原生实现。
3. 专家观点与无障碍优势
• 无障碍专家 Léonie Watson 认为，用户在对话框上下文中应拥有与普通页面相同的权利，即能够通过 Tab 键离开当前内容进入浏览器功能区（如地址栏、菜单等）。
• W3C 的 APA（Accessible Platform Architectures）工作组达成共识，维持原生 <dialog> 现有的行为。
• 允许焦点移出对话框有助于用户在不关闭模态框的情况下，打开新标签页查询信息或更改浏览器设置，提供了一种自然的“逃逸机制（Escape Mechanism）”。
4. 开发者结论
• 只要正确使用原生 Dialog API 的 showModal 方法，开发者无需再为焦点管理（Focus Management）感到焦虑，这极大简化了现代 Web 组件的开发难度。
author Zell Liew
CSS-Tricks
There is No Need to Trap Focus on a Dialog Element | CSS-Tricks
Accessibility advice around modals have commonly taught us to trap focus within the modal. Upon further research, it seems like we no longer need to trap focus within the <dialog> (even in modal mode).
#优质博文 #数据库 #系统架构 #后端 #运维
探讨了传统“软删除”模式（如 archived_at 列）带来的长期复杂性，并对比分析了触发器、应用层事件和 WAL 等更优的替代方案。
对于新项目，作者优先推荐基于触发器的方案，因为它部署简单、不引入额外基建，且有效隔离了活跃数据与归档数据。
The challenges of soft delete
[以下是方便搜索索引的大纲 (AI 生成)，请读原文]
author Atlas9
探讨了传统“软删除”模式（如 archived_at 列）带来的长期复杂性，并对比分析了触发器、应用层事件和 WAL 等更优的替代方案。
对于新项目，作者优先推荐基于触发器的方案，因为它部署简单、不引入额外基建，且有效隔离了活跃数据与归档数据。
The challenges of soft delete
AI 摘要：本文深入分析了在数据库中直接使用 archived_at 字段实现软删除（Soft Delete）的弊端，指出这种做法会导致数据膨胀、索引效率下降、查询逻辑复杂化以及数据迁移困难等问题。作者对比了三种替代方案：应用层异步归档、数据库触发器（Triggers）记录 JSON 快照以及基于 WAL 的变更数据捕获（CDC）。作者认为，对于大多数新项目，使用触发器将删除的数据转移至独立的归档表是平衡简洁性与实用性的最佳选择。
[以下是方便搜索索引的大纲 (AI 生成)，请读原文]
1. 传统软删除模式的弊端
• 数据膨胀与性能损耗：99% 的已删除数据永不被读取，却占用了昂贵的存储，导致数据库备份与恢复耗时剧增。
• 查询与索引复杂化：应用代码必须在每个查询中过滤已删除记录，索引也需要额外关注这些“死数据”，增加了误读风险。
• 数据迁移（Migration）难题：旧的归档数据可能不符合新的 Schema 约束或校验规则，导致数据库迁移变得棘手。
• 恢复逻辑不一致：恢复记录往往不只是修改一个状态位，还可能涉及外部系统调用，重复编写创建逻辑容易滋生 Bug。
2. 替代方案一：应用层归档 (Application Level Archiving)
• 机制与优势：在删除记录时发送事件（Event）到消息队列（如 SQS），由另一个服务将其序列化为 JSON 并存储至 S3 等对象存储中。
• 优点：主库结构保持纯净，处理异步化提高性能。
• 缺点：增加了基础设施复杂度，且 S3 中的归档数据难以直接通过 SQL 查询进行检索
3. 替代方案二：数据库触发器 (Triggers)
• 实现方式：利用 PostgreSQL 触发器在执行 DELETE 前，将行数据转换为 JSONB 格式并插入一个通用的 archive 归档表。
• 级联删除处理：通过会话变量（Session Variable）追踪根源，记录级联删除（Cascade Delete）是由哪个父表操作引起的。
• 优势：兼具性能与灵活性，主表无冗余数据，归档表易于清理（例如清理 90 天前的数据）且仍然支持 SQL 查询。
4. 替代方案三：基于 WAL 的变更数据捕获 (CDC)
• 技术栈：利用 Debezium、Kafka 或 pgstream 等工具读取 PostgreSQL 的预写日志（WAL），过滤删除事件并流转至外部存储。
• 优势：对主库性能几乎零影响，无需修改业务逻辑或添加触发器。
• 运维挑战：需要维护复杂的 Kafka 集群；需警惕 WAL 积压（Lag）导致主库磁盘写满，需合理配置 max_slot_wal_keep_size。
author Atlas9
#优质博文 #AI #前端 #开源
agentation：一款为 AI Agents 设计的视觉反馈工具，通过点击并添加标注，随后生成包含元素路径、CSS 选择器（Selectors）、位置等详细上下文的 Markdown 文本。
文档：https://agentation.dev/
Tweet：Introducing Agentation: a visual feedback tool for agents
agentation：一款为 AI Agents 设计的视觉反馈工具，通过点击并添加标注，随后生成包含元素路径、CSS 选择器（Selectors）、位置等详细上下文的 Markdown 文本。
文档：https://agentation.dev/
Tweet：Introducing Agentation: a visual feedback tool for agents
AI 摘要：Benji Taylor 发布的 Agentation 是一款创新的开源视觉反馈工具，旨在解决开发者向 AI 描述 UI 问题时的沟通障碍。通过 npm i agentation 即可集成，它允许用户直接在网页上点击元素并添加标注，随后生成包含元素路径、CSS 选择器（Selectors）、位置等详细上下文的 Markdown 文本。
GitHub
GitHub - benjitaylor/agentation: The visual feedback tool for agents.
The visual feedback tool for agents. Contribute to benjitaylor/agentation development by creating an account on GitHub.
#优质博文 #前端 #新动态 #Chrome #CSS
从 Chrome 145 开始，在满足特定条件时，
Using 100vw is now scrollbar-aware (in Chrome 145+, under the right conditions)
[以下是方便搜索索引的大纲（AI 生成），请读原文]
Bramus View more posts
从 Chrome 145 开始，在满足特定条件时，
100vw 终于能够自动减去滚动条宽度，解决了长期以来因视口单位导致的网页多余水平滚动问题。该改进同样适用于 vh（对应水平滚动条）以及视口单位的小、大、动态变体（sv*, lv*, dv*）Using 100vw is now scrollbar-aware (in Chrome 145+, under the right conditions)
AI 摘要：本文介绍了 Chrome 145 及更高版本对 CSS 视口单位（Viewport Units，如 vw、vh ）的一项重大改进：当根元素 html 设置为 overflow: scroll 或 scrollbar-gutter: stable 时，100vw 会自动扣除滚动条所占的空间。这一改进通过 CSS 工作组（CSSWG）的决议，解决了传统 100vw 导致不必要水平溢出的顽疾，同时通过限制生效条件规避了布局死循环（Cycles）问题。
[以下是方便搜索索引的大纲（AI 生成），请读原文]
1. 核心改进与生效条件
• Chrome 145+ 版本开始，视口单位将能够“感知”滚动条（Scrollbar-aware）。
• 只有在 html 元素上强制显示滚动条（overflow[-y]: scroll）或预留滚动条空间（scrollbar-gutter: stable）时，该特性才会生效。
• 该改进同样适用于 vh（对应水平滚动条）以及视口单位的小、大、动态变体（sv*, lv*, dv*）。
2. 视口单位的历史局限性
• 传统视口单位（Viewport Units）在计算时不考虑经典滚动条（Classic Scrollbars）的宽度。
• 设置 width: 100vw 时，其宽度包含滚动条，导致在有垂直滚动条的情况下，页面会出现不必要的水平滚动条。
3. 布局死循环（Cycles）的挑战
• 解释了为什么不能简单地在所有情况下减去滚动条宽度：这会导致“增加滚动条 -> 减小视口宽度 -> 内容重新布局 -> 滚动条消失”的死循环。
• 通过限制在滚动条“无条件存在”或“预留空间”的情况下生效，可以有效规避此循环。
4. 行业标准与 Web 兼容性
• 详细介绍了 CSS 工作组（CSSWG）关于此问题的讨论和决议历程。
• 引用 HTTP Archive 的数据分析，证明此项改动对现有网站的破坏性极低（仅约 0.0003% 的网站可能受到影响）。
• 强调了目前仅 Chromium 系浏览器支持此特性，尚无纯 CSS 的特性检测方法。
5. 最佳实践建议
• 建议开发者在 CSS Reset（样式重置）中为 html 根元素添加 scrollbar-gutter: stable。
• 相比 overflow-y: scroll，scrollbar-gutter: stable 可以在不强制显示滚动条背景的情况下激活“感知滚动条”的视口计算特性。
Bramus View more posts
Bram.us
Using 100vw is now scrollbar-aware (in Chrome 145+, under the right conditions)
From Chrome 145 onwards, 100vw will automatically subtract the size of the (vertical) scrollbar from it if you have forced the html element to always show a vertical scrollbar (using overflow[-y]: scroll) or if you reserve space for it (using scrollbar-gutter:…
#优质博文 #前端 #css #Web性能 #WCAG
HTTP Archive 2025 Web Almanac | CSS-Tricks
介绍 HTTP Archive 发布的 2025 年度《Web 年鉴》报告，总结了当前 Web 性能、CSS 趋势、可访问性及资源膨胀等核心数据。
[以下是方便搜索索引的大纲 (AI 生成)，请读原文]
author Geoff Graham
HTTP Archive 2025 Web Almanac | CSS-Tricks
介绍 HTTP Archive 发布的 2025 年度《Web 年鉴》报告，总结了当前 Web 性能、CSS 趋势、可访问性及资源膨胀等核心数据。
AI 摘要：这篇文章介绍了最新发布的《2025 Web 年鉴》（Web Almanac），该报告通过对 1720 万个网站的深度分析，揭示了 Web 技术的现状。亮点包括：可变字体（Variable fonts）已成为主流（约 40% 采用率），但网页可访问性（Accessibility）依然严峻，大量网站缺失焦点样式或对比度不足；同时，过去十年间移动端网页体积膨胀了超过 200%，反映出资源过度负荷（Bloat）的问题亟待解决。
[以下是方便搜索索引的大纲 (AI 生成)，请读原文]
1. 网页设计与 CSS 趋势
• 新的 CSS 属性 text-wrap 的 balance 和 pretty 值虽然发布不久，但已分别达到 2.67% 和 1.71% 的使用率。
• 可变字体（Variable fonts）不再是新鲜事物，桌面端（39.4%）和移动端（41.3%）已有约四成网站在使用。
2. 可访问性（Accessibility）挑战
• 颜色对比度（Color contrast）达标率极低，仅 30% 的网站符合 WCAG 准则。
• 焦点样式移除现象严重，67% 的网站违反了键盘导航必须有可见焦点指示器的规定。
• 图像描述缺失，约 44% 的网站未提供有效的替代文本（Alt attribute），其中 14% 完全缺失标签。
• ARIA 标签使用率高达 70%，但过度依赖或不当使用可能损害语义化（Semantic）HTML 的优势。
3. 性能、内容管理系统（CMS）与生态
• WordPress 依然占据市场主导地位，但增速放缓，目前正处于从扩张向稳定（Stabilization）转型的阶段。
• 网页资源肥胖（Bloat）问题显著，移动端页面体积中位数从 2015 年的 845 KB 增长至 2025 年的 2,362 KB。
• JavaScript 资源负荷极重，中位数达到 697 KB，成为网页性能的主要负担之一。
author Geoff Graham
CSS-Tricks
HTTP Archive 2025 Web Almanac | CSS-Tricks
I love me some good web research reports. I'm a sucker for them. HTTP Archive's Web Almanac is one report I look forward to every year, and I know I'm not
#优质博文 #前端 #CSS #HTML
The Incredible Overcomplexity of the Shadcn Radio Button
是这样的，很多时候会有不必要的复杂性，还有向后兼容的很多逻辑，也没什么办法。但是也有的复杂性在大项目里是必要的。
author Paul Hebert
The Incredible Overcomplexity of the Shadcn Radio Button
是这样的，很多时候会有不必要的复杂性，还有向后兼容的很多逻辑，也没什么办法。但是也有的复杂性在大项目里是必要的。
AI 摘要：这篇文章通过拆解 Shadcn UI 框架中的 Radio Button（单选按钮）组件，指出当前前端开发中存在的“过度工程化”问题。作者发现，原本只需一行原生 HTML 就能实现的单选框，在 Shadcn 中被封装成了依赖 Radix UI、Lucide 图标库、Tailwind CSS 且长达 45 行的代码块。作者通过对比证明，利用现代 CSS（如 appearance: none 和伪元素）完全可以轻松实现自定义样式的原生单选框，从而减少 JavaScript 负载、降低认知负荷并提高性能。
author Paul Hebert
