If you visit this website, it’s likely it won’t look or act any differently right now. Maybe you’ll see a new dark mode! I spent the last two weeks moving to a new WordPress theme, one which I’d call a younger cousin to the previous theme I used. It has less under the hood, uses slightly different syntax, but the ideals behind some of the tech are similar.

Here are some small updates I made in the transition:

  • I added a new CSS function called light-dark(), pretty much the result of Dave Rupert’s experiment. You know what this unlocked for me? I was able to remove almost all declarations of color and background-color from the code, outside of a few instances. I couldn’t believe how it simplifies light and dark mode code.
  • I was using CSS mixins to drive fluid sizing, borrowed from this Codepen. This was a Scss based mixin that gave the site fluid responsive superpowers, added around 2017. Since that time, utopia.fyi is now a much easier, more efficient way to provide fluidity. And, I don’t even have to use Scss for this.
  • All variables are now CSS custom properties, aka CSS variables. I love removing abstractions!
  • I have a new plugin called Lite Video Embed, which now won’t require YouTube to load everything until the visitor interacts with the video. Performance win!
  • I’m now using another new CSS function called color-mix(), and it’s pretty badass how it just works. This is another Scss abstraction I didn’t need to use.
  • Switching themes means I transitioned from using Webpack to using Vite. It’s such a refreshing difference!
    • One major difference that I noticed immediately is the ability to run the vite server environment, and allow it to hijack the development environment for reloading.
    • In other words, I don’t need to have two environments to see live reloads anymore. If I’m using https://example.local/ to see WordPress work locally, Vite will use the same environment for live reloading. No need to switch to a different URL like https://localhost:3000! Truly, I’ve been annoyed by this for more than a decade about Webpack! No more!
  • With all of this, I changed every CSS partial from .scss to .css. Since CSS now supports nesting natively, Sass and Scss aren’t necessary for my personal work.
    • Now, that said, this theme does include PostCSS and Vite is still doing some kind of transpiling. I need to figure out how to turn off transpiling and allow Vite to just concatenate all CSS partials into the global CSS file, as well as generate a critical CSS file that I can insert into the <head> for even better performance. UPDATE: fixed transpiling from happening!

The fact that this new theme has likely half the dependencies that it used to is a big win for me. If I walk away from the theme files and come back in some time, it seems more likely that I won’t encounter legacy issues like I did with Webpack. In fact, here’s what the dependencies look like right now:

asuh.com development package dependences in May 2024 from package.json

I think I might clone the original theme at some point and update it to either remove whatever possible above as well as add back in some of the changes I made for this theme. So my Github might have one more repository before too long!

The takeaway from this work, at least for right now, is that I really enjoy working with Vite. It’s such a cool builder and feels so much easier than anything else I’ve used. I needed this kind of enjoyment with tech since my career has been such a rollercoaster of stress!

Oh, and I hope this automatically syndicates to Mastodon and Bluesky. So that’s another test of posting this.