AI 摘要：本期《React Status》聚焦 React 生态的最新动态，涵盖电子电路设计工具 tscircuit 的 React 实践、React 19+ 新特性课程、静态化服务组件解析、TanStack Query 简化提案，以及多个工具库更新（如 React Chrono 2.7 和 Bippy）。此外，还讨论了 React 的未来前景、AI 辅助开发工具（GitHub Copilot）和付费服务（Clerk Billing），并推荐了 JavaScript 生态相关资源。

编者按：主编 Peter Cooper 宣布因参加 Google I/O 暂停更新，5 月 28 日恢复。

1. 技术文章与动态
• Dan Abramov 解析：静态化服务器组件的实现原理与 CDN 部署优势。
• TanStack Query RFC：提案合并数据查询方法为 query() 和 infiniteQuery()。
• 社区讨论：React 2025 年发展前景、ESLint 插件检测冗余 useEffect
• Vercel 新功能：一键过滤 AI 爬虫。

2. 工具与库更新
• tscircuit：用 React 设计电子电路板的创新工具，提供 GitHub 仓库。
• React Chrono 2.7：增强动态时间轴组件的搜索与动画功能。
• Bippy：通过伪装 DevTools 访问 React 内部状态的工具。
• Basecoat：将 shadcn/ui 组件转换为无框架依赖的纯 HTML/CSS 版本。
• 其他：React Query Builder 8.7、React Native Tab View 4.1、BlockNote 0.30。

3. JavaScript 生态动态
• V8 的显式资源管理（using/await using）。
• Parcel 2.15.0 支持 SVG 转 JSX。
• npm 包开发最佳实践、PPT 生成库 PptxGenJS。

overreacted.io

Static as a Server — overreacted

You wouldn't download a site.

AI 摘要：本期 Frontend Focus 涵盖了 CSS 高度行为解析、Next.js 课程、Figma AI 建站工具争议、Safari 新特性、ARIA 资源合集等前端领域热点内容，同时推荐了字体管理、动画库等实用工具，并探讨了经典 88x31 按钮的文化意义。

1. CSS 高度行为解析《The Height Enigma》：Josh W. Comeau 通过可视化示例解释百分比高度在 CSS 中的“神秘”行为，揭示其底层机制。【之前发了】

2. Figma Sites 争议

Figma 推出 AI 建站工具，可将设计稿直接发布为网页，但开发者批评其生成代码冗余（类似 Dreamweaver）。相关评论：

• Figma 发布用于创建网站的新 AI 工具 —— Ivan Mehta
• 垃圾代码的真正路径：Figma 站点 — Joe Dolson
• 不要使用 Figma 网站在 Web 上发布您的设计... — Adrian Roselli
• Figma 网站比您想象的更糟糕 — Kevin Powell

3. 行业动态（IN BRIEF）
• Safari 18.5 支持 macOS 声明式 Web Push。新增功能
• CSS 工作组征集 Anchor Positioning 反馈
• Manuel Matuzović 整理 100+ ARIA 相关 CodePen 示例
• Firefox 源代码迁移至 GitHub
• Opera 测试“正念浏览器”以减少无意识刷屏 【？】

4. 技术文章与教程
• CSS：Jen Simmons 介绍 contrast-color() 函数，实现自动无障碍配色；<input type=color> 新增 P3 广色域支持。
• 设计系统：Rebecca Hemstad 等分享多语言设计系统的挑战（如 RTL 布局、字体适配）。
• 工具批判：Salma Alam-Naylor 回顾 WYSIWYG 工具失败史，指出 HTML 标记质量是关键。
• 创意实现：Temani Afif 使用 clip-path: shape() 创建复杂花卉图形。
• Brian 探讨 88x31 像素按钮的历史与持久魅力。

5. 工具与资源
• 字体：Fonts Ninja 提供字体筛选与收藏管理，该服务还包括一个 Chrome 扩展程序，可以轻松地为您的收藏夹添加书签。
• 组件库：Basecoat 将 shadcn/ui 转换为无框架版本。
• 动画：tailwind-animations 库支持可调参数动画。
• AI 应用：MoodHue 根据情绪生成配色方案。

