这篇文章上次修改于 225 天前,可能其部分内容已经发生变化,如有疑问可询问作者。

2021,又是一个在疫情中度过的一年!我今年如果没记错的话,已经累计参加了三次(连续测算作一次)全员核酸检测了,在 2022 节前都还来了一轮,真是没完没了啊~

在这样的生活条件下,除了做个工作狂,就没有想过去哪里玩了,因此旅记就没有了,实在是有些可惜。

工作

今年稳稳妥妥在一家公司干了一整年,你说它好,确实有好的地方,你说它不好,也确实存在不足之处。公司最让我觉得可以的地方在于比较弹性的工作时间,去办公地点晚到的话,晚点走就是了,还可以不定期的在家远程办公,享受不同坐标的午餐。

我在这里主导完成了一个基于 React 17 + ViteJS + Antd 4 的一个脚手架,并以此作为基础创建了多个独立的前端项目。

  • 基于 NextJS 的门户网站项目
  • 基于 WordPress 的门户网站项目
  • 基于脚手架的 Coupon 网店优惠券管理项目
  • 基于脚手架的 Dropshipper 网店店长商品采购项目
  • 基于脚手架的 AccessCode 网店访问权限控制项目
  • 基于脚手架的 GroupBuy 网店商品团购管理项目
  • 基于脚手架和腾讯 IMSDK 的在线聊天后台项目
  • 基于 Svelte 和腾讯 IMSDK 的在线聊天前台项目(嵌入弹窗式)
  • 基于脚手架的为 FaceBook 直播平台设计的网店商品和销售管理项目
  • 基于 Hexo 博客框架的公司官网项目
  • 基于 Shopify Liquid 技术的二次开发网店模板项目

并且,还继承(接盘)了一些老项目,负责 Bug 修复和新功能追加...

  • Roroco 设备维修和工单管理后台项目
  • DM 面向电商平台管理员的后台项目

技术

  • 部分 JS 基础知识学习/实践和巩固

  • 自学初步认识并实践了 Svelte 框架

    • 制作开源:奇趣小工具
    • 制作公司项目:基于 TIMSDK 的嵌入式聊天框
  • 增加使用 TypeScript 写前端的实践

  • 增加了在 React 项目的实践经验,接触过多套框架和解决方案

    • 编写文章:NextJS 使用 Less 编译 Antd
    • useContext,useReducer,useRef,useMemo 等预设 Hooks 的实践
    • 自定义 Hooks 的编写和使用,主要取代重复的 useState 为主,以及实现同步查询字符串状态
    • Hooks 闭包踩坑,以及如何利用闭包实现一些奇怪功能
    • createPortal 实现简单的弹窗组件
    • 接盘了一个 DvaJS 为主要技术栈的项目,主要是使用 Redux 管理所有页面的状态
    • 为公司项目编写了一套基于 Vite + TS + Antd 4 作为基础的脚手架,并应用于多个项目中
    • ...
  • 自学使用 ViteJS 并实践

  • 自学 Hexo 博客框架并实践

  • 自学(被动)初步认识并实践了 Shopify 模板二次开发(Liquid)

    • 公司外包项目:某外国户外烤炉品牌的官网(基于一个模板进行二次修改,增加模块、功能等)
  • 不算多的 Linux、MacOS 使用姿势

    • 给服务器重新安装了环境,从 CentOS 更换为 Ubuntu,换教了
    • SCP、CronTab、NVM、GPG、Nginx、软链接等工具的使用和延伸
    • MacOS 给蓝牙耳机开启 AptX 解码,查询 Log,查询端口占用等

我认为我今年学习的内容非常有限,反倒我的“徒弟” - @Innei 现在成为了我的学习榜样了。主要是他已经离开了实习公司阿里,现在学习比我刻苦不说,他在购买技术书籍之后反复阅读揣摩的时候,我却在不断为了解决公司外包项目的麻烦事而挠头发愁。

