IT技术博客大学习

一个冷门的速查日历方法

neverland — 2026-06-03 09:03:24

就是终端里的 cal 命令了。之所以喜欢用这个首先是因为快：我平时固定是开着终端的（作为 vscodium 的底部面板），码字过程中直接打个 cal（pun intended）就能看当月日历，比打开日历应用或者 menubar item 都要快。其次因为是终端输出，就是纯文本，可以直接复制到笔记里参考或者进一步标注。当然缺点就是比较简陋，不过我本来就喜欢这种野兽派纯文本风格，所以反而是加分项了。

以下是一些常用选项和参数：

# 显示 2025 全年
cal 2025 # shorthand for `cal -y 2025`

# 显示今年 3 月
cal -m 3

# 显示本月和紧邻的前后月份
cal -3

# 旋转行和列（每周为一列）并显示周数
ncal -w # shorthand for `cal -N -w`

更多用法可以看手册页 man cal。如其中的 history 一节所说这也是个上古命令了，从 Version 1 AT&T UNIX (1971) 就有，几十年就是这样下来了（

您可能还对下面的文章感兴趣：

iTerm2 (Mac Terminal) 清空当前屏幕内容 [2022-02-03 13:16:36]
在命令行中步入黑客帝国 [2018-12-24 23:58:32]
假装很忙的三个命令行工具 [2018-07-05 00:00:26]
Ctrl+S导致Putty或Xterm命令行无响应问题 [2014-04-29 22:34:12]
linux下vim的编译以及终端乱码的最终解决方案 [2010-03-29 08:51:21]
将GUI配色转化为终端配色的VIM插件 [2010-03-08 23:07:19]

Day for Night

neverland — 2026-06-03 09:03:24

标签： UI设计 UX设计交互设计动画

Marcin Wichary:

But there’s a trick [to invert black and white while preserving colors]: do a regular invert and then rotate the hue halfway through. Through the magic of math, this is the same as inverting just L in the HSL space, which means the colors are preserved.

…and, more importantly, [this is] available in CSS as a filter: instead of invert(1), use hue-rotate(180deg) invert(1).

您可能还对下面的文章感兴趣：

优化JavaScript的执行效率 [2016-12-22 23:25:54]
javascript动画剖析 [2016-03-30 16:01:23]
iOS下自己动手造无限循环图片轮播 [2016-03-15 23:28:22]
CSS3 动画系列 [2015-01-20 23:22:01]
JavaScript实现的抛物线运动效果 [2014-12-10 23:07:04]
移动用户体验设计新要素 [2013-08-28 22:19:28]
创造流动的瞬间—探讨移动端交互动效设计 [2013-08-21 13:27:58]
自然而流畅——聊聊界面的切换动画 [2012-07-19 12:21:24]
HTML5和CSS3工具资源汇总 [2011-09-26 23:29:35]
使用JavaScript和Canvas开发游戏（一） [2011-08-18 13:50:53]
精于图片处理的10款jQuery插件 [2011-07-24 14:56:36]
Canvas高级特性 [2011-03-27 23:55:35]
拥抱并使用CSS3 [2011-03-27 23:48:55]
“亲情的朝圣，成长的礼赞”―手机QQ闪屏设计理念 [2011-03-07 22:56:59]
PNG现状整理 [2011-01-30 19:07:40]
有故事的网页设计――Flash网站奇妙之旅 [2011-01-16 22:29:06]
用 CSS3 Transitions 实现动画 [2010-09-28 09:23:25]
制作CSS气泡框 [2010-04-13 11:10:16]
关于动态gif的帧速 [2010-03-01 13:44:38]

新特性速递：focus()行为新增focusVisible控制

张鑫旭 — 2026-06-03 09:03:24

标签： CSS DOM JavaScript

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12203
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、focus()的两种控制

平时让一个输入框聚焦，我们可以这么设置：

input.focus();

默认情况下，控件元素通过focus()方法获取焦点，浏览器会通过滚动的方式让元素重定位到页面可视区域内。

但有时候，这种行为会影响体验，毕竟页面会突然跳一下。

如果不希望这种滚动行为触发，可以这么设置。

input.focus({
  preventScroll: true
})

此特性已支持多年，我也多次在生产环境使用。

那么本文要介绍的focusVisible又是什么呢？

二、focusVisible参数的作用

focusVisible可以控制元素获得焦点的时候，是否显示浏览器内置的outline轮廓效果。

先看一个案例，如下HTML代码：

链接

此时，点击按钮，链接是没有焦点效果的。

这在开发中其实是有用户体验的问题的，用户并不知道这个链接是否真的被聚焦了，除非有专门的CSS定义，例如：

:any-link:focus {
  color: red;
}

效果示意：

不过针对每一个控件元素设置focus效果是啰嗦的，在一些对视觉要求不那么高的场合，通过focusVisible参数进行控制是最快捷的方法，例如：

链接

点击按钮后的效果示意：

如果大家对自己手头的浏览器足够自信，也可以点击下面的按钮，亲自感受下聚焦后的轮廓效果。

链接

当然，focusVisible也能用来关闭浏览器默认的轮廓效果。

例如下面的输入框获得焦点后，浏览器的发光轮廓是不会显示的。

一般与无障碍访问与用户体验相关的特性，在国内总是无人问津，因为缺少对应的法律法规约束。

所以focusVisible这个特性注定知者寥寥，加上其兼容性，我对其未来的应用程度表示并不乐观。

三、难得碎碎念

说实话，在AI时代，对AI模型的关注和研究，我已经落后于现在的年轻人了。

我不是做管理的，如果我带着一个团队，我会花很多时间思考这些模型和工具对团队生产力的赋能，因为那可以体现我的价值，或者说为数不多可以体验价值，或者至少让上级看到价值的地方。

虽说单纯的专业技术人员也能做这样的事情，但是，考虑到“上下左右”的现实障碍（这里写了不少，都删掉了，怕厂子的公关过来提醒），是很难推动的，所以很难让我投入大量的精力在这个上面。

作为一个纯专业立足的前端开发，究竟什么才是自己的核心竞争力，这个问题我其实一直在思考。

为什么会一直思考呢？

因为每次分享那些实用或不实用的前端技术，都会有人评论，现在都AI了，学这个还有什么用。

我的回答是：

如果我的水平比AI还要强，我实现的东西比AI实现的还要好，那我是不是不要担心被AI替代，这是不是我的核心竞争力！

人的精力是有限的，尤其到了我现在这个年纪，再像10年前那样，每天研究前端到凌晨1~2点，是不可能了，只能舍弃工具层面的关注与研究，继续把精力放在语言本身上。

那些好的，可能不稳定的特性，那些特别新的但是很高效的实现上。

比方说最近的项目使用scroll-state滚动容器查询：

@container excel-scroller scroll-state(scrolled: right) {
  /* 第一列粘性定位启用的时候，出现右边框 */
  :where(td, th):first-child {
    border-right: 1px solid var(--ui-border);
  }
}

AI绝对不会想到这么实现，为何？

一是训练的代码库还没有这样的的代码；二是AI为了项目稳定，一定会使用更加稳健的传统实现，虽然说最终也都能实现最终的效果，但是代码质量天差地别。

作为一个对兼容性要求不那么高的项目，AI生产的稳健代码并非是最好的实现，如果只是单纯使用AI生成一个能跑的东西，为何需要用你呢？换个更便宜的年轻人岂不更好。

不过，想要变得专业层面，至少某一个领域比AI强，还是很难的，而且越往后越难，这个之后的文章再碎碎念吧。

OK，就这样吧，感谢阅读，欢迎分享。

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=12203

（本篇完）

您可能还对下面的文章感兴趣：

