山风的小角落

增加人生的「方差」

Tue, 04 Feb 2025 00:00:00 GMT

增加人生的「方差」

漫长的迷惘

在 2024 年底，我真的如 23 年底所预想的那般——跳槽了，但心路历程则比想象中的还要曲折许多。

经过 2020 年的实习、于 2021 年毕业加入腾讯之后，这个行业便很快迎来三年的所谓「互联网寒冬」，整个工作与职场的氛围逐渐变得不如初见那般融洽。而我身处其中、受所见所闻影响，对于职场本身也开始萌生出了一些悲观的念头，囿于各种混乱的想法之中，不知未来如何打算。

而在经历过 23 年底一阵漫长的迷惘后，我暂时得出了「我还未及需要跳脱职场的那一步」的结论。毕竟相比于许多前辈们，我目前的职场经历可以算得是短暂而单一的，而对于这个职业而言，一旦离开便往往很难再回到原来的位置。从丰富体验的角度来说，先尝试改变一下环境或许是更合适的选择方案之一。

但是，尽管自 3 月份开始，我便有意识地尝试准备简历与刷题，但在我脑海里，幻想中的「换一份更加 Work-Life Balance 的工作」的念头与结合现实情况的「换一份更适合职业深入发展的工作」的念头两者之间的冲突也随之被搬到台面上来。这份矛盾持续地影响着我难以做出果断的决策，再加之工作方面一直以来不间断的繁忙，以至于直至 10 月份，我的简历甚至都还没有成型。

可能这就是整个社会经济增速放缓、集体纷纷右转（保守主义）的大背景投影在我个体身上所显现的最大的困境：

选择 WLB，代表着我得以能够遵循内心的期望，将更多的时间交还给自己，不论是关注生活、还是另寻打算，都将拥有更多的自由。但是，既 WLB、又有较大发展空间的工作的稀缺性不言自明，更多情况下这都是一个单选题。「主动把多数人艳羡的职业发展路径走窄」在当前的社会环境下需要很大的勇气。
选择继续深入，代表着我认同在职场下工作仍然是当前阶段下最合理的选择，我将继续、甚至加大在工作方面的精力投入，换以在未来拥有更多可以选择的可能性。保守而言，这肯定是不坏的、更加合乎理性的，但仅靠这些好处，一直以来都很难说服自己内心对于自由的渴望。

偶然的机会

如此漫长的二择困境，曾一度让我决定放弃选择、保持现状、减少焦虑，以期望将工作时间以外的注意力重新交还给生活，回归到我所认为的有价值的地方。我清楚地明白在当前的环境与条件下，我实质上失去了主动做出改变的动力与勇气，因为不管是哪种选择，我都无法推演出其是否更加正确的结论。

而最终帮助我做出选择的还是一个偶然的外力：恰逢国庆假期得以时间休息之时，我收到了前同事的一个公司内部活水面试微信的内推机会，工作内容显然比当前的工作要更加具备价值，薪资待遇当然也会有所提升，但代价就是将要付出更多的时间与精力投入其中。

在短暂的犹豫后，我抱着先试试看的心情选择接受了这次面试机会。起码借助这股外力，我得以有了阶段性目标，能够快速完成半年都没完成的简历整理。「即便面试没有通过、或者最终我没有接受 offer，我仍然会有所收获，那么对此我便没有什么好计较的」——我如此想到。

或许是运气，或许是巧合，整个面试的流程下来都比想象中的要顺利许多。很快，我就得到了原本并不在考虑范围内的 offer。

选择的理由

许多人求而不得的 offer，我何有不接受的道理？然而，如果接受它，那么这代表着我将换一份工作内容、换一批同事，甚至换一座生活的城市，这对于我的现状而言是具备挑战性的。

在做出一个选择之前，我总是习惯于去找到一个能够让自己认可的理由，这样未来的我便不再会后悔当初的选择。而在面试的这段时间里，我偶然阅读了孟岩的一篇公众号文章，他将自己的一期播客的内容以文字的形式整理成了一篇长文，介绍了自己的一些生活态度。而在这其中，有两个观点让我记忆犹新：

伟大是无法被计划的
请尽可能地去增加人生的方差

在这个世界上，那些长期的、宏大的目标，往往需要一些不容易预见到的、非线性的过程才能达成。

我们不太可能预测所有的可能性和结果，也不太可能预测到中间的路径，特别是那些可能对我们的目标产生关键影响的事件。

无论是我们说 make things happen，或者说 gradually, then suddenly，其实都是在说这件事。

如果是这样的话，我们需要一些什么呢？

我想首先是可以允许放弃一些对未来的计划，

敢于允许自己去做一些自己真正感兴趣的事情，

敢于允许自己去做一些「方差大」的或者说从来没做过的事情，

保持开放和灵活，

对新的信息或者说信号保持敏感，

并且能够根据这些信号来进行调整。

当然，我们还需要时间。

在时间的流逝中，这些东西都会慢慢积累，会有那么一天，我们可以 connecting the dots，看到事物之间不那么明显的联系，能够从巨大的房间里面找到那些关键信息，能够看到那需要的关键一跃。

——孟岩《让奇迹发生》

关于孟岩对其观点的详细论述在其原文中已经非常全面，这里不再拾人牙慧进行复述。这份观点很好地缓解了我对于如何做出选择的困扰、对于未知的恐惧、以及对于失败的焦虑。

如果说伟大是无法被计划的，那么我们便不再需要保证我们的每一次选择都是绝对正确的。在事情的一开始，我们应该允许自己去做一些更加跳脱于日常的事情，去尝试增加人生的「方差」、拥有更多的可能性。即使某次选择看起来错了，最终，它也将会成为自己生命中的一部分，成为某种未来不可或缺的垫脚石。

于是我不再害怕变化，我相信这个选择最终会为我带来有别于现状的新的收获与体验。

日后谈

当然，跳出舒适圈是反人性的，这份「痛苦」对于转岗广州后的当下的我而言体验自然尤为深刻；我所做的事情也并不完全符合孟岩老师的全部观点，因为我违反了自己内心的期望、正让自己变得更加难以协调生活的比例，这实际上让我有些「后悔」这次的选择。

但我又暗自相信，随着适应期过去，我会重新变得不再后悔，未来的我能够在其中重新找到新的平衡，或着找到新的出路。

这只是我的一次增加「方差」的尝试。我时刻庆幸着未来的我仍旧有得选。

只要还有得选，人生就总不至于陷入被动之中。

封面：属于原部门的三台测试机，恢复出厂设置以准备退库

2024 年记

Mon, 10 Feb 2025 00:00:00 GMT

2024 年记

封面摄于 2024.03.29，腾讯滨海大厦北塔 37 楼电梯厅

序 · 反思

与往年不同的是，2024 年年初以来，我陆续记录了大大小小的非日常的事情、以及偶尔冒出的所思所想，好似时刻都在准备着年底总结的原料。

但实际上，真到了准备开始写本篇年记的时候，又开始感觉到一阵恍惚——

这些生活的细节确实是我用心去参与的，我遵循着我信奉的想法在体验我的生活；但在大方向上，我又有点彷徨：我似乎没法认同，按现状如此下去，自己的生活状态终将往自己内心所向往的方向上发展。

我想 2024 年，我其实并没有做错什么事，但回头来看，我发现我的各种选择，都忘记了尝试缓解我一直以来的苦恼——我内心的「To Do List」仍然在变长。

一直以来，每当我有了想做的事情或者想要的东西，为了避免三分钟热度，我会用各种方式先记着，然后挂起这个想法，等待时间来检验它的必要性。

这个方法帮助我在「减少欲望」这件事上有着很大的作用。假如随着时间过去，我仍然对其抱有念想，那么我相信我能够长久地喜欢它；否则，大多数情况下都只是偶然的情感波动而已。

然而，对于我真心想要的东西，如果只是金钱消费，那是非常简单的——毕竟花钱谁不会？但对于需要消费时间的事物而言，我就显得非常难以下手了。毕竟，我还不能够把一天掰成三十个小时来用。

于是乎，一件件已经历过时间检验的事物被累积到我的 To Do List 之中，但却久久也不见有事物能被从中取出。

或许在有些总处于无聊状态的人看来，这是一种幸福的烦恼，因为他们经常需要花费不少精力去寻找新的有意思的事情。然而，这其实只是生活状态的两种极端。引用叔本华所言——

人生就像钟摆一样，在痛苦与无聊之间摇摆。当欲望得不到满足时就会痛苦，当欲望得到满足时就会无聊。

我想我如今的状态就像是被一侧不断垒高的钟摆、迟迟得不到幻想中的下落。

尽管下落所产生的摇摆可能是会使人的情绪反复遭受扰动，但我想，人生应该还是需要由这样大大小小的摇摆所组成，否则便难以避免情绪上的压抑。

但是，尽管有很多事物我迟迟得不到满足，对于 2024 年而言，我觉得我也有认真地遵从着我喜欢的方式在生活，不断完善的认识世界的框架让我的内心感到充实，我其实已经比过去更加喜欢自己。

在「解决 To Do List」这件事情上不太满意，或许这是一种贪婪的体现。

工作上

01 · 润！

在 2024 年底，我真的如 2023 年底所想的那般，跳槽了，但心路历程则比想象中的还曲折许多。（详见《增加人生的「方差」》）

尽管我在 10 月底就已经面完所有面试，但为了避开因考核季转岗而给原部门背低绩效的风险，最终我推迟到了 24 年底才正式发起流程，并于 25 年初前往广州。

面对各个方面被重新打破的平衡，这次我又得从头开始一点点地建立秩序。这个过程必然是痛苦的，但我也有些庆幸——对于职业发展选择的内耗可以继续往后推迟了。

02 · 一些发散的想法

在过去的一年里，有几段时间经常需要加班。尽管时间紧迫，但由于这些项目的代码实现大部分是由我所主导的，我得以有机会尝试许多新的想法和技术。虽然很忙，但是每当我写出某些精巧的代码、或验证了某种编程哲学理念时，便能清楚地感觉到内心泛起一股高级的快乐感受，以至于会忘记当前是无偿加班的时间。想必这已然是进入了宝贵的心流状态。

这种沉浸感在重构代码的过程中更是如此。代码重构表面上是优化代码结构，本质上其实也是一种重新构建秩序的过程。对于一个喜欢整理东西的人而言，这种构建秩序的过程本身就能带来持续的满足感。正因为这份情感的相通，我愈发地相信透过一份代码的种种细节，某种程度上可以感受到其作者为人处事的方式以及对于生活的态度。

对于工作而言，在很多时候，我们不得不面对枯燥的重复性任务。在这些时刻，我总喜欢主动寻找一些「微小的意义」。比如，在每次完成需求的过程中，我会想着尝试引入一些新的想法或技术，这样即使任务本身是重复的，对我个人而言也仍然有所收获。这种习惯创造出了新的价值与意义，让枯燥工作的意义变得不仅仅是「出卖时间换取金钱」那样单薄。

其实令人厌烦的一直以来都不是工作本身，而是在工作本职内容之外的、影响我们专注于心流的其他事情。倘若有一份只需要专心干活的工作、以及一份可能会遭受精神内耗的工作，即使前者的工作时间更长一点，我也会坚定的选择前者。

03 · 被破坏的专注力

近些时候，我偶尔会反思自己这些年的专注力为何逐渐不如以前。除了社会环境的影响以外，忽然有一瞬间，我惊讶地察觉当前这份工作的协作模式也正在破坏我的专注力。

一直以来，对于即时通讯软件而言，我的习惯是不开消息的气泡弹窗、并屏蔽所有不重点关注的群聊的消息提醒，不立即处理的事情先标记为未读或者置顶，以便于当下进行连贯的工作。

理论上，我可以主动地选择注意力在当前的工作上，或者转移到消息回复中；但实践下来，我总会每隔几分钟就突然不自觉地想起消息的事情，于是便需要检查一下通知栏里是否存在着未读消息的数字。尽管这可能只是眼睛瞟一眼图标的事情，但「忽然想起这件事」的这一行为频繁地打断着我的注意力，从而一定程度上破坏着我保持专注的能力。

我见过个别极端的人为了解决这样的问题，选择每天仅在指定的时间段统一处理消息；代价便是他人若有紧急事情时，总是需要直接电话才能联系上。我觉得这有些过于影响与其他同事的协作效率，并不能称之为是一个好的工作模式，起码并不符合我的习惯。

经过一番思索，我悲观地认为这个问题并没有很好的解决方案。但在认识到这样的问题后，我也得以更好地认识自己的专注力。在未来，我想有意识地做一些不同的尝试，看看能否在除了最激进的「放弃工作」这一方式以外，寻找将这种影响降得更低的方法。

学习上

01 · 降噪

虽然在《思考的消失》一文中，我反省了无意义信息流所造成的各种浮躁的问题；但即使是这样，在今年的很多时候，即便意识到了这个现象正在发生，我仍然难以直接从中打断，只是因为理解了问题的根源，我变得可以从中只获取放松的情绪、而不再产生空虚与焦虑。

或许，粗暴地、反人性地克制这类欲望并不是一个很好的降噪的办法。长文、长视频、播客都是比较好的减少浮躁、沉下心学习的媒介形态。用沉稳的长内容更多地代替零碎浮躁的短内容，继续奉行长期主义、培养获取心流的能力，值得接下来去有意识地尝试实践。

02 · 有序

在面对繁杂无序的内容信息流时，「稍后再看」是一个简单轻量却又十分巧妙的好功能。

当我在查找资料时看到感兴趣但无关的短内容，我可以将其先存到稍后再看中，而不影响手头上的事情；当我看到深度好内容、但并没有合适的环境条件时，加入稍后再看的列表里，我得以在时间宽松时可以消费到已经挑选好的高质量长内容。

「稍后再看」允许用户即使身处被算法推荐所裹挟的互联网大环境下，仍然保留能够自己决定何时阅读何种内容的权力。

03 · 坚持

从 2024 年 4 月份开始，我开始尝试使用多邻国 APP 学习日语。一方面期望减少长期以来在碎片时间里对无意义信息流的路径依赖；另外一方面，也期望树立一个长期的目标，通过一种长时间的坚持行为，去向自己佐证自己拥有能够坚持长期主义的能力。

于 2024.12.20

实践下来的结果嘛，先说日语学习本身，光靠每天几分钟的学习，其实有点难以形成系统性的知识体系，进步的速度越来越缓慢；而对于所谓的坚持长期主义的佐证，也总觉得好像并没有什么特别的感觉。

或许换个角度思考，这其实就是一种长期主义的体现：即便一天、一星期、一个月的坚持下来，相比过去也并没有明显的差异，但倘若相信最终目标的正确性，于是便不再在意短期的收益。

可能积少成多、终有成果，但这并不需要当下的我们来关心。我们所要关注的，其实只需要有「坚持」本身；我们所要做的，就是再多点耐心。

04 · AI

2024 年的 AI 工具显然已经足够成为协助工作的助手，而且它还在不断发展中。

虽然我并没有在其中投入多少精力捣鼓研究，但就是一些日常的使用上，免费的 Codeium 自动补全功能就非常实用；遇到比较独立的问题都基本可以找 Claude、ChatGPT 解决，在这些特定场景里极大地提升我的效率。

此外，Kimi 也多次帮助我处理家里处理一些事务，比如生成合同、阅读合同、解释不清楚的名词概念、简历整理等；至于诸如 Cursor 这类更加深入的 AI 编程工具，则仅仅做过试用而还没有实际融入到工作流中。

在编写本年记的过程中，DeepSeek R1 大模型再一次成为新年之际的热搜。简单体验下来，感叹该领域的发展速度仍然保持神速。其实只要将我日常写下的只言片语汇总起来丢入对话中，便可以得到一篇看似像模像样的年度总结，只不过这样就变成了 AI 的总结而非我的总结，这样的方式会大量削去文章存在的意义，所以我充其量可以参考分类组织文字的思路，而还不能允许 AI 去代替我进行文字的表达。

就 2024 年来看，仍然有很多人还并没有在日常中使用 AI 工具的习惯，没有墙的 DeepSeek 或许会成为他们入门的一个契机（~~虽然但是「服务器繁忙，请稍后再试」~~）。相信在未来这仍然是一片蓝海，专门挤出一些时间去捣鼓这些东西一定是值得的。

生活上

🇭🇰 即兴出行

5 月份经过一连串的加班顺利支持一个工作项目的上线后，我忽然来了兴致，不做周全计划便一个人前往香港办银行卡、逛街。那两天可能是整年的琐碎日常里最富有激情的日子，直到现在，我也仍然对当时的那份情绪感到怀念。

引申阅读：HK 即兴一日游

🫙 苏打水

自大学第一次接触苏打水后，我便喜欢上苏打水的清澈感。但一直以来，我对于苏打水并没有特别喜欢的牌子，主要是感觉口感还行的牌子，价格往往都并不便宜。

而今年在美团买东西的时候，偶然因为打折而购买了几瓶三麟苏打水，发现它的气非常足、味道不涩，口味很合适的同时价格还非常便宜（约 1.7 元 / 335 ML），于是马上买了一箱，实现苏打水自由 👍

并非广告（）

🖥 新电脑

因为放在家里给父母使用的电脑临时快要寿终正寝了，我赶忙做攻略，趁着双十一组了一台新的 ITX 机子给自己用，然后把自己的旧电脑退居二线回家继续服役。

新电脑的配置表一览：

类别	型号	来源	价格
机箱	Rider R2 5.0	淘宝	494
主板	技嘉 b650i 迷你雕	淘宝	2351
CPU	AMD R5 7500F	淘宝	包含在上面
显卡	技嘉 RTX4060Ti 风魔 OC v1 16g	淘宝	3201
内存条	科赋雷霆 DDR5 16g 6000Mhz *2	淘宝	632
硬盘	致态 TiPlus5000 2TB PCI-E3	利旧	647
散热	利民 SI100 BLACK	闲鱼	120
└─	利民 AM5 单塔扣具	淘宝	12
电源	驿晨宇玄武 650SFX	淘宝	352
└─	显卡电源转向头	淘宝	18
风扇	联力积木风扇四代 TL120 LCD 黑	淘宝	284
├─	联力积木风扇四代控制器	闲鱼	160
└─	FrostWind 8cm 风扇 *2 + 一分二线	淘宝	31

因为这套机子方案有一个带 LCD 屏幕的风扇，自然而然地就联想到前些日子刚看完的探讨互联网问题的实验性动画《Serial Experiments Lain》，接着就萌生了搭配 lain 的 BGM 剪一个装机踩点短视频的念头，以简单入门剪辑软件的使用。

不得不说的是，短视频的剪辑成本确实不高，花费时间最多的是在准备素材上，而到了剪辑阶段边剪边想很快就出成品了。

> 可前往小红书查看视频

😷 生病

自毕业以来，除了疫情那次以外，我几乎很少生病。但 24 年下半年却大大小小生了好几场病。

9 月，参加公司报销的免费体检，查出两处地方有小结节，说是小的话一般没什么事，希望下次体检就自己消失了。
还是 9 月，在体检之后不到一周就感冒了，合理怀疑是去医院时没做好防护于是就中招了。中秋回家三天都只能痛苦摊床上，好在吃了药后状态逐渐恢复，剩下长尾的咳痰问题在返回上班的两周里才慢慢康复。
11 月，忽然一天晚上扁桃体发炎，去药店刷医保开了盒口服液，喝下去的效果倒是好得很快，但是还是咳痰咳了两周。
12 月，晚上一时嘴馋点了份手抓饼，结果当晚吃坏肚子。第二天尝试了下美团线上问诊的功能，很方便地开了些对症的药吃，加之症状不是很严重，两天就恢复了正常。

在意识到身体恢复能力不比以前的瞬间，便同时也将意识到自己不再年轻。曾经习以为常的健健康康，如今已不再是理所当然。

或许未来将会越来越需要投入更多的精力在维护健康的这样一件事情上。想到这里，便情不自禁地想要由衷感恩当下每一个拥有健康的日子。（🙏）

🏠 租房

对于我这种深度宅家的人而言，如果在电脑桌前坐上一天，便总会觉得身体进入一种「因为过度休息而反而产生乏力」的状态。而站立是一个很好缓解该问题的方式，但这样就没有办法再继续使用电脑。

因为彼时已经初步放下了对职业规划的纠结，并且刚续约了租房合同，我想着短时间内应该不会有搬家的变动，于是我在 8 月份购入了自租房以来就一直想要的升降桌，体验下来完美符合我的需求。

不过没想到的是，仅过了几个月，便因为工作转岗的原因，我需要打包整理房间的所有东西前往广州。

元旦连着请了假，搭乘公交前往广州寻找合适的租房。因为人生地不熟，所以我将范围缩小在上班地点的附近，这样选择更具目的性，还可以走路上下班。

然而，因为上班地点正处广州市中心地带，周围的租房价格并不比深圳南山便宜，三天看来看去，都没有看到满意的房子。最后一咬牙，抬高了自己的预算，先租下了一套单间公寓。

在这段广州看房的过程中，一个人在陌生的城市里四处奔波，恍惚间我体验到了近似于流浪的感觉——没有固定住处、没有明确的目的地、不准时的三餐，每晚还要想着明天的事情入睡。这番不太顺利的体验让我的心情有些低落，但反过来想，这也确实是一份宝贵的人生新体验。

