关于
关于我个人
某双非软件工程本科在读。目前主要在做前端开发,未来会在继续前端开发的基础上推进鸿蒙原生开发。
网站的 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 处了解详细的浏览器兼容性报告。