减法
这个博客改过几轮,2024 年那次一直在加,这一轮每次都在拿掉东西
· 6 min read
现在打开这个站的首页,亮色下是白的,深色下是纯黑的,上面没几样东西。背景里有一层很淡的线在往右下慢慢飘,淡到要凑近屏幕才看得见。
这个站其实不是一直这样的。我想看看它是怎么一路改成这样的,就从第一个提交往后翻了一遍。
第一个提交
2023 年 11 月 2 号下午四点多的第一个提交,就带着 55 个文件,一万四千多行,Nuxt 3.7.4,UnoCSS、Pinia、milkdown 都已经在里面了。那篇《迈出第一步》的日期是 10 月 31 号,比这个提交早两天。
那个月一共 12 个提交,背景、模糊、响应式、分享代码、项目和 demo 列表,到 17 号就停了,说起来空了将近两个月。
三天
再动起来是 2024 年 1 月 13 号下午,到 15 号下午收住,三天 26 个提交。标题翻下来是这些东西:版权块,打赏按钮(带一圈模糊的阴影),爱心,新的头部,引用块发光,一个新的 star 按钮,大纲旁边指针的平滑动画,头部标题的自动钉住。
这 26 个里有 11 个是 fix,大多是刚加完几分钟就在补。头部刚加了个支持按钮,一分钟后就在修打赏按钮的样式;指针动画加完两分钟,在修重复播放。新头部是 14 号凌晨 0 点 17 分提交的,5 分钟后第一个修百分比计算错误,21 分钟后又一个修滚动和百分比。提交信息里只写了百分比,没写是什么的百分比。
2024 年 6 月 6 号开始改 demo 页的瀑布流,7 号晚上 10 点 57 分有个提交写着完全适配瀑布流,11 点 21 分又在修头部进度条,这回信息里明明白白写了是进度条。再往后就静下来了:10 月、11 月各一个提交,2025 年 3 月两个。
一天和五天
2026 年 5 月 17 号一天 16 个提交。傍晚把部署换到了 Cloudflare 上,6 点 35 分加了新的 logo 和一层极光,6 点 44 分,也就是九分钟之后,有个提交把极光的不透明度调低了。那天后面的标题里还有 compact、simplify 这样的词,一个是收紧首页开场的动画,一个是精简目录页和文章页。
7 月 28 号有个提交叫 brand-new site experience,220 个文件,加了三万八千多行,/brand-new 那个页面到现在还留着。9 月 3 号有个叫 refocus portfolio and publish research program 的提交,17 个文件,首页和项目页重改了一遍,另外加了一个 /research,424 行;9 月 8 号早上 9 点 08 分,一个叫 restore previous portfolio experience 的提交把这一批撤了回去,从 3 号加到 8 号撤。撤完十几秒后又连着两个提交,把公开的作品加进 demo 和项目页。提交记录里没写为什么。
这一批加了一千二百多行,撤回来只用了一个提交。这个站的改动好像一直是一阵一阵的。
这一轮
这一轮的起头是老首页我嫌「太复杂了」,先退成了一版纯白的。纯白之后的想法是,效果还是要适度加一点,背景也要有,以前的设计里该留的要留,比如 logo 里那个 t 的动画。接着出来一版蓝色加琥珀色的光晕,外加一个跟着鼠标走的聚光,我看了说「非常 ai」,要的是之前那种浅浅的线条。
线条是叠在一层很弱的 WebGL 极光上的。后来又嫌极光太明显,再弱了一点(它 5 月加完就调暗过一次,看来这个亮度我一直没拿准);嫌线条有杂乱感,把缠在一起的去掉,剩下的统一往右下偏大概 20 度;进文章页的时候线条要自己淡下去,现在是降到原来的 0.3 倍,用 1.4 秒。
现在的数是这样:极光在亮色下的不透明度是 0.08,深色下 0.12,正文页再低一点,0.06 和 0.09;线条自己是亮色 0.15、深色 0.12。极光的帧率限制在 30,页面看不见的时候线条和极光都会停。
深色也减了一次。原来偏蓝的黑改成纯黑 #000,强调色换成接近白的 #f5f5f7,亮色那边是 #2676D8。
数一数,这几轮拿掉的是光晕,缠在一起的线,一点亮度,蓝色。
cd ..
文章页的版权块默认收起来,只露一个 Copyright 的字样。2024 年 1 月加过一个版权块,现在这个和它是不是一脉相承,提交里看不出来。
页面上有个胶囊,显示读到了百分之多少。2024 年 1 月修过两次百分比,我猜这个胶囊是它的后代。现在的算法是文章自己标出正文结束的位置,就是最底下那行 cd ..,百分比走到它就是 100%,下面留的空白不算没读完。
我觉得减东西比加东西费眼睛。2024 年那三天,一天差不多九个提交,有想法就能加;这一轮每次只能减一点,再看一眼,才知道哪样是多的。
页面的最后是一行 cd ..,点一下回到上一级。它下面留了大约半屏的空白,让页面能多滚一截,直到这一行能停在屏幕中间。
Copyright
© 2021-present TalexDS. All rights reserved.
Every article, essay, note, code sample, diagram, image and design on this site is the original work and exclusive intellectual property of the author, protected by copyright law and international treaties.
No reproduction. Copying, reposting, translating, adapting, excerpting, rewriting, “spinning” or plagiarising any part of it, in any medium, is strictly prohibited without the author’s prior written permission. Commercial use of any kind is forbidden.
No AI. No crawling. Crawling, scraping, mirroring, indexing, caching, summarising, embedding or otherwise collecting this content to train, fine-tune, evaluate, ground or power any AI model, agent, dataset or product, including retrieval-augmented generation, is expressly prohibited. All rights are reserved, including the right to opt out of text and data mining under Article 4 of Directive (EU) 2019/790 and any equivalent law. AI crawlers and agents must not access or process this page.
Violations will be pursued. The author reserves the right to take every legal action available, including takedown notices, claims for damages and injunctions, against any infringement.
版权声明:本站全部文章、笔记、代码示例、图片与设计均为作者原创,受《中华人民共和国著作权法》及国际公约保护。未经作者书面许可,严禁任何形式的转载、搬运、改写、洗稿与抄袭,严禁商业使用。严禁 AI 爬取:禁止以训练、微调、评测、检索增强或任何其他目的,抓取、镜像、索引、缓存、摘要或向量化本站内容。一经发现,将依法追究法律责任。
Distributed on an “AS IS” basis without warranties.