娱乐上

📺 动画

2024 年看了 24 部当季新番、2 部剧场版、3 部老番，总体而言看得比 2023 年要少了不少。原因一方面可能是今年并没有那么多特别值得一看的作品，更主要的还是因为有大半年的时间都陷在职业规划的焦虑之中，缺乏沉下心观看内容的心情。

这一年的新番里并没有我特别钟爱的作品能够为其大书特书，如果对此部分仍然感兴趣，可以查看我的 bangumi 2024 收藏。

🎮 游戏

出于对每日打卡式的二游（二次元游戏）游玩模式日益增长的怀疑，在 2024 年我改变了对二游的游玩习惯，实践「想玩多少就玩多少」的策略，主动拒绝每日打卡而产生的焦虑。尝试总体比较顺利，很好地减少为了上线清每日任务而在没空时也得挤时间出来的问题，从而避免了许多不必要的负担。

当然相对的，2024 年我消费在游戏上的时间可能也是历年以来最少的，这可能会继续加重我「电子阳痿」的病情（😭）

来年如果有时间的话，我希望能去专门游玩一款单机游戏，尝试寻找小时候那般对游戏娱乐的纯粹体验。

🎸 音乐

如果选一个今年听得最多的一种曲风，那么我想肯定会是盯鞋摇滚（shoegaze）。

正好这两年，许多日本乐队都纷纷来中国巡回演出。只因为一次偶然在网易云音乐的演出列表里，我发现有我所听过的两个乐队的拼盘演出，于是在 11 月 30 号的深圳福田 BO LIVE，我独自去听了我人生中第一场乐队 Livehouse 演出——くだらない 1 日 & downt 联合巡演。

或许是因为我平时习惯于时刻审视自身的缘故，而且是第一次参与，这让我在当时有些难以忘我地投入其中，甚至产生出一定的解离感。身处巨大轰鸣的音墙其中的，是有些梦幻而有点不真实的情感体验。

对此，虽然短期来看，我无法解决因为过度习惯内省而附带的各种问题，但意识到这点的我也在尝试克服着这些问题，一点点表达自己内心中真实的情绪。在这天晚上过去，我仍然会多次回想起当时那份属于自己的情感体验，这让我已经感到十分满足。

事后当然也耳鸣了好几天（参加 Livehouse 要注意保护听力呀）

✂️ 手工

自从走出校园以来，做手工的次数就断崖式地减少了。

我曾经把原因归结为两点：

先前有不少手工的出发点都是对已有商品的平替，比如笔记本支架、挂灯、挂钩等。随着进入社会具备赚钱的能力后，直接花钱购买现成的商品要比粗糙的手工制品要更简单耐用。
虽然手工本身具备乐趣和意义，手工所需要的创意、时间、精力在走出社会后都变成了有限的宝贵资源，人总是很难在上满一天班后仍然对生活充满热情。

而或许是忽然怀念起这份感觉来，某天晚上我心血来潮，想要试着把很久没做的手工捡一捡。于是在陆陆续续花了一个星期的每个晚上后，我完成了一只凌波丽的不织布人偶挂件。

其实我原本想通过这一行为，证明自己还对手工这个爱好抱有热情；但在完成之后，我清楚的意识到自己当下的情绪，代表着我将会不知道需要再隔上多久，才会去做已经备好材料的下一只。即使在这次制作过程中，心流状态所带来的平静感曾令我感到惬意。

我悲观地想：或许我再也回不到从前那般热爱这些我曾经所喜欢的爱好了。

但我又总莫名冒出另一份乐观的念头：终有一天我还能够自由地重新捡起我所珍视的爱好，即使这需要许多年以后。

尾

值得庆幸的是，时至今日，我觉得自己仍然处于一种时刻学习的状态。除了对于传统意义上知识的摄取、对于社会规则的认知以外，不论是面对没见过的新事物、还是曾经见过的旧事物，我依然都能从中得出许多新的感悟，不断印证着原本并不直接关联的知识，并融入自己的思维体系中去，这让我感到满足。

今年的年记形式按着去年的想法调整了一下，试着把一年下来所有想的和做的事情都大致梳理了一遍，结果内容量比起前几年要多上太多，即便拖到 2025 年的春节结束都没能写完。

以及，内容量更大的同时也更琐碎了。对我自己而言，这样或许更能称得上是一篇年记，但我也在尽可能的平衡内容的观感，使每一小块内容都看起来言之有物。

原本在规划中，还有一块「心理上」的章节，用于总结在 2024 年里我在心理上的一些思考与转变。

我想从「欲望的死亡」这一现象开始，聊聊我当下对「乐观」与「悲观」的看法，以及「我们为什么不应该追求快乐」。

可惜，我在文字的表达与编排上遇到了一些瓶颈，为了避免本篇年记拖得太晚，只好去除这个小节。如果后面还有机会，可能会另外以一篇单独的博客发布。

而对于未来，可以预见因为工作上的变动，2025 年肯定是少不了新的人事物。事到如今，我也不再幻想能有更多可以自由支配的时间，但愿 2025 年能继续健康地活着，重新构建起新的秩序。

今年有一天看到了一句「毒鸡汤」，让我看得不由自主地说了声卧槽。虽然它的表述看起来有点悲观，但真的在许多方面缓解了我当时的焦虑。原句是如何表述的我已经忘记了，这里我尝试用自己的话来复述一遍：

我们一直不断幻想着美好的事情、但却从没踏出的真正去做的那一步，起码让我们还能持续保有「幻想最终能得到美好」的能力。

如果你已经踏出了那一步，那很好，不论结果是好是坏，新的事情都正在发生。

如果还未曾启行，那也不差，未来继续抱着这个美好的盼头，我们先过好当下的每一天。

Web 前端 AI 抠图应用实践

Thu, 04 Jul 2024 00:00:00 GMT

Web 前端 AI 抠图应用实践

信息时代下，图像抠图技术已经成为了一种不可或缺的技术，被广泛应用于视频直播、电商产品宣传、平面设计、背景替换等场景中。它通过将图像中的前景目标与背景软分割，实现了前景目标图像的独立提取，同时保留边缘的透明度。

传统的抠图方法通常依赖于 PS 等图像处理软件，需要人工手动进行前景目标的抠取。人工抠图可以得到高质量的结果，但也需要花费相对应的精力。面对需要大量抠图的任务场景，人工抠图的成本变得不可忽略，所以抠图自动化具有很高的应用价值。

在计算机领域，图像抠图（Image matting）是一项基本的计算机视觉问题。通过计算机计算实现的智能抠图应用，让我们仅需输入图像，算法就能自动完成前景目标的抠取。与图像分割（Image segmentation）不同的是，图像分割本质上是一种分类任务，其结果像素点透明度只能取值 0 或 1，其分割边缘为硬边缘；而图像抠图则可看为是一种回归任务，其结果是某像素点为前景的 alpha 权重概率，所以抠图结果的边缘过渡较为自然，对于毛发等边缘的细节上的保留效果要好很多。

Web 前端 AI 图像分割：Segment Anything | Meta AI

Web 前端 AI 图像抠图：Xenova/remove-background-web

随着这些年的发展，基于深度学习的图像抠图算法准确性和效率大大提升，逐渐从传统抠图算法中脱颖而出，成为抠图应用的主流技术。

图像抠图算法简介

本文的重心在于抠图算法的实际应用，这部分仅作背景简单了解

目前流行的图像抠图算法大概可以分为两种：一种是基于先验信息的方法，另一种是无需先验信息的方法。

基于先验信息的方法

在图像抠图领域中，常见的先验信息可以是 Trimap（三元图，一种将图像分为前景、背景和未知区域的标注信息）、无人的背景图像、人物姿势信息、视频临近帧等。基于先验信息的模型网络使用先验信息与图片信息共同预测 alpha。2017 年由 Adobe 提出的 Deep Image Matting 模型，就是基于 Trimap 的首个将深度学习应用于图像抠图任务的算法，在当时取得了 State-of-the-Art 的水平。

Deep Image Matting 使用了经典的 Encoder-Decoder 结构作为基本框架：预训练的 VGG-16 网络作为 Encoder 部分，对输入图像进行特征提取；Decoder 部分由多个反卷积层和 ReLU 激活函数组成，这些层用于逐步将编码后的特征图恢复到原始图像的分辨率，得到较为粗略的前景蒙版（Alpha matte）。最后 Deep Image Matting 还使用了一个小型的卷积网络，用来提升前景蒙版的精度与边缘表现。

无需先验信息的方法

另一种无需先验信息的抠图算法，网络仅根据图片本身信息对 alpha 进行预测。虽然效果往往不如第一种，但因为对于实际应用更加友好，所以是目前比较主流的研究方向。

MODNet 是香港城市大学与商汤科技于 2020 年发表的无需绿幕的实时人像抠图网络。它很好的在不使用 trimap 的情况下获得了较高的精度，同时保证了实时性，能够应用于实时视频抠图。

MODNet 作者认为神经网络更佳适合学习单一任务，所以他将模型的学习训练分为三个部分：

语义估计（Semantic Estimation）：使用轻量级的 MobileNetV2 作为骨干网络，提取高层语义
细节预测（Detail Prediction）：结合了输入图像信息和语义分支的中间特征，对人像边缘进行单独地约束学习
语义细节融合（Semantic-Detail Fusion）：把语义输出和细节输出结果拼起来后得到最终的 alpha 结果

MODNet 设计的轻量级网络结构大大减少了抠图计算量，降低了抠图模型的使用门槛同时保留了较高的抠图精度，具有较高的实用性。

开发应用实践

尽管 AI 算法研究本身具有一定的门槛，但我们想要开发相应的应用则并不困难，因为网络上有着许多现成的预训练模型，也有现成的 SaaS 服务可供直接使用，在这些已有的能力上去做延伸，我们得以低门槛地创建简单的应用。

部署端对比

虽然使用 AI 技术自动抠图在业界的实际应用已经比较普遍，但是大部分的应用服务都是将模型部署于 GPU 服务器上，基于云 API 对内或对外提供服务。考虑到如果希望在内部场景提供相关的抠图能力，则属于低频功能，单独部署一台服务器将导致其绝大部分时间都处于空置浪费状态。

随着 AI 技术的进步以及用户设备性能的提升，此类 AI 抠图应用已经可以实现在前端内部进行闭环，使用纯前端技术来实现，在较低的性能需求的情况下可以得到相对较好的抠图结果，同时无需额外的 GPU 服务器开销或使用第三方云 API 的费用开销。

类别	优点	缺点
前端	前端内部闭环，处理图片时无前后端通信与传输开销；AI 端侧部署是未来主流的发展趋势之一，充分利用性能越来越好的用户设备	首次使用需要加载模型文件；性能受限于用户设备，不宜使用过于复杂的大模型
后台	性能无瓶颈，可以使用复杂模型	需要有日常的服务器租用开销，服务器性能与费用之间需要进行取舍
司内/司外现成云 API	已经提供好基础能力可直接使用	受限于第三方，不够灵活，不一定会持续维护更新；司外接口涉及隐私问题；每次使用都会产生费用

接下来我们都以前端部署 AI 应用为背景进行讨论。

开源方案

简单搜罗了网络上开源的抠图相关方案，做了一些简单的试用对比，得到对比表格如下：

名称	优点	缺点	门槛	采用
MODNet	模型体积小（25.9MB）、推理速度快、效果总体良好、有封装好的预训练模型	边缘比较软，会带一点背景色，需要看情况另外优化	低	✅
RMBG-1.4	效果总体良好、边缘清晰，不仅限于人像抠图、有封装好的预训练模型	模型体积大（176MB）	低	✅
modern-rembg	兼容 rembg 的前端版本，支持多种现成预训练模型（u2net、isnet-anime等），可选项多	各个模型各有优劣，不够通用	中	⭕️
tfjs-models/body-segmentation	模型体积小（20MB以内）	仅提供了最基础的底层能力，需要自己封装并大量优化，否则效果不佳	高	⭕️
RobustVideoMatting	（未试用）	特供于 Web 实时渲染的预训练模型精度很低，需要拿其他的模型进行转换；仅提供了基础底层能力，需要自己封装优化	高	⭕️
imgly/background-removal-js	功能完善，开箱即用；不仅限于人像抠图	模型体积大，推理速度很慢，抠图效果一般	低	❌

transformers.js 是一个和深度学习相关的 JavaScript 库，基于 onnxruntime-web 的能力在浏览器上运行模型。该库提供了简洁的 API 和丰富的预训练模型，使前端开发者能够轻松地在浏览器中直接使用和运行预训练好的深度学习模型。

综合开发成本以及时间考虑，我们选择使用能够支持 transformers.js 的 MODNet 和 RMBG-1.4 两个抠图模型进行简单的实践。

使用 WebGPU 加速模型推理

我们都知道跑在浏览器的 JS 代码，在性能方面客观上难以和由静态语言编写、直接运行在系统进程里的程序相媲美。特别是在 GPU 的使用上，浏览器在过去通常只能通过 WebGL 实现。因为 WebGL 主要设计用于渲染图形而非通用计算，且性能上受到了硬件以及浏览器的限制，所以并不擅长计算密集型的深度学习任务。

好在，2023 年 5 月份 Chrome 在 113 版本中正式发布了 WebGPU API，使得我们能够在浏览器中使用更简洁易用的 API、更强的计算能力去执行图形和计算任务。

现在（2024 年）WebGPU 还是属于一项实验性技术，只在最新的部分现代浏览器上有支持。但好在 PC 端的现代浏览器都会自动更新到最新版本，所以普及率的问题比移动端要好。

transformers.js 目前也正在适配 WebGPU，预计在 V3 版本中正式发布对 WebGPU 的支持。从这里可以看到 WebGPU 与 WASM 的实时性能对比。下图是用 MacBook Pro Apple M1 Pro 笔记本对于文本嵌入（Text embedding）任务跑出的结果，大概是 10.26x 的性能差距。

transformers.js 的 maintainer 也给出了一个 WebGPU 版本的前端 AI 抠图 Demo，可以从这里访问体验：Xenova/remove-background-webgpu

由于 V3 版本还没有预计正式 release 的时间点，目前想要通过 transformers.js 使用 WebGPU 能力尝鲜的话，~~需要直接从 github 源安装 v3 分支成依赖使用。~~（2024.08 更新：作者新增了@huggingface/transformers 包发布预览版，可以直接安装 @huggingface/transformers，不再需要处理从 github 下载依赖的未编译问题）

# npm install xenova/transformers.js#v3
npm install @huggingface/transformers

使用时，需要指定 device 为 'webgpu'，且 dtype 只支持 'fp32' 和 'fp16'（精度不同）。

import { AutoModel, AutoProcessor } from '@xenova/transformers';

// Load model and processor
const [model, processor] = await Promise.all([
  AutoModel.from_pretrained('Xenova/modnet', {
    device: 'webgpu',
    dtype: 'fp32', // or 'fp16'
  }),
  AutoProcessor.from_pretrained('Xenova/modnet'),
]);

如果需要兼容不支持 WebGPU 的浏览器，可以通过判断 navigator.gpu 是否存在进行区分。目前，在 TypeScript 项目中引用 navigator.gpu，需要引入 @webgpu/types 补充类型定义。

抠图 DEMO 实现与效果一览

这里简单写一个抠图 DEMO 获取输入图片的前景图像的 ImageData 对象，就能看出 transformers.js API 在使用上的方便程度：

import { AutoModel, AutoProcessor, RawImage } from '@xenova/transformers';

// Load model and processor
const [model, processor] = await Promise.all([
  AutoModel.from_pretrained('Xenova/modnet', {
    device: 'webgpu',
    dtype: 'fp32',
  }),
  AutoProcessor.from_pretrained('Xenova/modnet'),
]);

function demo(url: string) {
  // Load image from URL
  const image = await RawImage.fromURL(url);

  // Pre-process image
  const { pixel_values } = await processor(image);

  // Predict alpha matte
  const { output } = await model({ input: pixel_values });

  // Get output mask
  const mask = await RawImage.fromTensor(output[0].mul(255).to('uint8')).resize(image.width, image.height);

  // Composite the original image with the alpha matte
  const { width, height, data } = image.rgba();
  const imageData = new ImageData(new Uint8ClampedArray(data), width, height);
  for (let i = 0; i < width * height; i++) {
    const alpha = mask.data[i];
    imageData.data[i * 4 + 3] = alpha;
  }

  return imageData;
}

分别使用 MODNet 和 RMBG-1.4 两个模型进行测试，得到的输出结果对比如下：

输入图像（1024x683）	MODNet 抠图结果（耗时 295ms）	RMBG-1.4 抠图结果（645ms）

输入图像（1098x1098）	MODNet 抠图结果（耗时 327ms）	RMBG-1.4 抠图结果（652ms）

抠图结果放在透明白色底背景对比不明显，需要放在深色背景下对比

注意模型推理的耗时状况，可见在 WebGPU 的加持下，在 Web 端侧运行 AI 抠图模型是完全可行的。

与业务相结合

业务背景

在我司的道具打赏业务中，展示打赏爆灯特效需要使用到从媒资库拉取的明星头像图片，而从媒资库拉取的明星头像通常带有相对复杂的人物背景，不一定有纯人物的透明背景人像素材，不适合直接用于爆灯特效场景。

以往的常规做法是：由运营同学再找设计同学协助，针对这些非透明背景的明星头像重新抠图，使用新图干预配置结果，这导致设计和运营同学的工作量大大增加。尤其在跨年直播、星光大赏这种明星人数非常多的情况下，手动抠图并配置的工作量大、流程繁琐，出错的概率较高。

另外，手动抠图的质量也不总是十分完美的。如果为了追求效率或者要求标准不高，手动抠图的质量也会参差不齐。

所以我们希望应用 AI 技术实现人像一键抠图去除背景，减轻设计工作量，提升运营配置效率。在将这些技术应用到具体业务的过程中，我们也能与现有业务进行有机的结合，以更直接和贴切的方式解决业务的实际痛点。

项目设计

为了后续能够将同一套抠图能力尽可能简单地复用到多个场景的业务中去，我们将核心的抠图能力封装为一个基础 SDK，隐藏不同模型在使用上的差异，对外提供简易的 API：

// Create remover
const remover = createBackgroundRemoval('rmbg'); // or 'modnet'

// Model initialization load
await remover.load();

// Execute matting task
const result = await remover.run({
  input: image,
  output: {
    type: 'data-url',
  },
} satisfies RemovalOptions); // result is base64 image data URL

// Options definition
interface RemovalOptions {
  input: HTMLImageElement | ImageData | RawImage | Blob | URL | DataURL | string;
  output?: {
    type?: 'blob' | 'data-url' | 'image-data';
  };
}

为了实现更多拓展性的功能，我们在此基础 SDK 上，二次封装了一个带有弹窗 UI 组件的 SDK，提供通用的交互界面与常用的调整项，支持抠图结果预览、切换模型、微调参数、批量抠图等功能。

设计稿初稿参考：

使用示例：

removeBackground({
  input: pic, // pic 支持数组类型或者单个元素传入
  onConfirm: (value) => {
    console.debug('onConfirm', value); // 当 pic 为数组时，value也为数组；反之亦然
  },
});

参数的类型定义：

type ImageSource = HTMLImageElement | ImageData | RawImage | Blob | URL | DataURL | string;

interface PopupParams {
  /** 输入图像 */
  input?: ImageSource | ImageSource[];
  /** 输出图像的配置 */
  output?: {
    /** 输出图像类型 */
    type?: 'blob' | 'data-url' | 'image-data';
  };
  /** 抠图模型类型（默认 rmbg） */
  model?: 'rmbg' | 'modnet';
  /** 额外功能选项 */
  options?: {
    /** 上传图片的数量限制（不启用上传/单张/多张） */
    uploadType?: 'disabled' | 'single' | 'multiple';
    /** 是否支持用户手动选择抠图模型 */
    modelSelectable?: boolean;
  };
  /** 抠图完毕返回结果时回调 */
  onConfirm: (value: ResultType | ResultType[]) => void; // ResultType 取决于 output.type
  /** 失败回调 */
  onError?: (error: unknown) => void;
  /** 取消抠图关闭弹窗时的回调 */
  onCancel?: () => void;
  /** 弹窗关闭时的回调 */
  onClose?: () => void;
}

HK 即兴一日游

Thu, 20 Jun 2024 00:00:00 GMT

HK 即兴一日游

临时的想法

经过连续一个多月的高强度加班赶项目上线后，终于得以有时间稍微休息一下，于是请了两天工作日的假，准备处理先前一直搁置的事情。而在休息的过程中，我忽然想起办香港银行卡的事来。

原本先前是想着等「工作上的事情」尘埃落定了再去着手处理，但因为这个「工作上的事情」进度推进得实在太慢，导致我不得不开始重新思考事情的优先级。办卡作为一个「重要不紧急」的事情，虽然我当下还没有强需求，但是最近和同事聊天，提到「银行卡之类的并不是一办下来就让你随便用的，容易触发风控，最好先保持较长时间的正常使用」，于是我觉得还是得尽快找个时间搞下。

