This site might only be a humble blog, but I've applied the same approach to it as the rest of the software that I develop: make it as good as possible, and continue to improve it. The best practices that I continue to develop generally fall into the following categories:

🗺 ️Inclusive User Experience

Software should be usable everywhere and by everyone. The responsive design for the website targets the following device sizes taken from mydevice and StatCounter, applied with sass-mq:

  • Mobile: Samsung Galaxy Note
  • Tablet: Samsung Galaxy Tab (over 7")
  • Desktop: 1366 × 768 pixels

I try to keep the design as lean and readable as possible. It was heavily influenced by the Typography Handbook, using font sizes from Modular Scale generated by the modular-scale library. The lightweight grid system is courtesy of Susy, and modularised according to the Sass Guidelines.

Using my own theme involved more initial overhead, but means that I have total control, and can develop many small yet useful features that add polish to the site. These include multi-platform favicons and expanded abbreviations on non-desktop devices. The colours are also adapted from the Material Design palette to meet WCAG AA standard guidelines, thanks to Colour Safe.

⏩ Fast

Software needs to be incredibly responsive, especially a simple blog site; it's difficult enough to attract visitors here! To achieve the high scores on:

... this website has undergone several iterations before reaching its current state, and is now powered by the 11ty static site generator. The HTML that it produces, however, and the images, stylesheets and scripts that support the site, are all optimised using Gulp; try viewing the source of this page! These are also lazy-loaded using lazySizes and critical, to ensure you can read the content whilst the supporting assets appear. Media queries choose from one of three image sizes -- and even between two formats of each -- to serve, so a mobile device using Chrome will have a dramatically smaller total payload than a desktop Edge user. External assets are served from a public CDN, mainly cdnjs. Any vector images are simply inlined SVG -- such as the social icons in the footer courtesy of Simple Icons -- to prevent unnecessary browser fetches, and render cleanly at any size.

The site is also available as a Progressive Web App; try opening in Chrome on Android and you should be greeted with a banner similar to this:

Progressive Web App

Now, the site appears just like an app, but also caches requests to the server using a service worker, so should be an even smoother experience on subsequent uses.

⚒️ Maintainable

The site is powered by cross-platform OSS, and has been built on the following platforms:

  1. First: Visual Studio Code on an ancient laptop running Fedora Linux.
  2. Next: again, Visual Studio Code, but on a Windows 10 desktop.
  3. Now: entirely remotely on Cloud9, from my cheap Chromebook or any device!

The Sass pre-processor promotes code reuse, and I have tried to maintain consistency with EditorConfig and static analysis engines like markdownlint. Third-party packages are managed by Yarn, and the site is source-controlled using Git in the cloud.

🔒 Secure

It is practically impossible to ensure that anything is absolutely secure, but you can guarantee that I try to use the best security practices where possible. This blog is only available over HTTPS, uses practically every HTTP security header possible, and achieves great scores on UpGuard. As with anything else on this site, if you spot something that is missing or needs improving, please let me know!

🏭 Easily and Consistently Deployed

This website uses Netlify to build and deploy changes as soon as my Git commits are pushed! This not only saves time, but prevents dull repetition and possible mistakes from manual copy-paste builds. My public repositories use other CI/CD services like AppVeyor and Travis to instantly build code, run unit tests and push packages to managers such as NuGet where necessary.