2026-第二十九周

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

技术

使用 Web 标准的暗黑模式

本文介绍了使用 Web 标准实现深色模式的方法，重点是如何通过color-scheme和prefers-color-scheme媒体查询来尊重用户系统设置，同时提供网站内的手动切换功能。

• 🌓 默认尊重系统设置：使用<meta name="color-scheme" content="light dark">标签，让网站首次加载时自动匹配用户操作系统偏好。
• 🔄 支持用户手动覆盖：通过 JavaScript 切换<meta>标签的content属性值为light、dark或light dark，并将选择保存到localStorage中。
• 🎨 color-scheme影响范围：包括light-dark()函数中的颜色、系统颜色（如Canvas）、滚动条颜色、HTML 元素默认颜色、iframe 样式（需内嵌文档同意）以及使用light-dark()或prefers-color-scheme的 SVG。
• 🚫 color-scheme不影响：prefers-color-scheme媒体查询（除非在 iframe 或 SVG 中），因此无法通过它实现页面内切换；<picture>元素中的媒体查询也不受影响。
• 🖼️ light-dark()扩展应用：支持渐变和图片切换，例如根据模式使用不同渐变或图片资源（需 Chrome/Edge 150+、Firefox 150+、Safari TP）。
• 🛠️ 处理非颜色变化：通过 CSS 自定义属性（如--dark）和样式查询（@container style()）实现阴影、边框等非颜色元素的模式切换。
• 🔮 未来展望：可能通过 JavaScript 覆盖prefers-color-scheme媒体查询（Chrome Canary 有原型，但 Safari 团队反对）。

ReactBench

ReactBench 是一个评估编码智能体在实际 React 开发中表现的基准测试。传统测试只检查行为是否正确，但忽略了性能、可访问性和代码质量等关键问题。

• 📊 测试显示，即使是顶级模型（如 GPT 5.6 Sol）的 Pass@1 也仅达 43%，说明模型在真实 React 代码中仍有大量缺陷。
• 💰 评分与成本并非正相关，例如 Fable 5 成本高达 $9.05，但评分仅 41.2$1.35，评分却更高。
• 🚨 模型生成的 React 代码易导致生产事故，包括：因 useEffect 错误引发的服务宕机、界面卡顿造成的收入损失，以及无障碍问题带来的法律风险。
• 🛠️ 基准测试包含 51 个真实任务，涵盖列拖拽调整大小、修复反模式、事件泄漏等实际场景。
• 🔒 为确保数据纯净，ReactBench 使用了 reactbench-canary 标识符，防止测试数据混入训练语料。

JavaScript 哈希速度对比：MD5 与 SHA-256

• 🧩 哈希算法将输入数据转换为固定长度的哈希值，是一种不可逆的单向函数，常用于数据完整性、密码存储和数字签名。
• ⚖️ MD5 与 SHA-256 对比：MD5 较旧，结构简单，但已被认为存在安全漏洞；SHA-256 更安全，输出 256 位哈希值。
• 💻 性能测试：作者编写 JavaScript 程序，对 1GB 随机数组分别使用 MD5 和 SHA-256 进行哈希计算，并在不同平台（ARM 和 Intel）上通过 Bun 和 Node.js 23 运行。
• 📊 测试结果：在 ARM 系统上，Bun 运行 MD5 略快于 Node.js；但总体而言，SHA-256 在大多数测试中速度超过 MD5，例如在 Apple M2 上 SHA-256 达 2.6 GB/s，而MD5仅0.6–0.7 GB/s。
• 🔒 结论：MD5 不仅速度更慢，且安全性不足，因此应优先使用 SHA-256，现代处理器通常支持加密扩展以加速 SHA-256。
• 📂 代码可用：相关代码已在 GitHub 上公开。

Telegram 机器人 API

Telegram Bot API 是一个基于 HTTP 的接口，用于开发者构建 Telegram 机器人。它提供了发送消息、管理群组、处理支付、创建游戏等多种功能，并支持通过 webhook 或长轮询接收更新。近期版本引入了富消息、临时消息、社区、访客模式、直播照片等多项新特性。