一开始想到这回事，就觉得正好可以趁着工作日人少，直接去把卡给办了。但是在研究攻略的过程中，发现得准备港币现钞、预约银行办卡业务、打印地址证明等等。研究到了这里已经是大晚上了，显然如果想要准备齐全，肯定是没法趁这次休假的工作日去办卡了。

但一想到这件事还要继续挂在心里半个月，又觉得实在是有些膈应。而且如果能趁这次机会直接办好，回来还有两天周末可以休息，可以说是非常舒服的安排了。

特种兵，出列！

于是我继续研究攻略到凌晨两点多，得出了这样一套结论：

港币不预约银行网点线下取钞了，可以去到香港后直接在香港的 ATM 刷国内银联卡取现（用招行卡取现手续费为 5‰，最低 10 元）。
只要去得够早，就算没有提前预约，有些分行也允许直接「walk-in」现场取号排队办理（最好是提前在银行 9 点上班之前到，否则要排很久）。
虽说正常情况下各种证明都需要纸质打印，但因为我是第二天清晨出发，自然没有地方能够打印。只能赌柜员能接受电子证明，或者运气更好，不需要证明。

以前，我的出行都会提前做好详细的规划，尽量避免预料之外的风险。但这样高成本的准备也导致做一件事情从规划到完成需要经过很长的时间。于是这次我告诉自己，偶尔也该尝试放下过多的顾虑，直接开始去做，而不是长久停留在计划中。如果一件事的最坏情况都在可以接受的范围内，那就没有什么好担心的了。

想到这里，即便我还没完全定好要去哪间分行办理、坐什么交通工具、哪些细节需要注意、办完后应该去哪里逛，也觉得这卡确实今天非办不可了。

根据早上八点半抵达香港的时间倒推，得到我应该六点半起床的时间安排。看了眼只剩下三个小时的特种兵睡眠时长，于是我便不敢再多花时间继续研究攻略了，简单收拾之后就很快上床睡觉。

闪击香港，办卡！

虽然深圳湾口岸离我住的地方更近，但在睡前确定起床时间时，发现深圳已有通往香港的高铁线路，仅需 14 分钟便可从福田抵达西九龙，且工作日早晨的座位充足无需抢票，于是便欣然确定选择到西九龙附近进行办理。

这次我想办的有三家：中银香港、汇丰、ZA BANK（众安）。

中银香港支持与境内中行卡 0 手续费互转，出入金比较方便实惠；
汇丰 One 门槛要求低，基本上能到香港的就能办理；
ZA BANK 作为虚拟银行，支持直接线上申请，可以在香港赶路等待的过程中顺手就在手机上办好，作为补充备用，顺便薅点羊毛。

对于一般人，这样的配置应当就足够应对绝大部分需求了。

考虑到直接再西九龙高铁站附近的分行办理肯定会有很多人，所以我随便上了一条港铁。然后查到两站外的「奧運」站附近就有中银香港和汇丰的分行，又匆忙在该站下车。

不过因为太久没来香港，而谷歌地图的方向定位又差劲（经常不显示用户的面朝方向），在找路上来回兜圈子花费了不少时间。待到 9 点 20 分赶到一家在商场里的中银香港分行取号时，已经要排队等七八个号了。

取号前，大堂经理会先简单询问开户目的、确认相关证件是否准备齐全，然后让你先扫个二维码填写一些信息。填完后在商场内部转悠了半个多小时，见排队进度几乎不变，于是决定折返回港铁附近的汇丰银行取号。

汇丰的排队人数相对就少上一些，不过也等了近 40 分钟才轮到我。仅需身份证、港澳通行证、通关小票，礼貌的柜员小哥一通丝滑的操作，借记卡直接当场给到，而信用卡则需要晚些审核通过（卡内入金一万港币以上）后邮寄，便愉快地完成办理。

拿到卡后，这次办卡之旅就有了保底。不过赶回中银却发现自己已经过号 10 个号了，无奈只能重新取号。

在等待的过程中，我发现每个人办理的花费时间虽然不定，但基本都很长，所以可能排队号 1 个小时都不带变；但是一旦有办理完的就会开始很快地轮过叫下一号，这就导致如果号排前面的人不在现场，就很容易一波轮过去好多个号，也就没法通过当前的排队人数很好地估计啥时候能够轮到自己。

大堂经理也是一位很有心的阿叔，记得我取的号码，看到我反复路过银行门口查看一直没变的排号，就推荐我先去解决午餐。

香港现在实行限塑令导致麦当劳也不提供一次性手套，大家都直接上手拿着汉堡吃

饭后一边继续逛商场、一边偶尔回来瞄一眼叫号进度。逛到一家「千葉玩具屋」（后面发现是连锁店），挑了两个惠惠的谷子（Goods，即周边），基本是按原价 1.5 倍以上在卖，不过当作小纪念品的话就倒还可以接受了（-78 HKD）。

等待排号的过程中也是顺便完成了 ZA BANK 的开卡申请，并规划接下来的逛街路线，所以时间基本也很充实，没有太多浪费。

值得一提的是，ZA BANK 需要扫描港澳通行证背面的签注信息（带二维码），而我签的那个自助签证机印刷不太好，出来的内容有些错位，上传直接没识别成功，还好再我多传了两遍后也给通过了。

PS: ZA BANK 办卡最近一直都有返现活动，注册时如果没有其他邀请码，可以填我的邀请码「GCGDA9」

中银香港的卡办起来要比汇丰麻烦一点，柜员上来就会问开卡目的，这里不能说错话，否则容易被拒。声明是投资的话，需要出示对应的股票投资记录，我给看了富途 APP 里的持股信息，柜员还会要求让你证明这个号的实名信息是你的（我是在 APP 的客服中心里找到开户资料的入口，柜员认可了）。

而关于地址证明的问题，因为我填的是身份证上的地址，柜员专门说明了一下这种情况他们会以身份证作为地址证明，这样就不需要再提供额外的地址证明了（信用卡账单/水电费账单之类）。

然后就是较长时间的资料填写过程，最终也是顺利通过，卡后续以平邮的方式寄到上面所填写的地址。平邮没法查邮寄进度，上面也没写联系电话，只会送到地址对应的邮箱中，所以也有可能会丢失。如果迟迟没有收到，就得联系客服重新改寄挂号信了（后记：我大概是 20 天后成功收到信封）。

打卡式扫街，但是阿宅版本

走出银行时，已经下午三点了。

来都来了，正好查到旺角这一块有不少动漫爱好相关的店铺，于是决定顺着弥敦道一路北上，开始扫街之旅。

我参考的是随便刷到的小红书攻略，最终按照「現時点 - 信和中心 - T.O.P Shopping Mall - MOKO - Moviemarks - 玩具模型倉」的顺序，一直逛到手机电量告急才作罢。

現時点的感觉类似于深圳的东门动漫城，比较挤比较杂，有很多小店铺贩卖各种周边（手办居多），在过道边上的格子柜看着应该有好价的中古手办可以淘一淘。

当时人太多了不好意思拍照，借张网图吧 😢

信和中心我只逛了 B1 层，除了亚文化爱好周边以外，有很多最新的 CD 专辑、画集、~~大尺度写真集~~可以买到，就是画集卖的确实是贵（翻倍卖）。总体而言还挺推荐逛的，而且我还错过了第二层，应该会有挺多漫画店。下次路过的话我还想再去看看。

T.O.P 则是个很多层的小商场，聚集了各种年轻人喜欢的亚文化爱好店，而且明显感觉到来逛的女生比前面去的那几个点要多。

T.O.P 的次顶层有 BANDAI 的扭蛋店（价格翻倍卖），还有家「らしんばん」（罗针盘）。在扭蛋店里绕了两圈，看到有物语的机子，手痒扭了一发，结果正好抽到了最想要的小忍！

尽管是用 30 HKD 换个「时尚小垃圾」，但那一刻也会忍不住地开心。（笑）

在罗针盘可以淘一淘中古谷子，店的规模不是很大，虽然价格肯定比不了日本，但胜在比去日本方便。偶然发现在一处角落有两框同人本，兴冲冲地翻找起来，结果除了表面的两本以外其他都是女性向，~~而且没有 R18 本，~~失望地走出店铺。

因为出发前一天只睡了三个小时，一天逛下来已经开始有点低血糖了，于是在 T.O.P 商场的负一层简单吃了顿咖喱饭（-60 HKD）。

饭后，继续前往 MOKO。MOKO 则是一个比较常规的商场了，有几间二次元相关的店铺，不过收获不大（可能是我没怎么逛到）。这里也有一家罗针盘，但平均价格比前一家还要贵，不太推荐专门跑过来逛。

题外话，走出 MOKO 商场负一层进入到地下通道的一瞬间，让我幻视「化物语」里姬丝秀忒的一个场景镜头

本来还想出发逛一逛深水埗，但到了这里充电宝已经没电了，为了避免失联，于是准备行程告一段落，坐巴士返回深圳湾口岸。不过在前往巴士站点的过程中意外发现会路过 Moviemarks，便决定来都来了就顺路逛逛吧。

Moviemarks 是开在路边的一家店铺，里面有着非常全的电影海报收集，在这里可以买到各种有在香港上映的电影所对应的宣传海报，还有一些电影特典、周边之类，对于电影收藏爱好者而言可以算是宝藏店铺了。店里也有一块日本动画电影作品相关的区域，光是坐在店里随便翻翻集册、感受店铺的装潢氛围，就感觉挺治愈的。

离开 Moviemarks，走到站点附近，意外发现站点处就在之前在攻略看到过的「玩具模型倉」店铺门口。虽然我目前还没有入模型坑，对其不太了解，但离巴士到站还有一点时间，于是简单进去逛了逛。

店内的货架摆满了各种拼装模型盒子，还贩卖各种拼装制作模型所需的工具（喷笔、油漆、钳子之类），以及搭了一些好卖的景品。听说这里的促销商品价格比在网上买还便宜，倘若是一名模型爱好者，想必是值得一逛的。

没拍照片，引用个官方 SNS 贴过的照片：

坐上 58X 巴士，手机的电量已经不支持我再继续使用了，只好先关机，因此也差点坐过站。幸运的是，在屯门换乘的前往深圳湾口岸的 B3X 巴士每个座位都有 USB 充电接口，成功续上了 7% 的电量，顺利支撑到过关打车回家。

旅后感

对于住在深圳的人来说，显然，去香港办卡也不是什么很麻烦的事。做记录可以，「上价值」就感觉好像有点稍显夸张。但对我而言，它确实完全跳出了我休假前的计划，给「事事都被规划的日常」带来了超出这点小事本身的新鲜体验。

我想我总是热衷于得到各种新鲜的体验，而这也正是驱使着我在前一天凌晨忽然决定不做预约与详细规划就匆忙前往香港的重要理由之一。开卡这件事当然并不着急，但因为平日看到那些更随性、不怕生的人，用自己的方式热爱着自己的生活、充满激情，所以我也想简单尝试一下，仅此而已。

乘上与平时相反的电车，为了去看未曾见过的风景——《比宇宙更远的地方》

在最近的一些日子里，我花了不少精力告诉自己应该追求内心的平静、而不是追求快乐本身，避免陷入过度享乐的空虚之中。而现在看来，除了维持内心的平静以外，还应该持续保有产生「激情」的可能性。

激情是生命力量的源泉，当内心对于正要去做的事情充满足够的激情，就会神奇地发觉平时所抵触的那些麻烦事，也可以持续保持以正向的情绪去完成。

后注

开卡流程等相关信息具有时效性，请留意本文的发布时间。有相关计划建议再自行补充查阅更多攻略信息。

「思考」的消失

Sat, 17 Feb 2024 00:00:00 GMT

「思考」的消失

在过去的一年中，有东西显然需要检讨：虽然我不刷短视频 APP，但是感觉今年我对于 b 站的视频推荐流刷得明显有些过于多了。

萌宠剪辑、车祸集锦、搞笑整活、全屋清洁……美其名曰「放空大脑，治愈放松」，但越刷越上瘾，越刷越不满足；社会新闻、奇人奇事、两分钟科普……好像获得了什么新鲜的信息，但转头很快就忘干净了。

因为「下班」这一行为而产生的疲惫感，经常让我索性躺在床上刷上半小时一小时的视频，最终养成了没事就没有目的地刷推荐流打发时间的习惯，与短视频殊途同归。

需要肯定的是，b 站仍然是具有许多高质量内容的视频平台，但确实越来越多空有画面信息、没有任何值得思考的内容，已悄然侵入了我的视频推荐流中，而我在很长一段时间里沉迷其中并不自知，只是在近些时候的某些瞬间，才愈发地开始注意到这个现象以及背后所隐含的问题。

在尼尔•波兹曼的《娱乐至死》一书中，有段内容大意如下：

古时，人们只能通过书籍报纸等媒介有限地传播信息，其传播速度无法超过人类交通工具的速度。而自电报被发明之后，媒介开始具备能够将某条信息迅速触达到任意的人的能力，于是信息便开始严重过剩了。

大量有趣、新奇且无用的信息吸引着人们，人们可以知道很多事情，而无需进行理解。

而电视这类能够同时传递图像、声音的媒介不同于印刷文字的书籍，更是可以做到不需要用户做任何的思考即可从其中获取信息，天然地适合被用来传递娱乐化的内容。

它们的出现导致娱乐化的过度泛滥，严肃深刻的信息被严重排挤，淹没在娱乐之中。新一代的电子媒介正用自己的意识形态改变着人们的思想，弱化人们的思考能力。

这些观点在当下的互联网时代下同样有着警示意义。

很多信息在客观上看似具有一定的价值——了解社会正在发生的热点、学习到生僻的冷知识，或者就是能够单纯的放松。但似乎不得不承认：其中大部分的视频内容甚至在我们看的过程中，就已经开始被逐渐遗忘了。因为我们只用看、不用思考，所以什么也没有留下。

如果能真的通过这类碎片化的娱乐得到片刻放松，那倒也还好，但如果没有清醒地意识到这种现象的存在，不对明显过度的娱乐加以控制，就往往只是消耗了时间和精力，却越刷越空虚。

这其实是比较可怕的：有时我正在看真正具有价值的长视频内容，自觉看似有在认真跟着视频的思维走，但倘若看完后再询问自己视频讲了什么内容，会明显感觉到关于内容的记忆非常零碎模糊、没有条理可言。只有主动去思考总结时，大脑才开始真正地在从内容中提取出有价值的信息，将其内化到自己现有的知识体系中去。

好在互联网不完全是电视的延伸：我们拥有选择内容的权利，可以一定程度上主动拒绝过度娱乐化的信息流，自主选择想要学习的内容；我们可以像阅读书籍一样反复观看图文或者视频、并适时停下来思考，而不是只能被连续不间断的直播视频音画所裹挟，沦为过量信息的「临时寄存器」，失去严肃思考和理智判断的能力。

有些优秀的长知识内容的创作者、分享者也会适时小结每个篇章的内容，这也正是在主动帮助观众及时对于前面的内容进行思考与总结。我们应该有意识地认识到这一点，与他们达成一种无需言说的默契。

到头来，其实还是强调「保持思考」（stay thinking）的重要性。偶尔停下来回望一下感知自己正在做什么，才能对当下的自我在一个较为宏观的尺度上有比较清楚的定位。

扩展阅读：https://www.bilibili.com/video/BV11T411E76B/

2023 年记

Sat, 17 Feb 2024 00:00:00 GMT

2023 年记

封面摄于 2023.09.29，日本京都某不知名野庙

我发现，每到年末总是最忙的时段，想要在公历新年到来之前好好地写完一篇年记，确实是有点难度。于是我决定推迟到农历新年之前，这样也可以正好对上假期。

不过就目前来看，算上年记每年能更新的文章也都没法超过两篇，实在有点不太好意思说自己有在写博客。

其实在 2023 年也有尝试过选取一些选题，比如我对 AI 绘图的看法、聊聊角色关系的转变，但是写着总觉得自己的水平有限，只能做到堆砌观点而缺少深度的思考表述，于是便只好成为众多废稿之一。

越做越多的「事情」

那么，我在忙些什么呢？我开始反思自己。

首先感知的是那些日常之事。除了基础需要以外，还有这样一些事情同样在一直固定消费着我的时间：

工作
看动画（追新番&补旧番）
视频、图文、游戏、音乐等娱乐内容
定期洗晒衣物、打扫整理房间、换洗四件套
偶尔周末回父母家
人际关系（线上聊天、线下聚餐）
……

它们看起来是枯燥的，在平凡的日子里总是不断地重复，但也是不可或缺的。意识到它们的存在，可以建立起对于事物的坐标系，更清醒地了解自己当下正在做什么，也就对于「日常」与「非日常」有了更深的感知。

排除掉上述日常以及杂事，还有印象的比较非日常的事情大概是这些：

年初写了两篇博客，顺便给博客仓库加上了 GitHub workflow 流水线，方便通过 git push 自动更新与发布部署。
在上半年的周末里常常被父母拉去看房，不过一直没下手。看着比我当前年龄还长的贷款期限，感觉有些缺少实感，所以提不起太多的兴趣。
5 月份因兴趣研究 DDD（领域驱动设计），做了场内部分享。面对未接触过相关知识的前端听众，想要完全讲明白这些抽象的概念确实有些难度。
6 月份捣鼓露营装备，因为临时被同伴鸽了，正好体验了回一直想要试试的 solo 露营。露营的那种「没事找事做」的蛋疼感好像有种奇怪的魅力。
趁着日本签证的放开，陆续准备了两三个月搞各种材料和做攻略，于 10 月国庆假期和几个熟 and 不熟的朋友去日本旅游，圆了个小小的梦想。
日旅回来后消费欲望达到顶峰，沉迷买买买，搞海淘、玩黑胶，甚至还看起了 BJD（球型关节人偶）。不过后续因为工作繁忙且回归理性，就逐渐消停下来。
年末临时报了本来不打算报的晋级答辩，为了有内容可以讲而自己加了两个月的班。不过乘着这个机会顺便捣鼓了一些新东西，对自己而言也算有所收获。

总体算下来，虽然整的活也不算多，并没有把所有的空闲都好好利用起来，但也算有意识在做些「非日常」的事情。

另外回头看了下我王者荣耀的赛季历史，才发现我在 2022 年连续上了 4 个赛季的王者段位，而 2023 年则在春季打了王者 33 颗星之后，就没再怎么玩了。合理猜测正是从中我节约出了一笔不小的时间，使得 23 年的另外三个季度里有意义的事情频率变高了（大概）。

不过，蔚蓝档案我倒是几乎全年全勤，只是它的日常一般并不花多少时间，在这方面正好契合我对于游戏时长占比不多不少的期望。此外，这种一点一点积累的养成模式也很好地满足我对于积累的欲望。（~~什么电子盆栽~~）

头疼的是，对于琐碎的、没有明确截止日期的事情，总体而言完成度并没有那么理想。不提那些广泛的爱好们，举些更具体的例子：

整理过往照片和图片，将他们分类归档到 NAS（甚至有七八年前的照片，陆陆续续只整理了一半）
日本旅游的影像 vlog 剪辑
博客站点更换技术栈进行重构（平时忙于工作，GitHub 都没有怎么经营）
每个阶段有意识地抽点时间写博客，及时对自己日常的思考进行整理与归纳

对我来说，它们是有意义的，但当下总是缺乏下定决心去做的动力。常常用着看起来很有道理的理由，告诉自己有更紧急重要的事情去做，但实际上又把不少时间投入到所谓的「放松」上。况且有时也不一定真的有放松到，甚至还产生了一些焦虑。

当然了，因为享乐行为本身而反而产生焦虑完全是本末倒置的。不过，如何巧妙地化解这样的问题则值得去好好研究，找到适合自己的方法。如果能够让自己在做有意义的事情的过程中，同时持续保持积极正向的心态，那便是再好不过。

需要声明的是，我也并不喜欢事事都做完整的规划安排，多点弹性才符合自由的天性。事情越做越多可能未必是一件坏事，关键还是要有真正下定决心开始去做的自驱力，剩下的就只是做多做少的问题。不做白日梦，而做白日梦想家。

「哲学」学习的感悟

在 2023 年之前，我的思维体系里的许多关键词以及观点，都是通过自己的思考总结、以及零零散散内化他人观点拼凑出来的。而在某个瞬间，我忽然发现平时里在想的那些懵懂的东西，有很大一部分都可以归类为「哲学」这个概念，而在此之前我居然未曾察觉。

哲学、文学、社学科学，作为一名理工科生，在过去，我也确实不够重视对于这些知识的主动接触和学习。在了解相关知识的过程中，我逐渐发现先前懵懵懂懂的抽象问题，其实早已被各种优秀的人思考总结过了，甚至建构出了完整的理论体系；许多作品亦是围绕相关的思想进行创作，如果事先具备相关的知识，能够更好地理解作者所想要表达的观点。

不过也没有后悔接触得太迟，因为很多思想都需要曾经有过类似的体验与思考才能够深刻地理解，太早接触反而只会不知所云。有些时候，学习新的思想本质上也是在使其与自己现有的思想做相互印证，从而在细节上完善属于自己的思维体系。