有些公司项目麻烦的问题在于大量不确定的具体需求(你不是最终那位提需求的人,什么东西都只能靠猜和模仿),时而因为需求增加需要修改之前做好的功能(我主导的新项目还好,老项目则局部或全部重构),以及接盘维护旧项目(持续铲屎),定位和修复各种继承许久的 Bug。这就已经卡在瓶颈里了,难以彻底解脱出来。

说到底我不就是为了那份工资么。@Innei 现在虽说无业,但他现在刻补基础,肯定会对自己接下来的前端进阶之路更有用。于是我在新年也买了他推荐的几本书,打算好好研究一番。鉴于学历门槛,我去大厂还是比较困难,暂时不去幻想了。

作品

作为一位来自新时代的社畜,自己的项目维护就变得逐渐有限了起来。开源就更是惨不忍睹,GitHub 的提交记录特别凄凉== 看看隔壁 @Innei,动不动就是百日连击,太强了!

奇趣小工具(Kico Tools)

奇趣小工具

奇趣小工具是我首次学习 Svelte 框架写的开源作品,它主要包含「时钟、秒表、倒计时和随机数」功能,完美复刻了几年前原生 JS 版本的所有功能,并且顺带解决掉了当年所有的 Bug(毕竟重构了)。传送门

当然,这个项目也存在着一个很严重的新 Bug,它最先被 @Innei 提到,这项目在当时(纯 JS 版本时)也就是纯粹做着玩,多写点代码实践而已,像我这种 🥬🐔 现在肯定也顾不上这么多项目的后期维护了,没人看的话,迭代什么的全靠心情了==

奇趣播放器(Kico Player)

奇趣播放器

这个项目其实是 2017 年左右编写的,但出于个人原因,一直都没有正式对外开源。修复了部分 Bug 后,播放器正式在 2021 年 8 月开源。传送门

  • 从字体图标改为嵌入式 SVG,方便引入使用
  • 解决定时器反复生成的问题,修改 Error 和 Ended 事件执行的操作
  • 优化 Jump 跳转指定歌曲函数,修复专辑图片无效情况下的引用问题
  • 重新设计了全部循环和单曲循环图标

友链检测器(Friector)

因为日常工作繁忙,没有充足余力去逐一访问各位友链(是否能正常访问),因此制作了这个项目。这个项目没有做过多的 UI 设计,比较简单,是采用 PHP 语言编写的一个页面。传送门

保罗的小窝后台 Vite

小窝后台 Vite

这个后台的脚手架从原有的 Create React App (WebPack) 切换到了 Vite (Rollup),是个大的改变呢!由于这个作品是我当时第一次学习 React 写的项目,有很多不足之处,且大量使用 Class 组件编写。

而这一次,我全部都切换成了 FC 组件和 Hooks 的方法实现,引入了 TypeScript,且修复了之前存在的很多 Bug,还增加了很多自动化功能,主要变化大概有这些:

  • 原先尝试使用 Preact,由于对 TS 的支持不太好等种种原因,最终切换回来了
  • 所有页面和组件均采用 FC + Hooks 模式重写
  • 复用新建和编辑页面为一个组件,不再像之前一样彼此独立存在
  • 日记编辑页面离开时的本地自动存档功能,大大改善误触导致写完没保存的情况
  • 日记编辑页面自动获取和填写当日天气
  • 日记编辑页面支持播放设置好的网易云音乐
  • 日记页面引入 createPortal 提供底部快捷栏交互,方便移动端操作
  • 增加了 Jest 测试框架,编写了工具函数的相关单元测试
  • 通过使用 CSS 变量,增加了全局换肤功能
  • 重构了大多数分页页面的搜索框逻辑,可供复杂条件的筛选

保罗的小窝

保罗的小窝

小窝项目起始于 2018 年,依旧是经典技术栈,现阶段基本上就是日常维护,没有太大的技术突破。主要重构了 API 相关部分,从原先判断逻辑均放在 View(只有 View)的情况下,独立成了各个模块的 Controller,因为这个大的变化,导致各个大大小小的功能都依次出现了各种不同级别的 Bug。

