Hi, I'm Courtney! I'm a North American wife, mom and UX engineer.

I love video games where you farm stuff.*


All opinions are my own, and do not reflect the attitudes of the company I work for. They know better.

* No, not Farming Simulator, sorry.

© 2009 – 2023 Courtney Cloudman

Building a switch component

https://web.dev/building-a-switch-component/

This guide was very useful to me recently for a couple reasons. The first reason is pretty simple - I needed to build a switch component for work. Instead of trying to reinvent the wheel, I followed the guide (for the most part) and I think the results look pretty spiffy.

The more significant reason: I learned that there were a bunch of useful CSS properties that I haven't used before. It started out with familiar terms, but then I saw inline-size, block-size and outline-offset and my mind was blown a bit. I'd literally never heard of these, and I'm having to rethink how I build certain components moving forward. It also used the ::before selector, which I'm familiar with but haven't used a lot. Perhaps I should consider using it more extensively. The :indeterminate state was also new to me, and now that I'm aware, I feel like some authors are annoyed at how neglected it has been.

If you feel comfortable with CSS but don't consider yourself an expert, this article might just expand your horizons a bit.