并且，不是所有思想都适合每个人。有时某些观点或许充满道理，但倘若无法在自己身上重复地验证的话，就说明它可能并不适合自己。在这个学习的过程中，还是需要自己去挑选出最合适自己的一些方法论并加以总结，才能够很好地融入自己的思维模式中去。

当然了，虽然总是在强调学习与思考，但我们更需要注意避免的是名为「过度思考」的陷阱，因为思考总让我们不得不直面内心最深处的问题，但往往不是所有问题都能够得到解答。过度思考，使我们断开与现实的连接，陷入幻想中的世界。

所谓的心理问题，在很多时候都是源于自己对于事物的认知陷入了一种局限。如果正处于倒向诸如「虚无主义」的消极情绪的过程中，通过学习相关的理论知识，倒是可以正确认识并找到属于自己的解决问题的方法。

虽然在这些过程中可能并不舒坦，但最后多少可以获得更加沉稳的内心世界。在面对「人生的意义」之类的宏大命题时，也或许能够看得稍微清楚那么一点点。

……

题外话，《进击的巨人》动画历经十一年连载终于在今年完结。动画在剧情上填补了漫画的部分缺失，在我心目中为这个作品画下了最完美的句号。而作者谏山创老师在结尾，就曾用存在主义思想对抗虚无，借着阿尔敏之口，表达了他作为文学创作者的其中一部分思想：

那天傍晚，我们三个人朝着山丘上的那颗树为终点赛跑，

提议要赛跑的艾伦一说完就冲了出去，三笠故意落后跑在艾伦后面，我果然又是最后一名。

但是，那一天的风非常暖和，光是跑着就觉得很舒服。

看着枯叶漫天飞舞，那时我不知为何突然觉得……我说不定就是为了在这里跟他们一起赛跑，才出生在这个世界上的。

下雨天在家里看书的时候，看松鼠吃掉我给的树果的时候，和大家一起逛市场的时候，我都会这么想。

这些平凡无奇的时刻，对我来说非常重要。

——最终话「朝着那座山丘上的树」

很多时候，我们都生活得太过「连续」了，连续得完全停不下来思考，坐在高速行驶的汽车上向着某个目的地疾驰，在这个过程中逐渐忘记了自己，甚至忘记了目的，变得只专注于「疾驰」本身。

就好像多年前我从未想过主动去散步——「要做的事情可太多了，哪有这么多奢侈的时间可以浪费？这是中老年人才喜欢的养生环节。」

但近年来我也开始逐渐理解：散步本身确实没有直接的意义，但在这个过程中，我们短暂逃离了世俗意义的纠缠，得以有机会去关注各种事物的存在。

打扫、洗碗、洗晒衣物等琐事亦是如此，正是这些平凡的日常才构筑起了生活的绝大多数。借助这些事物的存在，我们得以确认自己的存在。

倘若经常意识不到这些事物存在的点点滴滴，当我们失去所谓宏大的目标之时，也就容易陷入至虚无之中。

尾

虽然这个系列的标题叫「年记」，但似乎前两年的年记更多的只是对于跨年当下的心境的记录，今年才在此基础上，加入了一点对于当年所做过的事情的总结。

为了让年记更加专注于对当年日常生活的记录，我决定后续可以把比较独立的观点与思考类的文字，另外拆成单独的博客，这样能够使每篇博客的主题不至于过分松散。（~~博客的数量也不至于太少~~）

而关于日常生活记录的部分，将应该补充更多的细节。因为这些不涉及大量的思考整理，所以写起来应该会轻松一些，不至于一写就是一两个月。

实际上，随着这篇年记一起写的还有「思考」的消失一文，正因为上述的考虑，最后将其从年记中摘出去；而至于文中关于「哲学学习的感悟」的内容则比较散漫，于是还是放在本文之中。

总得来说，这个系列于我而言还是挺有意义的——适时的总结与回顾，有助于保持清醒。日常思考的过程中，经常会产生大量零碎模糊的观点，趁着这个机会得以把它们挑挑拣拣组织到一起，虽然是需要花上不少的功夫，但整理清晰后的秩序感也令人感到内心安稳。

「世界上只有一种真正的英雄主义，那就是在认清生活的真相后依然热爱生活。」

回顾完 2023 年，虽然在这过程中时常迷茫、对一些事物愈发地感到失望，也曾陷入过虚无，甚至至今也还未认清生活的真相，但也总有些微小而确定的收获存在，让我仍然保持对于生活的向往。

骑车，露营，过家家

Sun, 19 Feb 2023 00:00:00 GMT

骑车，露营，过家家

初知露营

我的露营启蒙源自于动画《摇曳露营》。

在没有主动接触过露营相关的信息之前，我对露营的刻板印象还停留在那种更偏向户外探险、登山徒步时生存过夜的类型，这对于我这种宅宅来说，自然是没有什么交集的。「露营很有意思吗？」——如果听说有人专门跑去露营，我可能就会这样直接发出不解的疑问。

直到某天，我在四处寻觅补番对象时，注意到了《摇曳露营》这样一部动画，于是在将其一集一集追完后，这才第一次了解到露营其实是怎么样一回事。

《摇曳露营》本质上还是属于讲述女子高中生萌萌日常生活的类型，但不同之处在于，其中加入了许多非常细致的露营描写与露营知识的解答，且对轻松氛围感的营造非常出色。角色们在休闲治愈之余，很自然地将露营的乐趣透露给了荧幕外的观众们，让许多观众第一次意识到户外露营其实并不一定是一种很苦很累的事情，它一样也可以是一种非常治愈的兴趣爱好。

《摇曳露营》第一集中，长达一分多钟的连续的帐篷搭建过程描写

调查露营

当然，在有了对露营的向往后，更重要的还是得行动起来。而在这个方面，我并不是那种「刚看完动画就带上帐篷开始露营」的身体力行的人，毕竟这种活动对于阿宅来说好像还是显得有些遥远。但在一位朋友的多次提议、以及对 2022 平淡生活的躁动下，我开始重新审视露营的可行性，然后发现其实露营其实并没有非常麻烦。

露营发展到现在已然有了许多不同的风格与流派：注重轻便可靠的徒步露营，合家欢的公园露营，考验生存技能的 BC 露营，还有装备齐全的精致露营等等。露营的门槛其实可以很低，想要体验露营的乐趣，甚至可以先从公园野餐开始搞起，带上好吃的东西、铺上野餐垫，四舍五入就是最简单的露营。《摇曳露营》主人公志摩凛也只是一名高中生，但只要有基础的装备，哪怕只是吃着杯面，也能够完全享受宁静的户外单人露营。~~（完全戳中了我的喜好）~~

此外，露营的时间是非常自由的，可以事先计划好去做些什么，也可以什么都不做。可以单纯地放空自己，挥霍时间在低意义的事情上，从平日的焦虑中短暂抽离出来，感受自然的恬静；也可以进行一点对新事物的尝试，甚至哪怕只是把平日里所常做的事情搬到户外来做，体验也可能会大不相同。

然后到了晚餐的时间，使用简单的炊具在户外给自己做一份热腾腾的食物，就着新鲜的空气和暖黄的灯光慢慢填饱肚子——这样的氛围感对于没有体验过露营的人来说，绝对是非常新鲜的。

在刷了许多的露营 VLOG 视频后，我觉得我确实应该行动起来了。于是乎，赶着即将过去的 2022 年，我开始着手准备露营相关的事情，从零研究攻略、购入露营所需的装备、规划行程与目的地。虽然在筹备的过程中，有曾因为过「不想置备太多东西否则不好搬家」、「怀疑可能只是三分钟热度，到最后还是吃灰」等原因而一度有所犹豫，但抱着「与其后悔当初什么也没有做、不如做完所有事再去后悔」的心态，还是把这件事情继续推进了下去，于是成功地开始了我的第一次露营体验。

体验露营

因为我的朋友是个自行车爱好者，所以这次露营的出行方式选择了户外感拉满的骑行露营。考虑到是第一次露营、自行车货架可荷载的行李有限、以及本人并不出色的运动能力，在四处比较后，选择了一处离出发地仅 22 km 的正规露营地。

理论上，这个距离如果骑得够快，两个小时就到了。但因为经验的原因，出发前的各种准备就花费了一个多小时。而且即便是精简过的行李也很难牢牢捆在我那窄窄的车货架上，于是一路上不断为了扶正摇摇欲坠的行李们走走停停。此外，连续的负重上坡也榨干了我原本就不太富裕的气力。最后花了 4、5 个小时抵达营地时，天色已经完全黑了。

好在也是顺利安全抵达，不至于让这第一次露营在路途上就宣告失败。

抵达营地后，场地里的人数比我想象中的要多。

营地分为了不过夜区与过夜区，过夜的人都需要自带帐篷，不过夜区则配备了许多大天幕与桌椅。正好碰上某银行部门的团建活动，所以环境显得热闹许多。

因为来得晚了，适合扎营的好位置早被其他人给占完了，好在我的帐篷比较小，在帐篷群之间的小空地挤一挤也算 OK，于是得以开始着手帐篷的搭建。

帐篷我选择的是牧高笛的摇曳露营联名款帐篷，买这个帐篷很明显主要是为了信仰充值，因为它很好复刻了凛酱所使用的帐篷（其实际原型是 mont-bell Moonlight Tent 3，国内要想买这个型号只能走海淘）。而如果撇开信仰的话，我想我应该会选择一款自带前厅的帐篷，不用为了遮光或者避雨而多带一套天幕，更加适合轻便的单人露营。

其他装备大多也是照着摇曳露营里出现过的款式来买的，矮脚月亮椅、折叠小桌板、高山罐+小型炉头的组合，很大程度上算是在满足自己想要在现实中感受动画里的相同体验的愿望。

虽然想说明火才是露营的标配，但考虑到我和朋友不入流的做饭水平，为了减小做饭翻车的概率，这次露营我选择了饭盒煮饭+即食罐头的搭配。但即便如此，结果还是因为灯光不足、经验不足等原因，我往朋友的盒饭里加了过多的米和水，煮到最后上生下焦；相比之下，我给自己饭盒煮的饭则非常完美，这一下子就感觉很对不住朋友（🤣

待到开吃这会儿已经是晚上 10 点半了。正所谓「饥饿是最好的调味料」，不一会儿，满满的饭盒就给我全部炫进肚子里了。

因为是正规露营地，所以会有提供洗澡淋浴的地方，可以洗去因为骑行的一身汗与尘土。如果是选择在无人管理的野外露营，那可能在卫生上就没有那么方便了。

夜深洗漱之后，因为离入睡还有一点时间，于是便拿出为了复刻动画中的「烤棉花糖」桥段而准备好的棉花糖。因为营地不允许生篝火，只好拿出我的气炉代替。烤棉花糖讲究一点点技巧，如果靠太近的话棉花糖会着火，要是离太远又感觉没什么变化，但只要稍稍把控几次、掌握了技巧之后就可以熟练地烤出完美的棉花糖了。

烤过的棉花糖口感确实比较新奇：外壳稍硬，里面则是冰淇淋的口感。不过烤过之后棉花糖也变得更加齁甜，多吃几颗就会感觉有点甜腻。

一顿甜腻之后，心满意足地烧壶热水，在睡觉之前，坐在星空下一边喝水、一边慢慢感受户外夜晚特有的沁人心脾的寒气。

……

一夜无梦，拉得严严实实的帐篷与野外的湿气一作用，让虽然已是秋冬之际的夜晚显得反而有些闷热，先前购置装备时对于睡袋保暖性能的担心变成了多余。人生的第一场户外露营觉睡的虽然谈不上舒服，但确实是一种别样的体验。

清晨，太阳半起未起之际，空气一片潮湿，聚满云雾的天空已经蒙蒙发亮了。起床后擦拭去因为昨晚没有收纳起来而沾满露水的桌椅，我点起火来准备起简单的早餐，而升起的太阳正将厚厚晨雾缓缓驱散开来。

随着时间的推移，太阳很快变得猛烈了起来，没带天幕的我们显然没办法继续在太阳底下呆着了。晒干潮湿的帐篷外帐与地垫、匆匆收拾好装备后，我们带好头盔、骑上自行车，结束这场露营之旅。

评价露营

——「露营很有意思吗？」

即便是实际体验过露营了，面对这个问题时，我好像仍然没有办法给出非常具体、确切的回答。

对我来说，应该还算挺有意思的，但这份感觉并不局限于露营本身。为了「去露营」这件事，实际上我接触到了更多露营以外的体验。

当我是一名看客时，我消费着露营影像所贩售的视听情感，幻想着自己如果去露营会是怎么样的一种体验；

当我着手准备时，我发现了更多的关于露营的我所不知道的事情，在做攻略的过程中逐渐获取对于当前所正在筹备的计划的安全感；

当我切身实践时，才知道那些原本只存在于想象中的体验，在实际发生时具体会是一种什么样的感受，理解预期的落差与意外的惊喜。

近年来国内的露营确实越来越火了，虽然我不是一个爱凑热闹的人，但不管是出于对《摇曳露营》的喜爱而想要进行一点拙劣的模仿、是想假借露营尝试改变一点自己对于自然的看法、还是想从日复一日的核酸与上班的重复之间中短暂脱离，我做了这样一件事情。它并不是什么稀奇的、值得长篇大论的东西，它不过就是成年人的过家家、是众多小众爱好的其中一种罢了。即便是换种爱好，可能仍然可以收获类似的情感体验。

但我想，关键应该还是在于持续保有对于新事物的热忱，以及继续尝试新事物的勇气。

你来人间一趟，你要看看太阳。 ——海子《夏天的太阳》

2022 年记

Mon, 09 Jan 2023 00:00:00 GMT

2022 年记

封面摄于 2022.11.13 晚（手机延时摄影），深圳风汐谷露营地

转眼间又是一年。

为了构思 2022 年记，我翻看起今年以来的手机相片，结果并没有太多的收获。我想除了因为开始工作后逐渐疏忽了对于日常生活的记录以外，更重要的是，今年的某些方面对我感觉来说是相对停滞的一年。

环境变化

今年的互联网行业小跑着进入了「寒冬」阶段。在这波降本裁员浪潮下，一场场告别也逐渐成为了习惯，其中包括与我同期进入职场的新人、也有很 nice 的上级。虽然工作的环境条件和福利待遇不比以前，但辞职再找一份工作同样也充满了困难，于是「苟住」与「躺平」仍然是许多人的最简单的想法。

同样是今年，大规模核酸常态化让深圳成为了「核都」，各种各样的限制让人的流动趋于静止。

我在年初经历的长达一个多月的疫情封村隔离，已经在上一篇 blog 记录过了。原本已经不再想赘述，但在着手这篇年记的过程中，政府仅短短半周时间就完全放开了原先严格的疫情管理，于是新冠一如同泄洪一般快速传播开来，包括我在内的绝大多数人都「阳」了一遍。

总体而言，今年是绝大部分人受到疫情影响最深的一年，也是大环境变化最大的一年。而接下来因为政策的激进调整，来年的生活不论或好或坏，注定也将与往年不大相同。

想到这，在略有紧张之余，更多的还是对于变数的期待。

创作与学习

在今年 12 月份初，部门搬工位回到了我原来实习时所待的大厦。借此机会，我约了个在附近另外一家公司上班的大学学弟吃饭。

聊天过程中，我们偶然谈论到「平时在周末都会干些什么」的话题，不出意外地，大家都是以躺平为主。

不过，虽然是躺平，我补充说道：「即便是没有计划的周末，其实也可以减少打游戏刷视频的时间，去做一些不一样的、平常很少做的事情，比如可以培养某些新的兴趣爱好、带上相机去扫街、或者仅仅是做些文字的记录，意义也并不浅薄。」学弟则赞同：「嗯，就是保持创作。」

一下子，「保持创作」这句话便在我的脑海里挥之不去。

为什么我要说想要减少打游戏刷视频的时间？当然这并不是认为它们没有价值，毕竟它们是放轻松的绝佳方式。但倘若一直进行某些同质化的娱乐、被仅仅几样事务占用所有的时间，总会让我感觉枯燥而浪费。而当进行创作时，创作的成果总是实实在在而富有新意的，就像将时间以另外一种形式保存了起来。

除了创作以外，学习也同样重要。不过学习也绝对不仅仅面向枯燥的知识，它人的创作往往也充满着可以学习的地方。

我相信那些会把「游戏」作为一门爱好放在自我介绍里的人，多少会抱着品鉴「第九艺术」的心情游玩各式各样的游戏，发现游戏中各种不同的亮点；视频创作者在观看其他 UP 主的视频时，也应该会下意识地留意各种视频的制作技巧。看电影、看动画、读书亦可是学习的一种方式，只要在其中有所收获，所消耗的时间便具有它的份量。

那么回首今年，我又做到了多少呢？在去年，我评价自己——

因为顺利完成学业、进入社会后而产生的安定感，让我在上班的这几个月里有点躺平。

而到了今年，其实我仍然会每天花固定的时间玩游戏，下班后还是喜欢躺在床上通过不断地刷视频以获得廉价的多巴胺，但我其实已经开始有意识地在减少它们所占用的时间，更多地去思考一些平时不怎么做的事情。平时更倾向于消费高质量的长篇文字，减少低质量的娱乐视频的摄入，以期望获得内心的平静。

不要高估自己一天所能做的事情，也不要低估自己一年所能做到的事情。只要能先动起来，保持思考、保持输出，在这个过程中慢慢地就会有所裨益。

独处

我想大多数人都是不喜欢独处的。

在 2021 年的年记中，我曾花了一个章节记录我对于「社交」这个「与他人交流」的技能的感悟。处于社会中的人类总是离不开社交，即便是成为社会现象的「社恐」患者们，内心又何尝不羡慕应付人际关系得心应手的「社牛」呢？

但是，独处作为「与自己交流」的一种方式，却容易被许多人所忽略。

毕竟「独处」往往与「孤独」相伴，而作为群居动物，几乎没有多少人可以忍受长久的孤独。只是，不论喜欢还是不喜欢，独处仍然是很多人总会面对的事情。所以，学会独处其实也是一门同等重要的课程。

自年中搬家把租房选在了公司旁边后，我迎来了我人生中第一次真正意义上的独处体验。

独处所可以预见的好处之一便是独居的自由。独居允许我拥有这样一个属于自己的空间，在不会被他人打扰的同时，不用在意他人的感受。我可以更专注、更持续、更自由地选择做一些事情，而不会因为顾及他人而或多或少地影响着我自由选择的权利，也不会被他人浪费自己的时间。

对于社恐来说，独居的好处自然是显而易见的；但对于一般人，独居也并不影响与他人产生联系的能力。如果因为独居而感到孤独，仍然可以出门约上小伙伴消磨时间。独居使我们可以自由地把控人际距离，而不用被强迫接受与他人共处。

此外，独处更是「与自己交流」的绝佳机会。如果说独居只是物理层面上的独处，那么与自己交流则是精神层面的独处。

当人处于集体之中，展现的是人的社会性，自身与群体之间总是紧密联系，即便想要关注自己，往往在意的也是他人眼中的自己；而当人独处时，才有心思把纯粹的目光收回到自己的身上，对自我进行完整的审视，直面自己的心理需求。

如果在独处时仍然持续性地将目光放在他人身上，潜意识不加筛选地消费他人所创造的视频等产物以试图填满内心的空白，在这个过程中逐渐地就会缺失对于自我的认知，空虚与孤独便自然会随着夜晚在不知不觉间到来。

我想，面对独处时所产生的孤独情绪，大抵也有因为直面自己内心的枯燥而不自觉产生空虚感的原因。想要学会独处、享受独处，首先需要了解自己，丰富自己的内心，才能够在或主动或被动脱离他人的时候，仍然能够实现精神上的自我满足。

某种程度上，我也可以说我是自私的。我会希望人更多地保持作为人的独立性，更多地关注自己、丰富自己、取悦自己，做一个饱满而有趣的灵魂。

尾

做了一年的核酸检测 2022 年，最后以全面放开作为结尾，完完整整，是当之无愧的核酸年。以后再回忆起今年，想必少不了「场所码」与「24 小时核酸记录」的影子。

2022 年基本是在日常中度过。为了整点不一样的活儿，效仿着《摇曳露营》进行了人生的第一次营地露营体验，但因为图文太长，于是另起一篇文字记述。

2022 年，我一共看了 46 部动画作品，通过品鉴与学习，对动画的评论也逐渐熟练起来。如果挑一个作为今年的最佳动画，我应该会提名《孤独摇滚》。

2022 年被「垃姬兔」的 Live2D 剧情引流入坑手游碧蓝档案，其清新轻松的感觉成为了我目前玩过的最喜欢的二次元手游。转眼已经连续登录了大半年，目前还没有看到弃坑的未来。

在 2021 年逐渐留长的头发，于今年经过很多的尝试与调整后，还是打理不出想要的感觉，最终又剪掉了。留长发的过程其实充满了精神上的内耗，但我好像还那么有点儿享受这样一个过程。

疫情第三年

Fri, 07 Oct 2022 00:00:00 GMT

疫情第三年

因为我从小在深圳长大，大学毕业后的去向自然也是选择留在深圳。

