2026-第九周

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

技术

看完就懂 useLayoutEffect

本文对比了 React 中的 useLayoutEffect 与 useEffect 钩子，重点阐述了两者的调用时机差异、适用场景以及使用建议。核心区别在于 useLayoutEffect 在浏览器绘制前同步执行，适用于避免 DOM 操作引起的视觉闪烁；而 useEffect 在绘制后异步执行，是大多数副作用场景的首选，以避免阻塞渲染。

• 🕐 调用时机差异：useLayoutEffect 在浏览器绘制（paint）前同步执行，useEffect 则在绘制后异步执行。执行顺序为：useLayoutEffect → 画面绘制 → useEffect。
• 🎨 使用场景：当 DOM 操作会引起回流（reflow）或重绘（repaint）并可能导致视觉闪烁时（如测量元素位置并立即更新），应使用 useLayoutEffect 以避免用户看到中间状态。
• ⚠️ 性能注意：由于 useLayoutEffect 会阻塞浏览器绘制，可能影响性能，因此不应滥用。在绝大多数情况下，应优先使用 useEffect。
• 🔧 实践建议：作为专业开发者，应默认使用 useEffect，仅在确实观察到因回流/重绘导致的闪烁问题时，才考虑替换为 useLayoutEffect。
• 📚 补充说明：即使在某些场景下使用 useEffect 作为反模式，用户也可能无法察觉明显闪烁，因为两次渲染间隔极短。但遵循最佳实践有助于保持代码质量和性能。

移除 Next.js 让我明白为何框架对 AI 依然至关重要

本文作者通过移除 Next.js 框架并尝试用纯 HTML/JS 开发，得出了与“AI 时代不再需要框架”相反的结论：框架在 AI 时代反而更加重要，因为它为人类与 AI 提供了协作的共同语言和明确规则。

• 🧠 作者最初受网络讨论影响，认为 AI 编码代理能替代框架，但实验后观点反转
• 🛠️ 尝试将 Next.js 项目转为纯 HTML/JS 时，发现移除框架后代码放置规则消失，导致与 AI 协作出现认知偏差
• ⚔️ 网络上有“反框架派”（认为 AI 可替代框架）和“挺框架派”（强调框架避免重复造轮子）两种观点
• 🤖 作者发现框架约定实质上是“给 AI 的指令”，能明确规范文件结构和代码位置，减少 AI 输出的不确定性
• 🔄 在 AI 时代，框架的价值从“为人类提供便利”转向“为人机协作提供通用协议”，其统一约定的作用大幅提升
• 🌉 框架约定替代了部分提示工程，成为稳定 AI 输出的关键，尤其当开发团队由“人类+AI”混合构成时
• 💡 结论：框架不会消亡，其角色将转变为促进人机协作的共同语言，在 AI 加入团队后更为重要

我们如何在一周内用 AI 重建 Next.js

上周，一名工程师借助 AI 模型在一周内重建了最流行的前端框架 Next.js，推出了基于 Vite 的替代方案 vinext，可一键部署至 Cloudflare Workers。早期测试显示，其生产构建速度提升最高达 4 倍，客户端包体积缩小 57%，且已有客户在生产环境中使用。

• 🚀 快速构建：vinext 基于 Vite 重新实现 Next.js API，生产构建速度比 Next.js 快 1.6 至 4.4 倍，客户端包体积减少 56%-57%。
• 🌐 无缝部署：支持一键部署到 Cloudflare Workers，兼容 App Router 和 Pages Router，并提供完整的客户端水合与交互功能。
• 🔧 灵活缓存：内置 Cloudflare KV 缓存处理程序，支持增量静态再生（ISR），并可灵活替换为 R2 等其他后端存储。
• 🤖 AI 驱动开发：项目几乎全部由 AI 编写代码，通过 1700+ 单元测试和 380+ 端到端测试保障质量，总成本约 1100 美元。
• 📊 流量感知预渲染：实验性功能可根据实际流量数据智能预渲染高频页面，避免构建时全量渲染的资源浪费。
• ⚠️ 实验性状态：vinext 仍处于早期阶段，尚未经过大规模流量测试，部分功能如静态构建时预渲染尚未支持。
• 🔮 生态开放：项目 95% 基于纯 Vite 实现，欢迎其他平台贡献代码以扩展部署目标，旨在推动全生态系统协作。

