¶Issue

公司的项目会把 Development 阶段的网站用 Vagrant 管理，托管在 VirtualBox 虚拟机中。虚拟机使用的网络接口是 Host-Only 类型的，只允许主机访问虚拟机，而阻止内网中其它设备访问虚拟机（区别于桥接）。同时方便同一个主机上多个虚拟机之间组网通讯（提供 DHCP）。最近升级了 VirtualBox 到最新版 6.0 ，但遇到了个怪事。所有的浏览器都能正常打开虚拟机中的网站，唯独 Edge 浏览器不行：

最近阅读了 Anders Hoff 写的 ON GENERATIVE ALGORITHMS 系列文章。非常的赞！一直很喜欢这种结合数学的美学作品。

其中 Sand Spline 一文给了我很大的启发。在他的算法里，他使用了 B-Spline 样条来构造一个不断运动的圆状环，准确地说应该是一个圆状弧线，因为这个曲线没有封闭，留下了一个缺口。

In this animation the spline starts on the right and moves counter-clockwise. You will also notice that the level of noise is larger the further out along the spline we go. This has nothing to do with the spline itself, but it is a nice way to keep the starting node in its original position.

– Sand Spline

我不太确定他说的 “This has nothing to do with the spline itself” 指的是什么，但是我决定想办法 “修复” 这个令人不愉快的缺口。

¶Issue

最近开发的几个 Web 项目都遇到了同样的问题，在 Windows 上与设计稿 pixel-perfect 的网页，在 macOS 或 iPhone 上测试的时候却出现字体偏移现象，如下图所示：

与这个 span 相关的的 css 大致如下：

.gs-header-menu__mega-toggle span {
    font-family: Larsseit;
    font-weight: 700;
    font-size: 1.6rem; // 16px in this case
    line-height: 1.33;
}

仔细观察发现 span 框的大小是完全一样的，其高度为 \(16 * 1.33 \approx 21\)。但里面的字体图元却渲染得不一样，即使把 line-height 设置成 1，也无法解决这一问题，在 macOS 中渲染出来的字体仍然偏上。这一问题对 CSS 来说已经超纲了。虽然我不是特别强迫症，但是这样的问题却非常吸引我，非解决不可。

最近老婆在家休产假，偶尔会在网上看看电视剧。但是我们常去的那个网站除了烦人的微信二维码观影限制，还加了片头广告等。二维码观影限制的实现在「使用 WebpackJsonp 与 jQuery 进行代码注入」一文中提到过：强制在影片播放前显示一个微信公众号的二维码以及一个观影码，然后向后台不停轮询公众号平台是否收到观影码来决定何时开始播放影片。

前文中我介绍了如何借助早期版本的 Webpack 以及 jQuery 来实现前端劫持。不过前端是一个快速发展的行业，这些方法很快就过时了，所以要有新的思路来实现原来的需求。

站方升级时引入了国产的 umi 框架，数据和模块都是在初始页面加载后动态载入的。而且这次他们不再将 jQuery 暴露到全局，所以之前的方法不管用了。此外他们也移除了 production 中的 sourcemaps，给阅读源码增加了难度。

不过幸运的是他们的播放器组件仍然使用 Vue 框架编写。使用 Vue 意味着组件的接口完全普被暴露在全局中，可以通过 DOM 的 __vue__ 变量访问到 DOM 绑定的 Vue 实例，以及实例中的所有成员变量和方法。

在「所码即所得」一文中我创建了一个小项目。该项目构建后会生成一个静态页面：

• 一个网页：index.html
• 一个样式表：bundle.css
• 和一个脚本：bundle.js

原先我将他们与博客一起托管在自己的 EC2 上面，但是由于现在我将整个博客都用 hexo 引擎静态化并放到 s3 上，不必再支付昂贵的 EC2 实例费用了。于是我打算将首页也搬走。

搬到哪去呢？我可以将主页也放到 s3 上。或者直接使用 Github Pages 服务。因为正好这个项目在 Github 上是开源的，所以可以免费使用 Github Pages 服务来托管项目页面。

¶0x00 Self-printing Homepage

很久很久以前注册 mutoo.im 域名的时候，给自己弄了一个很简陋的主页。如果用 Wayback Machine 往前翻，可以找到的最早的快照是 2013 年初的这一记录。

当时的想法是：简单、另类，最好可以用代码来表达想法。但是因为刚弄的网站没什么东西可以表达的，就直接丢了个链接。这一丢就丢了将近五六年。前两个月再看到它的时候，觉得是时候重新装修一翻了。于是有了这个项目：Self-printing Homepage。

¶0x00 Webpack

Webpack 是当下最流行的 Web 打包工具，允许前端开者发在项目中进行模块化开发，并将代码打包成一个代码包（bundle），在浏览器上加载使用。但随着引入的第三库越来越多，代码包会越来越大，影响页面加载时间。于是 Webpack 提供了一个分包功能，可以将共享的库拆分（code-spliting）到不同的包中，使得浏览器可以并行加载不同的包，加快页面打开的速度。

最近接手了一个用 PHP 作后端项目。本来团队里一直都是使用 Vagrant 来统一开发环境的，但是这个项目可能比较老，所以没有整合虚拟机。于是需要手动配置开发环境。配置中途遇到了一点问题，需要断点调试程序，方便追踪错误。本文相关运行环境：

Windows 10
MAMP for windows 3.3.1
Apache 2.2.31
PHP 5.3.23