Unless you’re reading via RSS, welcome to Unsung’s new livery!

I dreaded even attempting the redesign, but as I was adding full-text search to the blog, I realized the previous simple frame couldn’t accommodate it – no matter what I did, the search felt bolted on. I suppressed my PM side, decided to scope creep, and the 500th postiversary provided a good arbitrary deadline. (This is post №492, so hopefully I’m not jinxing it.)

One trick helped me. I decided to start the redesign coworking from a friend’s startup in a cool Chicago building, for the first time ever, hoping that the new surroundings will inspire me. It worked!

Functionality

The main impetus for the redesign was to recognize the blog’s growing body of work and make Unsung more evergreen, and something one could revisit in the future as a resource. Here’s what I did:

• There is now a “Random post” link – I’m hoping it becomes a delightful little way to poke around.
• There is also a search that can help you find an older post or navigate the site in a different way.
• The sitemap shows all the tags, now with light commentary.
• Posts that are in a series are now connected through navigation:

I also added a way to follow and comment on the blog posts on Mastodon and Bluesky, on top of existing RSS and weekly email digest.

Visuals and interactions

The first edition of Unsung was the default Montaigne styling (just so I could focus on writing and establishing a routine), and the second edition borrowed a lot from the design of my main site, Aresluna:

For this first proper design of Unsung, I wanted something more distinct, something that wouldn’t feel too “computer retro,” and something that steered clear of the preeminent AI aesthetic.

The fonts I chose:

• The body font is David J. Ross’s Warbler,
• The sans serif working hard (and occasionally having fun) is David J. Ross’s Bild,
• The logo font that you will see pop-up occasionally elsewhere is Neonoir by Phospho Type foundry, with some modifications.

The color – well, didn’t you see me yearning for something evergreen above?

Just kidding. I liked this factory green in a few places I spotted it recently, and I thought it felt appropriate, and beautiful in its own pedestrian way.

A lot of the design tenets of Unsung are still the same as before: no rounded corners, no shadows, no blurs, and a general distrust of symmetry. Plus, there are now a few more uneven surfaces.

I could write some bs about how the sharp edges vis-à-vis the flowing neon text (and the neon-inspired icons I designed) represent the tension between craft and manufacture…

…but, I don’t know. A lot of this design stuff is rattling around in different parts of the brain and doesn’t bubble up to the surface where words live. It just felt to me the contrast was fun.

Personal goals

Because yeah, in addition to all the explicit and implicit goals, I also wanted to have a bit of fun and learn new things, and add a bit of delight, which hopefully you will spot here and there.

I hope it makes both reading and navigating the blog more enjoyable.

Thank you to Naz Hamid and David J. Ross for their help with the redesign.

This is a meta post about this very blog. If that’s not interesting to you, skip to the next one!

A few people recently asked about my writing and publication process, so this post is for anyone who’s interested in that.

The process

My present goal is posting every day, and at least eleven posts a week. This is arbitrary and will change; I’m making sure I’m enjoying it, and paying attention to burnout.

I have at this point hundreds of unfinished posts, or snippets of posts, or just two-three-four-word ideas. I try to jot them down whenever they pop into my head. Here’s a lil sample:

How I choose to publish something on a given day is a bit of a mystery even to myself. I generally try to listen to what inspires me. I’m always excited when a blog post or a YouTube video arrives that makes me want to share it on the spot. The original idea for Unsung was to do only this kind of stuff, but that doesn’t happen as often.

Sometimes, it’s your emails or messages that prompt a post (thanks!). Sometimes, I try to be strategic about “if I want to post about Y, it’d be good to first have posted about X” – for example, I needed to write about menu secrets before writing about Move Item Here). But I try not to overthink it; once you start considering all the dependencies, it really becomes an escape room.

I sometimes mark items with [NEXT] or [SHOULD] or [READY] or [EASY] – this is not markup, these are just words to help orient myself – but it’s kind of a mess.

I made a dashboard to help me steer clear of blind alleys over time. Some patterns I’m trying to avoid: writing just from me instead of linking to other things, or relying too much on YouTube videos. Recently I noticed I wrote a lot about keyboards and old things, so I added a few charts to monitor these patterns, too.

I try to do both of these at once:

• Recognize that something I wrote or explored ended up not that interesting, and stop the presses. But I don’t delete these posts – maybe a better story or a more interesting take will save them in the future:

• Get something out there even if I don’t feel it’s perfect, just to keep the momentum.

This “pull stuff that’s boring/​push stuff out anyway” seesaw feels hard to navigate, but I think it’s important to practice and pretty universal to creative process.

Lastly, I occasionally look at the stats of the weekly digests to see how I’m doing, but mostly they serve as celebration – yet another week of stuff in the books.

Infrastructure

It’s really hard to say why I find things motivating, or how I know something is interesting, or even how I do my research – these feel personal or come from having thought about this kind of stuff for decades now. It’s really hard to give advice here. (“I’m an immigrant which often comes with a particular work ethic” or “my parents were not as supportive as they should be when I was growing up, so I try harder” are not particularly… actionable.)

But one advice I will give: I invested a lot in infrastructure of the blog, so I can focus on writing, and I don’t get exhausted by menial production tasks (except those I like).

