New blog, new stack

On blogging

It's been quite a wild ride since November 2014, when I first wrote a post like this. Back then, I was resolute that I would not post at all, but as I grew older, I realized that there is a lot of value in blogging, so I decided to restart my blog. I noticed that there are far too many useful things that I learned and subsequently forgot over the years. All the spectacularly specific technical challenges tied to a problem at a specific point in time and their solutions that I could've recorded are forever gone. A journal of past challenges, if you will. That's why I consider blog posts as a way to preserve some of that information, at least for myself if not for anyone else. Who knows, maybe some of the information from my site will make its way into some LLM sooner or later.

The tech stack

I've spent a lot of time looking for a good solution for a personal blog. Initially, I wanted to use SSGs only, so I chose 11ty which I plan to use later, after I try out current Next.js setup. Naturally, there are more dependencies, which make it a bit harder to host and maintain when compared to a statically generated site.

Next.js

My experience with Next.js is limited, but so far it has been quite pleasant. It took me some time to get used to React server components. If you are wondering whether it's similar to PHP, the following Tweet from @housecor explains the difference:

MDX

So having sorted pages, routing and components, I only had to decide on the way I would write posts, which would obviously be via Markdown. I discovered MDX, which allows one to write JSX directly in Markdown including imports of components, how cool is that? Obviously, I had to import a WebGPU Game of Life wrapped in a React component into my post, so here it is:

This is all the Markdown that was needed to set up the above example:

import WebGPUGameOfLife from './components/experiments/webgpu-gol'

## Some casual markdown

Lorem ipsum dolor sit amet

<WebGPUGameOfLife />

I'm still trying to figure out how I'll handle embeds since, as you may have noticed, the Tweet embed is loaded dynamically via a Tweet component from mdx-embed, which I'd like to replace with a version that is inlined at build time. It won't reflect the current count of likes and retweets, but that's a worthy trade-off for better performance and accessibility. Also, the currently used component has an issue where it may not load at all.

Tailwind

After seeing all the Tailwind CSS hype, I was eager to try it and I was instantly reminded of Atomic CSS, which I heard about back in 2014. I won't deny that I haven't enjoyed using it, though. I love BEM, but as the saying goes, naming things is one of the difficult things in computer science and I don't have to worry about that here, what a relief!

Days come and gone

It was interesting to observe all the developments in JavaScript ecosystems since ES6 (2015) and improvements in support for new features in browsers. Having a better understanding of object-oriented programming in C++ than in JavaScript, I remember being perplexed by JavaScript's prototype chain before ES6 classes were available.

I was learning Backbone.js and Angular 1, but on my blog I used exclusively jQuery with a myriad of plugins and polyfills in combination with CSS transitions. Feel free to check out previous versions of the site by clicking on GIFs below.

I can't wait to try the new View Transitions API. If you want to learn about it, I can only recommend this explainer.