#优质博文 #JavaScript #前端
太深入了 orz
Why typeof null === object

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

author Piotr Zarycki

#优质博文 #HTML #WCAG #前端 #语义化
HTML’s Best Kept Secret: The output Tag
本文介绍了 HTML 中一个鲜为人知但功能强大的 <output> 标签，它能在网页上自然地显示计算或用户操作结果，并具备天然的无障碍（Accessibility）支持，但却一直被忽略。

author Den Odell

#优质博文 #AI #MCP #GitHub #MCP #开源
Accelerate developer productivity with these 9 open source AI and MCP projects

AI 摘要：GitHub 携手 Microsoft OSPO、Copilot 与 VS Code 团队，赞助了九个基于 Model Context Protocol (MCP) 的开源项目，以促进 AI 工具与开发平台的深度结合。这些项目聚焦三大主题：框架与平台集成、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 流程追踪与安全评估模拟。

#Newsletter #前端 #周刊更新
周刊第 11 期～
不出意外的话下周去成都玩一周～～
FE Bits Vol.11｜React Native 0.82 新架构落地、Bun 1.3 全栈运行时

#碎碎念
https://fixupx.com/Manjusaka_Lee/status/1980184017778688047
见证历史（？）
AWS USE1 挂了，感觉自己的半个互联网寄了
https://downdetector.com/

#优质博文 #React #RSC #性能 #前端 #架构
React Server Components: Do They Really Improve Performance?

一篇以数据为主的实证研究，比较 CSR、SSR 与 RSC 的性能优劣及实现差异。

结果显示，CSR 初次加载最慢但交互最快；SSR 可改善 LCP 但是有“无交互”的空窗期；RSC 若结合 Streaming 和 Suspense 可获得最佳平衡，但实际迁移复杂且对架构要求高。单纯引入 RSC 并不会自动带来性能提升，收益主要来自异步数据流与渲染策略的改写。

author Nadia Makarevich

#优质博文 #调试 #前端 #React #CSS
少有的讲述「在 vibe coding 中如何调试问题」的文章～当然也适合正常的 bugfix。
How to Fix Any Bug

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

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

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

author Dan Abramov

#优质博文 #AI #浏览器 #ChatGPT #新动态
有人体验过了不，发的有点晚了，不过为 Codex 买的 ChatGPT Plus 好像又有点用了。
（没有说 Codex 不好的意思——只是 gpt 现在比较少用网页版都是用 api 了）
Introducing ChatGPT Atlas

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

#优质博文 #前端 #新动态
Next.js 16：Next.js 16 发布，此次更新让 Turbopack 成为默认打包器，React Compiler 支持正式稳定，并且引入了全新的 Cache Components、Next.js Devtools MCP，统一代理文件 proxy.ts 取代 middleware.ts。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

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 命令性能。

#优质博文 #测试 #前端 #工程化 #新动态
Announcing Vitest 4.0：Vitest 团队宣布推出 Vitest 4.0，这是该测试框架的重大版本更新。此次版本将 Browser Mode 标记为稳定，让开发者能在真实浏览器环境中运行单元测试，从而获得更高的可靠性。此外还引入了 视觉回归测试 与 Playwright Trace 支持，提升了调试与测试体验。

[以下是方便搜索索引的大纲 (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 提交。

#优质博文 #设计 #配色 #UI #CSS #color #tools
ColorMate – Free Color & Gradient Generator Tools

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

#优质博文 #安全 #供应链攻击 #VSCode
GlassWorm: First Self-Propagating Worm Using Invisible Code Hits OpenVSX Marketplace

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

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

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 月中旬已造成全球范围感染
• 五个扩展仍在续散布恶意版本
• 受害系统正在被远程控制、挖掘凭证、充当犯罪代理节点

author Koi Security Research Team

#优质博文 #JavaScript #前端 #新特性 #浏览器
好东西。
URLPattern is now Baseline Newly available

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

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

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 了解完整参考。

author Jay Rungta

#碎碎念 #杂谈 #emo
写点流水账，破事水：最近经常被若有若无的“孤独感”侵袭（对的兄弟就算有对象也会经常有），想听人说话，想出去走走，听自己以前录的视频啊，回看 vlog 啊什么的，一晃然发现上次录的带声儿的视频都已经是 22 年的大作业了，听完就会有种：啊我那个时候那么稚嫩吗的感觉。

偶尔 B 站会开直播打游戏也是这个原因，直播跟另一个朋友语音着打游戏，但我这个人又不擅长开麦/露脸等行为，这方面非常之不自信。回忆起大学的时候，我一个 i 人身兼学生会部长/社团副部长/团委的时候，各种露脸，演讲和接触学弟学妹看起来都很 e，但实际上内心是非常没底气的一个人。

但这又跟我之前说的偶尔会觉得自己“我做什么都会成功的！”这个念头冲突，偶尔又会有“我好废物啊！”的感觉，人体，很神奇吧。

偶尔也会想，要不要做点视频唠嗑唠嗑说说话，别给孩子憋疯了，但是转念一想，又想不到做什么样的视频，没有必要硬做，很羡慕别人做 vLog 啊演讲啊之类的视频能够说很多话。

还有就是最近经常经常心情不好就去吃楼下的烧烤（都怪他太好吃了），然后就减肥无望，然后心情更不好了，更想去吃了，恶性循环，运动一点也补不回来，在想等回来之后要不要去看看减重科。

还有就是，我也太久没生过什么病了导致有点担忧，一直都是间断性头隐隐作痛，不会突然来个大的吧。

不想那么多了，先期待期待下周去九寨沟！

#优质博文 #CSS #前端 #course #layout
Web dev for beginners: CSS layout – flexbox, grid, media queries and container queries：面向初学者的 CSS 布局指南，系统讲解 flexbox、grid、media query 与 container query 的核心概念与实践，是《Web development for beginners》系列的一部分。

author Dr. Axel Rauschmayer