博客技术栈
本站使用以下技术构建，追求高性能与最佳开发体验
Astro 5
现代化的静态站点生成器
Tailwind CSS 3
实用优先的 CSS 框架
TypeScript
类型安全的 JavaScript
Swup
页面过渡动画
最新文章
View all posts »记录技术学习、前端开发经验和日常思考。每一篇文章都经过精心打磨，希望对你有所帮助。
分布式锁：锁过期不是兜底，而是互斥失效的倒计时
分布式锁最容易出的事故不是加锁失败，而是锁在临界区还没结束时悄悄过期：两个持有者同时写，日志里却全是 200。本文把锁拆成互斥、租约与所有权证明三件事，逐一检查 Redis 的 SET NX PX、Redlock 的时钟假设、etcd 的 revision 栅栏与数据库行锁的事务边界，并给出把 fencing token 落到存储层的写法与一组上线前检查清单。
CSS 滚动驱动动画：时间轴换成滚动进度后，duration、fill 与 range 都要重算
滚动驱动动画更危险的失败不是报错，而是静默地按旧语义运行：animation 简写把 animation-timeline 重置回 auto，view() 默认从 cover 开始，duration 写了也不起作用，fill: none 让元素滚出区间后弹回起点。本文拆开 scroll() 与 view() 两种进度时间轴，讲清 cover/contain/entry/exit 四个区间何时退化、animation-range 怎么钉住起止、timeline-scope 如何跨子树引用，以及合成器、渐进增强与 prefers-reduced-motion 的边界。
<dialog> 与 Popover API：原生弹层不是二选一，而是四种状态机
把 dialog 元素和 popover 当成两个可互换的标签，会同时误判模态、top layer 与关闭语义。本文用一张四象限表拆开 showModal()、show()、popover="auto" 与 popover="manual" 的差别，解释 Esc、light dismiss、焦点回收各自的触发条件，并给出可运行的确认框、菜单与退场动画代码。
打印机：程序员最持久的敌人
打印机看起来是个外设，实际上是一条从应用、驱动、假脱机、传输协议到打印引擎的完整链路。本文按 CUPS 的处理流程拆开这条链路，解释为什么测试页能打、Word 不能打，为什么重装驱动常常「看起来」有用，以及 9100、631、515 三个端口各自承诺了什么、又瞒着你什么。
我的技术栈
多年积累的技术能力，持续学习与进步
我的项目
以下是我参与和开发的一些项目，持续更新中