• 🤖 机器人认证与请求：每个机器人拥有唯一令牌，所有 API 请求需通过 HTTPS 发送至 https://api.telegram.org/bot<token>/METHOD_NAME，支持 GET/POST 及多种参数传递方式。
• 📩 接收更新：支持 getUpdates（长轮询）和 setWebhook（webhook）两种方式，更新以 JSON 格式的 Update 对象传递，包含消息、回调查询等多种类型。
• 💬 发送消息：提供 sendMessage、sendPhoto、sendVideo 等方法，支持文本、媒体、贴纸、位置、投票、发票等丰富内容类型，并可设置回复键盘、内联键盘等交互界面。
• 🎨 富消息 (Rich Messages)：自 API 10.1 起支持高度结构化的富文本消息，包含标题、列表、表格、媒体、公式、折叠块等，可通过 Markdown 或 HTML 格式发送。
• 👻 临时消息 (Ephemeral Messages)：API 10.2 引入，允许机器人在群组中向特定用户发送仅该用户可见的临时消息，并支持回复和编辑。
• 🏘️ 社区 (Communities)：API 10.2 支持将多个超级群组、频道和机器人链接在一起，形成围绕共同主题的社区。
• 🚪 访客模式 (Guest Mode)：API 10.0 允许机器人接收非成员聊天中的消息并回复，通过 guest_query_id 和 answerGuestQuery 实现。
• 📸 直播照片 (Live Photos)：API 10.0 新增，可发送包含短视频的静态照片，并支持作为付费媒体发送。
• 📊 投票增强：API 10.0 起投票选项可包含媒体（图片、视频等），支持仅限成员投票、国家代码限制，并可将选项数降至最少 1 个。
• 🎮 游戏与支付：支持创建和发送 HTML5 游戏，记录高分榜；支持通过 Telegram Stars 或第三方支付提供商处理付款、订阅和退款。
• 🛡️ 安全与本地服务器：可运行本地 Bot API 服务器以突破文件大小限制，并支持自定义 webhook 端口和 IP 地址。Mini App 安全已增强，默认禁止跨域调用。

如何在 CSS 中创建令人惊叹的交错动画 - LogRocket 博客

本文介绍了如何使用现代 CSS 实现交错动画，并探讨了其优势、实现方法及无障碍性考量。

• 📝 交错动画定义：通过为多个元素设置不同的动画延迟，使其依次启动，形成连贯、自然的视觉效果，避免所有元素同时运动。
• 🎯 使用原因：引导用户注意力、建立 UI 层次、让信息分块呈现，提升用户体验。
• ⚙️ 核心实现：利用 CSS 函数 sibling-index() 和 sibling-count() 计算延迟，通过 animation-delay 属性设置，实现递增或递减的交错效果。
• 🧩 代码示例：列表项淡入放大动画，使用 calc((sibling-index() - 1) * 100ms) 计算延迟，支持重叠与非重叠效果。
• 🔄 方向控制：通过 sibling-count() - sibling-index() 实现反向交错，适用于关闭或移除元素的动画。
• 🎨 应用场景：英雄区内容引导、聊天界面逐字动画等，让用户逐步消费内容。
• 🛠️ JavaScript 必要性：用于触发交互（如点击展开/收起）、退出动画（元素移除时）及复杂逻辑动画（如电影卡片选择）。
• 📉 降级方案：使用 @supports not 规则，为不支持 sibling-index() 的浏览器提供备用样式（如 nth-child 或自定义属性）。
• ♿ 无障碍性：通过 prefers-reduced-motion 媒体查询关闭或简化动画，避免引发用户不适。
• 🌐 浏览器支持：sibling-index() 和 sibling-count() 在 Chromium 和 Safari 中支持，覆盖约 75% 浏览器，可作为渐进增强使用。

我们还需要构建工具吗？

2026 年，前端构建工具在大型项目中仍不可或缺，但必要性因项目规模而异。CSS 方面，前缀处理、语法降级和预处理器需求减少，但文件合并和压缩仍推荐；JavaScript 方面，模块打包、依赖管理和转译在复杂场景下至关重要，但小型项目可跳过构建步骤。

• 📦 CSS 构建工具需求降低：自动前缀工具（如 Autoprefixer）对标准属性非必需；语法降级（如 PostCSS）存在局限性，无法完美模拟新功能；Sass 等预处理器因 CSS 原生特性（如嵌套、颜色函数）而失宠。
• 🔗 文件合并仍推荐：通过@import或构建工具合并 CSS 文件可减少 HTTP 请求，提升压缩效率（如 gzip/brotli），即使 HTTP/2 下，大量请求仍会造成瓶颈。
• ⚡ JavaScript 打包优势明显：打包可优化压缩效率、消除未用代码、减少请求瀑布流，尤其适用于模块数量超过 100 或依赖树深度大于 5 的项目。
• 🌐 模块预加载替代打包：使用<link rel="modulepreload">可并行加载模块，避免瀑布流，但需手动管理预加载语句，复杂项目可能繁琐。
• 📚 依赖管理仍依赖工具：NPM 包管理器处理传递依赖，但直接使用node_modules不现实；CDN（如 esm.sh）有维护和安全隐患；现代打包器（如 esbuild、Rolldown）仍是可靠选择。
• 🔄 转译器需求减少：Babel 等工具默认不再转译为 ES5，避免不必要的代码膨胀；等待新特性获得浏览器原生支持是有效策略。
• 🛠️ 框架与类型检查：JSX、TypeScript 和 Tailwind 等流行技术仍需构建步骤；JSDoc 可在无构建时提供类型检查，但语法不友好。
• 😣 开发者满意度未提升：构建工具复杂度、配置和性能仍是主要痛点，但完全放弃构建在大型项目中不可行。

