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.
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,
::afterhave 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:BubbleList.old.jsBubbleList.new.js
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:Alert.js
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.
- 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 🤯
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!