由于没有框架的 PHP 编写特别自由,在不断反复修 Bug 的时候我就发现一个特别难以权衡的问题。代码可读性和可维护性,总会和「性能」有一定的矛盾。假如某个功能的 API 你都必须实现鉴权,可以在根函数那里直接做判断,看似这样做性能会更好,但实际上这样编写会造成后期维护的困难。

而现在页面还没有自己的 Controller,仍然需要后期维护和改善。前端部分 JS 延续了多年的代码,现在显得特别烂,开发体验迅速下降,希望能有一天重构一次。

  • 优化新图库功能,新增和调整了数据库字段
  • 图库上传的拍摄时间字段,可根据三种模式(文件名、EXIF、文件修改时间)自动填充
  • 图库内容支持后期重新上传,直接替换为新的图片
  • 404 页面随机展示一张手办的图片
  • 使用类似 JWT 实现一个新的 Token,将会有登录有效期限制
  • 重构部分 Controller 逻辑,从 API(View)层分离
  • 更新路由匹配机制,模糊匹配的路径必须位于开头,此前仅限匹配是否完全一致而已(/note/timeline 只能匹配到 /note 路由)
  • 新增 日记时间轴 页面
  • 新增用户管理功能,支持简单的鉴权,接入微信平台,支持使用微信登录(小程序端)
  • 可根据登录用户(微信小程序端)实现日记审核功能,状态为「限时」且过期的日记为主
  • 日记详情页面改为 PHP 实现 SSR 渲染,逐渐取消此前 CSR 的代码
  • 增加直播状态效果展示,依赖 @Eric 的机器人转发数据实现

这里面还出现了很多不该出现的错误,都算是踩坑了,大概有这些:

  • 日记 RSS 的日期时区写错,应该是 +0800 而不是 +8000
  • 给图库内容点赞会触发移动文件的操作,逻辑有问题
  • 给语录内容点赞没有判断,短时间内可反复操作
  • JS 冒泡函数写错,应该是 ev.stopPropagation()
  • PHP 如果值可能为 0,则不能直接在 if 里面把条件写成变量本身,而是使用 isset 替代
  • PHP defined 函数检查变量,不能缺少双引号,否则会无效 defined("__HOME_CACHEPORT__")
  • JS 模版字符串如果有 undefined,不能用 &&,会输出 undefined,换成三元表达式
  • PHP 使用 array_key_exists 判断键值是否存在,而不是 in_array
  • 上传图片可能出现 1970 年数据,因为在 EXIF 扩展失效下没有绕开这个逻辑
  • 媒体移动分类,实际路径莫名其妙变成 1970 年,因为变量名写错了,null 怎么有数据呢?

Hingle 主题

和 Typecho 的 Single 主题拥有同款外观的 Hexo 主题,是我尝试学习 Hexo 的首个产物。介于网站不再是动态生成,有大多数功能(搜索、评论、夜间模式等)需要做替代方案,所以目前功能还不太完善,后期视情况再慢慢完善吧!传送门

