Revamp v3

December 29, 2020

Every year or so, I use my own site as an opportunity to re-evaluate my current technology-stack and experiment with things that I may not have an opportunity to on an everyday basis.

Tailwind CSS

Where have the years gone? Less, Sass, and Emotion - the way in which I bring designs to life has changed a lot over the years, but one thing always remained consistent - writing CSS was a fundamental piece of the equation.

While I had heard of Tailwind CSS, I (like many) wasn't completely on-board with a "utility-first" framework. Using Tailwind CSS for this project dispelled a few preconceived notions I had with new lessons-learned:

  • Pseudo selectors are overrated: To clarify, ::before and ::after have their place. I may have gotten caught up in the old adage that the less DOM elements the better, but in the end, it made HTML & CSS harder to visually parse.

    Don't be afraid of writing HTML. Take a look at a component comparison from my previous site:

  • Classes don't make your code messy: The way in which you use them does. React; or any templating language like it, provide you a platform to build configurable components that work with Tailwind CSS, not against it. Take a look at the <Alert /> component for my site:

  • Dark-mode FTW: This is something I've wanted to explore more, but was always an afterthought with previous design-systems I've built. Tailwind CSS makes this straight-forward with its native dark-mode support:

    For Next.js - I highly recommended next-themes; which provides a straight-forward approach.

  • Large site !== large CSS: Ever since I learned about Facebook's new CSS approach; by generating atomic CSS to keep their bundle-size small, I was curious to see if it could be used in a way that still created a developer/team-friendly approach to managing styles. Again, Tailwind CSS has us covered. With postcss-purgecss integration built-in, an infinitely configurable/extensible setup, and Intellisense integration, patterns among single-use utility classes quickly become apparent; with this new site coming in under 6kb - which is just remarkable.

Next.js

Next.js has been on my radar for quite some time. After Next.js Conf 2020, I decided to take the plunge. A few standout features that made this build super enjoyable:

  • getStaticProps: Having built several projects with Gatsby, I wanted to make sure I could use the same API to grab local data as I would for remote. getStaticProps provided a way for me to query the local filesystem for my blog posts, transform them with next-mdx-remote, and return the data to the template, statically.
  • Automatic image optimization: The newly released Image component; which comes bundled with the framework, was extremely simple to setup and makes 3rd party solutions for resizing/optimizations unneeded for most cases.
  • ⚡ Fast reloads: I'm almost at a loss for words here. The increase in speed from save to reload has been a game-changer. next-remote-watch has also been a valuable addition while writing blog posts locally.

I also moved the hosting over to the parent company, Vercel which has yielded 20sec production-builds 🤯

Conclusion

Is there a conclusion? Probably not. Who knows what types of technologies I'll be working with in the future. But, as of right now, I am incredibly happy with what so many have worked so hard to make available. Feel free to check out the source of this site and let me know what you think!