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
- Mobile: Samsung Galaxy Note
- Tablet: Samsung Galaxy Tab (over 7”)
- Desktop: 1366 × 768 pixels
I tried 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 framework.
Using my own theme involved more initial overhead, but obviously 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, better underlines, and expanded abbreviations on non-desktop devices. The colours are also adapted from the Google Material palette to meet WCAG AA standard guidelines, thanks to Colour Safe.
Software needs to be incredibly responsive, especially a simple blog site; it’s difficult enough to attract visitors here! To achieve the current Website Grader score, this website has undergone several iterations before reaching its current state, and is now powered by the Jekyll static site generator. The HTML that it produces, however, and the images, stylesheets and scripts that support the site, are all optimised using Gulp; trying viewing the source of this page! These are also lazy-loaded using lazySizes and critical to ensure that you can read the content whilst the supporting assets appear. Media queries choose from one of three possible image sizes – and even between two formats – to serve, meaning that 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:
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.
Any development project is made more maintainable with good practices, such as encouraging the use of standards and code reuse. Since the site is built on cross-platform OSS, it has been easy to develop using Visual Studio Code on both my old laptop running Fedora Linux, and newer desktop using Windows 10. The pre-processors Sass and Coffeescript promote code reuse, and I have tried to maintain consistency with EditorConfig and static analysis engines such as markdownlint. Third-party packages are managed from npm, and the site is source-controlled using Git in the cloud.
It is practically impossible to ensure that anything is absolutely secure, but you can guarantee that I use the best security practices where possible. This blog is only available over HTTPS, and uses practically every HTTP header possible to try and ensure that all the content is served as intended. At the time of writing, it also achieved a maximum score 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 Shippable to build and deploy changes as soon as my Git commits are pushed! Although this is entirely privately hosted, it does provide a public badge:
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.