Hakuu in the making (3) — Mnjul’s Intimate Home vs-6517

Part of the post series for my process in making Hakuu.

Let’s talk about more technical stuff, about non-website support code and about other infrastructure-related tidbits. Please also see my manifesto at Hakku’s GitHub repo.

One groundbreaking (well, in 2018, maybe not really) thing is I’m serving ECMAScript 2017 directly, without transpiling. This is a deliberate decision that I found myself making with ease. As I’ve already talked about that in the GitHub manifesto, I’m referring readers there for details.

In the past, Mnjul’s Intimate Home came with loaders — before the homepage showed, all the SWFs/HTMLs/CSS/JavaScripts/Fonts and other assets were loaded, and no further network operation was performed afterwards. This was when I hosted my server in my home in Taiwan on a 2Mbps upstream ADSL. As Hakuu is served from CloudFront entirely (and built with more deployment tools), I no longer found necessity in this. Getting rid of the loader relieves engineering complexity, but to be fair, I’m still not doing progressive enhancement due to the SVG page rendering — currently, I only start rendering the page after webfonts are fetch()‘ed. There should be a way to achieve progressive enhancement for pages using built-in fonts initially, though.

I’m also writing my own scripts for font subsetting and site deployment. (Not using existing tools because wanting to give myself challenges.) For site deployment, in the past, I had to copy-paste each JavaScript file to Google’s Closure Compiler web service, then ran my own minifier; I purposefully had separate JS files to leverage parallel network connections. Now, I’m using my own JS/CSS concatenation script and other industry-standard minification tools, and since connection to CDN is fast and we have <script defer>, there’s just one minified file. Additionally, loading from network isn’t the performance bottleneck of the site anymore — all the SVG-related operations and canvas rendering is. Finally, in the past, subsetting fonts would require me going to another C# program I wrote (involving booting up a Windows virtual machine), but now I’m using Docker. (uhm… I know C# on Windows transitioning to Docker doesn’t sound exactly right — I’ve changed the actual subsetting tool to a python package too.)

Talking about performance, I didn’t do any formal performance benchmarking this time. I’m still doing optimizations — like using CreateImageBitmap where it’s available, early aborting between async operations if needed, using alpha: false when getting canvas 2D context, etc; but I’m mostly doing it on a hunch, and I’ve not poked through Firefox or Chrome’s developer tools to do serious performance benchmarking like I did with Allodynia. For one thing, according to Amdahl’s law, I’d probably be looking into the rain effect code for the most noticeable improvement, but I still haven’t got a grasp of all the WebGL operations there.


你的電子郵件位址並不會被公開。 必要欄位標記為 *