AI 摘要：本文详细介绍了 Chrome 在 Apple Silicon Macs 上推出的 Skia 新光栅化后端 Graphite。Graphite 是一个面向未来的图形渲染技术，显著提升了 Chrome 在 Motionmark 1.3 测试中的表现，同时为未来的图形改进奠定了基础。通过支持现代图形 API（如 Metal、Vulkan 和 D3D12）、多线程设计以及深度测试等创新技术，Graphite 不仅提高了渲染性能，还优化了用户体验，减少了滚动卡顿和页面加载等待时间。

1. Skia 在 Chrome 中的历史：
• 介绍了 Skia 作为 Chrome 图形渲染核心的历史，从最初的性能问题到引入 GPU 加速后端 Ganesh。
• Ganesh 虽性能优异，但因其以 OpenGL 为中心的设计，难以充分利用现代图形 API 的优势，因此团队开发了 Graphite。

2. Graphite 的成果：
• 在 Macbook Pro M3 上，Motionmark 1.3 得分提升近 15%。
• 优化了真实世界指标，如交互到下一帧时间（INP）、最大内容绘制时间（LCP）、图形流畅度（掉帧百分比）以及 GPU 内存使用等。

3. Graphite 与 Ganesh 的区别：
• 现代图形 API：Graphite 利用 Chrome 的 WebGPU 实现 Dawn，支持 Metal、Vulkan 等现代 API，减少维护负担并提升多线程和 GPU 计算能力。
• 2D 深度测试：通过深度测试减少过度绘制（overdraw），优化不透明和半透明对象的渲染顺序，提升性能并降低移动设备功耗。
• 多线程设计：Graphite 的 API 支持多线程，利用独立记录器（Recorders）在多线程上生成记录（Recordings），减轻主线程负担，减少卡顿和延迟。
• 性能悬崖与管线编译：Graphite 减少渲染管线数量，避免因管线编译导致的卡顿，确保复杂内容与简单内容渲染效率一致。

4. 未来计划：
• 多线程光栅化：计划将光栅化任务分配到多线程，进一步提升性能。
• 减少简单内容的 GPU 内存：通过重新发布记录（Recordings）优化滚动，减少不必要的 GPU 内存分配。
• GPU 计算路径光栅化：探索 GPU 计算路径光栅化技术，提升视觉质量和性能，替代传统的 MSAA 和 CPU 光栅化。

Bring static visuals to life with rotating textures, 3D geometry, and smooth motion powered by React Three Fiber.
使用旋转纹理、3D 几何图形和由 React Three Fiber 驱动的平滑运动，将静态视觉效果赋予生命力。

jhey ʕ•ᴥ•ʔ (@jh3yy)：keypad w/ CSS + <img> layers 🧑‍🍳
.key { mask: url(keycap.png); }
.key:active img { translate: 0 20%; }
use keycap images as a mask for the container that they translate in ✨
bonus: clip-path to clip the hit area + filter to style the keys 🤙

AI 摘要：本文探讨了 JavaScript 中 string.slice() 方法在处理 Unicode 字符串时可能导致的问题，特别是在处理包含表情符号等复杂字符时会意外截断代码单元，导致数据传输和解码错误。通过一个实际案例（Attio 的 CSV 导入工具与 Google Spanner 数据库交互时出现的 gRPC 错误），作者深入分析了 JavaScript 字符串的 UTF-16 编码机制、代码点和代码单元的区别，以及如何使用更安全的方法（如基于代码点的迭代）来避免这类问题，最终提供了解决方案并修复了错误。

1. 引言：CSV 导入工具的背景与问题
• 讲述了 Attio 的 CSV 导入工具每月处理大量数据，数据来源多样且不可预测，容易遇到边缘情况。
• 发现了一个 gRPC 错误，涉及 Google Spanner 数据库，错误提示请求协议无效。

2. 问题复现与初步分析
• 通过日志查询和客户提供的 CSV 文件复现了问题。
• 在调试过程中，注意到一个字符串截断函数 truncateSortableValue ，使用 slice() 方法截断字符串。
• 发现当 slice() 截断到表情符号（如 🇬🇧）中间时，得到的是不完整的代码单元，导致后续错误。

