DEV Community

loading...
Cover image for Easter Egg πŸ‡πŸ₯š Hunt Anyone? - Add ASCII Art to the console log

Easter Egg πŸ‡πŸ₯š Hunt Anyone? - Add ASCII Art to the console log

deadlybyte profile image Carl Saunders ・3 min read

As Easter is upon us and we're all trying to bring some happiness in these hard times. Why not add an Easter Egg πŸ‡πŸ₯š to your website or client websites?

TLDR; - It's quick and easy, just generate the ASCII art and use console.log.

DEV Easter Egg

Did you know that dev.to has this Easter Egg?

If you've ever opened the development tools of your favourite browser (F12) when visiting the dev.to website you probably all ready seen the ASCII art displayed in the console logs.

-oooooooo/-      .+ooooooooo:  +ooo+        oooo/
+MMMMMMMMMMm+   -NMMMMMMMMMMs  +MMMM:      /MMMM/
+MMMNyyydMMMMy  /MMMMyyyyyyy/   mMMMd      mMMMd
+MMMm    :MMMM. /MMMN           /MMMM/    /MMMM:
+MMMm    .MMMM- /MMMN            dMMMm    mMMMh
+MMMm    .MMMM- /MMMMyyyy+       :MMMM/  +MMMM-
+MMMm    .MMMM- /MMMMMMMMy        hMMMm  NMMMy
+MMMm    .MMMM- /MMMMoooo:        -MMMM+oMMMM-
+MMMm    .MMMM- /MMMN              yMMMmNMMMy
+MMMm    +MMMM. /MMMN              .MMMMMMMM.
+MMMMdddNMMMMo  /MMMMddddddd+       sMMMMMMs
+MMMMMMMMMNh:   .mMMMMMMMMMMs        yMMMMs
.///////:-        -/////////-         .::.

Output on the console log with dev tools opened when visiting dev.to.

And thought that looks awesome.

How Do I Add That To My Site?

First we need a way to convert text to ASCII art, I've used the following npm package figlet-cli, which can be executed on the command line.

Note: Other packages or applications are available.

https://www.npmjs.com/package/figlet-cli

npx figlet-cli "Raven Code"
Note: Used npx to install as we don't need as a global package.