导航 API - 更优导航方式，现已基线新可用  | 博客  | web.dev

单页应用（SPA）的导航长期以来依赖不完善的 History API，导致开发复杂且易出错。新的 Navigation API 于 2026 年初成为基线标准，在所有主流浏览器中可用，它通过统一的事件处理简化了客户端路由，提供了更强大、更可靠的导航解决方案。

• 🚀 Navigation API 正式可用：2026 年初，Navigation API 成为基线新标准，在所有主流浏览器中获得支持，旨在解决 SPA 导航的历史痛点。
• 🔄 统一导航事件处理：通过单一的 navigate 事件集中处理所有导航（如链接点击、前进/后退、程序化调用），取代了以往需多步监听和手动更新 URL 的方式。
• ⚙️ 简化开发流程：event.intercept() 方法自动处理 URL 更新、历史记录堆栈和可访问性，减少了手动调用 pushState 和单独处理 popstate 事件的繁琐工作。
• 📝 支持表单提交处理：自动捕获同文档表单提交，通过 NavigateEvent.formData 提供表单数据，无需额外 JavaScript 提交处理即可防止页面重载。
• 🧭 手动滚动控制：提供 event.scroll() 方法，允许开发者在内容渲染完成后手动控制滚动位置恢复，避免异步加载导致的滚动错位。
• 🎬 与视图过渡 API 集成：可与 View Transitions API 结合，在导航时实现流畅的视觉过渡效果，提升 SPA 的用户体验。
• 🛠️ 解决历史 API 局限：克服了 History API 的不足，如无法检测所有导航类型、读取完整历史堆栈或编辑非当前条目，以及 popstate 事件的不一致行为。

网络上的精灵图

本文介绍了 CSS 中一种使用雪碧图（spritesheet）实现动画的技术，包括其原理、实现步骤、适用场景以及与现代动画技术的对比。

• 🐦 起源：Twitter 在 2015 年为了在低端设备上实现“点赞”动画，采用了游戏开发中的雪碧图技术，而非使用大量 DOM 元素。
• 🖼️ 原理：将动画的所有帧合并到一张图片中，通过 CSS 控制显示区域，快速切换帧以形成动画效果。
• 🛠️ 实现：使用<img>标签，结合object-fit: cover和object-position属性，通过steps()计时函数实现帧的离散切换。
• ⚙️ 细节：steps()函数的jump-none参数可确保循环动画包含最后一帧，避免跳跃。
• ⚖️ 权衡：雪碧图适合重复性、预渲染的动画（如游戏角色），但缺乏程序化动画的随机性和灵活性。
• 🎨 应用：适用于风格化、像素艺术或需要复杂序列帧的动画，例如博客中的交互式角色动画。
• 🚀 现代替代：随着设备性能提升，程序化生成动画（如粒子效果）已成为更动态、更生动的选择。

工具

JadeAI

JadeAI 是一个基于人工智能的智能简历构建平台，提供拖拽编辑、实时 AI 优化、多模板选择及多格式导出等功能，支持中英文界面，用户可通过本地部署或 Docker 快速使用。

• 🧠 AI 智能功能：集成对话助手、简历生成、JD 匹配分析、语法检查、翻译及多 AI 供应商支持（OpenAI/Anthropic）。
• 🎨 编辑与模板：拖拽编辑器、50+ 专业模板、主题自定义、实时预览与多步撤销/重做。
• 📤 导出与分享：支持 PDF、DOCX、HTML 等多格式导出，可生成密码保护的分享链接并追踪查看次数。
• 🗂️ 多简历管理：仪表板支持搜索、排序、复制、重命名及 JSON 导入/导出。
• 🌐 多语言与部署：提供中英文界面、深色模式，支持 SQLite/PostgreSQL 数据库，可通过 Docker 一键部署。
• 🔧 技术栈：基于 Next.js 16、React 19、Tailwind CSS、Drizzle ORM 等现代技术构建。