GitHub - dcrousso/proposal-Map-take · GitHub

该提案建议为 Map 和 WeakMap 添加 take(key) 方法，用于在单次操作中移除并返回指定键的值。

• 📋 核心功能：Map.prototype.take(key) 和 WeakMap.prototype.take(key) 可一步完成"读取并删除"操作，返回键对应的值（键不存在时返回 undefined）。
• 🚀 解决痛点：当前需用 get() 和 delete() 两次查找同一键，存在性能开销、易写错（如先删后读）和重复实现的问题。
• 🔍 语义清晰：行为与 get() 后执行 delete() 完全一致，返回 undefined 时无法区分"键不存在"和"值为 undefined"（与 get 相同）。
• 🌍 广泛先例：Rust、Python、Java、C# 等多数语言的标准库均提供"移除并返回值"的操作，Rust 的 HashSet::take 直接启发了命名。
• 🔗 与 pop 类比：类似 Array.prototype.pop() 移除并返回末尾元素，take 是键控集合的对应操作（按键而非按位置移除）。
• 📊 社区需求：GitHub 搜索显示大量 getAndDelete、popEntry 等自定义实现，以及 map.get 后接 map.delete 的代码模式（约 10 万 + 文件）。
• 💡 命名考量：take 简洁且与 Rust 一致；getAndDelete 是备选，能明确体现"先读后删"的关系。
• 🛠️ Polyfill 可用：提供兼容性 polyfill，通过 get 和 delete 方法实现，可安全安装到 Map 和 WeakMap 原型上。

如何在 React 中使用 request-close 防止模态对话框关闭 by sergiodxa

本文介绍了在 React 中使用 request-close 命令防止模态对话框意外关闭的方法，通过拦截 cancel 事件实现条件性关闭，并支持传递返回值。

• 🚫 request-close 的作用：允许对话框在关闭前触发 cancel 事件，通过 preventDefault() 阻止关闭，实现条件性关闭。
• 🛠️ 类型增强：需在 TypeScript 中扩展 ButtonHTMLAttributes，添加 request-close 到标准命令类型，并支持自定义命令。
• 💻 组件实现：使用 <dialog> 元素，将取消按钮的 command 设为 request-close，并绑定 commandfor 属性。
• 🔍 拦截关闭逻辑：在 onCancel 事件中检查条件（如复选框是否勾选），若未满足则调用 event.preventDefault() 阻止关闭。
• 📝 返回值处理：request-close 按钮可设置 value，关闭后通过 onClose 事件读取 returnValue，实现决策传递。
• ⚖️ 命令选择：close 用于无条件关闭；request-close 用于需要拦截确认的场景，类似浏览器 Escape 键行为。

工具

GitHub - QuadDepo/env.style · GitHub

env.style 是一个开源工具，能在构建时为不同环境（如开发、预览、生产）自动给现有网站图标（favicon）添加不同颜色，帮助开发者避免混淆环境。它采用 Vercel 风格，生产环境图标保持不变。项目使用 TypeScript 编写，支持 Next.js 和 Vite 框架，已获得 192 个星标和 3 个复刻。

• 🎨 自动为不同环境（开发、预览、生产）的网站图标添加不同颜色，避免混淆
• 🚀 支持 Next.js 和 Vite 框架，通过简单配置即可集成
• 🔧 构建时处理，生产环境图标不受影响
• 📦 使用 pnpm 管理依赖，包含示例和开发指南
• ⭐ 开源项目，MIT 许可证，拥有 192 个星标和 3 个复刻
• 🛠️ 主要使用 TypeScript（98.8%），少量 CSS 和 JavaScript

一个功能完备的 TypeScript 存储 SDK——跨不同提供商的统一便携接口

这是一个统一的 TypeScript 存储 SDK，支持快照和分支，可在多个存储提供商之间切换。

