Starting 2022 with a fresh look

No, I’m not giving myself a makeover, sorry to disappoint! I’m loving my look of the past two years and am going to continue to build on it (I did just start learning how to curl my hair though!). The fresh look refers to my website! Every few years I undertake the somewhat daunting task of refreshing the design. This redesign was more major than most, but in some ways it was also overdue.

I’m a very different person from Kara in 2018—the last time I redesigned this site. When I came out as trans in 2020, I updated my name in the header and footer, and added some disclaimers here and there, but that was about it. In addition to that, I’ve launched a companion site that hosts my book reviews, started a second podcast—I’m just continuing to grow and flourish and try new things!

I had two goals with this redesign, one aesthetic and one technical.

The aesthetic goal was to bring this site in line with the design of Kara.Reviews. I want them to feel like sister sites. In 2020 I launched Kara.Reviews as its own, self-contained site mostly as a branding decision. I love way the URLs look, and if you only want to read my book reviews you can go there without all the noise of my personal life that you get on this blog. But I knew the design for Kara.Reviews would work well for a blog too, so I resolved to replicate it with a different colour palette. Whereas Kara.Reviews is warm—reds and golds and pinks against a warm “marble” neutral—my personal site is cool—purples and blues against a cool “slate” neutral. Colour theory has always been one of my weaker design skills, so I am especially proud of how this came together.

The technical goal was to switch to using Tailwind for my styling—I’ll talk more about that in the technical details section later in this post.

This is more than a redesign, however, which is why I’m so bold as to call it a refresh. You’ll notice that my homepage has some of the same content as before—my Twitter timeline, recent blog posts—but I’ve added sections to promote my most recent book reviews and podcast episodes as well! I want people who find my site through a social media profile link or a Google search to quickly see all the different types of content I produce, in case there is something in particular that speaks to them. Likewise, I wanted something front-and-centre on the homepage that gives people a sense of who I am, hence the fun “definition” of my name. You can use the speaker icon to hear me pronounce my name too, so now no one has any excuses! I also gave my About Me page an extensive rewrite, including some photos of my favourite knitting projects and a small gallery of past designs for this site. The podcasts link now goes to a dedicated page where I talk briefly about each of my two podcasts. Finally, I’ve added a search bar at the top to search my blog posts just like you might search my book reviews—the functionality has always existed; I just never exposed it until now because it’s not as if everyone is clamouring to search my blog! Still, it’s a nice feature to have.

I don’t have big plans for any additions to my personal site at this time. I’m happy with its existence as a hub and a blog. For Kara.Reviews, on the other hand, I’ve got some exciting plans—the long-promised lists feature will be live soon, as well some other tools to help you browse and discover my reviews in various ways.

There’s a lot to look forward to from me in 2022! I hope you like the new design.

Technical Details

This section is for those of you who enjoy talking web design and development; I’m going to get super technical now!

I have long lamented my “lack” of design skills. However, I think I’m gradually learning that it isn’t my design skills that are lacking so much as my ability to consistently reify my ideas with code. When I manage to pull it off, the result is often a lot of spaghetti CSS that is very difficult to maintain.

The past half decade has seen me search in vain for solutions in the forms of CSS frameworks and strategies. I had a brief dalliance with Bulma—mmm, too opinionated. Bootstrap looked scary, all those utility classes. For a while I thought Sass would help me create a bespoke framework of a kind—and for a time it did, but I kept finding myself reaching for things I couldn’t easily do myself. Then I thought the poorly-named InuitCSS might be what I wanted—it was as unopinionated a framework as you could get while still being a framework. Again, it was a lot of help in creating a consistent and maintainable design. But I kept looking at my codebase—GitHub thinks my repo for these two sites is predominantly SCSS—and thinking, there must be a better way.

Enter Tailwind and Utility-First CSS

Scary words, I know. When I first saw Tailwind, I balked. I have spent a long time in the world of BEM and OOCSS; I believed strongly in semantic class names! Tailwind was a challenge to that bedrock principle. But BEM and OOCSS weren’t working for me anymore. I built out the backend code for my lists feature with ease, but when it came time to create the frontend, I was confronted by the inflexibility of my style sheets. The idea of having to create a lot more class definitions just to have semantic class names, instead of reusing my existing components, was very daunting.

Tailwind’s lustre increased. It helped that Tailwind 3.0 was released just before my two-week holiday at the end of the year. Coincidentally, they even included a standalone CLI so I didn’t have to muck around with npm! Getting the Tailwind CLI up and running was easy. As a trial run, I recreated the design of the Prophecy Girls website in Tailwind, duplicating it exactly and then making some improvements. I did this in a day.

I was converted.

Look, I’m not going to evangelize utility-first CSS here. I think both philosophies have strengths and are appropriate for different types of projects. In my case, I am the sole maintainer of a single (albeit bifurcated) codebase. I was struggling with BEM/OOCSS precisely because, in trying to come up with semantic class names, my CSS became rigid and difficult to tweak. Every change became a big change. Tailwind’s utility-first approach does result in much uglier HTML—but no one is really looking at my HTML. They’re just looking at the beautiful results. And with a combination of abstraction via Jinja macros and multiple cursors/find-and-replace, so far it has been easy to maintain in the sense that I can quickly reuse and update styles in multiple places.

I recreated Kara.Reviews in a few days, and I even improved on some aspects of the design—Tailwind provides a very useful typography plugin, for example. I cannot imagine taking on the refresh of this site without having learned Tailwind first. It helped that I was copying and pasting a lot of markup from my Kara.Reviews templates, quite literally replacing “reviews” with “articles” most of the time. But it was easy enough to change out the names of colour utility classes and make the other tweaks I needed to distinguish the two sites. Building complex layouts like on the homepage was so easy with Tailwind.

It remains to be seen, of course, whether this is just infatuation or true love. Perhaps in a couple of years I will be writing a post about how I have run back into the arms of OOCSS, which was actually there for me all along. For now, though, I am very satisfied with what I have accomplished during my holiday. It was a wonderful distraction from world events I cannot control, during very cold winter days when being outdoors was not advisable, and the final product is something I—and hopefully the rest of you—will enjoy for the next few years to come.