picknplace.js，拖放操作的替代方案

picknplace.js 是一个替代拖放操作的交互方案，通过“选取 - 滚动 - 放置”三步简化操作流程，尤其优化了移动端体验。

• 🖱️ 操作步骤：采用“选取 -> 滚动 -> 放置”三步流程，支持用 Enter 键确认放置、Esc 键取消操作
• 📱 解决痛点：针对移动端拖放操作（点击、长按、拖动、滚动同时进行）的繁琐、缓慢和易出错问题提出优化方案
• 🔄 实现原理：选取项目时会创建原列表的交互式动画副本，副本随滚动位置实时更新，最终由用户确认或取消更改
• 🧪 项目性质：目前仅为概念验证原型，旨在展示交互思路，开发者可参考源代码获取灵感

voxcss

VoxCSS 是一个用于在 DOM 中创建 3D 体素（方块）场景的 CSS 引擎，它通过堆叠网格层和应用变换来渲染 HTML 立方体，支持多种框架和丰富的交互功能。

• 🧱 核心功能：一个基于 CSS 的 3D 体素引擎，通过堆叠网格层和变换来渲染 HTML 立方体，支持颜色、纹理、交互和视锥剔除。
• 📦 安装与使用：可通过 npm 安装或直接从 unpkg CDN 导入，提供简易的 JavaScript API 来快速渲染场景。
• 🔧 框架支持：提供适用于 Vue、React 和 Svelte 的包装组件（<VoxCamera> 和 <VoxScene>），具有一致的属性。
• 🎥 相机控制：<VoxCamera> 组件支持缩放、平移、倾斜、旋转、透视控制，并可启用交互式拖拽或自动旋转动画。
• 🗺️ 场景管理：<VoxScene> 组件接收体素数组，管理 3D 网格和装饰（如墙壁、地板），并可设置投影模式（立方/二测）和网格合并策略。
• ⚙️ 体素数据模型：每个体素通过坐标、形状（立方体、斜坡、楔形等）、颜色/纹理和旋转角度来定义，并支持通过 x2/y2/z2 定义区域。
• 🚀 性能优化：引擎通过基于邻居和相机角度的面剔除来减少渲染，并提供 mergeVoxels 属性（"2d" 或 "3d"）来合并相邻体素，大幅减少 DOM 节点以提升性能。
• 📁 文件支持：内置解析器，可直接加载并渲染 MagicaVoxel 软件创建的 .vox 文件模型。
• 🌐 应用实例：已用于创建如 Layoutit Voxels（体素编辑器）和 Layoutit Terra（地形生成器）等工具。

skills-npm

skills-npm 是一个命令行工具，用于从 npm 包中自动发现并创建智能体（agent）技能的符号链接，解决现有技能分发方案（如仅支持 Git 源、版本不匹配、手动管理等问题）。它通过约定将技能内置在 npm 包中，实现安装依赖时自动同步技能，支持灵活配置和多种代理工具。

• 🔧 功能定位 – 通过 CLI 从 npm 包中发现智能体技能并创建符号链接，供编码智能体使用。
• 📦 解决痛点 – 克服 Git 源限制、版本不兼容、手动管理繁琐及团队共享成本高等问题。
• ⚙️ 便捷使用 – 安装后添加 prepare 脚本即可自动链接技能，支持通过配置文件自定义来源、代理、包含/排除项等。
• 🛠️ 开发者支持 – 包作者可通过在项目中添加 skills/ 目录来内置技能，便于分发。
• 🌟 应用示例 – 已有多款包（如 @slidev/cli、@vueuse/skills 等）内置技能，支持社区贡献扩展。

更新

TypeScript 5.x 至 6.0 迁移指南 · GitHub