• 🔄 统一 API：在所有提供商（Tigris、S3、R2、GCS、Azure 等）上使用相同的 API，只需更改导入即可切换提供商。
• 📸 快照与分支：内置快照和分支功能，支持冻结状态、创建沙盒环境，并在完成后合并或丢弃分支。
• 🤖 AI 集成：可直接与 Vercel AI SDK、Mastra 或 MCP 服务器集成，让模型自动进行快照和分支操作。
• 🖥️ CLI 工具：通过 @storagesdk/cli 在命令行中使用熟悉的 ls、cp、mv 等命令，支持 storage:// 协议。
• 🌊 流式传输：支持 Web 流（ReadableStream<Uint8Array>）的上传和下载，背压和中断端到端传播。
• 🔗 签名 URL：支持预签名 PUT 和 POST，可设置 maxSize / contentType 限制。
• 🛠️ 逃生口：通过 storage.raw 访问原生客户端，支持提供商特定功能，类型安全。
• 🚫 中止信号：每个操作支持 AbortSignal，可取消上传、列表扫描和快照。
• ❌ 类型化错误：使用 StorageError 代码（如 NotFound、Conflict、Aborted）保持可移植性。
• 📦 轻量级：ESM 仅限，Node 20+，核心零运行时依赖，适配器作为可选对等依赖。
• 🌟 开源：Apache 2.0 许可，由 Tigris 团队构建，适用于所有人。

GitHub - yagop/node-telegram-bot-api: 适用于 NodeJS 的 Telegram Bot API

这是一个用于 Node.js 的现代 Telegram Bot API 库，支持多种运行环境，提供简洁的中间件、键盘构建器和文件上传功能。

• ✨ 支持 Bun、Node.js、Deno、Cloudflare Workers 和 Vercel Functions 等多种运行环境
• 📦 通过 npm install node-telegram-bot-api@next 安装，v2 版本完全重写，不兼容 v1
• 🚀 提供 Bot 类，支持命令、正则匹配和消息事件的中间件处理
• 📡 提供 Api 类，1:1 映射 Telegram Bot API 方法，支持直接调用
• 🧩 支持 koa 风格中间件，包含 use、on、command、hears 和 catch 方法
• ⌨️ 提供 InlineKeyboardBuilder、ReplyKeyboardBuilder 和 EntityBuilder 构建键盘和富文本
• 📤 支持文件上传，包括磁盘路径、原始字节和流式上传，并自动处理重试
• 🪝 支持 Webhooks，兼容 Express、Next.js 和边缘运行时
• ⚠️ 错误处理提供结构化字段（如 TelegramApiError、NetworkError），支持自动重试 429 错误
• 🛡️ 内置弹性机制，包括自动重试、限流（全局和每聊天）和长轮询恢复
• 🌊 提供 longPoll 异步生成器，支持灵活的低级更新流处理
• 🐛 支持 DEBUG 环境变量进行调试，跟踪请求生命周期和轮询
• 🛠️ 开发工具包括类型生成、代码检查和构建脚本

其他

The Mario Meeting - 马里奥会议

这篇文章剖析了企业年度绩效评估与薪酬预算的幕后运作机制，揭示了从战略规划到预算分配到个人绩效评定的完整周期。作者强调，薪酬决策并非始于绩效评估季，而是早在一年前就已通过一系列会议和流程被锁定。对于高级领导者而言，真正的关键在于参与预算制定阶段的讨论，而非在薪酬分配阶段才提出诉求。

• 📅 薪酬预算周期错位：每年夏季同时运行两个预算——一个正在被花掉（去年确定的今年调薪预算），另一个正在被构建（明年的预算）。员工常因混淆这两者而误解流程。
• 📊 绩效评级与预算分配：秋季绩效评估前，高管团队会进行人才规划会议，将员工按“卓越、优秀、合格、待改进”分类。每个类别有固定人数上限和薪酬范围，以实现预算曲线的强制分布。
• 🚫 经理的“湖沃贝冈效应”偏见：所有经理都认为自己的团队表现优于其他团队，因此人才规划会议要求用数据证明评级，否则会导致薪酬和职级膨胀。
• 🗓️ 预算的真正源头在规划阶段：明年预算的制定从每年 7 月的战略会议、产品规划会议和财务会议开始。这些会议决定公司的大方向、产品功能、所需资源（人头、硬件），并最终由薪酬委员会提出整体调薪预算（如 3.5%）。
• 👨‍💼 对“马里奥”式领导的批评：部分领导只在人才规划会议上争论预算，却从未参与其源头（产品规划会或战略规划会）。作者指出，正确做法是在规划阶段通过“战略 - 产品 - 资源”链条论证团队所需投入，而非在预算已锁死后才去争取。
• 🔄 流程不是普适模型：本文描述的是“年度发布制软件公司”的简化模型。不同公司流程各异，但核心逻辑一致——高级领导者必须主动理解所处系统的运作机制，而非等待被告知。