关于
关于我个人
某双非软件工程本科在读。目前主要做前端开发和鸿蒙原生应用开发。
网站的 favicon 是我在 Minecraft 中的形象。
当前采用的解决方案
这个网站其实是我的前端初学项目,目前采用现代原生前端架构,传说中的 Vanilla JS 框架实践项目,拥有较好的页面性能与兼容性。
技术栈
HTML5 + CSS3 + 原生 JavaScript,无框架依赖。
构建、工程化与外部依赖
见下表
| 项目 | 方案 |
|---|---|
| 运行时环境 | 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 模块化重构,这是最近一次重要的大规模变更。在未来,随着我对前端开发了解的增进,这样的技术路线变化可能依然会发生,但不会再有过大的改动了。我倾向于把整个博客主站保留在现代原生前端,将来不会迁移到其他框架。
所以我对目前网站解决方案的总体评价是:我满意。
网站兼容性
本章节披露了本站及本站使用的部分组件中对部分较新的 Web 技术(Web 标准和 Web API)的使用情况,以及我们推荐浏览时使用的浏览器版本。若你当前使用的浏览器版本早于最低建议版本,则网页可能出现异常。
需要注意的是,只有在 MDN 兼容性表格中拿到 Baseline Widely available 徽章的 Web 技术才会被视作成熟的 Web 技术(即从该 Web 技术获得完全支持起 30 个月后)。若你发现新于最低建议版本的浏览器上仍存在兼容性问题,请单击此处向我反馈。一切关于 IE 浏览器的兼容性要求不予回应。
兼容性概览
使用2023-12-19以后发布的浏览器版本将不存在兼容性问题。建议使用2026-1-13以后发布的浏览器版本以获得最佳浏览体验。
| 浏览器引擎 | 常见的分支浏览器产品 | 最低建议版本 | 建议版本 |
|---|---|---|---|
|
Chromium 开源项目(Blink)
|
Chrome, Edge | 105 | 125 |
|
WebKit
|
Safari, iOS / iPadOS 上的 Chrome、Edge 和 Firefox | iOS / iPadOS 15.4+, macOS 12.3+ | iOS / iPadOS 18.2+, macOS 15.2+, visionOS 2.2+ |
|
Gecko
|
Firefox | 121 | 147 |
CSS Specifications: :has() selector
使用范围:blog
兼容性:从2023-12-19起发布的所有浏览器版本均支持此 Web 标准。
单击此处从 MDN 处了解详细的浏览器兼容性报告。
Web API: View Transition API
使用范围:blog, WebGroove
兼容性:从2026-1-13起发布的所有浏览器版本均支持此 Web API。
额外说明:使用了此 API 的相关组件为对应实现做了 fallback,确保在不受支持的浏览器版本上可以降级运作。
单击此处从 MDN 处了解详细的浏览器兼容性报告。