3. 深入理解 JavaScript 字符串与 UTF-16 编码
• 介绍了 JavaScript 字符串基于 Unicode 和 UTF-16 编码，解释了代码点（code point）和代码单元（code unit）的概念。
• 指出 UTF-16 使用 16 位代码单元存储字符，常见字符占一个单元，复杂字符如表情符号可能占两个单元。
• 讨论了字形簇（grapheme cluster），如表情符号由多个代码点组合而成，截断时需特别注意。
• 强调 string.slice() 是基于代码单元操作，而非代码点，可能导致截断不完整字符，影响数据编码（如传输到数据库时的 UTF-8 编码问题）。

4. 问题根源：编码与解码失败
• 分析了将不完整代码单元编码为 UTF-8（如使用 Buffer.from 或 protobufjs）时，解码端无法正确还原字符串，导致错误。
• 虽然无法直接调试 Google Spanner 的闭源代码，但通过示例证明了这种编码失败是问题的根本原因。

5. 解决方案：基于代码点的安全截断
• 提出了使用 [Symbol.iterator]() 或扩展运算符来基于代码点而非代码单元进行字符串操作。
• 提供了一个新函数 safeHead()，安全地获取字符串前 n 个代码点，避免中途截断代码单元。
• 修改了原截断函数 truncateSortableValue，使用新方法解决问题，最终通过拉取请求修复了导入工具的错误。

Attio

JavaScript string slice() considered harmful | Attio

Understanding UTF-16 and protobuf encodings to resolve a bug in our CSV importer.

AI 摘要：本文讨论了在无特定意见的 Node.js 框架（如 Express、Hono 等）中，如何设计一个可扩展且适合生产环境的文件结构。作者和评论者围绕领域驱动设计（DDD）、模块化单体架构（Modular Monolith）以及文件结构对代码库可维护性的影响展开了激烈讨论。部分人认为文件结构对团队协作和代码库扩展至关重要，而另一些人则认为其重要性被夸大，强调不应过于纠结于目录布局。

Reddit

From the node community on Reddit: Best Scalable File Structure for unopinionated Node frameworks?

Explore this post and more from the node community

AI 摘要：本文详细探讨了云计算中常常被忽视的一项成本——数据出口（Data Egress），即从云服务提供商的网络向公共互联网传输数据所产生的费用。文章列举了多家主流云服务提供商的免费额度和超出免费额度后每 1 TB 数据的出口费用，价格从免费到数百美元不等，旨在帮助用户了解并对比不同提供商的成本差异，强调了根据实际需求选择云服务的重要性。

1. 云服务提供商数据出口费用对比（AI 总结的，需在文中验证）
• 免费且无限制的提供商：包括 UpCloud、Runpod、Civo、Contabo、DataCrunch、Green AI Cloud、Hostinger、Hyperstack、Lambda Labs、OVHcloud、Paperspace、The Cloud Minders 和 Wasabi，用户使用这些服务无需担心数据出口成本。
• 部分免费的提供商：Cloudflare 和 Scaleway 提供大部分服务的免费出口流量，但具体取决于服务类型。
• 有免费额度但超额收费的提供商：
• Hetzner（1-60 TB 免费额度，超额 1 TB 收费 $1.17）
• Linode（1-20 TB 免费额度，超额 1 TB 收费 $5.00）
• Oracle Cloud（10 TB 免费额度，超额 1 TB 收费 $8.50）
• Backblaze、Bunny CDN、DigitalOcean、Entrywan、Vultr（免费额度不同，超额 1 TB 收费 $10.00）
• Nebius（100 GB 免费额度，超额 1 TB 收费 $15.00）
• Cloudways、Database Mart、Exoscale、Fly.io、Koyeb（免费额度不同，超额 1 TB 收费 $20.00）
• Railway（无免费额度，1 TB 收费 $50.00）
• Alibaba Cloud（10 GB 免费额度，1 TB 收费 $74.00）
• Microsoft Azure（100 GB 免费额度，1 TB 收费 $87.00）
• AWS（100 GB 免费额度，1 TB 收费 $90.00）
• Supabase（5-250 GB 免费额度，1 TB 收费 $90.00）
• Sevalla、Zeabur（100 GB 或 10-100 GB 免费额度，1 TB 收费 $100.00）
• Google Cloud（视服务而定，1 TB 收费 $120.00）
• Vercel（100 GB-1 TB 免费额度，1 TB 收费 $150.00）
• Render（100 GB-1 TB 免费额度，1 TB 收费 $300.00）
• Netlify（100 GB-1 TB 免费额度，1 TB 收费 $550.00）
• 价格说明：价格可能因地区和其他因素而异，文章以北弗吉尼亚（美国）或法兰克福（德国）地区为基准，并基于若干假设进行估算，建议用户查阅提供商的最新定价页面。