Cross-Document View Transitions: Scaling Across Hundreds of Elements [2026-06-03 09:03:24]
JSON.rawJSON方法的作用是什么？ [2026-06-03 09:03:24]
A Scrollytelling Gift for Mum on Mother’s Day 2026 [2026-06-03 09:03:24]
Soon We Can Finally Banish JavaScript to the ShadowRealm [2026-06-03 09:03:24]
Cross-Document View Transitions: The Gotchas Nobody Mentions [2026-06-03 09:03:24]
Rethinking “Pixel Perfect” Web Design [2026-06-03 09:03:24]
Getting Started With The Popover API [2026-06-03 09:03:24]
Moving From Moment.js To The JS Temporal API [2026-06-03 09:03:24]
务必谨慎使用JS WeakRef弱引用 [2026-06-03 09:03:24]
借助mediabunny纯JS实现视频水印、剪裁、合成等功能 [2026-06-03 09:03:24]
如何使用CSS判断鼠标从哪个方向进入元素？ [2026-05-07 14:28:05]
你老了 [2021-06-13 23:11:09]
浅谈阿里前端的多样化 [2021-05-24 22:43:35]
浅谈 Web 应用的内存优化 [2020-02-05 15:13:31]
Javascript创建对象方式总结 [2019-04-08 00:55:55]
Chrome runtime 不稳定（GC）导致插件绑定事件失败 [2017-10-15 10:00:29]
了解JS中的全局对象window.self和全局作用域self [2017-10-15 09:58:33]
JavaScript: 2016年回顾 [2017-02-19 23:59:26]
ECMAScript 6 Modules(模块)系统及语法详解 [2017-02-19 23:52:34]
优化JavaScript的执行效率 [2016-12-22 23:25:54]
jQuery 3.0 升级指南 [2016-11-06 22:36:27]
用webgl打造一款简单第一人称射击游戏 [2016-11-06 22:32:41]
谈谈我这三年在技术上的成长 [2016-07-11 23:33:33]
Date对象的那些事儿 [2016-06-06 23:37:24]
超级小的web手势库AlloyFinger发布 [2016-06-06 23:34:30]
前端路由实现与 react-router 源码分析 [2016-05-18 00:01:37]
移动web开发调试工具AlloyLever介绍 [2016-05-12 12:55:11]
元素选择器 - Mini Query [2016-05-05 22:44:05]
JavaScript 代码执行效率对比工具 [2016-05-05 22:41:53]
用javascript比较语义化版本号 [2016-05-05 22:39:15]
聊聊前端 [2016-04-21 13:31:32]
JavaScript 被忽视的细节 [2016-04-20 13:14:18]
使用jquery卸载全部事件 [2016-04-02 22:44:16]
提高JavaScript性能 [2016-04-02 14:09:17]
前端开发者不得不知的ES6十大特性 [2016-04-02 13:27:57]
React 的骨架 JSX [2016-04-02 13:19:08]
React Native for Android Windows环境搭建 [2016-03-30 16:03:47]
javascript动画剖析 [2016-03-30 16:01:23]
玩转npm [2016-03-30 13:02:30]
探索react native首屏渲染最佳实践 [2016-03-29 23:36:39]
从Promise的Then说起 [2016-03-29 23:34:32]
我是如何从装修转到前端 [2016-03-23 17:01:39]
浅谈javascript闭包 [2016-03-21 23:57:20]
Web前端文件处理 [2016-03-21 23:51:06]
深入理解JavaScript定时机制 [2016-03-21 23:18:09]
浅析 JavaScript 中的 “闭包” [2016-03-21 22:53:39]
Ballade: 重新诠释 Flux 架构 [2016-03-21 00:25:19]
React 高效开发环境的搭建 [2016-03-21 00:24:38]
从Java和JavaScript来学习Haskell和Groovy（类型系统） [2016-03-20 22:18:59]
从Java和JavaScript来学习Haskell和Groovy（引子） [2016-03-20 22:17:59]
React-Native学习指南 [2016-03-18 16:50:56]
JavaScript 封装问题 [2016-03-17 00:00:52]
前后端分离的思考与实践（一） [2016-03-15 23:51:42]
让我们写快速的JavaScript,JS性能优化小窍门 [2016-03-15 23:46:25]
“NodeJS在大搜车” 之 MVC基础结构 [2016-03-09 12:59:48]
从Java和JavaScript来学习Haskell和Groovy（元编程） [2016-03-07 23:57:54]
JavaScript中的继承方式 [2016-03-03 13:09:02]
前端编码风格规范（3）—— JavaScript 规范 [2016-03-02 23:53:03]
前端编码规范（1）—— 一般规范 [2016-03-02 23:47:43]
12行代码的浏览器DoS攻击分析及防御 [2016-03-02 00:02:05]
NodeJS的代码调试和性能调优 [2016-02-29 23:41:55]
近几年前端技术盘点以及 2016 年技术发展方向 [2016-02-29 23:30:34]
从Java和JavaScript来学习Haskell和Groovy（DSL） [2016-02-21 22:47:37]
JSON.parse()和JSON.stringify()方法总结 [2016-02-20 14:19:36]
DOM中Property与Attribute的区别 [2016-02-20 14:14:26]
[JavaWeb教程]第二章-jQuery简明开发教程 [2016-02-20 11:48:34]
Node.js 给前端带来了什么 [2016-02-16 22:56:04]
你不该忽视的小问题之margin叠加篇 [2016-02-16 22:07:59]
由NodeJieba谈谈Node.js异步实现 [2016-02-13 23:39:24]
一个“三端”开发者眼中的React Native [2016-02-13 23:14:36]
js代码因逗号不规范导致IE不兼容的问题 [2016-02-12 17:44:22]
javascript定义对象的几种方法 [2016-02-11 16:23:48]
JavaScript初体验 [2016-02-11 14:54:11]
用JavaScript将数字转换为大写金额 [2016-02-11 14:49:39]
跨域访问和防盗链基本原理（二） [2016-02-10 23:09:10]
jQuery对象和DOM对象小结 [2016-02-09 23:31:26]
小tip: 子元素scroll父元素容器不跟随滚动JS实现 [2016-02-09 23:08:00]
自己动手打造基于 WKWebView 的混合开发框架（二）——js 向 Native 一句话传值并反射出 Swift 对象执行指定函数 [2016-02-09 23:02:45]
小tips: CSS或JS实现gif动态图片的停止与播放 [2016-02-07 14:06:53]
小tip: 如何让contenteditable元素只能输入纯文本 [2016-02-06 23:30:38]
充分发挥 JavaScript 语言的优势 [2016-01-27 22:44:11]
基于原生HTML的UI组件开发 [2016-01-26 23:53:04]
用 JavaScript 实现 mailto: [2015-11-02 23:05:49]
我的npm笔记 [2015-09-04 21:33:36]
聊聊移动端跨平台开发的各种技术 [2015-07-17 13:24:44]
使用yuicompressor.jar实现对js、css文件的代码压缩 [2015-06-04 10:25:43]
JavaScript 中的相等检测 [2015-06-02 13:32:28]
什么是全栈工程师？ [2015-06-02 13:27:00]
React初探 [2015-06-02 13:18:39]
用 JS 复制艺术 [2015-06-02 13:17:58]
javascript双向数据绑定 [2015-06-01 23:26:14]
javascript依赖注入 [2015-06-01 23:25:30]
正则表达式基础 [2015-06-01 10:03:59]
JavaScript中真正的哈希映射（译） [2015-05-29 20:10:43]
iframe大小自适应 [2015-05-29 20:10:08]
用 Virtual DOM 加速开发 [2015-05-29 20:00:11]
React入门：关于虚拟DOM（Virtual DOM） [2015-05-11 23:33:16]
细说JavaScript中对象的属性和方法 [2015-05-11 23:22:08]
编写一个简单的JavaScript模板引擎 [2015-04-26 23:00:33]
javascript语句的执行过程分析 [2015-04-26 22:42:46]
JavaScript模块的前世今生 [2015-04-08 14:19:31]
jquery js 动态加载 js文件 [2015-02-14 14:07:45]
我希望我知道的七个JavaScript技巧 [2015-02-06 22:27:24]
图片动态局部毛玻璃模糊效果的实现 [2015-02-06 22:06:06]
JavaScript：多维数组像ORDER BY一样实现多键值排序 [2015-02-03 22:07:12]
Android利用webView调用JavaScript [2015-01-24 23:40:04]
围住神经猫 1步玩法-”作弊” [2015-01-24 23:16:57]
如何在一个页面上让多个jQuery版本共存 [2015-01-23 23:49:54]
JavaScript的闭包问题 [2015-01-23 23:49:11]
揭秘JavaScript中谜一样的this [2015-01-22 23:37:27]
利用函数的惰性载入提高javascript代码性能 [2015-01-22 23:36:25]
给你的网站添加 console.js [2015-01-22 23:32:04]
JavaScript中的this关键字 [2015-01-22 23:31:30]
仅100行的JavaScript DOM操作类库 [2015-01-22 23:30:54]
Javascript继承-原型的陷阱 [2015-01-21 23:51:49]
高效jQuery的奥秘 [2015-01-21 23:46:20]
JavaScript里的依赖注入 [2015-01-21 23:45:41]
JavaScript的作用域和提升机制 [2015-01-21 23:43:40]
每一个JavaScript开发者应该了解的浮点知识 [2015-01-21 23:42:41]
JavaScript对象继承一瞥 [2015-01-21 23:40:47]
认识javascript中的作用域和上下文 [2015-01-20 23:40:21]
有趣的JavaScript原生数组函数 [2015-01-20 23:34:42]
在JavaScript中什么时候使用==是正确的？ [2015-01-20 23:33:04]
了解JavaScript的执行上下文 [2015-01-20 23:31:04]
JavaScript 类型浅解 [2015-01-20 23:14:33]
JavaScript 函数、作用域和继承 [2015-01-20 23:13:28]
JavaScript优化循环 [2015-01-20 23:12:37]
使用window.postMessage实现跨域通信 [2015-01-19 23:58:46]
HTML 5 的data-* 自定义属性 [2015-01-19 23:55:37]
利用js排序html表格 [2015-01-19 23:53:35]
Underscore.js-精巧而强大实用功能库 [2015-01-19 23:37:38]
关于请求被挂起页面加载缓慢问题的追查 [2015-01-17 00:06:49]
从千分位格式化谈JS性能优化 [2015-01-14 13:54:20]
消除疑问：CSS动画 VS JavaScript [2015-01-11 23:39:59]
jQuery选择器对应的DOM API ——选择元素 [2015-01-11 23:30:59]
JavaScript內存优化 [2015-01-05 23:49:40]
写了10年Javascript未必全了解的连续赋值运算 [2015-01-05 23:36:09]
为什么++[[]][+[]]+[+[]]=10？ [2015-01-05 23:34:46]
消除JavaScript闭包的一般方法 [2014-12-30 12:27:21]
JavaScript实现的抛物线运动效果 [2014-12-10 23:07:04]
JavaScript原型之路 [2014-12-06 20:40:13]
XSS 前端防火墙 —— 可疑模块拦截 [2014-12-04 00:09:35]
JavaScript中双叹号(!!)作用 [2014-12-03 23:51:47]
程序员的“横向发展” [2014-11-30 23:54:32]
Javascript中的delete操作符 [2014-11-26 23:16:49]
浏览器特性检测工具：Modernizr [2014-11-26 22:59:34]
jQuery的编码标准和最佳实践 [2014-11-22 23:20:57]
7 天打造前端性能监控系统 [2014-11-21 22:59:13]
从输入 URL 到页面加载完成的过程中都发生了什么事情？ [2014-11-21 00:14:31]
实现动态验证码的思路 [2014-11-20 23:57:18]
跨平台移动框架iMAG开发入门 [2014-11-19 23:30:42]
jQuery 设置复选框选中状态的 BUG [2014-11-19 23:01:54]
js 面向对象日历实现原理详解 [2014-11-07 00:08:43]
基于jQuery的简易手风琴切换插件 [2014-10-15 23:01:00]
javascript运算符 [2014-10-15 22:50:19]
如何捕获和分析 JavaScript Error [2014-09-17 13:59:47]
理解JavaScript 中的 this [2014-09-17 13:44:52]
javascript DOM操作中的insertAdjacentHTML方法 [2014-09-17 13:40:44]
移动应用开发工具：PhoneGap与Titanium的比较 [2014-05-10 21:21:33]
20年的C2C之路 [2014-04-21 12:38:20]
动态创建iframe在IE下的两个问题 [2014-04-15 22:40:29]
从千分位格式化谈JS性能优化 [2014-04-13 22:04:39]
前端开发中Cookie那些事儿 [2014-04-08 22:59:37]
Beforeunload打点丢失原因分析及解决方案 [2014-03-19 22:42:44]
防止表单重复提交的几种策略 [2013-11-20 23:55:45]
如何更好用业余时间做互联网创业？ [2013-10-16 22:34:23]
2014网易前端开发笔试题笔记 [2013-10-08 12:14:44]
谁说设计师不会写代码？—Photoshop脚本语言简介 [2013-09-26 22:34:33]
通过WebRTC获取摄像头影像 [2013-09-23 13:56:16]
实现一下webapp的手机摇一摇功能 [2013-09-23 13:48:42]
10分钟尝试10种编程语言 [2013-09-15 22:33:22]
通过WebRTC获取摄像头影像 [2013-09-15 22:28:03]
JavaScript 中的陷阱 [2013-08-26 23:09:39]
程序员眼里IE浏览器是什么样的 [2013-08-21 13:30:53]
[译文]关于移动Web性能的5个神话 [2013-08-21 13:24:10]
使用SeaJS实现模块化JavaScript开发 [2013-08-13 13:35:22]
学你妹的计算机！ [2013-08-13 13:34:03]
我的博客系统折腾手记暨papery正式发布 [2013-08-13 13:05:47]
javascript继承机制 [2013-08-13 13:04:31]
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述 [2013-08-02 13:29:59]
JavaScript 设置浏览器标题闪动 [2013-07-31 13:18:59]
如何成为一名优秀的web前端工程师（前端攻城师）？ [2013-07-31 12:53:05]
Javascript触屏手势库-jTouch [2013-07-29 23:13:05]
用 javascript 判断 IE 版本号 [2013-07-28 15:28:59]
javascript函数的throttle和debounce [2013-07-08 22:43:51]
jQuery的data()方法 [2013-07-07 21:49:46]
谈谈 jQuery 中的防冲突（noConflict）机制 [2013-06-21 00:05:59]
浏览器的渲染原理简介 [2013-06-19 23:36:50]
Js事件监听封装（支持匿名函数） [2013-06-18 13:57:30]
Javascript 装载和执行 [2013-06-09 13:20:27]
开发者调试工具Chrome Workspace [2013-06-02 20:19:05]
JavaScript的5种调用函数的方法 [2013-05-29 23:09:58]
如何判断Event事件是否是用户主动执行的 [2013-05-28 22:14:04]
现代浏览器中内置的几个可以等效替代jQuery的功能 [2013-05-28 22:09:46]
Javascript中的delete操作符 [2013-05-28 22:08:10]
使用python/casperjs编写终极爬虫-客户端App的抓取 [2013-05-19 23:27:36]
Javascript的那些事儿 [2013-05-16 23:42:19]
如何成为一名优秀的前端工程师 [2013-05-08 13:47:33]
JavaScript深度克隆（深度拷贝）一个对象 [2013-03-11 13:55:16]
jQuery链式操作 [2013-02-28 23:24:16]
Web前端工程师编程能力飞升之路 [2013-02-28 23:22:40]
改变文章的字号大小 [2013-02-19 12:00:35]
jQuery 1.9升级指南 [2013-02-19 11:58:21]
了解前端内存泄露 [2013-01-18 14:04:04]
DOM中nodeName、nodeValue 及 nodeType的说明 [2013-01-18 13:56:28]
web开发设计人员不可不用的在线web工具和应用 [2013-01-16 13:48:45]
深入理解Javascript之执行上下文(Execution Context) [2013-01-10 22:38:47]
flv网页播放器源码 [2013-01-10 22:22:41]
如何判断自己是否到了该辞职的时候 [2013-01-10 22:14:10]
javascript事件触发器fireEvent和dispatchEvent [2013-01-08 13:00:53]
Node.js和testacular的安装与配置 [2012-12-25 12:31:02]
正则表达式 — QQ微信、优酷前端邮箱正则表达式验证 Bug [2012-12-23 23:29:43]
缓存为王 [2012-12-21 13:39:42]
JavaScript中两个感叹号（!!）的作用 [2012-12-21 13:35:49]
使用window.postMessage实现跨域通信 [2012-12-21 13:35:11]
IE BUG相关文章集合 [2012-12-19 13:30:03]
关于前端开发 [2012-12-18 23:25:27]
javascript运算/转换技巧 [2012-12-18 23:20:19]
使用 SourceMap 来进行前端代码调试 [2012-12-18 23:06:31]
取得当前script元素的src(path) [2012-12-14 14:07:00]
javascript扩展Array(数组)类 [2012-12-11 13:40:11]
10个超棒jQuery表单操作代码片段 [2012-12-09 20:30:08]
谈产品经理的转行 [2012-12-08 23:02:32]
JavaScript定时机制、以及浏览器渲染机制浅谈 [2012-12-06 14:04:39]
《javascript权威教程》、《javascript 王者归来》等几本书 [2012-12-06 14:02:08]
通过使用Chrome的开发者工具来学习JavaScript [2012-12-06 13:42:09]
tabIndent.js让你在Textarea中也能用Tab键 [2012-12-03 23:55:04]
国内团购网前端严重安全漏洞– 以满座网为案例分析 [2012-11-27 13:44:15]
关于“浏览器无法拦截的弹出窗口”、IE、Firefox弹出新窗口 [2012-11-27 13:41:52]
jQuery 教程的一点总结 [2012-11-27 13:40:50]
为什么通过前端 .js 记用户日志会丢数据 [2012-11-26 13:49:17]
IE的documentMode属性 [2012-11-11 23:46:28]
匿名函数中undefined形参疑问 [2012-11-01 13:23:40]
构建web前端异常监控系统–FdSafe [2012-10-28 23:20:05]
Web标志(The Mark of The Web)摘记 [2012-10-26 13:32:20]
网站统计中的数据收集原理及实现 [2012-10-26 13:09:06]
60多个超炫的视差滚动效果网站设计欣赏 [2012-10-26 00:25:29]
JS判断鼠标从什么方向进入一个容器 [2012-10-22 22:13:29]
微博Karma和其算法的一些简单介绍 [2012-10-22 13:19:38]
HoverDir响应鼠标移动方向的悬停效果插件 [2012-10-22 13:16:24]
JavaScript运算符 [2012-10-14 23:29:06]
基于有限状态机的交互组件设计与实现 [2012-10-14 22:35:25]
巧解 JavaScript 中的嵌套替换 [2012-09-20 14:01:04]
网站性能评测点 [2012-09-20 13:53:54]
简单js+css实现模拟自定义select样式 [2012-09-10 23:29:05]
JS如何实现响应滚轮（同时设置滚动条无效） [2012-09-06 23:59:27]
JS（如何判断）鼠标滚轮事件解析 [2012-09-06 23:54:43]
使用jQuery开发一个带有密码强度检验的超酷注册页面 [2012-09-06 23:42:16]
优秀的JavaScript模块是怎样炼成的 [2012-08-31 00:05:45]
Google Analytics的新秘密——如何定义Visit [2012-08-28 23:13:49]
beforeunload丢失率统计 [2012-08-28 14:18:38]
脚本语言ymd：介绍 [2012-08-20 23:40:24]
挑战网站分析中的大众智慧（1）——Bounce Rate [2012-08-14 14:04:28]
创业的人招聘怎样的人靠谱？ [2012-08-07 13:42:07]
js图片延时加载（jquery特效） [2012-08-07 13:36:08]
“很有激情”的创业预备队员的困惑 [2012-07-30 23:49:11]
意识流 [2012-07-27 14:11:57]
一种基于flex的可视化多层流量切分界面的实现 [2012-07-09 23:10:17]
JavaScript解析：让搜索引擎看到更真实的网页 [2012-07-04 14:03:22]
谈谈对O2O产品的一些看法 [2012-06-19 23:57:47]
高性能JavaScript模板引擎原理解析 [2012-06-17 17:54:54]
云标签，关键字图排版 html5 canvas版（一） [2012-06-10 21:52:12]
Web设计师需要编程知识吗？ [2012-06-07 00:10:27]
使用Javascript获取页面所在目录的绝对路径 [2012-05-28 12:36:58]
Cookie安全漫谈 [2012-05-11 00:01:25]
DOM元素上jQuery事件几点学习 [2012-05-08 00:05:47]
中国创业环境之殇 [2012-05-07 23:53:56]
Juicer – 一个Javascript模板引擎的实现和优化 [2012-04-27 00:03:09]
JAVASCRIPT完美实现UTF8页面提交数据到GB2312 [2012-04-26 23:55:45]
如何制作chrome扩展程序 [2012-04-26 23:36:39]
初识PhoneGap [2012-04-12 13:34:32]
为什么我们要学习Haskell这样的编程语言 [2012-04-12 13:33:09]
Object类相关的属性，方法和操作符 [2012-04-12 13:32:38]
javascript实现简单的链式调用 [2012-04-07 21:46:19]
轻触，数据美丽的外衣 [2012-03-31 23:32:36]
JavaScript Slider效果实现思路 [2012-03-31 23:28:03]
设计师也需要了解的一些前端知识 [2012-03-31 22:39:03]
js防刷新的倒计时代码 [2012-03-25 21:43:50]
网页游戏中的动物世界法则和三角形法则 [2012-03-25 21:35:04]
javascript实现简单的链式调用 [2012-03-25 21:17:43]
一个独立程序员对自己近九个月工作生活的回顾 [2012-03-12 23:53:17]
理解Javascript的闭包 [2012-03-12 23:34:51]
迁户口实录(深圳集体户到杭州个户) [2012-03-11 22:04:39]
延迟加载图片的jQuery插件-Lazy Load Plugin for JQuery [2012-03-04 20:47:33]
[译]原生全屏Javascript API [2012-03-04 18:21:23]
如何在WordPress文章内插入onclick [2012-03-04 17:44:42]
再谈javascript面向对象编程 [2012-03-04 17:40:56]
Javascript 静态类的实现 [2012-03-04 17:33:21]
Javascript 类的实现 [2012-02-26 23:14:35]
Javascript 中的 call 和 apply [2012-02-05 23:10:08]
javascript插入样式 [2012-02-05 23:06:38]
跨域修改iframe内的文字 [2012-02-05 15:32:23]
js和css的顺序关系 [2012-02-05 15:30:22]
javascript的configuration/interface变换 [2012-01-29 20:53:26]
chrome扩展应用开发教程之开发chrome应用基础 [2012-01-27 19:01:53]
像php一样奔跑的js代码 [2012-01-27 18:51:38]
最奇特的编程语言特征 [2012-01-27 18:05:22]
设置样式方法setStyle [2012-01-27 18:04:32]
受禁锢的异步编程思维 [2012-01-27 18:01:06]
Javascript 面向对象编程 [2012-01-24 14:06:20]
拒绝平庸――浅谈WEB登录页面设计 [2012-01-24 13:52:15]
Javascript绝句欣赏 [2012-01-24 13:37:54]
【外刊IT评论网】为什么 ++[[]][+[]]+[+[]] = 10 ？ [2012-01-14 22:37:02]
暂停页面资源占用 [2012-01-14 22:28:38]
瀑布布局的JavaScript实现方式 [2012-01-03 23:48:47]
JavaScript与设计模式 [2012-01-03 23:46:43]
Node.js中相同模块是否会被加载多次？ [2012-01-03 23:45:06]
知心怪蜀黍NO.1 网站编辑怎样转内容运营 [2011-12-21 00:17:21]
Google+开发团队分享经验 [2011-12-18 22:24:10]
HTML5 Canvas(画布)教程 [2011-12-18 22:19:47]
javascript中神奇的（+）加操作符 [2011-12-18 21:57:34]
PhoneGap应用开发的那些坑爹事儿 [2011-12-14 13:40:46]
移动互联网api设计实践 [2011-12-11 16:21:09]
JavaScript6看上去很美 [2011-12-11 15:53:55]
Web开发中需要了解的东西 [2011-12-11 15:38:12]
浅析来源分析的数据可视化 [2011-12-11 15:34:34]
jQuery事件的冒泡过程 [2011-11-23 23:57:56]
javascript嵌套函数的效率问题 [2011-11-21 00:07:40]
IE6中javascript文件开启Gzip出现代码不执行情况 [2011-11-16 23:43:57]
正确理解javascript的this关键字 [2011-11-16 00:12:45]
javascript的String.replace的妙用 [2011-11-13 23:59:31]
我做前端一年半 [2011-11-13 21:11:21]
javascript作用域和作用域链 [2011-11-06 22:42:21]
如何用 JS 实现 3D 赛车效果 [2011-11-06 22:30:41]
JS 3D 模型 [2011-11-06 22:30:16]
Javascript模板引擎分享 [2011-11-04 22:22:13]
【外刊IT评论网】关于node.js语言的讨论 [2011-11-04 22:15:51]
细节魔鬼与精简团队 [2011-10-18 23:29:39]
javascript获取隐藏dom的宽高 [2011-10-14 14:01:24]
nodejs教程：安装及配置app.js文件 [2011-10-14 13:59:03]
新版微博体验 [2011-10-13 14:05:19]
stream.js ：一个新的JavaScript数据结构 [2011-10-13 13:57:53]
js 获取url的get传值函数 [2011-10-11 23:49:06]
前端要给力之：分解对象构造过程new() [2011-10-04 18:04:09]
div+css+js无缝滚动代码 [2011-09-26 23:28:14]
规范自己的JavaScript书写 [2011-09-21 23:22:22]
html中链接地址的重要性 [2011-09-21 23:16:45]
js编码之 encodeURIComponent [2011-09-21 22:24:17]
为什么招不到人 [2011-09-21 13:36:24]
前端要给力之：原子，与原子联结的友类、友函数 [2011-09-20 22:34:21]
jquery实现的回车(Enter)替换为Tab键 [2011-09-19 23:42:51]
Jquery通用表单验证类 [2011-09-19 23:41:14]
遍历一个对象并执行其中的方法 [2011-09-19 23:40:13]
瀑布流布局浅析 [2011-09-16 00:05:55]
用 JavaScript 对 JSON 进行模式匹配 (Part 2 - 实现) [2011-09-07 23:20:04]
用 JavaScript 对 JSON 进行模式匹配 (Part 1 - 设计) [2011-09-07 23:19:05]
使用canvas绘制时钟 [2011-09-04 22:35:51]
什么是Node？ [2011-09-04 14:23:49]
使用navigator.geolocation来获取用户的地理位置信息 [2011-08-23 13:41:03]
iframe自适应高度代码 [2011-08-23 13:24:07]
使用JavaScript和Canvas开发游戏（五） [2011-08-21 10:35:52]
使用JavaScript和Canvas开发游戏（四） [2011-08-21 10:28:43]
使用JavaScript和Canvas开发游戏（三） [2011-08-21 10:25:18]
使用JavaScript和Canvas开发游戏（二） [2011-08-21 10:21:26]
javascript的词法作用域 [2011-08-19 22:55:43]
使用JavaScript和Canvas开发游戏（一） [2011-08-18 13:50:53]
微博，将让新浪血尽而死 [2011-08-18 13:49:59]
javascript变量类型 [2011-08-14 15:49:27]
IE的fireEvent方法 [2011-08-09 08:25:46]
JavaScript：假如default不是switch的最后一项 [2011-08-09 08:13:19]
使用JavaScript和Canvas开发游戏 [2011-08-09 08:06:05]
强大的纯JS数据图工具-flot [2011-08-05 13:51:45]
javascript匿名函数 [2011-08-05 13:44:04]
你的网站使用Flash了吗？ [2011-07-30 21:54:56]
三谈类型问题：ECMAScript为什么错了？ [2011-07-30 21:47:01]
再谈JavaScript的数据类型问题 [2011-07-30 21:37:42]
确认框的设计 [2011-07-30 21:16:39]
JSON对象和字符串之间的相互转换 [2011-07-30 20:35:01]
10种方式实现跨域资源的共享 [2011-07-26 13:43:28]
前端开发中HTML与javascript的常用字符编码 [2011-07-26 13:42:25]
精于图片处理的10款jQuery插件 [2011-07-24 14:56:36]
十款Firefox插件帮助Web开发者提高效率 [2011-07-24 14:56:15]
给数据穿上美丽的外衣 [2011-07-24 14:55:27]
使用 HTML5 可以做的五件很棒的事情 [2011-07-24 14:55:01]
JavaScript是Web的汇编语言（二）：疯狂，亦或只是精神错乱？ [2011-07-22 00:04:25]
JavaScript是Web的汇编语言（一）：语义Web已死！ [2011-07-22 00:03:10]
IE6中a标签location.href失效解决方法 [2011-07-22 00:01:37]
关于JavaScript中Function Declaration与Function Expression的进一步说明 [2011-07-18 13:40:39]
使用SeaJS实现模块化JavaScript开发 [2011-07-18 13:35:39]
在SeaJS中实现html模板文件的加载（Temod介绍） [2011-07-18 13:34:43]
用In.js颗粒化管理、加载你的Javascript模块 [2011-07-18 12:31:22]
解决jQuery动画在chrome下暴走的问题 [2011-07-15 00:13:53]
javascript事件：获取事件对象getEvent函数 [2011-07-15 00:03:45]
Javascript匿名函数解读 [2011-07-12 13:49:11]
华丽丽的HTML5新特性 [2011-07-12 13:34:57]
jQuery判断一个元素是否为另一个元素的子元素(或者其本身) [2011-07-12 13:32:45]
Javascript和CSS浏览器兼容总结 [2011-07-09 22:44:14]
新浪微博jsSDK操作指南 [2011-07-09 22:31:20]
JavaScript逻辑运算符及优先级 [2011-07-06 23:48:25]
7款实用的Javascript代码高亮脚本 [2011-07-05 23:21:25]
Javascript诞生记 [2011-06-30 23:51:52]
Javascript中的this [2011-06-24 14:08:30]
如何编写高质量的Javascript代码 [2011-06-24 14:06:03]
jQuery是大规模应用开发的最佳选择吗？ [2011-06-24 13:59:52]
javascript数组排序的问题 [2011-06-23 13:42:28]
javascript正则表达式教程 [2011-06-23 13:42:01]
Web表单设计:表单结构 [2011-06-23 13:27:48]
对大量子节点DOM操作的最佳实践方式 [2011-06-23 00:29:36]
自己写的一个轻量级javascript框架的设计模式 [2011-06-23 00:27:12]
转变代码思路：js浏览器判断方法 [2011-06-23 00:25:23]
浏览器对JavaScript代码执行的限制 [2011-06-23 00:21:34]
JavaScript，只有你想不到 [2011-06-23 00:08:33]
快速排序（Quicksort）的Javascript实现 [2011-06-22 00:12:39]
十年以前，我想做个网站！ [2011-06-22 00:01:17]
在 JavaScript 中监听 IME 键盘输入事件 [2011-06-21 23:51:50]
Javascript继承机制的设计思想 [2011-06-21 13:35:16]
前端设计类书籍推荐 [2011-06-21 13:27:01]
javascript继承的写法 [2011-06-21 13:22:45]
优化innerHTML操作 [2011-06-20 13:34:52]
JavaScript本地存储实践（html5的localStorage和ie的userData） [2011-06-13 13:56:36]
js判断一个元素是否为另一个元素的子元素 [2011-06-09 14:04:52]
在浏览器中加密Cookie [2011-06-02 23:44:09]
Ajax和WEB服务数据格式：XML SOAP HTML [2011-06-02 23:33:36]
能说明你的Javascript技术很烂的五个原因 [2011-06-02 23:06:05]
使用YUI 3开发Web应用的诀窍 [2011-06-02 22:46:38]
使用javascript将XML解析为JSON [2011-06-02 00:08:29]
跨浏览器的HTML5占位文本(PlaceHolder)方案 [2011-06-01 23:55:59]
流量统计方法分类 [2011-06-01 13:36:56]
理解JSON：3分钟课程 [2011-06-01 13:34:32]
jQuery延时绑定事件(lazy-bind) [2011-06-01 13:28:03]
分享？亦或收藏？ [2011-05-31 14:01:19]
Firebug Console API 与命令行 [2011-05-30 13:54:25]
NodeList集合跟Array数组的区别 [2011-05-25 13:44:14]
insertContent-在文本框光标位置插入内容并选中 [2011-05-25 13:28:11]
更好的用vim浏览Javascript代码 [2011-05-17 09:08:49]
用JavaScript判断IE版本号 [2011-05-17 09:01:23]
快速清除多选框的已选中状态 [2011-05-17 08:51:58]
正则表达式字面量在ECMAScript5中的变化 [2011-05-17 08:43:40]
JS文件加载失败处理 [2011-05-17 08:42:19]
IE中Image .onload方法问题 [2011-05-15 14:35:32]
如何判断Javascript对象是否存在 [2011-05-15 14:32:38]
利用跨域资源共享（CORS）实现ajax跨域调用 [2011-04-28 13:20:11]
使用Jscex实现排序算法动画 [2011-04-27 23:51:44]
UglifyJS有个不错的JavaScript解析器 [2011-04-27 23:51:10]
使用Google Closure Compiler全力压缩代码 [2011-04-27 23:50:38]
Jscex使用BSD授权协议正式发布 [2011-04-27 23:46:05]
Firefox滚动残影 [2011-03-30 13:46:52]
关于前端开发那些事（五）激励体制 [2011-03-29 00:17:10]
关于前端开发那些事儿(四) 技术的本质何在? [2011-03-29 00:16:51]
Canvas高级特性 [2011-03-27 23:55:35]
jQuery中的动画 [2011-03-27 23:34:23]
为什么IE9是网页设计师的噩梦 [2011-03-22 23:43:41]
Canvas学习教程 : Canvas介绍 [2011-03-22 23:37:12]
图说浏览器战争：火狐、微软、谷歌那些事 [2011-03-22 23:31:22]
JavaScript基于计时器的伪线程机制 [2011-03-21 00:11:07]
如何在JavaScript中处理大量数据 [2011-03-21 00:07:17]
如何安装Node.js [2011-03-07 22:44:53]
如何写出高质量的Javascript代码 [2011-03-06 22:53:44]
有趣的变量作用域-PHP中global和Javascript中的var关键字 [2011-03-02 23:03:38]
javascript with延伸的作用域是只读的吗？ [2011-03-02 22:58:13]
Javascript中的函数声明和函数表达式 [2011-03-01 22:40:09]
让你的网站也像Gmail一样支持文件拖放上传-HTML5之File API [2011-02-23 22:26:27]
让人又爱又恨的标签们 [2011-02-23 22:18:59]
Pinterest：充分挖掘视觉的潜力 [2011-02-22 23:23:16]
建设一个网站的成本（之二） [2011-02-16 22:25:04]
建设一个网站的成本（之一） [2011-02-16 22:24:34]
Web开发人员速查卡 [2011-02-16 22:16:42]
怎样限制用户 [2011-02-15 22:54:10]
适合JavaScript 1.7中迭代生成器的异步编程机制 [2011-02-14 22:37:47]
JavaScript版本的AsyncEnumerator [2011-02-14 22:37:28]
一段Javascript的代码 [2011-02-14 21:26:04]
JS游戏引擎列表 [2011-02-13 22:47:06]
服务器端执行JavaScript代码 [2011-02-13 22:36:26]
使用Narcissus解析JavaScript代码 [2011-02-13 22:32:32]
用户及用户特征 [2011-02-13 21:03:25]
程序员的档次？有没有搞错？！ [2011-02-10 22:20:09]
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] ) [2011-01-28 03:27:33]
Nicholas C. Zakas谈怎样才能成为优秀的前端工程师 [2011-01-27 22:57:44]
网站开发人员应该知道的61件事 [2011-01-26 21:16:37]
前端要给力之：代码可以有多烂？ [2011-01-25 23:04:28]
IE7中js的执行顺序 [2011-01-25 22:43:12]
渐进式的脚本加载 [2011-01-25 22:33:25]
从用户体验出发的性能指标分析-TTI [2011-01-24 22:53:51]
创业与招聘 [2011-01-23 19:30:27]
前端代码之丑（3）：蛋疼的压缩式写法 [2011-01-20 22:40:29]
前端代码之丑（2）：丑陋的条件语句 [2011-01-20 22:39:53]
前端代码之丑（一）：分支化技巧 [2011-01-20 22:39:10]
JavaScript 的异步测试 [2011-01-20 22:37:40]
JavaScript 测试覆盖率检测工具 [2011-01-20 22:36:50]
SEO:百度百科理论知识大汇总 [2011-01-19 22:19:36]
Nodejs和MongoDB初体验 [2011-01-18 22:18:35]
新浪操作textarea的工具函数 [2011-01-18 22:17:25]
基于 SeaJS 模块化开发的一个实例 [2011-01-17 22:31:10]
前端开发小工具集合 [2011-01-12 23:12:00]
jQuery打印插件 [2011-01-10 23:17:56]
天朝第二代身份证号码的验证机制 [2011-01-05 22:34:58]
网易首页2011新版随想 [2011-01-05 22:11:18]
标题栏新消息提示 [2011-01-05 03:32:11]
新媒体艺术的分众性研究 [2010-12-29 21:49:23]
关于前端开发那些事儿（三）技术之变现 [2010-12-29 21:46:25]
前端要给力之：分解对象构造过程new() [2010-12-29 09:12:00]
让“提到”、“转发”和“评论”各司其职 [2010-12-28 20:56:16]
Closure Compiler 高级模式及更多思考 [2010-12-28 20:55:40]
门户、创新、创业之道 [2010-12-26 20:57:54]
基于WEB2.0的社交网络浅析 [2010-12-15 22:45:49]
两行 JavaScript 代码 [2010-12-15 22:16:36]
多余的逗号 [2010-12-15 22:13:52]
关于WEB登录注册系统的下午茶 [2010-12-14 22:05:06]
社区获取新用户的一些尝试 [2010-12-01 22:46:50]
JavaScript 压缩中的权衡 [2010-11-30 22:48:25]
JSCoverage 的一个 Uncoverage [2010-11-30 22:38:13]
让生活变简单的简单网站 [2010-11-29 22:45:37]
模拟宽度自适应的输入框 [2010-11-24 23:10:19]
如何开发Web应用程序 [2010-11-22 21:22:54]
行进中的前端类库：KISSY [2010-11-14 21:13:31]
一场关于YUI3/jQuery的精彩辩论 [2010-11-14 21:11:09]
将你的 KISSY 程序移植到服务器端 [2010-11-14 21:10:22]
弹窗广告开发 [2010-11-13 09:07:19]
红孩子网站推广方案 [2010-11-13 08:54:33]
JavaScript语法检查插件 jsLint for Vim [2010-11-11 19:40:55]
自己实现的简单的html元素选择器，类似jquery选择器，比jquery选择器还要快！ [2010-11-11 19:35:43]
网站UI实现的8种方式 [2010-11-10 18:58:23]
前端开发是产品设计么 [2010-11-07 22:39:24]
编写高性能的jQuery代码 [2010-11-07 08:47:10]
jquery中的数组过滤筛选-$.grep() [2010-11-04 21:53:09]
用javascript来摧毁你所访问的网站 [2010-10-31 23:33:11]
a.x = a = { }, 深入理解赋值表达式 [2010-10-31 23:31:44]
又到一年校招时：校园用户使用的招聘类网站对比 [2010-10-30 07:58:35]
互联网广告的发展史 [2010-10-28 22:20:35]
设计模式-自动完成 [2010-10-28 07:30:46]
[译]BigPipe：高性能的“流水线技术”网页 [2010-10-27 08:53:07]
互联网上的恶趣味以及价值观 [2010-10-25 09:04:06]
互联网的人才储备 [2010-10-25 09:02:20]
如何在25步之内开发出一个网站 [2010-10-22 00:31:07]
Seor想成功必须具备的十大素质 [2010-10-22 00:30:39]
跨域资源共享的10种方式 [2010-10-21 09:03:36]
JavaScript解析QueryString [2010-10-18 08:15:13]
FlashCookie [2010-10-14 09:09:23]
jQuery 操作option [2010-10-14 09:05:24]
jQuery之保证你的代码安全 [2010-10-14 01:06:40]
防垃圾邮件在线生成邮箱地址图标 [2010-10-12 22:15:30]
jQuery之简写ready方法 [2010-10-10 08:36:51]
jQuery之不要滥用$(this) [2010-10-08 20:59:31]
jQuery之jQuery方法总是返回jQuery对象 [2010-10-07 08:22:03]
记录用户体验细节 [2010-09-30 03:13:37]
GC与JS内存泄露 [2010-09-28 09:29:15]
用 CSS3 Transitions 实现动画 [2010-09-28 09:23:25]
回到顶部 -- jQuery插件 [2010-09-28 09:17:14]
细说 expando 的来源 [2010-09-27 00:13:58]
A/B测试：实现方法 [2010-09-26 22:23:45]
团购体验记 -- 上岛咖啡 [2010-09-26 09:08:53]
关于网页问卷入口的小结 [2010-09-26 08:58:43]
优雅地扩大链接响应区域 [2010-09-24 23:48:43]
防止垃圾邮件小技巧两则 [2010-09-14 08:56:18]
Array的push与unshift方法性能分析 [2010-09-14 08:53:23]
浅谈后台页面按钮运用 [2010-09-12 23:37:41]
弹出窗口的兼容方案 [2010-09-11 09:56:16]
Inline Form Labels（2） [2010-09-11 09:55:12]
社交网络语法：关于“Checkin” [2010-09-05 23:29:35]
JS不是前端的全部 [2010-08-30 04:34:02]
头像web版交互设计总结 [2010-08-23 22:04:19]
jRaiser与jQuery的冲突问题 [2010-08-23 22:03:24]
HTML5中的自定义属性 [2010-08-17 23:06:35]
从另外两道题说起 [2010-08-17 23:05:33]
js 操作option [2010-08-17 22:57:14]
[Perl]Template Toolkit 内插引起 JavaScript $ 异常 [2010-08-17 22:54:46]
jQuery实例为什么在firebug下表现出数组的特征 [2010-08-17 10:19:43]
世界海底光缆分布图 [2010-08-17 01:27:49]
Javascript预解析相关一则 [2010-08-15 22:48:39]
警惕网站分析监测实施的陷阱（下） [2010-08-15 22:31:17]
js selector设计及实现（二）――完善及优化 [2010-08-12 23:34:51]
js selector设计及实现（一）――实现思路 [2010-08-12 23:32:21]
Switch Case中的经典 [2010-08-12 09:13:19]
优雅绝妙的Javascript跨域问题解决方案 [2010-08-12 04:36:17]
优雅兼容之理想与现实 [2010-08-10 22:29:01]
前端优化总结 [2010-08-09 09:37:37]
DOM操作琐碎知识点 [2010-08-09 09:36:11]
两行 JavaScript 代码 [2010-08-08 23:56:59]
Javascript浅拷贝与深拷贝 [2010-08-08 23:53:50]
jQuery.animate简单分析 [2010-08-06 09:47:10]
relatedTarget, fromElement, toElement [2010-08-06 00:16:45]
elem.style.left与elem.offsetLeft的区别 [2010-08-06 00:15:38]
图片旋转的小例子 [2010-08-05 10:00:54]
JS中如何判断字符串类型的数字 [2010-08-04 23:35:47]
Inline Form Labels [2010-08-04 23:17:16]
不要用setAttribute设置className [2010-08-04 00:07:31]
获取元素在页面的绝对位置 [2010-08-04 00:06:48]
改写jQuery UI的Accordion [2010-08-04 00:06:05]
js数组去重 [2010-08-03 23:53:32]
别让妈妈生气――浅谈长者用户 [2010-08-02 02:28:46]
【翻译】构建成功web应用的十项黄金法则 [2010-07-29 22:53:24]
三谈Iframe自适应高度 [2010-07-28 09:36:32]
JS 常用继承实现方式 [2010-07-28 09:31:56]
Microstrategy 8.1.2 Web Universal 开发问题整理 [2010-07-27 23:23:34]
Google Docs Ctrl + C 技术浅析 [2010-07-27 23:22:51]
警惕网站分析监测实施的陷阱（上） [2010-07-27 23:19:49]
禁用或启用一个ValidationGroup里的全部验证控件 [2010-07-25 22:31:01]
用 JS 枚举质数 [2010-07-25 09:07:40]
网站性能监测工具Boomerang [2010-07-23 00:19:58]
js窗口间通信摘要 [2010-07-23 00:08:47]
JS操作iframe里的dom [2010-07-23 00:08:26]
不要纠结于实现的圈套中 [2010-07-22 20:05:56]
关于动态创建script元素 [2010-07-21 23:31:38]
JavaScript性能陷阱 [2010-07-21 09:54:59]
HTML5文件API之图片预览 [2010-07-20 23:14:35]
亚马逊用户体验改善 [2010-07-20 09:50:25]
KISSY 近期更新 & 设计思路讨论 [2010-07-19 22:55:33]
jQuery实例为什么在firebug下表现出数组的特征 [2010-07-19 19:47:46]
jQuery.animate简单分析 [2010-07-18 23:30:13]
按钮制作一小例 [2010-07-18 23:28:23]
jRaiser与jQuery的冲突问题 [2010-07-18 08:42:45]
javascript 缓存提供程序 [2010-07-15 08:43:00]
互联网产品设计十年 [2010-07-14 22:27:47]
What really it is, not what it is [2010-07-14 09:42:04]
同是做网站，他们是怎么用词的？ [2010-07-14 00:03:24]
各公司对前端开发的职位描述 [2010-07-14 00:01:20]
WEB性能测试工具推荐 [2010-07-12 23:27:11]
JavaScript Interface 接口的实现 [2010-07-12 23:26:03]
电子商务网站“用户评论”模块浅析 [2010-07-09 13:13:20]
我们来做一个会呼吸的菜单吧!! [2010-07-07 12:29:39]
关于排行榜代码优化 [2010-07-02 09:31:20]
window.location.href,window.location.replace(),window.location.reload() 三者的区别 [2010-06-30 15:54:28]
IE中createElement需要注意的一个小问题 [2010-06-27 22:30:03]
“铁”饭碗 [2010-06-27 22:26:43]
2010网页设计趋势 [2010-06-27 22:14:17]
IE6图片加载的一个BUG [2010-06-25 12:20:42]
页面中的全局污染 [2010-06-23 13:03:04]
网站分析“高考”答案 [2010-06-23 12:54:15]
实现一个更精简的Tab [2010-06-21 17:29:49]
再论Javascript的类继承 [2010-06-20 23:46:10]
以用户为中心的 API 异常设计 [2010-06-18 18:08:38]
创业和投资人的眼光 [2010-06-18 18:07:53]
href,replace(),reload() 三者的区别 [2010-06-18 18:05:55]
网站分析的应用和价值 [2010-06-18 18:03:07]
IE6下appendChild的一个小问题。 [2010-06-12 17:46:10]
在服务端合并和压缩JavaScript和CSS文件 [2010-06-11 11:55:52]
移动网站开发――标记语言 [2010-06-07 13:04:59]
谦虚一点去工作 [2010-06-03 13:17:33]
JavaScript Creating Objects Other Pattern [2010-06-02 23:00:51]
JavaScript Dynamic Prototype Pattern [2010-06-02 22:56:39]
关于JS获取select的值 [2010-06-02 11:51:44]
BO报表系统嵌入Iframe在firefox下的错误修改 [2010-06-01 21:56:50]
关于前端开发的那些事（一） [2010-06-01 13:12:16]
我的互联网信仰 [2010-06-01 13:01:12]
狗血的中天置地 [2010-05-31 23:56:55]
HTML在线编辑器的实现难点 [2010-05-28 18:39:13]
ExtJS源码研究笔记之总评 [2010-05-28 09:35:35]
parseInt 小陷阱 [2010-05-25 13:32:22]
Javascript面向对象编程（三）：非函数对象的继承 [2010-05-25 13:28:44]
websocket 通信协议 [2010-05-24 16:27:42]
用工具跟踪用户的行为 [2010-05-24 16:26:34]
Javascript面向对象编程（二）：继承 [2010-05-24 09:46:15]
Javascript 面向对象编程（一）：封装 [2010-05-24 09:45:40]
全兼容的滚动js脚本 [2010-05-23 21:42:02]
社会化媒体营销 [2010-05-22 13:09:13]
一个IE6下重复加载的BUG [2010-05-20 13:25:14]
jRaiser揭秘――事件监听兼容处理 [2010-05-17 13:08:38]
Javascript原型链和原型的一个误区 [2010-05-14 13:49:08]
互动传媒 ―― 带你进入网络的互动视界 [2010-05-07 13:49:49]
Javascript的this用法 [2010-05-05 13:31:14]
Google对网页时间的关注 [2010-05-04 10:09:36]
Array.prototype.slice [2010-05-04 10:07:52]
关于腾讯微博的一些思考…… [2010-04-30 15:47:32]
支持多浏览器的网站变灰方法 [2010-04-27 13:48:13]
关于对浏览器兼容性的一点点理解 [2010-04-25 21:58:03]
IE下pre标签的InnerHTML问题 [2010-04-16 13:28:58]
界面程序开发的一些总结 [2010-04-16 09:20:18]
Zakas解答Baranovskiy的JavaScript小测试 [2010-04-15 13:45:23]
不一样的交互组件（下） [2010-04-14 13:44:04]
如何创建google浏览器插件 [2010-04-14 13:35:59]
javascript对XML的读写操作 [2010-04-14 09:20:09]
JSON 轻量级的数据交换格式 [2010-04-13 10:59:08]
2009年前端技术领域回顾 [2010-04-12 23:49:30]
你真的了解HTML吗 [2010-04-12 23:48:33]
JavaScript组件打包模式 [2010-04-09 09:12:53]
superLink，让伪链接更有可用性 [2010-04-09 09:12:16]
让Vim(gvim)更好的支持javascript编程 [2010-04-09 09:10:39]
什么是网页标准？ [2010-04-08 23:52:05]
百度HI QQ和MSN 阿里旺旺贸易通MSN在线客服聊天代码 [2010-04-08 14:23:50]
语义化的label？ [2010-04-07 09:11:44]
兼容所有浏览器的设为首页与显示小策略 [2010-04-07 09:11:06]
Debugging JavaScript：throw与console [2010-04-07 09:08:41]
如何让discuz7 版规支持html代码 [2010-03-31 09:28:21]
一个兼容多种场合的Javascript图片大小自适应function [2010-03-31 09:24:22]
异步完成后新开窗口 [2010-03-28 15:13:54]
js对cookie的几个操作函数(仅作备忘) [2010-03-24 22:28:36]
在wordpress中使用Google Reader “Send To” [2010-03-09 13:13:34]
防止垃圾邮件小技巧两则 [2010-03-09 09:14:15]
在js中对中文和特殊字符转码 [2010-03-08 23:06:43]
Script 元素的异步加载属性 [2010-03-07 23:28:31]
jQuery边框圆角插件：DivCorners [2010-03-03 23:58:12]
JavaScript 全半角转换 [2010-03-02 13:46:45]
JavaScript 屏蔽右键 [2010-03-02 13:40:15]
js中鼠标滚轮事件详解 [2010-02-25 09:31:18]
外链点击没有 referrer 信息?! [2010-02-09 09:09:58]
JQuery实现Excel表格呈现 [2010-02-09 09:04:36]
Fastest JavaScript Trim [2010-01-15 14:56:00]
WebGame的力量有多大 [2010-01-15 14:42:37]
获取Dom元素的X/Y坐标 [2010-01-13 09:12:02]
YUI3设计中的激进和妥协 [2010-01-12 13:28:48]
The Deferred Evaluation of YUI 3 [2010-01-12 13:26:18]
终于想到如何给《三枪》归类了 [2010-01-12 13:24:35]
如何做好一份前端工程师的简历？ [2010-01-11 12:13:21]
用javascript悬停效果改善你的在线商店的12种方法 [2010-01-08 17:05:42]
手机网站开发必修课[2009总结版] [2010-01-08 13:03:31]
12种不宜使用的Javascript语法 [2010-01-08 13:00:16]
能看到的都不是核心竞争力 [2010-01-04 12:51:07]
vim的一个js代码整理的插件jsbeautify.vim [2009-12-28 10:45:11]
Javascript Selectors 入门篇 [2009-12-23 13:34:13]
图片轮播控件 Carousel Controls [2009-12-22 14:22:26]
2009年年终盘点 [2009-12-19 17:58:19]
你的网上商店需要用TAB栏吗？ [2009-12-18 15:42:34]
如何给JavaScript文件传递参数 [2009-12-17 09:21:25]
可能被你忽略的 JavaScript 代码陷阱 [2009-12-17 09:16:28]
JS+CSS实现隔行换色 [2009-12-13 20:20:43]
javascript 验证例子,让你精通js [2009-12-11 22:52:45]
javascript各种各样的验证方法(正则表达式) [2009-12-11 22:52:15]
国务院发布2010年放假安排 [2009-12-09 16:43:44]
色板 -- 颜色收集 [2009-12-04 13:33:03]
JavaScript性能优化--创建表格 [2009-12-03 22:40:07]
JavaScript性能优化--创建文档碎片 [2009-12-01 23:16:34]
都是转义惹的祸 [2009-12-01 16:32:57]
梦醒时分 [2009-11-30 09:03:27]
用 Jquery 模拟 select [2009-11-27 22:37:14]
JavaScript程序执行顺序问题总结 [2009-11-25 23:58:34]
frame调用另外一个frame的内容 [2009-11-18 23:40:47]
javascript 回退到前一页的写法 [2009-11-18 13:39:42]
IE 中无提示关闭窗口的方法 [2009-11-18 13:39:27]
优化次数过多的循环 [2009-11-16 23:25:03]
PHP的escape函数的实现方法 [2009-11-16 23:09:36]
jQuery性能优化指南 [2009-11-16 13:29:39]
用onpropertychange,oninput事件解决onchange事件的不足 [2009-11-15 18:27:14]
js中String的常用扩展 [2009-11-15 18:24:20]
js不同浏览器检测 [2009-11-13 18:38:20]
动态加载JavaScript的小实践 [2009-11-13 18:37:49]
在HTML中获取正确的URL属性值 [2009-11-13 18:34:05]
JavaScript获取准确的行高 [2009-11-13 18:31:08]
jquery判断是否隐藏 [2009-11-11 13:57:39]
jquery表格色彩差异显示 [2009-11-11 13:56:42]
AIR 编程的途径 [2009-11-11 13:52:33]
javascript 最简单的UI实现（学习） [2009-11-10 12:34:11]
客户端应该去计算什么？ [2009-11-09 09:29:16]
IE6支持PNG透明(alpha通道)的4种方法 [2009-11-08 23:03:01]
js制作提示公告带关闭可保存cookie [2009-11-04 14:58:14]
js添加查询删除cookie操作代码 [2009-11-04 13:34:49]
js实现预加载图片让图片快速显示 [2009-11-04 13:34:18]
全站换域名时利用nginx和javascript做简单友好的换域名跳转通知 [2009-11-04 11:31:18]
Firefox调试正常，IE下面缺少对象，IE的编码问题 [2009-11-03 09:29:16]
Javascript Widget入门解析 [2009-11-02 16:47:12]
LinkageSelect 基于jQuery的联动下拉菜单 [2009-11-02 13:34:16]
关于Javascript的俩个有趣的探讨 [2009-10-30 08:52:41]
深入理解JavaScript定时机制 [2009-10-30 08:46:44]
深入理解Javascript之this关键字 [2009-10-29 23:43:22]
正确使用JS中的正则 [2009-10-29 22:48:19]
Javascript作用域原理 [2009-10-29 15:23:47]
JS文件装载器(Eve Js Loader) [2009-10-29 14:08:23]
使用JS做文档处理 [2009-10-29 13:56:14]
浏览器的结构 [2009-10-29 13:52:37]
分享一个JQUERY颜色选择插件 [2009-10-29 08:49:14]
基于鼠标点击跟踪的用户点击行为分析 [2009-10-27 15:29:59]
IE下的优秀JavaScript调试工具Companion.JS [2009-10-25 22:28:44]
JavaScript 实现 PHP (trim) [2009-10-25 22:28:23]
为脚本语言平反-JavaScript篇（3） [2009-10-23 23:55:03]
为脚本语言平反-JavaScript篇（2） [2009-10-23 23:53:32]
为脚本语言平反-JavaScript篇（1） [2009-10-23 23:50:50]
在js中做数字字符串补0 [2009-10-23 23:48:12]
模式化窗口 [2009-10-22 09:37:49]
JavaScript函数调用规则 [2009-10-20 22:30:16]
母亲也是爱美的 [2009-10-16 12:16:11]
构造”前进”,“后退”按钮能用的Javascript应用 [2009-10-16 12:15:21]
javascript 在各个浏览器中的超时时间 [2009-10-14 13:33:51]
用Javascript获取页面元素的位置 [2009-10-13 23:07:15]
基础体验决定上层应用 [2009-10-13 23:02:29]
奇淫技巧和西天取经 [2009-10-13 22:58:04]
instanceof 内部机制探析 [2009-10-13 22:55:07]
Loop Benchmarks [2009-10-13 22:53:30]
JavaScript 快速组合算法 [2009-10-13 22:52:51]
一篇关于新媒体和新媒体营销的小结 [2009-10-10 23:56:20]
网站导航栏的过去与现在 [2009-10-10 23:43:59]
20个有趣的网站 [2009-10-10 18:14:11]
用js给fckeditor赋值的办法 [2009-10-10 14:09:00]

