Let's be fancy with a console signature
Create a stylized console message and say hello to your fellow developers.
Let's get started
First you should know that a console message, which is the first argument of a console.log
, can be formatted using other arguments.
console.log("I'm the message");
There are different ways to format a console message but the only one that is useful in this specific case is the %c
formatter.
console.log("%cI'm the message");
%c
applies to the console message CSS rules that are defined by the second argument.
console.log("%cI'm the message", "background: red;");
And that's already all you need to know to create your own console signature.
Example
var consoleSignatureStyle = "font-size: 16px;" +
"background: linear-gradient(to right, #e66465, #9198e5);" +
"color: white;" +
"text-align: center;" +
"padding: 10px 15px;" +
"width: 100%;" +
"border-radius: 20px;";
var consoleSignatureText = "%cDon't steal my cookies! 🍪";
console.log(consoleSignatureText, consoleSignatureStyle);
Note: It is also possible to print images into the console by using the background-image
CSS property.
If you like my posts follow me on hashnode, dev.to and twitter!
Passionate app developer and programmer
I did not know this. It's awesome! Thanks for sharing 🔥
I am interested in and talking about JavaScript, ReactJS, NodeJS, and Software Engineering.
This is one of my favorite and easy to set up growth hacks for software agencies and companies in general. Make developers curious when they inspect your source code.
Comments (4)