呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：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
#tools #工具 #开源
Rabithua/Rote 一个追求简约交互、支持私有化部署并提供开放 API 的个人笔记仓库
在线体验：Demo 演示地址 | 官方网站：Rote.ink | 移动端：iOS App Store
author Rabithua
Rabithua/Rote 一个追求简约交互、支持私有化部署并提供开放 API 的个人笔记仓库
在线体验：Demo 演示地址 | 官方网站：Rote.ink | 移动端：iOS App Store
• 极致简约：追求克制的交互设计，提供优雅且低心智负担的记录体验。
• 数据自主：用户完全掌控个人数据，支持自由导出，无数据绑架。
• 开放性：提供 Open API 接口，支持在任何场景下进行数据记录或获取。
• 多端支持：除了 Web 端，还提供更优雅的 iOS 客户端原生体验。
• 内容形态：支持碎片化笔记，并提供独立的 Markdown 文章支持，用于纯粹的读写体验。
AI 摘要：Rote 是一个设计独特的个人笔记系统，强调克制、优雅的交互体验和极低的使用心智负担。它采用前后端分离架构，支持通过 Docker 或 Dokploy 一键私有化部署 (Self-Hosted)，确保用户对数据的绝对控制权。除了支持 Markdown 文章和 iOS 原生客户端外，Rote 还提供了完备的开放接口 (Open API)，允许用户在各种场景下自由地记录与导出数据，拒绝数据绑架。
author Rabithua
GitHub
GitHub - Rabithua/Rote: A personal note repository that looks different🤔
A personal note repository that looks different🤔. Contribute to Rabithua/Rote development by creating an account on GitHub.
好喜欢！
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
#前端 #新动态 #rust
Yarn 6 预览版发布，为了极致性能正转向使用 Rust 语言重构，预计 2026 年 Q3 发布稳定版。
你也锈化啊（
Yarn 6 预览版发布，为了极致性能正转向使用 Rust 语言重构，预计 2026 年 Q3 发布稳定版。
你也锈化啊（
Yarn
Yarn 6 Preview | Yarn
Yarn is a modern JavaScript package manager focused on speed, security, and reliability.
#优质博文 #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 #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.