This will generate the following output using the default font.

  ____                          ____          _      
 |  _ \ __ ___   _____ _ __    / ___|___   __| | ___
 | |_) / _` \ \ / / _ \ '_ \  | |   / _ \ / _` |/ _ \
 |  _ < (_| |\ V /  __/ | | | | |__| (_) | (_| |  __/
 |_| \_\__,_| \_/ \___|_| |_|  \____\___/ \__,_|\___|

Now to output this to the console we have to escape the special characters using a \ (backslash) and terminating each line with \n\ (a new line \n and the backlash to indicate the string spans multiple lines).

console.log(
      "     ____                          ____          _\n\
    |  _ \\ __ ___   _____ _ __    / ___|___   __| | ___\n\
    | |_) / _` \\ \\ / / _ \\ '_ \\  | |   / _ \\ / _` |/ _ \\\n\
    |  _ < (_| |\\ V /  __/ | | | | |__| (_) | (_| |  __/\n\
    |_| \\_\\__,_| \\_/ \\___|_| |_|  \\____\\___/ \\__,_|\\___|"
    )
Note: Could use `Template Literals` in ES6 as this supports multiline strings and you wouldn't need the \n\ syntax.

Change The Font

The figlet-cli package supports other command line parameters, one of those being the -f flag. Specifying this option determines the font used to generate the ASCII art.

To see the list of fonts supported use the following command:

npx figlet-cli -l

To use a font called ANSI Shadow, use the following command:

npx figlet-cli -f "ANSI Shadow" "Raven Code"

This will generate the following output using the ANSI Shadow font.

β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•—  β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•— β–ˆβ–ˆβ•—   β–ˆβ–ˆβ•—β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•—β–ˆβ–ˆβ–ˆβ•—   β–ˆβ–ˆβ•—     β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•— β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•— β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•— β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•—
β–ˆβ–ˆβ•”β•β•β–ˆβ–ˆβ•—β–ˆβ–ˆβ•”β•β•β–ˆβ–ˆβ•—β–ˆβ–ˆβ•‘   β–ˆβ–ˆβ•‘β–ˆβ–ˆβ•”β•β•β•β•β•β–ˆβ–ˆβ–ˆβ–ˆβ•—  β–ˆβ–ˆβ•‘    β–ˆβ–ˆβ•”β•β•β•β•β•β–ˆβ–ˆβ•”β•β•β•β–ˆβ–ˆβ•—β–ˆβ–ˆβ•”β•β•β–ˆβ–ˆβ•—β–ˆβ–ˆβ•”β•β•β•β•β•
β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•”β•β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•‘β–ˆβ–ˆβ•‘   β–ˆβ–ˆβ•‘β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•—  β–ˆβ–ˆβ•”β–ˆβ–ˆβ•— β–ˆβ–ˆβ•‘    β–ˆβ–ˆβ•‘     β–ˆβ–ˆβ•‘   β–ˆβ–ˆβ•‘β–ˆβ–ˆβ•‘  β–ˆβ–ˆβ•‘β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•—
β–ˆβ–ˆβ•”β•β•β–ˆβ–ˆβ•—β–ˆβ–ˆβ•”β•β•β–ˆβ–ˆβ•‘β•šβ–ˆβ–ˆβ•— β–ˆβ–ˆβ•”β•β–ˆβ–ˆβ•”β•β•β•  β–ˆβ–ˆβ•‘β•šβ–ˆβ–ˆβ•—β–ˆβ–ˆβ•‘    β–ˆβ–ˆβ•‘     β–ˆβ–ˆβ•‘   β–ˆβ–ˆβ•‘β–ˆβ–ˆβ•‘  β–ˆβ–ˆβ•‘β–ˆβ–ˆβ•”β•β•β•
β–ˆβ–ˆβ•‘  β–ˆβ–ˆβ•‘β–ˆβ–ˆβ•‘  β–ˆβ–ˆβ•‘ β•šβ–ˆβ–ˆβ–ˆβ–ˆβ•”β• β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•—β–ˆβ–ˆβ•‘ β•šβ–ˆβ–ˆβ–ˆβ–ˆβ•‘    β•šβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•—β•šβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•”β•β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•”β•β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•—

So what are you waiting for get creative!

Extra Creative

If you want to go the extra mile and convert an image to ASCII art than look at the ascii-art npm package.

https://www.npmjs.com/package/ascii-art

Again this can be installed via npx using the following command:

npx ascii-art image path/to/image.png
Note: This package also supports generating text to ASCII art. However, the font support seem to be limited.

You could use this to generate ASCII art for your logo and output this on the console.log.

The Easter Egg Hunt πŸ‡πŸ₯šπŸ”

Let's do a virtual Easter Egg Hunt and hunt down those websites that have an Easter Egg, list the best in the comments below. So get hunting!

Resources

https://dev.to
https://www.npmjs.com/package/figlet-cli
https://github.com/khrome/ascii-art

Discussion (6)

pic
Editor guide
Collapse
philnash profile image
Phil Nash • Edited

I love this! Thanks for showing some of the tools for making a console message too.

It's not an Easter Egg, but you reminded me of Facebook's console message:

 .d8888b.  888                       888    
d88P  Y88b 888                       888    
Y88b.      888                       888    This is a browser feature intended for 
 "Y888b.   888888  .d88b.  88888b.   888    developers. If someone told you to copy 
    "Y88b. 888    d88""88b 888 "88b  888    and paste something here to enable a 
      "888 888    888  888 888  888  Y8P    Facebook feature or "hack" someone's 
Y88b  d88P Y88b.  Y88..88P 888 d88P         account, it is a scam and will give them 
 "Y8888P"   "Y888  "Y88P"  88888P"   888    access to your Facebook account.
                           888              
                           888              
                           888              

See https://www.facebook.com/selfxss for more information.

Don't XSS yourself!

Collapse
p4lm profile image
Henrik Sommerfeld • Edited

Thanks for the tips! I really enjoy visiting a site I haven’t worked on for years (left the organisation) and discover that my Easter eggs still work. Eg. entering β€œremove yellow logo” and β€œrestore yellow logo” in the searchbox on sandvik.coromant.com/

Collapse
jankohlbach profile image
Jan Kohlbach

that'a nice one πŸ˜‚

Collapse
jasperscheper profile image
Jasperscheper

Here's mine: jr-ict.nl/ :)

Collapse
deadlybyte profile image
Carl Saunders Author

Nice, thanks for sharing.

Collapse
deadlybyte profile image
Carl Saunders Author

Here's my ASCII art Easter Egg:

ravencode.co