In the current era that we are all living in, using short forms or hidden codes to communicate with one another has become quite the trend. That even includes the developers who use the coding language to shade special inside features, jokes, Easter eggs, and other such delicious and intriguing information that can skip from one’s mind if they aren’t aware or familiar with that kind of language.

To explain it in an easier manner, it’s like knowing a foreign language and speaking it fluently, but if you don’t know about it, well, it just ends up as a cryptic message for you.

The art of communicating in secret codes

So, for starters, you must know that the art and the science involving the communication wherein the source or the existence of any given communication is hidden is termed Steganography.

The main goal of the usage of Steganography is to hide messages inside other non-harmful messages in such a manner that even an intruder will not be able to detect that there are secret messages existing among the communication, hence resulting for a secure communication to take place.

So, today with an endless availability of web or internet-based communication, web pages have nowadays become the main research area for data hiding as well as secret communication.

One of the most popular scripting languages that are used for web development in today’s era is Hypertext Markup Language or otherwise known as HTML. The secret information is inserted on an HTML page, which then produces a stego-html page, and then it finally becomes part of a website, resulting in even the browsing user or customer not finding anything suspicious on the webpage that contains some of the secret message.

Now, let’s have a quick look at the different ways secret messages are inserted in HTML pages.

1. Using Magic Strings

If the website that you are working on has text inputs, then by using magic strings you can add unique functionality to them. It usually means that you will design a site so as to do something special if a particular set of words or characters is submitted in a text form as input.

This kind of setup can either be done on the backend or frontend of your website. Popular search engine Google is also famous for doing so by adding smart features in its search page when a particular term is searched for.

2. Using Hover States

Now, hover states are quite great places to hide things because they are only visible if you place them in the right place.

Though, it can trigger CSS animations or even JS logic that can result in anything from hidden features to subtle visual flares.

You can also transform the cursor into a hand which will act as a clue that will result in some hidden behavior by the website interface.

The Easter eggs that are hidden behind hover states can sometimes be more difficult to find on mobile devices because of the absence of a cursor, but honestly, who’s going to actually complain about extra content when it’s so diverse?

3. The Konami Code 

The Konami code is a video game cheat code that popularized its usage in many games by Japanese developers, and the code itself is a composition of a sequence of button presses that received an input using the NES controller, and the sequence is as follows:

  • Up ↑
  • Up ↑
  • Down ↓
  • Down ↓
  • Left ←
  • Right →
  • Left ←
  • Right →
  • B

By inserting the Konami code, players would get to unlock extra-lives or power-ups which would, in turn, help them in beating the game.

This code was immortalized in the video game pop culture for its frequent use and for making even more Konami codes for many more difficult games, making it more enjoyable for the gamers.

Quite similar to the Konami code, you can also set your website up for listening to keystrokes and can trigger a variety of hidden behaviors using the correct sequence, there are also plugins that you could look up that are specifically for the Konami code.

4. Using Console Messages

If you want to print messages to the browser console that can usually be found by pressing Cmd+ Option+ I in addition to leaving messages in the source code.

One of the most basic and easiest ways to do so is by leaving a console.log (“My message”) in the file and printing the “My message” to the console, and if you want to make things more interesting there are even some browsers that let you style your very own console messages using CSS rules.

5. Using Code comments

Many major web browsers allow their users to “View Source” which enables you to be able to view the website’s source code.

But, some websites take advantage of this and leave smart html comments for developers to discover and find.

You too can use such types of comments to leave ASCII art, recruiting information, developer credits, or any kind of message that you want to leave behind.

Fortune cookie tip: if you want to leave behind a memorable message use the image-to-ASCII-art convertor or an ASCII text tool.

Conclusion

The very idea of something hidden or creating something that can only be found if you know the right “magic words” is indeed very exciting.

Having Easter eggs in content is always fun because it pushes you further to look around or even gives you a sneak-peak into additional content that can only be unlocked with the specific codes.

And, making additional content for others gives you this euphoric feeling as a developer that makes things so much more interesting and unique for other people.

Using codes to add in things that you feel will give your content the change and the uniqueness is always a fun activity that you should definitely try out for your own self and you would for sure know and feel the difference a couple of texts, numbers, and the cryptic language can make, </c­ause why not?>