A year of ciolek.co.uk

Hello, and welcome to the first anniversary post of ciolek.co.uk!

This is a little different to the typical article I write, but I hope you enjoy it nevertheless.

It's been about a year since I posted my first article on this website, and it has since undergone a great amount of change. Starting off as a fully static HTML only website, to the modern Next.js version we have now, it's been really fun working on this project. I've learnt a lot about web development so far, and I hope to learn a lot more still.

And to anyone who's read any of my articles, thank you. I hope they helped you!

Origins

This website started off as a really basic project. Just pure HTML and – very little – CSS for layout only. The header and navigation were duplicated in every page, which made adding new pages very difficult! It also irked me a little bit conceptually, as it would eventually make maintenance exponentially more difficult with each page I added.

This was fine while the number of pages was small, but when I wanted to add the projects page, it became clear that this wouldn't be sustainable. Going through and manually updating every page was a bit of a nightmare, since it required a lot of effort to make sure that each page looked consistent, which made for a relatively poor developer experience (DX).

I also wanted to add a footer, but that, again would require a lot of effort to make consistent. I needed to find a better solution.

It became clear that I had to move on. I began searching for something new, and ended up with Express.js.

Express.js

I chose Express.js for several reasons, but among them was its simplicity. I didn't want to jump straight into a big, it just works framework. Why? Because I still needed to properly learn the basics; if I want my skills to be transferrable, I needed to understand the basics first, without bogging myself down completely in the inner workings. Express.js gave me exactly that. As a minimal framework, I still needed to understand what was happening under the hood to use it effectively, but it abstracted enough to make it a pleasant experience.

Migrating to Express.js was a complete game changer for the website. With EJS as a templating engine, I now had access to layouts and server side includes (SSIs) which I used to make (proto)components, such as the header, footer and navigation. Gone were the days of having to manually update the nav on each page whenever I added a new one!

With the movement to a node based environment, I could take advantage of a lot more of the ecosystem. This eventually led me to using TailwindCSS and DaisyUI to add a (much-needed) fresh coat of paint to the website. The layout, which I grew to quite like, stayed the same. It's simple, content focused, and gets the point across, and continues to be the layout you see to this day.

I also experimented with dynamically generating the articles listing using a database. I chose a serverless Postgres service to host it, for no other reason other than the fact that it fit neatly within my budget: free. The database held the article names, descriptions, links, and dates of publication. The system was a little slow, which was probably due to the aforementioned budget, but it did have a major advantage; I no longer had to hardcode the article listing, and it encouraged me to start looking into proper content management services (CMS). It was also nice to properly deploy a database in a non-academic context.

Using Express.js began to open my eyes up to what could be done in modern web development, though you could argue that it is anything but. Being able to make (proto)components was fantastic, and greatly reduced the amount of redundancy I had in my codebase, which was a massive win. Also manually having to set up the router was a great learning experience; It helped me understand, at a more fundamental level, what higher level frameworks were actually doing under the hood, which made searching for, and migrating to, one a far smoother experience.

Next.js

As the website grew, it became again time to move on. I really enjoyed the simplicity of the Express.js/EJS stack, but the DX started to suffer again; EJS doesn't have good editor support, gets formatted strangely by prettier, and the protocomponents had their limitations. Since I was already planning a refactor to move the codebase onto Typescript, I decided it was a good opportunity to shift completely to a new framework. So I began searching:

• It had to support server-side rendering
• It needed to have good ecosystem support
• It'd be nice if it used TS/TSX

If you have prior web development experience, or read the heading for this section, then you'd, probably, guess that I settled for Next.js.

The migration to Next.js was very quick, though that might not mean too much for a relatively small website. I'm glad I chose it; writing my own components felt extremely natural, it integrated well with DaisyUI, and had good documentation.

You might argue that it is complete overkill for the sort of website I'm building, and I'd tend to agree, but I believe that it was a net benefit to both the user and developer experience: a total win. Next.js allows me to use the React client side to preload resources, which creates an extremely responsive user experience, and as a developer I could easily implement my own reusable components.

As a slightly funny aside, web development is not the first context where I've used TS/TSX. I've actually used it before to create my graphical shell using Astal, which I'm continuing to work on to this day.

Storyblok

As mentioned earlier, when using Express.js, I started to think about using a CMS to handle my articles. Why? It bothered me slightly that everytime I wrote a new article, I had to rebuild and redeploy the website. A CMS could fix that.

I wanted to find a headless CMS solution, since I wanted to retain the flexibility I had over the structure of my website, and which aspects I would delegate away to the system. After looking around a bit, and a recommendation from my dad, I decided to use Storyblok.

Getting Storyblok to work took some time, I'll admit, as it was my first time working with a CMS. Their documentation for Next.js, and Typescipt in particular, is a little sparse and outdated, which made the process a little painful when starting out. They, fortunately, had some good examples, which helped me build understanding. After playing around a bit on an experimental branch, I finally managed to get a "Hello, world!" example working, and it was all go from there.

I first worked on generating an article listing, using their GraphQL API. Put simply, GraphQL is awesome. It lets you specify only the parameters you want from a dataset in a nice, intuitive language. It saves a lot of bandwidth and work as you don't need to recieve and parse unnecessary data, instead only getting what you need. It was nice and quick to get it working, and generating the listing page was near instant.

Next, I worked on rendering the articles themselves, which introduced me to the concept of slugs in Next.js; slugs are effectively wildcards in the directory path that can be passed to a page as a parameter. I use slugs when querying the Storyblok API to fetch a story at a specified address. If it exists, it gets rendered for your reading pleasure; if it doesn't, you just get a lovely 404 page instead. It's nice, simple, and effective.

So far, using Storyblok has been a good experience, and, from my relatively limited experience, I'd gladly recommend it.

What's next?

The website has come a long way, but I still have a couple of things planned.

I want to work on making individual project pages, where I go a little more in depth about the stuff I've been working on, and just to showcase them a little bit more than the summaries I've got now.

I also want to make a photo gallery, since I recently got myself a DSLR and have really enjoyed going out and taking some pictures with it. Wales has some really nice landscapes, and it'd be nice to share them with you all.

Summary

The website has gone through a lot of changes since its first release about a year ago, and it's been a great journey so far. It's taught me a lot about the way the modern web works, and has given me some great first hand experience in designing and deploying a functional application. I've really enjoyed working on it so far, and I hope to keep working on it in the future.

That's the end of this article, I hope you've enjoyed, and I hope to see you again soon!