呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
#优质博文 #CSS #字体 #性能优化 #设计 #前端
Building my new website: A modern approach to font fallbacks with font property adjustments - Nic Chan
author Nic Chan
Building my new website: A modern approach to font fallbacks with font property adjustments - Nic Chan
AI 摘要：本文是作者 Nic Chan 撰写的新网站构建系列的一部分，重点介绍了如何采用现代字体回退方法来优化网站性能，尤其是减少累计布局偏移（CLS）。作者详细阐述了利用在线工具调整 CSS 字体属性（如 size-adjust 等）以实现无缝字体切换的实践，并分享了新增艺术作品和工作展示区的设计与实现，包括使用 View Transitions 和容器查询来提升用户体验。
• 作者 Nic Chan 分享了此篇草稿延迟发布的原因，并感谢读者的支持。
• 介绍了网站新增的拖放功能（桌面端）和改进的窗口分层效果，强调了渐进增强（progressive enhancement）的应用，即在确保无 JS 可用性的基础上，通过 JavaScript 增强用户体验。
• 字体优化与回退 (Font Optimization & Fallbacks): 讨论了网站在字体加载时遇到的累计布局偏移（CLS）问题，特别是自定义字体 W95FA 较窄的特性。作者希望实现像素字体和抗锯齿字体之间的无缝切换。他利用了“Modern Font Stacks”提供的字体堆栈，并发现了一个名为“Font Fallback”的工具，通过调整 size-adjust、ascent-override 等 CSS 属性来创建视觉上无缝的字体回退效果，甚至为此修改了工具的源代码。
• 艺术作品展示 (Artwork Showcase): 作者决定在网站中添加艺术作品展示区，尽管这与专业无关。他受到 Josh Crain 网站的启发，并利用 View Transitions API 实现了窗口最大化时平滑的缩放和标题淡入效果，配合少量 JavaScript 进行状态管理和回退。
• 工作项目展示 (Work Projects Showcase): 面对多种图片尺寸和可选标题的复杂布局挑战，作者采取了非对称设计，并限制了三种核心布局模式，避免每次新增案例都需编写新样式。此处完美运用了容器查询（Container Queries）来适应可用窗口空间内的尺寸变化，并结合 CSS Grid 实现有趣的重叠布局和纹理效果。
author Nic Chan
#Newsletter #node #新动态
NodeWeekly #587
NodeWeekly #587
AI 摘要：本文是 NodeWeekly 第 587 期（2025 年 7 月 22 日）的newsletter，聚焦 Node.js 生态系统的最新动态与技术进展。内容涵盖 Node.js 与 PHP 的跨生态系统整合（如 Laravel 在 Watt 运行时的支持），Node.js 安全更新，工具与库的最新版本发布（如 Bun v1.2.19、NAPI-RS v3），以及社区内的其他热点话题（如 WebAssembly 发展现状与 npm 开发者面临的钓鱼攻击）。此外，还包括了多个实用工具、教程和文章推荐，旨在为开发者提供全面的技术资讯和资源。
1. Laravel and Node.js: PHP in Watt Runtime：介绍 php-node 项目如何通过 Watt 应用服务器进一步支持 Laravel 应用的运行，探索 PHP 和 Node.js 生态系统的融合。
2. eslint-config-prettier 包的安全漏洞分析，Node.js http/https 原生支持代理（通过环境变量启用），Bun v1.2.19 新功能（pnpm 风格的 node_modules 隔离、VS Code 测试集成等），以及 pnpm 即将支持锁定 Node.js 版本。
3. Endor: Add Services as Node Dependencies：介绍 Endor 项目，通过简单的 npm install 和 endor run 命令，快速创建沙盒环境，支持 Postgres、MariaDB 等服务。
4. Articles and Case Studies：包括使用 Eleventy（Node 静态站点生成器）迁移网站提升 24% 性能的案例；基于视觉语言模型构建字体搜索引擎的教程；
5. 推荐多个工具和库：npq（安装前审计包安全）、NAPI-RS v3（支持 WebAssembly 的 Node.js 插件框架）、YouTube.js 15.0（非官方 YouTube API 客户端）、stripe-sync-engine（Stripe 到 Postgres 同步引擎）以及其他如 NeutralinoJS、Corepack、ESLint 插件等的最新版本更新。
6. 汇总更广泛的技术动态：Andy Wingo 关于 WebAssembly 现状的文章，Deno 团队分享的 JavaScript 历史视频，git-quick-stats.sh 工具，以及针对 npm 开发者的钓鱼攻击警告。
#优质博文 #前端 #性能优化 #SEO
好文，很有帮助。
Frontend Performance Checklist For 2025
author Didrik Steen Hegna, Dhairya Dwivedi, Nebojsa Radakovic
好文，很有帮助。
Frontend Performance Checklist For 2025
AI 摘要：这篇全面的、与平台无关的 2025 年前端性能优化清单，详细阐述了网站速度对于业务增长、用户参与度及 SEO 的关键作用。文章指导开发者如何利用各类工具衡量性能，并提供针对 HTML、CSS、JavaScript、图片与视频处理、字体优化以及主机与服务器配置等核心领域的实战建议。该指南还列举了多项快速提升性能的技巧，强调性能优化是一个持续的过程，对提供闪电般快速的用户体验至关重要。
1. 引言与重要性
• 性能与业务增长: 强调在当今快节奏的世界中，更好的性能直接转化为业务收益，如提升用户留存、转化率、搜索引擎排名（Core Web Vitals）和广告质量得分。
• 性能影响指标: 列举了网站停留时间、页面浏览量、跳出率、转化率/收入、用户满意度与留存、自然搜索流量、带宽/CDN 成本、广告质量得分等受性能影响的关键指标。
2. 性能测量
• 测量工具: 介绍了 Google PageSpeed Insights (PSI)、Chrome Lighthouse、WebPageTest、GTmetrix 以及 CrUX 数据等常用工具，用于获取实验室数据和真实用户数据。
• 测量方法: 建议结合使用实验室工具（获取受控基线）和真实用户监测（RUM，如 Web Vitals JS 库或 SpeedCurve 等平台），以便精准定位优化重点。
3. 前端性能优化清单
• 职责分配: 指出性能优化是整个开发团队的责任，包括平台选择、UX 设计和前端开发实现。
• HTML 优化: 强调优先渲染关键的 above-the-fold HTML 内容，清理冗余代码，启用压缩 (GZIP/Brotli)，正确加载外部文件（CSS 在 <head> ，JS 使用 async/defer），并避免不必要的 <iframe>。
• CSS 优化: 建议移除未使用的样式，模块化和拆分 CSS，避免 @import，使用关键 CSS (Critical CSS)，优化和压缩 CSS，预加载关键 CSS 文件，简化选择器，并利用现代 CSS 特性如 content-visibility: auto。
• JavaScript 优化: 提倡尽可能使用 HTML/CSS 替代 JS，避免过度使用框架/库，代码分割和延迟加载非关键 JS，预加载关键脚本，对脚本使用 async 和 defer 属性，压缩和摇树 (tree-shake) JS，保持依赖最新，移除未使用代码，并明智选择框架并利用其优化特性（如 Next.js 的混合渲染、Astro 的零 JS 默认）。
• 图片处理: 强调使用适当大小的图片，响应式图片 (<img srcset> 和 <picture>)，压缩和优化图片，预加载英雄图片 (<link rel="preload" as="image"> 和 fetchpriority="high"), 延迟加载 below-the-fold 图片 (loading="lazy"), 使用现代图片格式 (WebP/AVIF)，指定图片宽度和高度 (或 aspect-ratio) 以避免布局偏移，并利用框架或 CDN 进行图片优化。
• 视频处理: 建议压缩视频文件，选择现代视频编解码器/格式 (WebM/AV1)，使用正确的 preload 值，延迟加载 below-the-fold 视频，如果不需要则去除音频，考虑流媒体传输长视频，并优化第三方视频嵌入。
• 字体优化: 限制字体家族和字重数量，使用现代字体格式 (WOFF2)，预连接到字体主机源，使用 font-display: swap 避免文本不可见 (FOIT)，通过字体度量调整避免加载时的布局偏移，并考虑使用可变字体。
• 主机/服务器优化: 强调使用 HTTPS (TLS)，最小化 HTTP 请求，使用 HTTP/2 或 HTTP/3，使用 CDN，启用服务器端缓存，优化服务器处理时间 (TTFB 目标 < 200ms)，以及尽可能提供静态页面。
4. 快速提升技巧
• 避免布局偏移: 确保为动态内容预留空间，以减少累计布局偏移 (CLS)，可使用明确的 width/height 或 aspect-ratio，以及骨架屏占位符。
• 使用优先级提示: 利用 fetchpriority="high" 和 importance 属性告知浏览器哪些资源最重要，从而优化网络带宽分配。
• 最小化外部 HTTP 请求和第三方脚本: 审查并移除不必要的第三方脚本和资源，对于必需的脚本可考虑延迟加载。
• 保持单一协议: 确保所有资源都通过 HTTPS 加载，避免混合内容。
• 设置合适的缓存头: 利用 HTTP 缓存，为静态资源设置长 max-age，并通过文件名哈希进行缓存 busting。
• 预取可能访问的页面: 使用 <link rel="prefetch"> 或框架特定预取机制，在浏览器空闲时预加载用户可能接下来访问的页面。
• 利用 Service Workers 进行缓存: 部署 Service Worker 拦截网络请求，实现离线缓存和更快的后续加载。
5. 总结与展望
• 持续优化: 强调 Web 性能是一个持续的旅程，每次微小的改进都能带来显著的用户体验和业务成果。
• 性能与整体成功: 指出速度是网站成功的基础，它能确保优秀的内容、营销、SEO 和设计得以充分展现。
• 行动号召: 鼓励团队采纳“性能优先”的心态，持续优化网站速度。
author Didrik Steen Hegna, Dhairya Dwivedi, Nebojsa Radakovic
#前端 #HTML #CSS #新特性 #Accessibility #浏览器 #优质博文
A First Look at the Interest Invoker API (for Hover-Triggered Popovers) | CSS-Tricks
author Daniel Schwarz
A First Look at the Interest Invoker API (for Hover-Triggered Popovers) | CSS-Tricks
AI 摘要：Chrome 139 正在实验 Open UI 提出的 Interest Invoker API，该 API 旨在通过声明式 HTML，无需 JavaScript 即可创建鼠标悬停触发的弹出界面，如工具提示和悬浮菜单。它通过 interestfor 属性关联触发器和作为 popover 的目标元素。文章详细探讨了触发器和目标元素的用法、不同 popover 类型的影响、相关的 JavaScript 事件、以及通过 interest-show-delay 和 interest-hide-delay 等 CSS 属性控制的“兴趣延迟”。同时，它也深入讨论了键盘和屏幕阅读器用户的可访问性支持，并指出该 API 虽处于早期实验阶段，但有望极大简化此类 UI 的开发，尽管在某些 popover 行为和触屏交互上仍有待完善。
author Daniel Schwarz
CSS-Tricks
A First Look at the Interest Invoker API (for Hover-Triggered Popovers) | CSS-Tricks
Chrome 139 is experimenting with Open UI’s proposed Interest Invoker API, which would be used to create tooltips, hover menus, hover cards, quick actions, and other types of UIs for showing more information with hover interactions.
#Newsletter #新动态 #前端 #CSS #HTML #JavaScript #WCAG #性能优化 #tools #AI
🚀 Frontend Focus #702 — July 23, 2025
author Frontend Focus 编辑团队
🚀 Frontend Focus #702 — July 23, 2025
AI 摘要：本期《Frontend Focus》第702期聚焦前端领域的最新动态、实用工具、深度文章与观点。内容涵盖SVG基础入门、HTML 2025年度调查、AI辅助调试、可访问性标准解读、CSS动画、性能优化、前端框架更新等多个方面，为开发者提供了丰富的学习资源和行业洞察，同时介绍了多款前端实用工具和库，以及一些趣味简讯和广告。
1. 社区动态
• HTML 2025 年度调查启动：第三届年度 HTML 调查，旨在了解开发者如何使用 Web 平台日益增长的能力，其结果将直接影响明年 Interop 项目的优先级。
• WCAG 纯英文版：让无障碍标准易于理解：一个可搜索的资源，为官方 Web 内容无障碍指南（WCAG）提供了一个初学者友好的指南，使其更易于消化。
• Firefox 141 发布：新版本增加了垂直标签页和 AI 标签组织智能功能。
• GitHub 支持欧盟主权技术基金：GitHub 正在倡导设立一项欧盟主权技术基金。
• 为什么不信任 WCAG 2.2 以及对 3.0 的期望：Daniel Schwarz 提出了他对 WCAG 2.2 的担忧，并探讨了 WCAG 3.0 如何改进这些问题。
2. 文章、观点与教程
• 时间不多，范围却很多：滚动驱动动画的 animation-ranges 速查表 —— 一篇关于滚动驱动动画及其可用选项的入门指南。
• 小屏幕，大影响：为功能手机开发 Web 应用的被遗忘艺术：探讨了功能手机在2025年仍有意义的原因，以及如何为这类设备构建和发布Web应用。
• Tailwind 是“最糟糕的综合体”：一篇观点文章，认为 Tailwind 是 “将 CSS 和现代 Web 开发中所有糟糕之处结合在一起的令人遗憾的倒退”。
• 2025 年前端性能检查清单：一份高层次的清单，列出了创建快速、高效 Web 应用时需要牢记的事项。
• 利用 Web Speech API 让你的网站开口说话：一种简单直接的方法，为网站添加语音功能。
• 糟糕导航的隐性成本：信息架构如何直接影响业务指标：探讨了信息架构对业务指标的直接影响。
3. 开发工具与资源
• Glass3D 生成器：一个生成 3D 玻璃效果的 CSS 工具：一个允许编辑背景滤镜设置、颜色和纹理的工具，并实时预览效果。
• Astro 5.12 发布：新版本特性包括升级的 Netlify 开发体验、内容加载器中的 TOML 支持等。
• Tiptap v3：无头富文本编辑器框架：为构建强大的富文本编辑体验提供了基础，v3 版本包含大量开发者体验改进，如动态UI的卸载和重新挂载、创建自定义视图的 “Markviews”、SSR 模式等。
• macOS 光标 PNG 图片集合：一个提供各种 macOS 光标 PNG 图片的网站。
author Frontend Focus 编辑团队
#NewsLetter #React #JavaScript #前端 #新动态
⚛️ React Status #437
⚛️ React Status #437
AI 摘要：本期《React Status》全面概述了 React 生态系统的最新进展，包括全新 UI 组件库的发布、React Compiler 文档的改进、避免常见 React 和 Next.js 开发错误的实用指南，以及 AI 辅助 UI 构建的效率对比。此外，还深入探讨了 Zustand 状态管理、React Router 与 Server Components 的未来集成，以及 React 图形可视化的应用。文章还收录了一系列新增及更新的代码工具和库，并简要介绍了 JavaScript 领域的其他重要动态，如 Bun 的新版本发布和新的全栈框架尝试。
1. 社区动态与文章
• React Compiler 新版文档 – React 团队正努力改进 React Compiler（一个处于发布候选阶段的预编译优化工具）的官方文档，以便开发者深入学习和使用。
• Untitled UI React: 全新 UI 组件库 – 介绍了一个基于 Tailwind CSS 和 React Aria 构建的开源 UI 组件库，支持复制粘贴式开发，并提供 PRO 版本包含更多组件和 Figma 集成。 #组件库 #tailwind
• Figma MCP vs Claude: UI 构建之战 – 探讨了将 Figma 中的 UI 视图转换为可运行 React 代码的最佳方法，对比了使用 Figma 自身的 MCP 服务器和 Claude Code 通过截图实现的效果。 #AI #MCP
• Zustand 状态管理入门 – 为对 Zustan 感兴趣的开发者提供了全面介绍，强调这个轻量级状态管理解决方案的成熟、流行和经过实战检验的特性。
• React Router 与 React Server Components 的未来 – 探讨了 React Router 用户在与 React Server Components 集成时将面临的重大影响和未来发展方向。
• 使用 Matter.js 和 React Native Skia 构建 2D 游戏风格物理效果 – (文章) 详细讲解如何实现 2D 游戏中的物理效果。
• 将 Next.js 站点迁移至 Eleventy 并提升 24% 性能 – (文章) 分享了从 Next.js 迁移到 Eleventy（一个流行的 Node.js 静态站点生成器）的经验，并展示了性能提升。
• 使用 Okta 创建带有社交登录认证的 React PWA – (文章) 指导如何构建一个支持社交登录认证的 React 渐进式 Web 应用 (PWA)。
2. 代码与工具 (Code, Tools & Libraries)
• Reagraph: WebGL 驱动的 React 网络图可视化库 – 提供详细文档和 Storybook 实例，用于在 React 中实现基于 WebGL 的网络图可视化。 #webgl
• React Unity WebGL 10.0: 在 React 应用中嵌入 Unity WebGL 应用 – 庆祝其发布 8 周年，帮助将 Unity WebGL 应用与 React 应用集成并进行通信。
• React CodeMirror: CodeMirror 编辑器组件 – 使在 React 中使用流行的 JavaScript 代码编辑器 CodeMirror 变得更简单，提供了可定制的演示。
• React Native Audio API 0.6.5 – 基于 Web Audio API 的音频引擎。
• React Stripe.js 3.8 – Stripe.js 和 Stripe Elements 的 React 组件。
• React Native Rich Text Editor 1.10 – React Native 富文本编辑器。
3. JavaScript 领域其他动态 (Elsewhere in JavaScript)
• Platformatic 在 Node.js 中运行 Laravel 应用 – Platformatic 公布了在 Node.js 环境下运行 Laravel 应用的新方法。
• Bun v1.2.19 发布 – Bun 发布了新版本，新增了 pnpm 风格的隔离 node_modules 选项、交互式包更新器、VS Code 测试浏览器集成、更快的 Postgres 客户端等。
• eslint-config-prettier 包安全事件分析 – 分析了 eslint-config-prettier 包最近被入侵的事件，包括其工作原理和发生过程。
• bhvr: 基于 React 的全栈技术栈 – 介绍了一个构建全栈应用的有趣新尝试，该技术栈由 Bun, Hono, Vite 和 React (bhvr) 组成。
react.dev
React Compiler – React
The library for web and native user interfaces
#优质博文 #SVG #前端 #CSS #course
A Friendly Introduction to SVG
author Josh W. Comeau
A Friendly Introduction to SVG
AI 摘要：本文是 Josh W. Comeau 撰写的一篇关于 SVG（可缩放矢量图形）的入门教程，旨在为读者提供 SVG 的基础知识和实用技巧。文章从 SVG 的基本概念入手，介绍了其作为图像格式的独特之处（如基于 XML 的语法和与 DOM 的无缝集成），并深入探讨了 SVG 的基本形状、缩放机制、表现属性以及动画效果。通过详细的代码示例和互动演示，作者展示了如何利用 SVG 创建动态插图，并结合 CSS 和 JavaScript 实现交互效果。文章还提到作者正在开发的动画课程，邀请读者关注后续更新。
author Josh W. Comeau
Joshwcomeau
A Friendly Introduction to SVG • Josh W. Comeau
SVGs are one of the most remarkable technologies we have access to on the web. They’re first-class citizens, fully addressable with CSS and JavaScript. In this tutorial, I’ll cover all of the most important fundamentals, and show you some of the ridiculously…
#优质博文 #前端 #WebGL #three #demo
看了这篇突然意识到我写的那篇好烂ww完全不是面向基础的教程欸～感觉这种一步步来的真不好写。
Interactive Text Destruction with Three.js, WebGPU, and TSL | Demo
author Lolo Armdz
看了这篇突然意识到我写的那篇好烂ww完全不是面向基础的教程欸～感觉这种一步步来的真不好写。
Interactive Text Destruction with Three.js, WebGPU, and TSL | Demo
AI 摘要：本文是一篇关于使用 Three.js、WebGPU 和 Three Shader Language (TSL) 实现互动文字破坏效果的详细教程。作者通过一步步的代码示例和讲解，展示了如何在 Web 上创建动态的 3D 文字效果，利用指针位置和弹簧物理原理实现文字的变形与破坏动画，同时结合后处理技术增强视觉效果。文章不仅提供了技术实现细节，还分享了作者对 Web 互动体验发展的感悟，强调了 Three.js 等工具如何让 Web 重新焕发创意活力。
1. 文字几何体 (TextGeometry)：
• 内容：使用 TextGeometry 创建 3D 文字，配置字体、大小、深度、斜角等参数，并应用 MeshStandardMaterial 材质。通过计算 BoundingBox 将文字居中对齐。
• 总结：实现了 3D 文字的创建与居中，为后续的互动效果做好准备。
2. Three Shader Language (TSL)：
• 内容：详细介绍了使用 TSL 实现文字破坏效果的核心逻辑。包括存储顶点原始位置和法线、创建模拟数据的存储缓冲区、在 GPU 上运行初始化和更新计算函数、使用 uniforms 传递指针位置等数据、通过弹簧物理和摩擦力实现动态变形效果、添加噪声和旋转以增强动画的混乱感。
• 总结：通过 TSL 实现了基于指针位置的顶点变形和动态动画效果，展示了 GPU 计算在互动设计中的应用。
3. 材质与后处理：
• 内容：调整材质的发光颜色 (emissive color)，通过速度缓冲区偏移色调以产生多样化效果，并添加雾效和背景颜色。引入后处理技术，包括环境光遮蔽 (AO)、泛光 (bloom) 和噪声效果，提升画面质感。
• 总结：通过材质调整和后处理技术，增强了视觉表现力，使破坏效果更具冲击力。
author Lolo Armdz
#优质博文 #CSS #JavaScript #ES2025 #前端
Iterator helpers: The most underrated feature in ES2025 - LogRocket Blog
author Elijah Asaolu
Iterator helpers: The most underrated feature in ES2025 - LogRocket Blog
AI 摘要：本文详细介绍了 ECMAScript 2025 中引入的迭代器辅助方法（Iterator Helpers），这是 JavaScript 中处理大规模数据或无限数据流的一项重要功能。相较于传统的数组方法（如 .map() 和 .filter()），迭代器辅助方法采用惰性求值（lazy evaluation），不会一次性加载所有数据到内存中，从而显著提高性能和内存效率。文章通过对比传统数组方法与迭代器辅助方法的执行方式，展示了后者在处理大数据和流式数据时的优势，并提供了多个实际应用场景（如处理用户数据、AI 文本处理等）以及使用指南。
author Elijah Asaolu
LogRocket Blog
Iterator helpers: The most underrated feature in ES2025 - LogRocket Blog
Unlock the power of iterator helpers in ES2025 to write memory-efficient, lazy JavaScript pipelines that scale from streams to infinite data.
#优质博文 #css #前端
A Primer on Focus Trapping | CSS-Tricks
author Zell Liew
A Primer on Focus Trapping | CSS-Tricks
AI 摘要：本文详细介绍了“焦点捕获（Focus Trapping）”的概念及其在创建可访问性模态对话框中的应用。焦点捕获是指将用户的焦点限制在特定元素内，确保焦点不会离开该区域，常用于提升网页可访问性。文章从理论到实践，逐步解析了如何通过代码实现焦点捕获，包括检测可聚焦元素、处理键盘事件（如 Tab 和 Shift+Tab）以及具体的实现步骤，同时推荐了 Splendid Labz 提供的工具库以简化开发过程。
1. 焦点捕获的基本概念
• 焦点捕获是指通过管理焦点，确保用户在特定元素（如模态对话框）内导航时，焦点始终保持在该元素内部。
• 具体规则：当用户在最后一个可聚焦元素上按 Tab 键时，焦点回到第一个元素；当用户在第一个元素上按 Shift+Tab 时，焦点回到最后一个元素。
• 应用场景：用于创建可访问性模态对话框，避免焦点离开对话框区域。
• 技术背景：虽然 dialog API 的出现减少了对焦点捕获的需求，但理解和实现这一技术仍然很重要。
2. 使用 Splendid Labz 实现简单焦点捕获
• 推荐使用 Splendid Labz 提供的工具库（如 @splendidlabz/utils/dom）来简化焦点捕获的实现。
• 代码示例：通过 getFocusableElements 获取可聚焦元素，并用 trapFocus 函数在 keydown 事件中管理焦点。
• 强调：虽然工具库使用简单，但文章将深入解析其内部实现原理，适合想深入学习或自行开发的读者。
3. 选择可聚焦元素（Selecting Focusable Elements）
• 可聚焦元素包括：<a>、<button>、<input>、<textarea>、<select>、<details>、<iframe> 等，以及具有 [contenteditable] 或 [tabindex] 属性的元素。
• 实现步骤：
• 使用 querySelectorAll 获取容器内所有潜在可聚焦元素。
• 过滤掉不可聚焦的元素（如 disabled、hidden 或 display: none 的元素）。
• 进一步筛选仅支持键盘焦点的元素（排除 tabindex < 0 的元素）。
• 添加 first 和 last getter 方法，分别获取键盘可聚焦元素列表的第一个和最后一个元素。
• 目的：为后续焦点捕获提供准确的元素列表。
4. 焦点捕获的实现方法（How to Trap Focus）
• 核心步骤：监听键盘事件（keydown），检测用户是否按下 Tab 或 Shift+Tab 键。
• 具体实现：
• 使用 event.key 和 event.shiftKey 判断按键类型，自定义 isTab 和 isShiftTab 函数。
• 通过 document.activeElement 确定当前焦点位置，判断是否需要转移焦点。
• 如果焦点在最后一个元素且用户按 Tab 键，则将焦点移至第一个元素；如果焦点在第一个元素且用户按 Shift+Tab，则将焦点移至最后一个元素。
• 使用 focus() 方法实现焦点转移。
• 总结：通过逐步拆解，焦点捕获的实现逻辑清晰且易于理解。
5. 对 Splendid Labz 的最终推荐
• 作者分享了个人开发经验，提到在构建应用时需要许多通用组件和工具库。
• 推荐 Splendid Labz 提供的库，旨在提升开发效率并改善开发者体验（DX）。
• 鼓励读者尝试这些工具，并感谢读者耐心阅读。
author Zell Liew
CSS-Tricks
A Primer on Focus Trapping | CSS-Tricks
Focus trapping is about managing focus within an element, such that focus always stays within it. The whole process sounds simple in theory, but it can quite difficult to build in practice, mostly because of the numerous parts to you got to manage.
#优质贴子 #餐饮业 #职业转型
v2ex 现在为数不多的正常帖子（唉）挺有意思的，详细说了开店选址、装修、菜单设计、供应链管理等关键环节的注意事项。
程序员转行从事餐饮业近十年，有问必答。
https://www.v2ex.com/t/1146449
v2ex 现在为数不多的正常帖子（唉）挺有意思的，详细说了开店选址、装修、菜单设计、供应链管理等关键环节的注意事项。
程序员转行从事餐饮业近十年，有问必答。
https://www.v2ex.com/t/1146449
#博客更新 #前端 #WebGL #p5
从像素到粒子：p5.js 图像转动态粒子的设计与实现
疯狂叠甲，不行了，就先这样吧，这篇博文和项目搭建写的都比较匆忙，有很多写的比较烂的地方，毕竟是为需求服务的，重构本身就比较赶，后续应该会不断完善。
部分段落有使用 AI 进行润色和辅助，虽然很 AI 但是通俗易懂就留着了（要困死了先睡觉）
从像素到粒子：p5.js 图像转动态粒子的设计与实现
疯狂叠甲，不行了，就先这样吧，这篇博文和项目搭建写的都比较匆忙，有很多写的比较烂的地方，毕竟是为需求服务的，重构本身就比较赶，后续应该会不断完善。
部分段落有使用 AI 进行润色和辅助，虽然很 AI 但是通俗易懂就留着了（要困死了先睡觉）
#优质博文 #浏览器
省流：讨伐现代 IE（
Apple's Browser Engine Ban Persists, Even Under the DMA - Open Web Advocacy
author Open Web Advocacy
省流：讨伐现代 IE（
Apple's Browser Engine Ban Persists, Even Under the DMA - Open Web Advocacy
AI 摘要：本文详细探讨了苹果公司对第三方浏览器引擎在 iOS 上的限制，即使在欧盟《数字市场法案》（DMA）生效后，苹果依然通过技术和合同障碍阻止其他浏览器厂商在欧盟成功部署自己的引擎。文章指出苹果此举是为了保护其高利润产品 Safari 及其与谷歌的搜索引擎收入，同时限制网页应用（Web Apps）与原生应用的竞争能力，损害消费者和开发者的利益。作者呼吁欧盟委员会采取强制措施，确保苹果真正遵守 DMA，开放浏览器引擎竞争。
author Open Web Advocacy
Open Web Advocacy
Apple's Browser Engine Ban Persists, Even Under the DMA - Open Web Advocacy
#优质博文 #AI #开源 #RCT
挺有意思的。
Measuring the Impact of Early-2025 AI on Experienced Open-Source Developer Productivity
author Metr Team
挺有意思的。
Measuring the Impact of Early-2025 AI on Experienced Open-Source Developer Productivity
AI 摘要：本文通过一项随机对照试验（RCT）研究了 2025 年初 AI 工具对经验丰富的开源开发者生产力的影响。研究发现，使用 AI 工具的开发者完成任务的时间比不使用时长 19%，即 AI 反而降低了他们的效率。这一结果与开发者的预期（认为 AI 会加速 24%）和专家预测形成鲜明对比。文章探讨了这一现象背后的可能原因，并尝试调和 RCT 结果与 AI 基准测试成绩及轶事报告之间的矛盾，强调了在现实场景中评估 AI 影响的重要性。
1. 研究动机：
• 探讨 AI 工具在现实环境中的影响，弥补基准测试（benchmarks）在真实性上的不足。
• 基准测试常因任务简化或缺乏上下文而高估或低估 AI 能力，而现实中的 AI 对 AI 研发的影响可能带来风险（如快速进步导致监管失控）。
• 通过开发者生产力研究，提供补充证据以评估 AI 对研发加速的整体影响。
2. 研究方法：
• 招募 16 名经验丰富的开源开发者，来自平均星级 22k+、代码量 100 万行以上的大型仓库。
• 开发者提供 246 个真实问题（bug 修复、功能开发、重构等），随机分配是否允许使用 AI 工具。
• 使用 AI 时，开发者可自由选择工具（主要为 Cursor Pro 与 Claude 3.5/3.7 Sonnet）；不使用 AI 时，禁止任何生成式 AI 辅助。
• 任务平均耗时 2 小时，开发者记录屏幕并自报完成时间，报酬为每小时 150 美元。
3. 核心结果：
• 使用 AI 工具时，开发者完成任务时间延长 19%，与预期加速 24% 及事后仍认为加速 20% 的认知形成反差。
• 数据显示，AI 工具在现实任务中显著减缓了开发速度。
• 文章澄清未提供证据支持的观点，如 AI 对大多数开发者无加速作用、未来无潜力加速等。
4. 因素分析：
• 研究分析 20 个可能导致减缓的因素，发现 5 个可能原因（具体因素详见论文）。
• 排除实验偏差，如开发者使用前沿模型、遵守分配规则、提交的 PR 质量无明显差异等。
• 减缓现象在不同结果测量、估计方法及数据子集分析中一致。
5. 讨论：
• 对比 RCT 结果、基准测试（如 SWE-Bench）及轶事报告，发现证据部分矛盾。
• RCT 显示 AI 减缓 20 分钟至 4 小时的现实编码任务；基准测试显示 AI 在困难任务中表现优异；轶事报告称 AI 在多场景中帮助显著。
• 提出三种假设解释矛盾：RCT 低估能力、基准及轶事高估能力、或三者反映不同任务分布。
• 指出 AI 在高标准或隐性要求（如文档、测试覆盖率）场景中能力可能较低，基准测试因任务简化可能高估能力，轶事报告可能不准确。
6. 未来展望：
• 计划继续此类研究，追踪 AI 加速或减缓趋势，特别是在难以操控的现实评估中。
• 若 AI 显著加速开发者，可能预示 AI 研发快速进步，带来扩散风险、监管失控或权力集中等问题。
• 强调现实场景评估与基准测试结合的重要性，以全面理解 AI 能力及影响。
author Metr Team
metr.org
Measuring the Impact of Early-2025 AI on Experienced Open-Source Developer Productivity
We conduct a randomized controlled trial to understand how early-2025 AI tools affect the productivity of experienced open-source developers working on their own repositories. Surprisingly, we find that when developers use AI tools, they take 19% longer than…
#Newsletter #前端 #JavaScript #CSS #新动态 #AI
🚀 Frontend Focus #701
🚀 Frontend Focus #701
AI 摘要： 本期《Frontend Focus》（第 701 期，2025 年 7 月 16 日）涵盖了前端开发的多个热点话题，包括在严格约束下创新的项目案例、Apple 在浏览器引擎选择上的争议、WebAssembly 的广泛应用、CSS 新特性和工具的使用，以及一系列实用的前端工具和资源。文章还提到 Mozilla 即将为 Firefox 添加 WebGPU 支持，并探讨了 AI 对开源开发者生产力的影响，旨在为前端开发者提供最新的技术动态和实用技巧。
1. “I’m More Proud of These 128 Kilobytes Than Anything I’ve Built Since”：通过一个项目案例，Mike Hall 展示了在带宽和处理能力等严格约束下的创新设计，提醒开发者考虑更广泛的用户需求，设计更具包容性的产品。 #性能优化
2. “Apple’s Browser Engine Ban Persists, Even Under the DMA”：Open Web Advocacy 指出 Apple 在 iOS 浏览器引擎选择上未能有效遵守欧盟《数字市场法案》（DMA），存在阻碍竞争的问题。
3. “WebAssembly: Yes, But for What?”：Andy Wingo 在 ACM Queue 上分享了 WebAssembly 在浏览器和服务器端的广泛应用，探讨其如何逐渐渗透到各个领域。 #WASM
4. 简讯（IN BRIEF）：
• Mozilla 将在 Firefox 141 中添加 WebGPU 支持（初期仅限 Windows，后续扩展至 macOS 和 Linux）。
• 一份报告分析了 AI 对开源开发者生产力的影响。
• Firefox 团队寻求用户对 Mozilla 浏览器的真实反馈。
• Andy Bell 分享了一个 CSS 代码片段，为锚定 URL 添加必要的空间，提升用户体验。
5. 文章、观点与教程（Articles, Opinions & Tutorials）：
• CSS 行长度设置 - Daniel Schwarz 介绍如何利用 clamp() 和 calc() 等工具更轻松地设置文本行长度，并展望未来发展。
• 纯 HTML 和 CSS 编写 - Joel Dare 分享为何在 2025 年仍坚持使用纯 HTML 和 CSS。
• ARIA 角色与属性使用 - Michael Beck 讲解如何有效使用 ARIA 角色和属性。 #WCAG
• 滚动行为设计 - Megan Chan 探讨何时应保存用户的滚动位置。
• AI 与网页设计 - Noah Davis 认为模板而非 AI 才是网页设计的真正“杀手”。
6. 工具、代码与资源（Tools, Code & Resources）：
• SveltePlot - Gregor Aisch 开发的 Svelte 可视化框架，基于 D3，支持多种图表类型。
• Eleventy LibDoc - IT Automotive Design System 提供的一个 Eleventy 起步项目，用于创建美观直观的文档站点。
• SplitThing - Florian Reintgen 开发的工具，可将图像分割为自定义网格并下载。
• Chili3D - xiange chen 开发的基于 Web 的 3D CAD 应用，利用 WebAssembly 和 Three.js 实现接近原生性能。 #webgl
• designtokens.fyi - Design Systems House 提供的设计令牌术语词汇表，包含 33 个相关术语解释。
• Check Server-Side Rendering (SSR) - Punit Sethi 开发的工具，帮助检查网页元素的服务器端渲染情况。
• FontGen - 智能字体配对工具，包含 1000+ 字体（需注册）。
• Pandabox - StJohn 开发的 Astro 轻量级灯箱和画廊组件。
Medium
I’m more proud of these 128 kilobytes than anything I’ve built since
I once worked with a UI designer who insisted it was impossible to create a product that was both within the Web Content Accessibility Guidelines (WCAG) and aesthetically pleasing. ‘It can be pretty…
#优质博文 #液态玻璃 #设计
Getting Clarity on Apple's Liquid Glass
author Geoff Graham
Getting Clarity on Apple's Liquid Glass
AI 摘要：本文详细探讨了 Apple 在 WWDC 2025 上推出的全新设计美学“Liquid Glass”（液体玻璃），分析了其设计理念、技术特点以及引发争议的焦点。文章从 Apple 官方介绍、设计师和开发者的反馈、无障碍性问题到社区的实验和教程，全面梳理了 Liquid Glass 的影响与应用前景。作者中立看待这一设计，既对其创新性表示兴趣，又对其可读性和无障碍性表达了担忧，同时整理了大量相关资源和讨论，为读者提供了深入了解这一设计趋势的入口。
author Geoff Graham
CSS-Tricks
Getting Clarity on Apple's Liquid Glass | CSS-Tricks
Gathered notes on Liquid Glass, Apple’s new design language that was introduced at WWDC 2025. These links are a choice selection of posts and resources that I've found helpful for understanding the context of Liquid Glass, as well as techniques for recreating…
#优质博文 #node #JavaScript #TypeScript #Docker #Tools
Node Weekly #586 - July 15, 2025
Node Weekly #586 - July 15, 2025
AI 摘要：本期 Node Weekly 聚焦 Node.js 最新版本更新、社区讨论以及相关技术进展。Node.js v24.4.0 发布，带来了新的功能和安全更新提示；社区正在讨论是否将 Node.js 改为年度大版本发布并缩短 LTS 周期；TypeScript 5.9 Beta 引入了新功能如 import defer；此外，还涵盖了 Docker 部署最佳实践、性能差距分析、JavaScript 现代模式问题，以及一系列实用工具和库的更新，旨在帮助开发者提升效率和代码质量。
1. Node.js 更新与公告：
• Node v24.4.0 (Current) 发布：新增 --watch-kill-signal 功能，允许指定重启进程时的信号；spawn 和 spawnSync 支持权限模型标志传播；包含常规 V8 和依赖项更新。Node 团队还预告即将发布 v24.x、22.x 和 20.x 版本以解决安全问题。
• Node.js 年度大版本发布提案：社区讨论是否将 Node.js 改为每年一次大版本发布，并将偶数版本 LTS 周期从 30 个月缩短至 24 个月，欢迎社区反馈。
• Node.js v18 支持延长：尽管 v18 已于 2025 年 4 月停止支持，但 Canonical 宣布 Ubuntu Pro 用户将获得支持至 2032 年。
2. 社区与安全动态：
• Node-API 支持 React Native：Callstack 宣布为 React Native 引入 Node-API 支持，扩展跨平台原生代码编写和共享的可能性。
• TypeScript 5.9 Beta 发布：引入 import defer 支持，以及新的 node20 模式（类似 nodenext，但目标为 ES2023）；透露 Go 驱动的 TypeScript 原生端口将在 TypeScript 7 中可用。
• TC39 全会总结：Igalia 团队分享了最新 TC39 全体会议的详细摘要，其中包含有关 ECMAScript 发展的有趣花絮。。
• 安全威胁：朝鲜“威胁行为者”部署了 67 个恶意 npm 包，Kirill Boychenko 详细解释了这些包的运作机制。
• Node 版本管理器性能差距：Pavel Romanov 指出不同 Node 版本管理器可能导致 shell 启动速度相差 500 倍，但对大多数用户影响不大。
• JavaScript 作用域提升问题：Parcel 创建者 Devon Govett 认为作用域提升与现代 JS 模式冲突。
• 使用 Array.fromAsync() 的现代异步迭代：Matt Smith 介绍 Array.fromAsync() 的用法。
• 类型化查询构建器对比：Guillaume Billey 比较了 Kysely 和 Drizzle 两种工具。
3. 工具与库推荐：
• Necord：基于 Nest 和 Discord.js 的 Discord 机器人开发框架，易于部署机器人功能。
• Upyo：跨运行时邮件发送库，支持 SMTP 和 HTTP（如 SendGrid、Amazon SES）提供统一类型安全的 API。
• Rewire 9.0：专注于 CommonJS 的单元测试猴子补丁工具，方便注入 mock 和检查私有变量。
• Envalid 8.1：环境变量验证工具，确保程序运行时依赖项齐全。
• cRonstrue 3.0：将 Cron 表达式转换为自然语言，支持约 30 种语言环境。
• 其他更新：包括 ESLint v9.31.0、Serverless Express 4.17、NATS.js 3.1、OpenAI Node 5.9 等工具和库的最新版本信息。
4. 生态系统动态：
• JavaScript Date 类测试：通过趣味测验了解 Date 类的解析机制。 #趣站
• ANSI.tools：在线工具，用于分析 ANSI 转义码和常用代码查询。
• 10 亿行挑战：Tae Kim 分享如何在 Bun 中处理 10 亿行文件，耗时不到 10 秒。
• Nginx 的 njs 模块升级：从仅支持 ES5 升级至使用 QuickJS，支持完整的 ES2023 功能。
#优质博文 #前端 #css
Stacked Transforms
author Chris Coyier
Stacked Transforms
AI 摘要：本文通过一个故事化的叙述方式，探讨了 CSS 中的 transform 属性和 animation-composition 属性的行为与应用。作者从参加 CSS Day 活动时对 animation-composition 的初步接触开始，逐步深入到 CSS 变换的堆叠机制以及动画组合的不同模式（如 replace、add 和 accumulate），通过代码示例和个人实验，清晰地解释了这些属性如何影响元素的变换和动画效果。
1. 引言与背景：作者以参加 CSS Day 活动为切入点，提到在活动中接触到 animation-composition 属性，并通过阅读相关博文和 MDN 文档逐步了解其功能。
2. CSS Transform 基础与堆叠机制：
介绍了 transform 属性支持多个值（如 translateX 和 rotate）以空格分隔的方式应用，并按顺序逐一执行的特点。通过代码示例（如 transform: translateX(50px) rotate(20deg) translateX(50px)），解释了变换值的顺序执行逻辑，并非简单合并。
3. Animation-Composition 的默认行为（replace）：
阐述了 animation-composition 的默认值 replace ，即在动画 @keyframes 中定义的变换会覆盖元素上已有的 transform 属性，导致动画从 @keyframes 定义的起点开始。
4. Animation-Composition 的其他模式（add 和 accumulate）：
• add 模式：动画变换会附加到已有变换的末尾，形成一个变换列表（如 translateX(50px) rotate(20deg) translateX(100px)）。
• accumulate 模式：动画变换会与已有变换的同类型值累加（如 translateX(50px) 加上 translateX(100px) 变为 translateX(150px)）。
通过代码和注释详细对比了两者的不同效果。
5. 扩展应用与个人感悟：
作者通过一个“turtle”示例（受童年 Logo 编程语言启发），展示了如何通过动态添加 transform 值实现类似路径移动的效果。同时提到 animation-composition 的行为不仅适用于 transform，也适用于其他属性如 opacity。最后，作者表达了对这些技术的兴趣，并认为它们在未来项目中会有实用价值。
author Chris Coyier
Frontend Masters
Stacked Transforms
I think the best way for me to show you what I want to show you is to make this blog post a bit like a story. So I’m gonna do that.
#前端 #demo #动画 #css #codepen
https://fixupx.com/jh3yy/status/1945596617802867087
https://codepen.io/jh3y/pen/xxvVWxN
jhey ʕ•ᴥ•ʔ(@jh3yy): number range slider using 3D CSS transforms
sometimes a shift in perspective unlocks a new solution
check the reveal👇
使用 3D CSS 转换的数字范围滑块
有时，视角的转变会解锁新的解决方案
检查显示 👇
https://fixupx.com/jh3yy/status/1945596617802867087
https://codepen.io/jh3y/pen/xxvVWxN
