If you happen to have swung by theAdhocracy in the last week or so, you'd have probably noticed things were looking a little different. You'd more than likely have also encountered a few errors or warnings[1], so apologies if that was the case. I've been teasing some of the changes for a while, but it feels fantastic to finally lift the lid and officially launch the redesign. As such, it is my absolute pleasure to introduce you to the third version of theAdhocracy; it's easily the biggest change to date (both up front and behind the scenes).
A Big Deal?[2]
Back in 2015 I launched the version one. I didn't have a huge amount of time and I was itching to just get something out the door, so I bought the cheapest hosting I could find, installed WordPress and (sort of) called it a day. The plan had been to slowly build out a theme from scratch, thereby getting around any chance of "can't ship until it's perfect" delays. Unfortunately, all I ever managed was to install a 'naked' WordPress theme.
Despite having used it for well over a decade, even at that point, I've never really gotten on that well with WordPress as a platform. It does a lot extremely well, and the third-party ecosystem that's grown around it is fantastic, but it has also been stretched far beyond what it was originally intended to be and it shows. Developing for WordPress just wasn't/isn't fun! I enjoy playing around in HTML and CSS, not faffing with PHP templates, so WordPress rapidly became a blocker for making progress.
That was the state of things for over a year, until a number of issues with my first hosting provider finally hit tipping point and I jumped ship. The whole rigmarole of migrating to a new server meant that I was already knee-deep in PHP, SQL and back-end infrastructure choices, so I took the opportunity to tweak a few things. From the outside, that meant suddenly having CSS and JavaScript on the website for the first time, as well as adding useful functionality like a search bar and visible categories; it also came with some actual meta tags and SEO features on the back-end. Visitors would have been forgiven for thinking that a lot of work had gone into it all, but the reality was that I'd simply not bothered migrating the custom theme that had been stalled for months and instead chose to stick the default WordPress skin on instead. Still, a change is a change, and I've always considered that site as 'version two'.
That version did the job it needed to do. It never did it well, but it did it well enough to just chug along. Every now and then I would get the urge to play, but each time the irritations of the web and WordPress would get in the way, and so theAdhocracy went another four years without a single update and I basically fell off the web development bandwagon. Yikes!
But then we moved to London and I started looking for a new job. I began playing around with web development again, building a (never released) portfolio website that proved to me that I still enjoyed working in HTML, CSS et al., whilst also highlighting that the CMS ecosystem had diversified hugely. Interestingly enough, that portfolio was built using Grav, a static-site generator; it was a workflow which hugely appealed, though it left me a little frustrated and didn't quite live up to my high hopes. Still, it planted some pretty fruitful seeds...
Ultimately, though, just as I was starting to get my web dev mojo back, I landed a job as a content writer. Still, I had reinvigorated my interest in development work again, so over the past year I've been slowly picking up more and more duties and projects building out online services, websites, and web apps at work. That introduced me to React and modern JavaScript frameworks, gave me an excuse to deep-dive into CSS Grid and Flexbox, and (most importantly) included a migration of the company website to a new CMS.
Headless Craftiness
Enter Craft, the catalyst for pretty much everything that's happened since. In order to test out some options for work, I ended up installing a few different content management options on my own hosting package. Whilst pretty much any of the choices we tried were a major step up from what the team had been using, Craft stood head-and-shoulders above the others. As I began building out the implementation at work, I saw the potential for theAdhocracy, so began the long process of migrating away from WordPress. I've tried doing that in the past, but luckily the Feed Me plugin made it pretty painless, so once I had the content model in place it only took a few hours to shift everything across.
That was about two months ago and served as the ignition point for a whole heap of changes. One of the big reasons that I liked Craft, something that really appealed compared to the old CMS options I was used to, was the concept of "headless" content. I probably need to do a whole article on both the benefits of this approach and just how incredibly freeing I have found it, but suffice to say it has been a huge win. By decoupling my content from the website itself, I've been able to prototype to my heart's content, trying out a wide range of tools, technologies and services without ever feeling 'locked-in'. Heck, there are currently three separate websites all pulling the same content in different ways out there right now, it's just that two of them are safely obscured behind burner domains that no one will ever find[3].
So whilst the main website has probably appeared entirely stagnant for the last few months, I've actually been writing new content entirely on Craft. That has allowed me to see how posts could be populated out to various prototype websites via my own APIs, tweaking the setup as I go to test real-world usage before I began to settle on a specific tech stack and setup. As a result, there have been more than a few new blog posts in the intervening weeks[4]:
- Crafty Asset Management
- Grid Lock
- Finding the Time
- Game of Thrones: A Retrospective
- Seeing the Subway Gods & Thoughts on Music
PS: you can subscribe to the new RSS feed in the footer below 😉
Today I finally managed to get the last few assets moved off the WordPress hosting and onto the new site, which means it's officially time to say farewell to the old CMS. It couldn't have happened any sooner!
Netting A Whole New Workflow
Hold on, why do I need to move assets to a new site? Couldn't I have just repointed the folder links? Nope, because along with a brand new CMS comes a (partially) brand new host! Another one of those perks of using a headless CMS is that the content doesn't need to be hosted on the same server as the website it appears on. At first, I didn't think this would be a big win for me, personally, but then I was informed that next year my hosting costs are going up quite steeply. That meant I started looking into ways to reduce my reliance on their service. The simplest win[5] was to move everything that didn't need PHP off that web server and, as it turns out, now that my content can be served however I like, that includes theAdhocracy.
This definitely wasn't my first plan of attack. I had fully intended to rebuild the site within Craft itself, and had even begun creating the Twig components that would have been used (what I now refer to as 'rebuild one'). Once I'd decided to move the site, though, one clear winner emerged: Netlify. Again, work projects aligned nicely, as we had just begun building a brand new website with Netlify at the core. The development workflow with Netlify is, frankly, revolutionary, so I leapt at the chance to use it for theAdhocracy. Plus, I'm more than happy with their free tier, so a win-win all around.
Over one particularly rainy weekend I managed to draft together a small REST API, using the Elements API plugin for Craft, along with a simple JavaScript function that could ingest it and spit it out on the page. I even got so far as to create basic pagination and a small homepage feed, much like what I have right now, but there were a couple of things which were already annoying me about 'rebuild two'. First of all, because Netlify has no back-end (at least, not an accessible one), everything had to be rendered client-side. That's not a user experience I particularly enjoy, and it relies on JavaScript completely to work which is less than stellar. On the development side of things, as brilliant as it is to simply git push my changes onto the server, I was three pages in and already getting annoyed at having to replicate code across headers and footers. I'm so used to using include in PHP that I'd forgotten how raw HTML and JS can result in constant repetition.
Luckily, the other technology we were using as part of that work project was Gatsby, a static-site generator that sits on top of React. Seeing how well that was working, I decided to give it a go, but there was one big difference: at work we use the CraftQL plugin to magically build a GraphQL layer for our data, but I didn't want to use that here. It's a paid plugin and whilst it is admittedly extremely good, I just didn't feel that this site would benefit that much compared to the free Elements API, which I'd already begun to configure. Gatsby is designed to work with GraphQL, so getting it all hooked up at work had been simple; doing the same with a custom REST API proved a little more irritating but ultimately manageable.
The Goldilocks Effect
Once that was done, the rest fell into place quite quickly. I'm getting increasingly used to working in React, so converting what I'd already done into components was a fairly simple task and meant that code repetition was no longer an issue. At the same time, the whole concept of Gatsby meant I could do away with client-side rendering entirely. That does leave me still a little unsure as to how I can bring back comments (which is absolutely planned), but for now it's a decent compromise.
I had one particularly fruitful evening of insomnia when a whole bunch of design elements suddenly fell into place, decided on a colour scheme the next day (it's all of the colours, if you hadn't noticed already), and had a whole new layout planned within a week. I even managed to find some time to power up Illustrator, scan in a sketch I made whilst at university, and throw together a logo (of sorts) a couple of weekends ago. Life got in the way a bit, but then this week I've had some time to test the layout and generally tweak it until I'm happy, with one final big push today to get a few remaining bits over the line and... here we are. It's the third rebuild of the third attempt at making a website which is genuinely mine but it's finally here, and it really does feel, like that third bowl of porridge, just right.
Which isn't to say it's finished. Oh no, not by a long shot! I have a feature list as long as my arm of functionality that I want to add, from a return of my media reviews, to taking back my data and beginning to use the site to publish out to services like Twitter, to finally integrating my photography here in a more meaningful way. On the smaller end, there's still bugs I need to fix and a whole pile of leftover issues with the legacy articles, which are still full of WordPress theme components and broken HTML from the migration. Whilst I made sure that RSS was working before I officially launched, search capabilities are still in a WIP stage, and I've already mentioned the lack of comments, so I can't even say this has all the bells and whistles of the old website.
But it's a start. No, it's better than a start. What I had four years ago was a start, whereas this is something more. It's a little pocket of the web which is entirely mine. I designed it, I built it, I deployed it, and I will continue to enhance it in my trademark ad hoc manner. Now that, right there, isn't just a big deal. That's a huge deal.
