最近更新的一点总结
最近两周左右的更新终于让本站从凑合能用变成了比较令人满意的样子,主要是对两个页面进行了很多细节上的处理
展示页
- 彻底去除了antd,使用了更加轻量的daisyUI,性能有不少提升,
- 使用更加规范的设计原则和配色,解决了一大历史难题之没有审美,以及简单的亮暗色切换,以及精挑细选了DaisyUI的Fantasy和Abyss作为亮色和暗色主题,挑了几组比较适合这两个主题的设计规范和配色实现
- 更换了字体,sans采用Noto Sans,monospace采用Jetbrains Mono
- SEO的优化,用Nextjs的App router给每个路由做了SEO
- 更全面的移动端适配以及可用性,如控件大小,对比度等
- 一系列的bug修复、性能提升和依赖升级,现在真如闪电般迅速, 毕竟是裸连美国服务器
关于更加规范的设计原则:
- 大面积的颜色(背景色)使用base色,而内容类文字(前景色)应采取base-content色,这两种颜色通常对应亮色下的浅灰/白和深灰/黑,应占整个页面至少60%的面积
- Primary:主要的提示色用于提示用户点击或重要的状态,用于吸引用户注意力,本页在Header选择提示、Title悬停、分页按钮和类别按钮上选用了这个颜色,同时对类别按钮进行了soft处理,在高对比度和不刺眼直接取得了一点平衡
- secondary:次要的提示色,在标签按钮和About按钮上采用了这个颜色,以示是次级分类
- accent:最显眼的颜色,在About里面的按钮采用该颜色的悬停并搭配等宽字体,用于告诉用户:我求你点一下吧
- 对于次要的信息,如preview、footer和createTime,降低了base-content色的灰度
- 以上的配色在部分DaisyUI的主题上可以通用,方便自动切换暗色主题且美观度和可用性都不错,但DaisyUI另外的许多主题primary和base的对比度很差,看起来最舒服的还是light theme即MD的默认配色,不得不说Google真是用心良苦
新旧版本性能对比:得益于去除大量的JS,新版的TBT显著下降,LCP的劣化主要来源于封面图,FCP还需进一步分析
| 测试项 | 首页 | 新版本首页 | 详情 | 新版详情 |
| Lighthouse Performance Score | 93/90/91 | 100/100 | 97/96/97 | 100/100/100 |
| First Contentful Paint (s) | 1/1/1 | 1.2/1.1/1.1 | 1/1/1 | 1.1/1.1/1.1 |
| Largest Contentful Paint (s) | 1/1/1 | 1.2/1.2/1.3 | 1/1/1 | 1.3/1.3/1.1 |
| Total Blocking Time (ms) | 320/410/370 | 20/20/30 | 190/220/200 | 20/30/30 |
| Cumulative Layout Shift (s) | 0/0/0 | 0/0/0 | 0/0/0 | 0/0/0 |
| Speed Index (s) | 1.6/1.6/1.7 | 1.4/1.4/1.3 | 1.8/2.0/1.7 | 1.4/1.1/1.1 |
管理页
- 一些逻辑上的调整,把新建条目提出来放到Menu里了,为此还用Popover高仿了一个PopConfirm
- 2FA的安全问题,由于是单用户应用全局Enforce 2FA,所以没有按照规范实现两步验证,而是使用两次都验证密码的方式来登录
- 编辑器选型:TinyMCE和CKEditor;其实没选出来,把两个都搞进去又加了个按钮用来切换🤣
- 暗色适配和移动端适配(主要是表格和编辑器)
- 编辑页的UI重做:仿知乎的编辑发布页加了个折叠面板把乱七八糟的东西都塞进去免得碍眼
- 补充:刚下掉一个标签,操作到手疼,很多功能还是缺,比如批量操作、按标签筛选等
后台
- Cache重做,用内存dict代替原理的shelve,现在shelve只用于持久化性能更好,并且加了LRU,否则是重大的安全隐患
- 一些小修复:修改密码功能的问题/Safari上cookie不保存(其实是没设置max-age)以及更多的单测
- 整理了GitHub action,现在可以单独部署所有四个服务dev上触发的快照了
BadProxy
历史性的一刻:适配了Trojan协议,从此v2fly可以正式淘汰了
后面呢
- Url上的PostId改一下,不把主键暴露出来
- 窄屏的适配只是适配了分辨率,后面给移动端专门做个H5
- BadProxy的话,要给网络层/传输层加http2的支持,ws现在像是要被废弃的状态,后面淘汰吧
At the End:
这段时间一直在改最不会搞的前端
时间投入到这些上面真的有用嘛?我时常在想
拉分支的时候发现这个页面竟然已经迭代到v5.0了
前四版是什么样呢?已经不太记得了
不过相比第一天写在HTML里的js应该好很多
希望做些更有意义的事情吧