2025-第二十二周

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

技术

渐进式 JSON

本文探讨了如何将渐进式 JPEG 的加载思路应用于 JSON 数据传输，提出了一种称为“渐进式 JSON”的流式传输方法。通过广度优先的方式分块发送数据，客户端可以逐步处理部分数据，而无需等待全部内容加载完成。文章还讨论了 React 服务器组件如何利用这一机制优化用户体验，并通过<Suspense>控制加载状态的显示。

• 🌐 渐进式 JSON 的概念：借鉴渐进式 JPEG 的思路，JSON 数据可以分块传输，客户端逐步接收并处理，而非等待完整数据。
• 🔄 流式 JSON 解析器的局限性：传统流式解析器可能返回不完整的对象，导致客户端难以处理缺失字段或不确定是否还有后续数据。
• 🧩 广度优先的分块传输：通过占位符（如$1）和 Promise 表示未加载的部分，客户端可以逐步填充数据，提升响应速度。
• ⚡ 优化策略：根据实际需求选择内联（单块发送）或分块传输，平衡效率与用户体验。
• 🔄 数据去重与循环引用：通过“外联”机制减少重复数据，并支持循环引用的序列化。
• ⚛️ React 服务器组件的应用：React 利用渐进式 JSON 流式传输组件树，结合<Suspense>控制加载状态的显示，避免页面布局跳跃。
• 🚀 挑战与改进方向：现有工具应更多采用流式数据传输，避免因单个慢速操作阻塞整体性能，同时需设计兼容的编程模型。

醒来，Remix！

在 React Conf 上宣布 Remix 将进入“休眠”状态，并将 Remix v2 的核心功能合并到 React Router v7 中。现在，React Router v7 已成为一个稳定且强大的工具，支持 RSC（服务器组件），并被多家大型公司采用。Remix v3 将重新出发，专注于简化、性能和模块化，脱离对 React 的依赖，基于 Preact 构建，并遵循一系列开发原则，如模型优先、基于 Web API、避免依赖等。

🛌 Remix 进入休眠：Remix v2 功能合并到 React Router v7，项目简化。 🚀 React Router v7 发布：支持 RSC，提供稳定平台，被 Shopify、X.com 等广泛使用。 🔄 Remix 重新出发：Remix v3 将脱离 React，基于 Preact 构建，追求轻量化和高性能。 🧩 模块化设计：Remix v3 将提供模块化工具包，支持独立使用或组合。 📜 开发原则：包括模型优先、基于 Web API、避免依赖、强调组合性等。 🎸 社区参与：邀请开发者参与 Remix Jam，共同探讨未来方向。

TanStack Router 之美 | TkDodo 的博客

TanStack Router 是一款专为 TypeScript 设计的现代化路由解决方案，提供出色的开发者体验和类型安全支持。以下是其主要特点：

• 🚀 类型安全路由：完全基于 TypeScript 设计，提供高度类型推断，避免手动类型断言，确保路由参数和链接的类型安全。
• 🔍 严格或宽松参数获取：通过 useParams 的 strict 和 from 参数，灵活控制路由参数的获取方式，兼顾类型安全和复用性。
• 🔗 类型安全的链接：<Link> 组件自动验证目标路由和参数，避免无效导航。
• 📊 搜索参数状态管理：支持搜索参数的验证和类型化，通过 validateSearch 和标准 schema 库（如 arktype）实现。
• ⚡ 细粒度订阅：通过选择器（selectors）优化性能，避免不必要的重新渲染，类似状态管理库的订阅机制。
• 📂 文件式路由支持：支持代码式和文件式路由配置，便于快速定位和维护路由逻辑。
• ⏳ 内置 Suspense 支持：自动包裹路由组件，简化异步数据加载和错误边界处理。
• 🔄 React Transitions 限制：目前因 useSyncExternalStore 的限制，对并发特性的支持有限。
• 🛠 更多功能：包括路由上下文、嵌套路由、查询集成等，全面提升开发效率。

TanStack Router 结合了类型安全和开发者友好性，是 React 生态中路由方案的佼佼者。

构建你自己的 TanStack Query

从头开始重写以深入学习 TanStack Query。

• 🔄 通过实践从头重写代码来加深对 TanStack Query 的理解
• � 强调动手经验在掌握新技术中的重要性
• 📚 目标是更全面地掌握 TanStack Query 的核心概念和用法

CSS 实用类与“关注点分离”

Adam Wathan 分享了他从语义化 CSS 到功能型 CSS 的转变过程，探讨了如何通过实用工具类（utility classes）提高 CSS 的可重用性和一致性。

