I recently updated my app todometer to be styled with pure, native CSS!

Styling todometer over time

Changing the CSS libraries in todometer has been a real reflection of CSS styling history.

When I first built it more than 9 years ago now, that first initial commit had React, Electron, and Less for CSS. Less at the time was great for what I wanted (Node-based styling with nesting). It let me use variables (like this) and nesting (like this), and got the job done with some global styles.

Eventually in 2020, I wanted more encapsulated styles, thus I wanted to use CSS Modules. Also at the time, wanting to keep my variables and nesting where I could (but also modernize), I switched to node-sass. When you look at the commits here and here, you can see the variables switching from starting with @ to $, and how I moved everything everything to their respective *.module.scss component (ultimately only keeping variables at the global level). The behaviors all stayed the same, just was more modern under the hood!

Yet another big refactor was due in 2023, when I got rid of all Sass and used plain ol’ CSS files, and postcss for transformations. node-sass had been deprecated, which really led me to reevaluating the styling stack, and CSS variables existed natively, so that was one less thing needed! That led me to where we were until earlier today, postcss-nested.

postcss-nested vs. postcss-nesting

These libraries sound almost exactly the same, but act different, and Chris Coyier talks about it a bit here. To save you a click, postcss-nested has syntax like Sass, and postcss-nesting has syntax like the CSS spec!

Given the history above, it makes sense how the transition happened here. Moving from Less to Sass to a more vanilla CSS approach, all while keeping the core of variables + nesting, is all I really wanted. The nested library back in 2023 let me keep styling almost exactly the same when I transitioned away from Sass, with the exception of variables (see the commit).

I switched in this commit today to postcss-nesting mostly to make sure that everything transitioned smoothly. It involved a laughably small change list, to just add & nesting selectors across some files.

Pure CSS, baby

The transition to fully native CSS for the entire app is possible now because CSS nesting is natively available! I probably didn’t actually need to do the “switch to postcss-nesting” step, but it felt like a good iterative one.

And since I did that iterative step, the only changes I did for a “fully pure” CSS solution was to simply delete the postcss files!

Look at that diff. So much red!! So nice!!

It’s about the journey, not the destination… but also the destination is cool

It’s really amazing to see how far we’ve come in browsers to be able to do these things without any libraries at all. Yes, I don’t have the most complex styles in the world, and yes, I’m really “only” using variables and nesting, but it’s cool that a “quality of life, nice to have” thing that I enjoyed nearly a decade ago is now a standard. Look at us go!

Anyway, you can check out the repo for todometer here, with a new version being properly cut soon!

I talked about building my Micro Journal in the past here, and how much I like having a distraction-free writing device for blogging, drafting things, and just getting ideas out.

Well… I liked it so much that I got another one! This one is called the BYOK (the Bring Your Own Keyboard). I got it on Kickstarter and it’s cool! It’s more portable than the Micro Journal in that it’s the size of your phone (and has a magnet in the back for stands that are compatible with MagSafe stands), and you can connect most keyboards to it (via cable or Bluetooth). I may or may not be typing on it right now, heh.

Here’s how it works!

It’s been a cool little device. I like that it’s mostly toddler-proof so far, and I’ve had fun trying it out! I think I prefer the syncing I have set up on my Micro Journal more so far, but the portability of the BYOK is pretty nice, and I like how much the team has been updating the firmware.

Here’s some resources for it:

• The BYOK website
• BYOK controls cheat sheet
• The BYOK subreddit
• The WriterDeck subreddit

My sister got me a rainbow cardigan sweater a couple years ago for Christmas that is very fluffy and floppy. It doesn’t have pockets, it doesn’t have buttons, it just kind of drapes on me and is like a small blanket with arms. It’s not a practical sweater, but it’s cozy.

Because it’s not practical, I always have to remember to, for example, wear only pants that have pockets with it, so that I can put my stuff (phone, lip balm, etc) somewhere. I always have to wear certain shirts that don’t bunch up in a certain way when the sweater is feeling extra floppy. It’s just… not the most convenient sweater.

But hoo boy, my babies love my rainbow sweater. My oldest loves to sit on my lap and have me envelop her in it in a hug. My youngest loves to bury his face in it when he’s sleepy. Both of them love to pet it because it’s so soft. They admire the colors. They tangle their fingers in it and hold on tight to the loops. They flop with the sweater, and with me, and it’s the coziest thing in the world.

I love, love, love putting on this sweater. I get a little giddy thinking about how the babies will gravitate towards it as soon as they see the thick loops plopped across my shoulders. It’s impractical, and it’s weird, but it brings me the best warm cuddles ever.