AI 摘要：本文探讨了如何通过 CSS 实现多级嵌套列表的复杂编号样式（如法律文档中的 1. (a) (i) (A) 格式），并对比了传统选择器、CSS 嵌套和 @counter-style 的解决方案，同时强调了 HTML type 属性作为无 CSS 回退方案的重要性。

1. 问题背景
• 读者提问如何实现法律文档中常见的五级嵌套列表编号（如 1. (a) (i) (A) ）
• 示例场景：物业管理条例中的条款层级结构

2. 基础解决方案
• 传统选择器方法：通过 ol ol 层级选择器逐级设置 list-style-type （如 decimal 、lower-alpha ），但代码冗长且难以维护
• CSS 嵌套优化：利用 CSS 嵌套简化代码结构，使样式与 HTML 层级一一对应

3. 法律文档的特殊需求
• 括号 (a) 或 (i) 是法律格式的必需部分，需通过 @counter-style 自定义计数器样式：
• 扩展预定义样式（如 lower-alpha ），添加 prefix 和 suffix（如 (a) ）。
• 示例： enclosed-lower-alpha 样式将 a 包裹为 (a) 。

4. 无 CSS 兼容性方案
• 使用 HTML type 属性（如 type="a" ）确保旧浏览器或无 CSS 时仍显示正确编号。
• 法律文档中此功能至关重要，避免格式错误导致的法律歧义。

5. 相关资源扩展
• 文中推荐了 CSS-Tricks 关于 list-style 、 @counter-style 和计数器样式的其他文章，供深入学习。

CSS-Tricks

A Reader's Question on Nested Lists | CSS-Tricks

Answering a reader's question about how to create a complex numbering system with CSS list counters.

早上醒来就被推送Bilibili开源了自己的视频生成模型anisora

AI 摘要：作者 Ruslan 探讨了生成器（Generators）的实用性和闭包（Closures）的替代方案，通过一个移动平均计算的例子对比了两者的实现方式，并分享了个人对生成器语法适应性的思考。

1. 引言
• 作者 Ruslan 表达了对生成器适用场景的探索兴趣（2025年5月16日）。
• 提出闭包可能在某些任务中替代生成器的观点。

2. 代码示例：闭包实现移动平均计算
• 定义 calculateMovingAverage 函数，返回一个闭包函数。
• 闭包内部逻辑：
• 检查数据边界（windowStart > values.length-1 时返回 undefined）。
• 滑动窗口截取数据并计算平均值（slice + reduce）。
• 通过 nextAverage() 逐步获取计算结果，并在点击事件中更新 UI。

3. 生成器与闭包的对比
• 隐式对比：生成器（未展示代码）可能提供更简洁的状态管理（如 yield）。
• 闭包需显式维护状态（如 windowStart 变量）。

4. 结论与个人体会
• 作者逐渐适应生成器的语法设计（“ergonomics is growing on me”）。
• 暗示生成器在复杂状态场景下更具优势，但未深入展开。

Alex MacArthur

I think the ergonomics of generators is growing on me.

I took a stab at getting more familiar with iterators, iterables, and generators. I think I'm starting to like the ergonomics.

AI 摘要：本期 JavaScript Weekly 涵盖了 JavaScript 生态的最新动态，包括生成器函数的实用性探讨、V8 引擎的显式资源管理新特性、现代 CSS 开发技巧，以及 React 和 Angular 等框架的更新。此外，还介绍了多个工具库的发布和实用教程，为开发者提供了丰富的技术资源。

1. 简讯（In Brief）
• 你知道 console.log 支持格式化字符串吗？
• Deno 团队更新了 Fresh 框架。
• Angular 20 预计于 5 月 29 日发布。
• 微软裁员波及 TypeScript 核心贡献者 Ron Buckton。
• Brian Clark 分享了现代 npm 包开发的最佳实践。

2. 版本发布（Releases）
• Node.js 多个版本的 5 月 14 日安全更新（v24.0.2、v23.11.1 等）。
• Nuxt 3.17、Parcel v2.15.0（支持 SVG 到 JSX 转换）、React Router 7.6 等。

3. 文章推荐（Articles）
• 生成器函数的实用性：作者 Alex MacArthur 探讨了 JavaScript 中生成器函数的实际应用场景，指出尽管生成器函数已存在多年，但其实际用途尚未被广泛发掘。文章详细介绍了生成器函数的概念及其适用场景。
• JavaScript 中的 this 关键字：Mat Marquis 深入解析 this 的动态绑定机制。
• GitHub Copilot 构建 React 应用：Kedasha Kerr 的教程，结合视频演示快速开发。
• JavaScript 正则表达式：Adebayo Adams 总结了正则表达式的强大功能。

4. 工具与库（Code & Tools）
• ANSIS 4.0：支持多环境的 ANSI 颜色库。
• TanStack DB：基于 TanStack Query 的实时同步客户端存储。
• Svelte Sonner：Svelte 版的 Toast 通知组件。
• tscircuit：用 JSX 设计电路板的创新工具。
• Feedsmith：全新的 Web 源解析器和生成器：解析和生成 RSS、Atom、JSON 源、OPML 和 RDF 源的全新现代方法，支持播客、媒体和其他特定类型源中使用的常见命名空间。
• Fx 36.0：命令行 JSON 处理工具，支持流式 JSON 解析，性能大幅提升。

Bluesky Social

Luciano Mammino 📙 Node.js Design Patterns (@loige.co)

