AI 摘要：介绍了已进入 Baseline 的新浏览器功能 URLPattern API，它为 URL 匹配和路由提供了标准、简洁且高性能的原生解决方案。过去开发者需使用复杂的正则表达式或第三方库来解析和提取 URL 参数，而 URLPattern 使得这些操作更清晰、可维护且无需额外依赖。

1. URLPattern 基础与核心概念
• 介绍 URLPattern API 的推出背景：取代传统正则匹配与第三方路由库。
• 提供新 URLPattern 接口，可通过 .test() 与 .exec() 操作直接匹配并提取参数。

2. 基本 URL 模式匹配
• 对比旧方法（URL + 正则）与新 API 的简化写法。
• 展示匹配 /users/:id 的例子，体现代码可读性和简洁性。

3. 提取动态参数（Dynamic Parameters）
• 传统方法依赖匿名的正则捕获组，易出错。
• URLPattern 支持命名参数，可通过结构化对象获取（如 result.pathname.groups）。
• 示例：提取书籍分类 category 与 id。

4. 复合匹配（Compose Multipart Matches）
• 传统方式需多处判断主机名与路径。
• URLPattern 原生支持同时匹配多个部分，例如 hostname + pathname。
• 示例：匹配 .cdn.com 下的 /images/ 文件。

5. 减少项目依赖（Project Dependencies）
• URLPattern 是内置能力，无需加载第三方库，减少 bundle 体积与维护成本。
• 使用浏览器原生实现，跨引擎一致且性能更优。