科技爱好者周刊（第 398 期）：Token 费用难以负担

阮一峰 — 2026-06-03 09:03:24

标签： Transformer 大语言模型机器学习自然语言处理

这里记录每周值得分享的科技内容，周五发布。

本杂志开源，欢迎投稿。另有《谁在招人》服务，发布程序员招聘信息。合作请邮件联系（yifeng.ruan@gmail.com）。

封面图

去年开放的浙江省安吉县的安吉文化艺术中心。当地盛产竹子，屋顶都采用竹叶造型。（daemin_kg@ig）

Token 费用难以负担

上周，OpenClaw（龙虾）的创始人彼得·斯坦伯格（Peter Steinberger）贴出了自己的 Token 使用量。

他不是故意炫耀，自己用了多少 Token，而是为了介绍工具软件 CodexBar。这个菜单栏小工具可以统计你的 Token 使用量，计算出对应的费用。

大家猜猜看，他用了多少 Token？

根据截图，他一个月发出了760万个请求，消耗的 Token 数量为6030亿。根据预设的费率，这些 Token 价值130万美元！

也就是说，他的 AI 编程平均每天要花费4万多美元。

当然，这个数字不是真实支出。因为他是 OpenAI 公司的员工，可以无限量免费使用公司的 Token。所以，这些钱并不是真实的支出。

