让图动起来：前端出图动画技术从入门到放弃
静态图表传达信息，动态图表传达过程。 很多人一提到动画，就想到"炫技"，但其实 95% 的博客动画需求用 CSS 就能解决。CSS @keyframes + animation 就像一把瑞士军刀——简单、可靠、不需要引入额外库，还能通过 prefers-reduced-motion 尊重用户的无障碍偏好。
Continue reading →前端技术
图表即代码：Mermaid 与它的朋友们
2014 年，瑞典开发者 Knut Sveidqvist 遇到了一个糟糕的问题：他精心制作的一张 Visio 流程图文件损坏了，无法打开。在绝望中，他看着女儿正在看迪士尼的《小美人鱼》，突然想到：如果图表也能用文本来描述，像代码一样管理，那该多好。
Continue reading →数据可视化库选型：从 Chart.js 到 D3.js
市面上图表库那么多，Chart.js、ECharts、D3、Highcharts、AntV、Plotly、Recharts、Victory… 选型时第一个要搞清楚的是：它们根本不是互相替代的关系。
Continue reading →SVG、Canvas、WebGL：三层渲染技术怎么选
前两篇聊了出图的历史和工具选型，这次落到技术底层：SVG、Canvas、WebGL 这三层渲染技术到底怎么选？ 很多人有个误解：SVG 最慢，Canvas 中等，WebGL 最快。就像交通工具的等级递进——自行车、汽车、飞机。但这种直觉是错的。
Continue reading →前端出图技术演进：从 HTML 表格到 WebGPU
选技术之前，先看全貌。 很多人第一次接触前端可视化，直接就扎进某个框架的文档里，慢慢啃配置，最后做出来一个能跑的图表。但过几个月遇到性能瓶颈，或者需要支持更复杂的交互，才发现当初选的工具根本不合适。
Continue reading →从 Mermaid 到 WebGPU：一年出图踩过的四个坑
写博客一年多了，画了大概大几十张图。架构图、时序图、数据对比柱状图、TCP 拥塞窗口变化曲线。 然后有一天下班路上我突然意识到一件事：我每天都在用 Mermaid，但我完全不知道它背后是什么技术在画。
Continue reading →Headless浏览器的隐形陷阱：为什么你的自动化工具抓不到页面早期错误？
前言 你在调试一个前端工程问题，页面表现异常。你让 AI 用浏览器工具帮你打开页面，检查控制台有没有报错。 AI 打开页面，扫了一圈，告诉你：控制台干干净净，没有任何错误。
Continue reading →