其他项目

  • 奇趣框架 传送门

    • 修复嵌套栅格、ks-tag 的样式问题
    • 改用 CSS3 变量进行配色、间距、圆角等属性的定义,方便覆盖
    • 表格内容不再默认禁止换行,可使用 text-nowrap 辅助类替代
    • 重制 select 标签的样式,很好的改善在 Safari 下的效果
    • 栅格系统采用 row-gap 替代掉负 margin 实现的纵向伪间距效果(不再支持 IE 浏览器),并取消 scrollable 实现
    • 调整全局样式设定,增设 -webkit-text-size-adjust-webkit-tap-highlight-color 属性,优化在 Safari 下的效果,转 HTML 标签专属的 font-auto 类为全局辅助类
    • 取消设置 pre 标签下包裹的 code 样式,单独设置 pre 本身
  • 方块播放器 传送门

    • 优化了 destroy 销毁实例函数
    • 更新 Meto API 参数
    • 解决销毁后点击暂停按钮异常的问题
  • 保罗的小窝微信端

    • 增加夜间模式,可能是第一个支持夜间模式的小程序
    • 支持提交审核信息后查看日记内容
    • 支持图库媒体内容的点赞(长按)
  • 保罗 API

    • 增加随机壁纸内容,获得了 @SkyOne 同学的一个 PR(仓库开源)
    • 解决哔哩小床图片被拦截问题(干掉 Referer 头
    • 增加大疆视频解析 API(类似哔哩小窗的 iframe 框架)
    • 优化哔哩小窗在移动端上的样式
    • 网易云 API 改成 curl 函数,解决超时或错误问题
  • Single 主题

    • 样式优化,全面拥抱 CSS3 变量
    • 赞助版友链页面样式优化
  • Fantasy 主题(赞助版)

    • 底部支持展示标签云,增加页尾信息栏六选四功能(最新文章),在页尾展示标签
    • 增加目录树功能
    • 解决大图模式的栅格间距问题
    • 解决翻页图标模糊问题
  • 文档站 传送门

    • Single / Fantasy / Pio 等项目文档的日常维护

要让我给 2021 年项目维护的成绩打个分的话,10 分只能给 6-7 分了。

通过付费开源项目 Single 和 Fantasy,我获得了 ¥448.06 的赞助,以及 ¥36.66 的友情赞助,勉勉强强能抵扣掉服务器一年的费用。感谢各位对我项目的支持!

游戏

目前主要在玩(肝)的是《原神》和《碧蓝航线》,都是为了看可爱的女孩子。由于工作和学习的繁忙,其他游戏接触的时间不算很长,也没有尝试太多新游。

手游:

  • 原神
  • 碧蓝航线
  • 和平精英(老王又回来了)
  • 少女前线(基本退坑)
  • 摩尔庄园手游(基本退坑)
  • 关于我转身变成史莱姆这档事:魔物之王(试水)

今年十月换了 iPhone 13。配置方面不愁了,手游也就随便畅玩了,但是自认为现实情况国内能玩到的游戏质量,总体都没以前好了,基本上没有小而美的单机游戏,都是氪金赚快钱的网游或假网游(说的就是原神)。

Steam 端游:

  • 小偷模拟器(新增)
  • 四海兄弟:重制版(新增)
  • 四海兄弟:第三部

Steam 游戏玩的时间整体都少了很多,其实有很大一部分时间都被《原神》的日常任务和活动给占领了,毕竟新出的稻妻、渊下宫都需要刷完成度的嘛。

原神

原神

能再次提到这个游戏,主要还是因为这个游戏的整体氛围比较 OK,在游戏里面匹配了几位朋友,都比较友善,加了一位叫「荧」的同学,还挺健谈,聊着聊着直接就和他扯到了游戏外的现实话题了。前期我的练度很差,大多数副本都只能让别人带我打。而我现在也基本毕业了,有 20 级的圣遗物和 9-10 级的天赋,80-90 级的角色等级就能在这个大世界里随便浪了。

在新年我则抽到了甘雨,准确来说在年前都能总结进去?

碧蓝航线

碧蓝航线

毕竟是老婆游戏嘛,只要新出角色的立绘戳 XP,就想去抽了(其实无论喜不喜欢都会尝试抽),这里面我最喜欢的新角色有...

雾城(旧金山)、花园(新泽西)、西南风、枟(风云)

和平精英

和平精英

前半年有很长一段时间老王很久都没有响应我,估计是他觉得我工作很忙吧。确实是这样子,这份工作时不时就只能晚上加班继续赶进度。直到他有一天终于找到了我,二话不说就和他开了两局,又有一种在学校和他一起联机一起升段位,刷活动奖励的感觉了。但退出游戏回到现实,又陷入了平时的疲惫了。

有一次周末准备找他玩,他蛋疼的告诉我他手机早上竟然直接黑屏了,全部资料丢失,找售后说要换主板,而换主板的价格基本上等于换一部新手机,陆陆续续等了一个多月,他终于说自己换了一部手机,我才有机会和他继续打==

四海兄弟

这是我今年唯一一个游玩时长最多的 Steam 游戏了,这个游戏让我知道了什么叫做表面兄弟,正面和敌人较量我们是一队,背后为了家人却选择出卖全员,这样的故事在游戏里讲述了很多很多。

人们总会因为各种利益而最终失去了自己想要的生活,敌对帮派 Boss 家产万贯,曾经和主角老大是同一个 Boss 的手下,但最终却被男主这样的普通人击杀,所以这样有权有势的人,生来到底是在图个什么呢?

在四海兄弟三部曲中,前两部都是走剧情路线,强制性引导完成任务流程的。第三部虽然提高了自由世界的开放程度,可以自由接任务,但是剧情设计不太好,实际玩起来感觉大多数是非主线任务,就是换个很多个地点搞破坏和击杀敌人,除此之外就是在地图上收集各种物品,使我这样的玩家感到无聊。(是不是想起了原神的挖宝箱,哈哈哈)

番剧

今年看的番剧特别少,毕竟番剧每一集基本上都要 20 分钟,而我平时会更多的放在 B 站 10 分钟以内的视频上。其实如果按数量来算的话,刷视频的时间已经远远超过能看番剧的了。

其中《这个美术社大有问题》这部番我很喜欢,它是校园日常类的,女主「宇佐美」还是我最喜欢的美术系女生 😍,又傲娇又可爱啊!男主「内卷昴」乍一看很像《原神》的空哥,都拥有一样的呆毛,一样的瞳色,你别说他还挺帅气的!也难怪女主会暗恋他了。

设备

今年主要入手了 iPhone 13,没做视频,写了篇 文章,和 MacBook Pro 协作起来确实是不错。再说说我那位 MacBook 朋友,它已经陪了我一年半多了,键盘手托处出现了比较明显的「磨损」,是我手心汗渍对它的反复洗礼吧。

购入 iPhone 13

愿望

写了几年的愿望,感觉有很多都是「意想中」的,真正实践起来还是挺困难的啊==

  • ❎ 寻找另一半,永不放弃

    • 还是没有任何进展,现在工作基本就是两点一线
    • 而且对着装,发型什么的都没有要求,属于「摆烂」状态,我看 B 站上有很多二次元同志也是这样
    • 今年回老家得知隔壁人家小伙 24 就结婚生小孩了,又开始了...
  • ❎ 健康生活,快乐自己

    • 如果是从「劳逸结合」的角度上来说,我践行的还算可以
    • 熬夜情况有所加剧,经常会搞到凌晨三点,头发不保了
  • ✅ 持续让自己的小窝和博客越做越好

    • 今年增加了不少新功能,也修复了不少的 Bug
    • 将来可能会更换新技术栈,用更好的方法实现?

于是乎,新一年的愿望,也就是基本上和去年的一样了。人生在世,除了工作和学习,要懂得知足享乐,不然真到你年长的时候,就会发现已经没有多少机会了。

所以说在新的一年里,就希望自己能再多做些对自己有意义的事情了,培养兴趣爱好,还是继续深究前后端,又或者是多出去走走,都不是不行。只是不要摊在那里刷 B 站各种视频,点开微信朋友圈、QQ 空间什么的看来看去,消磨时间,就已经很棒了!

往期

2020 年度总结
2019 年度总结
2018 年度总结
2017 年度总结

朋友们的总结

如果你对这类文章都比较感兴趣,也欢迎你来看看我朋友的同类文章,写的都挺不错的 😂

Innei:《2021 · 抉择、未知、迷茫、恐惧》
Citrons:2021 年简单的年终总结
折影轻梦:《19 岁,找回迷失的自己:热爱、勇敢以及感恩》
FGHRSH:《2021 年度报告》

当然,写总结的朋友并不是只有这么多,只是我都挑了内容叙述比较不错的出来,不要怀疑我们之间的关系 🤣