然而我家与上班的地方距离太远，所以在工作地就近租房以节约通勤时间的开销显得尤为必要。当然，更大的原因也是借此理由，终于能够实现自己期望已久的念想——独处。不过，作为过渡期，在开始真正的独居之前，由于我有一个哥哥也是在深圳上班，所以不论是父母认为出于互相有个照顾也好、能够一起租一间更大的房子也好，我答应了兄弟一起合租一套两房一厅的公寓。

而新冠疫情始于我大学生活的尾声。应当是运气好，自其出现的前两年间，疫情其实并没有对我的生活造成什么太大的影响，甚至在某些时候反而有点占到疫情的「便宜」。但今年以来倒是发生了一些大大小小的不平常的事情，终于让我在除了在每天都需要保持 24 小时核酸记录的枯燥日常以外，也真切感受到疫情的存在。

这里不谈疫情对社会经济的冲击之于我个人生活中的具现，而想从自 22 年 2 月末起持续一个多月的隔离生活说起。

封村的日子

一线城市的城中村总是充斥着形形色色的打工人们。

毕竟，相比较于环境舒适的高档小区，城中村的租房价格往往会便宜不少。

起初我还是比较喜欢城中村的氛围的：楼下就是各种便利店、快递点、小超市、餐饮铺，方便得很。周末点个外卖，要是外卖店家就在村里，可能只用十分钟外卖小哥就取完餐给送上来了。这些对于喜欢宅家的我来说，可谓是再舒服不过了。当然缺点也是有的，比如空气灰尘大、门窗隔音不好、环境卫生一般，但总体而言还是能够接受的。

不过，随着病毒传播能力增强以及核酸检查常态化的到来，城中村「人员密集」的问题很快就被放大出来。因为城中村的人口又多又复杂，出现疫情的概率自然是非常大的。于是光荣的，在没有太多征兆的情况下的 2 月末的一天下雨天，准备去上班的人们大片大片的围聚在村口，无奈驻足或徘徊，一手举着雨伞、一手举着手机，向公司解释着自己正处于临时管控的尴尬处境。

既处之则安之。好在我司在远程办公的方案上算是比较完备的，在和 leader 简单报备之后，我从村内的便利店们采购了一堆零食回到租房。尽管为了能够远程办公，拜托美团跑腿把笔记本电脑从公司送来村子花了一下午的时间，但其实心中还是有点按耐不住的小兴奋：可以名正言顺地体验远程办公的生活了！

因为宅，对于租房的选择我有一个绝对的标准：房间一定要够大，起码能放得下一张大大的书桌。虽然目前还没有置备升降桌腿，但人体工学椅、双显示器、桌面音响等等宅家利器都是我出来租房的第一时间就准备好的。

事实上，它们在这大隔离时代也大大提升了我远程办公的体验。而那些没有好桌椅的同事就没有那么舒服了，有段时间因为疫情全司推行了持续一周的远程居家办公，就能听到不少抱怨在家办公腰酸背痛、效率低下的声音。

不过，远程办公对绝大部分人都有的好处就是完全节约了上下班通勤的时间。于我而言，相当于每天多出了足足一个多小时的可支配时间。此外，远程办公的工作时间在一定程度上也可以自由安排了。因为白天经常会有问题需要沟通与交流，频繁的打扰对于写代码思路的连贯性是有害的，所以早上九点半之后再起床、白天摸鱼、晚上没人打扰的时候静静地写代码也是一种不错的选择，这样可以最大化保持自己的心流。当然，可以随时摸鱼也不是什么不可或缺的优点，毕竟分配的活儿就在那里，早晚都得干完。

刚开始封村的第一周，大家还是可以在村内活动的，除了快递外卖送不进来以及每天要排半小时甚至一小时的核酸检测以外，对我的日常生活其实仍然并没有什么影响。这个时间段里生意最好的就是各种超市、小卖铺、蛋糕店，通过应该是特许准入的进货渠道，每天都在将新的货物源源不断地补充上架。

然而，村内的病例每日都有新增。随着一周时间渐渐过去，我们等待已久的新的公告终于出来了，可惜等到的并不是解封通知——「自 3 月开始，全村每家每户不再允许出门，所有人进行居家隔离。」

封楼，投食，等通知

或许因为是深圳第一次针对几万居住人口的城中村颁布这样的政策，没有太多先例可以参考，所以在一开始，村内的管理非常的混乱。

头两天，政府送来的是盒饭，甚至有两顿可以拿到麦当劳、必胜客等快餐，其大手笔曾登上了微博的热搜。但因为管理混乱、人手紧缺等原因，实际上有些人可能根本没有收到、或者直到晚上才收到中午的饭菜。

更大的问题是，在当时我们根本找不到一个能够问话的负责人，全靠网络上自建的交流互助群，大家将消息传来传去，才得以了解其他人的大致情况，知道物资的信息。

应该是出于人手紧张、以及送餐成本的考虑，从第三天起，政府就改成给送物资了，都是一些蔬菜瓜果、泡面速食、面包蛋糕之类。再后来逐渐有了上门的核酸检测，每楼安排了对应的社区网格员、楼栋管理员等疫情工作者，也开始允许点超市外卖送些必需品（大白帮忙由村口送到楼下），居家隔离的日子变得逐渐有序起来。

既然都全村封上了，那也就放弃短时间能够解封的幻想，专心居家工作了。好在我是与我哥一起租的房，尽管我自认为我一个人隔离也不是问题，但有个可以说话的对象、可以互相照应总归会好一些。而且该租房还有厨房可以生火，即便是原本基本上只用厨房煮面、煮饺子的两个人，面对泡面与自热米饭等速食的围攻，肯定也避免不了要霍霍一下每天送上门的物资，对着教程现学现卖，改善一下单调的伙食。

咖喱鸡翅盖饭，实现咖喱自由

青椒土豆焖鸡，放糖的鸡肉更好吃

叠满 BUFF 的面（带鱼、肉丸、饺子、煎蛋、肉干……）

……

隔离的日子一天一天过去，楼下并没能恢复往常的热闹。某天夜晚一群工作者叮叮当当地用铁皮连成围墙，将每条巷子都分隔开来，于是让人更加感觉看不到隔离的尽头。

而且即便是封村之后，每天都持续有新的病例出现，一批又一批的巴士运送着一栋栋的居民前往酒店进行隔离。有意思的是，期间甚至出现了一些都市传说，比如「有病患死在家中几个月无人知，直到防疫人员联系房东打开房门才发现，尸水都已经进入村子下水道，导致全村即便封村了也仍然在产生新病例」，正好对应上了后面防疫人员给每家每户发用来清洗下水道的消毒片的行为，给其添上了一点神秘色彩。

许多人不再耐烦，毕竟能够远程办公的只是少数人，对于无法远程办公的人来说，收入问题的压力与整天被迫居家而无所事事的现状产生了强烈的反差，烦躁的情绪无从消解，使得群聊中总是弥漫着火药味，任何消息都像是在挑拨大家的神经。

后来，领导大手一挥，决定全村分批转移至深圳的各处酒店进行隔离，群聊又是炸开了花。关于隔离能不能带上宠物、孕妇临产怎么办、酒店是否自费等等问题，又是下楼对线、又是半夜喊话，让吃瓜的我不由「感慨苍生」。

原本我们楼栋也被通知，都做好了转移的准备，结果后面一直等又没有了下文。而因为当时通知说楼栋会停水停电，一些邻居甚至都把冰箱里的食物全部丢掉避免隔离回来发臭，结果只是乌龙。等不到通知，生活还是要继续过下去，发觉全村隔离执行到一半不了了之之后，又是漫长的居家。

尾声

隔离了一个多月后，终于有连续保持 14 天的无病例记录，等来了即将解封的通知。虽然解封过程中还出了点小插曲，但最终，先解封了楼栋、再解封了村口，村子终于恢复了往常的日子，而每日核酸检测、健康码卡口、通行证则是这波疫情遗留下来的痕迹。

不知道现在村子是否还热闹如初、后来的几波疫情是否还有受到影响，只知道许多租房客合同到期后纷纷选择了离开，而我也是其中的一员。

疫情时代的「版本答案」

疫情影响了很多人，比较之下，我自以为地庆幸自己是受影响最小的那类人。

记得疫情刚开始时，是大三上学期刚过完的那会儿。许多同学正准备着申请海外留学，结果疫情的肆虐直接或间接地导致申请过程变得尤为艰难，同时往往还要顶住父母所给的压力——「海外疫情严重、国际关系紧张、出去不安全……」。而即便是留在国内考研，年年的竞争也都是要比往年更激烈一些，毕竟起码参考人数上也是一直不断上涨的。

而我因为厌倦了读书而选择毕业后参加工作，虽然因为读的是双学位，到了大三下学期的课程仍然很多，但反倒是托了远程上课的「福」，让我得以有空提前参加实习工作，边工作边挂着腾讯会议听课。就这样刷了半年多的实习工作经历，而后也是顺利入职。到了现在，互联网行业正逐渐步入寒冬，在职人员尚且都战战兢兢，如果我是今年才出来准备面试，我完全感觉没有把握能够找到理想的工作。

另外，「性格」也是决定在疫情时代能否过好生活的重要因素。

疫情使人与人的距离被长长地拉远，通过网络建立联系已经非常普遍，这无疑是变相地「利好」网络宅的。而对于不喜宅家的人来说，长时间宅家的枯燥以及缺少与人面对面的交流，孤独感便在所难免。而且疫情的反复对于喜欢旅游的人来说是个麻烦的问题，更别提万一被隔离，将会短暂的失去自由，这些对于喜欢到处走走的人来说，无疑过于压抑了。

好在我是一个宅家资深爱好者，隔离期间除了没有外卖与快递以外，总体并没有感到太多的难耐，甚至还学会了一点点炒菜的技能，也算是平添了一些新奇的人生体验。

可惜这些基本上都是很难随意就能改变的东西，能够避开「风险」多少含有较大的运气成分。虽然我称这些为「疫情时代的版本答案」，充其量也只是打个趣罢了，毕竟疫情带来的连锁反应，没有多少人可以独善其身。

不过，与其将所有罪责都推给疫情，继续持续思考怎么顺应这个版本或许是更好的补救方法。谁也不知道疫情到底什么时候才会迎来转机，在此之前只能做好更多的准备。诚然，疫情下的我们失去了很多，但也未必什么都没有得到。既然已经发生的事情无法改变，那么抱怨也不会有太多的意义，更重要的是做好接下来的事情，找到适合自己的「版本答案」。

后记

本来本篇的这些内容应该在隔离的那段时间就该开始构思的，结果工作上的事情自解除隔离后便一路忙到了 8 月份。期间工作环境也发生了一些变动，再加之懒病难改，一直都没有记录文字的心情。

直到 9 月份，终于平稳下来，总归是有了「偶尔会不知道这空闲该干些什么」的时间了。为了摆脱低级趣味的陷阱，我劝自己说总归是要着手做一些一直想做但很少去做的事情。~~（不然今年怎么交差呢）~~

某天正观看有位 UP 主的观点视频，其中有一段话与我内心的想法不谋而合——

如果我将大部份时间都用来看视频、听节目，一段时间之后，就会觉得自己面目可憎。

因为当我长时间作为观众或者听众的时候，是没办法思考的，连一个完整的句子都写不出来。

那种状态的我，只不过是他者的延伸，而不是我自己。

于是我大拍脑袋说：「是时候该写点什么了！」，这才开始慢慢地抽出时间来码字。抽出来的一般是睡觉前的时间，这段时间的码字能让我的情绪保持平静。

不过，其实在一开始我想写的是自己有关于「独处」的一些体会，结果写着写着倒是把疫情下的生活占了大半篇幅，索性这些内容留到以后再另起一篇罢。

2021 年记

Fri, 31 Dec 2021 00:00:00 GMT

2021 年记

封面摄于 2021.10.12，北京故宫

前序

2021 年，是我告别校园生活的第一年。听过形形色色的人描述自己离开校园后的日子，但只有当亲自抵达了这个阶段，才会知道走入社会的自己会有着什么样的体验，于是人生的阶段感油然而生。

想起小的时候曾经连续写过半个月的日记，但最终因为没有什么值得记录的内容而逐渐放弃。但当我偶然一次闲逛进入了一个外国人的博客，看到了他所写下的长达数年的连续日记。虽然每天的日记大都只有一两行，也不由得小小地震撼了一下，甚至冒出了「如果我当初也有一直坚持写日记就好了」的念头。

但是我真的适合写日记么？

为了验证这个问题，在大学实习的过程中，我尝试坚持写了几个月的「工作日记」。虽然每天工作的内容都不太一样，但写得多了，其实也基本就是那样。偶尔翻开来看还能想起当时的每一个心情，但并没有值得怀念的感觉，只有一个「哦」字在脑海里盘旋。

透过这几个月的「工作日记」，反而让我更加切实地意识到工作的枯燥。

毕竟平凡才是我们的日常。

日记失败了，但想要记录的念头仍然没有完全被放弃。我意识到坚持每日日记或许十分浪漫，但总会被枯燥装满；而我想要记录的，或许是更高维度的东西。

曾经见到有人在网络上分享工作经验，大意如下：

善于总结是一个好习惯。不一定需要每日总结自己干了什么，但一定要有这样一个不断回顾的过程，可以是一个星期一次、两个星期一次、甚至是一个月一次。通过回顾总结，我们才能意识到自己做了什么，做得足够还是不够多，以及接下来应该怎么做。

我想日记也是如此。每天发生的事情确实太过琐碎，但如果把时间拉长，或许记录的心情又会是截然不同的。不过就算拉长时间到一个星期、或者一个月都仍然让我感觉会无聊，于是索性想着：「要不来每年一篇年度总结吧。」

做点什么事情总是需要一个理由，或者说，一个契机。站在人生的下一个阶段，忽然想要怀念些什么。这篇前序就是一段给自己写年度总结找理由的心路历程。

阶段感

前序里提到了好几次这个词，说是「人生的阶段感」，但其实也没有在一下子就发觉现在与过往的日常大不相同了，而更多的是在这个过程中，反反复复地意识到有些东西确实回不去了，能做的事情只有继续往下走。

回看上学的日子：小学毕业了，按分配升上初中；初中毕业了，还有高中；高中毕业了，还要读大学。这些过程中虽然发生了新的变化：比如义务教育到头了初中得好好读书考个好高中、高中开始和同学一起住宿了、大学得学着自己学会规划管理时间了。但这些日子里总归还是上着课、读着书、管着家里要生活费，跟一群同学通过缘分从陌生到熟悉、最后大部分又回归陌生。

所以离开学校后，这个生态就宣告结束了。而越来越多的不同，正不断重复着这个事实。

作为社畜，最大的不同自然是要开始打工了。

每日按时上下班，通过工作获取报酬，接触的人事物大相径庭，学习的东西更不一样。不过因为在 2020 年做过半年的实习，所以 2021 年毕业入职以后也没有一开始的那种因为初入职场不懂规矩而无所适从的感觉了。而且因为编程是自己感兴趣的东西，所以即便是作为新人有很多要学的东西，心情也比在读大学时应付自己不感兴趣的课程们要好得多。

开始上班后，很快就会感慨经济独立真是非常重要的独立，「拥有经济收入」对于一个人来说真可谓意义非凡。不论工资多少，对于大部分人来说都会比以前父母给的零花钱（生活费）要多得多，于是终于可以不用在喜欢的心情与拮据的钱包之间过多纠结，花钱变成了更加在意是否开心而不是价格高低的事情。当然相对的，更多的事情都得由自己来为自己负责了，大城市的房租将会在很长一段时间内成为年轻人的第一笔不小的日常支出。

不过对我来说，从小到大养成的消费习惯倒是基本没有改变，所以基本上除了买点喜欢的东西不再拘束以外，并没有刻意消费的欲望，于是交完房租以外大部分还是会存起来，顺便学着理财。

此外，个人感觉走出校园的第一份工作在某种程度上也是对过往的一个总结。

「能够做自己感兴趣的东西、过好自己的一生」就是我最朴素的想法，而我希望尽可能快、尽可能好地去实现它，为此尽可能早地认清自己该怎么做是有必要的。「读书是为了找到好工作」很功利，但从结果而言，这也是大部分人兜兜转转后的归宿。而在这 16 年的读书日子得到了总结之后，自然而然地就有了顺利完成演出、看着帷幕逐渐落下的安定感。接下来的日子又将作为一个新手，开始积累自己的经验。

社交

在互联网公司上班，同事都很年轻、友善、正直，不过因为年纪或多或少都比我大，所以自然比我更成熟，平时聊的话题也贴近生活许多：炒股、买房、找对象、养娃，与在学校里的同龄人打交道的感觉是不太相同的。

原谅我从小到大聊天很多时候都是朋友帮我找话题而不自知，只是擅长接话但完全不会找话题。于是当我想要尝试练习与人聊天时，才发现「会找话题」也是一门本事，不少人一直做得很好，我却很少发觉这回事。

意识到这点后，我开始注意到聊天中哪些是因为分享欲而产生的话题，哪些是因为社交需要而找到的话题。分享欲很正常，我们总会因为下意识地想要分享一些事情而产生交流。但凭空产生的话题又不相同了，起码对我来说，这是需要练习才能够在聊天时自然想到的东西，而我在这方面属实苦手。

但我不会觉得「找话题聊天」这个行为刻意，反而会感到自己正在被对方所重视，毕竟一般人不会在不愿意与对方聊天的时候，还花心思找话题。

毕业，同学各奔东西以后，失去现实生活交集的接下来就很容易失去联系。哪怕是之前聊的很来的朋友，但缺少联系越久，对对方的生活就越缺少认知，于是话题就更少了，如果不着边际的聊天就又显得有点突兀，以至于最后有点怀念又好像无话可聊。

好在有即便生活中很少能见面、但仍然主动聊天的朋友，让关系并没有变得如此生疏。这让我意识到其实如果真的看重对方，想要继续维护感情并没有想象中的那么麻烦。只要常联系，就可以越走越远。

感谢所有愿意主动聊天的朋友，愿以后我也能够稍微成熟一点，珍惜更多的眼前人。

人的性格大抵还是以天生的性格作为底子罢。经过幼儿阶段以后，主要的性格方向就已经定下了，然后在接下来的人生里受到各种影响而逐渐特化成更加具体的形状。

我自认自己是内向性格开局，好在待人友善，也有不少朋友相伴，成长还算安稳，没有产生出什么乖僻的性格来。但内向性格在很多时候总是吃亏的，也容易产生许多不必要的烦恼，于是改变性格也是我长久以来一直在尝试的事情。当然如今仍然是个呆瓜，只是在尝试走出舒适区很多次后，社交已经不是一个大问题了，对比儿时的自己，也算改变不少。

精神状态

高中老师曾引辛弃疾的词吐槽我们：「少年不识愁滋味，为赋新词强说愁」，我们无力反驳，因为我们正在经历少年的阶段，无法想象成年人的压力。

不过就目前来看，初高中才是我目前经历过的人生中情绪最复杂的时间段，而现在没有了升学压力、就业压力后，或许正是比较轻松的一段日子，哪怕不一定能持续很久。虽然当然目前还有社交、工作、考核等等的其他压力，但总之也是些比较实实在在的事情。

那么在这个阶段，「我该怎么去度过」是我想给自己留下的一个问题。

我的初步想法是「做自己感兴趣的事情」。但可能是工作节奏快、网络娱乐信息流零碎化，我对我自己比较明显的一个感觉就是自己比以前要浮躁得多。

以前的我可以连续几年坚持一个爱好，有空的时候就反复练习。但后来越来越短，现在更是对很多放以前会很感兴趣的东西、现在都只是想想而已，失去接触的勇气。

平时天天羡慕大佬画画怎么这么会，可恨自己一点都不会画，但想学的念头总是被摸鱼的念头所盖下去。而且，画画在众多爱好里属于更是需要大量练习的那一类，学习曲线非常平缓，即便是一副简单又好看的画背后很可能也是数年的练习积累出来的经验，抱着吊儿郎当的态度是学不好的。

或许这也是小孩子的兴趣班这么多的原因之一吧。了解的东西越少、人际关系越单纯、时间越多、越感兴趣，越容易沉下心去做一件事情。

当然，必须要承认的是，因为顺利完成学业、进入社会后而产生的安定感，让我在上班的这几个月里有点躺平。毕竟新的目标还得在接下来的日子去重新定义，没有明确目标总会让人缺少自驱力。不论是继续提升技术也好、培养爱好也好、尝试新事物也好，还望来年不要继续随意消磨时间，尽快调整好自己，到达自己想要的状态。

尾

因为是毕业年，2021 年经历的变化很大，不过又随着时间逐渐安定下来。

2021 年得到了很多第一次的体验，第一次当主持、第一次租房、第一次坐飞机、第一次感受北方的气候。

2021 年搭好了自己的博客，开始写点可能会被以后认为是黑历史的东西。

2021 年虽然出去租房了，但还是合租，没能实现独自居住的愿望。

2021 年，感觉自己又老了一点，自愈能力和以前完全不是一个等级了。自从 4 月份不小心把耳道抓破皮后，就算已经痊愈了仍然一戴耳机就发炎，让我退了耳机的坑。