• 🔄 从语义化 CSS 到功能型 CSS：作者最初遵循“关注点分离”原则，使用基于内容的类名（如 .author-bio），但发现 CSS 仍然高度依赖 HTML 结构。
• 🧩 BEM 方法：采用 BEM 风格的类名（如 .author-bio__image）降低了 CSS 对 HTML 结构的依赖，但仍面临相似组件的样式复用问题。
• ♻️ 内容无关的组件：通过创建与内容无关的组件（如 .media-card），实现样式的高效复用，但 HTML 需要依赖 CSS 的类名。
• 🛠️ 实用工具类：引入实用工具类（如 .align-right、.mar-r-sm）进一步解耦样式，避免重复编写 CSS，并通过组合类名快速构建 UI。
• 🎨 一致性与约束：实用工具类强制开发者从预定义的选项中选择样式，避免随意值，从而提升设计一致性。
• ⚖️ 组件与实用工具类的平衡：作者建议以实用工具类优先，仅在模式重复出现时提取为组件，避免过早抽象。
• 🚀 推荐工具：介绍了 Tachyons、Basscss 等实用工具类框架，并推荐了自己的开源项目 Tailwind CSS。

这种实用工具优先的方法通过约束样式选择，显著提升了代码的可维护性和设计一致性。

我觉得 generators 的工效学越来越吸引我了

作者分享了对 JavaScript 生成器（generators）逐渐产生好感的心路历程，探讨了其语法糖特性、惰性求值优势，以及在实际场景中的应用价值，如解耦组件、简化异步操作和高效分页处理。

• 🌟 作者最初对生成器持保留态度，但通过实践逐渐欣赏其设计理念和实用性。
• 🔄 生成器依赖迭代器（iterator）和可迭代协议（iterable），通过next()方法按需生成序列值。
• 🛋️ 惰性求值是核心优势——仅在需要时计算值，避免不必要的性能开销（如处理大型数据集或复杂计算）。
• 🧩 生成器能有效降低代码耦合度，封装内部状态（如动态计算移动平均值案例），提升模块化。
• ⏳ 异步生成器（async generator）简化轮询逻辑（如定期获取应用指标），替代setInterval/递归方案，避免回调地狱。
• 📚 分页场景中，生成器按需请求数据，减少内存占用并加速首屏处理。
• 🛠️ 动态生成元素等工具函数中，生成器提供类似数组的解构能力（如const [el1, el2] = getElements()）。
• 🤔 作者承认生成器并非万能，但认可其重构问题解决思路的长期价值。

6 种方式：Slack、Notion 和 VSCode 如何提升 Electron 应用性能 | Palette 文档

Electron 应用性能优化的六个关键策略，通过 Slack、Notion 和 VSCode 等案例展示了如何解决启动慢和交互卡顿问题。

• 🚀 使用打包工具替代 require()
  避免同步阻塞的require()，采用 Webpack/Vite 等打包工具，显著提升启动速度（如 Atom 案例中减少模块加载时间）。

• ⏳ 延迟非关键代码加载
  通过路由级代码拆分（如 React 的lazy+Suspense）和异步导入，将启动时间从 10 秒缩短至 3 秒。

• 🏗️ 迁移计算密集型任务到 WebAssembly/Native 模块
  Notion、Figma 等应用通过 WASM 或原生模块（如 1Password 加密）优化性能，实现确定性高性能。

• 📸 利用 V8 快照加速初始化
  使用electron-link生成快照（如 Atom 启动提速 50%），避免动态值且适用于框架初始化阶段。

• 📊 监控生产环境用户体验指标
  收集点击/滚动延迟等感知性能数据（如 Slack 内置监控工具），VSCode 通过输入延迟追踪版本回归。

• 🔥 端到端 JavaScript 性能分析
  Notion 借助 Palette 平台分析生产环境代码瓶颈，定位 15% 输入延迟问题，缩短故障排查周期 3-4 周。

构建一个 Hold to Delete 按钮组件

这篇文章介绍了一个通过长按按钮触发渐变过渡效果的组件设计方法，以下是关键要点：

• 🚀 组件受欢迎：作者在 X 平台上分享了这个组件，获得了大量喜爱。
• � 基础结构：初始是一个简单样式的按钮，包含默认单色版和渐变揭示版两个版本。
• 🎨 覆盖层设置：使用绝对定位的.hold-overlay覆盖按钮，并通过clip-path: inset(0px 100% 0px 0px)隐藏右侧内容。
• ✨ 揭示效果：通过:active伪类和clip-path属性实现长按时从左向右的渐变显示（2 秒线性过渡）。
• ⚡ 优化交互：释放按钮时过渡更快（200ms 缓出），按压时保持慢速（2 秒线性）以增强确认感。
• 🔍 细节打磨：添加按压时按钮轻微缩放（scale(0.97)）的动画，提升交互反馈。
• 📚 扩展学习：该组件源自作者的网页动画课程，涵盖从基础 CSS 到复杂 Framer Motion 的动画设计。

