A New Iteration

So, I’ve finally updated my website. It’s been a long time since the last major change, but it wasn’t without trying. It’s not a radical change, the core content is still the same but the underlying technology has been updated to help me continue to improve the website and write more content.

Below are some thoughts about the obstacles I faced and how I changed my thinking to actually release the update to my website.

A brief history

Ten years ago, I submitted a git commit for a version of this website. The core backend of the site was built using the FuelPHP framework. The CSS was just that, plain CSS. The style and core content remained pretty much unchanged since until this refresh.

Screenshot of my old website ‘about me’ page

In the subsequent years, I continued to add the movies I’ve watched but that was pretty much it content-wise. Everything served me fine for a few years, but I eventually became unhappy with the design and underlying code. My development focus has turned to the Laravel framework, so I began porting the code over.

Both these PHP frameworks follow the Model–view–controller design pattern, so the shift wasn’t too difficult. Laravel has a lot of conventions for convenience, but these could easily be overridden. This meant supporting the database scheme I had designed in the beginning was relatively straight-forward.

The underlying framework code – using Laravel 5.7 – was switched over around August 2018. The HTML remained unchanged, but used Laravel’s Blade templating system. The CSS was ported into Sass, to make use of Laravel’s build tools, but nothing visibly changed on the surface. To the end user the site identical and it remained in this state for a few more years.

Friction

There were quite a few pain-points updating my website. There was no automation between my development and production sites. This impacted the enthusiasm I had to develop new features and publish content.

Firstly, I had to use the database directly to add blog posts – not a major issue – but I was also unhappy with the design and lack of styling for code snippets. Combining these two issues, my excitment to publish posts dwindled.

Although I had built a custom command using Laravel’s artisan toolkit, I sill had to find the movie’s IMDb ID, manually SSH in to the server, and run the film. This gave me the base content, including movie summary and all the crew relationships thanks to a PHP API wrapper. Writing reviews meant accessing the database and adding posters was a lot of effort.

False starts

When inspiration hit, I did what a lot of programmers like to do, and that’s to start from scratch; a clean slate. A new codebase with no legacy code and no bugs would mean I would be more proud of the project and willing to work on it more. There are endless possibilities. The sentiment is good, but what tends to happen – and this is from experience – is that the mountain is too large to conquer quickly and either motivation wanes or the path ahead becomes overwhelming.

Instead of a small improvement on your existing project, you now have an abandoned project and no improvement on your existing project. You’re back at square one. It’s rarely a futile endeavour, you learn a lot along the way, but your goal – of improving your project – isn’t actually acheived.

During this process, I built a completely different website to host my code blog posts and a component library to help me make sense of my content.

Jamstack and Eleventy

Screenshot of my code blog website

For my code blog, I started with the Hylia starter kit designed and built by Andy Bell. This was based on the static site generator called Eleventy. I learnt about a new wave of publishing and deployment tools. I learnt a bit about Node, which generated static HTML, the Jamstack ecosystem and Netlify to host the content.

Components

I had recently used the Fractal component library and I thought it could be applied to my project. I understood the principals of Atomic Design and believed this would help me deliver an updated design for my website. For this project I also delved in to using GitHub Actions to use automated deployment on GitHub pages.

Although both of these side-quests proved fruitful in learning about different ecosystems, they didn’t help me in my original goal of improving my website. I had fun building with these tools, but I fell in to the common trope that coders like to code.

Perfection

A reason why a lot of my projects get abandoned or neglected is perfectionism. I have an idealistic vision of what I want to achieve and for personal projects I feel this is a noble goal. I am a web developer by trade so my website should be a shining example of my abilities, following all the best practices, the latest features and be void of criticism when someone like me views the source code.

With over ten years of content I want to preserve and the false starts I had already experienced, I needed a new approach. Instead of starting fresh, I upgraded the underlying framework to the latest version and deleted all of the CSS. With the raw HTML I built a decade a go as the foundation, I was able to focus on the CSS. Instead of getting lost in weeds trying to find the latest and “best” CSS framework or build tool to use, I opted to keep it simple. Laravel’s Mix made using PostCSS easy and I used TailwindCSS to hook in to the HTML and attributes I already had.

Pretty much all the code in the background has changed, but the fundamental HTML and database design have been pretty much untouched in over a decade. It goes to show that working on the fundamentals and planning can steer you well in the future. Frameworks come and go, “flavour of the month” build tools are fleeting, but a solid base will help you adopt these while keep a solid foundation.

After a solid few days of slowly writing the CSS, focusing on each section individually, I was making good progress. After a further week of tinkering, such as adding a dark mode toggle, I launched the far-from-perfect update to my website.

I had to step back from my internal monologue and thought process and think about my reaction to other people’s projects. I wouldn’t go digging through the source code looking for problems, so why would anyone else?

Reducing friction

I have now achieved a few core improvements which reduce the friction in updating my website, whether it is content, new features or bug fixes.

I have finally made use of Laravel’s Nova content management system. This allows me to quickly add movie I have watched, including resizing the images for posters. I am able to write blog posts in the markdown editor, which also has a built in preview.

The biggest improvement for me is the automated deployment. When I commit a change the website, GitHub Actions follows a few steps and deploys the changes straight to production. This means I can quickly compile design changes and push them to production without having to follow a specific set of steps.

The future

I have learnt a lot over the ten years since launching this version of my website. There are plenty of articles talking about treating your personal project like a “real” paid project. This a is fine aspiration, but sometimes the articles often fail to take in to account the reality of life. I have taken my experience with projects and applied them – where appropriate – to this project.

Screenshot of my backlog management in Trello

I have made a long list of things to improve and features to add. The project is now out there, warts and all. I am OK with the fact there is a lot still left to finish, but now I have the mechanisms in place to do it. I am once again excited for my website and have a few new features already mostly complete.