Figma

Publish Your Designs On The Web With Figma Sites | Figma Blog

Today, we’re launching Figma Sites, an all-in-one tool for you to design and build custom, responsive websites.

AI 摘要：介绍了一个名为 The Museum of Digital Influence 的虚拟博物馆，该博物馆通过 WebGL 技术构建，旨在展示数字媒体和互联网文化的演变。博物馆内容丰富，具有较高的资料价值，采用 AI 生成的缩略图和人工撰写的详细说明，用户可以通过滚动和点击进行浏览。

AI 摘要：作者在重建个人网站后，遇到了网站部署到服务器后无法正常运行的问题。经过一系列的调试和尝试，发现问题出在服务器上的优化插件自动将不安全的链接转换为安全链接，导致SVG命名空间URL发生变化，从而引发了JavaScript错误。

1. 问题描述
• 作者重新构建了个人网站（johnrhea.com），在本地测试无误后，上传到服务器后网站无法正常运行。
• 动态生成的星星无法显示，游戏模式下页面空白，展示作品的页面上的小汽车也无法显示。

2. 初步调试
• 作者尝试通过谷歌搜索解决问题，但没有找到有效的答案。
• 控制台显示一些错误，但这些错误无法解释问题所在。
• 作者在本地使用 car.style.transform 设置变换时没有问题，但在服务器上 car.style 显示为未定义。

3. 尝试解决方案
• 作者尝试使用 setAttribute 方法来设置样式，但仍然遇到新的错误。
• 尝试联系服务器提供商，检查是否有服务器配置问题，但未发现任何问题。
• 作者向ChatGPT寻求帮助，但ChatGPT的建议未能解决问题。

4. 问题的最终解决
• 通过ChatGPT的建议，作者在控制台输出SVG元素的命名空间，发现服务器上的命名空间URL多了一个“s”。
• 作者意识到这是由服务器上的优化插件自动将不安全链接转换为安全链接导致的。
• 关闭该优化功能后，网站恢复正常运行。

5. 总结与反思
• 作者强调了服务器配置和优化插件可能对网站运行产生意想不到的影响。
• 鼓励读者在评论中分享类似的调试经历和解决方案。

CSS-Tricks

This Isn’t Supposed to Happen: Troubleshooting the Impossible | CSS-Tricks

What it looks like to troubleshoot one of those impossible issues that turns out to be something totally else you never thought of.

AI 摘要：本文探讨了如何使用容器查询来动态调整用户界面组件的布局，根据外部空间的可用性决定将分页箭头放置在组件内还是组件外，详细介绍了利用视口单位和容器查询的实现方法。

1. 引言
• 介绍了分页箭头的两种布局方式：外部和内部，取决于外部空间的可用性。
• 提到此方法由 Adam Argyle 提出，并对此方法进行详细探讨。

2. 实现原理
• 讨论了使用视口单位和容器查询的基本原理。
• 强调了容器查询的优势，即无需预设容器的具体尺寸，布局可以根据外部空间的变化动态调整。

3. 代码示例
• 展示了 HTML 结构，包含一个包装元素和内部元素，以及箭头元素。
• 提供了 CSS 代码，定义了容器的宽度使用 min(500px, 100vw)，确保在不同视口大小下的灵活性。
• 介绍了如何使用 @container 查询来检测容器尺寸，并在满足条件时改变内部元素的样式。

4. 具体应用
• 详细解释了如何使用 calc() 函数计算外部空间是否足够放置箭头。
• 展示了使用 translate 属性移动箭头的 CSS 代码。
• 附上了展示效果的视频，证明方法的有效性。

5. 结论
• 强调了这种方法的灵活性，即容器大小可变，而布局仍能正确响应。
• 提及可以使用自定义属性来进一步提高代码的灵活性。

Frontend Masters

Container Query for “is there enough space outside this element?”

Say you had a UI component that had pagination arrows for whatever reason. If there was enough space on the outside of that component, you wanted to put those arrows outside, like this this: