If you a reading this on purplesquirrels.com.au then you might not see any difference. If you are on benfoster.com.au then you will be seeing the new site.
It’s hard to believe that the last redesign of my blog was all the way back in 2014. I made a few tweaks back in 2019, but for the most part it has remained the same for 8 years! I felt it was well overdue for an update and took it as an opportunity to explore some newer technologies and techniques.
I started with the intention of deploying to purplesquirrels.com.au, then at some point along the way I decided I’d combine all my sites at benfoster.com.au. As I write this, the blog is still accessible at either URL, but the Purple Squirrels site is still using the old WordPress PHP theme.
With the refreshed design and tool stack, I hope to start posting again too.
So what’s changed? Well, the site is still powered by WordPress. I still think this is the easiest tool for blogging. It has been WordPress from the beginning and with over 150 posts I don’t see any point in changing. Also, a lot has changed in the last 8 years and I wanted to take this as an opportunity to explore some new ideas.
Headless WordPress is something I’ve been wanting to try out for a long time, however I felt the tooling wasn’t quite there yet and working with the REST API was quite cumbersome. This space has matured quite a bit and there are now many options available to simplify working with headless WordPress.
Remix + React
I am a big fan of Remix. I have made a couple side projects using Remix and the development experience is amazing, and the way it enables brilliant user-experience of the front-end is unlike any other React framework. In my day job I primarily work on a React and Node based app, so I am very comfortable working with React. Having my blog front-end also built on React and properly stored in Git will make it much easier to work on, instead of the old PHP and jQuery templates.
I am now using the WPGraphQL plugin to access the WordPress backend. This makes accessing data so much simpler. With the plugin enabled in WordPress, I am using Apollo on the Node server to query the WordPress GQL endpoint and retrieve the data as JSON. From there, it’s easy to construct the UI with React components.
I started out with Tailwind because at the time there were no better alternatives for Remix. To be honest, I am not sold on Tailwind. I have tried it a few times and always end up removing it for something else – usually just CSS side-effect imports which are easy to scope using nesting in either LESS or SASS, and simple CSS variables. Now that Remix has official support for other CSS techniques such as CSS Modues and Vanilla Extract, I removed Tailwind once again, and decided this was a good opportunity to learn Vanilla Extract. And I have to say, the experience has been so much smoother and enjoyable with Vanilla Extract. I’m no longer constantly searching through docs for weird class names, I can just use normal CSS.
I am taking advantage of modern CSS techniques which weren’t available or stable at the time of the last design. These include
- Container queries
- HDR color with OKLCH and gradient color spaces
Work in progress
The site is still a work in progress and I will continue to make tweaks over time. There might be some browser compatibility issues as I haven’t spent a whole lot of time doing cross browser testing – I really just wanted to focus on exploring some new ideas.