2. 理解云数据传出：介绍了数据传出作为云计算中常被忽视的成本，开发者在使用云服务时需关注此费用，因为大量数据传输可能导致费用快速增加。
3. 什么是数据传出：为数据离开云服务提供商网络到公共互联网的过程，可能包括用户下载数据或数据在不同云提供商之间的传输，通常按 GB 或 TB 计费。
4. 数据传出与传入的对比（Data Egress vs Ingress）： 区分了数据传入（通常免费）和数据传出（通常收费）的概念，以文件上传和下载为例说明了两者的实际应用场景。
5. 为何云服务商对数据传出收费？ - 解释了云服务商因基础设施和带宽成本而对数据传出收费的原因，同时指出收费也可能用于限制网络饱和或频繁的大量数据转移行为。
5. 降低数据传出成本的策略 - 提供了多种降低成本的方法，包括利用免费额度、使用内容分发网络（CDN）缓存静态资源、数据压缩、监控使用量、以及利用私有网络传输数据。

Getdeploying

Data Egress: What is it and how much does it cost?

List of data egress costs for major cloud providers with tips on how to keep costs down.

AI 摘要： 本期 Node Weekly（#585，2025年7月8日）涵盖了 Node.js 生态系统的最新工具、教程和资讯，重点介绍了处理无效 JSON 数据的工具 jsonrepair、修复 Node 中 emoji 切片问题的技术、以及多个实用工具和框架如 Bruno 和 grammY。此外，还包括 Node.js 官方 API 文档设计改进的进展、AI 驱动的颜色搜索引擎开发教程，以及 JavaScript 生态系统中的其他动态，如 Deno 2.4 发布和 Rust 在 JS 工具链中的应用趋势。

1. 核心内容与工具
• jsonrepair: 介绍了一个修复无效 JSON 文档的工具，适用于处理 LLM 或不合规软件输出的异常 JSON，可通过 Node、CLI 或在线版本使用。
• Codepoint–Safe Truncation: 针对 Node 中 CSV 导入因 emoji 导致的错误，James Mulholland 展示了如何通过代码点感知的 spread 方法解决切片问题。
• Bruno: 一个基于 Node 和 Electron 的开源 HTTP API 测试 IDE，作为 Postman 的轻量级替代品，支持复杂和简单的请求测试。
• Poolifier 5.0: 实现 worker_threads 和 cluster 的工作池，支持可中止任务。
• grammY: 一个最新的 Telegram 机器人框架，简化机器人开发，支持最新的 Telegram Bot API。 【这个好用的喵】
• 0x 6.0: 一款单命令生成 Node 进程交互式火焰图的性能分析工具。
• 其他工具更新：包括 Babel 7.28.0（支持原生 TS 配置和 ES2026 资源管理）、Inquirer.js 12.7（命令行交互 UI）、Secretlint 10.2（防止凭据泄露）、Faker 9.9（生成伪造数据）等。

2. 教程与资源
• What’s the Difference Between Ordinary Functions and Arrow Functions?: James Sinclair 探讨普通函数与箭头函数的区别。
• Am I Online?: Anton Zhiyanov 介绍一种通过检查特定 Google URL 判断应用是否在线的方法。

3. Node.js 社区动态：
• API 文档改进：Node.js 团队正在通过 api-docs-tooling 工具重塑 API 文档的设计和构建流程，并分享了初步进展。
• 数据出口成本比较：对比了 Vercel、AWS 等约 40 个流行云服务的数据出口费用。
• Node 应用文件结构讨论：Reddit 的 /r/node 社区就 Node 应用文件结构展开了有趣讨论。

4. JavaScript 生态系统其他资讯：
• Rust 在 JS 工具中的应用：Oliver Stenbom 讨论 JavaScript 工具链逐渐被 Rust 重写的趋势。 【锈化！】

GitHub

GitHub - josdejong/jsonrepair: Repair invalid JSON documents

Repair invalid JSON documents. Contribute to josdejong/jsonrepair development by creating an account on GitHub.

