Yes Small Mischief — Hiding Easter Eggs in your code because you can.

The concept of easter eggs is fairly well known to most of us with a toe dipped in the world of media and pop culture. Simply put, it is the practice of hiding some piece of special content in your creative work that can only be enjoyed by a savvy user who knows the secret of how to find it.

They are cheat codes for your video games, items from the “secret menu” at your favourite burger place, or the oft-underwhelming teaser scenes after the credits of the super hero franchise du jour. They can exist anywhere really, but the hard-coded backrooms of the web make a particularly fertile home for these delightfully frivolous pursuits.

As you might imagine, Google (being the whimsical primary coloured behemoth that it is) has about a million of them scattered amongst their many projects. My personal favourite however is the dinosaur that is displayed on the error page when your chrome browser loses its internet connection.

If you hit the spacebar when you see it, a side-scrolling 8-bit game begins involving your now very lively dinosaur jumping over endless cacti. It’s a perfectly timed morsel of fun to mitigate the frustration of a lost connection.

As you also might imagine, there are MANY swings and misses in the world of easter eggs. Attempted eggings are always in danger of veering from subtle fun to clumsy marketing stunts. Just look at The Bank Of Canada, they issued a press release explaining how to discover their secret egg celebrating the new ten dollar bill . 🤔

But how can we make our own? Well once you’ve got that perfect playful yet rewarding nugget of content you want to selectively share, its really just a matter of adding an event listener to your code that lies in wait for some unusual bit of interaction. If you’d prefer a trigger with a little more complexity and mystique than a simple click or single key press, you can check out egg.js, a handy javascript library you can pop into your projects created by @thatmikeflynn and @negative_sleep.

The complete use instructions can be found here, but essentially it allows you to pass in whatever series of keystrokes you want your trigger to be, and then perform some action on a desired element.

var egg = new Egg();
egg
.addCode("up,up,down,down,left,right,left,right,b,a", function() {
jQuery('#egggif').fadeIn(500, function() {
window.setTimeout(function() { jQuery('#egggif').hide(); }, 5000);
});
})

In the above example, they’ve used The Konami Code, the grandfather of all easter egg triggers, but you can replace that string of “up, up, down… etc” with any combination of keystrokes you like. The function “.addCode” then takes a callback function in which you lay out what you want your egg to do. Here they reference an element with the id of #egggif which fades-in on the trigger and is then hidden again after 5 seconds.

It’s also worth noting that if you plan on copying the above code, they’ve used jQuery selectors, so you’ll need to make sure that you’ve included your jQuery CDN snippet above the one referencing your egg.js.

Now go think of a COOL EGG to hide on your sites!

Like what you read? Give Craig Anderson a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.