零依赖像素木屋

做个人网站时很容易陷入两个极端：要么套一层沉重的现代前端脚手架，几年后因为依赖过期连本地构建都跑不通；要么只放一页冷冰冰的简历，连自己平时都不愿意打开。搭建这座赛博木屋（my-ricardo）时，我定下了三条工程准则：零外部构建依赖、首屏极致轻量、并且它必须是我每天真正顺手在用的跨设备备忘录。

一、Python 逐像素程序化生成（tools/art.py）

站内所有的四季农场全景底图、九宫格木纹边框、人物行走序列帧以及 56×32 的地面碰撞位图，全部由单个 Python 脚本从零绘出并直接编码为 PNG：

脚本内建调色板与确定性伪随机噪声，一次运行即可同时产出春、夏、秋、冬四套色温一致的 896×512 农场地图与物品图标。
木框、按钮、信纸毛边与图钉采用 CSS border-image 九宫格切片（如 8px 切片按整数倍像素变量 --px 拉伸），让任意长宽的页面容器都保持严丝合缝的像素颗粒感。
地图渲染的同时自动导出 js/world-data.js 的可通行网格与交互锚点，避免美术资源与碰撞逻辑脱节。

全站如果直接塞入完整的中文像素字体，首屏需要下载数兆字节的字库；而如果正篇长文全部使用低分辨率点阵字，在高分屏与手机上又容易造成阅读疲劳。为此站内采用了「双轨制字体 + 自动子集分片」方案：

右上角时钟面板、页签、标题纸卷、按钮与地图名牌使用 12px 整数倍缩放的 Ark Pixel 像素字；而研究笔记、日常流水与告示牌正文则切换为清晰的现代无衬线字体，兼顾游戏氛围与长文可读性。
分片脚本自动扫描全站 HTML 与 JS 源码中实际出现的约 1200 个字符，打包成仅 34KB 的 shard-common.woff2 并配合 preload 与 font-display: block，做到首访零闪烁；剩余两万多个汉字按 1024 码位切分为 24 个扩展分片，仅在告示牌输入生僻字时由浏览器按 unicode-range 自动拉取对应分块。

为了让整座农场像真正的桌面小程序一样连贯运转，前后端交互都尽量压缩到了最简的原语：

无刷新导航（js/nav.js）：拦截站内链接并仅替换中央木框或信纸 DOM，结合浏览器原生 View Transitions API 实现平滑升降，底层四季农场画布与背景音乐全程不断流。
实时音频合成（js/sound.js）：不加载外部 MP3，直接用 Web Audio API 的振荡器与滤波器实时合成五声音阶田园八音盒，并根据昼夜相位叠加白昼鸟鸣或夜晚虫鸣。
4× 超采样互动小程序（js/games.js）：在 960×576 内部画布上实现亚像素平滑运动的池塘垂钓、矿车历险、古井祈愿签与农田番茄钟，并将番茄钟收获直接关联到告示牌待办。
双通道同步告示牌（js/board.js 与 server/app.py）：后端仅用 Python 标准库 http.server 与 SQLite 即可通过 Docker 一键部署，支持中文自然语言解析截止时间（「周五晚上8点」）、最近 5 条跨端剪贴板历史，且在纯静态托管时自动降级至 GitHub REST API 与本机存储。

每次修改页面或脚本后，只需跑一遍 tools/check.py 即可在百毫秒内完成死链、无障碍属性、导航一致性与字体覆盖率的静态验收。