AI 摘要：本文介绍了如何使用 CSS 的锚点定位（anchor positioning）技术来摆脱 HTML 源代码顺序的限制，使得元素的定位更加灵活和简便。通过实例展示了如何将一个 div 覆盖在另一个 div 上，并详细解释了锚点定位的实现方法和优点。

• 简介
• 文章以十个 div 进入酒吧的比喻开始，解释了当空间不足时，如何让一个 div 坐在另一个 div 的“腿上”。
• 强调了 HTML 源代码顺序的重要性，因为在传统的 CSS 定位中，元素的顺序会影响定位效果。

• 传统的定位方法
• 展示了如何通过调整 HTML 源代码顺序来实现一个 div 覆盖另一个 div 的效果。
• 介绍了使用父子关系（parent-child）来定位 div 的方法。
• 详细解释了如何使用 CSS 的 position: relative 和 position: absolute 属性来实现定位，并通过 inset-block-start 和 inset-inline-start 属性将子元素固定在父元素的左上角。
• 通过设置子元素的宽度为父元素的 100%，实现完全覆盖父元素的效果。

• 锚点定位的优势
• 介绍了锚点定位技术如何简化定位过程，不再受限于 HTML 源代码顺序。
• 说明了锚点定位在最新版本的 Chrome 浏览器中默认支持。
• 展示了如何使用 anchor-name 属性定义锚点元素，并通过 position-anchor 属性将子元素与锚点元素连接。
• 解释了如何使用 position-area 属性来居中定位子元素，并通过 anchor-size() 函数设置子元素的大小以完全覆盖锚点元素。

• 结论
• 强调锚点定位技术的优点，即它不依赖于 HTML 源代码顺序，体现了 CSS 在内容和表现分离方面的优势。

CSS-Tricks

Anchor Positioning Just Don't Care About Source Order | CSS-Tricks

The fact that anchor positioning eschews HTML source order is so CSS-y because it's another separation of concerns between content and presentation.

AI 摘要：本文探讨了在项目开发中如何更好地管理和分类依赖包，提出了使用 pnpm catalogs 进行依赖分类和版本管理的方法，并介绍了相关的工具支持和未来可能的应用场景。

详细内容要点：

1. 引言
• 介绍了在项目开发中使用 npm 安装第三方包的情况。
• 解释了依赖包的两种主要类型：dependencies（生产依赖）和 devDependencies（开发依赖）。
• 展示了 package.json 文件中依赖包的示例配置。

2. 依赖包的基本概念
• 详细解释了 dependencies 和 devDependencies 的区别。
• 说明了这些概念最初是为 Node.js 库开发而引入的。
• 讨论了 npm 在安装包时如何处理依赖和开发依赖。

3. 项目类型分类
• 将项目分为三类：Apps（应用程序）、Libraries（库）和 Internal（内部包）。
• 指出依赖和开发依赖的区分主要适用于发布到 npm 的库。

4. 依赖包的多重用途
• 讨论了工具如何扩展依赖和开发依赖的含义以适应不同场景。
• 举例说明 Vite 和其他构建工具如何处理依赖包。

5. 依赖包分类的必要性
• 指出仅使用 dependencies 和 devDependencies 无法充分描述包的用途。
• 提出了一些可能的依赖分类方法，如 test、lint、build 等。

6. PNPM Catalogs 介绍
• 介绍了 pnpm catalogs 功能，允许在 monorepo 中共享依赖版本。
• 展示了如何在 pnpm-workspace.yaml 和 package.json 中配置 catalogs。
• 说明了 catalogs 如何简化版本管理和依赖分类。

7. 工具支持
• 讨论了使用 catalogs 后需要的工具支持。
• 介绍了作者开发的 VS Code 扩展 PNPM Catalog Lens，用于显示依赖版本。
• 列举了已适配 catalogs 的工具，如 taze、eslint-plugin-pnpm 等。

