全站 UI 革新正在进行中,网页可能不稳定或者存在问题。如硬刷新 (Ctrl + Shift + R) 后仍存在问题,可等待后续更新或向我发送反馈。

关于我个人

某双非软件工程本科在读。目前主要在做前端开发,未来会在继续前端开发的基础上推进鸿蒙原生开发。

网站的 favicon 是我在 Minecraft 中的形象。

当前采用的解决方案

这个网站其实是我的前端初学项目,目前采用现代原生前端架构,传奇的 Vanilla JS 框架实践项目,拥有较好的页面性能与兼容性。

技术栈

HTML5 + CSS3 + 原生 JavaScript(ES6 模块),无框架依赖。(WebGroove 尚未完成 ES6 模块化重构)

构建、工程化与外部依赖

见下表

项目 方案
运行时环境 Node.js v22 LTS
包管理与构建办法 使用 Monorepo 管理分包。使用包含 Autoprefixer(PostCSS) 的自动化构建,利用 Wrangler 在本地服务器上开发
外部依赖 使用 swup 实现类 spa,引入 Tippy.js(Popper.js) 作为 tooltip 替换丑不拉几的原生title属性

网站基础设施

网站以 Serverless 模式托管在 Cloudflare Pages 上,使用 Backblaze b2 对象存储托管文件(使用一个 private 存储桶所以不收费)。整套基础设施最大特点就是不花钱,非常的性价比。

我评价

这套方案主要面向开发而非内容产出,因为写个文章会麻烦的要死。所有的 html 标签都是要复制粘贴的,比如说突出显示链接装看不见还有code blocks等等,非常非常繁琐。包括 VSCode 对水平方向上的拖拽操作也是非常不友好,所以内容产出的体验真的差。

整个系统的技术路线在公网建站以来的近 8 个月一直在不停的变。十多天以前,我刚刚完成了对主 js 文件的 ES6 模块化重构,这是最近一次重要的大规模变更。在未来,随着我对前端开发了解的增进,这样的技术路线变化可能依然会发生,但不会再有过大的改动了。我倾向于把整个博客主站保留在现代原生前端,将来不会迁移到其他框架。

所以我对目前网站解决方案的总体评价是:我满意

网站兼容性

本章节披露了本站对部分较新且没有做 fallback 的 Web 技术(Web 标准和 Web API)的使用情况,以及我们推荐使用的浏览器版本。若当前使用的浏览器版本早于最低建议版本,则网页可能出现异常。

需要注意的是,只有在 MDN 兼容性表格中拿到 Baseline Widely available 徽章的 Web 技术才会被视作成熟的 Web 技术。若你发现新于最低建议版本的浏览器上仍存在兼容性问题,请单击此处向我反馈。一切关于 IE 浏览器的兼容性要求不予回应。

兼容性概览

使用2023-12-19以后发布的浏览器版本将不存在兼容性问题。

浏览器引擎 常见的分支浏览器产品 最低建议版本
Chromium 开源项目(Blink) Chrome, Edge 105
WebKit Safari, iOS / iPadOS 上的 Chrome、Edge 和 Firefox iOS / iPadOS 15.4+, macOS 12.3+
Gecko Firefox 121

CSS Specifications: :has() selector

2023-12-19起发布的所有浏览器版本均支持此 Web 标准。

单击此处从 MDN 处了解详细的浏览器兼容性报告。