TypeScript 6.0 是一个过渡版本，旨在为即将到来的 TypeScript 7.0（Go 语言重写版本）做准备。它引入了新的默认配置、多项废弃选项以及一些新功能，以更好地与现代生态系统对齐并提升性能。

• 📝 默认配置变更：strict 默认为 true，target 默认为 es2025，module 默认为 es2022，moduleResolution 默认为 bundler，rootDir 默认为 tsconfig.json 所在目录，types 默认为空数组（不再自动包含 @types 包）。
• 🚫 废弃选项：废弃了 target: es3/es5、downlevelIteration、moduleResolution: node10/classic、module: amd/umd/system/none、baseUrl、esModuleInterop: false、alwaysStrict: false、outFile 等，这些将在 TypeScript 7.0 中彻底移除。
• 🛠️ 迁移工具：可使用 ts5to6 工具自动处理 baseUrl 移除和 rootDir 推断等破坏性变更。
• ⚠️ 临时规避：可通过设置 "ignoreDeprecations": "6.0" 暂时屏蔽废弃警告，但此选项在 TypeScript 7.0 中将失效。
• 🆕 新功能：包括对 this 无关函数的类型推断优化、支持 #/ 子路径导入、新增 es2025 目标与库、引入 Temporal API 类型、为 Map 添加 getOrInsert 等方法。
• 🔄 行为变更：非 ESM 输出文件将无条件包含 "use strict"；esModuleInterop 的运行时行为发生变化；moduleResolution 的默认值可能静默改变。
• 📋 迁移清单：优先设置 types 和 rootDir，审查 strict 模式，明确指定 target 和 module，移除所有废弃选项，并考虑使用自动化工具辅助迁移。

发布 v4.12.0 · honojs/hono · GitHub

Hono v4.12.0 版本发布，引入了客户端新功能、中间件改进、适配器增强以及显著的性能优化，包括路由器和上下文的性能提升。

• 🛠️ Hono 客户端新增 $path() 方法，用于获取路径字符串，便于路由或缓存键操作。
• 🔧 新增 ApplyGlobalResponse 类型助手，为 RPC 客户端添加全局错误响应类型。
• 🔀 SSG 新增 redirectPlugin，为 HTTP 重定向响应生成静态 HTML 重定向页面。
• 🔐 Basic Auth 中间件新增 onAuthSuccess 回调，支持认证成功后设置上下文或记录日志。
• 🌐 getConnInfo() 现已支持 AWS Lambda、Cloudflare Pages 和 Netlify 适配器。
• 🔄 尾部斜杠中间件新增 alwaysRedirect 选项，修复通配符路由的重定向问题。
• 🌍 语言中间件支持 RFC 4647 渐进式区域代码截断，提升语言匹配灵活性。
• 📦 ExecutionContext 类型新增 exports 属性，便于 Cloudflare Workers 类型扩展。
• ⚡ TrieRouter 性能提升 1.5 至 2 倍，通过优化减少语法开销和冗余处理。
• 🚀 c.json() 新增快速路径优化，提升响应生成效率，减少内存分配。

Node.js — Node.js 24.14.0（长期支持版）

Node.js 24.14.0 LTS 版本“Krypton”发布，包含多项新功能与改进，如异步钩子追踪、文件系统监控忽略选项、全局代理设置、SQLite 默认防御模式等，同时更新了依赖项并修复了多个问题。

• 🚀 异步钩子增强：新增 trackPromises 选项至 createHook()，便于追踪 Promise 生命周期
• 👁️ 文件监控优化：fs.watch 新增 ignore 选项，可忽略特定文件或目录的变化
• 🌐 HTTP 代理支持：引入 http.setGlobalProxyFromEnv()，方便从环境变量设置全局代理
• 🛡️ SQLite 安全提升：默认启用防御模式，增强数据库操作的安全性
• 📦 模块导入扩展：允许以 #/ 开头的子路径导入，提升模块解析灵活性
• 🔧 构建与依赖更新：替换 cjs-module-lexer 为 merve，添加 LIEF 依赖，并升级 npm 至 11.9.0
• 🧪 测试工具改进：测试运行器新增 env 选项和支持预期测试失败的功能
• 📄 文档与修复：更新多个文档说明，修复了事件处理、DNS 解析、流处理等方面的错误