For example, I have my own little markup language in Notes, so for example I can say [device frame:nothing phone] and the dragged image or video get automatically framed without me doing anything else, so I can focus on writing.

Here are some other tags in my markup – I’ll let you figure out what they do. (I have to use different brackets here so they don’t get interpreted!)

{side by side}
{border on dark}
{border on light}
{force retina}
{no height limit}
{thumbnail}
{secret}

I also wrote a little app that’s a wrapper around imagemagick and ffmpeg to allow me to quickly deal with image and video production as this is the least pleasant part of the job:

Having my own blog backend and frontend can be frustrating, but it also allows me to slowly improve things, which is important to me. I have a long to-do list of things that I want to do better, and I slowly chip away when inspiration strikes (or, when people report bugs). I want to try 120fps and P3 videos, more interactive elements, better information architecture, nicer visualization of keyboard and touch events. I have tons of bugs to fix.

I recognize this flipflopping from previous projects – when I work on presentations, I sometimes switch over just to “making slides pretty” and this keeps me excited and still helps me figure out what I want to say, but in a roundabout way – and learned how important it is for me. I love that I get to improve a surface for my writing alongside doing the writing. I think it’s really cool this is even possible.

Speaking of writing

I write in Apple Notes, mostly on my Mac (but occasionally on my iPhone on the go). This is an example of a published post in its natural habitat:

My general writing process is very messy – I start with specific ideas or links or even phrases and drop them in, and then I write around it. It always feels 20% done all the way until it’s 100% done; at this point I’m used to this curve.

Here’s an example of a post I’m not working on actively, but kept adding to over the last weeks:

As I flesh a post out, I use a lot of TKs for future phrases and also to denote assets (images and videos) needed, and occasionally put to-do items in there, too.

Each note can also have a “graveyeard” section where I can keep random thoughts and that section doesn’t make it to the blog. I like keeping it in as a sort of artifact of messiness of the creative process. Here is it in a recently published note:

At some point during writing, I throw it over from Notes to the blog to see how it actually feels. I usually do it too early, intentionally. The writing in Apple Notes looks rough and the assets are always sized strangely; seeing the note how it will actually look gives me momentum. It also engages a different part of my brain, as I can more seriously think of how the images or videos help to tell the story.

What else?

I occasionally revisit my goals and principles, but they’re mostly in my head.

Once I decide to finish writing something, I try not to have more than 2–3 items in that state.

I do not use AI in any way for writing; I am very protective of this thing I worked on for most of my life. If I use AI for research, it’s for simple Google-like questions, the answers to which I never fully trust.

Tools

I write in Apple Notes, which I fell out of love with for actual note-taking. I code in Nova, although I struggle with some of its bugs and design decisions. I record screen with either native recording or CleanShot. I edit photos and videos with my little tool and command line, but I still occasionally reach out for Photoshop, which I’m not happy about.

Anything else you’re curious about? Let me know!

An interesting take from a screen annotation app ScreenBrush – instead of a standard “don’t show again” checkbox modifying a button, it shows two buttons as a fork in a road:

I am not sure I have ever seen it laid out like this before, and I am not sure if it’s good, as it does force a user to make a choice where a choice might not be necessary. In case you are curious, Esc (or click away) is the equivalent to “Got it,” and Enter does nothing at all, which makes the interface somewhat incongruous – the “Don’t show again” button is positioned as a primary command, but takes more effort to invoke.

But what is interesting to me in particular was seeing it next to all of these “Maybe later” buttons that litter user interfaces these days. People seem to generally despise those, and it is refreshing to see a modern UI with a button string that doesn’t hesitate.

Many years ago, I put together a quick proposal of what I called “responsive text” for social proof:

I think you get the idea – instead of dumb truncation, the underlying code could prepare a few strings conveying the information with different levels of specificity, and then the UI could choose the longest one that could still fit.

This idea can apply in a few places. Here, in Figma, one of the menu items switches to a more “compact” string that uses four-letter abbreviations and skips “weight” altogether – but only because there isn’t room for a verbose treatment. You can also compare it with the original, naïve truncation:

Recently, I spotted Jake Archibald, developer working on Firefox, propose something in a similar vein – responsive code:

I think this is a lot more clever and a lot more important. Mobile phones are everywhere. Wrapping code like regular text without understanding it makes it basically impenetrable, but preserving long lines and introducing horizontal scrolling is also frustrating – just in a different way, forcing you to hold more stuff in your head:

I can see Archibald’s solution be very helpful here if used well – and not just on mobile – and perhaps could inspire other kinds of solutions for similar problems (have you ever tried to read any table on Wikipedia on your phone?).

A few nice moments that caught my attention in Marek Minor’s case study of designing icons for Cursor.

The diagonals for “cancel/​wrong” icons are always backslashes, and all the “positive” icons are always slashes:

There is a system that provides 1-to-1-and-only-1 mapping between a concept and an icon:

The point of the table is that each “What’s the icon for [X]?” has exactly one answer, and keeps having exactly one answer as the product grows. Without it, a set slowly develops two icons for the same idea, and at that point it stops being a system.

And, on the page itself, a few nice blink-comparator-like vehicles with subtle text animations: