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 – 2022 Courtney Cloudman

From Tumblr girl to engineer


I can absolutely relate to this. I started this blog in Tumblr about 15 years ago, getting praise for the fancy themes I put together. That blog served as a sandbox to hone my CSS skills in, trying trickier stuff as I became more comfortable. You can trace a line directly from those days to today, where I'm writing Vue components and building home-grown UI frameworks. The time I spent fooling around with that little Tumblr blog is still paying dividends to this day!

Now figuring out that I'm a Tumblr girl, that was its own adventure.

State of CSS 2022


I am very much looking forward to some of these new features rolling out in the next year or two! It will be fun to learn how to use them.

Imagine just starting with CSS today, though! 25 years of development has brought loads and loads of new features and quirks. It's come a long way from when I was in grade 6, saving something I made in FrontPage onto a floppy disk.

...hey, I was 10. I didn't know any better!

The First Day of the Rest of My Life

I have something to announce, and it's not that I've been hacked! The name is different, but I'm the same person as before... sort of. Let me tell you what's happened!

I don't know what it's like for most people when they reach adulthood, but I for one felt confused & empty well past that point. I didn't like who I saw in the mirror; life had little meaning. At first I thought I was missing things in life, and I was. Life became much better with friends, a good income, a loving partner & family. I love them all and I don't take any of it for granted. By that point, however, it was very clear that I wasn't missing things in life. I was living the wrong life.

Through a lot of soul-searching and - eventually - therapy, I realized the basic problem: I'm a girl! My life was empty because it wasn't the life I was supposed to have, and the person in the mirror wasn't me.

Transitioning is not an easy thing to do. It's a lot of work, I won't have all the privelege that I'm used to, and people don't always react kindly. Nonetheless, I have to do it. I was living a lie, pretending to be someone I'm not. If you know me, you know that I hate lying - well I'm done lying to myself, and I'm done lying to you.

Since this realization, the changes have been drastic. I love the woman I see in the mirror, and I'm excited to make the most of my 30's! I didn't even know what excitement meant before. I've got my life back, and I'm not just going through the motions anymore. I know I'll be a better parent, partner to my wife, daughter, co-worker, and friend to all. I wouldn't trade this life for anything.

So, yeah. I'm Courtney! I love the new me, and I hope you like me too.


Spruce CSS Framework


This appears to be a really nice little CSS framework, but what I love about it is how similar it is to the frameworks I've written code for recently. For instance, even the partial one I put together for this blog has color & spacing methods in Sass that translate to CSS variables - and Spruce has the same concepts, just with different names.

One reason I can be wary of adopting third-party CSS frameworks is that they just work differently than I'm used to - I have to change how I think, and not necessarily for the better. That doesn't seem to be the case with Spruce, and I love that.

Sabotage: Code added to popular NPM package wiped files in Russia and Belarus


Third-party dependencies can be very cool, but they're also a great way to introduce unexpected vulnerabilities to your code. For whatever reason, NPM packages seem particularly susceptible to these problems.

Russia's aggression is catastrophic and unjustified, and the apparent intent of the code was to add a little more pressure to Russia & Belarus to withdraw from Ukraine, by disrupting systems in those countries using the library. Unfortunately, this was a rotten way to do it, because the consequences are unpredictable and often unintended, and could affect good people doing good work. Especially if this unverified allegation is true.

A UX designer walks into a Tesla Bar


Tesla isn't the only company sacrificing usability for aesthetic or strategic purposes - looking at you, Apple - but it's particularly awful when it gets in the way of the driver. When Apple does it, it's only annoying someone holding a phone. When Tesla does it, it's distracting someone in control of 4,000 pounds of steel moving at 75 miles per hour.

Even something as simple as a blog has to consider compromises like this. For instance, take the permanent links for link posts such as this. Some blogs omit them entirely, or make them small icons to the left or right of the title, but this blog has a button with "Permalink" on it for each link post. It doesn't look very cool, but it's easily understood.

You would think that auto companies would have a more usability-conscious attitude than a silly tech blog run as a hobby, but alas.

SPAs were a mistake


I'm not sure I agree that SPA's are a mistake - specifically, I believe loading new pages isn't a nice experience regardless of how fast they are, and that sharing client-side data across multiple views is more of a pain if it's not all on the same page.

However, as with other newer technologies, we shouldn't treat it as an undisputed best practice to adopt SPA's. They have pros and cons, and it's worth thinking through how SPA's and MPA's would affect your product before committing to either approach. In particular, an MPA page's Javascript bundle could include only what that page requires, as opposed to the code for every page on the site, which could make a huge difference to performance.

Say Hello to selectmenu, a Fully Style-able select Element


While it's months out at the very least - more likely, years - I'm excited for this. Being able to manipulate the style & functionality of the native selectbox is long, long overdue. A big reason why we need third-party components in our design systems is because the browser's native UI elements haven't changed much since the 90's.

I don't expect this to fully replace the need for those components, particularly where the options need to be fetched from the server, but I could easily see those components being able to extend this element, rather than reinventing it as dropdown components tend to do today.

Headless components in React and why I stopped using a UI library for our design system


This article very much reflects my own thoughts on design systems, regardless of framework - React, Vue, whatever else.

I've worked on internal or B2B projects my whole career, and I'm usually working on something that can't be assembled entirely from third-party components - or at least not nicely. So when a design system is needed, I'm usually left underwhelmed by third-party options. I need something that makes it easier to build custom components, not something that does all the basics for me and then leaves me on my own to do the hard stuff.

The end result is a library where all the core stuff (colors, dark mode, spacing, fonts, etc.) and the simpler components (buttons, badges, pre-made grid layouts, etc.) are done from scratch, while the tricky stuff (dropdowns, charts, data grids) are the best well-supported open source libraries we can find. There's certainly more up-front work, but I've been thankful every time this approach was taken: with the system put together, building good custom components could not be easier.