2024 年如往常的年份一样固执，已经不可逆转的融为我们记忆的一部分。
小剧的 2024 年度记忆很充实，但又乏味无比。可能这就是小剧即将步入 35 岁"高龄"的预告吧。
一、渐入佳境的奶爸生活
2024 年是宝宝彰显破坏力的一年，两岁的娃娃正是行动力和思考能力都开始加速成长的阶段。
不过每个宝宝的成长曲线可能稍有不同吧。年初宝宝查出疑似患有轻度自闭症，随后便开始了漫长的干预治疗生活。
小剧 2024 年工作之余的全部几乎都和这个小家伙一起。但相比媳妇 7 * 24 全年无休的陪伴还是不值一提。
小剧之所以能用"渐入佳境"来形容奶爸的生活，离不开老婆 2024 年的辛苦付出。
希望即将到来的 2025 年宝宝能有更好的进步，老婆可以少一些奔波和焦虑。
二、学到了新知识没？
2024 年工作上依旧延续着前几年的惯性，持续在 Web 开发上耕作。
对 Vue3 在项目上的实践有了更真实的经历。对 AI 在业务上的落地也有了更具体的认识。
工作之余依旧持续着低频但不间断的学习。
2.1、CSS 的更多可能
自 2012 年初建立小剧客栈至今，小剧个人的成长持续记录在这里，同样技术上的学习成果也体现在这里。
2024 年小剧客栈没有在 NodeJS 后端服务上做大的改动，更没有对 JS 的更多方向做探索，但对于 CSS 表现层更多的可能性倒是做了不少的尝试。
2.1.1、使用 CSS 替代部分 JS 效果
上半年小剧客栈的 UI 做了几处小的局部改版，尝试给博客正文的布局更改为"剧场模式"。功能并不复杂，但是在修改代码的过程中却发现，小剧客栈曾经很多让小剧"引以为傲"的实现，正慢慢变为陈旧的"顽疾"。
这次尝试使用 CSS filter 替代 JS 实现了底图模糊的效果，性能上完全上了一个台阶，并且在响应式上代码组织起来更为灵活。
用 CSS sticky 替代了原本 JS 监听的才能实现的灵动布局效果，又删掉一大坨 JS 代码。
另外还使用了纯 CSS 的 Scroll-driven Animations 替代了原本导航粘滞的效果。
Scroll-driven Animations 是一个非常强大的 API，不过小剧这里并没有用它做特别大的改动，仅以导航效果试试水。
关于这部分写了篇《More CSS, less JS》做记录，感兴趣的话可以点击查看更多细节。
2.1.2、View Transition API 学习
下半年由于机缘巧合，发现了 View Transition API 这个神奇的新特性。
对于 Web 中的过场动画，小剧也算是较早时候就做了尝试，并且在近十年来在小剧客栈上迭代过三个不同的版本。
之前的版本虽然动画也较为细腻，但都建立在新、老视图作为一个独立的整体来实现的，无法或很难对视图更近一步的动画拆分。
这次将视图切换动画由 Vue 的 transition 组件更改为了 View Transition API 来实现，并且针对【博文列表 → 博文详情】的视图切换，尝试了更为大胆的"神奇移动"。
这部分经历记录在《View Transition API 尝试过场动画》这篇博文中。
这篇文章算是上半年《More CSS, less JS》的下篇。介绍小剧利用 View Transition API 实现试图转场动画的过程。作为渐进增强的动画方案，View Transition API 对业务的耦合度极低，很容易与现有业务相结合。
2.1.3、使用更适合照片分享的布局方案
小剧客栈中摄影照片分享一直使用的是固定比例容器排列显示，没有大的问题但效果中规中矩。
某天在浏览图虫个人首页的时候注意到，它在排列照片的时候，很好的还原了照片的原始比例。
摄影是带有主观视角倾向的作品，如果能够保留原始比例，对于展现照片叙事逻辑尤为重要。
因此在研究了图虫的实现逻辑再结合自己对 Flex 布局的理解，对摄影作品分享页面做了重新布局。
新老布局对比图片
2.2、SVG 实现异形动画效果
这是一个小的尝试，对于 SVG 小剧一直将它视为静态矢量图标或图形的展示方案。除了几年前在做 D3 项目的时候，并未设想过可以将 JS 的灵活性与 SVG 图形的多样性组合起来。
这部分效果的基础代码拷贝自 Copen 的 Luis Castrillo，不清楚是否为他原创。在他的基础上小剧做了代码结构的调整和效果的重新设计。
整体效果还算出彩，代码自由度也算可控，并且作为 SVG 辅助动画效果，这次经验算是抛砖引玉。后续有类似 CSS 无法实现的异形动画的需求，也不至于束手无策。
动画视频
2.3、"重学" ThreeJS
近七年没碰过 threeJS 的小剧，这次破天荒的重新捡起了这个老行当。这次小剧将博客全景作品分享页面的静态背景图下线了，更换成了更贴近场景主题的《妹纸们》全景。
这幅照片是七年前小剧从 SNH48 微博图文中下载并二次加工得来，是唯一一个非小剧拍摄但流传度最广的作品（果然妹纸才是生产力）。
因为单纯作为背景展示，并不需要任何交互逻辑，这次的实现逻辑并不复杂。
简单的创建了一个片状的圆环并贴图，摄像机于圆心处，不停旋转圆环即可实现效果。
全景作品分享顶图截图
三、生活中的小调剂
3.1、摄影
无
2024年是真的没有进行任何摄影行动。倒不是因为这方面热情消退了，而是奶爸的生活和悠闲且行踪多变的摄影本身是冲突的。
希望 N 年后可以骑着车子载着娃，一起拍属于我们父女俩各自的人生照片。
3.2、身边的远方
2024 年摄影行动虽然没有进行，但是照片依旧咔咔咔拍个不停。只是从有计划的拍摄，变成了记录生活的有啥拍啥。
2024 年小剧陪娃和媳妇一起跑遍了合肥的各大公园、场馆。偶尔出一出城，在不是很远的地方换一种心情。
小岭南稻田
合肥新粮仓
巢湖姥山岛
寿县城墙
小区边的油菜地
浮槎山
水世界
葡萄采摘园
合肥岸上草原
溧阳南山竹海
合肥湿地公园
3.3、养了只狗狗
为了给宝宝一个玩伴，年初在老家领养了一只小奶狗。
用了宝宝最喜欢吃的"大米饭"给它做名字。
这是小剧第一次养小狗狗，没有小剧想的那么难，也并不可怕。
然而随着后来生活重心的变化，我们并没有足够的精力花在大米饭身上。此时大米饭也正处在身体快速发育的时候，需要更好的陪伴。
于是在领养了两个多月后，找到了一位妈妈非常支持的小女儿收养。结束了小剧第一次养狗狗的经历。
大米饭
3.4、家庭服务器
自从 2021 年小剧购买了 H3C m1 家庭存储后，小剧对于个人照片备份的方案就多了一种选择。
作为文件存储，H3C m1 是够用的，尤其是配合之前那台老款的 Mac mini，可玩性还是有那么一点点的。早期 H3C m1 做主力存储，Mac mini 做备份存储，稳定性上没有较大问题，但易用性严重不足。
首先 H3C m1 作为被新华三抛弃的产品，近三年没有任何功能迭代和 Bug 修复。虽然 App 支持公网访问内网，但可远程查看的文件格式极少。
Mac mini 虽然可以安装服务，但是十年前的设备性能并不强劲，功耗还贼高。
三年后的 2024 年初，小剧按照自己的思路拼凑一份独属于自己的家庭服务器方案。
家庭服务器合影
3.4.1、服务硬件方案
这是目前小剧比较满意的一套方案，相较于成品 Nas 在一个单体设备上完成全套家庭服务的方式，小剧更喜欢这种设备灵活增添的自由感。
新购的 m1 版本的 Mac mini 承担的是家庭主服务器的功能，数据的存储、服务的运行都依托于它。H3C m1 降级为备份存储，每四小时备份 Mac mini 中的数据到这里。
下方的小方盒子是个 Ubuntu 服务器，所有需要暴露在公网中的服务都依托它做中转。支持 IPV6 直接暴露与 FRP 服务器中转。
上方的蒲公英盒子仅给我自己使用，连接它即可拥有内网身份，方便突发时候调试。
相比于成品 Nas 的单体设备，小剧这套主服务器、备份机器、内网机器（蒲公英）、公网机器（就这么叫它吧，也没有更好的名字）的组合自由度更高。物理隔离的另外一个好处就是，当不幸遭遇攻击时，仅需要关闭 Ubuntu 公网机器即可。即使公网服务器被攻破，带来的损失也是最小的。
关于这部分经历，小剧写了《家庭服务器改造记录》这篇文章。
这套方案还没有足够长的时间去验证，仅以小剧的兴趣为出发点，对你的选择不具备指导意义。
3.4.2、Immich 相册服务
在《剧中人平庸的2023》「4.2 尝试部署私有化」部分，曾经介绍过 Photoview 和 Wiki.js 两款服务。
其中 Photoview 近一年的使用并没给到小剧有很大的惊喜。虽然也有人脸识别和时间线浏览，但给小剧的感觉他就是文件夹管理照片的增强版。没有在"照片"这个维度有更多功能。
随着此次物理设备的迁移，小剧也发现了 Immich 这样一款自托管服务，于是小剧在 Mac mini 中也安装了 Immich。
经过近一年的使用，小剧将 Immich 从一个"玩具"正式"册封"为家庭相册管理服务。
首先它的照片备份逻辑非常顺滑，完全没有以前重复备份或者漏备份的问题。
另外它支持多账号，家人可以各自使用自己的数据，也可以相互共享相册，使用起来更合乎逻辑。
最重要的是，它支持移动端、Web 端访问，支持人脸识别、按地理位置聚合等相册该有的功能。并且还在高密度的持续迭代。
Immich 截图
3.4.3、Outline 文档服务
前面提到的 Wiki.js 服务，小剧其实使用很久了，因为是基于 NodeJS 开发的，天然能引起小剧的好感。
但实际使用下来体验并不好，倒不是因为 Wiki.js 自身不好，而是不适合小剧自托管这个场景。
Wiki.js 定位为团队 Wiki 发布平台，书写体验并不友好，更适合作为团队的知识沉淀或者对外文档发布。
很久之前小剧就接触过 Outline 文档服务，因为它依赖于第三方的 OAuth 服务，并且需要支持 S3 的服务提供文件存储，并且这一切要以域名的方式进行配置，基于这些种种导致小剧一直没有敢于尝试。
在十月的最后一个夜晚，小剧决定啃一啃这块硬骨头。
实际折腾下来发现 Outline 的部署并不可怕，甚至 S3 服务也不是必须的。
为了提高使用的稳定性，小剧之后还自建了 Keycloak OAuth 服务，用来替代国内使用不是那么友好的 Slack。
安装完成后，就是以用户的身份使用了。
Outline 的书写逻辑和小剧之前参与开发的讯飞文档发非常相似，都是基于增量数据的实时保存逻辑，整个编辑过程几乎可以做到随写随关。
另外它的 UI 非常克制且简洁，完全长在小剧审美的点上。
对了，Outline 是没有移动端 App 的，但是它的 Web 端完美兼容移动端使用。在 2024 年使用 PWA 构建移动应用的产品已经越来越少见了。
这部分经历记录在《Outline Docs 初体验》中，算是小剧为数不多的怀着兴奋的心情写下的小水文。
对了这份 2024 年终总结的草稿阶段，全部书写在 Outline 中。
Outline 截图
四、写过的文字
今年小剧一边忙着家里的事儿，一边捣鼓各种代码，所幸记录了一些值得分享的内容。从怎么让网页的动画效果更酷炫，到给自己家搭个实用的服务器，还尝试了不少新的软件和工具。
这里简单罗列一下，前面零散的的提到的文章。
家庭服务器断电处理记录
最近家里停电，Mac mini 的 Docker 里所有的 Containers、Images、系统 Volumes 丢失，记录下此次服务恢复的过程。
2024-04-23
家庭服务器改造记录
这是一篇单纯记录小剧此次家庭服务器改造的文章。对 NAS、家庭服务器的很多理解个人色彩很浓，方案还没有足够长的时间去验证，因此对你的选择不具备指导意义。希望你能在小剧这里找到一丝丝可以借鉴的思路，或者可以当做谈资的笑话。
2024-05-15
More CSS, less JS
近来给博客 UI 做了小的局部改版，给博客正文的布局更改为"剧场模式"。在改 UI 的时候，却发现小剧客栈曾经很多让小剧"引以为傲"的实现，正慢慢变为陈旧的"顽疾"。
2024-06-11
Outline Docs 初体验
分享小剧 Outline Docs 的安装使用体验，此前曾因登录方式特殊未尝试使用。后因闲置设备才尝试安装，虽有波折但成功。使用体验包括移动端 PWA 版、桌面端佳，文档组织独特。
2024-11-04
View Transition API 尝试过场动画
这篇文章算是上半年《More CSS，Less JS》的下篇。介绍小剧利用 View Transition API 实现试图转场动画的过程。作为渐进增强的动画方案，View Transition API 对业务的耦合度极低，很容易与现有业务相结合。
2024-12-20
五、寄语
2024 的烟火已经消散无踪，小剧在这一年的琐碎日常里，有奶爸生活的酸甜、技术学习的苦乐、生活琐事的起伏，这些都是过去一年闪烁着的烟火。
过往成忆，未来已来，愿新岁里，继续在烟火人间，怀壮志前行，拥温暖而歌，让小剧生活的每一刻，都绽放出独属于自己的烟火之光。