工具

rybbit

🐸 Rybbit - 开源且注重隐私的谷歌分析替代品，直观程度提高了 10 倍。

fuji-recipes

一个用于从 EXIF 制造商备注中提取富士相机配方数据的 TypeScript 库

traceperf

TracePerf 是一个用于 Node.js 应用程序的高级性能跟踪和执行监控工具，支持浏览器环境，提供统一的 API 和丰富的功能。

errsole/errsole.js：用单一模块收集、存储和可视化日志

Errsole.js 是一个开源的 Node.js 日志工具，提供日志收集、存储和可视化功能，内置日志查看器，支持多种存储方式和高级配置。

• 📦 开源日志工具 - Errsole.js 是一个用于 Node.js 应用的开源日志工具，内置日志查看器。
• 🚀 简单集成 - 只需引入模块，无需额外服务器或复杂配置。
• 📝 高级日志功能 - 自动收集控制台日志，支持多级别日志和元数据附加。
• 💾 灵活存储 - 支持文件、SQLite、MySQL、PostgreSQL、MongoDB 等多种存储方式。
• 🔍 可视化查看 - 提供 Web 仪表盘，支持日志过滤和搜索，具备安全认证功能。
• 🚨 错误通知 - 应用崩溃或关键错误时发送通知，包含错误详情和直接访问链接。
• ⚡ 高性能 - 比 Elasticsearch 和 Amazon CloudWatch 处理更多请求。
• 🔧 多环境支持 - 开发环境推荐 SQLite，生产环境支持 MySQL、PostgreSQL 等。

tiagorangel1/cap: Cap 是一款轻量级、现代的开源 CAPTCHA 替代方案，采用 SHA-256 工作量证明设计

Cap 是一个轻量级、现代的开源 CAPTCHA 替代方案，基于 SHA-256 工作量证明（proof-of-work）设计，注重隐私和性能。

• 🌐 开源项目 - Cap 是完全开源的，采用 Apache 2.0 许可证。
• 🚀 轻量高效 - 核心组件 @cap.js/widget 仅 12KB（压缩后），比传统 CAPTCHA 方案更小。
• 🔒 隐私优先 - 使用工作量证明机制，无需追踪或收集用户数据。
• ⚙️ 模块化设计 - 包含多个组件：前端控件 (widget)、服务端验证 (server)、CLI 工具 (cli) 和 WASM 支持 (wasm)。
• 🐳 多语言支持 - 通过 Docker 提供独立模式，支持非 JavaScript 环境。
• 🎨 高度可定制 - 支持自定义前端样式和服务端逻辑。
• 🤖 反机器人机制 - 适用于 API 防护、表单防垃圾、登录防爆破等场景。
• 🔄 无依赖 - 可在 Bun/Node.js/Deno 等 JS 环境中运行，也可通过 REST API 集成。
• 🆚 替代方案 - 相比 reCAPTCHA/hCaptcha，采用计算验证而非行为追踪。

react-teleporter

react-teleporter 是一个用于在 React 树中传送组件的工具，适用于复杂应用中跨组件配置的场景，类似于 react-helmet 的哲学。

• 🚀 功能：在同一个 React 树中传送组件，支持动态配置布局。
• 📦 安装：通过 npm install react-teleporter 安装。
• 🎯 核心方法：createTeleporter 创建传送器，包含 Target（目标位置）和 Source（源内容）。
• 🔄 示例：将 Page 组件的“Loading...”内容传送到 Header 组件的 StatusBar.Target 位置。
• ❓ 用途：解决复杂应用中跨组件配置的问题，如动态修改布局或状态。
• 🛠️ 高级用法：
  • 自定义目标标签（如 as="footer"）。
  • 向目标传递属性（如 onClick）。
  • 使用 useTargetRef 创建自定义目标引用。
  • 支持多源内容注入（通过 multiSources: true 配置）。
  • 子组件为函数时，可访问目标元素（如触发事件）。
• 📖 API：仅暴露 createTeleporter 方法，返回包含 Target、Source 和 useTargetRef 的对象。

livestore

LiveStore 是一个基于响应式 SQLite 和内置同步引擎的下一代状态管理框架

Extract2MD