2021 年粗略估计完整看完了 40 多部动画，最喜欢的作品是《Sonny Boy》。

2021 年的疫情还没结束，偶尔幻想的独自旅游计划总是因此打退堂鼓。

2019 年过年剪掉的长头发，2021 年又逐渐留起来了。

在脱离单身之前，希望还能多多享受一下单身的自由。

「积累」的欲望

Fri, 16 Feb 2024 00:00:00 GMT

「积累」的欲望

在上高中之前，我的游戏瘾很大。

父母曾允诺过的「周末完成作业就能玩一个小时游戏」早就满足不了我了，只要一有机会我就会变着法儿偷偷打游戏，父母要是出门，不在家多久，我就打游戏多久。当然每次被抓到都少不了一顿痛批。

但随着年龄的增长，我开始思考在游戏上花费大量时间，到底有没有让我得到相应的价值：单机游戏还好，能玩得下去的游戏总是非常有意思的；而到了网游时代，越来越多的游戏会通过卡等级、卡装备等方式，使你迫不得已对着同一个副本肝上许久；后面更是出现了体力等限制，玩游戏变成了「每天都得花一定时间去刷本不然就亏了体力」的如同上班的枯燥日常。

许多事物最开始的体验总是最好的，而后总是愈发会感到枯燥。一本看完的小说很少会再看一遍，游戏也是如此。当游戏进入到枯燥地重复刷本阶段时，也是我对游戏价值怀疑最深的时候：「为什么我要忍受着枯燥、花大量时间在一个终究会被我弃坑的游戏上，且它在被弃坑后并不能给我带来任何实质上的好处？」

当时的我并没能给出解答，于是我开始认同「玩游戏等于浪费时间」，拿着这些时间我可以去做更多有意义的事情，学习更多的东西。

后来我才逐渐意识到，即便不玩游戏，也会有另外的娱乐方式代替游戏在压力稳态调节的生态位，时间在这其中的支出是必然的。人总需要调节自己的压力，游戏是一种合适且有效的释放压力的方式。

而更重要的，其实不论是在网游里重复地刷副本，还是坚持练习一项技能，能够克服枯燥感的动力本质都是源于我们「想要积累一样东西的欲望」。

为了积累自己的钢琴水平，不断地弹奏练习曲；为了提高自己的得分能力，不断地练习投篮；而需要不断重复游玩相同内容的游戏对我们来说可能亦是如此。在游戏中我们不断地重复、不断地积累，最终让我们在刷到一定等级时能够进入更高阶的地图，在刷出好装备时为打败更强的 Boss 提供保障。

将时间想象为货币，辛苦积累时间得到的事物就是花了大价钱购买得到的奢侈品。正是因为每个人可供挥霍的时间货币的数量往往都相差不多，才让每个人都能感知与衡量「积累」的份量和价值。

思维发散开来后，我开始想到赚钱是因为对财富有积累的欲望，每天都会听「日推」的歌曲是因为对红心歌曲有积累的欲望，甚至探店也是对于「在下次和朋友出去时能选择的店铺」数量+1 的积累的欲望。

于是我逐渐理解了游戏枯燥刷本行为背后的意义，并尝试感受「积累」所能给我带来的安定感。可惜在这之前，我已经找不到儿时那种沉迷游戏的乐趣了，变成了偶尔玩一把游戏只为寻求放松的普通人。

少年能有多少年

Mon, 05 Jul 2021 00:00:00 GMT

少年能有多少年

每个人都应该拥有一个属于自己的网站

Sun, 20 Jun 2021 00:00:00 GMT

一是小作文，二是技术实现。

一

在人生的前十八年，我未曾想过自己会走上编程的道路，更没有想过有一天会拥有一个属于自己的网站。

小学的时候，我偶然通过同学了解到了转笔这项爱好，在学会了一招后一发不可收拾，想要学会更多的转笔招式。为此，我在网上搜索关于转笔的信息，开始泡一个叫做 pserhome 的论坛，在傻乎乎的年纪里和陌生人在网络上灌水。

而在该论坛进行一次大更新改版后启用了一张新的主页，让我第一次意识到网页也可以做得非常炫酷。新的主页被作为一个全局的网站导航，放上了一个占据全屏大小的轮播器，展示通往不同子域名的 Logo，而论坛则成为了其中一个子域名「bbs」。

根据几乎忘光的记忆简易复原图

黑色背景、仅允许横向滚动、3D 纵深视差效果、外发光特效，在当时都是非常少见的界面设计。在那个设计平庸的时代，这个主页炫酷到甚至让我没事就喜欢打开网站滚两下，尽管在那时那些特效足以让我的电脑卡成 PPT。

初中的时候，迷上一个叫龙之谷的游戏。但父母是从来不想看到我在打游戏的，所以我还得偷偷摸摸地玩，父母一来我就得装作正在用电脑查阅学习资料。

但是游戏窗口并不能隐藏起来，于是乎就经常出现被突击检查时，老爸或者老妈指着任务栏里显示的龙之谷臭骂一顿。

好在一次我闲逛贴吧时，偶然发现了一款小工具 DN Hider，让我能够一键隐藏窗口至右下角的隐藏小图标中，这在后来无数次「救」我于水火之中。

这个小工具的界面除了一个大大的按钮以外，左下角还有制作者 Lawcy 的主页跳转链接。那个主页的副标题让我的印象十分深刻，一直到现在都还记得：

宅技术拯救世界！

——这是我第一次知道还有「技术宅」（「宅技术」）这个词。这个个人网站虽小，样式普普通通，但上面也展示了作者的一些挺有意思的小玩意，不由让我想要更多地了解作者是个怎样的人，这些小玩意都是出于什么想法实现的，为什么要倒装「技术宅」为「宅技术」……或许这个主页只是偶然遇见，但可能就成为了我对于「技术」、对于「个人网站」的启蒙。

可惜该主页是基于当时的「百度 Hi」实现的，随着百度 Hi 的消失，现在已经无法再找到。

高中三年的住宿生活，让我告别了电脑游戏，也逐渐埋藏了一些曾经的兴趣爱好。高考结束的那个月，我第一次开始思考自己之后要往什么方向发展，学什么技能，将来会想从事什么工作。因为我觉得电脑很有意思，互联网很有意思，于是选择走上了修读计算机专业的路。

入门是入门了，但其中还有许许多多的发展方向，例如经典前端与后端，例如客户端、游戏、算法等等。按照我的喜好，看起来肯定是会毫不犹豫地选择前端了，但实际上我还是在做出选择前查阅了许久的信息，犹豫不决。前端其实也是近几年才发展起来的，对于当时接触不多的我来说，一些针对前端的历史偏见曾一度动摇我的想法。

最后我仍然选择了前端，这是除了在了解更多新的信息后开始看好前端未来的发展以外，也是想要通过前端实现我的许多的小想法，做到学以致用、乐于其中，而不仅是恰饭的工具。

实际上，前端就是这样一个很有意思的东西。天生开源、跨平台，借助 NodeJS 做后端，借助 Electron 做桌面软件……许多想法都能够得以实现，最接近用户，也最容易被用户感知，我想这些特点很难让每一个想要捣鼓小玩意的人所拒绝。

我做的第一个前端项目便是一个花哨的个人主页（文章总结）。它满足了我的设计欲望，不过其实还没能满足我的分享欲望。我有逛陌生人的博客的习惯，点开别人的 Github 主页时，都会在心中暗自期待页面上贴有他的个人网站。除了扒拉扒拉网站的实现细节以外，更享受陌生人通过网络分享文字与情感的过程。

于是乎，经过一顿开发，第二版的 ceynri.cn 成功落地开张。赶在走出象牙塔之前，完成了一个之前未曾想过的梦想。

二

在搭建本站之前，我简单列了一些需求：

网页是静态的
框架前端友好
主要是博客，辅以其他可能的展示页
博客的界面设计要克制，内容为主
保留 v1 传统，安排一个炫酷的页面（手痒）

框架选择

经过简单调研，首先确定使用 JAMStack* 作为基本工具，将熟悉的 markdown 文档转换为 HTML 网页。而在众多 JAMStack 中，我又排除了使用模板语言的 Hugo、Hexo 等框架，期望能有一款基于 Vue 或者 React 的框架。

*: JAMStack（JavaScript, API, Markup Stack）是一种使用 Static Site Generators (SSG) 技术、不依赖 Web Server 的前端架构。

Gatsby 是一个非常优秀的 JAMStack 框架。但考虑到我的 React 技术栈还没有点亮，出于时间（懒）考虑，更希望有合适的 Vue 框架。

VuePress 是 Vue 框架中算是比较嫡系的 JAMStack 了，事实上我也曾经使用它搭建了我的个人笔记网站（开源地址）。但是在使用 VuePress 的过程中，我逐渐感觉到它更适合作为开箱即用的文档网站生成器，而非一个需要高可定制化的博客网站生成器，这也是为什么我没有在笔记网站写博客，而要再创建一个网站的原因。

经过对比，最后我选择了比较新的 Gridsome 框架作为我的博客网站生成器。Gridsome 更多参考了 Gatsby 的设计方式，将 Gatsby 的特点从 React 迁移到了 Vue 平台来。相对于 VuePress，Gridsome 有着以下的区别：

提供的功能更为抽象，许多能力通过 API、插件提供，插件生态更好；VuePress 则帮忙配好了默认主题，侧边栏、顶部栏、上下页跳转等功能通过配置即可启用
Theme 的概念成了更模糊的 Starter，更加便于熟悉 Vue 的开发者做个性化定制
支持多种数据来源，如无头 CMS、API、Markdown 等（虽然在国内其实没什么好用的无头 CMS）
自带渐进式图片加载等增强特性
在数据层，使用 GraphQL 作为数据管理

以上特性最终决定了 VuePress 更适合（前端小白）快速生成文档网站、Gridsome 更适合开发者构建定制化内容网站。当然，随着实际使用与开发，其实也能感受到 Gridsome 作为新框架在某些地方还存在着进步的空间，但其特点和 Gatsby 倒是大差不差，十分符合我的开发需求。

页面划分

为了满足手痒的需要，专门留下主页单独设计样式，与博客的风格相隔离，以便于日后实现更多的花哨效果（目前还没有）。

博客的基础模板选择了官方的 Gridsome Blog Starter ，在其基础上进行魔改。该 Starter 在提供基础的博客网站功能之外最大限度地留下了 DIY 的空间，没有太多冗余的东西。

Gridsome Blog Starter 模板

博客作为网站的主要部分，下设 About、Archive、Tags 等个人博客经典基础页面。另提供 RSS 订阅方式，鼓励更多的人能够尝试学习使用 RSS 订阅作为主动信息获取的一种方式。

好在 Gridsome 的插件提供了分页、分类汇集等功能，借助 GraphQL 的数据筛选能力，实现这些功能还算轻松方便。

配色方案

博客设计的总体要求当然是尽可能的克制，虽然经常都忍不住。

在配色方案上，博客主题配色支持了亮/暗两种配色方案，通篇选用黑白灰作为主配色。甚至我让强调色「蓝 #0000ff」/「红 #ff2222」在绝大多数时候都隐藏起来，仅在诸如鼠标悬停等时候作为高亮色显示，以期望最大程度上减少对阅读的干扰。

亮色方案的背景色选用了一种较为偏蓝的白 #f6f9fd。这个色系的灵感来自于魅族 Flyme 系统播放音乐时的锁屏界面底色，它让我有一种非白胜似白的温润玉感。

暗色方案的背景色则是我个人比较坚持的纯黑 #000000。实际上，对于阅读而言白纸黑字最容易被人接受，哪怕是暗色配色方案，大多数设计者都会选择深灰作为背景。选择纯黑完全是我个人对颜色的喜好，哪怕它可能不是最合适的。

红黑是一种经典颜色搭配，哥特服就常常选用黑红作为配色，互相衬托红与黑的帅气；蓝白则是一组相对的配色，因为蓝色的镇定感让蓝白几乎成为了各大科技公司的首选配色。

但本站在配色上故意进行了错位搭配，期望红白更加亮眼、蓝黑更加深沉。为了削弱红色在传统白底语境下的警告意义，我对强调色增加了发光效果处理，凸显该配色的装饰性。

多端适配

前端网页总是离不开对不同屏幕尺寸设备的适配支持，而响应式布局是经典的解决方案。本站针对不同的设备宽度设置断点，实现不同的样式。

宽屏状态下，采取经典两边留白的居中样式：

对于屏幕稍窄的笔记本屏幕，在基本保留原有样式的条件下，侧边栏宽度不变，挤压右侧的内容空间：

对于更窄的电脑屏幕和较宽的电脑平板，内容空间难以继续挤压，这里选择直接放缩整个网站的（字体）大小，从而容纳更多内容：

对于窄平板，取消双栏设计，更换布局为纵向布局以更适合移动端向下滚动的逻辑：

对于手机，收窄了左右空余边距，以更好地容纳内容：

动图演示如下所示：

评论系统

评论系统有好一些不同的现成组件，我在其中挑选许久，发现主流的几个能用于静态网站的评论系统都并不是那么的符合我的需求。

先说说比较出名的：

Disqus - 最多人使用的「重量级」评论组件
Gitalk - 基于 Github Issue 和 Preact 的评论组件
utterances - 基于 Github Issue 轻量级评论组件
remark42 - 自建后端服务的评论引擎
Valine - （已闭源）基于 LeanCloud 的评论组件

首先，Disqus 虽然被很多网站使用，功能也非常齐全，但其臃肿的组件和资源大小，还有各种内嵌广告让我第一时间排除了他。

Gitalk 我曾经使用过，它可以细致调整前端样式，而 utterances 使用 iframe 嵌入，只能调节整体布局。但 utterances 在配置上更加简洁容易，默认的 GitHub 样式也非常好看，Gitalk 的配置方法相对于 utterances 有些老旧了（不知道后面更新了没有）。

因为 GitHub 常年被墙、且 issues 总是会默认提醒发邮件给所有参与讨论的人，所以非基于 GitHub 的 Valine 和需要自建的 remark42 看起来可能合适一点。

其中，Valine 目前已经闭源，而它的衍生替代者 Waline 看起来也还不错，通过白嫖 LeanCloud 服务器部署评论系统服务，这两个实际上比较接近我的需求，但取决于 LeanCloud 的稳定性。

而需要自建的 remark42 在配置部署上相对麻烦不少，看晕了直接 pass。

综上，虽然期望一个能够带有评论审核、墙内能用、配置简单的评论系统，但如果我的要求一一符合，少不了折腾与折磨。

为了不折腾，于是我先暂时选择了与轻量级的 utterances 非常相似的 giscus 作为我的第一版评论系统。giscus 的特点是使用了 GitHub Discussions 而非 Issues 作为「数据库」，从长远角度看来它更加符合语义、上限更高。但目前它还是一个刚刚起步的项目，我也不知道后面会不会好用一些 🤕。

如果在实际体验中 giscus 无法满足我的需求的话（比如 GitHub 被墙的问题比较严重），或许会考虑下 Waline 并自己重写一下前端样式。

开发过程

ceynri.cn 一直都是开源的 GitHub 个人项目。也因为开源，所以常常监督自己把代码写好看一点。

在第二版的开发过程中，我偶然想到可以自己给自己提 issue，用 Projects 规划项目开发的整体方向，管理开发进度。实际体验下来感觉很好，将小目标一件一件完成是一个非常有成就感的事情，同时 issue 顺便充当了 TODO 备忘录的存在。

因为部分文章并不想在网络公开，同时为了更加便于管理内容，我将博客的内容与网站代码做了隔离，分成两个 git 项目。内容的私有 git 仓库以子模块（git-submodule）的形式实现，内嵌于整个项目中，从而并不影响整个网站项目的开源。

因为好歹也不再是啥都不会的小白了，总体开发速度上比第一版顺畅得多，也就在 GraphQL 的数据管理方面稍微踩了些坑，配着 Gridsome 还算完整的文档也算是把大大小小的功能和问题都解决了。

总结

虽然文章标题取为「每个人都应该拥有一个属于自己的网站」，但显然这只是一种烂漫的愿景。不说搭建网站的技术门槛，大部分人在网络上也并没有表达的欲望，只不过我正好是喜欢阅读陌生人所分享的内容罢了。互联网常被我当作另一种意义上的虚拟社会，那么搭建一个个人网站，也就像在这个赛博世界里某个小角落，安上一处家。

封面：对着博客主页玩了一下德罗斯特效应的递归效果

博客「序」

Wed, 02 Jun 2021 00:00:00 GMT

博客「序」

「保持思考」 —— 我经常用这条祈使句告诫自己，这是因为我相信「思考」是人有别于其他动物的特权。

这并不是在要求自己凡事都要多加考虑。很多时候，在我面对繁杂的事物时，往往我的思维会变得不再清晰，在选择上容易出现差错，从而导致更大的损失，这时保持思考就显得非常有必要。

实际上，在当我产生迷茫时，「保持思考」往往更多是一种精神象征或者说是心理暗示，督促我保持清醒，去选择寻找事物的最优解。博客首页的「Stay thinking」，其实便是模仿自 Jobs 的名言——「Stay hungry. Stay foolish.」

思考的意义或许就正是如此，它只是这样一个工具，帮助着我去理清现实。

或许是养成了这样的习惯，每当大脑空闲的时候，一些想法经常会在脑内围绕着某个话题不断发散，在漫长的自我辩证与总结中产生或有意义或无意义的结果。

然而，这些想法好比白日梦，随着时间很快便会飘散，归为混沌。好似于知易行难，「思考」和「将这些思考记录下来」对我而言同样也经常出现断档。这不仅仅是因为思考是连续而漫长的过程，此外，将抽象的思维沉淀为具体的文字也是一个非常需要仔细雕琢的过程。因此，我也十分钦佩善于使用文字记录自己日常思考的人，并正向着这样的人学习。

对我而言，我并不抵触通过博客记录思考的方式，因为我觉得文字的意义之一便在于与人分享。这里的「人」可以是互联网中千万毫无交集的某位陌生人，可以是主动想要了解更多的我的朋友，更可以是未来的我。每个人都有着不同的世界观、价值观、人生观，但相互之间仍然可以产生些许交流。对于这些文字的认同与否并不重要，重要的是其中产生的思考能否创造一点微小的价值。

我也不乏对旧有的一些文字感到稚嫩和矫揉造作，事实上也总是如此。然而，成长就是这样一个不断认为以前的自己愚蠢的过程。给时间留下文字的印记，也是给未来的自己留下一点参考。

好在大学四年忙碌过后，得闲一段轻松的自由时间，终于在 2021 年将属于自己的博客网站支楞起来了，也算是在互联网的海洋中正式踏出独立分享的第一步。而比博客网站更早的文字亦进行了些许地整理，并挑选合适的补充进来。

在这里，我记录文字，将思考归档为一篇篇博客，跨越时间、跨越空间，分享给所有来到这里的人。

从 toFixed() 看「四舍五入法」的正确性

Sun, 05 Sep 2021 00:00:00 GMT

从 toFixed() 看「四舍五入法」的正确性

前言

「四舍五入」这条规则是每个人从小学就学到的一条小数舍入规则，无非是看舍去位是小于等于 4 还是大于等于 5。

那时候的我觉得它好像是公平的。

「0、1、2、3、4」一组，「5、6、7、8、9」一组，每组五个，谁也不欠谁。

但是，我的心里又总觉得哪里有些不对，苦于说不出来最后只好作罢。

但长大后，当我使用到 JavaScript 的 toFixed() 函数时，却惊讶地发现：它并不是一直都会四舍五入的。

(1.35).toFixed(1); // 1.4
(1.45).toFixed(1); // 1.4

为什么对于相同的尾数 5 的舍入，结果却不同呢？

我简单查阅了一下资料，有些人这么解释道：toFixed() 使用的是「银行家舍入法」。

银行家舍入法

什么是「银行家舍入法」呢？

银行家舍入法是由 IEEE 754 标准规定的浮点数取整算法，大部分的编程软件都使用这种方法。

该方法又被称为「四舍六入五取偶法」或者「四舍六入五留双法」。其规则是：

当舍去位的数值：

小于等于 4，直接舍去该位
大于等于 6，向前位进一
等于 5
- 5 后有数，向前位进一
- 5 后全 0
  - 5 前位数值为奇，则向前位进一（将前位凑成偶）
  - 5 前位数值为偶，则直接舍去该位

为什么会有这样的规则呢？如果银行家舍入法是对的，那我们一直以来十分信任的四舍五入岂不就错了？

我们先了解一下，为什么叫做银行家舍入法：

假如我们使用四舍五入法，且假设银行收到的钱中，要舍入的那位数在 0~9 是等概率的，那么假设银行分别收到了0.0, 0.1, ..., 0.9元，然后通过四舍五入法，银行能够得到五个0.0和五个1.0。

但是实际上，银行收到的总共的钱0.0 + 0.1 + ... + 0.9 = 4.5元，而银行日后却得为客户付还1.0 * 5 = 5.0元，这样银行就亏了0.5元钱了。

啊这到底是怎么回事，为什么看起来公平的事情，结果又变得并不公平？

