Creating Console Signatures in Javascript
After graduating from Flatiron’s Immersive Software Engineering program I felt a little lost. I had spent a grueling four months learning the ins and outs of web development, so when I graduated I felt like the whole world stopped. Luckily personal passion projects have kept my thirst for knowledge quenched. I’ve been looking at ways to spice up my projects even more by giving them that extra personal touch. That’s when I heard about console signatures. Today I’m going to show you how to create a console signature by including it in my most recent project, Archivo del Santo.
Getting 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("Hello World");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("%cHello World");%c applies to the console message CSS rules that are defined by the second argument.
console.log("%cHello World", "background: coral;");That should print:
Advanced Styling
Now, let's add some more styling to our signature.
const consoleSignatureStyle = "font-size: 16px;" +
"background: #ff6d92 linear-gradient(to bottom left, #f5b200 0,
#fc636b 75%);" +
"color: white;" +
"text-align: center;" +
"padding: 10px 15px;" +
"width: 100%;" +
"border-radius: 20px;";const consoleSignatureText = "%cArchivo del Santo";console.log(consoleSignatureText, consoleSignatureStyle);
That should print:
We pretty much have the entirety of CSS3 at our disposal here, so the possibilities are endless. I’d love to see what y’all can do with this knowledge. Feel free to reach me on LinkedIn if you have any questions, or to show off what you’ve made. Happy coding!