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
.///////:- -/////////- .::.
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
Here's my ASCII art Easter Egg:
ravencode.co