有人可能发现了：在「舍去阵营」中，0.0其实并没有任何的损失，而「进位阵营」则或多或少都有好好地赚一笔。

那这样的话，我们不如不再考虑舍入位为 0 的情况，只取舍入位为 1 到 9 的情况，那么中位数就是 5 了，小于 5 的 1234 舍弃、大于 5 的进位……

等会，那 5 该怎么办？

于是银行家们又想到，要舍入的位置的前一位的数是奇是偶的情况是等概率的。

那么我们可以规定：

舍去位为 5，且其前位数值为奇，则向前位进一
舍去位为 5，且其前位数值为偶，则直接舍去该位

那么，这样就完美了么？

其实不然。银行家舍入法规定：当 5 作为舍入位时，舍入位后全为零时才根据其前位分奇偶舍入。否则直接进位。

为什么呢？其实也很好理解：

如果舍入位为小数的最后一位（也就是舍入位后全为零），那被舍入的尾数是离散的、可枚举的 0, 1, 2, ..., 9，1, 2, 3, 4 和 6, 7, 8, 9 分别一组，5 看情况对半分；
如果舍入位不是小数的最后一位，此时被舍入的尾数是连续的、不可枚举的，此时 0.5000... 才是这个舍入区间的中位数，0.499... 与 0.500...1 是对称的。

四舍五入的「正确性」

如果你已经认可了银行家舍入法的正确性，那你不可避免地要对四舍五入法产生了怀疑三连：四舍五入法错了吗？它又错在哪呢？为什么大家都用它？

我们回过来看看「四舍五入法」。

实际上，如果考虑无穷多位小数，那 0.5 整其实只是 (0.000..., 0.999...) 这个区间一个很小的点，从概率而言是约等于 0 的，所以在这种情况下，四舍五入确实做到了「五五开」。

但问题就是，我们遇到的小数一般都是有穷小数，如果我们只约去小数的最后一位，那么确实就出现了 0.1, 0.2, 0.3, 0.4 与 0.5, 0.6, 0.7, 0.8, 0.9 不对等的情况。

这就造成了在数学上，我们的「四舍五入法」是理论正确的；但在实际生活中（如以上的银行存钱问题），基本上都是有穷小数。无穷小数的「缺少」导致了四舍五入法不再严格正确。

那话就说回来了，为什么我们还在使用四舍五入法呢？

答案其实是很简单的，只有两个字——方便。

另外一个方面，如果我们约去的尾数位数比较多，误差就会变得很小。

比如，如果我们约去的不是一位数而是两位数，那么从0.01到0.99一共有 99 个数想要被约为整数 0 或 1，比例就变成了49:50，这之中的误差已经非常小了。

所以在约去的小数位数较多时，四舍五入仍然具有很好的使用价值。

而我们如果需要涉及到严格的情况时，则再采用银行家舍入法即可。

后记

说是 toFixed() 使用的银行家舍入法所以表现起来不是四舍五入，但是在 Chrome 浏览器的实测中，我注意到它也并不一定都符合银行家舍入法：

(0.45).toFixed(1); // 0.5 而不是0.4
(1.45).toFixed(1); // 1.4

个人认为，这可能是由于浮点数存储精度问题导致的。比如这里的0.45其实类似于0.4500000002，存在一点点尾数，所以进行了舍入变为0.5。

因此，有人认为在严肃的情况下不应使用 toFixed()。所以说，如果你想要在 JavaScript 中实现四舍五入法保留两位小数，那还是乖乖 Math.round(num * 100) / 100 吧~

如果还有更加复杂的计算情况（比如需要对某数值乘上若干倍再进行四舍五入），就得借助现成的开源库（例如 big.js）来帮助避免精度问题了。

记第一次建站的心路历程

Thu, 03 Jun 2021 00:00:00 GMT

本文所记录的页面现已暂停使用，仅保留体验地址 https://v1.ceynri.cn/.

准备

在编写「山风的小角落」个人主页之前，我还是一个接触前端刚满半年的萌新，平时囿于学业的繁忙，在大三上学期期中以后，有关于前端的学习时间被压缩地越来越少，期末阶段更是天天通宵直到期末结束。我自认为我当时的水平可能还不够达到熟练编写出自己心中想要的网页效果的水平，甚至在一开始，我都完全没有想好网站大概的模样。

但我又是一个不喜欢做没有二次利用价值事物的人，不喜欢花大力气做一个纯练手的某电商商城页面，然后自己也没心情写 README 就丢到类似项目数之不尽的 Github 上再无翻阅，我希望学习实践的产物最好能够切实地有所用处。于是我抱着半学习半实践试试看的态度，在寒假中开始着手于会实际投入使用的个人网站主页的编写，并尽可能地实现新奇的效果，哪怕别人来看也能从中有所收获。

起步

做过设计的人应该都有过这样的体会：对于一个没有积累过的领域，空想很容易陷入瓶颈之中，做出来的东西甚至连自己都觉得无味。我一开始也陷入了这样的困扰，做了近一个星期仍然在构思，表面上在做细节修改，实际上内容基本停留在第一个版面（大标题与背景图）没有进展。

↓ 最刚开始实现的 hero 版面排版（也保留到了最后）

好在过去的经验提醒了我一条打破僵局的办法：通过大量浏览他人的设计稿，从中打开自己的视野，提取出其中的亮点，再抽象化为设计要素，用自己的语言在实践中将其合理地搭配与表达，是快速上手的捷径。

于是通过简单的网上冲浪所得与个人想法相统一，一些简单的视觉要素就被确定下来了：暗色主题、大色块、大字号、扁平、透明、渐变、视差效果。可以看出一开始所确定的要素基本都是样式特点，而后续添加的要素多偏向于细节，不影响主要元素的表达。

↓ 收集的部分设计稿（出于版权保护做模糊化处理）

灵感

大方向是有了，但其实还是过于抽象，如何将其表现出来对于新手来说还是一个不小的问题。短暂的进度推进后，我选择的是查找一些已经完成的网站（而不是设计图）进行观摩以提供灵感。

当然，诸如淘宝、知乎之类的普通网站为了稳重和功能性，往往会缺乏个性，大多只适合用来参考某些要素以及多终端适配的代码实现；更好的参考对象当然是同为个人网站的页面，或者提供网页重构相关教学的网站。

在这方面上，国外的网站给我的感觉而言相对更加重视设计与交互体验，我也从中受到了不只是设计也有代码实现上的帮助（相关网站文后附注）。

不过在接收到海量的灵感后（冲浪上瘾了），在许多互相冲突的要素中进行取舍可把我折腾了许久。毕竟要素不是越多就越好，过于杂乱会丢失美感，产生视觉疲劳。经过几天的学习（借鉴）与头脑风暴，在网页的构建过程我逐渐地明晰了自己想要实现的东西。

实现

虽然说网页设计对我而言是第一次，但在代码上吃的苦头可比设计更多。很多排版可能在脑海中已经足够具体了，但表现在网页中，常常被奇奇怪怪的规则所打乱。好在这些基础知识都是有迹可循，顺便还能丰富一下我的笔记本，下次实现类似效果时可以参照着之前的经验来完成。

不过到底还是经验不足，一些刚开始预想好的效果，有些已经实现好了，但在后面又带来了其他的问题，不得不删掉的代码可有不少；因为刚开始写的代码比较稚嫩，后期为了让代码更漂亮，又进行了好几次代码重构，花费了不少时间；网上的样例看似简单，但不同的元素组合在一起会产生许多的问题，优化代码结构与不断地调试可谓家常便饭。

最惨痛的教训可能还是一开始对于 JavaScript 的不信任以及对 CSS 动画的盲目崇拜，让我产生了「单单用 CSS 的perspective属性就可以实现全局的各种元素的视差滚动效果」的错觉。我花了许久搞懂属性之间的关系后，好不容易实现了多层级嵌套的情况下对「各种相互没有关系的元素」予以统一的视差滚动，又精打细算地调整了一番细节上的参数，正沉浸在克服困难的喜悦中，就差打开笔记本记录下相关的知识要点了，结果最后打开 Firefox 浏览器打算检查一下兼容性，才发现出大问题——这玩意在 Firefox 上根本就不生效！

坑点：perspective属性在 Chrome 浏览器中可以被子级继承，Firefox 浏览器中不被继承

于是乎，在简单的挣扎了一下之后，JavaScript 真香 👍。借助 TweenMax.js 的强力支持，代码直观又漂亮，动画运行起来也丝毫不输 CSS。（CSS 是有极限的！我不做动画啦！JS！）

当然，将问题一个一个解决并总结反思、预想中的效果逐渐实现是非常具有满足感的过程，我也乐在其中。而今年（2020 年）春节期间碰到了新冠肺炎这等糟糕的事，得以每天宅家的日子里对着电脑从早写到晚我也丝毫不觉得无趣，可能这就是代码与设计相结合的魅力吧。

建站

代码写的差不多了，自然可以准备尝试发布页面到服务器上在不同的平台中观察效果了。

虽然有免费的 Github Page 方案可以发布网页，但对于已经使用过它来搭载笔记内容的我来说，不科学上网就加载巨慢的问题想要发布给一般人浏览是不能接受的。经过多种方案的考虑，我选择较为实惠的阿里云学生机的轻量应用服务器方案（24 岁，是学生.jpg），直接用宝塔面板安装相关环境发布页面还是挺方便的。

不过因为是大陆服务器的原因，想要绑定域名是一定要备案的。这里比较坑的是，阿里云服务器需要购买的时长超过三个月才能帮你备案。不过学生机三个月也不到 30 块钱，买来体验一番也是超值的。其他方案例如买国外的 VPS 来建站虽然不用备案，但是主流 VPS 厂商中比较便宜的搬瓦工也要近 50 美刀/年，作为学生学习使用还是需要考虑一下（当然不用备案、能搭梯子的好处也是值得的）。

后记：2021 年后阿里改政策了，没得一直续便宜的学生机了

域名方面，我选择的是.cn结尾的域名而没有选择最常见的.com，原因有三点：

它比.com要相对便宜一点，且在中国知名度不低
相比常见的.com，.cn更短更简洁更具个性
我自取的英文代号 ceynri 可以按音节划分得到首字母c与n（其实这条理由是写到这里时才想到的）

每个人选择域名的理由有千万种，不论出于个性还是好记，选择自己喜欢的域名是最重要的。

备案各种流程虽然麻烦，不过我的备案号从申请到发下来只用了 10 天（其中阿里云审核拖了 3 天），在新冠肺炎全员缓工的影响下这个速度应该还是算快的了。

冲冲冲，让我们把域名解析好，用手机通过域名来访问自己的网站……好的，卡成 PPT 了（掩面）

那个瞬间，我忽然明白了，为什么我之前看过的电脑端非常花哨的网站，到了移动端便返璞归真。原来不只是移动端的屏幕尺寸受限，性能羸弱也是问题之一。

优化

于是我很好的把握了优化的强力杀手锏：「把引发性能问题的东西都干掉就不会有性能问题了」（x）

虽然玩笑归玩笑，但确实由于硬件的限制，比起无关紧要的特效，流畅（起码不要过于明显的卡顿）才是第一重要的视觉体验。于是个别原本已经专门为移动端适配动画效果写好的代码只好删掉，反手再添加更多的媒体查询来禁用不必要的 JavaScript 代码。

当然，也有不少代码存在可以优化的地方，每一次的「重新阅读代码、重构代码、精简代码」都是值得的。

再见了，移动端。

如果有机会的话，我会回来再为你添加一行东西——「从 PC 端访问本页面以获得更好的体验」

最后

在大体风格都定下来之后，就是不断地迭代新效果了。「构思-敲码-适配-测试-优化」不仅在整个时间线上是这样的顺序，在每个小特性实现背后都是如此谨慎地推进进度以确保页面的稳定性。

虽然只有一个页面，但其实我花了将近一个多月的时间去完成它。在一开始的编写过程中，我有时会因为自己终于实现了一个炫酷的效果感到巨大的喜悦，但很快又会意识到我所花费的时间和我当前的完成度相比，会不会让别人感到不成正比。确实，在不断地栽跟头中，我经常会不自主地拿别人的网站完成度和自己现有的完成度进行比较，不由自主地就会产生一丝空虚感，希望自己还能够再快一些，提升自己的代码水平。

虚心与努力都是必要的。不断地尝试与调试，让我也终于得到了可以被自己认可的第一版个人主页。虽然它在许多方面可能只能差强人意，但我相信它的小问题在日后空闲的时候会被修补完好，没能实现的效果也能在下一个主页版本中被有所尝试。希望它能在某个地方让你眼前一亮，也希望它能收到宝贵的评价与意见 😊

有关建站背后具体的技术实现以及设计理念，可以阅读《第一版个人主页的设计与实现》

其他

灵感来源

folio of alex van zijl 鼠标交互和透视效果很酷
castor & pollux 第一屏的页面下滚提示以及大圆圈光标的灵感来源
born & bred 页面的流畅体验非常好

特别感谢

Codrops 发布了很多很多的交互动画效果样例与教程非常值得学习
翁天信 · Dandy Weng 的个人网站主页在我刚入门前端时第一个在视觉体验上给我眼前一亮的个人主页

第一版个人主页的设计与实现

Tue, 09 Apr 2024 00:00:00 GMT

注意：本文所记录的页面现已暂停使用，仅保留体验地址：https://v1.ceynri.cn/

关于本文所提到的页面对应的搭建心路历程，可以先行阅读《记第一次建站的心路历程》。

本文全文较长，故提供简要的目录说明内容结构：

技术要点

JavaScript

效果实现

性能优化

CSS

HTML

移动端

网站

设计思路

色彩

样式

交互

手法

技术要点

本站的实现对我而言是一次较为完整的学习与实践，对本站所用到技术相关内容进行简单的记录。

JavaScript

效果实现

光标
页面载入动画
平滑滚动
渐变滚动
视差滚动
视差浮动
3D 透视
进度条

TweenMax.js

TweenMax.js 提供了丰富的缓动动画效果，具有较高的性能与非常好的兼容性。本站在绝大部分元素的以下属性的变化上，都使用了 TweenMax.js 进行动画处理以求达到流畅的视觉效果体验：

元素大小
元素的空间属性
颜色变化
透明度改变

使用最多的是 TweenMax.to() 函数，其能接受 paused 参数将动画保存下来，然后对保存的函数调用 play() 与 reverse() 方法实现动画的正向/逆向播放。

reverse() 虽然大大简化了代码，使代码更加漂亮，但也给我带来了不少的 bug（主要是动画相互冲突的 overwrite 问题）。

光标

光标代码是我写的最大的一个 js 文件，其大致流程是：

绑定页面内的光标元素组 -> 设置相关属性 -> 生成动画 -> 为不同元素的事件绑定相应的动画

为了设计光标的交互效果改了不少的版本，更麻烦的是鼠标这种掌握在用户手中的元素很容易产生许许多多的 bug，调教好它是我花费时间最久的一个部分。

页面载入动画

因为页面的内容比较重视整体，所以让用户看到未加载完成的页面一点一点并不连贯的加载并不美观，引入载入动画，让其在页面加载完成后再显示主题页面，在视觉上使加载页面的过程是连贯的（因为加载中时的页面内容是被遮挡住的）。

但坏处是如果用户访问页面时有文件请求被阻塞、或者网速过慢，使页面一直处于加载状态，可能会导致整个页面无法浏览，一直被载入动画的遮罩挡住。解决办法是超时时引导用户重新刷新页面、或者强制播放载入完成动画显示页面的已加载部分。

滚动

滚动效果方面分为了平滑滚动、渐变滚动和视差滚动三个部分，分别负责不同的效果。

其中，平滑滚动的实现是将整个页面的所有内容作为一个元素包裹起来，并且不与 body 元素绑定，即浏览器窗口滚动时，并不会造成页面的滚动，从而屏蔽默认的滚动效果。再用代码实现平滑的滚动效果，让页面接收到滚动事件时执行相应的缓动动画。

渐变滚动指的是页面的第二部分——「about」部分，文字的渐入与渐出效果，通过监听当前文段在窗口坐标系下的坐标改变透明度实现。

视差

视差滚动则对于特定的元素监听滚动的距离，将其乘以对应的倍率即可。简单的元素可以使用 CSS 的 perspective 属性实现，但是如果元素稍微复杂一点、超出了一层的父子关系，则使用 JavaScript 计算对应的 transform 值来实现更加合适。（效果见上面的「渐变滚动」）

视差浮动是对鼠标窗口坐标的监听，改变不同元素的空间坐标，增强元素的空间感（仅运用在第一部分（主标题）和背景中）。

3D 透视

3D 透视指的是 My Works 部分有关鼠标于 work 方块的交互。首先实现的是基本类，允许 work 方块根据鼠标与其的相对坐标进行三维空间上的旋转，同时有 z 轴方向上的位移，以在旋转中能够产生透视感；再写专门的类去对应不同的 work 方块，增加它们之间不同的交互特性，给用户更加新奇的交互感。

进度条

进度条在这里承担了进度条的外观和滚动条的功能，所以在交互逻辑上需要在一般的滚动条基础上做改进。假设根据鼠标按下的位置划分为「在进度条已达到位置」和「进度条未达到位置」，则：

「点击」（鼠标按下后无移动即抬起），会跳转到对应的页面位置，无论其点击的位置是进度条已到达位置还是未到达位置。
「拖拽」则分两种情况：
- 如果是尚未达到的进度位置，则先跳转至鼠标按下位置所对应的页面位置，然后再允许用户拖动进度条；
- 如果按下的位置是进度条已达到的进度位置，则表现为滚动条的交互逻辑：不跳转页面位置，允许用户拖动当前的进度条以当前位置为起始点上下移动。

性能

流畅性

大量的交互动画往往会带来更大的性能问题，优化它们是非常必要的，毕竟流畅是网页浏览体验中最重要的体验之一，失去流畅感，即便再有意思也会让人觉得很可惜。

本网页陆续采用了几个角度对网页的流畅性进行了性能优化：

优化代码结构
requestAnimationFrame
调整EventListener
{ passive: true }
用低频动画代替高频动画
直接砍掉产生性能瓶颈的脚本

优化代码结构

优化代码结构是最朴实的方法，这一点不论在什么阶段都应该注意它。大的方面可以讲代码复用、方法提取，小的地方可以是 DOM 元素引用保存、if 判断结构优化等等。优化代码是一个很泛的目的，通过不断地学习、阅读优秀的源码，我们可以学到更多的精彩的代码写法。

requestAnimationFrame

对于做 JS 动画，requestAnimationFrame 是一个很棒的 API。

与 setTimeout 相似的是，它们会被「定时」执行，但不同的地方在于：requestAnimationFrame 会在浏览器进行每一帧的渲染之前执行并完成。

而与各种 EventListener 相比，requestAnimationFrame 一般在 1s 内只会执行 60 次，即 60FPS。EventListener 则没有频率限制，如果执行太快，超过了屏幕刷新率，会产生无效的渲染和重绘，反而导致页面的性能下降，出现卡顿。

而且 requestAnimationFrame 从语义上告诉了浏览器我们要执行一个动画，浏览器会去优化它，还可以根据当前 CPU 负载情况调整帧数。

EventListener

减少不必要的 EventListener 也是有效的方法之一。

我们不应该滥用 EventListener，这会导致一个事件的发生会执行更多的代码，如果我们仅仅为了在不同的代码区域获取鼠标位置而反复添加 EventListener，会产生较大的代码冗余的情况。

另外，可以不在 EventListener 内执行的代码都应该提出来放在外边执行，尽可能精简一个 Event 触发所要执行的代码。

对于不同的 EventListener，我们也要根据触发频率来不同的对待。像鼠标移出事件 mouseleave、点击事件 click 往往只会执行一次，即便事件回调函数性能稍差也不会带来巨大的影响；而像页面滚动事件 scroll、鼠标移动事件 mousemove，它们是相对连续的，往往会在一个时间段反复被触发。如果事件回调的代码消耗性能较强，则直接会对页面的流畅性产生非常大的影响。

而且如果可以使用低频的事件实现相同的效果，就不要使用高频事件。例如：我们需要在鼠标移入某一区域时改变该区域的背景颜色，如果使用监听该区域的 mousemove 事件是同样可以实现这样的效果的，但它每一次鼠标移动都会触发它，而其实我们只需要mouseenter 事件一次执行该效果就可以了。类似地，我们还应分清诸如 mouseout 与 mouseleave、mouseover 与 mousemove 的区别，选用更合适的事件以提升代码性能。

最后，如果某一个事件只用触发一次之后就不会再使用到，最好在该事件的回调函数中的结尾处进行 removeEventListener，这既是为了性能考虑，也可以节省不必要的内存占用。

`{ passive: true }`

除了要更加注重这些高频事件的代码性能以外，我们还可以通过设置 EventListener 方法的第三个参数为 { passive: true }，来更好地减少事件回调所要计算的代码。

{ passive: true } 的意思是让 EventListener 不再先阻止原来会发生的事件，即 preventDefault()。

