AI 摘要：本期 Node Weekly 聚焦 Node.js 24 发布、AI Agent 开发、JavaScript 生态工具更新（如 Bun、Deno、Llama Stack），以及社区动态（如 Node.js Next 10 调查）等。

1. 社区动态
• Node.js 24 发布 成为新的 Current 版本，替代 EOL 的 v18 和 v23，附带：npm 11、V8 13.6（支持 RegExp.escape、Float16Array 等）、默认暴露 URLPattern API、Undici 7。
• Llama Stack 应用：Meta 的 Llama Stack 是一组统一的 API，用于处理现代 LLM 驱动的堆栈的众多部分，支持 RAG（检索增强生成），Michael Dawson 提供实践指南。 #AI #RAG
• Node.js Next 10 调查：Linux Foundation 发起，征集未来十年 Node.js 发展方向意见。
• Redis 重新开源：v8.0 恢复开源许可。
• GSAP 免费：商业动画库 GSAP 全面开放免费使用。
• ECMAScript 提案：显式资源管理（Stage 3）已在 Chrome 134+ 和 Node 24 实现。
• npm 恶意软件：攻击者仿冒知名库名发布恶意包。

2. 运行时与工具更新
• Bun v1.2.12：增强 Node 兼容性、现在可以通过终端上的 Bun 将浏览器控制台日志流式传输回去。
• Deno 2.3：改进单二进制编译，支持 FFI、Node 原生附加组件和本地 npm 包。
• PGlite 0.3：基于 WASM 的 Postgres，可在浏览器或 Node 中运行。 #WASM
• Prisma v6.7：加速从 Rust 转向 TypeScript。
• SVGO 4.0（SVG 优化）、Jira.js（Jira API 封装）、RedisSMQ（Redis 消息队列）……
• Josh Ceau 的 Operator Lookup 网站使得 JavaScript 运算符查找变得容易，甚至可以找到您以前从未遇到过的运算符，例如 >>>=。

Red Hat Developer

Retrieval-augmented generation with Llama Stack and Node.js | Red Hat Developer

With Llama Stack being released earlier this year, we decided to look at how to implement key aspects of an AI application with Node.js and Llama Stack. This post covers retrieval-augmented generation

AI 摘要：本文介绍了在 Tailwind CSS 中使用自定义字体的方法，重点讨论了通过本地安装字体和 Web 字体两种方式，并提供了具体的实现步骤和代码示例。

1. 引言
• 作者提到自己搜索“如何在 Tailwind CSS 中使用自定义字体”的需求，并找到了解决方案。
• 问题背景：在 React 项目中，没有全局 CSS 文件的情况下如何添加本地安装的字体。

2. 解决方案
• 方法 1：通过 index.html 文件添加本地字体
• 在 index.html 中插入 <link> 标签引用本地字体文件。
• 适用于 React 项目，且作者认为这种方式更符合标准，尤其是已通过类似方式导入 Web 字体的情况。
• 方法 2：使用 Web 字体
• 通过 CDN 或在线链接导入字体（如 Google Fonts）。
• 需要在 Tailwind 配置文件中扩展字体配置。

3. 潜在问题与建议
• 作者不确定从其他角度看这种方法是否存在问题，但认为在当前项目中是可行的。
• 提示读者根据项目需求选择最合适的字体导入方式。

LogRocket Blog

How to use custom fonts in Tailwind CSS - LogRocket Blog

Learn how to use Google Fonts and locally installed fonts in a Tailwind project to help you improve your typography and design consistency.

AI 摘要：本文是一份关于 CSS 容器查询的交互式指南，详细介绍了容器查询的语法、使用场景、常见问题及解决方案，并通过大量实例演示如何利用容器查询实现响应式组件设计，替代传统的媒体查询方法。

1. Introduction to container queries
• 容器查询解决了基于容器宽度（而非视口）调整 UI 的痛点，传统媒体查询在此场景下存在局限性。
• 示例：页面头部操作按钮的标签显示/隐藏逻辑通过容器查询优化。

2. Container query syntax
• 基本语法：通过 container-type 和 container-name 定义容器，使用 @container 规则查询。
• 支持简写：container: name / type。

3. Common pitfalls
• 容器不能依赖内容自动调整大小（需显式设置或通过 Flex/Grid 布局控制）。
• 无法直接查询容器自身的样式（需额外包装元素）。

