Going Turbo with Next.js and Tailwind

What an evolution! This blog has gone from WordPress to SquareSpace, then Jekyll and 11ty, and now to Next.js. Before diving into the details, please explore it: I guarantee you will be impressed with the experience!

Fast Everything

As a user, you load and browse through the site as if it were seamless, with incredibly quick load times and instant switching to internal links, all backed by amazing PageSpeed scores. The Developer Experience is equally as great: Fast Refresh when adding new features and writing new blog posts, and it builds, tests and deploys in under five minutes from a Git push.

There is plenty going on here to facilitate this experience, but Next.js and Tailwind CSS in particular help to deliver only what is necessary to the browser.

Testable Markdown Components

Previously, I tried and failed to find a platform that incorporated MDX. Recently I stumbled across the excellent Tailwind Nextjs Starter Blog, and knew within minutes that this problem had been solved really cleanly. Take the Markdown used for my Talking Tech post:

The feedback was positive and constructive, and I definitely found
it great learning experience, even if I still watch the recording through my fingers!

<Picture alt="Hacking a Career in Technology chat" ext="jpg" filename="gc-talk-chat" />

As a presenter, you can't help but meet new people as they discuss your talk, and it was great to
catch up with old friends and meet more local experts.

The Picture element is a separate, standard, reusable React component, and can be tested with a library like Jest:

interface Props {
    alt: string;
    ext: string;
    filename: string;
}

const Picture: FC<Props> = ({ alt, ext, filename }) => <LazyLoad once>
   {/* etc... */}
</LazyLoad>

TypeScript

The trivial Next.js TypeScript support was the final push I needed to rewrite my blog. In a future post, I will explain how much impact the language has had on my outlook on software engineering, but suffice to say, it is a joy to use virtually anywhere. Porting the existing starter blog was not always without problems, but saw immediate returns when using the extra typing in conjunction with more ESLint plugins.

Reframing a Blog

Ultimately, I have put a lot of effort into this website over the years! The setup is now heavily customised, and although the Markdown from the blog posts is relatively portable, I now see the website in a whole different light. Going back to the start:

This site is now dedicated as a playground for those ideas to be explored.

Somewhere along the way, I was pushed into the mindset that all blogs follow the same format, and forgot they can serve as a fun portfolio of what has and can be achieved. Rather than be frustrated with the time taken to check over thirty blog posts ported to yet another platform, I have loved re-reading them and reminding myself how much I have experienced over the last ten years.

Thanks for reading; I hope you enjoy this latest incarnation as much as I do 🍻