I've been wanting to give things a lick of paint here for quite a while, but life just got in the way a bit. There were several things on the TODO list:
- Update stale content
- Re-visit branding and colour palette
- Add blog articles
- Create a landing page for case studies
- Update behind-the-scenes technology
Update stale content
The last site version was over three years old, and some of the content there had the same problem. There were updates needed all over the site, from the supported browsers list, to accessibility statement information, to updating the 'About me' and ensuring case studies still made sense/were relevant.
Re-visit branding and colour palette
The colour palette was in need of a few tweaks to make it more accessible under the APCA colour contrast checks for WCAG3 conformance.
There were a couple of big issues, namely Raspberry and Raspberry (text on dark) weren't as accessible as they should be on both light and dark backgrounds. The Lightness contrast for raspberry on white-ish is Lc68.9, raspberry text on darkness is Lc-31.8, raspberry on darkness is Lc56.4, and raspberry text on darkness is Lc-38.3. The minimum recommended for body text is Lc70/-70.
Because of this, all pinks are being replaced with deep pink for light mode as it comes in at Lc70.8 on white-ish. For dark mode, I'm having to mostly retire all pinks, and will replace with rubber duck, since it is Lc is 89.9 on darkness.
Here's the full colour palette:
-
- Deep pink
- #c20071
- rgb(194 0 113)
- hsl(325deg 100% 38%)
-
- Rubber Duck
- #ffe600
- rgb(255 230 0)
- hsl(54deg 100% 50%)
-
- Cyan
- #00ffff
- rgb(0 255 255)
- hsl(180deg 100% 50%)
-
- Darkness
- #171717
- rgb(23 23 23)
- hsl(0deg 0% 9%)
-
- Grey
- #545454
- rgb(84 84 84)
- hsl(0deg 0% 33%)
-
- Light Grey
- #a8a8a8
- rgb(168 168 168)
- hsl(0deg 0% 66%)
-
- White-ish
- #f5f5f5
- rgb(245 245 245)
- hsl(0deg 0% 96%)
I've not used the Cyan (bright blue) anywhere just yet, but it'll be part of the high contrast light and dark colour schemes I intend to create to compliment the general light and dark themes already present.
Add blog articles
I've been telling myself for a long time that I should be writing more. I've done front end development for a long time and I probably have stuff in my head somewhere worth sharing!
Well, I've finally done it. There's a new articles section which will have general musings and writings on accessibility, performance, frontend, frontend code, legal stuff, and anything else I feel is worth sharing.
Create a landing page for case studies
Once I'd figured out how to make the blog section work, adding a landing page for case studies was very straightforward. It uses most of the same code behind the scenes in Eleventy as the blog section, which is really useful.
So now, instead of just having all case study links in a sidebar on the homepage, there's a place that they can all sit. Feels much more organised now that the content of the site has expanded considerably.
Update behind-the-scenes technology
As well as expanding the site's main functionality, there were also a few items that needed addressing behind the scenes. The first: keeping NPM packages up-to-date.
I made sure I was on the latest version of Eleventy, and that all the PostCSS plugins I'm using for compiling my CSS are up-to-date. It's important to keep on top of PostCSS plugin updates, because the point of PostCSS in general is that a lot of the plugins provide ways for you to write very modern CSS before all browsers support the functionality/syntax. The plugins convert what you write into 'current' CSS based on what browsers I tell it I'm supporting.
As well as this, I've also removed the need for Webpack to compile/transpile my JavaScript for this site. It's no longer needed for what I'm doing, so now I'm just including my JavaScript as an ES module and letting browsers handle the importing of any other files I need. This is brilliant, and it's such a step forward from the bad old days of needing jQuery, or the more recent not-quite-so-bad days of having to transpile your modern JavaScript to work on older browsers with tools like Webpack.
The only downside to this is that I now have no JavaScript minification step in my build process, but considering how little JavaScript I'm actually using for functionality on the site, this is actually not really a real-world problem.
I've also added Prism for syntax highlighting - it's fairly compact, does a good job and allows themes and in future I can expand the languages I want to do code syntax highlighting for fairly easily. I'm also only loading it on pages that will have code examples, so other pages don't get a performance hit from it. Overall, Prism adds about 18KB (compressed) to a page.
A lot of the CSS was completely re-written too. Now that CSS grid, container queries and other features are part of the standard baseline, front end got a whole lot more fun and flexible again. Grid especially is magnificent.
Final thoughts
Overall, I'm really pleased with the steps forward this version has made. New styles, new tech, new content, new brand.
It was time to freshen up, and it feels like this worked out pretty well.
I also spent some time making sure performance was at the forefront of this rebuild too, and the Page Speed results for both mobile and desktop coming in with 100s across the board show that.