但是，他的 Token 使用量是真的。绝大部分公司需要外购 Token，大家可以用他的例子计算一下，如果一个程序员每月用掉几千亿、甚至上万亿的 Token，公司要出多少钱？

他一个人一个月130万美元，相当于近900万人民币，一年下来超过1亿人民币！ 这就是放开使用顶级模型，公司要支付的费用。

如果改用便宜的模型，国内最便宜的开源模型，价格大约是国外旗舰模型的1/30到1/50，那么一年就是200万～300万人民币。

结论就是，如果放开不限量使用，一个程序员一年最少会花掉两三百万人民币的 Token 费用。要是使用美国的旗舰模型，费用会快速上涨到几千万甚至上亿人民币。

公司想要降低成本，有两个方法：一是购买包月套餐，但是大项目不够用；二是自己架设开源模型，省掉外购的费用，但是硬件费用不便宜，而且最强的模型目前是不开源的。

权衡下来，我猜想，公司几乎肯定会设置限制，不允许程序员无限量使用外部模型。那样的话，巨额的 Token 费用难以承受。程序员的工资已经不低了，再加上每人每年至少几百万人民币的 Token 费用，公司的开发成本会爆炸的。

大家可以说说，有没有公司对程序员提供外部模型无限量 API 调用？我是没有听说过。

事实上，因为 Token 费用太高，公司收紧 AI 编程的例子，我倒是知道几个。

比如，网约车巨头 Uber 今年头四个月就花完了全年34亿美元的 AI 预算，不得不限制使用 AI 了。

再比如，微软也因为费用超标，放弃了 Claude Code，改用自家托管的 OpenAI 模型。

如果 Uber 和微软这样的巨头，都承受不了巨额的 Token 费用，那大概就没有公司能够承受了。

总之，AI 编程虽然听起来很美好，但是看到账单的那一刻，公司就会清醒：AI 编程比真人程序员昂贵太多了。

所以，AI 会替代程序员吗？对于有大型软件项目的公司，我认为不会大规模替代，因为成本放在那里。至少现阶段如此，如果未来 Token 费用大幅下降，那就难说了。

漏洞赏金计划的终结

Turso 是一个开源的云数据库，代码放在 GitHub。

它有一个赏金计划，给予发现漏洞的人1000美元奖金。本来运作得挺好，自从大模型可以用来发现漏洞以后，事情就不对了。

它的仓库的 PR 页面（外部代码提交）已经变成下面这样。

提交漏洞的人泛滥成灾，都是冲着奖金而来。他们所谓的漏洞，往往是故意注入垃圾字节，或者是配置错误，自然就是无法运行。

开发团队精疲力尽，不胜其扰。有时候，关掉这些 PR，提交者还会跟你争论，用 AI 生成的长篇大论告诉开发团队"我没错，你们搞错了"，令人啼笑皆非。

最终，开发团队只能宣布，终止赏金计划，提交漏洞和 PR 都不会有奖金。

炮制垃圾内容的人可能只需要一分钟就能提交，但我们却要花费数小时来阅读、理解和回应。而且，这类内容的生成速度几乎是无限的。

虽然可以设置自动化脚本来过滤 PR，但由于涉及到奖金，提交 AI 代码的动机实在太大，总是有人无休止地争论、重新打开同一个 PR 等等。

这件事告诉我们，传统的漏洞赏金计划在 AI 时代大概率行不通。以后，发现漏洞很可能没有奖金。不知道这会不会导致线上攻击行为的增加。

科技动态

1、体重与气温

一支耶鲁大学的考察队，发现阿根廷的猫头鹰猴比25年前更重。2023年的猴子平均体重比1999年重了50克，相当于增加了4%。

科学家认为，这与气温上升有关。1999年阿根廷的日平均气温为22.2摄氏度，2023年上升到了23.8摄氏度。

气温上升使得猴子减少用于体温调节的能量消耗，从而有额外的卡路里来增重。

该理论看上去也适用于人类，也就是说，全球变暖可能让胖子变多。

2、人工蛋壳

美国生物科技公司 Colossal 制造了"人工蛋壳"，已经孵化了26只小鸡。

它的外壳是一个坚固的六边形杯状结构，起到支撑作用；内壁是一层半透膜材料，能让氧气轻松通过，又能保持水分。

科研人员将小鸡胚胎放入"人工蛋壳"，在孵化箱中成功孵化了小鸡。

上图中，蛋壳上方是透明的，可以观察内部情况。

Colossal 公司制造这个装置的目的，是为了复活已经灭绝的渡渡鸟。否则，就算做出了渡渡鸟的克隆胚胎，还是要放在其他动物（比如鸵鸟）体内进行繁殖。

3、艺术抗议

保加利亚首都索非亚，马路上有一个小坑，市政府长期不修补。

两个艺术家感到不满，就在这个小坑上涂鸦，画了一个生气的鬼脸。

鲜艳的图案让司机和行人更容易注意到，减少了事故。同时，也引起了大众的兴趣，新闻媒体纷纷报道，小坑很快就修补了。

这件事告诉我们，不满还是要表达出来，可以推动解决，并且采用艺术形式表达，效果会比较好，容易让人接受。

文章

1、内存涨价的原因（英文）

内存厂商生产三种内存：DDR（桌面电脑用的内存）、LPDDR（手机用的低功率内存）、HBM（AI 机房用的高带宽内存）。

由于 AI 公司对 HBM 的需求激增，开出高价，内存厂商的生产能力转向 HBM，减少了 DDR 和 LPDDR 的产量，导致消费电子设备的内存短缺，价格上涨。

2、我开始研究 Reticulum（英文）

Reticulum 是一个自己组网的项目，可以在各种物理网络（WiFi、有线网、无线电、LoRa 等）之上架设虚拟网络，本文是一个简介。

3、预热你的 MacBook（英文）

一篇很冷的文章，Mac 系统有一个 stress 命令，用来让 CPU 运行负载。本文提出可以用这个命令，让冬天冰冷的 MacBook 金属外壳变热。

4、为什么我反对布尔逻辑（英文）

一篇偏哲学思辨的文章。布尔逻辑只有两个值（真和伪），作者认为，这会导致非黑即白的二元思维。真实世界是非布尔逻辑，充满了不确定性和不唯一性。

5、为什么中心极限定理无处不在？（英文）

一篇科普文章，介绍中心极限定理的历史和含义。这个定理发现了样本平均值的分布规律，所以极其重要。

样本平均值满足正态分布，但有两个注意点，一是每次的样本必须相互独立，二是有时异常值比平均值更重要。

工具

1、DOCX Editor

开源的 docx 文件的网页编辑器，所见即所得。

2、DvnIP

动态 IP 服务，个人用户免费。

3、Graphite

一个矢量作图的 Web 应用，代码开源。

4、Hindsight

一个命令行工具，扫描本地的 git 仓库，生成 GitHub 风格的个人提交热力图。

5、NyaTerm

跨平台的桌面应用，将 SSH、终端会话、远程文件、认证信息、端口转发和配置备份放在同一个工作区。（@nyakang 投稿）

6、diving-rs

一个命令行工具，展示 docker 镜像内部的每一层文件列表。（@vicanso 投稿）

7、CanvasCast

白板录制的网页应用，在浏览器中直接绘制、演示、录制白板风格的内容。（@Hao4Wang 投稿）

8、Echo Loop

开源的英语听说训练 App。（@echo-loop 投稿）

9、Vue TUI

基于 Vue 的终端组件库，可以用来开发 agent。（@Simon-He95 投稿）

10、witr

命令行工具，显示当前每个进程对应什么命令，可以用命令名或端口号查询。

AI 相关

1、DeepSeek Reasonix

专为 DeepSeek 设计的终端 AI 编程 agent，充分利用了缓存机制，可以极大降低费用，只支持 DeepSeek 的付费 API。

2、FunASR

阿里通义实验室开源的工业级语音识别工具包，最近推出了桌面语音输入法工具。（@LauraGPT 投稿）

另有两个基于它的衍生工具。

FunClip：智能视频裁剪工具。输入关键词或句子，自动定位视频中对应的片段，一键裁剪导出。（@LauraGPT 投稿）
SenseVoice：语音理解工具，可以识别语音、语种、情感、声音事件。（@LauraGPT 投稿）

3、Codex Mate

一站式本地 AI 编程智能体管理面板。统一管理 Codex、Claude Code、Gemini CLI、CodeBuddy、OpenClaw、Gemini CLI。（@ymkiux 投稿）

资源

1、微积分其实很容易

著名教材《Calculus Made Easy》非官方中文版，一本易读的微积分入门小书，可以在线阅读。（@KeyAI 投稿）

2、小西天 3D 全景

山西省隰县小西天的网页 3D 全景导览。

3、C 语言小测验（英文）

一组 C 语言的语法选择题。

图片

1、袖珍计算器博物馆

德国有一个网上博物馆，专门收集各种袖珍计算器，里面有一些奇特的电子计算器。

文摘

1、行为经济学诱饵

行为经济学家丹·艾瑞里，有一天闲逛《经济学人》官网。

他在订阅页面上，看到了三个选项：

A. 电子版----59美元。 B. 纸质版----125美元。 C. 纸质版＋电子版----125美元。

他愣住了。

B 和 C，价格一模一样。一个只给纸质版，一个纸质版加电子版全送。谁会选 B？

傻子都不会啊。但艾瑞里没有笑，马上意识到这是一个绝妙的设计。

他拿着这三个选项，走进了麻省理工学院（MIT）的课堂，做了一个实验，让100个学生对这三个选项进行选择。

结果：16%的学生选了 A，0%选了B，84%选了C。订阅费总收入：11,444美元。

跟预想的一样，没有一个人选 B。

然后艾瑞里做了一件小事：他把 B 删了，只留 A 和 C。

逻辑上，一个从来没人选的东西，删掉它不应该影响任何结果，对吧？

结果出来了：68%选了 A，32%选了 C。订阅费总收入暴跌到8,012美元。

这就是选项 B 的作用。它从来没人选，自己一份都没卖出去，却在暗中帮旁边的最贵的 C 套餐，多卖了52%。

仅仅因为它的"存在"，就让杂志社多赚了3,432美元。这就是行为经济学中著名的"诱饵效应"。

原理很简单：人类不擅长判断一个东西的"绝对价值"，但极其擅长做"相对比较"。

当只有59美元和125美元两个选项时，你的大脑在比较"便宜 vs 贵"，大多数人选便宜的。

但当"125美元只买纸质版"这个诱饵一出现，你的大脑就不比较 A 和 C 了，它开始比较 B 和 C。

同样的价格，C 多了一个电子版。天哪，这不是白捡的吗！于是你心满意足地选了 C。

浑然不知自己刚刚多花了66美元----买了一本可能一辈子都不会翻开的纸质杂志。

这个套路如今无处不在。咖啡店的中杯定价，只是为了让你觉得大杯"更划算"。视频网站的月卡，贵到让你觉得年卡"不买就亏"。

手机发布会上，永远有一款"高价低配"机型，它唯一的使命，就是让旁边那款旗舰机型看起来"性价比极高"。

当你觉得自己占了便宜的时候，多半是有人精心摆放了一个诱饵，让你心甘情愿走进了更贵的那扇门。

那个没人选的选项，才是全场真正的主角。

言论

1、

很多人看不到 AI 改变世界的潜力，原因在于他们不明白一切事物都是算法。

具体来说，他们没有意识到，社会和公司只不过是一系列算法的集合。

-- 《公司不过是算法图而已》

2、

为了应对"软件包投毒"，现在的流行做法是，新发布的软件包设置一个冷却时间，普通用户需要过了"冷却期"才能安装这个包。

这种机制可以有效抵御供应链攻击，但它有一个棘手的问题：它依赖于其他人先安装这个包。到哪里去找这些人，第一时间试用每个新发布的包呢？

-- 《软件包应该分阶段推出》

3、

AI 可以一对一的定制化教育，效果更好，大学对很多人将变得没有价值。

-- 萨姆·奥特曼（Sam Altman），OpenAI 公司首席执行官

4、

那些从未编写过一行代码的非技术型中层管理人员，现在感觉通往成功的最大障碍已经消失。

他们再也不用应付那些烦人的程序员了，不需要程序员就能更改网页样式和用户体验，自己实现某些功能。而且，AI 不会抱怨，不会组织工会，也不会抗议，只会服从任何命令。

-- 《AI 将把我们引向何方》

5、

我喜欢 PHP 的一个理由是，它的变量使用美元符号（$）识别，这会提醒你，你使用它是为了什么。

-- 《PHP 的奇特之处》

往年回顾

GitHub Issues（几乎）是最好的笔记应用（#351）

OpenAI 的图书馆工位（#301）

国产单板机值得推荐（#251）

中国需要成立半导体部（#201）

（完）

文档信息

版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）
发表日期： 2026年5月29日

您可能还对下面的文章感兴趣：

The “Bug-Free” Workforce: How AI Efficiency Is Subtly Disrupting The Interactions That Build Strong Teams [2026-06-03 09:03:24]
Notex：一个开源 NotebookLM 替代方案的实现 [2026-06-03 09:03:24]
美好世界，源自不开心。 [2020-02-01 15:14:13]
百夫长：互联网时代公司的关键员工 [2015-11-02 22:30:08]
朋友，不要再打听彼此薪水 [2014-04-29 22:35:15]
微博的核心用户群：中V和小V [2013-10-08 12:34:49]
关键词推荐技术介绍 [2013-08-21 13:13:54]
如何有效的进行道歉 [2013-08-08 23:43:47]
失败的人生 [2013-07-26 13:32:27]
与Google拼音的工程师聊聊中文滑行输入 [2013-07-07 17:56:41]
浅谈翻译的两个基本问题 [2013-06-18 13:48:13]
一条微博被恶搞所引起的思考 [2012-08-27 13:51:33]
若无云，岂有风——词语语义相似度计算简介 [2012-07-09 23:09:38]
检索结果聚类展望 [2012-07-09 23:08:56]
我们其实在关心什么 [2012-01-02 20:46:24]
闲谈翻译 [2011-10-04 18:09:02]
WEB数据挖掘相关术语整理 [2011-07-30 21:54:23]
一种生成事件脉络的方法 [2011-06-21 13:36:39]
尽量提高网络流言分辨力 [2011-05-17 08:59:28]
如何训练你的大脑去适应一种新语言 [2011-03-03 22:43:53]
如何预测用户query意图 [2011-01-10 23:19:10]
从狄仁杰的测字占卜到一淘网的Query分析之大结局 [2011-01-05 22:26:37]
百度这个公司 [2010-11-22 21:17:57]
读书笔记-壹百度:百度十年千倍的29条法则 [2010-10-31 23:22:30]
论互联网的中国管理模式 [2010-10-30 08:02:52]
存在就是真理-从一个关键字看百度和Google的产品体验 [2010-10-25 09:03:19]
从细节看知识搜索 [2010-07-21 23:38:41]
怎样翻译更地道：It is…that…句型谚语的翻译 [2010-06-01 00:00:04]
怎样翻译更地道：译者一定要多走一步 [2010-05-19 13:49:57]
怎样翻译更地道：and不是“和” [2010-05-09 22:59:26]
怎样翻译更地道：无生物主语的处理 [2010-04-15 09:53:29]
三十分之一的梦想 [2010-03-29 08:49:59]
怎样翻译更地道：“as somebody said…”的翻译 [2010-03-11 23:38:29]
怎样翻译更地道：so…that…的翻译 [2009-11-24 22:45:42]
自己做了个简繁转换的东西 [2009-11-02 12:27:54]
小心被互联网脑残定律降低了你的IQ/EQ [2009-10-12 09:06:53]

