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

Carl Saunders - Apr 8 '20 - - Dev Community

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
.///////:-        -/////////-         .::.
Enter fullscreen mode Exit fullscreen mode
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"
Enter fullscreen mode Exit fullscreen mode
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 /  __/ | | | | |__| (_) | (_| |  __/
 |_| \_\__,_| \_/ \___|_| |_|  \____\___/ \__,_|\___|
Enter fullscreen mode Exit fullscreen mode

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\
    |_| \\_\\__,_| \\_/ \\___|_| |_|  \\____\\___/ \\__,_|\\___|"
    )
Enter fullscreen mode Exit fullscreen mode
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
Enter fullscreen mode Exit fullscreen mode

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

npx figlet-cli -f "ANSI Shadow" "Raven Code"
Enter fullscreen mode Exit fullscreen mode

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

ā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā•—  ā–ˆā–ˆā–ˆā–ˆā–ˆā•— ā–ˆā–ˆā•—   ā–ˆā–ˆā•—ā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā•—ā–ˆā–ˆā–ˆā•—   ā–ˆā–ˆā•—     ā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā•— ā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā•— ā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā•— ā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā•—
ā–ˆā–ˆā•”ā•ā•ā–ˆā–ˆā•—ā–ˆā–ˆā•”ā•ā•ā–ˆā–ˆā•—ā–ˆā–ˆā•‘   ā–ˆā–ˆā•‘ā–ˆā–ˆā•”ā•ā•ā•ā•ā•ā–ˆā–ˆā–ˆā–ˆā•—  ā–ˆā–ˆā•‘    ā–ˆā–ˆā•”ā•ā•ā•ā•ā•ā–ˆā–ˆā•”ā•ā•ā•ā–ˆā–ˆā•—ā–ˆā–ˆā•”ā•ā•ā–ˆā–ˆā•—ā–ˆā–ˆā•”ā•ā•ā•ā•ā•
ā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā•”ā•ā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā•‘ā–ˆā–ˆā•‘   ā–ˆā–ˆā•‘ā–ˆā–ˆā–ˆā–ˆā–ˆā•—  ā–ˆā–ˆā•”ā–ˆā–ˆā•— ā–ˆā–ˆā•‘    ā–ˆā–ˆā•‘     ā–ˆā–ˆā•‘   ā–ˆā–ˆā•‘ā–ˆā–ˆā•‘  ā–ˆā–ˆā•‘ā–ˆā–ˆā–ˆā–ˆā–ˆā•—
ā–ˆā–ˆā•”ā•ā•ā–ˆā–ˆā•—ā–ˆā–ˆā•”ā•ā•ā–ˆā–ˆā•‘ā•šā–ˆā–ˆā•— ā–ˆā–ˆā•”ā•ā–ˆā–ˆā•”ā•ā•ā•  ā–ˆā–ˆā•‘ā•šā–ˆā–ˆā•—ā–ˆā–ˆā•‘    ā–ˆā–ˆā•‘     ā–ˆā–ˆā•‘   ā–ˆā–ˆā•‘ā–ˆā–ˆā•‘  ā–ˆā–ˆā•‘ā–ˆā–ˆā•”ā•ā•ā•
ā–ˆā–ˆā•‘  ā–ˆā–ˆā•‘ā–ˆā–ˆā•‘  ā–ˆā–ˆā•‘ ā•šā–ˆā–ˆā–ˆā–ˆā•”ā• ā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā•—ā–ˆā–ˆā•‘ ā•šā–ˆā–ˆā–ˆā–ˆā•‘    ā•šā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā•—ā•šā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā•”ā•ā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā•”ā•ā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā–ˆā•—
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
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

Image
Experience On Hacktoberfest

hacktoberfestchallenge, hacktoberfest
Image
The Most Underrated Companies To Follow In The Best Cryptocurrency Casino Industry
Image
This Week's Top Stories About All Crypto Casinos
Image
From Aquaman to Conan: Dive Into Jason Momoa's Most Legendary Roles!
Image
ŲŖŲ­Ł…ŁŠŁ„ ŲŖŲ·ŲØŁŠŁ‚ Yacine TV ŁŠŲ§Ų³ŁŠŁ† ŲŖŁŠŁŁŠ 2024 - ŲØŲ« Ł…ŲØŲ§Ų“Ų± Ł„Ų£Ł‡Ł… Ł…ŲØŲ§Ų±ŁŠŲ§ŲŖ ŲŖŁ†Ų²ŁŠŁ„ ŁˆŲŖŲ­Ł…ŁŠŁ„
Image
Best Plants to Grow for Beginners: A Gardener's Guide

gardening
Image
Hacktoberfest Experience

devchallenge, hacktoberfestchallenge, hacktoberfest, opensource
Image
The BufferZone, a place where creators can focus on content

devchallenge, wixstudiochallenge, webdev, javascript
Image
10 Misconceptions Your Boss Has Concerning How Do I Get An ADHD Assessment
Image
If You've Just Purchased How To Get An ADHD Assessment UK ... Now What?
Image
Finding the Best Garage Door Repair in Independence

webdev, javascript, beginners, tutorial
Image
Cat Flap Installation Cost
Image
Share files-Photos between Mac and GooglePixel

github, opensource, android
Image
Visually Multilingual: Introducing mcdse-2b

ai, rag, vectordatabase
Image
Why We Why We Replace Lost Car Key (And You Should Too!)
Image
From All Over The Web Twenty Amazing Infographics About How To Get Assessed For ADHD
Image
The Most Underrated Companies To Watch In Assessment For ADHD Industry
Image
The Reasons You'll Want To Learn More About Bifold Door Repair Near Me
Image
Welke subsidies voor zakelijke zonnepanelen zijn er? Bekijk ze hier!
. . . . . . . . . . . . . . . . .
Terabox Video Player