8. 未来展望
• 讨论了依赖分类在未来可能的应用场景，如在 Vite 和 unbuild 中更精细地控制依赖优化和外部化。
• 提出使用 catalogs 可以增强安全性报告和防止错误的打包操作。
• 作者表示已开始在项目中使用 catalogs，并鼓励读者尝试这种方法。

用 AI 算命，把 AI 当作心理咨询师，就是这种无知的具体表现。就连 AI 所擅长的编程工作，真正的程序员都还在担心 AI 会不会让自己变成文盲，而另一些可笑的人，做着相反的事情，还认为 AI 能让自己变得更聪明，能在一夜之间换一个职业，肆无忌惮地生产垃圾产品污染行业。

NoteGen 是一款跨平台的 Markdown 笔记应用，支持 Windows、Mac、Linux。它最大的特点，是把“记录”和“写作”这两步分开，并通过 AI 助手帮你把零散的内容自动整理成结构化的笔记，比如周报。但还有一个特点，就是比较消耗 AI 的 API Token，每一个记录都会询问 AI。

小众软件

NoteGen - 轻巧的开源、跨平台笔记应用，就是有太点费 AI：将碎片信息自动整理为笔记 - 小众软件

NoteGen 是一款跨平台的 Markdown 笔记应用，支持 Windows、Mac、Linux。它最大的特点，是把“记录”和“写作”这两步分开，并通过 AI 助手帮你把零散的内容自动整理成结构化的笔记，比如周报。但还有一个特点，就是比较消耗 AI 的 API Token，每一个记录都会询问 AI。@Appinn

Caesium 是一款跨平台开源图片压缩工具，支持批量处理 JPG、PNG、WebP 和 TIFF 格式，可在保持画质的同时显著减小文件体积，支持 Windows、macOS、Linux，并提供网页版便捷使用。 网页版限制：单次最多 10 个文件，单个文件不超过 20MB。

小众软件

Caesium - 开源，批量图片压缩工具[Win/macOS/Linux/网页版] - 小众软件

Caesium 是一款适用于 Windows、macOS、Linux 系统的批量图片压缩工具，支持支持 JPG、PNG、WebP 和 TIFF 格式。@Appinn

AI 摘要：本期 JavaScript Weekly 聚焦 p5.js 2.0 发布、React 新特性、Node.js 安全事件等热点，涵盖工具更新、技术文章与行业动态。核心内容包括创意编码库升级、React 实验性功能、Deno/Node 生态进展，以及 DuckDB-WASM 的趣味实验等。

1. 行业动态与更新
• Jet Propulsion Laboratory 团队远程修复 150 亿英里外的 Voyager 1 探测器故障
• p5.js 2.0 发布
• 新增字体支持、文本操作增强、JavaScript 着色器编写功能。
• 提供在线编辑器，适合快速创建交互式视觉项目（如 AI 生成的 JS Logo 故障艺术）。
• 团队展望未来发展方向。
• React 重大更新
• React Compiler 进入 RC 阶段。
• 实验性功能：View Transitions（视图过渡）和 <Activity> 组件。 #react
• 生态动态
• SolidJS：创始人回顾项目十年历程
• Node.js：披露 CI 安全事件细节
• Deno 2.3：即将发布，近期优化详情

2. 工具与版本发布
• 包管理：pnpm 10.9 支持 JSR 包安装。
• 引擎工具：jsvu 3.0 支持多版本 JavaScript 引擎管理。
• Bun v1.2.10、Node.js v22.15.0 (LTS)、Next.js 15.4 Canary、ESLint v9.25.1......

3. 技术文章
• 创意开发：Jhey Tompkins 实现 3D 翻牌显示器效果 #demo
• 趣味实验：Patrick Trainer 用 DuckDB-WASM 通过 SQL 生成 3D 图形

4. 工具与库推荐
• JavaScript Font Picker：支持系统字体与 Google Fonts 的字体选择器
• Scala.js 1.19.0：Scala 转 JavaScript 编译器