对于默认情况，浏览器是不知道 EventListener 所回调的事件中有没有包含 preventDefault()，所以会先阻止默认事件执行，然后等回调事件执行完毕后再执行默认事件；但是大部分时候，我们其实并不会阻止默认事件，比如页面滚动，我们可能只是想获取滚动的参数，而不是禁止页面滚动。所以 2015 年 DOM 规范新增了 addEventListener 的第三个参数可以接收一个对象的规定，通过设置 { passive: true } 来使 preventDefault() 失效，使默认事件变得流畅。

这种优化一般只用于触摸、滚动事件，其他事件没有必要使用

减少高频动画

「减少动画」与我们原本「增加动画」的目的其实是背道而驰的，这里体现的是「理想效果」与「视觉效果」的权衡。

本网页一开始增加了许多的动画效果，并在开发的时候暂时忽略了流畅性的要求，而在后期进行性能优化时，发现过多的高频动画本身（如只要鼠标移动，标题、背景图就会跟着反方向移动；页面滚动时，若干元素还会自己增加/减少自己的滚动距离）就是一个性能瓶颈。到了这种程度时，最好能够考虑优化它们的触发方式以减少它们的频率。如果仍然有性能问题，最后的方法就是舍弃它们，以保证用户的流畅体验，这也是在保证其他动画的视觉效果。

其他性能

提到「网页性能」可能新手（包括我）第一个想到的是网页「运行」的性能，即网页浏览、动作响应时的流畅性，其实除了这方面，页面的加载与渲染速度同样是非常重要的指标。如果一个网页加载或者渲染得太久，用户的烦躁程度会大幅上升。对于这方面，我们可以从以下角度进行努力：

压缩代码、多文件合并
启用 GZip 压缩
压缩图片为 webp 格式、base64 转码内嵌
JS 代码异步加载/预加载（async、defer、prefetch）
懒加载
精简 DOM 元素个数
缓存、CDN 优化

CSS

作为偏向于视觉设计的网页，CSS 相关的代码也不比 JavaScript 要少。不过更多的都是排版相关的基础问题，碰到了只要解决后总结好基本下次变得更加熟练。

SCSS 预处理器
动画
- transition / translate / scale / rotate / opactiy
- animation / keyframe
- 复杂动画交给 JavaScript
性能
- translate3d / will-change
var 变量
fix-blend-mode

SCSS 预处理器

在本项目中我第一次尝试 SCSS 语法来编写 CSS 代码，实际上非常容易上手，简单阅读完文档并做好完整的笔记后，编写 CSS 确实要方便许多。

动画

动画方面，就是 transition 渐变效果与 CSS3 新出的 animation 属性相配合，多加使用后简单的 CSS 代码也能写出很棒的动画，即便是在普通的网站中，使用它们也能够在小细节上给用户好感。

不过，复杂动画使用 CSS3 可能就不一定合适了，这主要看是否属于 CSS 的强项领域中，否则遇到兼容性等问题还是没有办法的事情，毕竟其不是编程语言，具有一定的限制。

性能优化

「黑科技」

如果遇到了性能问题，CSS 黑科技 translate3d 和 will-change 作为最后的手段说不定能帮你一忙。

在现代浏览器中，遇到 3D 变换会启用 GPU 进行硬件加速，而 translate3d 是非常具有代表性的 3D 变换，所以在一些 2D 动画较多的地方使用它代替 translate 有可能能够对性能有所帮助。

will-change 则是在 CSS 代码中提前告知浏览器，某些属性可能会发生动画效果，促使浏览器积极地调用硬件加速去优化它，但这个属性是最后的手段，并不应该随便使用。

减少高频动画

和 JS 一样的，触发频率过高的 CSS 动画（甚至只是通过伪类进行单纯的属性值改变）同样会引发性能问题，本站中鼠标与 42 个 ABOUT 文本元素原本都会产生 :hover 动画，但如果在页面滚动时鼠标不断触发该动画，在低端的设备上会容易产生卡顿问题。

我的解决方法是将 :hover 的触发条件改为了 :active，这样鼠标移动+页面滚动就不会频繁触发该动画。

var 变量

CSS3 新引入的 var 变量也是一个不错的玩意，常用的是将颜色定义为 CSS3 变量，便于使用 JS 替换该变量值，达到一键更换主题配色的效果，无需到处更改各种元素的颜色属性值。

fix-blend-mode

页面的反色效果使用的是 fix-blend-mode: exclusion 实现的，这属性很酷，我很喜欢，点名表扬一下。

还有 filter 也是可以很酷的属性，但在本页面中没有什么使用（用了 drop-shadow），有视觉效果需求的话 filter 属性是非常值得了解的对象。

HTML

作为一门标记语言，HTML 是每个程序员的基本功了。

Emmet 语法
HTML5 语义化标签

Emmet 语法

Emmet 是一种提供自动补全的语法。举个简单的例子，我们可以输入 !，然后输入Tab键，即可自动补全以下内容：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body></body>
</html>

再比如：

table>.row>.elem+.elem

按下tab键，我们可以得到：

<table>
  <tr class="row">
    <td class="elem"></td>
    <td class="elem"></td>
  </tr>
</table>

如果对 Emmet 语法有兴趣，可以看看这篇我写的 Emmet 笔记

语义化标签

语义化是 HTML5 的重点之一，这部分我也是一边学习、一边通过别人的优秀代码中了解到不同的语义化标签，<section>、<header>、<nav> 等常用标签就不介绍了（HTML5 结构元素介绍一文可以通过实例帮助区分这些标签的作用），我还了解到下面几个标签：

<main>
<time>
<figure>

挺有意思，这不仅是增加了机器可读性，这些语义化标签更会让我觉得自己的代码非常的漂亮（误）

移动端

移动端适配的要诀就是：删得越多，需要适配的东西就越少（x）

移动端适配

说到适配，基本都是围绕着「自适应布局」和「响应式页面」两个概念来进行，毕竟重新开发一个页面专门用于移动端的成本相对而言是比较高的。

自适应布局，一般而言是使用 Flex 弹性布局与 Grid 栅格布局来实现，它们在尺寸的变化上具有连贯性，可以随着页面的尺寸变化通过压缩空白间距、自动换行等方式发生连续的排版变化。但是自适应是有极限的，从 PC 端到手机端这种尺寸与比例的巨大变化，一般而言「响应式设计」更加切合该问题。

响应式界面借助的是 CSS 的媒体查询特性，对不同的媒体以及屏幕尺寸应用不同的 CSS 样式。这个功能很强大，很多适配都是这么做的，某些不要的元素可以 display: none 隐藏掉，又可以把某些只在手机端的元素 display 出来。缺点就是它是阶段性的、离散的，需要设置多个断点来适配多种不同的尺寸。

所以这两个技术相辅相成，才能实现较好的单份页面多终端适配。

光有排版适配是不行的，还需要调整元素与文本的尺寸。常见的 rem 布局原本是个不错的主意，但在选择的时候我纠结地决定使用 vh 与 vw 来实现，媒体查询时则用 em 来调整字体大小，只能说各有所长。因为这方面经验不足，我也不确定使用 rem 方案会不会有更好的适配效果。

补充：vh 单位在移动端的浏览器中存在问题。因为大部分移动端浏览器的标题栏是可以随着滚动的行为进行收起或者展开的，这导致了页面的一些遮挡。vh 是不变的值，但他会比我们期望的值还要大一点，很容易出现排版问题。建议如果需要在移动端浏览器中布局的话，尽量避免使用 vh，可以使用 js 获取并设置样式。（我已经被坑了）

移动端性能

坦白说，一开始适配都是用的 chrome 浏览器模拟手机端进行的，这导致我写了不少代码之后，等到网站上线服务器了，在手机上才发现我添加的动画与效果实在太多，导致移动端性能捉襟见肘。

于是乎只好包含泪水送走那些代码，在移动端禁用一些 js 脚本，甚至连 My Works 里我很喜欢的 CSS3 飞行员动画也要禁止了，页面访问才变得流畅起来。所以我只好在郁闷中开玩笑地总结道：「把发生性能问题的东西禁用掉就没有性能问题了。」

在移动端中，即使使用 transform 做动画也是非常消耗性能的，所以要尽量节约着使用

网站

还有一些零碎的配置，顺嘴提一下：

资源
- 网络字体 GoogleFonts
- 开源图标 IconFonts
- 图片挂载与压缩 sm.ms
服务器
- 阿里云
- 域名
- 备案
- SSL
google analytics

字体

一开始是从服务器中获取的，结果中文字体动辄 10MB 的大小严重影响了页面的加载访问，且单单使用英文字体也要考虑版权问题。

没经验的我一开始是打算尽量猜测用户电脑自带的字体种类，按在我页面中的实际显示效果排个序作为我的 font-family。后来想起伟大的 GoogleFonts，非常简单易用地挑选到了我想要的字体，而且不用担心版权问题，点赞 👍

后续：GoogleFonts 虽说在中国也有了 CDN 站点加速，但是我发现有些时候获取字体资源的访问速度真的不算快，查了一下了解到 https://fonts.loli.net/ 可以反代理 GoogleFonts，免费公益速度又快，非常感人，好用 👍

图标

阿里的 IconFonts 也是类似的，提供海量的图标，甚至给我用作为光标样式，很好用 👍

图片

图片先压缩是基本操作，在损失较小的画质的情况下大幅加快加载速度是值得的。

不过在图片资源部署的问题上，我一开始出于偷懒，将图片放在了 sm.ms 上然后从网页中引用它。后来发现这好像是不被该图床所允许的，而且偶尔访问速度不够快，于是又移回了我的服务器中，起码我服务器这点流量而言对于获取一点图片资源还是足够稳定的。

服务器

厂商、域名

服务器相关的东西都是是阿里云服务一条龙，机子选用的阿里云的学生机，域名也就顺便在阿里上买了，还挺便宜，然后阿里有个帮忙备案的功能，10 天批了下来，挺方便的。

SSL

https 协议是 http + SSL，如果只使用 http 协议，浏览器会给用户提示此网页不安全，而 SSL 证书是需要获取的。一开始我以为所有 SSL 证书都是要收费的，瞟了一眼一年收费一千多元可把我吓到了，心想算了算了 http 协议凑合着用。

后来转念一想发现不少普通的个人网站也是有 https 加密访问的，总不能大家都那么有钱叭，于是一搜果然有免费 SSL 证书可以申请（为这些厂商点赞 👍）。

然后就在准备按着教程去搞 Let's Scrypt 的 SSL 证书时，又想到了我的服务器装了宝塔面板，这种事情说不定在宝塔面板上有一键认证，结果发现真的有，只需要一个邮箱即可（给宝塔面板也点个赞 👍）。

流量分析

之于网站流量分析用的是谷歌家的 Google Analytics，目前还没怎么使用，等有空了再摸摸看嘿嘿。

设计思路

这第二部分倒回来稍微介绍一下主观性很强的本站的设计思路。

Tips: 整体设计以效果的多样性为主要目的，实验意味较浓

文章配图不够齐全之处，望读者亲自访问网页进行体验

色彩

主题色红色 #882233
辅助色浅白色 #cccccc ~ #ffffff
点缀色青色 #12e4fb

主题色

主题色是页面视觉占比最高的颜色，它由背景图所决定。由于第一版配色选用的背景图片为红色系，故简单配了一个#882233作为较暗的红色为主题色。

辅助色

辅助色是在页面中烘托主题色的颜色，它的视觉占比一般仅次于主题色，用于平衡单主题色带来的视觉疲劳。在这里选用浅白色是因为页面为暗色主题的原因，使用浅白色作为全局的文本颜色非常合适。为了避免颜色过于复杂，图形化的标题颜色与光标颜色也使用文本颜色以统一视觉效果。

点缀色

点缀色是相对主题色而言较为亮眼的高饱和度颜色，起到点睛的作用。在这里选用了与红色互补的青色，以加强视觉冲击效果，同时配合交互时发生的反色效果，可以起到呼应的作用。

注：一开始原本并没有想好点缀色，直到某天刷手机忽然看到一个角色，当时就拍脑袋嚷嚷着青配红可以有 😂

样式

暗色主题
色块 / 扁平感
阴影 / 光晕
透明化
反色

暗色主题

暗色主题算是 2019~2020 年的设计趋势之一。

以前我们只能在设计与编程类软件能看到暗色主题风格，这大多是出于暗色减少界面带来的创作注意力影响、提高对暗部细节的感知度。

而随着手机的流行，许多手机 app 也细心地推出「夜间模式」，这是出于用户在夜间浏览手机应用时能够减少屏幕过亮对眼睛造成的损害。

但「暗色主题」相比于「夜间模式」并不完全相同，因为「暗色主题」并没有便于夜间浏览的硬性要求，因此在主色为暗色的情况下仍然可以选择高明度的颜色作为配色，且配色思路与亮色主题并不相同，一般能够给出相比于亮色主题更酷更专业的感觉。

色块 / 扁平感

色块 / 扁平感是我对于内心某种设计要素比较模糊的称呼，大概是几年前「卡片化」、「扁平化」的类似体现。注重强调块状的单色区域，相比于颜色复杂的图案而言更加简洁干净。在实际实现中，采用的是「粗线条」、「粗体文字」、「单色简单几何图形」的方式来达到相关的理念。

阴影 / 光晕

阴影这里指的对应的是代码中的 shadow 样式，它是亮色主题常用的划分区域的缓和手段。弥散投影非常能够提升亮色主题的区域的质感，他能弱化区域的边界感，提升卡片感。

但是阴影效果在暗色主题中往往并不明显，只能起到一点辅助作用（上面的右图）。而如果将 shadow 设置为亮色，则变成光晕效果，给人一种物体正在发光的感觉（上面的左图文字与粗线条）。

透明化

透明化是提升画面信息的一种手段，在该页面实现中，将除了标题区域以外的区域罩上了一层暗色透明蒙版，避免背景图片影响文字阅读的同时保留背景细节，提升画面的信息量。

但是，「透明化」实际上与前面提到的「扁平化」（减少元素的信息量）有较大的不相容性，所以理论上这两种要素应该有所取舍更为合适。

反色

反色也是提供视觉效果、保留页面信息的方法之一。因为元素之间常常会发生遮挡，被遮挡的元素会损失一定的信息内容，使用类似于透明的反色效果，能够保留信息的形状属性，但也会干扰信息的色彩属性。本站于光标样式上采用了反色技巧，因为光标是用户和页面交互的重要手段，操纵光标与不同的元素相作用会产生不同的视觉效果，提高用户的交互兴趣。

交互

页面滚动（平滑/视差）
视觉提示与反馈
透视

页面滚动

页面滚动是浏览网页非常常见的事件，一般的桌面浏览器都不会提供平滑滚动的效果，这主要是为了提高页面滚动的响应速度，因为毕竟不是所有人都喜欢缓动的滚动效果。在本站中，因为内容信息的获取并不是最重要的，为了体现个性以及更好的适应动画的流畅感，故添加了一定的平滑滚动效果。

特殊的，对于底部版权信息的区域，做了一个「揭底」的效果，在页面的最末尾打破用户对于网页窗口的认知，让页面主体变成了类似于荧幕一样的东西，揭底之时才露出背后并未移动的白墙。

视差滚动是近年来比较流行的页面交互效果之一，通过滚动时不同元素的滚动距离不同，让人感觉滚动距离更长的元素离我们更近，滚动距离更短的元素离我们更远，从而增加页面的空间感。

但是由于页面内容越来越多，性能较差的电脑与浏览器反而可能会产生卡顿，这点比较麻烦。

视觉提示与反馈

视觉提示与反馈是交互的重点。所谓交互，即需有用户的输入，也要有反馈这些输入的输出；或者通过输出提示，来引导用户的输入行为。本站中把这个重任交给了光标进行引导，通过样式的变化、大小放缩来进行相应的提示与反馈。

例子：

透视

透视和视差类似，也是增加页面空间感的手段。近年来不同的设计领域都开始出现三维空间的要素，当然是因为三维效果跳脱于所处的二维空间，提供了多一个维度的视觉感受。本站将作品展示部分添加了相关的透视效果，通过鼠标与作品的相对位置对作品进行三维空间上的旋转，以凸显逼真的空间感。

手法

大字号
大小对比
重复
暗示

大字号

大字号可以表现出不同于「需要为用户提供足量的信息的信息密集型网站」的气质，从视觉惯性上进行冲击，强调文字的存在性。在本站的实现中，还有着配合粗体标题字体来实现色块视觉效果的功能。

当然，如果使用不当，会给人一种变成老人机的大字模式的感觉，这方面英文作为排版设计常用字体非常有优势（单字母相比汉字更加符号化而非象形化），所以本站也使用了不少英文（装饰意义居多）。

大小对比

大小对比是营造视觉落差非常常见的手法。顾名思义，拒绝暧昧的相近关系，让大的更大，小的更小，突出大小的对比，强调大与小的尺寸属性。

重复

重复也是强调元素存在感的手法之一，装饰意味居多。在本站中有一串很长的 ABOUT，如果显示没有问题的话，可以看到它有空心和实心两种。实心的序列其实并不是随机的，而是满足质数的排列（作为一个彩蛋）。

暗示

暗示（hint）是对某特点与某效果之间的关系进行间接的绑定的手法，一般是用于大家普遍默认的关系。注意，非常浅显的图形标识或者文字标识当然不算暗示，信息量更小的特点被称为暗示更加合适。

例如看到包含单个词语或者图标的色块，这个特点会暗示我们这可能是一个按钮，而词语或者图标的具体意义才会告诉我们它的作用；又比如绿色常常用来暗示正确，红色往往被当作错误警告，这是颜色的暗示。

不过在本站中，我做的暗示不算是「大家普遍默认的关系」，而注重于统一整个页面的交互语言。

例如，光标与主题色的元素一定可以产生某种交互，触发由主题色渐变为点缀色的动画。

对于具有内外两层结构的光标，默认状态下内光标表示鼠标的实时坐标、外光标应用具有延迟的缓动动画来跟随内光标运动。当外光标和内光标同时表示为鼠标实时坐标位置时，其被暗示为按钮的一种，允许进行点击的操作。

这些非常识的暗示在传统意义上可能没有直接的价值，但是对于统一交互语言有着一定的帮助。用户一般不会注意到，但在潜意识中多少会产生一定的影响。

回家

Mon, 23 Jul 2018 00:00:00 GMT

回家是一种很特殊的感觉。

对我来说，它的特殊，在于拖着或多或少的行李，独自行走在回家路上才会有所感觉。

是的，回家很累。大包小包，上下楼梯，拥挤的沙丁鱼罐头和冗长的蚂蚁队伍，只有家里的宽大软床和不限量淋浴能些许缓解疲惫。但回家又是轻松的一一轻松？是的，是因为回家的路途中时常会忽然感受到难以言说的、巨大的放松感。

戴着播放熟悉歌曲的耳机，伫立地铁中，我偶尔悄悄打量每一位乘客。比如一位正站着用单手支着看书的打理的很整齐的戴眼镜的小姐姐，或者是眼睛望着玻璃窗外已有些许时间的穿着朴素的平凡大叔，猜测此时此刻的他们又会在想着什么。

走在黑色柏油马路上，再熟悉不过的路线的确认感带来饱满的安全感，呼吸会比地铁里的空气更加自由。斑驳树影抑或条条长灯点点透过自己的身体，脑海里便不住地神思各种各样的事情，或者和自己探讨一会哲学，甚至只是单纯地自言自语，也让时间变得弥足珍贵。

看过一位网友这样形容他的生活：「每天晚上下班后开着自己的轿车缓缓停入小区的停车位里，我什么也不想去想，关着灯停了音乐，静静地点一支烟这会是我一天里最自由的五分钟，是只属于我自己的五分钟。」

我想，「回家」恐怕也是我且行生命中所有日子的所有「混沌」里，最接近「清醒」的时刻。

山风的小角落

增加人生的「方差」

增加人生的「方差」

漫长的迷惘

偶然的机会

选择的理由

日后谈

2024 年记

2024 年记

序 · 反思

工作上

01 · 润！

02 · 一些发散的想法

03 · 被破坏的专注力

学习上

01 · 降噪

02 · 有序

03 · 坚持

04 · AI

生活上

🇭🇰 即兴出行

🫙 苏打水

🖥 新电脑

😷 生病

🏠 租房

娱乐上

📺 动画

🎮 游戏

🎸 音乐

✂️ 手工

尾

Web 前端 AI 抠图应用实践

Web 前端 AI 抠图应用实践

图像抠图算法简介

基于先验信息的方法

无需先验信息的方法

开发应用实践

部署端对比

开源方案

使用 WebGPU 加速模型推理

抠图 DEMO 实现与效果一览

与业务相结合

业务背景

项目设计

更多延伸

HK 即兴一日游

HK 即兴一日游

临时的想法

特种兵，出列！

闪击香港，办卡！

打卡式扫街，但是阿宅版本

旅后感

后注

「思考」的消失

「思考」的消失

2023 年记

2023 年记

越做越多的「事情」

「哲学」学习的感悟

尾

骑车，露营，过家家

骑车，露营，过家家

初知露营

调查露营

体验露营

评价露营

2022 年记

2022 年记

环境变化

创作与学习

独处

尾

疫情第三年

疫情第三年

封村的日子

封楼，投食，等通知

尾声

疫情时代的「版本答案」

后记

2021 年记

`{ passive: true }`