呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：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
#优质博文 #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 #ClaudeCode #开发工具 #编程技巧 #LLM
10. Learning with Claude: Tips for Claude Code：Claude Code 的开发者 Boris Cherny 分享了其使用 Anthropic 最新推出的 Claude Code 命令行工具的进阶技巧，涵盖自动化、调试、学习模式及多代理协作。
[以下是方便搜索索引的大纲 (AI 生成)，请读原文]
author Boris Cherny
10. Learning with Claude: Tips for Claude Code：Claude Code 的开发者 Boris Cherny 分享了其使用 Anthropic 最新推出的 Claude Code 命令行工具的进阶技巧，涵盖自动化、调试、学习模式及多代理协作。
[以下是方便搜索索引的大纲 (AI 生成)，请读原文]
1. 自动化与技能扩展（Skills & Automation）
• 建议将每日重复操作转化为自定义技能（Skills），并提交至 Git 仓库供跨项目复用。
• 创建 /techdebt 指令，在每个会话结束时运行，用于发现并消除重复代码。
2. 高效调试与流程集成（Debugging & CI/CD）
• 启用 Slack MCP，直接将 Slack 中的 Bug 讨论贴入 Claude 进行修复，减少上下文切换（Context switching）。
• 授权 Claude 自动修复失败的 CI 测试，或通过分析 Docker 日志定位问题，无需微观管理。
3. 提示词工程与代码评审（Prompting & Code Review）
• 让 Claude 扮演评审者，通过“对我提交的代码进行质询，直到通过测试再创建 PR”等提示词提升质量。
• 要求 Claude 对比主分支和功能分支的行为差异，证明代码的有效性。
4. 环境配置与工具优化（Environment & Setup）
• 推荐使用 Ghostty 终端以获得更好的同步渲染和 24 位色彩支持。
• 使用 /statusline 自定义状态栏，实时显示上下文使用情况（Context usage）和当前 Git 分支。
5. 复杂任务与数据分析（Subagents & Analytics）
• 在请求中加入 “use subagents” 指令，让 Claude 投入更多算力（Compute）处理复杂问题，并保持主代理上下文整洁。
• 通过编写技能调用 BigQuery (bq) 等命令行工具，直接在 Claude Code 中进行实时数据指标分析。
6. 深度学习与知识内化（Learning & Understanding）
• 在 /config 中开启“解释模式”（Explanatory/Learning output style），让 Claude 解释代码变更背后的原因（Why）。
• 利用 Claude 生成视觉化的 HTML 演示文稿（Slides）或 ASCII 图表，辅助理解陌生的代码库或协议。
• 构建间隔重复（Spaced-repetition）学习技能，通过问答形式填补知识盲区。
author Boris Cherny
#优质博文 #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
#LLM #Benchmark #AI #tools
这个 MarginLab 挺有意思的，一个针对 Claude Code 和 Codex的独立性能监控工具，模拟真实用户编码场景来监测大模型的“降智”，
X 上的 Viking：“这个网站很棒：https://marginlab.ai/trackers/claude-code/ ...”
这个 MarginLab 挺有意思的，一个针对 Claude Code 和 Codex的独立性能监控工具，模拟真实用户编码场景来监测大模型的“降智”，
X 上的 Viking：“这个网站很棒：https://marginlab.ai/trackers/claude-code/ ...”
这个网站很棒：https://marginlab.ai/trackers/claude-code/ 针对大模型的独立性能监控追踪器，现在有 Opus 4.5 和 Codex gpt-5.2 的监控，查看这些模型在真实编码任务上的表现是否出现退化，也就是我们常说的大模型有没有降智。 每天自动跑基准测试，尽量模拟普通用户实际使用的体验。 结果发现Opus 4.5 在过去的 30 天有明显的降智，下降 4.0%（统计显著，达到显著性阈值 ±3.2%），这也跟我的体验有点相符，而 Codex 的没有明显将智的迹象，Codex 最近也是我更喜欢的模型，精准，没有那么多废话，不会随便自由发挥。
#优质博文 #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.
#AI #开源 #Vite #Vue #AI
antfu 严选 Skills！
什么都别说了，装就对了（
antfu/skills: Anthony Fu's curated collection of agent skills.
author antfu
antfu 严选 Skills！
什么都别说了，装就对了（
antfu/skills: Anthony Fu's curated collection of agent skills.
AI 摘要：该项目是 Anthony Fu 发起的概念验证项目，汇集了针对 Vite、Nuxt、Vue 等现代前端技术栈的 AI 代理技能（Agent Skills）。它通过 Git 子模块（Git Submodules）直接引用官方文档，并融入了作者个人的编码偏好（如 ESM、TypeScript、Composition API 等最佳实践）
author antfu
GitHub
GitHub - antfu/skills: Anthony Fu's curated collection of agent skills.
Anthony Fu's curated collection of agent skills. Contribute to antfu/skills development by creating an account on GitHub.
#前端 #JavaScript #存储 #TypeScript #tools
unadlib/localspace：现代化的
localForage 的使用者看了看感觉不错，mark 一下（
unadlib/localspace：现代化的
localForage 替代方案，提供简单的浏览器存储封装。localForage 的使用者看了看感觉不错，mark 一下（
AI 摘要：localspace 是一个旨在替代 localForage 的现代化存储工具包。它在完全兼容 localForage API 的基础上，利用现代 TypeScript 和异步架构重写，解决了原版在类型定义、IndexedDB 性能瓶颈、以及多平台（Node.js、React Native、Electron）一致性上的长期痛点。其核心亮点包括：支持将高频写入合并为单次事务的合并写入（Coalesced Writes）技术，可提升 3-10 倍性能；内置了强大的插件系统，提供 TTL（Time-to-Live）过期、透明加密、数据压缩、多标签页同步及配额管理（LRU 淘汰）等高级功能；同时保留了极简的 API，方便开发者从旧项目无缝迁移。
GitHub
GitHub - unadlib/localspace: A library that unifies the APIs of IndexedDB, localStorage and other storage into a consistent API
A library that unifies the APIs of IndexedDB, localStorage and other storage into a consistent API - unadlib/localspace
#优质博文 #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).
