个人网站是唯一一个「客户是你自己、截止日期是你什么时候不想再做」的项目。这既是乐趣，也是陷阱。没有产品经理告诉你「这套衬线字体可以了」，只有凌晨一点那种挥之不去的痒：破折号和引号之间的间距好像还不太对。
在这个版本之前，我重做过三次。这一版，是我第一次不需要先道歉就愿意给人看的。
先定约束
我做过的每一个好项目，都始于某个有人选择尊重的约束。这个网站的约束是：
- 只有一栏，34rem——大约 544 像素，或每行 62 到 68 个字符。
- 两套字体，一套等宽。没有例外。
- 不用模板，不用主题，不用建站工具。每一个矩形都是刻意的。
- 纯静态 HTML，JavaScript 预算大约 100KB，首屏不放图片。
- 一个强调色，用得足够克制，以至于它仍然有意义。
约束不是限制，它是一种提前做完一万个决定的方式，好让你把注意力花在真正重要的那一个上。
排版干了大部分的活
在一个写作网站上，界面就是文字。其他一切基本上都是测量。
正文用衬线体，1.0625rem，行高 1.78。行宽 34rem，因为到了这个宽度，一行才不显得长，同时栏目在笔记本上又不会显得窄。标题稍微收紧字距；元信息放松字距并换成无衬线，因为日期和阅读时长是标签，不是句子。
.prose {
font-family: var(--font-serif);
font-size: 1.0625rem;
line-height: 1.78;
hanging-punctuation: first last;
}最后一行做的事比看起来多。悬挂标点意味着行首的引号或行尾的逗号会挂在行宽之外，而不是把文字往里推，于是段落的左边缘读起来是一条干净的垂线。目前只有部分浏览器支持；不支持的浏览器就正常渲染，而这恰好是一个很好的渐进增强定义。
我还在分隔线上花了很不合理的时间。百分之十墨色的发丝线，不是百分之十八，因为在百分之十八时，它会和它本该隔开的文字争夺注意力。
性能预算是一个设计决定
速度不是设计完成之后才到来的工程问题。它是「这个东西感觉起来如何」的一部分，也是访客体验到的第一件事。
我给自己定的规矩：不用客户端框架，不用第三方字体，不用阻塞首屏的分析脚本，不留比它所说明的文字更大的图片。整站编译成 HTML 和一点 CSS，加上几十行 JavaScript 负责主题切换和阅读进度条。
阅读进度条是顶部两像素的强调色，随滚动位置缩放。它只花一个元素、一个属性和十几行代码。它也是这个页面上唯一不可省略的动效，唯一一块我会力争保留的「外壳」。
深色模式不是浅色模式的反转。浅色主题是暖纸与墨，深色主题是常青绿和偏暖的米白，因为纯白文字压深色底会震动。强调色必须在每个主题里重新挑选，而不是简单换色。设计 token 让这件事成为可能，不必翻遍组件去找一个漏网的数值。
为什么要做六种语言
网站有英文、中文、日文、西班牙文、法文和德文。这不是增长策略，而是我希望这个网站能被谁读懂：上海家里人，东京的朋友，还有这些年跨时区积累下来的客户和合作者。
用另一种语言写作不是翻译。那是用另一个更笨拙的写作者、另一套直觉，对同一个想法再尝试一次。我先用英文写，然后用中文把它当成一篇新文章重写，再用日文来一遍。有些句子变好了，有些丢失了。当一篇文章还没有被写进某种语言时，网站会安静地注明一句，因为假装它已经在了，比诚实更糟。
这个网站是为了什么
不是为了获客，也不是为了个人品牌。它是一座花园，我想认真想点什么的时候会去那里；它也是我继续亲手做东西所需要的借口。
拥有一个网站最好的地方在于，它可以在众目睽睽之下不完美。你可以在某个周二把栏宽改掉，因为这样感觉更好。你可以留下一句稍微不准确的话，因为你仍然相信它。没有人会把它写进评审。
网站还会再改。这就是亲手做它的意义。
34rem 是起点，不是法律。一行大约 62 个字符时眼睛最舒服；低于 50 会觉得磕磕绊绊，高于 80 时「回到下一行」就变成了一个小决定。如果今天只定一个数值，就定这个。