Reflections on 98.css

On April 16, 2020 I wrote the first commit for what would become 98.css. I’m really proud with how it turned out for reasons technical and non-technical, and wanted to gather my thoughts below.

I explored the idea of Windows 98 style button borders with a small codepen about two years prior. The inspiration being your typical nostalgia trip – my little jordan brain was forming while sitting in front of my family computer (probably playing Pajama Sam or Backyard Soccer) and the “chiseled marble” staircase buttons were always nearby.

I clicked on a lot of these buttons and I read a lot of their labels. The fonts, the gray surfaces, and the shadows were as important to me as my color-coded binders (Math is Blue and Science is Green by the way).

They are an integral part of my early computing story, and because I have spent a significant chunk of my waking life on the computer, they are part of my story.

If you’d like to hear me rant about nostalgia more you can read some pull quotes from this post on The Register, my interview with Henry Zhu on Hope in Source, or by buying me a margarita somewhere in lower Manhattan.

I sat on the idea for a few years while writing computer programs at Stripe, ranging from customer support chatboxes to our unreasonably-handsome-because-why-not intranet called Home. It was a really good gig.

About two and a half years in however, the world got weird. Small pockets of public life became temporarily inaccessible, I couldn’t get my hair cut, restaurants got really good at take-out, and a bunch of hogs thought masks were engineered to keep them from being patriots or something I don’t know I couldn’t really follow.

I was fresh off a re-org and started to burn out with the rest of the world. My sleep got worse, I lost the ability to focus, and for the first time in my career I started to become pretty bad at my job. I had color-coded binders (Language Arts is Yellow by the way) so this was new to me and I didn’t really know how to deal with it.

My doctor informed me we could turn up the Lexapro dose a little, but I ultimately decided it would be better if I just took a break, so I did.

I spent the first few weeks learning how to sleep and going for long walks (I got really good at both). I wasn’t particularly excited by the idea of writing computer programs, and was troubled by the idea that I might never be excited about it again.

One of my favorite ways to turn off my brain was SimGolf, a turn-of-the-century world-builder/simulator centered around owning a golf course.

I played it on – you can see where this is headed – my Windows 98 virtual machine. In between rounds I was once again confronted with the Windows 98 UI. The menus, window edges – they began calling out to me like a siren’s song.

I grabbed a copy of Visual Studio and made some VB6 UIs. I may have made a calculator app or something, but spent most of my time in the widget explorer dragging things onto the canvas.

I revisited my old codepen to adjust the buttons. Then started playing around with adding a dialog menubar. That quickly turned into pixel-matching the spacing of the buttons and the recreating the icons in Figma. I had my VM on my left monitor, a text editor on my right, and successfully tricked myself into writing computer programs again.

Building out 98.css is actually the least interesting part of this story. I had an idea, wanted people to see it and use it, and coding was just the medium for making that happen. This blog post won’t dive into the details of publishing CSS, setting up CI, or the architecture that holds this house of cards together – simply put it doesn’t matter.

What did matter was I did it because I liked doing it, and I hit git push at the end.

The part that is interesting however is how I – for the first time in about a year – enjoyed programming again. I regained my focus, sitting for hours at a time inspecting colors and spacing from a year old copy of Visual Studio on my left, and turning into CSS with Visual Studio Code on my right. Using the entire 20+ year span of world-changing technology to put accurate pixels on a web browser.

I regained my confidence – I was really good at this.

I have a new job at Notion where I hack on text editors. It’s a really good gig.

Since launch I’ve seen a number of high-quality 98.css deployments from games (1) (2), to portfolios, sites for funny people, sites for movies that play in real theaters, and all sorts of projects that benefit from a fun UI library.

I also recently used it for another pixel-perfect-passion-project, an AOL Instant Messenger “Away Message” simulator ( Away Messages) which you can check out at https://away.jordanscales.com/.

98.css has also since been forked to offer the look and feel of Windows XP and Windows 7, both incredibly high-quality works that I encourage you to try out. (Someone should do one for the Mac OS X Aqua UI, but that requires extensive use of sprites).

I no longer work on 98.css and I haven’t in a really long time. My only contribution to the project is monitoring the repo for high-quality pull requests. If I get one, I briefly scan through the author’s profile to make sure they’re not going to mine cryptocurrency on my user’s machines, and then I give them full commit access. “Looks good, go ahead and merge this yourself.”

This is a tip I picked up from my old colleague John Resig and it never ceases to amaze me. Some merge and move on with their lives. Some become contributors for months or even years, shipping improvements, merging other PRs, and tending to the issues tab. It makes sense if you think about it: I have an eager volunteer in front of me, someone who cares enough to write code and offer to contribute it back – why not take full advantage of that? People do incredibly things when you give them agency.

Every few weeks I search twitter for “98.css” and smile. Open source pays dividends and mine are in the form of “I’m really, really glad I built this.”