尤雨溪 (@yuxiyou)：人生第一笔一级市场投资退出，基本没赚钱，心情有点复杂
没亏钱我很满意，当时本来就没准备能拿回来。心情复杂的原因估计过段时间了解前端生态的人就明白了

NuxtLabs, creators of Nuxt and Nitro, are joining Vercel.

Same license, roadmap, and open governance, but now in a joint mission to build the best web.

AI 摘要：本文详细探讨了在 CSS、Android、iOS、Figma 和 Sketch 等多个平台和设计工具中实现一致的阴影效果（drop shadow）的问题。作者通过对比不同平台的阴影渲染差异，指出模糊半径（blur radius）的处理方式是导致不一致的主要原因，并提供了具体的缩放因子（scale factors）来调整模糊半径，以实现跨平台的视觉一致性。文章还深入分析了各平台的渲染机制和技术细节，为设计师和开发者提供了实用的转换公式和指导。

1. 引言与问题背景
• 介绍了跨平台阴影效果不一致的问题，通过图片对比展示了 CSS、Android 和 iOS 渲染相同阴影参数时的差异（例如 Y 偏移 24px，模糊半径 24px 的阴影在各平台呈现不同）。
• 指出 Android 使用 setShadowLayer 而非 Material elevation，CSS 和 Android 阴影虽接近但仍有细微差异（Android 更模糊）。

2. 浏览器间的阴影一致性
• 讨论了 CSS 阴影在不同浏览器（Safari、Firefox、Chrome）中的表现，发现 box-shadow 在这些浏览器中渲染效果基本一致，截图以 Safari 为主。

3. 设计工具与 CSS 的对比
• 指出 CSS、Sketch 和 Figma 的阴影效果一致，但背景模糊（background blur）不在本文讨论范围内，仅聚焦于阴影效果。

4. 模糊半径的差异分析
• 阴影的参数中，位置偏移和颜色在各平台表现一致，唯独模糊半径的处理方式不同。
• 作者通过重新排列模糊测试结果，发现模糊半径存在 1×、2× 和 3× 的缩放模式，阴影主要集中在 1× 和 2× 范围内。

5. 缩放因子与技术细节
• 解释了 CSS 规范中模糊半径的标准差为模糊半径的一半，而 iOS 的模糊半径是 CSS 的两倍，因此 CSS 到 iOS 的缩放因子为 0.5×。
• Android 使用 Skia 渲染，模糊半径缩放涉及 1 / sqrt(3) 的因子，与 CSS 不完全一致（部分原因是早期 Safari 的影响）。
• 提供了详细的缩放因子表格，用于在 CSS、Sketch、Figma、Android 和 iOS 之间转换模糊半径，例如 CSS 到 Android 为 0.866×，iOS 到 CSS 为 2.0×。
• 通过调整后的对比图和色调分离（posterising）结果，展示了缩放后的阴影效果非常接近，尽管由于渲染方法和代码差异无法完全一致。

6. 应用与结论
• 研究目的是为 Pinwheel 工具导出 Android 和 iOS 阴影代码时提供正确的缩放因子，确保跨平台一致性。
• 总结了实现近似一致阴影的可行性，并感谢 Kit Grose 在审稿中提供的 Skia 代码注释支持。

Bjango

Matching drop shadows across CSS, Android, iOS, Figma, and Sketch

If you’ve ever tried to implement consistent shadows across multiple platforms and design tools, you may have noticed that they don’t look the same. Thankfully, it is possible to get them all to match.

AI 摘要： 本期 Smashing Newsletter #514 聚焦于 CSS 的最新技术和工具，介绍了多项创新功能和实用资源，包括 CSS 中的 if() 函数、锚点定位 API、缓动函数工具、阴影匹配技巧以及 CSS 渐变效果等。

1. CSS 新特性（Chrome 137）：
• 介绍了 if() 函数，支持基于自定义属性值和样式查询编写逻辑样式，增强了 CSS 的逻辑控制能力。
• reading-flow 属性通过声明预期的焦点顺序提升键盘和屏幕阅读器的可访问性，解决视觉顺序与 DOM 源顺序不匹配的问题。

2. CSS 径向渐变创建 CSS 爆炸背景效果
• Chris Coyier 展示了如何仅用 CSS 创建爆发背景效果，利用 conic-gradient() 和硬性停止点的特性，结合径向渐变实现文本空间和视觉层次。

