Getting to Play with New Toys

These days, I've mostly settled on a few tools that make me productive at work. I don't feel an urge to push for trying out new stuff as much as I used to. Changing technologies comes with a risk and a learning curve, so there has to be a really good reason, backed by real business value, to shake things up.

However, this means that there are a few exciting technologies that I've been missing out on. The decision to build this website was a great opportunity to try a few new technologies, or perhaps the FOMO on these technologies was the reason to start it in the first place.

New toys

Anyway, here we are. You reading this means that I've built a website with these:

Next.js

I've used a few things build by Vercel folks (lately SWR - it's amazing!). But somehow I never got a good usecase for choosing Next.js. Now that they added support for SSG it was a great match for this project. It's all that it promises to be - great DX, thinner in abstractions than Gatbsy, and outputs really fast static websites. Loving it so far!

MDX

I've had a few issues initially, since MDX is not as integrated into Next as it is into the Gatsby ecosystem. But after adding next-mdx-enhanced to the mix, things clicked and it's been a great experience ever since. It's a very convenient way of authoring content, and I've definetely only scratched the surface of what's possible. I already have a few ideas for how to enhance the posts rendering that I'll be trying out next.

ThemeUI

Definetely the most controversial of the three. I've read through ThemeUI's docs multiple times since it was created, and I was always left confused as to how to use it efficiently. Giving it a chance and trying it out for this project made me finally understand the idea behind it fully. It works really great with MDX, no doubt. However, using it in regular React components, via the <Styled.x sx={{...}}> API was initially a tough sell for me. The knee-jerk reaction is to mumble something about separation of concerns and spaghetti markup. However, the more I used it, the more I enjoyed the freedom from having to name every single styled piece of markup (be that via a class name or a styled component). It's super liberating! For this particular project - a single developer building a static, MDX based blog site - ThemeUI works really well.

New playground

Going from reading about a library to actually trying it makes a huge difference in depth of understanding. One benefit of having a side project like this one is that it's a chance to dip my toes in tools outside of the stack of my current company and prevent getting out of touch with the progress of the ecosystem.