4. Container query units
• 引入容器相对单位（如 cqw, cqh），实现容器内的流体排版和间距控制。

5. Use cases
• 卡片组件：根据容器宽度切换堆叠/水平布局。
• 仪表盘部件：动态调整 widget 样式以适应不同列宽。
• 时间线组件：窄容器显示垂直布局，宽容器显示水平布局。
• 表单输入：基于容器空间自动调整网格列数。

6. Style queries
• 实验性功能（仅 Chrome/Safari TP 支持），通过查询 CSS 变量（如 --featured: true）切换样式。
• 示例：结合 :has() 选择器控制时间线布局。

7. DevTools 支持
• Chrome 开发者工具可调试容器查询应用的元素。

8. Resources & Related articles
• 推荐了容器查询规范、兼容性检查工具及其他相关文章（如 CSS :has() 指南）。

Outro
容器查询标志着响应式设计的范式转变，未来将逐步替代媒体查询在组件级布局中的应用，但媒体查询仍适用于全局布局。

Ishadeed

An Interactive Guide to CSS Container Queries

Learn how to use CSS container queries today.

AI 摘要：本文探讨了如何通过 CSS 自定义属性和 @property 规则，实现嵌套容器中子元素使用外层容器的容器查询单位（如 cqw）而非默认的最近父容器，从而解决嵌套容器场景下的单位计算问题。

1. 问题背景
• 开发者 Matt Wilcox 指出：当存在嵌套容器时，容器查询单位（如 cqw）默认相对于最近的父容器计算，无法直接指定外层容器作为基准，导致布局设计受限。

2. 技术基础
• 容器查询（Container Queries）和容器单位（Container Units）是 CSS 的新特性，允许元素样式基于容器尺寸动态调整。
• 示例代码展示了嵌套容器（.outer-container 和 .inner-container）的结构，以及子元素 .inner-child 使用 20cqw 时默认相对于 .inner-container 计算的问题。

3. 尝试解决方案
• 失败方案 1：直接为 .inner-child 指定 outer 20cqw 语法无效。
• 失败方案 2：通过 CSS 变量传递 --s: outer 20cqw 同样不被支持。
• 部分成功方案：将变量 --s: 20cqw 定义在 .inner-container 中，但子元素继承时仍基于 .inner-container 计算。

4. 最终解决方案
• 使用 @property 注册自定义属性 --s，强制其继承并保留原始计算值（基于 .outer-container 的 20cqw），从而在子元素中正确应用。
• 代码示例：
@property --s {
syntax: '<length>';
initial-value: 0px;
inherits: true;
}

Frontend Masters

Using Container Query Units Relative to an Outer Container

Recently, Matt Wilcox posted on Mastodon:

AI 摘要：Zod 4 作为 TypeScript 生态中广受欢迎的 schema 验证库迎来重大升级，通过性能优化（解析速度提升 3 倍）、内置 JSON Schema 转换、轻量级 @zod/mini 模块等新特性，显著提升了开发效率和应用性能，尤其适合现代 Web 应用和大型项目。

1. 性能优化
• 深层嵌套 schema 解析速度提升 3 倍，内存效率更高
• 核心库体积减少 57%，更适合前端性能敏感场景
• 减少 20 倍 TypeScript 编译器实例化，改善大型项目类型检查速度

2. 轻量级替代方案 @zod/mini
• 专为边缘计算/无服务器环境优化，支持 tree-shaking
• 保留核心功能（如 .parse()），与完整版 Zod 无缝兼容

3. 内置 JSON Schema 转换
• 原生支持 .toJSON() 方法，替代第三方工具
• 示例代码展示如何快速生成符合规范的 JSON Schema

4. 全局注册表 (z.globalRegistry)
• 集中管理 schema 元数据（ID/描述/示例）
• 自动生成可复用的 $defs 引用，简化大型应用维护

5. 增强错误处理
• z.prettifyError 提供多行格式化错误输出，提升调试体验

6. 原生文件验证
• 新增 z.file() 支持 MIME 类型、文件大小等约束
• 示例演示如何验证上传文件的扩展名和尺寸

7. 升级指南
• 通过 npm install zod@latest 升级
• 注意废弃的 API（如 z.nullable() 改为 z.nullish()）

LogRocket Blog

Here's why everyone's going crazy over Zod 4 - LogRocket Blog

Heard the buzz about Zod 4? Learn what’s new in this update, why it matters, and how it could transform your workflow.