It’s been almost nine years since I created this website and a lot has changed in that time, both with myself and with web development technology. I’ve recently reworked the site to freshen up the design and make it simpler and cheaper to host. The site is not a priority for me and I rarely post to it, but it’s a good opportunity to explore some new technology and practice design and accessibility techniques. In this post i’ll cover what’s changed and the motivation for the choices I’ve made.

Framework and hosting

Originally I built the site with Cofoundry, an open source .NET CMS I was actively developing at the time. Whilst this was good dogfooding practice, the functionality of a full CMS far exceeds what’s required for a developer blog and comes with hosting requirements I’d prefer to avoid.

This website is hardly ever updated so it made sense to move to a static site generator that I could easily host for free or nearly free. I chose to use Astro, a popular JavaScript framework for content-based websites that supports static site generation. It also supports optional “islands” of interactivity with a framework of your choice such as React or Vue, which is really neat but not necessary for this site.

I chose to host on Cloudflare, a provider I was already using as a reverse proxy and DNS host. Their workers platform makes it easy to host static sites for free and also includes useful features like URL rewriting and automated build pipelines. Since Cloudflare has recently acquired Astro, it feels like a safe pairing.

Design and Accessibility

I didn’t really want to go down a rabbit hole with a new design, but there were a number of issues with the old design that I wanted to address, particularly around accessibility and low-contrast elements that made the site a little drab. I also wanted to explore and practice code-based accessibility enhancements, taking advantage of more modern browser features. Improvements include:

  • Improved color contrast, font sizing and navigation affordances.
  • Better use of landmark structural elements.
  • Re-structuring of headings and better use of semantic elements for blog post metadata.
  • Improved description and aria labeling for links, icons and buttons.
  • Addition of a keyboard navigable skip-link to bypass header content.
  • Doubling down on the clean and simple design, removing any unnecessary elements such as blog post categories which weren’t really adding value yet.

Content changes and code refactoring

Nine years on from the original design there were plenty of outdated features or coding techniques to address:

Content

  • Remove social sharing: I was always skeptical anybody actually used these, and services like Google+ and Facebook are no longer relevant anyway.
  • Removal of newsletter subscription: It’s a service that I don’t want to manage and the RSS feed remains a viable option.
  • Remove comments: I don’t expect many folks to read this stuff, let alone comment. There’s other ways to get in touch if you need to.

Code

  • Removal of cross-domain font loading: widespread adoption of HTTP/2 removes the same-domain penalty for self-hosted resources.
  • Moving from SASS to newer native CSS features such as CSS variables, nested classes and CSS imports which Astro automatically bundles together to remove the nested dependency penalty.
  • Replaced SASS functions like tint and shade with native CSS alternatives like color-mix.
  • Use of CSS layers and rem for font-sizing.
  • Migration from a layout grid system to simpler structures that use of flexbox.

Open source

I’ve published the source code for the site to github.com/HeyJoel/joelmitchell.co.uk.

There’s still some bits and pieces I’d like to do to improve the site, but life is busy so it might well take another nine years to get around to that!