交互实验

这些不是文章。它们是在你的浏览器里真实运行的东西——真实的数据、真实的代码。每一件都写明了它究竟计算了什么，以及它做不到什么。

• 滚动时间线

  一次请求的 1.07 秒

  一次真实的 `curl -v`，做成随滚动点亮的时间线。零 JavaScript——纯 CSS `animation-timeline: view()`。

  真实的部分

  所有时间数字来自对本站的一次真实请求：DNS 5.2ms、TCP 324.3ms、TLS 234.3ms、服务器 278ms、传输 229.5ms。

  做不到的部分

  这是一次测量，不是基准测试。换一个网络、换一天，数字就会变。

• 可交互

  逐字节看一个真实协议

  点任意一个字节，看它属于哪个字段、以及为什么重要。

  真实的部分

  四个帧（明文数据 / 加密数据 / 握手 / Ping）由 ESPTier 自己的 C 编码器在主机上编译后产出，并做了往返解码验证。

  做不到的部分

  它是四个帧，不是一段实时抓包；也不包含设备上的时序行为。

• 可玩

  玻璃珠透镜实验室

  把真实的光线追迹着色器移植到 WebGL2：拖动旋转、调参、实时重算。

  真实的部分

  片元着色器就是桌面程序跑的那一份（`#version 330 core` → `#version 300 es`），逐像素从针孔相机发出主光线。

  做不到的部分

  只做正向仿真（不解决"生成可打印图像"的逆问题）；单一折射率，所以没有色散；针孔相机，所以没有景深。

• 可玩

  TCP 拥塞控制实验室

  实时仿真的拥塞窗口与瓶颈队列：上格是锯齿，下格是队列。

  真实的部分

  三条真实的关系——窗口会涨、容量封顶吞吐、队列变成延迟——都在图上。

  做不到的部分

  它是每个往返走一步，不是逐包仿真：没有快速重传、没有 SACK、没有 pacing，所以不要拿它算真实吞吐。

• 数据

  开源账本

  这个站自己的数字，在构建时从仓库里算出来。

  真实的部分

  文件数、双语配对、字数、代码块、最近似文章对的相似度分布，以及一份真实的缺陷日志。

  做不到的部分

  它描述的是语料的形状，不是它的质量。

另有 8 个纯前端小工具（子网、IPv6、进制、字节序、CRC、chmod、编解码、cron）。 看工具 →

这些东西是怎么被检查的

每个组件都跑了"截图 → 视觉模型评审 → 修 → 再截图"的闭环。它抓到过真问题，不是走形式：

字节格子完全没有颜色——格子是 JavaScript 创建的，Astro 的作用域属性加不到它们身上，于是我的 CSS 全都没生效，格子退回成浏览器默认按钮样式。改用 `:global()` 后才真正着色。

手机端整页能左右滑——页头 8 个不换行的导航链接把整个文档撑到 631px，而手机视口只有 390px。

首页 hero 与全站错位 32px——`.hero` 的 `padding: … 0 …` 简写把 `.wrap` 的内边距清零了。

布局类的结论不靠肉眼：用 DOM 探针量 `documentElement.scrollWidth` 与 `innerWidth`，用 Range 矩形量文字边界。像素推断错过，而且错得很自信。