Extract2MD 是一个强大且多功能的 AI 驱动客户端 JavaScript 库，用于从 PDF 文件中提取文本并将其转换为 Markdown

更新

Angular 20——让魔力流动

Angular 20 版本发布，专注于提升稳定性、性能和开发者体验，带来了一系列新特性和改进。

• 🎖️ 稳定化功能：包括 effect、linkedSignal、toSignal 等 API 正式成为核心功能。
• 🌊 增量水合：仅在视口内渲染 UI，提升性能。
• 🛤️ SSR 路由 API：支持更精细的服务器端渲染配置。
• 🧙‍♂️ Zoneless 模式（开发者预览）：减少对 Zone.js 的依赖，提升性能。
• 🔥 弃用旧指令：*ngIf、*ngFor 和 *ngSwitch 被新的内置控制流（@if、@for、@switch）取代。
• 🛠️ 动态组件创建：支持信号输入、输出和双向绑定。
• 🧪 测试更新：Karma 被弃用，探索 Vitest 作为替代方案。
• 🛠️ 开发者工具增强：Angular 性能分析集成到 Chrome DevTools。
• 🤖 GenAI 支持：新增 llms.txt 文件帮助生成现代 Angular 代码。
• 🎨 Material 更新：按钮组件对齐 Material 3 设计，新增覆盖 API 和动画控制。

Docusaurus 3.8

Docusaurus 3.8 发布，优化了构建性能，引入新功能和"Future Flags"以支持 Docusaurus 4 的过渡。升级简单，遵循语义化版本控制，无破坏性变更。

• 🚀 构建性能提升：通过多项优化和新增的"Docusaurus Faster"选项显著加快构建速度。
• ⚡ Docusaurus Faster：实验性功能，启用后大幅提升构建效率，建议通过experimental_faster: true一键开启。
• 🔄 持久化缓存：Rspack 持久化缓存支持，二次构建速度提升 2-5 倍，需保留./node_modules/.cache目录。
• 🧵 工作线程池：静态站点生成使用 Worker Threads，速度提升约 2 倍，需启用ssgWorkerThreads标志。
• 🛠️ 其他优化：包括并行化 macOS 浏览器启动、Git 命令队列管理、SVG 精灵优化等，减少构建时间和内存占用。
• 🔥 实测效果：React Native 网站冷构建速度提升 3.8 倍，热重建提升 7 倍；Docusaurus.io 类似显著改进。
• 🚧 Future Flags：新增 v4 未来标志（如 CSS 层叠、postBuild变更），支持渐进式适配 Docusaurus 4。
• 🌐 多语言支持：补充土耳其语、波兰语、中文、日语等主题翻译。
• 🔧 维护更新：兼容 Node.js 24 和 TypeScript 5.8，移除废弃依赖（如react-dev-utils），内部化未维护包。
• 📦 功能增强：文档版本下拉菜单支持自定义版本、Bun 包管理器标签支持、更稳定的 CSS 类名等。

发布 v14.0.0 · tj/commander.js · GitHub

commander.js 发布了 v14.0.0 版本，要求 Node.js v20 或更高版本，新增了功能组支持和未转义负数参数解析，修复了一些问题，并进行了内部重构。

