#easter eggs

Easter eggs in software design / 8 posts

Newsletter
  • Get a newsletter digest every Friday:
Contact

Send me feedback, tips, bug reports, and anything else:

About me and the blog

My name is Marcin Wichary. I’ve worked as a UX designer, typographer, front-end person, and manager at Google, Medium, and Figma. I’ve also written a book about keyboards and typing, gave talks, and published essays about design, typography, and technology.

Unsung is my blog about software craft and quality.

More info about Unsung

Send me feedback, tips, bug reports, and anything else:

More info about Unsung

History doesn’t repeat itself, but it often tiles

Following (or, preceding) the previous post…

1.

Old computers loved 8×8 fonts and they also loved 8×8 graphics.

Since for many of those computers the graphics were displayed side by side without any gaps, the fonts had to waste a precious pixel or two to create some breathing room between the characters. But there was a benefit to this arrangement – you could seamlessly combine two or more tiles into something bigger.

You could see that already in built-in graphics for a late 1970s computer Ohio Scientific Challenger 1P: a lot of single-character graphics of houses, tanks, planes, and people – but also some that only made sense fused together, forming submarines, warships, or the U.S.S. Enterprise:

A later computer called Atari ST had an Atari logo spread across two characters, and an easter egg – a 16×16 face of “Bob”.

And Apple II’s character set allowed to combine a few glyphs into a running man, a folder, or a scrollbar:

Arcade videogames did the same. Pac-Man’s maze was assembled out of solitary 8×8 characters, but Pac-Man and his frenemies were large, clocking in at 16×16:

You can even spot a fascinating technique above. The ghost could cleanly fit in a 2×2 grid, but instead it’s offset vertically and takes up a 2×3 slot. Why? Just so the eyes and the “skirt” could move independently without a combinatorial explosion of tiles needed:

2.

Not long ago, we looked at various installation graphics for Mac OS X apps. Those creatively used a new feature of Finder: a way to specify a background image.

The Finder before Mac OS X, from 1984 to the late 1990s, didn’t have that feature, and yet you could occasionally see something like this:

How was it done? By splitting the graphics into many 32×32 icons, and then positioning them carefully inside the window.

The icons weren’t proxies of apps or even images. They were just there. The last ingredient was names composed of only whitespace, and it all started looking like one unbroken huge image… except when you invoked the Clean Up function, which proceeded to ruin the whole thing in a particularly delightful fashion:

3.

Ever since its launch in 2014, Slack allowed anyone at any workplace to create custom, shared emoji, and starting a year later, people could also use them in their reactions.

Those proved to be very popular, and many books could be written about how custom emoji reflect a given organization’s culture.

Many emoji could also be output side by side, and Slack chose not to put any space between them:

I think by now you know where this is going.

People started splicing bigger images into smaller emoji, first by hand…

…then with limited automation, and then via fully automated tools with names like slack-big-emoji or slack-emoji-enlarger:

As in every other version of this technique, assembling the tiles the proper way is part of the challenge. The one above looks like this:

:tjp3-000::tjp3-001::tjp3-002::tjp3-003::tjp3-004::tjp3-005::tjp3-006::tjp3-007::tjp3-008::tjp3-009::tjp3-010::tjp3-011::tjp3-012::tjp3-013::tjp3-014::tjp3-015::tjp3-016::tjp3-017::tjp3-018::tjp3-019:
:tjp3-020::tjp3-021::tjp3-022::tjp3-023::tjp3-024::tjp3-025::tjp3-026::tjp3-027::tjp3-028::tjp3-029::tjp3-030::tjp3-031::tjp3-032::tjp3-033::tjp3-034::tjp3-035::tjp3-036::tjp3-037::tjp3-038::tjp3-039:
:tjp3-040::tjp3-041::tjp3-042::tjp3-043::tjp3-044::tjp3-045::tjp3-046::tjp3-047::tjp3-048::tjp3-049::tjp3-050::tjp3-051::tjp3-052::tjp3-053::tjp3-054::tjp3-055::tjp3-056::tjp3-057::tjp3-058::tjp3-059:
:tjp3-060::tjp3-061::tjp3-062::tjp3-063::tjp3-064::tjp3-065::tjp3-066::tjp3-067::tjp3-068::tjp3-069::tjp3-070::tjp3-071::tjp3-072::tjp3-073::tjp3-074::tjp3-075::tjp3-076::tjp3-077::tjp3-078::tjp3-079:
:tjp3-080::tjp3-081::tjp3-082::tjp3-083::tjp3-084::tjp3-085::tjp3-086::tjp3-087::tjp3-088::tjp3-089::tjp3-090::tjp3-091::tjp3-092::tjp3-093::tjp3-094::tjp3-095::tjp3-096::tjp3-097::tjp3-098::tjp3-099:
:tjp3-100::tjp3-101::tjp3-102::tjp3-103::tjp3-104::tjp3-105::tjp3-106::tjp3-107::tjp3-108::tjp3-109::tjp3-110::tjp3-111::tjp3-112::tjp3-113::tjp3-114::tjp3-115::tjp3-116::tjp3-117::tjp3-118::tjp3-119:
:tjp3-120::tjp3-121::tjp3-122::tjp3-123::tjp3-124::tjp3-125::tjp3-126::tjp3-127::tjp3-128::tjp3-129::tjp3-130::tjp3-131::tjp3-132::tjp3-133::tjp3-134::tjp3-135::tjp3-136::tjp3-137::tjp3-138::tjp3-139:
:tjp3-140::tjp3-141::tjp3-142::tjp3-143::tjp3-144::tjp3-145::tjp3-146::tjp3-147::tjp3-148::tjp3-149::tjp3-150::tjp3-151::tjp3-152::tjp3-153::tjp3-154::tjp3-155::tjp3-156::tjp3-157::tjp3-158::tjp3-159:
:tjp3-160::tjp3-161::tjp3-162::tjp3-163::tjp3-164::tjp3-165::tjp3-166::tjp3-167::tjp3-168::tjp3-169::tjp3-170::tjp3-171::tjp3-172::tjp3-173::tjp3-174::tjp3-175::tjp3-176::tjp3-177::tjp3-178::tjp3-179:
:tjp3-180::tjp3-181::tjp3-182::tjp3-183::tjp3-184::tjp3-185::tjp3-186::tjp3-187::tjp3-188::tjp3-189::tjp3-190::tjp3-191::tjp3-192::tjp3-193::tjp3-194::tjp3-195::tjp3-196::tjp3-197::tjp3-198::tjp3-199:

What’s the point, you might ask, if Slack also allows to share images?

I am not certain there is one. Sure, you can write around a tiled image in a way you cannot around a regular image, and you don’t get any chrome. But the real rationale here is, simply, the love of the game.

But this is why I love the details of history. You never know when an old detail chooses to come back to life again. Sometimes it will be a fun hack to try, but once in a while, it might be the only solution to a gnarly problem.

Thank you to Andrew Yaros for teaching me about tiling in classic Mac OS.

Asana’s fascinating Tab shortcuts

If you’re a professional web app, your key shortcut situation is not to be envied. Once the operating system grabs the ⌘ shortcuts it requires (⌘M to minimize, ⌘H to hide, ⌘Q to quit, etc.), the browser has its turn, claiming everything from ⌘R, T, N, L, W for tab operation, to ⌘F, P, O, and S for other things. And then, some input controls inside the browser also need to listen to ⌘Z and XCV, and maybe even A (select all), B (bold), and I (italic).

At this point things feel barren, and some web apps start reaching instead for less common modifier keys (⇧, ⌥, ⌘⇧), and others go straight to no modifier zone, or override those of the above shortcuts that they can. Each approach, of course, has its own set of challenges.

It’s perhaps not a surprise that someone got fed up, and that someone was people working on the project management tool Asana, which did something relatively unique: it promoted Tab to be a modifier key.

The video shows me using Tab+K to like tasks, Tab+Return to open a sidebar, Tab+Q to add a quick task, and Tab+H to return home. Here’s the entire official shortcut list, with Tab shortcuts emphasized:

What’s fascinating about choosing Tab is that the key already has so much to do:

  • it moves focus to the next UI control,
  • it indents a bullet point or even just text,
  • it accepts an autosuggestion or a placeholder (and similar things).

On top of that, repurposing a key to be a modifier key – especially one that already has a job or two – will also have a long tail of strange consequences. And, Tab is only on one side, which could wreak havoc with the ergonomics of keyboard use. (You are, technically, always supposed to use the modifier key with the opposite hand to the hand you’re pressing the main key with.)

But…

I am not ready to hate it quite yet.

Tab is not the worst key to use in this context, as it’s really the only available big key other than Caps Lock, which is impossible to mess with on the web. The other big keys – the spacebar, Return, and Backspace – would be radioactive for this purpose.

The asymmetry issue? Anecdotally, I understand that both right-handed and left-handed people most often use the pointing device (mouse or trackpad) with their right hand, and consequently often prioritize left modifier keys anyway.

Here is how Asana deals with some other challenges:

  • When you press Tab to move focus around, the action can now only take place on key up, not key down, so tabbing (or, indentation of bullet points) feels slower.
  • When you hold a regular modifier key and then change your mind and simply release it, no action occurs. But Tab already has a job as a regular key (tabbing or indentation, depending on context), so if you change your mind, something will still happen. This might be annoying. (You can press Tab+Esc or Tab+Space for a safe cancel, but that doesn’t seem very intuitive, especially in a moment of panic.)
  • An action only on key up also means there can be no repeat when holding Tab. I am not sure how important this is, especially in the context of accessibility.