3. CSS 缓动函数工具（Easing Wizard）
• Matthias Martin 开发的 Easing Wizard 工具帮助开发者可视化和测试 CSS 缓动函数，支持多种类型（如 Bézier、弹簧、反弹等），并提供预设和代码导出功能。

4. 跨平台阴影匹配
• Marc Edwards 提供了一份阴影转换比例表，帮助开发者在 CSS、Android、iOS、Figma 和 Sketch 等平台间实现一致的阴影效果，尽管渲染差异无法完全消除，但可接近匹配。

5. CSS 锚点定位 API 工具
• Una Kravets 开发的 Anchor Position Tool 简化了锚点定位 API 的使用，通过可视化界面展示元素相对锚点的定位效果，并生成可直接使用的 CSS 代码。

6. HTML 输入图标样式修复
• Cassidy Williams 分享了一个解决暗模式下日期/时间输入图标不可见的技巧，利用 ::-webkit-calendar-picker-indicator 伪元素调整图标样式，支持滤镜、不透明度和自定义图像。

Frontend Masters

CSS Bursts with Conic Gradients

You can make stripes with CSS gradients pretty easily. It’s that classic thing where you don’t fade a color from one to another, you just switch colors by having two colors share the same “color stop”. I made this one time to explain that:

AI 摘要：本文内容涵盖了前端开发的最新动态、技术技巧和资源分享。文章重点介绍了 CSS 自定义高亮 API、表单控件样式的未来改进、ARIA 辅助技术的使用、TypeScript 的 satisfies 关键字、SVG 滤镜效果等多个技术话题。此外，还分享了有趣的项目、工具以及作者对代码注释和工作恐惧的思考，旨在为读者提供有价值的行业资讯和学习资源。

Stefanjudis

Web Weekly #162

The CSS Custom Highlight API, new ways to style form controls, and things to know about ARIA.

AI 摘要：本文是关于 CSS shape() 函数系列的第四篇文章，重点介绍了两个较少使用但非常实用的命令：close 和 move 。作者详细解释了 close 命令如何用于闭合形状，以及在特定情况下如何优化代码；同时，move 命令被用于在单一 shape() 定义中创建多个不连续的形状部分，极大地扩展了设计可能性。通过具体的代码示例和应用场景（如切出形状和重复形状），文章展示了如何利用这两个命令实现复杂的 CSS 形状设计。

CSS-Tricks

Better CSS Shapes Using shape() — Part 4: Close and Move | CSS-Tricks

The shape() function's close and move commands may not be ones you reach for often, but are incredibly useful for certain shapes.

AI 摘要：本文详细介绍了如何使用 Framer Motion 和 React 创建一个带有 Gooey 效果的搜索交互组件。作者受到动态岛动画的启发，将 Gooey 效果应用于搜索栏，打造了一个小型但有趣的交互体验。教程涵盖了 Gooey 效果的实现、SVG 滤镜的应用、Framer Motion 的集成、搜索状态管理、动画效果的优化以及针对 Safari 浏览器的兼容性处理，旨在激发开发者创意并提供实用指导。

1. Gooey 效果的创建：
• 介绍了 Gooey 效果的起源，基于 Lucas Bebber 的文章 The Gooey Effect。
• 通过调整 SVG 滤镜中颜色矩阵的 alpha 通道值，实现自定义的 Gooey 效果。
• 提供了具体的代码示例，展示了如何使用 feGaussianBlur 和 feColorMatrix 创建滤镜效果。

2. 应用 Gooey 效果：
• 在主组件中通过 CSS 将 SVG 滤镜应用到父元素上。
• 提供了简单的代码结构，展示滤镜如何与 DOM 元素结合。

3. Framer Motion 集成：
• 使用 Framer Motion 为搜索栏添加动态动画效果，定义了四种状态（初始状态、搜索激活、搜索结果、加载中）来管理交互逻辑。
• 使用 AnimatePresence 组件实现搜索结果的集体展示和个体动画效果。
• 详细解释了 getResultItemVariants 和 getResultItemTransition 函数，用于控制搜索结果项的动画效果（如缩放、位移、模糊效果）。
• 动画设计注重细节，例如通过索引计算延迟实现顺序动画，并使用弹簧动画（spring）增加流畅性。

4. Safari 兼容性挑战：
• 提到 WebKit 对 SVG 滤镜的限制，作者通过 isUnsupported 布尔值对 Safari 浏览器进行了动画调整。
• 强调了兼容性问题的长期存在，并提供了针对性的解决方案。

