This site is where I undertake a lot of my web experiments. You can see it on GitHub, however if you're curious, a brief summary of the various technologies used is below. It's not an exhaustive list, however, it's some of the things I think are most interesting at the minute.
Page speeds fetch from Google Analytics on 1/6/16 for "/"
I'm quite unhappy with the above. Looks like the service worker has been broken for a while - haven't set up JS error log pushback just yet. I've since fixed the service worker, and anticipate those to drop to around 300 - 400ms on average.
|PageSpeed Insights (desktop)||89/100|
|PageSpeed Insights (mobile)||73/100|
|Qualys SSL Report||A+|
This site has a service worker sitting between the browser and the network, and is configured to serve most content from the cache if it's available. This has a number of interesting benefits:
However, this comes at the cost of not having the most up to date content on the first refresh. This is solved by deploying a new version of the service worker when content is update. While this doesn't in and of itself show the new content instantly, it'll display a toast notification to the user indicating new content is available.
This is also only available in Firefox and Chrome. IE is getting support soon, and Safari might do it eventually. You can learn more here:
Try visiting this site on mobile, and then switching it to aeroplane mode. If then visit this random link, it'll show a "network error" page as opposed to a 404.
The web app manifest is a requirement to be prompted for the Chrome on Android "add to home screen". It shows a nice splash screen while the site is loading, a nice icon on the homescreen and a title on the homescreen of my choosing.
As an aside, I'm quite excited about the future of progressive web apps, and feel confident that investing in the related technologies now will pay dividends in future.
Kubernetes is a cluster management system, loosely based on the Borg container system used to run infrastructure at Google. Kubernetes provides APIs to manage the lifecycle and deployment of applications, as well as introspection about your application.
A golang image server. The favicons required for the manifest.json are generated; they never exist client side.
Trying to move away from meta tools around web technologies such as jQuery, SCSS and other niceties and work directly with the browser APIs. They're pretty damned good these days!
The site both runs and is optimised for H/2. If you don't have a H/2 connection you're going to have a bad time; generally, most people will have one, though.
If you're curious whether you're on a H/2 connection and you're using the Chrome browser, you can visit the following URL:
All connections to this site should be either encrypted over TLS, or a redirect to the encrypted version of content. Further, andrewhowden.com uses HSTS including subdomains. This makes the requirements for TLS stricter, and does not allow the site to be served any longer over an insecure connection for browsers that support HSTS.
The site is part of the HSTS preload list for most modern browsers, meaning browsers with more modern lists will never connect to it over an insecure connection. This saves a few valuable round trips!
The certificates are generated by Lets Encrypt, and automatically renewed by other software running on the cluster.
Bower is a nice framework for handling frontend dependencies.
© Andrew Howden, 2017
Curious about how this site works? See the article