2024-第十四周

该周报主要为各个地方内容的汇总整理

技术

DAISHI KATO'S BLOG

这段文字是介绍了一些关于 Jotai 的技巧，作者通过推特分享了一系列的“Jotai 技巧”，并提供了相关的示例和解释。这些技巧涵盖了 Jotai 的各种用法和特性，旨在帮助读者更好地理解和应用 Jotai。

• 作者在 Twitter 上分享了多个 Jotai 的技巧和提示，旨在帮助读者更好地理解和应用 Jotai。
• 这些技巧涵盖了 Jotai 中的多个方面，包括原子的衍生、异步操作、条件性使用原子等，为使用 Jotai 的开发者提供了丰富的参考和指导。
• 作者以简洁清晰的方式解释了每个技巧，并通过 Twitter 的形式分享，展示了 Jotai 的实际应用场景和技术细节。

Introducing ESLint Config Inspector

这篇文章介绍了 ESLint Config Inspector 工具，它是一个可视化工具，帮助用户理解和检查 ESLint 的平面配置文件。该工具通过 CLI 命令或 npx 命令启动本地 Web 服务器，可视化展示配置文件，包括配置对象概述、文件路径匹配、可用规则等功能。文章还介绍了 ESLint v9.0.0 的新功能和发布情况。

• ESLint Config Inspector 是一个可视化工具，可以帮助用户理解和检查 ESLint 的配置文件。
• 它提供了诸如配置项概览、文件路径匹配和可用规则等功能，使得配置文件的理解和维护更加简单和愉快。
• ESLint v9.0.0 推出了新的配置系统，并发布了 ESLint Config Inspector，为用户提供了更透明、更易管理的配置文件，带来了诸多益处。

An Interactive Guide to CSS Container Queries

CSS container queries 是一种新的 CSS 功能，它解决了基于容器大小而非视口大小进行样式调整的问题。本文介绍了 CSS container queries 的语法和用法，并提供了多个实际示例。同时，也介绍了 CSS style queries，它可以根据容器的上下文条件动态应用样式。这些新功能将对前端开发产生深远影响，有望在未来减少对传统媒体查询的依赖。

• CSS 容器查询解决了根据容器宽度而不是视口宽度来调整 UI 组件样式的问题，使得 UI 组件可以根据容器的大小动态变化。
• CSS 容器查询使用简单的语法，可以使用@container 和 container-type 定义容器类型，然后根据容器的大小来应用自定义的 CSS 样式。
• 使用 CSS 容器查询可以避免使用媒体查询，提供了更精确和灵活的方式来调整 UI 组件的样式，使得布局更加动态和适应性更强。

WHAT EVEN IS A JSON NUMBER?

这段文字探讨了 JSON 中的数字类型在不同规范、实现和语言中的表现。它涵盖了数字表示的范围和精度，以及在不同编程语言中的序列化和反序列化行为。此外，还讨论了与 OpenAPI 相关的代码生成器对数字类型的处理。总结指出，对于定义使用数字的 API，应指定 OpenAPI 中的格式，并避免某些格式以确保跨多语言的兼容性。

• JSON 中的数字在不同的规范和实现中有不同的限制和解释，可能会导致精度损失和互操作性问题。
• 不同编程语言的 JSON 解析器对数字的处理方式各不相同，可能会导致范围和精度的限制。
• 在设计使用数字的 API 时，需要考虑不同规范和实现对数字的限制，以及在 OpenAPI 中指定数字格式的最佳实践。

BFCache explained

本文介绍了浏览器的 BFCache（后退/前进缓存）机制，它可以在内存中保留完全渲染的页面快照，使得用户在后退或前进时页面几乎立即呈现，无需重新加载整个页面。BFCache 还包括 JavaScript 堆的存储和执行暂停机制，以及开发人员应注意的页面生命周期事件和测试方法。最后提到了优化页面以适应 BFCache 的重要性。

• BFCache 是浏览器的后退/前进缓存机制，可以在内存中保留完全渲染的页面快照，使得页面在后退或前进时几乎立即呈现，减少加载时间。
• BFCache 通过在内存中存储整个网页的快照以及暂停正在执行的 JavaScript 代码来实现，对于定时执行的代码和未解决的 Promise 都能够恢复执行。
• 开发人员需要注意 BFCache 的生命周期事件，如页面加载事件不会被触发，需要监听 pageshow 事件来检测页面是否是从 BFCache 中恢复，避免使用 unload 事件监听器并避免发送 Cache-control: no-store 头部指令，以确保网页兼容 BFCache 并提供更快速、流畅的用户体验。

工具

restore-scroll

🌀 页面导航时恢复元素的滚动位置

next-route-handler-pipe

通过将函数连接在一起，为您的 Next.js 路由处理程序创建可重复使用的函数流水线。

shadergradient

一个用于 React 的可定制的 3D 移动渐变包，也可以在 Figma 和 Framer 等现代设计工具中使用

counterscale

在 Cloudflare 上自己运行的可扩展网络分析工具

ts-pattern

🎨 一款用于 TypeScript 的全面模式匹配库，具备智能类型推断功能。

更新

Introducing Babylon.js 7.0

Babylon.js 7.0 是一个强大、美观、简单且开放的网络渲染引擎，增加了诸多新功能和性能优化，包括节点几何生成、全局光照、高斯喷溅渲染、布娃娃物理、WebXR 和 Apple Vision Pro 支持、动画系统更新、glTF 支持等。同时，也提及了社区贡献和感谢。

• Babylon.js 7.0 是一个强大、美观、简单、开放的网络渲染引擎，通过引入新功能和性能优化，如节点几何、全局光照和高斯散点渲染，为网络开发者提供了更多可能性。
• 新版本支持全局光照，使场景中的光线和阴影呈现更加逼真的效果，为用户提供更加身临其境的体验。
• Babylon.js 7.0 还加入了对 Apple Vision Pro 的全面支持，并通过更新动画引擎和 glTF 规范支持等功能，继续保持其在网络渲染技术领域的领先地位。

这段文本描述了 JavaScript 信号标准提案的内容，该提案旨在推动 JavaScript 生态系统中信号的标准化。信号是一种用于管理应用程序状态的基础设施，可以在多个框架中使用，并为框架提供了一种通用的信号图和自动跟踪机制。该提案旨在解决复杂用户界面开发中的应用状态管理问题，并探讨了信号的核心功能、设计目标、标准化进展和应用场景等内容。

proposal-signals

这段文本描述了 JavaScript 信号标准提案的内容，该提案旨在推动 JavaScript 生态系统中信号的标准化。信号是一种用于管理应用程序状态的基础设施，可以在多个框架中使用，并为框架提供了一种通用的信号图和自动跟踪机制。该提案旨在解决复杂用户界面开发中的应用状态管理问题，并探讨了信号的核心功能、设计目标、标准化进展和应用场景等内容。

• JavaScript Signals 是一个用于管理应用程序状态的基础设施，能够解决复杂 UI 应用程序中的重复状态管理问题，使开发人员能够专注于业务逻辑的开发。
• Signals 采用自动依赖跟踪和延迟计算的方式，能够有效管理状态变化，避免不必要的计算和渲染，提高应用程序的性能和效率。
• 该提案的目标是通过多个生产级别的 polyfill 实现和大规模框架集成验证其可行性，以确保在推进到下一个阶段之前经过充分的测试和验证。

其他

dom3d.js