AI 摘要：本文由白帽黑客 Sharon Brizinov 撰写，详细描述了他如何通过 GitHub Archive 和 GitHub Event API 扫描自 2020 年以来所有公开的“Oops Commits”（即被开发者通过强制推送删除的提交）以寻找泄露的秘密信息。他发现了价值 25,000 美元的漏洞赏金，并与 Truffle Security 合作开源了一款工具 Force Push Scanner，用于帮助组织检测隐藏的提交中的秘密。文章深入探讨了 GitHub 如何永久存储被删除的提交、如何利用 API 和自动化工具发现这些提交中的敏感信息，以及如何通过手动和 AI 辅助的方式筛选出高价值的秘密。

1. 背景介绍
• Sharon Brizinov 是一位专注于 OT/IoT 设备漏洞研究的白帽黑客，偶尔参与漏洞赏金狩猎。
• 此前发表过关于 GitHub 仓库中隐藏秘密的文章，与 Truffle Security CEO Dylan 交流后，决定进一步探索大规模秘密狩猎的新方法。
• 使用 GitHub Event API 和 GH Archive 项目，专注于扫描“零提交推送事件”（即被删除的提交）以发现秘密。

2. 什么是删除提交？
• 解释了开发者通过 git reset 和 git push --force 删除提交的过程，目的是隐藏误提交的敏感信息。
• 指出即使提交被删除，GitHub 仍会永久存储这些“悬挂提交”（dangling commits），通过提交哈希值即可访问。
• 通过示例展示了如何在自己的仓库中模拟删除提交，并证明即使本地看不到，GitHub 依然保留记录。
• 探讨了 GitHub 保留这些提交的原因，可能是为了支持拉取请求、分支、审计等功能。

3. GitHub Event API 的作用
• 介绍了 GitHub Event API，用于获取 GitHub 上的各种事件数据（如推送代码、创建仓库等）。
• 结合 GH Archive 项目（一个开源的 GitHub 事件归档服务），可以访问历史事件数据，避免手动猜测提交哈希。
• 通过筛选“零提交推送事件”（PushEvent Zero-Commit），快速定位被删除的提交。

4. 自动化构建
• 描述了如何通过自动化工具扫描 GH Archive 数据，提取“Oops Commits”，并使用 TruffleHog 扫描其中的秘密。
• 与 Truffle Security 合作开源了 Force Push Scanner 工具，支持组织或用户扫描自己的“Oops Commits”。
• 强调工具的道德使用，仅用于帮助团队评估潜在风险。

5. 寻找高影响力的秘密
• 扫描自 2020 年以来的数据，发现了数千个活跃的秘密。
• 通过手动搜索（过滤公司邮箱相关提交）、自定义工具（vibe-coded 平台用于分类和可视化）和 AI 辅助分析，筛选出高价值秘密。
• 数据显示：MongoDB 秘密泄露最多，但 GitHub PAT 和 AWS 凭据最具价值；.env 文件是泄露最频繁的文件类型。

6. 案例研究：阻止供应链攻击
• 发现了一个开发者泄露的 GitHub PAT，具有对 Istio 项目（一个开源服务网格，拥有 36k 星标）的管理员权限。
• 该权限可能导致大规模供应链攻击，如修改代码、创建发布或删除项目。
• 通过 Istio 的漏洞报告页面及时报告，团队迅速撤销了 PAT，阻止了潜在风险。

7. 总结与反思
• 项目成功发现了大量秘密，Sharon 通过漏洞赏金获得约 25,000 美元。
• 强调“删除提交并不安全”的观念，一旦秘密被提交，应视为已泄露并立即撤销。
• 开源工具和研究成果旨在帮助社区提高安全意识和防护能力。

Trufflesecurity

Guest Post: How I Scanned all of GitHub’s “Oops Commits” for Leaked Secrets ◆ Truffle Security Co.

GitHub Archive logs every public commit, even the ones developers try to delete. Force pushes often cover up mistakes like leaked credentials by rewriting Git history. GitHub keeps these dangling commits, from what we can tell, forever. In the archive, they…