What’s interesting and I bet the main reason Asana approached it this way, is that Tab is a separate little island, far away from other modifier keys – and thus not just without any preexisting conflicts, but also impossible to confuse with other modifier keys. Asana could have kept all the shortcuts above but substituted Tab with Ctrl on a Mac and Alt on a PC, but those would then be packed among many other similar-feeling keys.

(There is a price for this isolation, as Tab backfires the moment you have to combine it with other modifier keys. Asana doesn’t do it very often – I have only seen Tab+Shift+D, G, and F – but I wish they didn’t do it at all.)

Overall, I’m surprised how positively I feel about it. If you use Asana a lot, I’d be curious how Tab-based shortcuts feel to you. If you work at Asana, I would love to know if you consider these a success.

The only thing that seems to be missing is an option to go back to regular shortcuts if needed, for people who might want it for motor control reasons. (It is possible to achieve that with tools like Karabiner Elements, but that tool is really unpleasant to use.)

Oh, also. Tab+B does this, because, well, “tabby.” Cute.

“Imagine being a pixel on an old Pac-Man game.”

1.

In last year’s essay at Tedium, Ernie Smith investigated the rise and fall of screensavers, those pieces of software that peaked in the 1990s, originally meant to prolong the life of your display by kicking in after a period of inactivity, but eventually becoming “self-contained art projects.”

As it always happens, what we thought was the first screensaver – Peter Socha’s SCRNSAVE – was far from the original idea:

The accepted answer is often the easy answer, and when doing a little research, you can bust past that to the point of truth. [… But] while Socha deserves credit for popularizing the technique with a broad audience, the idea wasn’t totally new. See, during the 1970s and early 1980s, numerous hardware and software developers attempted to build things in the same wheelhouse as Socha’s early screen saver. The difference was, they weren’t for the IBM PC or even for a computer at all. Rather, they were for dumb terminals or video game systems.

The prior art includes “attract mode” in arcade games, and is accompanied by the absolutely terrifying, jump-scare-adjacent photo of CRT burn-in you wouldn’t want to miss.

2.

This is an enthralling 1-hour-long video by Savvy Sage that talks about the immense popularity of After Dark, a collection of screensavers for Macs and PCs, of the “flying toasters” fame:

This video absolutely blew my mind. I had no idea the screensavers were so popular that they had their own (official) merch and (unofficial) guidebooks, and that the company that made them employed over 100 people – half of them artists – and had tens of millions of dollars in revenue.

There’s tons of inevitable scope creep – screensaver remixers! screensavers with sound! interactive screensavers! licensed screensavers? – but also attempts to branch out to new ideas.

The video is great in documenting everything so you actually see all that’s talked about, in copious detail. And since this is a blog about craft, obligatory caveat: most of these screensavers are absolutely garish, although one also has to account for state of the art of computer graphics at that time.

3.

After Dark had a fish aquarium and so did competing products from Microsoft and Fifth Generation Systems – but in a moment likely recognizable to many people reading this blog, one person got fed up with how bad they all looked and created his own screensaver that became as well known as the flying toasters.

This 16-minute video by LGR talks about the story of The Marine Aquarium Screensaver:

This, too, had a lot more going on than I expected, including the eventual appearance of a hall-of-fame checkbox “Starfish allowed on glass.”

4.

Another popular screensaver was Windows’s 3D Pipes, whose (much shorter) origin story is documented by Raymond Chen on his excellent and long-running The Old New Thing blog.

But it’s the first comment there that steals the show:

These were mesmerizing, but quite often IT folks would enable these on Windows Servers, and they would essentially “bring down the system.” See, they were CPU intensive and would take a tax on the system essentially stealing CPU time away from the business application running. […]

I can recall the first time getting a call on this – and back then things were remote, etc. sometimes using PCAnywhere – and then I saw 3D Pipes running. Just told them to turn it off – and done. From that point forward the first question asked of our customers was “are you running any screen savers?”

3D Pipes also had some interesting lore behind it:

A customer complained that they were losing productivity because employees were spending too much time running the 3D Pipes screen saver and waiting for teapots to appear. They requested an option to increase the likelihood of a teapot, so the employees would be placated more quickly and get back to their work.

If this doesn’t remind you of that scene from The Office with another famous screensaver…

5.

In Smith’s essay, he posts Socha’s recounting of the exact logic of his early screensaver:

How does Scrnsave do all this? The clock inside your PC ticks 18.2 times per second. Scrnsave contains a three-minute counter that starts at 3276—the number of clock ticks for three minutes. On each tick of the clock, Scrnsave subtracts one from this count, and it turns off the screen when it reaches zero. […]

