If you visit some of the most popular websites on the net today and view the source of their HTML, you might be surprised with what you find. There are often hidden gems and messages in the form of ASCII art embedded in their HTML comments. Troy Hunt recently wrote about some of these messages being recruitment messages, while other messages might just be fun easter eggs left by the developers. If you view the source HTML of websites such as Mozilla, Facebook or Flickr, you might something a little like the image below.
A little crude, but my particular favourite is the source code for theoatmeal.com
Using this library seemed like a great way to build a little prototype using ASCII art and HTML comments. In this article, I am going run through a really simple example that shows you how to implement this plugin on your site. Let’s start off by heading to the Github repository and downloading a copy of the plugin.
Next, let’s take a look at a basic example.
That’s it! If you open your Developer tools and view the source, it might look a little something like the image below.
The Dom Animator is a really quick and fun way to leave a message for your more inquisitive website visitors. If you have any trouble getting your site up and running, I recommend taking a look at the demo on the Github repository. If you are looking for some ASCII art inspiration, check out this site to help you generate a message from text. Another useful website for inspiration is 1lineart.com, which has a great list of ASCII art in one line.