AI 摘要：本期 JavaScript Weekly（#743，2025年7月4日）内容涵盖了 JavaScript 生态系统的最新动态，包括 Deno 2.4 的重大更新、ECMAScript 2025 新特性解析、以及多个工具和库的发布。尽管受到热浪和假期的影响，内容略显精简，但仍包含了丰富的文章、工具和行业新闻，适合对 JavaScript 及相关技术感兴趣的开发者深入了解最新趋势和技术进展。

1. 技术更新
• Deno 2.4 更新：重新引入 deno bundle 命令，支持服务器和客户端单文件打包，兼容 npm 和 JSR 依赖，具备自动树摇功能；新增 import 导入任意文件功能，OpenTelemetry 支持稳定，标志着一次重要的版本更新。
• Bun v1.2.18 发布：作为 Deno 的竞争者，Bun 也推出了新版本，具体细节未展开，但值得关注。
• ECMAScript 2025 新特性：Paweł Grzybek 提供了以示例为主的视角，介绍 ES2025 的新特性，与之前 Dr. Axel 的解读形成补充。
• 其他工具发布：包括 Rspack 1.4（基于 Rust 的快速打包工具，支持 WebAssembly）、Electron 37.0、ESLint 9.30.0/9.30.1、Astro 5.11、Babel 7.28.0 和 Three.js r178 等。

2. 行业简讯
• JavaScript 商标纠纷：Ryan Dahl 更新了与 Oracle 关于 JavaScript™ 商标的纠纷进展，Oracle 有一个月时间回应 Deno 的取消请愿。
• JS1024 代码高尔夫比赛：一项年度 JavaScript 代码高尔夫比赛，主题为“Creepy”，参赛者需在 1024 字节内完成程序，截止日期为 7 月 19 日。
• 微软开源：GitHub Copilot Chat 扩展在 VS Code 上开源，展示微软扩展开发方式。

3. 文章与教程
• 如何构建 AI 驱动的颜色搜索引擎：Lúí Smyth 介绍如何结合多种技术打造 AI 驱动的颜色建议工具，技术应用具有广泛实用性。 #AI #color
• 轻量级响应式状态管理：Loren Stewart 探讨使用 JavaScript 原生代理（Proxies）构建响应式状态管理系统，避免依赖外部库。
• Next.js 全栈开发：Robin Wieruch 指导如何使用 Next.js 15 和 React 19 进行全栈开发，适合希望扩展技能的前端开发者。
• JavaScript 解析谜题：Hillel Wayne 分享一个简单的 14 字符 JS 问题，挑战开发者解析能力，是今年最受欢迎的内容之一。
• 2025 Node.js 模式：Ashwin 反思 Node.js 当前潜力，涵盖 ES 模块、内置 Web API、测试运行器等新特性。
• 其他专题：包括通过超声波传输数据（Lorenz Diener）、React 信号知识（Ryan Carniato）、Mapbox 3D 模型指南（Mykola Chernyshevskyi）、JSDoc 优化开发流程（Jordan Booker）。

4. 代码与工具
• Milkdown：一个插件驱动的 WYSIWYG Markdown 编辑器框架，支持高度定制化。
• Repomix 1.0：将代码库打包为 AI 友好格式，适合用 LLM 分析代码。
• snapDOM 1.8：快速准确地将 DOM 节点捕获为 SVG 图像，保留样式和字体。 【这个看着挺不错的 相比 html2canvas 等】
• Time Picker：基于 shadcn/ui 的日期时间选择组件，简洁优雅。
• 其他工具：包括 Protobuf-ES 2.6、React Chessboard 5.0、Faker 9.9、Pixi.js 8.11 等。

5. 其他生态系统动态
• Patreon 国际化重构：涉及超 10,000 个 JavaScript 调用点的国际化重构故事。
• Cloudflare Containers：Cloudflare 推出新容器服务，扩展 Workers 功能。
• One Million Chessboards：在线 1000x1000 棋盘项目的工程和扩展故事。
• GitHub 漏洞赏金：Sharon Brizinov 分享通过追踪 GitHub 强制推送的提交发现价值 25k 美元的秘密。
• PlanetScale 进军 Postgres：MySQL 云服务提供商进入 Postgres 领域，处于私有预览阶段。
• Strudel：浏览器内编码音乐的工具，提供实时示例。

Deno

Deno 2.4: deno bundle is back | Deno

Deno bundle is back, alongside the addition of bytes and text imports, stabilized built-in OpenTelemetry, a new --preload flag, simplified dependency management with deno update, and more.