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 (opens in a new tab). 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 with quick load times and instant switching to internal links, all backed by PageSpeed scores (opens in a new tab) of 100 at the time of writing. The Developer Experience (opens in a new tab) is equally as great: Fast Refresh (opens in a new tab) 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 (opens in a new tab) and Tailwind CSS (opens in a new tab) in particular help to deliver only what is necessary to the browser.

Testable Markdown Components

Previously (opens in a new tab), I tried and failed to find a platform that incorporated MDX (opens in a new tab). Recently I stumbled across the excellent Tailwind Nextjs Starter Blog (opens in a new tab), and knew within minutes that this problem had been solved really cleanly. Take the Markdown (opens in a new tab) used for my Talking Tech (opens in a new tab) 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 (opens in a new tab):

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 (opens in a new tab) 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 (opens in a new tab) 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 (opens in a new tab):

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 🍻