6. 深度用法详解（Detailed Usage）
• 多种典型场景：
• 路径匹配与参数提取：示例 /products/:category/:id 展示 .test() 与 .exec() 双用法。
• 匹配子域名与版本号：支持在 hostname 层定义变量如 :subdomain.myapp.com，适用于多子域架构。
• 通配符与正则表达式结合：通过 * 和嵌入式正则增强匹配灵活度，如 /users/:userId(d+)/assets/*.(jpg|png|gif)。

7. 实战示例：Service Worker 路由
• 利用 URLPattern 拦截 fetch 事件，根据路径实行不同缓存策略。
• 示例：
• /images/* 采用缓存优先；
• /api/* 使用网络优先。
• 显示该 API 在渐进式 Web 应用（PWA）中的现实意义。

8. 结语与扩展阅读
• URLPattern 提升代码可维护性，简化路由逻辑。
• 推荐进一步查阅 MDN Web Docs 了解完整参考。

web.dev

URLPattern is now Baseline Newly available  |  Blog  |  web.dev

URLPattern became Baseline Newly available as of September 15, 2025.

AI 摘要：本文由 Koi Security 团队发布，揭示了一种前所未有的供应链攻击——GlassWorm。该蠕虫针对 OpenVSX 与 VSCode 插件生态，通过不可见的 Unicode 字符隐藏恶意代码，使用 Solana 区块链和 Google Calendar 作为不可下线的指挥控制系统（C2），可远程访问、窃取开发者凭证、劫持加密钱包并自我传播。

1. 攻击概览与事件背景
• GlassWorm 继 Shai Hulud 之后成为第二个自我传播的供应链蠕虫，首次锁定 OpenVSX 市场
• 感染 7 个扩展、下载量约 35,800 次，并在 VSCode 官方市场出现活跃样本
• 攻击结合区块链、Unicode 隐蔽代码与去中心化通信机制

2. 隐形攻击机制：Unicode 差异选择器
• 攻击者在 JavaScript 源码中嵌入不可显示的 Unicode Variation Selectors
• 人眼与静态扫描均看不到恶意逻辑，但解释器可执行
• 此方法突破代码审查和 Git diff 可见性，暴露软件供应链审查的盲点

3. 区块链 C2 机制（Solana Blockchain）
• 利用 Solana 交易的 memo 字段存储下一阶段载荷链接
• 特性：不可变、匿名、抗封锁、难以审查、成本极低
• 攻击者可频繁更新交易实现动态替换，完全绕过传统安全封控

4. 三级指挥控制体系
• 主 C2：Solana blockchain 交易地址
• 二级：直接 IP （217.69.3.218）传输加密 payload
• 三级：Google Calendar 用作备用 C2，通过事件标题存储 Base64 链接
• 实现“无法下线”的混合基础设施体系

5. 凭证与资产窃取阶段（Credential Harvest）
• 定向获取 NPM / GitHub / Git / OpenVSX 凭证
• 搜索并攻击 49 种加密货币钱包（MetaMask / Phantom 等）
• 使用 AES 加密及 HTTP 动态密钥进行安全通信以强化隐蔽性

6. ZOMBI 模块：完全远控与渗透功能
• SOCKS Proxy：将开发者工作机转为攻击代理节点
• WebRTC P2P：实现实时对等通信，通过 NAT 穿透
• BitTorrent DHT：分布式指令广播，无中心可拔除节点
• HVNC（Hidden Virtual Network Computing）：隐藏桌面控端操作，可完全远程访问
• 支持模块化更新与自愈机制，实现长期驻留

7. 自我传播（Self-Propagation）机制
• 利用窃取的凭证自动入侵更多扩展与仓库
• 无需用户交互，通过自动更新实现连锁感染
• 模仿生物病毒复制循环，实现开发生态层面的指数级扩散

8. 攻击现状与影响评估
• 10 月中旬已造成全球范围感染
• 五个扩展仍在续散布恶意版本
• 受害系统正在被远程控制、挖掘凭证、充当犯罪代理节点

www.koi.ai

GlassWorm: First Self-Propagating Worm Using Invisible Code Hits OpenVSX Marketplace | Koi Blog

AI 摘要：ColorMate 是一款面向设计师与开发者的免费在线配色工具，可快速生成符合无障碍标准（Accessibility）的调色板。用户可提取图片配色、即时预览 UI 效果、进行对比度测试（Contrast Checker），并将结果以 HEX、CSS 或 PNG 格式导出。它还提供由 AI 命名、锁定颜色及实时生成新方案的功能，并收录多种热门配色示例。

1. 发布概况
• Vitest 在过去一年内从每周 700 万下载增长至 1700 万，社区影响力显著提升。
• 经过近一年的开发，Vitest 4.0 正式发布。
• 该版本包含若干重大变更（breaking changes），需参考迁移指南进行升级适配。

2. Browser Mode 稳定
• Browser Mode 结束 Beta 阶段，正式进入稳定版。
• 支持在真实浏览器中运行组件测试，不再局限于 JSDOM 等模拟环境。
• 使用相同的 Vitest API，无需修改测试代码。
• 基于 Playwright 等 provider 实现执行环境，但不替代现有 E2E 工具，仅改变测试运行方式。

3. 新增功能与改进
• 视觉回归测试 (Visual Regression Test)：在 Browser Mode 下进行组件截图与参考图对比，用于检测视觉变化。
• Playwright Traces：生成可在 Trace Viewer 中分析的跟踪文件，辅助调试。
• 报告系统 (reporter) 更新、类型感知钩子 (type-aware hooks) 等多项改进。

4. 版本变更与迁移
• 此次为主版本升级，包含不兼容改动。
• 官方提供迁移指南：Migration guide。

5. 未来计划与社区
• 团队将重点优化性能和 Browser Mode 体验。
• 报告问题可通过 GitHub Issues 提交。

void(0)

Announcing Vitest 4.0

Vitest 4.0 is released with Browser Mode being marked stable, Visual Regression testing support, and Playwright Trace support. The Vitest team will focus on performance improvement in the upcoming quarter. This major release includes breaking changes.

1. 核心特性与架构升级
• 引入 Cache Components：基于“use cache” 指令的显式缓存机制，结合 PPR（Partial Pre-Rendering）完成静态与动态渲染的统一。
• 改进的缓存 API：新增 updateTag()、refresh()，更新 revalidateTag() 支持 cacheLife 配置，提升对缓存生命周期与数据一致性的控制。
• 增强路由系统：通过布局去重（layout deduplication）与增量预取（incremental prefetching）减少重复下载与数据冗余。
• 新的代理机制 proxy.ts：中间件（middleware.ts）演进为 proxy.ts，使网络边界清晰可见，并支持 Node.js 运行时。

2. 开发体验（DX）与工具改进
• Next.js Devtools MCP：集成 Model Context Protocol，支持 AI 调试代理，可透视应用路由、缓存与日志。
• 日志系统优化：构建与运行阶段的耗时分析细化，日志结构更清晰。
• Turbopack 默认启用：替代 Webpack，提供最高 10 倍快速刷新与 2–5 倍构建速度提升，支持文件系统缓存（File System Caching）。
• create-next-app 简化：模板默认启用 TypeScript、App Router、Tailwind CSS、ESLint，降低项目启动门槛。

3. React 与构建链支持
• React Compiler 支持：稳定集成 React Compiler 自动记忆化能力，减少不必要的重新渲染。
• React 19.2：支持新特性 View Transitions、useEffectEvent()、<Activity /> 等，即时交互体验优化。
• Build Adapters API（alpha）：允许自定义构建适配器，实现部署平台与构建流程的联动。

4. 行为变更与重大调整
• 异步访问要求：params、cookies()、headers() 等需 await 调用。
• Node.js 20.9+、TypeScript 5+ 成为最低版本要求。
• Turbopack 成为全局默认打包器；middleware.ts 弃用，重命名为 proxy.ts。
• 图片策略更新：默认缓存时长延长、质量设置调整、新安全策略限制本地 IP 优化。
• 部分配置项（如 AMP、next lint、runtimeConfig）彻底移除或转为环境变量管理。

5. 性能与生态
• Node.js 原生 TypeScript 支持：新增 --experimental-next-config-strip-types。
• Dev/Build 输出目录分离，实现并行构建。
• 引入锁文件防止多实例冲突。
• 进一步提升 next dev / next start 命令性能。

nextjs.org

Next.js 16

Next.js 16 includes Cache Components, stable Turbopack, file system caching, React Compiler support, smarter routing, new caching APIs, and React 19.2 features.

AI 摘要：ChatGPT Atlas 是 OpenAI 推出的智能浏览器，将 ChatGPT 深度整合进网页使用场景，使 AI 能理解网页内容、保留浏览记忆、自动执行任务。用户在浏览时可直接与 ChatGPT 对话、分析网页或完成操作，无需切换应用。它支持可控的记忆功能（memory）、智能代理模式（agent mode）、隐私与家长管理等，旨在打造一个安全且高效的网页工作助手。目前支持 macOS，Windows 与移动版即将推出。

Openai

Introducing ChatGPT Atlas

The browser with ChatGPT built in.

AI 摘要：本文通过作者在开发一个 web 应用中遇到的「滚动失效」 bug，讲述调试问题的系统过程。核心思想是：编写可复现 (repro) 案例、不断缩小问题、保持 bug 的持续存在以保证分析方向正确，并通过持续简化最终发现真实原因——旧版 React Router 的 ScrollRestoration 组件在重验证过程中不当恢复滚动位置。文章强调调试纪律与“有根递归”(well-founded recursion) 的类比：每一步都要确保前进、缩小问题范围，而不是随意跳转、依赖猜测。

1. 问题起点：不可解释的滚动抖动
• 在应用中添加服务器请求后按钮滚动出现抖动。
• 初步怀疑 React Router 数据重载或 React 重渲染机制，但理论上不应造成影响。

2. Step 0：别急着修——没有 repro 一切无从谈起
• Claude 被要求修 bug，多次尝试“修复”但都无验证性。
• 没有可重现测试 (repro) 等于盲目调试，AI 与人类在此常犯同样错误。

3. Step 1：建立可靠的 repro
• 一个 repro 需要明确定义操作步骤、预期结果、实际表现。
• 若复现概率不高，需移除不确定因素（如模拟网络）。
• AI 无法直观识别“滚动抖动”，需重新定义可量化的 repro。

4. Step 2：缩小 repro
• 替换为测量滚动位置前后差值的量化 repro。
• 验证策略：当注释掉网络调用时行为回归正常，说明新的 repro 合理。
• 确保新的 repro 仍能表现“正向结果”，避免偏离原始问题。

5. Step 3：剥去无关部分
• 通过循环：复现 bug → 删除一部分代码 → 验证仍复现 → 提交变更。
• 若删除后 bug 消失，回滚并缩小删除范围。
• Claude 犯误：过早进入假设与实验，导致丢失“仍复现”前提。
• “调试有根性”类比：如同 well-founded recursion，确保每次简化是真正向终点推进，而非原地打转。

6. Step 4：定位根因
• 继续按步骤简化后，确认问题出现在包含 React Router 的布局结构中。
• 发现旧版 ScrollRestoration 在动作 (action) 触发重验证时被误调用，导致对正在进行的 scrollIntoView 干扰。
• 更新或移除旧逻辑即可修复。

7. 方法论总结
• bug 调试的精髓是“跟踪与约简”：始终保持一个仍可复现的最小案例。
• 当推测与理论全部无效时，逐步删减代码仍是通用、可靠的终极方法。
• 旧版依赖和运行环境不一致也可能制造隐藏问题。

overreacted.io

How to Fix Any Bug — overreacted

The joys of vibecoding.

AI 摘要：GitHub 携手 Microsoft OSPO、Copilot 与 VS Code 团队，赞助了九个基于 Model Context Protocol (MCP) 的开源项目，以促进 AI 工具与开发平台的深度结合。这些项目聚焦三大主题：框架与平台集成、AI 增强的开发体验、以及自动化与编排。

1. 框架与平台集成
• fastapi_mcp：将 FastAPI 端点暴露为安全的 MCP 工具，提供统一基础设施与认证机制。
• nuxt-mcp：面向 Nuxt 应用的调试与路由工具，帮助模型理解 Vite/Nuxt 架构代码。
• unity-mcp：连接 Unity 引擎 API，赋予 AI 管理游戏资产、场景和脚本的能力，实现智能自动化游戏开发。

2. 开发者体验与 AI 增强编码
• context7：提取项目中与版本关联的文档与示例，直接嵌入 LLM (Large Language Model) 提示上下文。
• serena：提供语义检索与代码编辑功能，支持面向代理（agent-driven）的编程流程。
• Peekaboo：分析 Swift 代码界面，为 AI 助手提供可操作的 GUI 自动化上下文。
• coderunner：让 LLM 能在本地沙盒中自动执行与安装依赖，实现即时代码运行与结果反馈。

3. 自动化、测试与编排
• n8n-mcp：为 n8n 平台注入 AI 驱动的工作流自动化，优化节点理解与流程创建。
• inspector：测试与调试 MCP 服务器的工具，支持协议握手检查、OAuth 流程追踪与安全评估模拟。

The GitHub Blog

Accelerate developer productivity with these 9 open source AI and MCP projects

These nine open source MCP projects provide new frameworks, tools, and assistants to unlock AI-native workflows, agentic tooling, and innovation.

AI 摘要：本文系统回顾了 typeof null === "object" 的历史与技术背景，从现代 JavaScript 引擎的内存标记机制 (pointer tagging) 到最初的 Netscape 实现原理，解释了这一“bug”如何产生并延续至今。作者复原了早期 C 语言实现及源码宏定义，揭示 null 被识别为对象的根本原因是早期 32 位系统的对齐与标记约定。尽管这一问题可轻易修复，但考虑到巨大的兼容性影响，标准委员会选择保留这一行为，使它成为语言历史上的经典遗产。

Piotr Zarycki - Programming Blog

Why typeof null === object

Learn why typeof null returns ‘object’ instead of ’null’ in JavaScript

「你的乐队需要有一个网站，这是肯定的」
「你刚开始接触观鸟，你想要一个网站来发布你看到的酷鸟」
「你认为网络技术可以像油画和画布一样，成为艺术家的工具。你制作网站就像画家作画一样」

Frontend Masters

50 Reasons to Build a Website

There’s been a little chatter circling the question “Why would I build a website in 2025?” I was on a panel about it in the last year and it has popped up on various podcasts and such. It’s a fair question, but it’s one that, I think, requires both a very…

AI 摘要：本文通过一个简洁的示例与完整讲解，展示了如何仅用几行现代 CSS 代码实现 N 个元素的顺序动画。作者利用 CSS 的 linear() 函数自定义时间曲线（timing function），结合 sibling-index() 与 sibling-count() 自动计算每个元素的动画时间段，使所有元素依次播放动画而不需复杂的 keyframes 管理。该方法具有可扩展性和可维护性，为 CSS 动画提供了新的编程式思路。

1. 背景与问题定义
• 多个元素需要依次执行相同的动画，传统方法需手动定义复杂 keyframes 与延迟。
• 目标：用纯 CSS，在不修改 keyframes 的前提下让动画顺序执行、可循环、可扩展至任意元素数量。

2. CSS linear() 函数解释
• linear() 是一种新的时间函数（easing function），支持自定义多个控制点（control points）。
• 通过定义输入进度（input progress）与输出进度（output progress）来构造任意变化曲线。
• 相较于传统 ease 或 cubic-bezier()，linear() 可精确定义不同阶段的动画输出。
• 可用百分比或数值型进度表示时间点，省略值会自动插补为中间点。

3. 利用 linear() 构造延迟（animation delay）
• 通过重复定义相同输出值（如 linear(0 0%, 0 50%, 1 100%)）可制造“暂停”效果。
• 表示动画前半段不变化、后半段才执行。
• 可灵活组合多个时间段，无需修改 keyframes 即可调整节奏。

4. 构建顺序动画逻辑
• 多元素顺序动画思想：每个元素仅在自己的时间段（range）内动画，其余时间保持静止。

• 对于 N 个元素，将总时间分为 N 等份，每个元素依次占一个区间。

• 变量定义：
• S = 起始点 = (i - 1) × 100% / N
• E = 结束点 = i × 100% / N

• 关键 CSS 实现：
--_s: calc(100%(sibling-index()-1)/sibling-count());
--_e: calc(100%(sibling-index())/sibling-count());
animation: x calc(var(--d)*sibling-count()) infinite
linear(0, 0 var(--_s), 1, 0 var(--_e), 0);

• 使用 sibling-index()/sibling-count() 自动计算索引与总量，无需额外 JS。

5. 浏览器兼容性与注意事项
• 目前主要支持 Chromium 内核（Chrome、Edge），Firefox 与 WebKit 尚在推进中。
• 某些变量可能需通过 @property 注册以解决兼容性问题。

6. 扩展与变体
• 可设计多个重叠区间（N+1 ranges）使动画出现过渡重叠（overlapping）效果。
• 原理一致：通过调整控制点范围改变动画逻辑，可产生更复杂的节奏模式。

7. 总结
• linear() 函数原为实现复杂缓动曲线而生，但结合现代 CSS 特性（变量、siblings 函数）可实现可编程化动画逻辑。
• 提供一种无需 JS、结构清晰、可扩展的纯 CSS 动画新范式。

CSS-Tricks

Sequential linear() Animation With N Elements | CSS-Tricks

Let’s suppose you have N elements with the same animation that should animate sequentially. Modern CSS makes this easy and it works for any number of items!