console.log() is probably the first function I ever used in Node.js...

And yet, I was today years old when I learned it supports format strings! 🤯

🧵👇

AI 摘要：本文深入探讨了 JavaScript 中将值转换为字符串的常见方法及其潜在问题，分析了 v.toString() 、 String(v) 、 ''+v 、 ${v} 和 JSON.stringify(v) 等方法的差异与适用场景，尤其关注对特殊值（如 null 、 undefined 或非原型对象）的处理，并提供了如何安全实现字符串化的实践建议。

1. 引言与问题提出
• JavaScript 的字符串转换看似简单，但某些值（如 null 或未定义原型的对象）可能导致异常。
• 示例代码： v.toString() 在特定情况下会抛出错误（如 v = null ）。

2. 五种常见转换方法对比
• v.toString() ：依赖对象的 .toString() 方法，对 null / undefined 无效。
• String(v) ：安全但可能返回非预期结果（如对象默认 [object Object] ）。
• '' + v 或模板字符串：隐式调用 .toString() ，同样受限于接收者类型。
• JSON.stringify(v) ：支持复杂对象但仅处理有限数据类型（忽略 undefined 等）。

3. 特殊值的处理
• null / undefined ：仅 String() 和 JSON.stringify() 能安全处理。
• 无原型对象：需直接调用 Object.prototype.toString.call(v) 避免方法查找失败。

4. 对象与数组的字符串化
• 普通对象默认输出 [object Object] ，可通过重写 toString() 自定义。
• 数组的 toString() 会扁平化元素，但嵌套结构信息可能丢失。
• 函数返回源码字符串，但 JSON.stringify() 会跳过函数属性。

5. JSON.stringify() 的深度应用
• 支持多行格式化输出（通过第三个参数控制缩进）。
• 局限性：不转换 Symbol 、 BigInt 或循环引用， undefined 属性会被忽略。

6. 调试工具的输出优化
• console.log 和 console.dir 提供更友好的对象展示，但默认深度有限。
• Node.js 可通过 depth: null 显示无限嵌套；浏览器控制台支持交互式展开。

AI 摘要：本文深入解析了 V8 JavaScript 引擎如何将人类可读的代码转换为机器码的全过程，重点介绍了 Ignition 解释器、字节码生成与执行机制，以及 TurboFan 的 JIT 优化技术。通过示例代码的字节码逐步分析，揭示了 V8 如何利用寄存器、反馈向量和对象形状（Shapes）实现高效执行，最终将高频调用的“热点”函数编译为机器码。

1. 脚本加载与解析
• 浏览器通过 HTML 解析器识别 <script> 标签并获取 JavaScript 文件字节流。
• 字节流解码器 将原始字节转换为标记（Tokens），例如识别 function 为关键字。

2. 语法分析与 AST 生成
• 解析器 将 Tokens 转换为抽象语法树（AST），同时检查语法错误。

3. Ignition 解释器与字节码执行
• Ignition 将 AST 编译为平台无关的字节码（介于人类代码与机器码间的抽象层）。
• 寄存器操作示例（以 calc 函数为例）：
• LdaSmi [10] 加载常量到累加器 → Star1 存入寄存器 r1
• GetNamedProperty a0,[0] 获取参数对象属性（如 obj.x ）→ 通过 Add 指令进行运算。
• 最终结果通过 Return 指令返回。

4. 优化技术（TurboFan JIT）
• 反馈向量（Feedback Vector）：记录运行时类型信息（如对象形状），用于触发优化。
• 对象形状（Shapes）：相同结构的对象（如 {x,y,z} ）共享形状，加速属性访问。
• JIT 编译：对高频调用的“热点”函数生成优化的机器码，若类型假设失效则回退至解释执行。

5. 关键概念
• 寄存器类型：通用寄存器（ r0-rn ）、参数寄存器（ a0-an ）、累加器（临时存储计算结果）。
• 字节码调试：通过 node --print-bytecode 查看生成的字节码。

AI 摘要：本期 Awesome JavaScript Weekly 涵盖了 JavaScript 生态的最新动态，包括语言特性（如显式资源管理）、工具更新（如 Lume 3 发布）、技术实践（如 HTTP Range 请求的视频服务））。

1. 技术文章与更新
• Hyper-Typing：过度类型化 #typescript
• JavaScript's New Superpower: Explicit Resource Management：探讨 JavaScript 新增的显式资源管理特性及其优势。
• Serving Video with HTTP Range Requests：介绍如何利用 HTTP Range 请求实现高效视频流传输。
• How V8 JavaScript Engine Works Behind the Scenes：深度解析 V8 引擎的内部工作原理。
• Converting values to strings in JavaScript has pitfalls：讨论 JavaScript 中值转换为字符串的常见陷阱。
• Teaching Coding with JavaScript and P5.js：使用 JavaScript 和 P5.js 进行编程教学的经验分享。
• Joys and sorrows of designing a language：语言设计过程中的挑战与收获。

2. 工具与框架发布
• Lume 3 was released：静态站点生成器 Lume 的第三版发布。
• Real-time Github Analytics with ClickHouse, Redpanda：结合 ClickHouse 和 Redpanda 实现实时 GitHub 数据分析的方案。
• deebo-prototype：自主调试代理 MCP 服务器。
• strudel：基于 Web 的算法音乐实时编码环境，移植自 TidalCycles。
• react-bits：开源动画 React 组件库，支持高度定制化。