前端远程调试 背景 由于有些时候不方便到用户实地/远程桌面复现 bug，需要远程查看对方网页的控制台，经过预研发现远程调试工具 page-spy-web 比较合适 实现 在开发机（由于开发只能完全控制开发机，同时要保证此开发机能被下面的前端服务器访问）上部署一个 docker 镜像 通过特定域名（可以自定义域名后缀，配合下面的前端服务器），配置 nginx 转发到此开发机 由于前端服务器需要能访问到开发机，所以需要在前端服务器对应的 nginx… »

背景 在线上部署期间，或者用户长时间没有访问网页等等各种情况，有一定概率会出现以下形式的报错，导致网页白屏 原因与方案 由于现代前端工具链打包出来的，尤其是 webpack 的项目，其主入口默认不缓存，其他文件长期缓存，缓存的文件通过改变文件名（一般是 hash）来更新 所以在部署期间或者用户没有长时间打开网页，可能会请求已被删除的对应的 chunk 或者 chunk… »

背景 在 chrome 浏览器上，用高德地图的 CircleMarker, PathSimplifier 分别画点和线时候，需要实现点在线的上面的效果，此时在 windows 系统上不能正常显示红点（左侧），在 ubuntu 系统下却正常显示（右侧），如下图所示 原因 红点是由 CircleMarker 组件实现，而下面的线则是 PathSimplifier 实现，在 chrome 浏览器下不同系统的表现为： window: CircleMarker 由 canvas… »

需求背景 针对本博客现有的 Gatsby 框架实现代码复制、代码实时查看编辑的功能 技术选型 以下都是采用最后一种方案，由于插件功能不满足，所以对其源码做出改动 代码复制 技术选型 语法 优点 缺点 项目代码自实现 未实现 定制化程度高 实现难度大； 拓展较差 gatsby-remark-code-buttons 不需特定语法，只要是代码块默认具有复制功能 已具有代码复制功能 有多复制一行的 bug； UI 不符合博客主题 代码实时查看编辑 技术选型 语法 优点 缺点 样例页面 iframe… »

测试一 画 3 个带有反光的立方体 测试二 对 3 个带有反光的立方体做响应式处理，要求满足下面条件 窗口任意大小立方体不会被拉伸 不能出现明显的锯齿（块状化） 支持高分屏 测试三 绘制常见的图元 测试四 太阳，地球，月球模拟 测试五 实现坦克多视角切换 测试六 实现常见的不同材质 测试七 多个纹理加载 测试八 实现过滤和 mipmaps… »