Each time you push or release a key, the keyboard sends an interrupt signal to the PC. Scrnsave intercepts this interrupt; each time you push or release a key, Scrnsave resets its counter to 3276 (three minutes) before passing control to the ROM BIOS routines that read keystrokes. Scrnsave also resets its counter to 3276 every time a program sends characters to the screen. By intercepting these last two interrupts, Scrnsave can tell when you need to have the screen active, so it won’t shut out the lights unless you sit back or walk away for three minutes or more.

It’s a very simple algorithm, but I was amazed by it, because that’s exactly the same algorithm you would use – in reverse – for any sort of debouncing that’s crucial in good front-end engineering; there is something kind of beautiful about these universal algorithms floating around, kind of like math quietly ruling the world around us.

But on that note, one last video. Do you remember that well-known palette-cycling waterfall I posted some time ago?

This wasn’t as much a “prevent CRT burn in” screensaver as it was “a piece of standalone, repeating, interactive art” screensaver. It graced many an Atari ST display.

Well, in April, a YouTuber Techmoan unpacked sort of a “prior art” to that, too – a picture frame that simulates a waterfall (the relevant video segment starts at 6:04):

The art is (again) garish, and there is no screen to save here, but also curiously – there are no electronics at all, either. How was it made? I’ll let you click through to find out.

It was fun for me to revisit this strange moment in time and learn more. It’s not just that there were tons of shared ideas, repeated algorithms, independent reinventions, and one-upping each other. What stood out to me was also how many people engaged here did other things I used and admired – SCRNSAVE’s Peter Socha created the absolute 🐐 Norton Commander, Jim Sachs of the marine aquarium screensaver fame did graphics for the legendary Defender of the Crown game, a few people at After Dark also made the original zoom peek gesture before that, and the incredible The Incredible Machine after.

It seems like a fascinating time that attracted people equally interested in tech as they were in its creative uses.

The tortoise and the hare live on

The keyboard and mouse settings in macOS are kind of boring these days…

…but somewhere deep in the underbelly of Settings lives a little nod to the original 1984 Macintosh…

…in form of the tortoise/​hare icons:

Raycast’s confetti cannon

Among many genuinely useful deeplinks you can use to control Raycast from afar in a simple way, I just spotted an interesting one:

raycast://confetti

This is what it does:

Despite it being a confetti cannon and nothing more, I think it goes deeper than stuff like e.g. Asana’s “celebration creatures”, and it deserves recognition for three actually kinda serious reasons:

  • You can use it to quickly test whether you’re wiring deeplinks correctly. It’s clever the Raycast team put it at the beginning of the doc page; I think every API or a complex connection method should have a simple and delightful “success scenario” for two reasons: to celebrate you establishing that connection, and to have something so simple it cannot itself be misbehaving (this way you know that if you can’t get confetti to work, you for sure messed up something elsewhere).
  • Once you know how to invoke it from far away, it’s also great for testing other things. Sounds can be muted. In JavaScript, console.log() can be too buried if you don’t have a console open or visible, and alert("Test") is kind of depressingly old-school and steals focus. This HUD-like thing feels like a modern way of approaching this: You know you’ll notice it when it fires away, and it will leave no lasting damage. (Okay, fair, it does steal focus too, so that’d be one thing to improve.)
  • It has great production value. I hate perhaps all of Google’s search easter eggs because they’re built so extremely cheaply – try searching for “do a barrel roll” or “askew” (and no, I’m not going to dignify them with links because links are my love language). It’s rare and worth celebrating when something that could very well be an internal joke or a test feature for nerds is actually something you want to use because it’s so well-made. (See also: Linear’s internal testing UI.)

“Rather than trying to fix this mistake, the developers leaned into it hard in the sequel.”

A fun 16-minute video from outsidexbox with 7 examples of videogame bugs where the game creators not only owned up to their mistakes, but creatively acknowledged or remixed those bugs in subsequent versions:

I didn’t know about most of these, so I did some googling and created a list for reference:

Off the top of my head, I cannot think of any non-videogame software that received a similar “bugs as lore” treatment from people responsible for the bug in the first place.

Microsoft made a blue-screen-of-death screensaver, but it was originally third-party, and kind of a prank? A mean-spirited one? I didn’t find this particularly good.

The likely second-most-famous error message, the fail whale, transcended Twitter and was even referenced in other products…

…but as far as I understand Twitter the company was itself embarrassed by it, and eventually switched the whale to a caterpillar.

(Those two examples aren’t really even bugs in the same category as those in the video, anyway.)

Anachronisms

“Users were gleefully told to reload the game.”

This 9-minute video from the fun game show Lateral (with Tom Scott!) covers a particularly interesting bug in the 1984 game Karateka:

If you don’t want to watch the video and try to figure it out alongside contestants, you can read more about it here, and also see it in action.

Karateka was made by Jordan Mechner and I bet his name will come up again.