Algorithmic Theming Engines: Building Self-Correcting Color Systems With `contrast-color()`

Articles on Smashing Magazine — For Web Designers And Developers — 2026-06-03 09:03:24

标签： contrast-color WCAG 主题引擎

The HTTP Archive Web Almanac has been tracking color contrast failures for years. The numbers have barely moved. After half a decade of design system tooling, accessibility linters, and entire JavaScript libraries dedicated to computing readable text colors, 70% of websites still fail basic WCAG contrast checks in 2025. The WebAIM Million paints an even grimmer picture — 83.9% of homepages flagged for low contrast text in 2026, up from 79.1% in 2025. The rate improves by maybe a few percentage points per year on one benchmark and actually gets worse on another. That’s not progress — that’s proof that relying on runtime JavaScript for something this fundamental doesn’t scale across the open web. We didn’t need better libraries. We’ve needed better CSS.

The contrast-color() function is that better CSS. One declaration. The browser runs the contrast math during style computation, before the page paints, and hands you the right text color. No library, no build step, no hydration flash.

Note: If you’ve seen it called color-contrast() in older articles and spec drafts — that name was changed, and the old syntax no longer works in any browser.

What It Does (And What It Doesn’t)

The Level 5 version is simple. You give it a color. It gives you back black or white, whichever has more contrast against your input.

.button {
  background-color: var(--brand-color);
  color: contrast-color(var(--brand-color));
}

Change --brand-color to neon green, text goes black. Change it to midnight navy, text goes white. Swap themes at runtime via JavaScript and the text adapts instantly — no event listeners, no recalculation.

A few things to know about the current version:

It returns a , not a number. You get an actual color value (black or white), you can use anywhere CSS accepts a color.
Black or white only, for now. Candidate color lists and target ratios are planned for Level 6.
No keywords. If you’ve seen max in older blog posts, that was stripped from the spec. Using it will silently break your declaration.
As mentioned above, this function used to be called color-contrast() in early drafts. That name is dead — the CSSWG renamed it to follow the convention that CSS functions are named for what they return. color-mix() returns a color. contrast-color() returns a color. The old color-contrast() name sounded like it returned a contrast ratio (a number like 4.5), which was misleading. Any tutorial from 2021–2023 showing color-contrast() syntax won’t work in current browsers.

The Spec Split: Level 5 Versus Level 6

This function lives across two specifications. That’s unusual and worth understanding.

CSS Color Level 5 defines what browsers ship today. One color in, black or white out. The algorithm is deliberately marked “UA-defined”, meaning the browser decides what math to use internally. Right now, every engine uses WCAG 2.x relative luminance. But that “UA-defined” label isn’t accidental — it’s a planned escape hatch.

You’ll see APCA (Accessible Perceptual Contrast Algorithm) mentioned a lot in this context. APCA models how human eyes actually perceive contrast, factoring in font weight, spatial frequency, and ambient light — a genuine improvement over the WCAG 2.x formula. By not locking “use WCAG 2.x” into the Level 5 spec, browser vendors could swap to APCA later without breaking any existing code. If the spec had shipped with a wcag2() keyword as the default, every site using it would’ve been stuck on the old math permanently.

But APCA’s future is far less certain than the hype suggests. Adrian Roselli’s “WCAG3 Contrast as of April 2026” lays out the current situation clearly: APCA was pulled from the WCAG 3 working draft in mid-2023 after failing to gain enough Working Group support. The WCAG 3 spec currently says the contrast algorithm is “yet to be determined,” and the standard itself may not be finalized until 2030 or later. Roselli also filed a Chromium issue in May 2024 asking for the “Advanced Perceptual Contrast Algorithm” experiment flag to be removed from DevTools entirely, arguing that the implementation is outdated and risks misleading developers into thinking APCA is further along — or more official — than it actually is. That issue is still open.

None of this means APCA is dead. The research behind it is peer-reviewed and substantive, and its creator has noted that colors passing APCA guidelines greatly exceed WCAG 2 minimums in the vast majority of cases. But right now, there is no guarantee APCA will be the algorithm that replaces WCAG 2.x — and that uncertainty matters for contrast-color(). If a different algorithm wins out, or if WCAG 3 adopts something entirely new, the “UA-defined” label means browsers can adapt without breaking your code. It also means the Level 6 features — candidate color lists, target ratios, the tbd-fg/tbd-bg keywords — are all designed around an algorithm that may or may not materialize in its current form.

CSS Color Level 6 adds the extended syntax — candidate color lists and target contrast ratios:

