木匣子

Web/Game/Programming/Life etc.

Edge 浏览器无法访问 VirtualBox 内的网站

Issue

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

issue-preview

访问网址会出现 DNS 错误的页面,并显示如下信息:

There was a temporary DNS error. Try refreshing the page.
Error Code: INET_E_RESOURCE_NOT_FOUND

发生临时 DNS 错误。请尝试刷新页面。
错误代码: INET_E_RESOURCE_NOT_FOUND

Solution

经过一番检索,试了好几种方法都没有搞定。最终在这个帖子里找了解决方案:

You can workaround this issue by changing your VirtualBox Host-Only Ethernet Adapter’s *NdisDeviceType to 0 and rebooting. You can find the key in Computer\HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Class\{4d36e972-e325-11ce-bfc1-08002be10318}\00XX. The downside to this is that now you’ll have an “Unidentified Network” in your Network and Sharing Center. It’s also managed by Windows Firewall now and by default it is in the Public Profile and it can’t be really changed easily.

– Jani L. Oct 4, 2017

如果你有多个 VirtualBox 网络接口,需要找到正确的网络适配器,可以在 Control Panel\All Control Panel Items\Network Connections 目录下右键相应的网络适配器,然后在 Properties > Networking > Configure... > EventsInformation 文本框架找到如下描述:

Driver Management has concluded the process to add Service
VBoxNetAdp for Device Instance ID ROOT\NET\0000 with the following
status: 0.

其中的 ROOT\NET\0000 应与注册表中 {4d36e972-e325-11ce-bfc1-08002be10318}\00XX\DeviceInstanceID 的键值相对应。则 00XX 就是你要修改的那个网络适配器了。

接下来要做的就是将该路径下键名为 *NdisDeviceType 的键值由 1 改为 0,并重启主机即可。

How / Why

MSDN 对 *NdisDeviceType 这个键的解释可以在这里找到。简而言之就是 UWP(Universal Windows Platform)程序会检查网络适配器的这个键来判断其是否是一个可以联网的网络接口,然后决定是否使用它。

IE 和其它浏览器不是使用 UWP 框架开发的,所以不受影响。而 Edge 正好躺枪。


本文在以下环境中测试

  • Windows 10 Pro(Version 1803, OS Build 17134.885)
  • Microsoft Edge 42.17134.1.0
  • Version 6.0.10 r132072 (Qt5.6.2)

闭合的均匀 B-Spline

最近阅读了 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” 指的是什么,但是我决定想办法 “修复” 这个令人不愉快的缺口。

修复跨平台 Webfonts 渲染不一致的问题

Issue

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

font-rendereing-os-different-os

与这个 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 来说已经超纲了。虽然我不是特别强迫症,但是这样的问题却非常吸引我,非解决不可。

木匣子 2019 on S3

一个多月前休陪产假期间,想着好久没写博客了,但 AWS 上还开着个 EC2 ,挺费钱的。不如把博客静态化放到 S3 上面吧!?经过短暂的选型,最终决定使用 hexo 这款基于 node.js 的静态博客系统。原因当然是出自于对 javascript 的喜爱。

于是花了一两周的时间,把十年来使用的三个不同的博客系统(分别是 wordpress/typecho/ghost)导出后整合到了一起。整合的过程虽然借助了一些 exporter/importer ,但是不同平台间还是存在很多差异,最后通过手工编辑修复了许久。好在文章少,时间多。

没想到在试用了一段时间的 hexo 后觉得静态化是如此的美妙:可以直接用文件系统管理 markdown 格式的日志文件,还可以直接用 git 做版本控制。生成静态文件和部署也很容易。

于是又花了几周的业余时间学习 hexo 模板开发,并写了现在使用的这套博客模板(hexo-theme-mutoo),虽然风格朴素(大概是因为设计细胞「用进废退」了吧),但是在一些小细节上还是花了点功夫。

内容和模板都完成后,就到了部署环节了。由于所有内容都是静态文件,得益于 S3 的 static website hosting 功能,可以直接将生成的静态网站整个同步到 S3 的 Bucket 中。然后就可以通过 S3 提供的地址访问网站了。

http://<bucket-name>.s3-website.<AWS-region>.amazonaws.com

同步的工作也很容易,配置好 AWS Cli 后,直接:

$ aws s3 sync ./public s://your-bucket-name --profile s3-user

其中 --profile s3-user 是在 IAM 中预先设置好的用户,并绑定了相应的 Bucket 读写权限。该命令如此简单,以至于不需要为 hexo 专门设置一个 hexo-delopyer-s3 。只要把这一行放到 package.json 的 “scripts” 字段下就行了:

{
  "scripts": {
    "clean": "hexo clean",
    "server": "hexo server",
    "generate": "hexo generate",
    "deploy": "aws s3 sync ./public s3://your-bucket-name --profile s3-user"
  }
}

然后可以通过 $ yarn deploy 进行部署。

S3 默认提供的域名又丑又长,可以考虑绑定独立域名,但是有个缺点就是 S3 服务不支持 https 协议。所以建议使用 Cloudfront 这个 CDN 服务作为反向代理来访问 S3 中存放的页面,同时提供 https 协议支持。

除此之外,Cloudfront 还支持绑定 Lamda@Edge[1] 来实现一些请求的重定向,弥补了静态网站的不足。毕竟重定向对于一个正在迁移重组的网站是非常重要的,可以避免站外的一些老旧链接失效。

静态化博客免去了数据库维护的负担,Cloudfront 免去了证书管理的负担,一身轻松呀!至于价格,对于一个小博客来说,S3 + Cloudfront 真的是超级的便宜。

突然间又重新燃起了写博客的欲望。

Postscript

当时在比较静态博客生成器的时候,把目光局限在 “written in javascript” 上了。最近发现一款用 go 语言编写的静态网站生成器 Hugo 比起 hexo 更快更强大,有很多 hexo 没有的功能。有空来研究一下,看看未来有没有可能迁移到这个平台上,或者用它来制作其它项目。


  1. 一种专为 Cloudfront 服务的 Lamda 分布式脚本

如何劫持网页上的 Vue 实例

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

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

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

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

使用 Github Pages 托管主页

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

  • 一个网页: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

Self-printing Homepage

使用 WebpackJsonp 与 jQuery 进行代码注入

本文本涉及的版本为 Webpack 2.x-3.x,写作时 Webpack 已经发布 4.x 半年左右。

0x00 Webpack

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

MAMP 与 PhpStorm 远程调试

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

Windows 10
MAMP for windows 3.3.1
Apache 2.2.31
PHP 5.3.23