发布 v4.2.0 · tailwindlabs/tailwindcss · GitHub

Tailwind CSS 发布了 v4.2.0 版本，新增了多种颜色主题、实用工具类，并修复了多项问题，同时弃用了部分旧工具类。

• 🎨 新增了淡紫、橄榄、薄雾和灰褐四种颜色主题到默认调色板
• 📦 新增了 @tailwindcss/webpack 包，支持作为 webpack 插件运行
• 📏 新增了用于块级布局的间距、边框、滚动和尺寸相关的实用工具类
• 🔤 新增了 font-features-* 工具类，用于控制字体特性设置
• 🛠️ 修复了包括 @supports 包装、类名提取、无限循环和性能优化在内的多个问题
• ⚠️ 弃用了 start-* 和 end-* 工具类，推荐使用新的 inset-s-* 和 inset-e-* 替代

una.im | 边框形状：非矩形网页的未来

border-shape 是 CSS 边框与盒子装饰模块第 4 级中一个强大的新属性，它允许开发者通过定义元素边框的几何形状来创建非矩形元素，如工具提示、箭头导航和波浪边框，而无需依赖 clip-path 或伪元素等传统技巧。

• 🚀 border-shape 是一个新的 CSS 属性，可直接定义元素边框的几何形状，支持圆形、椭圆、多边形和复杂路径等值。
• 🛠️ 与仅修饰角落的 corner-shape 不同，border-shape 能创建更复杂的形状，如星形或中间凹陷效果。
• 💬 该属性特别适合创建工具提示，避免了传统的三角形技巧或 clip-path 的局限性。
• 🔧 通过 shape() 函数和路径字符串，开发者可以灵活绘制自定义边框，并让背景、阴影等样式跟随新几何形状。
• 🎨 文中提供了多个实际演示，包括可自定义的工具提示、箭头导航和波浪边框，展示了 border-shape 的多样应用。
• ⚠️ 目前该功能仅在 Chrome Canary 146+ 中通过实验性标志可用，仍处于早期阶段，可能存在错误。

其他

如何战胜决策疲劳 - 菲尔·麦金尼工作室

决策疲劳并非大脑停止工作，而是大脑在疲惫时悄悄降低标准却不告知你。这会导致人们在长时间用脑后做出更差的选择，因为大脑开始优先选择省力而非准确的方案。

• 🧠 决策疲劳的真相：大脑不会像电池一样耗尽能量，而是在持续努力后转向优先追求速度和省力，而非准确性。
• ⚕️ 现实影响：研究显示，医生在下午更易开不必要的抗生素，外科医生在晚些时候更保守，手部卫生遵守率随班次下降。
• 🚨 四个预警信号：默认倾向（接受平庸方案）、易怒情绪、走捷径反射（依赖直觉）、放弃思考（乐于接受他人结论）。
• 🛡️ 四个应对策略：推迟决定至精力充沛时；缩小决定范围；设置复查点；预先承诺（为疲惫时的自己设定规则）。
• 🔋 恢复的重要性：疲劳并非不可避免，真正休息和恢复才能补充决策能量，领导者带头休息能提升团队整体判断力。
• ⏳ 紧迫性与陷阱：有时截止日期是真实的，有时却是人为制造以迫使疲惫的你仓促决定，需学会区分。

238. 软件之死？不。

AI 不会终结软件，而是改变软件的内容与开发者，但软件需求将大幅增长。文章通过回顾个人电脑、零售和媒体三大领域的转型历史，说明技术变革往往带来扩张而非取代，新工具和领域经验将变得更加重要，同时创新与淘汰并存，但整体发展需要时间和耐心。