/* Level 6 future syntax — not shipping yet */
color: contrast-color(var(--bg) tbd-bg wcag2(aa), #1a1a2e, #e2e8f0, #fbbf24);

The browser would evaluate each candidate left to right and pick the first that meets the 4.5:1 AA threshold. The tbd-fg and tbd-bg keywords indicate whether the base color is foreground or background, which matters for directional contrast models like APCA. This is all Working Draft territory — doubly so given APCA’s uncertain status. Use the Level 5 version for now.

Browser Support

This one’s in better shape than most new CSS features. All three major engines have shipped it in stable releases: Chrome 147 (April 2026), Firefox 146, and Safari 26.0. It reached Baseline Newly Available status in April 2026. Check caniuse for the full version matrix. All three engines pass the Web Platform Tests for contrast-color(), which means the edge cases (e.g., tie-breaking logic, color space conversion, syntax parsing) behave the same across browsers.

The raw global support percentage on caniuse looks low, but that mostly reflects enterprise browsers and people who never update. If you’re reading this, your browser almost certainly supports it already.

Progressive enhancement is straightforward using @supports:

.card {
  background: var(--bg);
  color: #fff;
  text-shadow: 0 0 4px rgb(0 0 0 / 0.8);
}

@supports (color: contrast-color(red)) {
  .card {
    color: contrast-color(var(--bg));
    text-shadow: none;
  }
}

Older browsers get white text with a dark shadow for legibility. Supporting browsers get the native calculation. Nobody sees broken text.

One thing to watch for: automated accessibility scanners (Lighthouse, Axe, etc.) can’t evaluate text-shadow. They only look at the computed color against background-color. So the fallback will still get flagged as a contrast failure in CI/CD pipelines, even if the shadow makes the text perfectly legible to human eyes. If your team runs automated a11y checks, you may need to allowlist that specific rule or add a comment explaining why the flag is a false positive.

A note on PostCSS:

There’s a plugin (@csstools/postcss-contrast-color-function) that evaluates contrast-color() at build time. It works for static colors like contrast-color(#ff0000). But the moment you use a custom property — contrast-color(var(--bg)) — the plugin can’t help because it has no access to runtime values. If your theming is dynamic (which is the whole point of doing this), skip the polyfill and rely on @supports.

The Gotchas

It Doesn’t Guarantee Perceptual or AAA Compliance

This can trip people up: “I used the contrast function, so my site passes accessibility checks now, right?”

Mathematically? Usually yes. There is a persistent myth that for certain “mid-tone” backgrounds, both black and white fail the standard WCAG 4.5:1 AA ratio. That’s mathematically false. Under the WCAG 2.x relative luminance formula, there is absolutely no background color where both pure black and pure white fail AA. One (or both) will always pass.

Take #2277d3 (a medium blue). It sits right on a mathematical knife-edge where both black and white actually pass AA (both hit roughly 4.58:1). contrast-color() will hand you whichever has the slight mathematical edge.

But here is the actual gotcha: the WCAG 2.x math has known perceptual blind spots. That same #2277d3 with black text mathematically passes AA, but to human eyes, it can be incredibly difficult to read. contrast-color() gives you mathematical compliance, which is great for automated audits, but that doesn’t always equal perceptual accessibility. (This is exactly why APCA exists and why the spec was designed to let browsers swap algorithms later.)

Furthermore, if you’re aiming for the stricter WCAG AAA standard (7.0:1), a true dead zone does exist. For backgrounds with a luminance between roughly 10% and 30%, neither black nor white will hit 7:1. In those cases, contrast-color() can’t save you — it just hands you the “least bad” failing option.

Transitions Snap, Not Fade

If you’re animating a background from white to black on hover:

.btn {
  background-color: #fff;
  color: contrast-color(#fff); /* black */
  transition: background-color 1s, color 1s;
}
.btn:hover {
  background-color: #000;
  color: contrast-color(#000); /* white */
}

The background fades smoothly over one second. But because the Level 5 output is a discrete value (black or white), the text color can’t be interpolated. It snaps.

And here is the visual gotcha: the snap doesn’t happen halfway through. If you’ve been building themes for a while, you probably have muscle memory from the old Sass days, where we checked if lightness($bg) > 50%. That relied on HSL lightness, where 50% is the geometric midpoint.

But WCAG 2.x relative luminance is a non-linear scale. Under the WCAG formula, the mathematical tipping point — where black and white have identical contrast against the background — actually occurs at approximately 18% relative luminance (specifically ~17.9%).

Because of that, the visual behavior during a white-to-black fade is heavily skewed. The text doesn’t snap in the middle. It stays black for the vast majority of the animation, only snapping to white at the very tail-end of the transition when the background gets extremely dark. It’s a jarring, late hard cut.

You might assume transition-behavior: allow-discrete fixes this. It doesn’t. allow-discrete does not fix the jarring visual experience because it cannot interpolate a binary output; it only shifts the timing of the hard snap to the 50% mark of the animation duration. If you need smooth text color transitions, you’ll have to layer color-mix() or manage the crossfade yourself.

Tie Goes To White

If the background is a perfect middle gray where both black and white produce identical contrast ratios, the spec has a hardcoded tiebreaker: white wins. Not a big deal in practice, but worth knowing if you’re debugging gray palettes and the text isn’t doing what you expect.

Gradients And Images Are Out

The function takes a flat value. You can’t pass it a gradient or a url(). contrast-color(linear-gradient(...)) is a parse error. If your background is a photo or a complex gradient, you still need JavaScript or manually color-pick for overlay text.

Transparent Colors Are Composited First

Pass a semi-transparent color, and the browser blends it against an assumed opaque canvas (usually white) before running the contrast math. It’s not ignoring your alpha channel — it’s compositing it. But the result might surprise you if you expected the function to “see through” to whatever’s actually behind the element.

Windows High Contrast Mode

If a user enables Windows High Contrast, the forced-colors: active media query kicks in and the browser aggressively overwrites author-defined colors. contrast-color() bows out — forced system colors like CanvasText take over completely. You don’t need to write manual media queries to undo your contrast logic; the browser handles the hierarchy.

Combining It With Other Color Functions

Black or white sounds limiting, but once you feed that output into other CSS color functions, you can build an entire component palette off a single custom property.

Brand-Tinted Contrast With Relative Color Syntax

Pure black text on a vibrant card looks fine. Pure white on a coral card can feel flat. What if the contrast text was a very dark or very light tint of the background color instead?

Kevin Hamer explored related territory in his CSS-Tricks piece “Approximating contrast-color() With Other CSS Features”, where he used OKLCH lightness and round() to approximate the black/white switch without contrast-color() — essentially oklch(from round(1.21 - l) 0 0). That’s a polyfill strategy: get the binary light/dark decision working in browsers that don’t support the native function yet. What we’re doing here is different — we start with contrast-color()’s native output and then enrich it by injecting the background’s own hue:

.card {
  --bg-hue: 260; /* Indigo */
  --bg: oklch(0.6 0.1 var(--bg-hue));
  background: var(--bg);

  /* Pull L from the black/white contrast color,
     but inject subtle chroma and the background's hue */
  color: oklch(from contrast-color(var(--bg)) l 0.05 var(--bg-hue));
}

When contrast-color() returns white, l is 1 (full lightness). When it returns black, l is 0. By pulling the background’s hue back in and adding a touch of chroma, you get text that reads as a deep dark indigo or a pale icy indigo instead of generic black/white. Hamer’s approach gives you the black/white decision without browser support; this one takes the decision the browser already made and gives it personality.

Fair warning: By tweaking the lightness and chroma of the black/white output, you can push a borderline contrast ratio into failing territory. Always run your tinted output through an accessibility linter before shipping.

Also worth noting: This example chains two very modern features — contrast-color() and oklch(from ...). If either one isn’t supported, the entire declaration fails silently. Your @supports block needs to test for both:

@supports (color: contrast-color(red)) and (color: oklch(from red l c h)) {
  /* Safe to use both */
}

Softened Contrast With `color-mix()`

Similar idea, simpler API. Mix the sharp black/white output back into the background to soften it:

.alert {
  --bg: var(--alert-color);
  background: var(--bg);

  /* 80% contrast, 20% background = softer but readable */
  color: color-mix(in oklch, contrast-color(var(--bg)) 80%, var(--bg));

  /* 40% contrast for a subtle border */
  border: 1px solid
    color-mix(in oklch, contrast-color(var(--bg)) 40%, var(--bg));
}

One custom property driving text, border, and potentially box-shadow or outline. Change --alert-color and the entire component recalculates.

This pattern also works well for ::placeholder text, which is a common pain point in dynamic theming. Placeholder text should be readable but visually softer than the input’s main text — color-mix() with contrast-color() gets you there:

input {
  --bg: var(--input-bg);
  background: var(--bg);
  color: contrast-color(var(--bg));
}

input::placeholder {
  color: color-mix(in oklch, contrast-color(var(--bg)) 50%, var(--bg));
}

50% mix gives you a muted but legible placeholder that adapts automatically to whatever background the input sits on.

Theme-Aware Contrast With `light-dark()`

For apps that support system light/dark mode:

:root {
  color-scheme: light dark;
  --surface: light-dark(#fff, #121212);
}

.component {
  background: var(--surface);
  color: contrast-color(var(--surface));
}

When the operating system switches to dark mode, --surface resolves to #121212, and contrast-color() returns white. No media queries, no JavaScript theme detection. The whole chain resolves natively.

What You Can Remove From Your Bundle

The practical payoff: every one of these libraries existed because CSS couldn’t do contrast math. If you’re only using them for readable-text-color selection, you can pull them out of your runtime entirely:

Library	Size	What it did
chroma-js	~14 kB	Color parsing, luminance calc, readable color selection
polished	~11 kB	`readableColor()` for styled-components
tinycolor2	~5 kB	Hex parsing, WCAG contrast ratio math

You might still need these for generating complex color scales, but the contrast-for-readability use case is now covered natively.

Beyond bundle size, there’s a performance angle that’s easy to overlook. Those JavaScript libraries don’t just cost you network bytes — they run on the main thread. Every time a theme changes or a component mounts with a dynamic background, your JS has to parse the color, compute luminance, decide black or white, and write the result back to the DOM. That’s main-thread work competing with layout, event handlers, and everything else your app is doing. contrast-color() moves all of that into the browser’s native style computation phase — heavily optimized C++ that runs before paint. For apps with lots of themed components, that’s a real difference in responsiveness.

There’s also a subtle bug that goes away: hydration flash. In React or Vue SSR apps, the server renders HTML without JavaScript. The client then hydrates, running JS to calculate contrast and inject the correct text color. For a brief window between initial paint and hydration, the text is either invisible or the wrong color. Moving contrast into CSS eliminates that entirely — the browser resolves the correct color during the initial paint, before JavaScript loads.

What We Used To Do

For context on what this replaces:

Sass era. You’d write a function that checked lightness($bg) > 50% and returned black or white at compile time. Worked for static themes. Completely useless for user-picked colors, CMS palettes, or dark mode, because the output was baked into the CSS file and could never change at runtime.

The variable toggle hack. When CSS custom properties shipped, people got creative. GitHub used a version of this for their issue label picker — splitting colors into --r, --g, --b channels, calculating Rec.709 luminance inside calc(), multiplying by negative infinity, and clamping to 0 or 1. It worked. It was also unreadable, unmaintainable, and would break silently if you got one parenthesis wrong. (Kevin Hamer’s OKLCH-based approximation is the most elegant version of this lineage — cleaner math, better perceptual alignment — but it’s still a workaround for a function that now ships natively.)

contrast-color() replaces all of these approaches with a single function call. And because the spec lets browsers upgrade the underlying algorithm, your code won’t need to change if and when a successor to WCAG 2.x contrast math lands — whether that’s APCA or something else entirely.

That 70% failure rate was never about developers refusing to care about contrast. It was about the distance between caring and shipping — the library, the build step, the runtime calculation, the hydration flash, the one component someone forgot to wire up. Every gap in that chain was a spot where accessibility quietly dropped out.

contrast-color() doesn’t make developers care more. It makes caring cost nothing.

您可能还对下面的文章感兴趣：

Session Timeouts: The Overlooked Accessibility Barrier In Authentication Design [2026-06-03 09:03:24]
关于可访问性的 7 个地方（For 每个人） [2015-04-26 22:25:13]
朋友网无障碍优化实践 [2011-10-18 23:33:14]

Revealing Text With CSS letter-spacing

Preethi — 2026-06-03 09:03:24

标签： CSS letter-spacing pseudo-elements typography

Some text effects are relatively hard to pull in CSS, the main reason being we are unable to target individual characters (something many of us want in the form of ::nth-letter(), although we have basis for it with ::first-letter that gives us access to a box element’s first glyph.

But maybe there are a few things we can use today with what we already have.

For example, the CSS letter-spacing property adjusts the space between all characters in a block of text. Positive values add space to the right side of each glyph (in a left-to-right writing mode), and negative values shrink the width of the glyph box, causing letters to overlap and even move the other way.

CodePen Embed Fallback

The letter-spacing accepts length units, and percentage (relative to font size). It is animateable, and as we saw before, the negative values can shrink it down or reverse it. Which is something we can make use of.

Overlapping and separating letters

It’s quite easy to completely overlap the characters as a starting point and setting it’s color to transparent to visually hide it.

label {
  letter-spacing: -1ch;
  color: transparent;
  /* etc. */
}

From there, we can reveal the text by animating that letter-spacing value to a positive value and updating the color to a visible value, like when a checkbox is :checked:

li:nth-of-type(2) label {
  text-align: center;
}
li:nth-of-type(3) label {
  text-align: right;
}
input:checked + label {
  letter-spacing: 0ch;
  color: black;
  transition: letter-spacing 0.6s, color 0.4s;
}

CodePen Embed Fallback

Note: The CSS ch unit is a relative length representing the width of the zero (0) glyph.

The labels go from negative letter-spacing to normal spacing and the color updates to black. Both these changes happen over a transition.

The second and third labels are given center and right text alignments and thus when negative letter spacing is applied they bundle up at the given alignment position, center and right, respectively. When letter``-``spacing goes from negative to zero (or any positive value) the letters separate from that same alignment position.

Thus, we get a text reveal effect! Let’s look at some more.

Showing and hiding text

Check this out. We can toggle a checkbox label as a fun interactive UI touch:

CodePen Embed Fallback




  Join the global club
  You've begun your journey!

label {
  overflow: clip;
  /* etc. */
}

span {
  /* The first label */
  &:nth-of-type(1) {
    /* Default spacing: letters are fully visible */
    letter-spacing: 0ch;
    /* When the checkbox is checked, target this text */
    :checked + * & {
      /* collapse letters on top of each other, hiding them */
      letter-spacing: -2ch;
      text-indent: -1.5ch;
      /* Use a "bouncy" cubic-bezier for spacing */
      transition: 0.4s letter-spacing cubic-bezier(.8, -.5, .2, 1.4), 
                  0.1s text-indent;
    }
  }
  
  /* The second label */
  &:nth-of-type(2) { 
    /* Initially collapsed (letters overlap) */
    letter-spacing: -1ch;
    color: transparent;
    /* When the checkbox is checked, target this text */
    :checked + * & {
      /* Returns to normal spacing */
      letter-spacing: 0ch;
      color: black;
      /* Slightly delay the appearance so it starts after the first text begins to hide */
      transition:
        0.4s letter-spacing cubic-bezier(.8, -.5, .2, 1.4) 0.3s, 
        0.8s color 0.4s;
    }
  }
}

When the box is checked, a negative letter-spacing value (-2ch) and text-indent value (-1.5ch) is used on the first to slide it out of the container box. We use overflow: clip to completely hide the text.

Concurrently, the text in the second text goes from a letter-spacing value of -1ch to 0ch, which reveals it. To hide this overlapped text at -1ch, a transparent color was given that’s turned to black when the checkbox is checked.

Using with other glyph box styling

Here’s another fun one. We can start with an acronym that reveal the full text on hover. Again, we have existing features to help us pull this off, including ::first-letter and ::first-line.

We’ll start with this markup:



  United
  Nations
  International
  Children's
  Emergency
  Fund

.words {
  letter-spacing: -1ch;
  color: transparent;
  /* etc. */

  &::first-letter {
    color: black;
  }

  figure:hover + #acronym & {
    letter-spacing: 0ch;
    color: black;
    transition: letter-spacing 0.4s cubic-bezier(.8, -.5, .2, 1.4) /* etc. */;
  }
}

Each word in the UNICEF acronym initially has letter-spacing: -1ch to shrink the text, and color: transparent to keep the shrunk text hidden, except the ::first-letter that has color: black so it remains visible even though the rest of the text is stacked beneath it.

Now, we can target the image on :hover and select the entire text so that the letter-spacing value for each word decreases to 0ch and color: black is applied, showing what’s remaining of the words:

CodePen Embed Fallback

What else can we do?

I don’t know! But that’s where you come in. Obviously, a hypothetical ::nth-letter selector would be amazing for all kinds of text effects. But it’s neat that we can create some semblance of it today with existing features, like letter-spacing, ::first-letter, and ::first-line.

What can you cook up knowing we have these constraints?

Revealing Text With CSS letter-spacing originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

您可能还对下面的文章感兴趣：

CSS 中的标点悬挂及其现状 [2026-05-17 14:50:00]
简历的重点是抓人 [2016-02-06 23:44:07]
给自己的字体课（一）——英文字体基础 [2015-07-21 23:30:56]
文字编排的易读性 [2015-01-19 23:48:22]
字体的性格 [2013-10-15 13:39:00]
万般设计为阅读【译文】 [2013-07-30 13:46:42]
浅析中英文基本字形的演变和发展 [2012-10-22 23:36:15]
为什么要段首空两格 [2012-08-02 12:25:25]
电影海报中的字体设计赏析 [2012-05-28 12:32:36]
字体图形化设计小谈 [2011-08-22 12:20:03]
执行力强心剂之一：字体特效篇 [2011-06-30 13:53:51]
CSS排版: 基础 [2011-06-23 13:33:44]
CSS排版：例子和工具 [2011-06-23 00:10:40]
移动终端中的视觉引导 [2011-04-29 13:39:33]
字体图形化设计 [2010-10-07 22:19:58]
Banner中的字体结构分析 [2010-07-25 22:26:12]
Google font api、web font与中文 [2010-07-19 22:47:35]
汉字的几何中心 [2010-06-22 13:19:03]
中文段首不需要空两格 [2010-04-28 15:36:05]
为什么要段首空两格 [2010-03-09 13:15:16]

AI Agent Orchestrator Landscape Report

kamus — 2026-06-03 09:03:24

标签： Agent AI Orchestrator

调研日期: 2026-05-23
调研范围: 9 个项目
调研工具: GitHub API + Brave Search + Exa Web Fetch

1. 赛道概述

AI Agent Orchestrator 是一类新兴基础设施，核心使命是：把多个 AI coding agent（Claude Code、Codex、Gemini CLI 等）编排成一支”虚拟团队”，实现任务分配、进度跟踪、成本控制、技能复用等管理能力。

为什么火：
– 2025 下半年 Claude Code / Codex CLI 爆发，开发者开始同时开 10-20 个 agent 终端
– 手动管理不可持续 → 需要”agent 项目经理”
– “Zero-human company” 叙事驱动资本和社区关注
– Stars 增速极快：头部项目 3 个月内从 0 到 50k+

赛道分层：
– L1 编排层：管理 agent 的启动、停止、工作区隔离（1code, Agent of Empires）
– L2 协作层：任务分配、进度跟踪、团队协作（Multica, MyClaude）
– L3 公司层：组织架构、预算治理、目标对齐（Paperclip, LobeHub, Ruflo）

2. 项目总览

#	项目	Stars	语言	License	创建时间	最近更新	最新版本
1	LobeHub	77,566	TS	LobeHub Community License	2023-05	2026-05-23	v2.2.1-canary.33
2	Paperclip	67,185	TS	MIT	2025-03	2026-05-22	v2026.517.0
3	Ruflo	54,246	TS	MIT	2025-06	2026-05-22	v3.7.0-alpha.76
4	Multica	31,543	TS+Go	Modified Apache 2.0	2026-01	2026-05-22	v0.3.6
5	1code	5,540	TS	Apache 2.0	2026-01	2026-02-24	v0.0.84
6	Golutra	3,549	Rust	BSL 1.1	2026-02	2026-05-12	v0.2.6
7	MyClaude	2,669	Go	AGPL v3	2025-07	2026-05-04	v6.8.2
8	Agent of Empires	2,365	Rust	MIT	2026-01	2026-05-22	v1.8.1
9	Agor	1,214	TS	BSL 1.1	2025-10	2026-05-22	v0.15.0

3. 逐项深度分析

3.1 LobeHub

一句话定位： Chief Agent Operator — 你的 AI 团队的”首席运营官”

核心功能：
– Agent Builder：自然语言描述即可创建 agent，自动配置
– Agent Groups：多 agent 并行协作，像真实团队一样工作
– 10,000+ Skills / MCP 插件生态
– Personal Memory：agent 从你的工作习惯中学习
– Schedule：定时任务，agent 自动执行
– IM Gateway：在你已有的聊天工具中使用 agent

技术架构：
– TypeScript (98.9%)，Next.js 全栈
– 部署：Vercel / Docker / 阿里云 / Zeabur / Sealos
– 生态成熟：lobe-ui, lobe-icons, lobe-tts 等配套库

License 详细分析：
– LobeHub Community License（基于 Apache 2.0）
– ✅ 可以商用（不改源码作为前端后端服务）
– ❌ 不能基于 LobeChat 开发和分发衍生作品（除非购买商业授权）
– ⚠️ 贡献者协议：贡献者同意 producer 可调整协议严格程度
– 结论：做闭源 fork 不可行，做集成/嵌入需联系 hello@lobehub.com

社区活跃度：
– 330 contributors，2740 releases，每日更新
– Discord 社区活跃，Product Hunt 上线
– 主维护者：@arvinxx, @canisminor1990

独特卖点：
– 最成熟的生态（从 2023 年就开始，不是跟风项目）
– UI/UX 最佳，产品化程度最高
– 从 ChatBot 演进到 Agent Operator，有清晰的产品路线

已知风险：
– License 不完全开源，有随时收紧的风险
– 功能膨胀（从 chatbot 到 agent platform 到协作平台），定位不够聚焦
– Canary 分支为主开发分支，稳定性存疑

3.2 Paperclip

一句话定位： “Zero-human company” 编排平台 — 如果 OpenClaw 是员工，Paperclip 就是公司

核心功能：
– Org Chart + 角色体系：CEO/CTO/工程师/设计师，agent 有汇报线
– Goal Alignment：每个任务追溯到公司使命
– Budget & Cost Control：月度预算，超支自动暂停 agent
– Heartbeat 调度：agent 定时唤醒、检查工作、自动行动
– Governance & Approvals：审批流程，config 变更可回滚
– Multi-Company：一个部署运行多个公司，数据完全隔离
– 移动端管理

技术架构：
– TypeScript (97.6%)，Node.js + React
– 嵌入式 PostgreSQL（开箱即用）
– 外部适配器：Claude Code, Codex, Cursor, Bash, HTTP/Webhook

License 详细分析：
– MIT License ✅
– 随便用、改、卖、闭源 fork，只需保留版权声明
– 做商业闭源产品的最佳选择

社区活跃度：
– 87 contributors，8 releases
– 每日更新，commit 非常活跃
– 30k stars 在 3 周内达成（增长极快）

独特卖点：
– 唯一真正做”公司治理”层的开源项目（预算、审批、审计）
– MIT 协议，商用无障碍
– “Clipmart”（即将推出）：一键下载整个公司模板

已知风险：
– 项目非常新（2025-03 创建），成熟度待验证
– 社区相对小（87 contributors vs LobeHub 的 330）
– 嵌入式 Postgres 是开发便利但生产环境需自建

3.3 Ruflo

一句话定位： Claude 优先的 Swarm 智能编排平台

核心功能：
– 多 agent swarm 协调
– MCP 工具集成（300+ 声称）
– 持久化记忆 + 向量存储
– 背景 worker + 共识模式
– 多 provider 路由（Claude, GPT, Gemini, Qwen）

技术架构：
– TypeScript
– 声称支持 WASM agent、安全层、插件市场

License 详细分析：
– MIT License ✅
– 协议本身无限制

社区活跃度：
– 54k stars，但 社区争议极大
– Reddit 多个帖子质疑代码质量：”99% Fake / 1% Real”
– GitHub Discussion #1666：”I didn’t notice any significant improvements”
– 有评论认为 agent 实现质量差、大部分功能是表面文章

独特卖点：
– Stars 数增长最快（但有刷星嫌疑）
– 概念最前沿（swarm intelligence, WASM agents）

已知风险：
– ⚠️ 社区信任度低：多人发帖质疑实际效果与宣传不符
– Alpha 版本（v3.7.0-alpha.76），稳定性未知
– 功能声称过多过杂，有”feature factory”嫌疑
– 不建议作为商业产品基础

3.4 Multica

一句话定位： 给 coding agent 做”项目管理”的开源平台

核心功能：
– Agents as Teammates：agent 有 profile，出现在看板上，发评论，报告 blocker
– Squads：agent 和人编组，leader 自动分配任务
– Reusable Skills：每次解决方案变成团队可复用技能
– Multi-Workspace：按团队隔离
– 统一 Runtime 管理（本地 + 云端）

技术架构：
– 前端 Next.js 16，后端 Go (Chi + WebSocket)
– PostgreSQL 17 + pgvector
– 本地 daemon 执行 agent CLI
– 支持 11 种 agent CLI（Claude Code, Codex, Copilot, OpenClaw, OpenCode, Hermes, Gemini, Pi, Cursor, Kimi, Kiro）

License 详细分析：
– Modified Apache 2.0
– ✅ 组织内部使用免费
– ❌ 不能拿源码提供 SaaS / 托管服务 / 嵌入商业产品（除非买商业授权）
– ❌ 不能移除前端 Logo 和版权信息
– 结论：做内部平台可行，做 SaaS 产品需商业授权

社区活跃度：
– 130 contributors，75 releases
– 10k stars 时登上 GitHub Trending #5
– v0.3.x 阶段，快速迭代

独特卖点：
– 架构最扎实（Go 后端 + WS 实时通信 + pgvector）
– “Agents as Teammates” 理念最彻底
– 支持的 agent CLI 最多（11 种）

已知风险：
– SaaS 限制意味着不能直接拿来做商业产品
– v0.3.x 早期版本，API 可能不稳定
– 需要 Docker + PostgreSQL 部署，运维成本高于纯 Node.js 方案

3.5 1code

一句话定位： 轻量级 coding agent 编排层

核心功能：
– 为 Claude Code / Codex 提供编排抽象层
– 轻量设计

技术架构：
– TypeScript

License 详细分析：
– Apache 2.0 ✅（未修改）
– 商用完全无障碍

社区活跃度：
– 5.5k stars，但 最近更新停在 2026-02-24（3 个月没更新）
– v0.0.84，非常早期

独特卖点：
– 最轻量的选择
– Apache 2.0，license 最干净

已知风险：
– ⚠️ 疑似已停更（3 个月无 commit）
– 功能最少，文档最少
– 不推荐作为长期依赖

3.6 Golutra

一句话定位： Rust 实现的多 agent 编排平台

核心功能：
– 多 agent 并行执行
– 任务编排 + 长期运行工作流
– 桌面应用

技术架构：
– Rust，性能好，二进制分发

License 详细分析：
– BSL 1.1 (Business Source License) ❌
– 非生产用途可免费使用
– Change Date: 2030-02-25（届时变为 GPL 2.0）
– Change License: GPL-2.0-or-later
– 结论：做商业产品完全不可行（2030 年前）

社区活跃度：
– 3.5k stars，51 open issues
– 2026-05-12 最近更新，仍在活跃

独特卖点：
– 唯一 Rust 实现，性能优势
– 桌面应用形态

已知风险：
– BSL 协议限制商业使用
– Rust 生态意味着社区贡献门槛高
– GPL change license 意味着 2030 年后也需要开源

3.7 MyClaude

一句话定位： Go 实现的多 agent 工作流编排

核心功能：
– 支持 Claude Code, Codex, Gemini, OpenCode
– Go 编译即用

技术架构：
– Go，单二进制分发

License 详细分析：
– AGPL v3 ❌
– 衍生作品必须开源
– 提供网络服务也必须开源
– 结论：做商业闭源产品完全不可行

社区活跃度：
– 2.7k stars，7 open issues
– 2026-05-04 最近更新

独特卖点：
– Go 实现，部署简单
– 轻量

已知风险：
– AGPL 是最严格的开源协议之一
– 社区小，bus factor 低

3.8 Agent of Empires

一句话定位： TUI + Web 双端 agent 管理器

核心功能：
– 支持 Claude Code, Codex, Gemini CLI, OpenCode, Cursor, Copilot CLI, Factory Droid
– TUI 终端界面 + Web 界面（支持手机管理）
– 使用 tmux + git worktrees 隔离

技术架构：
– Rust
– tmux session 管理
– git worktree 隔离

License 详细分析：
– MIT License ✅
– 商用无障碍

社区活跃度：
– 2.4k stars，79 open issues
– 2026-05-22 最近更新，活跃开发

独特卖点：
– 手机管理 agent（Web UI）
– 支持的 agent CLI 种类最多之一
– MIT 协议

已知风险：
– 社区较小
– 依赖 tmux，非跨平台（主要 macOS/Linux）
– Rust 代码贡献门槛

3.9 Agor

一句话定位： 多人协作画布上的 agent 编排

核心功能：
– 可视化画布管理 Claude Code, Codex, Gemini session
– Git worktree 管理
– AI 对话追踪
– 实时团队可视化

技术架构：
– TypeScript

License 详细分析：
– BSL 1.1 (Business Source License) ❌
– 非生产用途免费
– Change Date: 2029-01-15（届时变为 Apache 2.0）
– 结论：做商业产品不可行（2029 年前）

社区活跃度：
– 1.2k stars，102 open issues
– 2026-05-22 最近更新

独特卖点：
– 唯一做”可视化画布”的方案
– 由 Preset.io（Apache Superset 创始人）开发

已知风险：
– BSL 协议限制商业使用
– Stars 最少，生态最小

4. License 商用友好度排名

场景：你想 fork 一个项目，包装成自己的商业闭源产品

排名	项目	License	可否闭源商用	具体限制
1	Paperclip	MIT	✅ 完全可以	仅需保留版权声明
1	Ruflo	MIT	✅ 完全可以	仅需保留版权声明（但代码质量存疑）
1	Agent of Empires	MIT	✅ 完全可以	仅需保留版权声明
4	1code	Apache 2.0	✅ 可以	保留 NOTICE 文件（但已停更）
5	Multica	Modified Apache 2.0	⚠️ 有限制	不能做 SaaS/托管服务，需买商业授权
6	LobeHub	Community License	⚠️ 有限制	不能做衍生作品分发，需买商业授权
7	Golutra	BSL 1.1	❌ 不可以	非生产用途免费，2030 年前不可商用
8	Agor	BSL 1.1	❌ 不可以	非生产用途免费，2029 年前不可商用
9	MyClaude	AGPL v3	❌ 不可以	衍生作品必须开源

结论：做商业闭源产品，Paperclip 是唯一兼具 MIT + 高质量代码 + 活跃社区的选择。

5. 技术选型建议

场景 A：快速原型 / 个人项目

推荐：Agent of Empires 或 MyClaude
– 理由：轻量、快速上手、单二进制
– 备选：1code（如果它恢复维护）

场景 B：商业 SaaS 产品

推荐：Paperclip
– 理由：MIT 协议无障碍、功能最全面（治理/预算/审计）、增长快
– 需自行解决：生产级数据库、部署运维

场景 C：企业内部平台

推荐：Multica
– 理由：架构最扎实（Go 后端 + WS + pgvector）、支持 agent CLI 最多、内部使用不受 license 限制
– 备选：LobeHub（如果需要成熟的 UI 和插件生态）

场景 D：贡献者 / 社区参与

推荐：Paperclip 或 Multica
– 理由：活跃开发、贡献指南完善、社区友好
– 避免：Ruflo（社区信任问题）、1code（已停更）

6. 赛道趋势与风险

6.1 增长轨迹

项目	创建到 50k stars 用时	月均增长
Paperclip	~3 个月	~22k/月
Ruflo	~6 个月	~9k/月
LobeHub	~30 个月	~2.5k/月

Paperclip 和 Ruflo 的增长速度异常快，存在以下可能：
– 真实需求爆发（agent 编排确实是刚需）
– 社区营销 / HackerNews 效应
– 部分 star 可能来自 bot（Ruflo 被社区质疑）

6.2 整合风险

大厂可能吸收这个赛道：
– Anthropic 可能在 Claude Code 中内置编排功能
– OpenAI 可能在 Codex 平台中加入团队管理
– GitHub Copilot 已经在做 agent 协作（Copilot Workspace）
– 这些项目可能在 1-2 年内被平台化功能替代

但也有可能：
– 开源方案因为 vendor-neutral 而持续存在（类似 Kubernetes vs 各家容器服务）

6.3 技术债信号

Ruflo：功能声称过多，社区质疑实现质量，有 “feature factory” 风险
1code：3 个月无更新，可能已被放弃
LobeHub：从 chatbot 演进到 agent platform，代码包袱重
Golutra/Agor：BSL 协议意味着社区贡献动力不足

6.4 社区碎片化

这个赛道目前极度碎片化 — 9 个项目、5 种语言、4 种 license 类型。预计 2026 下半年会出现整合：
– 停更的项目会被淘汰（1code 等）
– 头部 2-3 个项目会形成生态壁垒
– License 友好的项目更容易获得社区贡献

7. 附录

7.1 License 全文摘要

MIT (Paperclip, Ruflo, Agent of Empires):

Permission is hereby granted, free of charge, to any person obtaining a copy of this software… to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software.

LobeHub Community License:

LobeChat may be utilized commercially, including as a frontend and backend service without modifying the source code. A commercial license must be obtained from the producer if you want to develop and distribute a derivative work based on LobeChat.

Modified Apache 2.0 (Multica):

Unless explicitly authorized by Multica in writing, you may not use the Multica source code to provide a hosted service to third parties, or embed Multica as a component of a product or service that is sold, licensed, or otherwise commercially distributed to third parties.

BSL 1.1 (Golutra, Agor):

The Licensor hereby grants you the right to copy, modify, create derivative works, redistribute, and make non-production use of the Licensed Work.

AGPL v3 (MyClaude):

You must cause any work that you distribute or publish… to be licensed as a whole at no charge to all third parties under the terms of this License.

7.2 外部讨论链接

Reddit: “Do not install Ruflo into your Claude Code workflow” — r/ClaudeAI
Reddit: “What orchestration platform to use?” — r/ClaudeCode（有人推荐 Ruflo 但也有质疑）
GitHub Discussion #1666: “Is Ruflo actually that powerful?” — 社区反馈偏负面
Augment Code: “9 Open-Source Agent Orchestrators for AI Coding (2026)”
CodePick: “2026 Agent Collaboration Platform Guide” — LobeHub 被评为最大平台
AgentConn: Multica review — “hit #5 on GitHub Trending”
Toolchew: “Running a 16-Agent Team on a €4.49/mo Server” — Multica 实测

7.3 关键数据快照

Stars 分布:  LobeHub(77k) > Paperclip(67k) > Ruflo(54k) > Multica(31k) > ... > Agor(1.2k)
License:     MIT(3) > Apache(1) > Modified(2) > BSL(2) > AGPL(1)
语言:        TypeScript(6) > Rust(2) > Go(1)
活跃度:      全部每日更新（除 1code 停更 3 个月）

报告由 Hermes Agent 自动生成。数据基于 GitHub API 实时查询 + Brave/Exa Web 搜索。

您可能还对下面的文章感兴趣：

「置顶」我做了什么 [2026-06-03 09:03:24]
SmartPerfetto 两周更新：从 Perfetto AI Assistant 到可复用的 Trace 分析平台 [2026-06-03 09:03:24]
Lyra - AI Prompt Optimization Specialist [2026-06-03 09:03:24]
BEWARE SOFTWARE BRAIN [2026-06-03 09:03:24]
Rethinking “Pixel Perfect” Web Design [2026-06-03 09:03:24]
The UX Designer’s Nightmare: When “Production-Ready” Becomes A Design Deliverable [2026-06-03 09:03:24]
写给设计师：如何设计一份 AI 友好的设计规范 [2026-06-03 09:03:24]
开启我的「人生 AI」计划 [2026-06-03 09:03:24]
十倍性能优化！一次终端语法高亮库的 AI 折腾与收获 [2026-06-03 09:03:24]
SmartPerfetto 开源：面向 Android Trace 分析的 Perfetto AI Assistant [2026-06-03 09:03:24]
全程用 Claude Code 搓了一个 macOS 原生应用：SkillDeck [2026-06-03 09:03:24]
中文 Markdown 强调标记的渲染问题 [2026-06-03 09:03:24]
AI 时代下的技术博客、文档驱动开发与头脑风暴实践 [2026-06-03 09:03:24]
Vibe Coding 的安全风险与应对策略 [2026-06-03 09:03:23]
Android Weekly 2025-15 期 [2026-06-03 09:03:23]
Android Weekly 2025-16 期 [2026-06-03 09:03:23]
浅谈 WHR 全历史排名 [2016-03-16 23:36:14]
祢衡这个人 [2012-01-08 22:14:24]
智能输入法软件的社会责任问题 [2010-01-05 13:57:29]

How to Set Up Homebrew Tap for Private CLI Tools: A Complete Guide

kamus — 2026-06-03 09:03:24

标签： CLI Homebrew Tap

如何为私有 CLI 工具提供 Homebrew 一键安装能力（完全指南）

这份指南总结了如何为内部或半公开的 CLI 工具构建稳定、全自动且支持降级的 Homebrew Tap 分发流程。主要经验基于为 mes-cli 开发 brew install 功能的实践。

1. 核心挑战与架构决策

在实现 brew install 时，由于 CLI 源码及 Releases 是私有仓库 (Private Repository)，外部用户或内部员工在使用 brew install 下载时，如果在终端没有配置强权限的 GITHUB_TOKEN，会直接报 404 错误。

我们的解决方案：脱离 GitHub Releases，使用公开的 OSS / CDN
1. 源码编译与发布：CLI 仓库依然通过 GitHub Actions 完成编译跨平台包并生成 Releases。
2. 资产分发：流水线将生成的 ZIP 压缩包和 checksums.txt 同步推送到公开的阿里云 OSS（或 CDN）上。
3. Formula 托管：建立一个公开的 homebrew-tap 仓库。流水线根据 OSS 上的资源，自动拼接出 Ruby 安装脚本（Formula），推送到该 Tap 仓库。
4. 客户端安装：用户的 brew install 会从公开的 Tap 仓库拉取脚本，并从公开的 OSS 高速下载压缩包，全程无权限阻碍。

2. 前期准备工作

建立公开的 Tap 仓库：
命名规范：在你的组织下新建一个公开仓库，通常命名为 homebrew-tap 或 homebrew-brew。
这样用户可以使用 brew tap org/tap 引入。
准备具有仓库读写权限的 Token：
在 GitHub 中创建一个具有访问目标 Tap 仓库推拉权限的 PAT (Personal Access Token)，或使用细粒度的 Token。
将该 Token 配置为 CLI 源码仓库的 Actions Secret（例如 SKILLS_REPO_TOKEN）。
规范化打包产物：
确保你的打包脚本能生成跨平台的压缩包（例如 cli-0.1.0-macOS-arm64.zip）。
必须生成带有文件 SHA256 校验值的清单文件，如 checksums.txt，供后续提取使用。

3. GitHub Actions 流水线自动化

核心的魔法在于 CLI 源码仓库中的发布流水线（如 .github/workflows/release.yml）。它在每次打标签发布后，需要执行以下脚本去自动化生成 .rb 文件并提交。

自动化脚本模板

  update-homebrew-tap:
    name: Update Homebrew Tap Formula
    runs-on: ubuntu-latest
    needs: upload-oss # 必须等你的产物上传到公共 OSS 之后执行
    steps:
      - name: Checkout tap repo
        uses: actions/checkout@v4
        with:
          repository: your-org/homebrew-tap
          token: ${{ secrets.SKILLS_REPO_TOKEN }}
          path: homebrew-tap

      - name: Generate Formula and update tap
        env:
          VERSION: ${{ github.ref_name }} # 比如 v0.4.9
          REPO: ${{ github.repository }}
        run: |
          VER_NUM=${VERSION#v}

          # 1. 直接从公共 OSS 下载 checksums.txt (避免 GitHub 私有权限问题)
          wget "https://your-public-oss.com/tools/cli/${VER_NUM}/checksums.txt" -O checksums.txt

          # 2. 从 checksums.txt 中精准提取各平台的 SHA256 
          SHA_MAC_ARM=(grep "cli-{VER_NUM}-macOS-arm64.zip" checksums.txt | awk '{print $1}')
          SHA_MAC_AMD=(grep "cli-{VER_NUM}-macOS-amd64.zip" checksums.txt | awk '{print $1}')
          SHA_LIN_ARM=(grep "cli-{VER_NUM}-linux-arm64.zip" checksums.txt | awk '{print $1}')
          SHA_LIN_AMD=(grep "cli-{VER_NUM}-linux-amd64.zip" checksums.txt | awk '{print $1}')

          OSS_URL="https://your-public-oss.com/tools/cli"

          mkdir -p homebrew-tap/Formula

          # 3. 生成无特殊字符的类名后缀 (解决 Ruby 类名规范：例如 0.4.9 变成 049)
          CLASS_SUFFIX=(echo "VER_NUM" | sed 's/[^a-zA-Z0-9]//g')

          # --------------------------------------------------------------------
          # 生成 1：永远指向最新的主 Formula (cli.rb)
          # --------------------------------------------------------------------
          cat > homebrew-tap/Formula/cli.rb <
          class Cli < Formula
            desc "Your awesome CLI tools"
            homepage "https://github.com/$REPO"
            version "${VER_NUM}"

            if OS.mac? && Hardware::CPU.arm?
              url "{OSS_URL}/{VER_NUM}/cli-${VER_NUM}-macOS-arm64.zip"
              sha256 "${SHA_MAC_ARM}"
            elsif OS.mac? && Hardware::CPU.intel?
              url "{OSS_URL}/{VER_NUM}/cli-${VER_NUM}-macOS-amd64.zip"
              sha256 "${SHA_MAC_AMD}"
            elsif OS.linux? && Hardware::CPU.arm?
              url "{OSS_URL}/{VER_NUM}/cli-${VER_NUM}-linux-arm64.zip"
              sha256 "${SHA_LIN_ARM}"
            elsif OS.linux? && Hardware::CPU.intel?
              url "{OSS_URL}/{VER_NUM}/cli-${VER_NUM}-linux-amd64.zip"
              sha256 "${SHA_LIN_AMD}"
            end

            def install
              # 将二进制安装到系统 PATH
              bin.install "bin/cli"
              # 避坑点：如果有其他额外的目录或文件（如 skills/、assets/），必须显式复制到 prefix 下！
              prefix.install "skills"
            end

            def test
              system "#{bin}/cli", "--version"
            end
          end
          EOF

          # --------------------------------------------------------------------
          # 生成 2：带有版本号的防灾降级 Formula (cli@${VER_NUM}.rb)
          # --------------------------------------------------------------------
          # 代码完全同上，唯一区别是 Ruby 的类名必须加上 AT 版本号后缀
          cat > homebrew-tap/Formula/cli@${VER_NUM}.rb <
          class CliAT${CLASS_SUFFIX} < Formula
            # 内容与上方一致...
          EOF

      - name: Commit and push formula
        run: |
          cd homebrew-tap
          git config user.name "github-actions[bot]"
          git config user.email "github-actions[bot]@users.noreply.github.com"
          git add Formula/
          if git diff --cached --quiet; then
            echo "No changes to commit."
          else
            git commit -m "chore: release formula for cli $VERSION"
            git push origin HEAD
          fi

4. 关键经验与防坑指南

4.1 额外目录被 Homebrew 丢弃的问题

现象：用户执行 brew install cli 后，发现二进制和 README.md 都有了，但压缩包里的其它自定义目录（如 skills/）不见了。
原因：Homebrew 默认只关心你在 def install 里指明的安装内容。
对策：如果 ZIP 包里附带了需要长期存储的文件夹，你必须通过 prefix.install "your-folder" 将其强行放入 Homebrew 的 Cellar 根目录。

4.2 提供“降版本”的后悔药机制

现象：如果最新发布的 CLI 携带了阻断性 Bug，CLI 自身的自动更新程序无法向下降级。而 Homebrew 原生的 brew switch 已经被官方弃用。
对策：如上述自动化脚本中的“生成 2”，除了生成固定的 cli.rb 之外，必须针对每一次发布生成带有版本号的文件，如 cli@0.4.9.rb。
Ruby 语法限制：文件名包含 @ 与 . 时，Ruby 内部的 Class 名字必须去掉标点并转化为大驼峰。例如 cli@0.4.9.rb 内部类名必须叫 CliAT049，否则脚本报错。所以我们在流水线中加入了 CLASS_SUFFIX= $(echo "$ VER_NUM" | sed 's/[^a-zA-Z0-9]//g') 进行动态替换。

5. 最终暴露给用户的完美用法

你只需要在文档中提供这段精简的指引即可：

安装与更新：

brew tap your-org/tap
brew install cli
# 未来的更新（自动更新本体、附加目录和文档）
brew upgrade cli

回退稳定旧版本：

# 假设最新版有问题，想要退回 0.4.9
brew install cli@0.4.9
brew unlink cli
brew link --overwrite cli@0.4.9

您可能还对下面的文章感兴趣：

How to Install Native Homebrew on an Apple Silicon M1 Mac [2021-06-13 22:52:09]

Your Prototype Is Not Being Honest With Your Users (And Here’s How To Fix It)

Articles on Smashing Magazine — For Web Designers And Developers — 2026-06-03 09:03:24

标签： ProtoPie 交互设计原型设计用户体验

This article is a sponsored by ProtoPie

There’s a moment in almost every usability session where a participant pauses at the login screen, types something, and glances up: checking whether they’re “doing it right.” That pause is a clear sign. They’ve already clocked that this isn’t a real app, and every data point collected after that moment is filtered through that awareness.

In financial product testing, the problem is sharper. Finance users are trained to notice when something feels off: a balance that doesn’t add up, a field that accepts anything. When a banking prototype skips real authentication, participants don’t just disengage; they stop mid-session to flag it. The team walks away with findings that reflect how users behave in a demonstration, not in a real product.

The fix is narrower than you’d think. Identify the moment where participant trust is established and make that interaction real. In a banking app, that moment is the login.

This tutorial builds it: credentials that validate, a live error state, and a biometric animation that feels native — no code required.

What We’re Building: A Login That Behaves Like A Shipped Product

The login flow, built around Pie Bank, a mobile banking prototype, includes functional text inputs, a masked password field, credential validation, a live error state, and a Face ID animation timed to feel indistinguishable from iOS.

What you’ll need:

A login UI from Figma (or any supported design tool)
ProtoPie Studio — free to start, everything in this tutorial works on the free plan
A Lottie file for the Face ID animation (this one is what we used)
The finished Pie Bank prototype file — download it to follow alongside, or use it as a reference after you build

Step 1: Import From Figma Choose Scene, Not Flattened

In Figma, open the ProtoPie plugin with your login frame selected and choose Scene when exporting. Flattened collapses everything into a single image; Scene preserves your layer hierarchy so every element arrives in ProtoPie as a separate, targetable layer.

Before moving on: rename every layer meaningfully. “Input Username” not “Rectangle 14”. You’ll reference these names in formulas: vague names compound into real time lost.

Step 2: Swap Static Fields For Inputs That Actually Accept Text

ProtoPie’s native Input layer accepts real keyboard entry: participants type actual text, not tap a placeholder. Go to Text → Input, drag an Input layer onto your canvas, and nest it inside your username field group. Match it visually: placeholder text Username, background fill and font to match your design.

Hit preview. Click the field. Type. That’s the prototype starting to behave like an app rather than depicting one.

Rename this layer Input Username, duplicate it, and nest the copy inside your password field group.

Step 3: One Property Change Masks The Password

On the duplicated layer, change placeholder text to Password and set Type to Text Password. ProtoPie handles the masking: no custom logic needed.

Preview both fields: username shows text, password shows dots. It already feels real, and you haven’t written a single condition.

Step 4: Build The Destination Scene Before Wiring Navigation

Add a new scene, even a blank one. The most common sequencing mistake in ProtoPie is trying to wire a navigation response before a destination exists. Create it first.

Step 5: Wire The Button: It Works, But It Still Lets Everyone Through

Select Log In, add a Tap trigger, set response to Jump, target your dashboard scene, transition Slide in from right to left.

Preview and tap. It navigates: but for any input, including nothing. The prototype is still lying. The next two steps are the fix.

Step 6: Add Variables So The Prototype Remembers What Was Typed

At the bottom-left of ProtoPie, add two Text type variables: username and password. Bind each to its input layer with a formula:

input("Input Username").text
input("Input Password").text

Enable the debug icons: green overlays will show live variable values as you type. When you see your keystrokes appear in real time, the binding is confirmed.

Step 7: Add A Condition So Only Valid Credentials Get Through

Go back to the Tap trigger on the login button. Add a Condition with two rules, both must be true:

username equals `alex.c@gmail.com`
password equals ABC123

Move the Jump response inside this condition. Wrong credentials, empty fields, wrong format: none get through. Participants now have to actually log in. That single constraint changes the texture of every test session that follows.

Step 8: Build The Error State, The Interaction Most Prototypes Skip

Find your error message layer, rename it Error Text, set initial opacity to 0. Add a second condition (the inverse of the first), and inside it, a Change Property response setting Error Text opacity to 100.

Wrong credentials: error appears. Correct credentials: dashboard. Two outcomes: which is what makes this testable, not just demonstrable.

Step 9: Add the Face ID Animation, The Detail That Makes Testers Ask “Is This Real”

Go to Media, drag a Lottie layer onto canvas, load your Face ID file, and position it off-screen above the iPhone frame. On your Login with Face ID button, add a Tap trigger (rename it Tap Face ID) with four responses in sequence:

Move: Lottie container to Y: 60
Playback: Seek: time 0s (resets so it always plays from the start)
Playback: Play: Lottie file
Jump: to dashboard

Step 10: Stagger The Timing, This Is What Makes It Feel Native

Without delays, all four responses fire at once and the scene jumps before the animation plays. Add offsets:

Response	Delay
Move	0s
Seek	0s
Play	0.5s
Jump	1s

Enable Reset selected scenes on Jump: without it, navigating back leaves the animation stuck at Y: 60.

Preview: tap Face ID, animation drops in, plays, screen transitions. A biometric login indistinguishable from the real thing.

You can download Pie Bank, Chapter 1: Login Flow and explore it freely. A Login This Real Changes What You Can Learn From Your Prototype

When authentication actually works, the error state becomes a genuine research touchpoint: do users understand the message, do they retry, do they reach for Face ID instead? These are questions a faked login can’t answer.

In stakeholder reviews, the flow speaks for itself. In engineering handoff, the interaction panel documents the behavior (conditional logic, variable bindings, timing) so engineers see intent, not interpretation.

This is why FinTech teams invest in login fidelity even when the login isn’t the feature being tested. It’s where participant trust is established. Get it right, and everything downstream produces better signal.

This tutorial is part of the FinTech Prototyping with ProtoPie series on the ProtoPie blog. The series builds Pie Bank from the ground up across four chapters, covering the dashboard, money transfer logic, and camera integration. If this tutorial was useful, the rest of the series goes further.

您可能还对下面的文章感兴趣：

Building Digital Trust: An Empathy-Centred UX Framework For Mental Health Apps [2026-06-03 09:03:24]
智能手机让人类专注力下降为8秒比金鱼少1秒 [2017-09-21 17:40:51]
为什么要段首空两格 [2016-02-16 20:55:30]
产品设计之尊重常识 [2015-09-04 21:42:55]
产品经理都是潜伏在公司里的创业者 [2015-02-03 21:56:55]
在大公司和小公司做产品的区别 [2015-01-22 23:27:38]
我的 Sublime Text 2 笔记 [2015-01-21 23:44:49]
用吐槽的方式生产内容 [2014-12-06 20:05:35]
打造舒适的阅读空间—云阅读iPad3.0设计总结交互篇 [2014-11-23 21:07:41]
侧边栏交互的利弊 [2014-11-20 23:47:26]
高效输出移动app产品原型 [2014-07-15 23:02:58]
心智模型学习：如何探究Y里的why [2014-04-07 22:41:48]
进行用户研究的五步法【译】 [2013-10-17 12:29:30]
移动用户体验设计新要素 [2013-08-28 22:19:28]
普通设计师与顶级设计师的区别是什么？ [2013-08-21 13:19:21]
谈谈“需求场景”的重要性 [2013-08-15 12:58:06]
如何跨岗位盯人 [2013-08-12 13:38:52]
APP「返回键」的进化 [2013-08-08 23:42:42]
关于交互Demo设计的一些建议 [2013-07-26 13:29:32]
有趣的下拉刷新 [2013-06-09 13:18:17]
给产品提意见 [2013-05-13 14:00:28]
iOS设备上高效演示APP原型的方法总结 [2013-05-01 18:30:54]
设计产品的两种思路 [2013-03-10 23:50:08]
选3本书推荐给新入行的PM [2013-03-05 13:22:27]
随侃设计师的个人素养 [2013-01-08 13:11:06]
界面设计速成 [2012-12-19 13:33:52]
可用性测试好助手——Morae软件的应用 [2012-12-07 23:51:46]
深度解读网站用户体验三要素（1）：别让我等 [2012-09-12 23:07:58]
好朋友【阿木】谈极简风格在设计中的运用 [2012-08-10 00:02:23]
随记：关于职业规划，交互设计及写博客 [2012-08-05 22:42:56]
Web导航设计二三事 [2012-07-12 23:24:30]
产品经理的杂念 [2012-06-17 17:53:16]
编程珠玑番外篇 -M. 软件工具的设计哲学1 [2012-06-10 22:12:23]
浅谈Mobile Site优化 [2012-06-07 00:20:47]
儿童移动应用的界面设计基础知识 [2012-06-03 14:06:30]
豆瓣东西上线,及谈谈签到、评论等产品的设计 [2012-05-28 13:25:50]
走进工具型网站——释义及典型案例 [2012-05-28 13:19:34]
无逻辑，不产品。 [2012-05-12 22:18:32]
忘记技术原理，关注用户心智 [2012-05-02 23:49:42]
信息架构的模式 [2012-04-07 21:45:42]
何为产品的“喂养野兽”模式 [2012-04-07 15:02:38]
产品原则，还是用户习惯？ [2012-04-07 14:32:59]
怎样做符合用户预期的设计 [2012-03-31 23:38:02]
读者来信回复模版 [2012-03-31 22:42:33]
可读性:优化文本长度 [2012-03-25 21:00:16]
从滚动条消失看细节设计 [2012-03-25 20:59:22]
如何写一份交互说明文档 [2012-03-11 22:10:29]
什么是互联网产品经理 [2012-03-04 20:39:48]
为触屏手机而设计系列1——拇指操作的“热区/死角”与“控件尺寸” [2012-03-04 17:46:58]
浅析产品新手引导设计 [2012-03-04 17:38:15]
注意力与交互设计 [2012-02-01 18:00:19]
iPad游戏体验之差异化设计 [2012-01-29 20:34:57]
知心怪蜀黍NO.6 设计与运营的思维差异，兼谈知乎 [2012-01-29 20:23:02]
过度设计的判定 [2012-01-27 18:16:21]
产品的气质和设计的沉淀 [2012-01-03 23:47:45]
创造优雅的交互设计 [2012-01-03 23:46:22]
为信息设计 [2012-01-03 23:22:26]
知心怪蜀黍NO.4 交互设计师的吐槽 [2012-01-03 23:18:08]
谈交互设计的经验积累 [2011-12-22 22:26:00]
知心怪蜀黍NO.2 产品经理如何修炼内功 [2011-12-22 22:01:26]
互联网用户常见心理特征 [2011-12-21 00:03:32]
如何设计新手用户引导 [2011-11-21 00:18:58]
取代点击操作 [2011-10-17 22:17:15]
交互设计那些事儿 [2011-10-12 00:18:35]
交互设计如何提高专业能力 [2011-10-11 23:49:32]
产品感悟 [2011-10-04 18:07:40]
从IE 9的广告说起 [2011-09-25 13:41:28]
从社区常识说起 [2011-09-07 23:08:18]
由产品经理招人难想到的 [2011-09-04 22:29:25]
90%的人不知道使用 CTRL + F [2011-09-04 14:22:58]
绘制交互流程图 [2011-08-30 23:57:01]
桌面管理软件那点事 [2011-08-30 23:41:59]
产品用户体验质量的模糊评价（1）――灰色关联分析 [2011-08-26 22:23:58]
首页大屏广告交互设计探讨 [2011-08-22 12:24:10]
心理学在沟通中的应用 [2011-08-22 12:16:26]
过度设计：有所为有所不为 [2011-08-21 10:51:13]
Web设计师能从游戏中学到些什么 [2011-08-19 22:58:56]
推特与微博的信息架构说 [2011-08-14 16:22:27]
邮箱投放问卷时影响用户响应问卷与填答问卷的要素 [2011-08-14 16:21:38]
确认框的设计 [2011-07-30 21:16:39]
iPad用户体验暨UI设计―如何设计出优秀的用户界面 [2011-07-24 14:54:44]
设计要注意火候 [2011-07-15 00:06:40]
阻碍创新的两种抄袭 [2011-07-09 22:41:21]
不靠谱的互动驱动因素 [2011-07-09 22:27:29]
产品经理你伤不起 [2011-06-23 13:40:43]
Web表单设计:表单结构 [2011-06-23 13:27:48]
给想转行做产品经理的同学 [2011-06-22 00:26:39]
用户的地图需求分析 [2011-06-21 13:44:50]
产品的成功学 [2011-06-14 13:44:13]
服务设计小笔记 [2011-06-10 14:05:16]
浅析摄影与WEB设计中的构图 [2011-06-02 23:23:35]
让界面更加清爽 [2011-05-17 09:17:54]
简析 IOS 程序图标的设计 [2011-04-28 13:23:51]
说说Stack Overflow和Quora [2011-03-29 00:07:46]
浅谈白社会交互设计的创新(三) [2011-03-27 23:46:20]
浅谈白社会交互设计的创新(二) [2011-03-27 23:45:24]
浅谈白社会交互设计的创新(一) [2011-03-27 23:44:06]
交互规范实例――白社会Dialog规范 [2011-03-27 23:41:07]
工具型产品的设计感想 [2011-03-21 00:14:53]
Android那些事儿（二）安卓手机交互特性 [2011-03-01 22:45:50]
WindowsPhone7初体验 [2011-02-28 23:21:56]
浅谈认知心理学与产品设计的结合 [2011-02-27 22:58:05]
读《Web 表单设计》 [2011-02-27 22:51:12]
网站内容决定网站的前途 [2011-02-23 22:18:10]
产品经理能力模型解说―把控 [2011-02-14 22:41:13]
触摸屏手机输入法的一些思考 [2011-02-11 22:50:02]
为自己打造良好的文章阅读体验 [2011-02-10 22:21:44]
关于理论和术语 [2011-02-09 22:27:44]
从创业的时髦说起 [2011-02-09 22:09:42]
Web交互设计优化的简易Check list [2011-01-30 18:53:02]
等级制度及成长体系 [2011-01-29 19:23:19]
导航设计中的信息结构 [2011-01-26 21:20:56]
更多的限制，更简单的设计 [2011-01-26 21:10:00]
在淘宝大半年的零散体会 [2011-01-24 23:04:32]
更宽广的交互更高效的产品 [2011-01-23 22:39:12]
投影――信息架构中物理到虚拟的一致性 [2011-01-20 22:15:34]
产品思考：分众 [2011-01-10 23:23:09]
产品五问 [2011-01-09 22:56:05]
舒服：Aardvark邮件沟通的用语艺术 [2010-12-29 09:12:39]
对错与行动 [2010-12-28 00:23:12]
博客导航 -- 网址导航网站的垂直延续 [2010-12-15 22:48:06]
格式塔：转动视觉的魔方 [2010-12-07 21:30:56]
网站的本质和要素 [2010-12-07 21:28:27]
垂直门户网站的内容层次 [2010-12-05 22:54:06]
手机UI设计检测要素 [2010-12-05 21:35:31]
细说魅力属性 [2010-11-30 22:44:02]
信息闭环设计小谈 [2010-11-29 22:52:28]
我的十年，交互之外的那些事 [2010-11-24 00:10:10]
个人学习经验之谈 [2010-11-22 21:24:14]
Icon设计要点――信息传达的准确度（一） [2010-11-14 22:32:08]
读书笔记-应需而变：设计的力量 [2010-11-01 19:58:37]
流程管理与用户研究 [2010-10-31 23:34:07]
我们需要培养用户的使用习惯 [2010-10-26 22:04:01]
做产品前六问自己 [2010-10-24 19:28:09]
态度的重量 [2010-10-21 08:57:29]
漫话产品设计 [2010-10-19 00:29:55]
姐要的视频广告 [2010-10-12 08:38:59]
SEO对网站性能的解决方法以及影响 [2010-10-10 08:40:03]
上海航空网站注册表单优化方案 [2010-10-10 08:35:25]
手机客户端首页设计 [2010-10-07 08:19:51]
产品经理的素质 [2010-10-07 08:15:48]
基于黄金分割率的Twitter新版页面布局探究 [2010-09-30 03:11:43]
产品经理之聆听用户的声音 [2010-09-27 08:48:29]
与用户交互的核心――读《Web表单设计》 [2010-09-26 08:54:21]
把项目当做产品来做 [2010-08-24 09:35:07]
巧用任务流进行产品设计 [2010-08-17 23:24:32]
产品经理进化史 [2010-08-17 23:20:50]
网页设计中美女视线的影响 [2010-08-13 09:54:47]
产品经理，你用多少时间来思考 [2010-08-12 23:25:23]
思维和语言随笔 2 [2010-08-12 09:22:52]
抵抗天赋的诱惑 [2010-08-10 04:33:01]
中国式产品经理 [2010-07-26 23:41:00]
浅述各平台系统交互设计的不同关注点 [2010-07-26 23:38:59]
设计上的小细节（二） [2010-07-19 10:04:59]
好产品的简洁之道 [2010-07-18 23:35:24]
尊重是自己给的 [2010-07-16 00:08:59]
富媒体广告投放的一些经验 [2010-07-16 00:08:41]
120个优秀的水平导航设计 [2010-07-12 23:29:05]
手机软件交互设计经验分享 [2010-07-06 23:28:28]
解读iPhone平台的一些优秀设计思路 [2010-06-22 13:11:58]
设计上的小细节 [2010-06-20 23:45:32]
NPR简介 [2010-06-18 13:32:26]
简洁的是最好的吗？ [2010-06-18 13:15:57]
原型: 新浪微博客户端 [2010-06-16 23:51:21]
设计从整理开始 [2010-06-12 18:02:59]
创造一个可理解的世界 [2010-06-12 09:56:11]
信息扁平化 [2010-06-07 13:06:49]
如何让“没兴趣的人”也来用你的产品 [2010-06-05 11:41:43]
深泽直人：无意识设计 [2010-06-05 11:37:07]
再议手机交互设计原则 [2010-06-04 14:52:22]
交互行为量化方法之GOMS击键层模型 [2010-05-28 09:36:33]
以用户为中心的“精于心，简于型” [2010-05-26 09:46:00]
烂大街的用户体验 [2010-05-23 21:46:50]
个人知识管理 [2010-05-20 13:21:26]
安慰你的用户 [2010-05-14 14:00:07]
什么时候使用什么用研究方法？ [2010-05-14 13:53:25]
设计提升满意度 [2010-05-13 13:49:49]
我来做淘宝商城的首页设计 [2010-05-12 13:26:47]
互联网产品的“打通”问题 [2010-05-10 14:54:55]
页面表达常用方式 [2010-05-05 12:39:10]
门户、论坛、博客、SNS，网站模式的辨析 [2010-04-29 23:29:46]
互联网产品经理，全方位入门，图书推荐 [2010-04-28 15:43:30]
触摸未来的QQ概念版设计 [2010-04-27 13:44:11]
空行不空格式排版组织原理 [2010-04-27 13:39:02]
激发新用户使用SNS网络应用的一般方法 [2010-04-22 18:22:21]
越简单越丰富――极简网页设计视觉呈现技巧 [2010-04-16 13:27:57]
交互设计实用指南系列(8)―深广度平衡 [2010-04-16 09:24:05]
交互设计实用指南系列(9)―一次点击 [2010-04-16 09:23:41]
视觉设计前瞻实用性研究（PNVD）第五期 [2010-04-15 13:46:18]
不一样的交互组件（上） [2010-04-14 13:41:56]
读书（一） [2010-04-14 09:18:40]
互联网产品经理必读书目 [2010-03-26 14:24:36]
[游戏笔记]游戏创新新十年 [2010-03-02 13:56:25]
WEB注册表单的设计 [2010-03-01 09:19:58]
用户习惯那点事 [2010-01-26 10:25:31]
视觉注意力―解剖设计的根源 [2010-01-23 16:15:40]
标签明晰、有效 [2010-01-19 09:19:06]
如果我们用这样的心态做产品 [2009-12-24 15:08:09]
更真实的理解用户 [2009-12-22 14:19:34]
交互设计实用指南系列（1）――“有效性”之“操作入口明确” [2009-12-11 22:55:15]
轻设计，让网站灵敏轻便的6个技巧 [2009-12-03 21:34:39]
产品的情商 [2009-11-26 22:22:30]
谈谈眼动研究的一些作用 [2009-11-24 09:23:53]
用户体验的时间尺度 [2009-11-09 13:35:15]
产品设计理念杂谈问题之Caoz的解析 [2009-11-02 21:25:28]
什么是产品人才 [2009-11-02 12:28:45]
他们不需要产品 [2009-11-01 22:51:56]
初窥交互设计 [2009-10-21 22:41:14]
背着包袱跳着走 [2009-10-21 22:39:39]
马化腾在腾讯产品峰会上关于产品设计和开发的内部讲座 [2009-10-20 22:21:15]
看看各个网站的404错误处理 [2009-10-19 23:32:51]
淘UCD心得 [2009-10-13 23:04:25]
基础体验决定上层应用 [2009-10-13 23:02:29]
有效降低产品门槛 [2009-10-13 23:01:31]
网络广告互动体验设计 [2009-10-13 23:00:53]
互联网产品交互事件分析 [2009-10-13 22:59:02]

Cross-Document View Transitions: Scaling Across Hundreds of Elements

Durgesh Rajubhai Pawar — 2026-06-03 09:03:24

标签： CSS DOM JavaScript View Transitions

In Part 1, we covered the gotchas that bite you first: the deprecated meta tag that silently does nothing, the 4-second timeout that kills transitions without telling you, the image distortion that turns every aspect ratio change into silly putty, and the pagereveal/pageswap events that give you hooks into the transition lifecycle.

All of that gets you from “nothing works” to “one element transitioning nicely between two pages.” Which feels great. For about five minutes. Then you try to build a product listing page with 48 cards that each need to morph into a detail view, and you realize the tutorials left out the hard part.

This is where it gets real. Let’s scale this thing.

Cross-Document View Transitions Series

The Gotchas Nobody Mentions
Scaling View Transitions Across Hundreds of Elements (You are here!)

The Dream: One Line, Infinite Names

In a perfect world, you’d solve the scaling problem with pure CSS. No JavaScript. No server-side loops. Just this:

.card {
  /* Generates card-1, card-2, card-3, etc. automatically */
  view-transition-name: ident("card-" sibling-index());
}

That’s ident() — a CSS function proposed by Bramus (who works on Chrome) to the CSS Working Group. It takes strings, integers, or other identifiers, concatenates them, and spits out a valid CSS name. Pair it with sibling-index(), which returns an element’s position among its siblings (1, 2, 3…), and you get auto-generated unique names for every element in a list. One rule. Works for 10 cards or 10,000. The CSS doesn’t care.

And it’s not just view transitions. The same pattern works for scroll-timeline-name, container-name, view-timeline-name — anywhere you need unique identifiers at scale. You could even pull names from HTML attributes with attr() instead of sibling-index(), constructing identifiers like ident("--item-" attr(id) "-tl"). The flexibility is real.

Here’s the thing: half of this equation already exists. sibling-index() shipped in Chrome 138 — you can use it today for things like staggered animations and calculated styles. The missing piece is ident(). There’s a Chrome Intent to Prototype from May 2025, which means it’s on the radar. But “on the radar” and “in your browser” are very different things. No browser ships ident() yet, and there’s no timeline for when it’ll land.

So we can’t use it yet. But it’s worth knowing about because once ident() ships, a huge chunk of the complexity you’re about to see just… evaporates. Until then, here’s how you solve the same problem efficiently today — with the tools that actually exist in browsers right now.

100 Products, 100 Names, 1 Nightmare

Here’s what happens when you follow a tutorial that shows one hero image transitioning between two pages and try to apply that pattern to a grid:

/*  THE NIGHTMARE - one rule per item, forever */
::view-transition-group(card-1),
::view-transition-group(card-2),
::view-transition-group(card-3),
::view-transition-group(card-4),
::view-transition-group(card-5),
::view-transition-group(card-6),
::view-transition-group(card-7),
::view-transition-group(card-8)
/* ... imagine 92 more of these */ {

  animation-duration: 0.35s;
  animation-timing-function: ease-out;
}

::view-transition-old(card-1),
::view-transition-old(card-2),
::view-transition-old(card-3)
/* kill me */ {
  object-fit: cover;
}

That’s what you end up with if you follow the tutorials that only show one or two named elements. They assign view-transition-name: hero to one image and call it a day. Cool. Now try building a product grid.

Every view-transition-name on a page must be unique. That’s a hard rule — if two elements share a name, the browser doesn’t know which one maps to which on the next page, so it throws the whole transition out. On a listing page with 48 products, you need 48 unique names. On a photo gallery with 200 thumbnails, you need 200. The names aren’t the problem — you can generate those. The problem is that every pseudo-element selector in your CSS targets a specific name, so your animation styles explode into an unmanageable wall of selectors.

This is where you need to understand the difference between two properties that sound like they do the same thing but absolutely do not.

Name vs. Class: The Distinction That Changes Everything

And yeah, the naming here is confusing. I’ll be honest: the first time I saw view-transition-name and view-transition-class next to each other, I thought they were interchangeable. They’re not, and the difference matters.

Name = identity. It answers: “Which element on Page A is the same element on Page B?” When you give a thumbnail view-transition-name: card-7 on the grid page and give the hero image view-transition-name: card-7 on the detail page, you’re telling the browser those are the same thing and to animate between them. Names must be unique per page. Two elements can’t both be card-7 or the whole thing breaks.

Class = styling hook. It answers: “How should the animation look?” When fifty elements all have view-transition-class: card, you can write one CSS rule that controls the duration, easing, and object-fit for all of them. It’s the same mental model as CSS classes on regular elements — .btn doesn’t identify a specific button, it says “style me like a button.”

Think of it like a database. The name is the primary key — unique, identifies one specific row. The class is a category column — groups rows together so you can run a query across all of them at once.

Here’s what that looks like in practice:

CodePen Embed Fallback

There it is. Six cards, six unique names, but exactly three CSS rules handling all the animation behavior. Could be sixty cards. Could be six hundred. The CSS doesn’t change.

The key line is that selector: ::view-transition-group(*.card). The asterisk is a wildcard for the name, and .card matches the view-transition-class. It reads as “any view transition group whose element has view-transition-class: card, regardless of what its specific name is.”

For cross-document multi-page application (MPA) transitions, the pattern is the same but you generate the names on the server:

/* ONE stylesheet, shared by all pages, handles every product */
@view-transition {
  navigation: auto;
}

::view-transition-group(*.card) {
  animation-duration: 0.35s;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

::view-transition-old(*.card),
::view-transition-new(*.card) {
  object-fit: cover;
}

That’s the entire animation stylesheet for a site with thousands of products. Three rules. No matter how many items you have in the database, you never add another line of transition CSS.

Before view-transition-class existed, people were doing horrifying things — looping through items in JavaScript to generate

IT技术博客大学习

一个冷门的速查日历方法

Day for Night

新特性速递：focus()行为新增focusVisible控制

一、focus()的两种控制

二、focusVisible参数的作用

三、难得碎碎念

科技爱好者周刊（第 398 期）：Token 费用难以负担

封面图

Token 费用难以负担

漏洞赏金计划的终结

科技动态

文章

工具

AI 相关

资源

图片

文摘

言论

往年回顾

文档信息

Algorithmic Theming Engines: Building Self-Correcting Color Systems With `contrast-color()`

It Doesn’t Guarantee Perceptual or AAA Compliance

Transitions Snap, Not Fade

Tie Goes To White

Gradients And Images Are Out

Transparent Colors Are Composited First

Windows High Contrast Mode

Brand-Tinted Contrast With Relative Color Syntax

Softened Contrast With color-mix()

Theme-Aware Contrast With light-dark()

Revealing Text With CSS letter-spacing

Overlapping and separating letters

Showing and hiding text

Using with other glyph box styling

What else can we do?

AI Agent Orchestrator Landscape Report

1. 赛道概述

2. 项目总览

3. 逐项深度分析

3.1 LobeHub

3.2 Paperclip

3.3 Ruflo

3.4 Multica

3.5 1code

3.6 Golutra

3.7 MyClaude

3.8 Agent of Empires

3.9 Agor

4. License 商用友好度排名

5. 技术选型建议

场景 A：快速原型 / 个人项目

场景 B：商业 SaaS 产品

场景 C：企业内部平台

场景 D：贡献者 / 社区参与

6. 赛道趋势与风险

6.1 增长轨迹

6.2 整合风险

6.3 技术债信号

6.4 社区碎片化

7. 附录

7.1 License 全文摘要

7.2 外部讨论链接

7.3 关键数据快照

How to Set Up Homebrew Tap for Private CLI Tools: A Complete Guide

如何为私有 CLI 工具提供 Homebrew 一键安装能力（完全指南）

1. 核心挑战与架构决策

2. 前期准备工作

3. GitHub Actions 流水线自动化

自动化脚本模板

4. 关键经验与防坑指南

4.1 额外目录被 Homebrew 丢弃的问题

4.2 提供“降版本”的后悔药机制

5. 最终暴露给用户的完美用法

Your Prototype Is Not Being Honest With Your Users (And Here’s How To Fix It)

Cross-Document View Transitions: Scaling Across Hundreds of Elements

Cross-Document View Transitions Series

The Dream: One Line, Infinite Names

100 Products, 100 Names, 1 Nightmare

Name vs. Class: The Distinction That Changes Everything

Softened Contrast With `color-mix()`

Theme-Aware Contrast With `light-dark()`