Secret messages and features in our virtual world
As I began to think more about user interface (UI) design, I learned that certain programmers use what is commonly referred to as “digital easter eggs” to enhance user experience (UX).
Digital easter eggs — also known as “computer easter eggs,” “virtual easter eggs,” and “media easter eggs” — are obscure features or messages buried in media products. They are not immediately obvious to users and can only be unlocked by an arcane set of commands or a convoluted sequence of key strokes. These little digital secretes typically do not serve a crucial role or add much functionality to the application. Rather, they seem to be a way for developers to inject some fun and personality into the product.
Origin Story
In 1979, Atari Inc. released Adventure, a video game cartridge for the Atari 2600 console. As the first action-adventure video game, it sold over one million copies. Beyond its commercial success, however, Adventure left a lasting footprint in the digital landscape, introducing the first widely known virtual easter egg. By following a set of steps, players could unlock a secret room that credits the game’s creation to its programmer, Warren Robinett.
In an interview with Warren Robinett, he recounted that back in the early days of video game development, Atari treated its programmers poorly, refusing due credit and royalties. To fight back, Robinett decided to plant his signature in a secret room, sneaking in credit without his bosses’ knowledge.
“It became clear to me pretty quickly that they weren’t treating us very nice and I didn’t like being anonymous. No royalties. No recognition. On top of that, they were rude to us. They told us, ‘Anybody could do this.’ That was a big mistake.” — Warren Robinett
For Robinette, his signature had to be well hidden, so the internal game testers at Atari would not find it before the final release. A year after Atari mass-produced the game, a 15-year-old player from Salt Lake City found the secret room after consistent experimentation and tinkering. By that point, Robinett had already left the company, and the rest is history.
Modern Day Uses
Although early digital easter eggs began as a way for a programmer to stick it to his bosses, they eventually began to appear in various places. Today, hidden messages, jokes, or features have become increasingly popular in video games, software, and websites. Digital easter eggs have become a way to add a human touch to tech products.
Amazon’s echo, for instance, has over 80 easter eggs that have been discovered so far. These include references to movies, tv shows, music, sports, and dad jokes.
Google also has numerous easter eggs sprinkled throughout their products. Typing in “recursion” in Google Search, for instance, triggers the suggestion “Did you mean: recursion?”
Typing in “do a barrel roll,” on the other hand, makes the page spin 360 degrees.
For April Fool’s Day 2014, Google Maps added a Pokémon game feature, where Pokémon randomly appeared as icons on the classic map screen, the same way a restaurant or a hotel does. To catch one of the creatures, users simply had to tap them.
Four years later, also for April Fool’s Day, Google Maps embedded a game of Ms. Pac-Man that allowed users to virtually roam city streets to snag dots and avoid ghosts.
Most recently, Google partnered with Nintendo to release a Mario update to its maps app for iOS and Android devices in honor of Mario Day (or MAR10 Day). Users with the most updated Google Maps app could enable the feature, which turns the navigation arrow into Mario.
Hatching Your Own Easter Egg
If after learning the origin and looking at some examples of digital easter eggs you are just itching to build your own, here are a couple resources for just that.
One option is to use Egg.js, a simple JS library with no prerequisites. It allows for adding web easter eggs by watching the users’ key strokes. To install, simply include the egg.js CDN on your HTML page:
<script type="text/javascript" src="https://cdn.rawgit.com/mikeflynn/egg.js/master/egg.min.js"></script>Then, instantiate a variable with a new class of Egg.
const egg = new Egg();Specify the combo (keystrokes that need to be pressed) to unlock your easter egg and save it to a variable.
const instructions = “f,l,a,t,i,r,o,n”Define the function that will run when your easter egg is triggered.
function triggered() {
console.log("triggered flatiron easter egg");
}Call the addCode() function on the egg instance, including the instructions and the callback function as parameters. Use the addHook() function to add a hook that will run after any egg code is triggered. Since hooks can tap into a module and get access to the entire Egg.js library, you can pull information about the easter egg that fired via this.activeEgg.
egg.addCode(instructions, triggered)
.addHook(function () {
console.log("Hook called for: " + this.activeEgg.keys);
console.log(this.activeEgg.metadata);
}).listen();// triggered flatiron easter egg
// Hook called for: 102,108,97,116,105,114,111,110
Another option is cheet.js, another JS library for adding easter eggs in your webpage. To install, include the CDN in your HTML file as a script tag.
<script type="text/javascript" src="https://cdn.rawgit.com/namuol/cheet.js/master/cheet.min.js"></script>Use the cheet() function to detail instructions and the resulting callback. This function even accepts special characters. However, since the sequence of keypresses are separated by a space, use the keyword “space” to indicate that your instructions expects the space key.
cheet('f l a t i r o n', () => {
console.log('flatiron easter egg unlocked');
});cheet('↑ ↑ ↓ ↓ ← → ← → b a', () => {
console.log('konami code triggered');
});
Alternatively, you could set a global listener for all the easter eggs.
const easterEggs = {
flatiron: 'f l a t i r o n',
konami: 'up up down down left right left right b a'
};cheet(easterEggs.flatiron);
cheet(easterEggs.konami);cheet.done(function (sequence) {
if (sequence === easterEggs.flatiron) {
console.log('flatiron easter egg unlocked');
} else if (sequence === easterEggs.konami){
console.log('konami code triggered!');
}
});
With these tools, you too can add hidden gems to your site.