• 💻 个人电脑的普及并未消灭大型机，反而推动了数据中心和云计算的发展，命令行界面至今仍是基础
• 🛒 在线零售并未摧毁实体零售，而是催生了全渠道模式，亚马逊和沃尔玛以不同方式主导市场
• 📺 媒体行业历经多次“消亡”预言，却通过流媒体、用户生成内容等形式爆发式增长，内容总量远超以往
• 🚀 AI 将推动软件数量激增，因为它能解决尚未满足的广泛需求，从个人工具到企业系统
• 🔧 AI 软件将向上整合到产品栈中，就像软件融入银行、旅游等行业，催生新旧公司的变革
• 🛠️ AI 将创造实现新功能的新工具，改善工作、协作和交通等众多尚未数字化的领域
• 🧠 领域经验变得至关重要，因为各行业将变得更加复杂，客户和从业者都需要更高技能
• ⏳ 转型周期远长于预期，需要耐心；部分公司会被淘汰，但整体行业将扩大并多样化

管理者是否应再次亲力亲为？——若昂·阿尔维斯

在 AI 驱动的软件开发新时代，技术领导者的角色正经历结构性转变。文章认为，高级技术管理者（如 CTO、工程副总裁）必须重新亲自动手实践，以直接理解 AI 辅助开发带来的生产力变革，从而做出明智的战略决策，避免因完全委托探索而带来的战略风险。

• 🔍 亲身体验以洞察真相：领导者需亲自通过内外部项目实践，验证 AI 工具的实际效果，评估其对团队和业务的潜在影响。
• ⚡ 把握加速的适应窗口：技术变革速度极快，领导者必须亲自参与才能跟上节奏，仅靠内部倡导者或外部咨询已不足以应对。
• 🚀 示范引领推动变革：领导者亲自分享实践成果（如修复漏洞、提交 PR），能有效激励团队重视并采纳新技术。
• 📊 微小改进带来规模效益：即使生产力仅提升 5%，在大规模应用中也将产生巨大价值，值得投入探索。
• 🎯 战略优先级重新排序：面对变革，领导者需权衡并优先考虑亲身实践，以避免在快速演进的技术浪潮中落后。

向管理管理者转变——凯文·戈德史密斯

从管理执行者到管理管理者的转变，是领导者职业生涯中的关键跳跃，核心在于从直接控制工作转向为团队提供清晰的背景与框架，从而提升组织决策的自主性与效率。

• 🚀 管理者的角色转变：从直接管理团队产出转变为管理其他管理者，工作重心从执行细节移向战略背景与组织协调。
• ⚖️ 杠杆与舒适的张力：贴近执行带来安全感但无法扩展；高效领导需放弃微观控制，转向外部对齐与风险预见。
• 🧩 过度介入的危害：领导者若过分关注下级团队，会削弱管理者的所有权，使其变成被动的中介，同时自身成为决策瓶颈，限制组织速度与个人成长。
• 🧭 背景重于答案：成功管理管理者的关键在于传递业务背景、约束与战略框架，而非提供具体解决方案，从而赋能团队自主做出更优决策。
• 🔍 注意力重新分配：需平衡“向下”关注（教练、质量）与“向外/平行”关注（战略、组织动态），随着职级提升，后者比重应不断增加。
• 🤝 授权决策而非任务：应委托决策权而非单纯分配任务，通过询问“为何如此选择”来了解思维过程，从而进行有效辅导或学习。
• 🚨 过度管理的警示信号：包括管理者频繁上报本应自决的事项、工作因你缺席而停滞、日程充满内部评审会议，以及产生“不可或缺”的错觉。
• 🛠️ 重建决策边界：明确与每位管理者约定不同决策的自主程度（独立决定、告知后决定、咨询后决定、共同决定），并推动决策权逐步下放。
• 🔄 转型期的摩擦预期：放权初期可能导致决策不一致与混乱，但这是必要的校准过程；应通过一对一沟通关注决策逻辑而非审批结果。
• 🌱 构建可持续系统：通过共享信息、解释权衡、揭示约束，帮助团队在透明背景下自主运作，最终打造一个即使你离开也能持续高效决策的组织。