• 🚀 新增了对选项和命令组支持，通过 .helpGroup()、.optionsGroup() 和 .commandsGroup() 方法 (#2328)
• 🔢 支持未转义的负数作为选项参数和命令参数 (#2339)
• 🛠 TypeScript 中为 Argument 类添加了 parseArg 属性 (#2359)
• 🐛 修复了帮助信息中默认值无描述时的多余空格问题 (#2348)
• 🔄 .configureOutput() 现在复制设置而非原地修改，避免副作用 (#2350)
• ⚠️ 重大变更：Commander 14 需要 Node.js v20 或更高版本
• 🔧 内部重构了 Help 类，新增 formatItemList() 和 groupItems() 方法 (#2328)
• 🎉 发布版本 v14.0.0，包含上述更新和修复

Node.js — Node v22.16.0（长期支持版）

Node.js v22.16.0 (LTS) 版本发布，包含多项功能更新、性能优化和错误修复。

• 🚀 重要更新：时区数据更新至 2025b 版本，确保日期和时间处理的准确性。
• 📚 文档改进：新增 Dario Piotrowicz 为协作者，并修复多处文档错误和格式问题。
• ⚡ ESM 增强：支持import.meta属性的正式毕业，提升模块系统的稳定性。
• 🛠 SQLite 功能扩展：新增StatementSync.prototype.columns()方法，增强数据库操作能力。
• 🔧 配置支持：引入node.config.json作为默认配置文件，简化应用配置管理。
• 🧩 新 API：新增worker.getHeapStatistics()方法，提供工作线程堆内存统计信息。
• 🐞 错误修复：修复跨领域SharedArrayBuffer验证和ArrayBuffer检查问题，提升安全性。
• ⚙️ 性能优化：改进断言和工具模块的深层对象比较性能，提升执行效率。
• 📦 依赖更新：升级 zstd 至 1.5.7，zlib 至 1.3.0.1，确保依赖库的最新功能和安全性。
• 🔄 流处理改进：在finished()中保留 AsyncLocalStorage 上下文，确保异步操作的连续性。
• 📊 测试增强：新增多个测试用例，覆盖 SQLite、REPL 和 HTTP/2 等模块，提升代码质量。

设计

背景素材网站

高品质、颗粒感纹理和平滑渐变背景素材

AI

MoneyPrinterTurbo

MoneyPrinterTurbo 是一款全自动短视频生成工具，用户只需提供视频主题或关键词，即可自动生成文案、素材、字幕和背景音乐，并合成高清短视频。支持 Web 和 API 界面，适合中英文用户，提供多种视频尺寸和语音合成选项，且素材无版权。项目开源，支持多种 AI 模型接入，并有详细的部署和使用指南。

• 💡 全自动视频生成：输入主题或关键词，自动生成完整短视频
• 🖥️ 多界面支持：提供 Web 和 API 两种操作方式
• 🌍 中英文兼容：支持生成中文和英文视频内容
• 🎨 灵活尺寸：可选竖屏（9:16）或横屏（16:9）
• 🔈 语音合成：多种声音可选，支持实时试听
• 📝 字幕定制：可调整字体、颜色、大小及位置
• 🎵 背景音乐：内置无版权音乐或自定义本地文件
• 🤖 多模型接入：支持 OpenAI、DeepSeek、文心一言等
• 🚀 便捷部署：提供 Docker、Colab 及一键启动包
• 📅 持续更新：计划增加更多配音、转场效果和素材来源

GeminiImageApp

基于 Google Gemini AI 的全功能图像处理应用

其他

中国 AI 应用的终局：AI RaaS 和 AI 包工头模式

AI 应用付费模式的核心在于价值呈现，尤其是 RaaS（结果即服务）的“AI 包工头模式”将成为颠覆性方向。以下是关键要点：

• 🤖 AI 替代传统 SaaS：传统 SaaS 因功能标准化、数据模式过时将被端到端 AI 应用取代，资本价值下降。
• 💰 利润池放大 10-60 倍：AI 包工头模式通过结果付费（如计件、分成）绑定客户利益，利润空间远超工具型或人力外包模式。
• 🚀 四大进化层级：
  • L1（计件制）：标准化任务效率提升（如 AI 客服）；
  • L2（软硬结合）：复杂系统按量收费（如矿山无人运输）；
  • L3（收入分成）：深度参与客户增收（如电商营销）；
  • L4（AI 业主）：掌控核心资源（如 AI 探矿公司收购矿权）。
• 🏆 “五高”资本价值：高科技含量、全链路优化、高可控性、强客户粘性、财务确定性，打破传统包工头“低端”标签。
• 🔍 垂直专注是关键：必须深耕单一场景（如医疗、矿山），泛化布局易失败。
• 👥 人机协同不可缺：纯 AI 无法替代人类在复杂决策和场景校准中的作用。
• 🧹 拥抱脏活累活：非标环节（如极端环境测试）是壁垒，轻量化 AI 难持续。
• ⏳ 1 年窗口期：快速落地、绑定头部客户和资源，执行力决定护城河。
• 🌍 冲击传统行业：案例包括矿山无人运输、AI 客服 Sierra、特斯拉 Robotaxi 等，均以结果付费重构商业模式。

AI 包工头模式或成中国 SaaS 转型最后机遇，需聚焦垂直、人机结合、快速执行。

arwaal

Arwaal 是一个用 TypeScript 从头构建的类 React 库，旨在通过实践学习 React 的核心原理，实现了包括 Fiber 协调、虚拟 DOM 和 Hooks 在内的关键功能。

把 AI 当作工具，而不是拐杖，那些 2019 年时被认为有价值的基础工程技能，值得你继续投资。

-- 《不要让 AI 加速我们的无能》

最有害的建议之一就是不要重新发明轮子。

这种建议会导致一种抑制好奇心和探索的氛围。现代生活的很多重要发明，都来自那些不听从这个建议的人们。

重新发明轮子就是一种学习，并且学习过程中，你可能会做出更好的版本。

-- 《重新发明轮子》