Foreword

If you are using Chrome and you would like to have a dark console like mine go to the dev tools ‘Settings’ and choose dark theme in ‘Preferences’.

Now let’s have fun with the console 🌴.

Interpolated

‘%s’ allows you to replace that space with other stuff.

// interpolated console.log('hello %s!', '💩');

The result is:

Ok you have a nice poo, I know, but what’s the advantage in using this syntax?

‘%s’ is like an invisible placeholder in which you can put a variable or, better, a function.

Let’s have fun with a random emoji greeting!

// interpolated with fun const emoji = ['💩', '👯‍', '😸', '🏄', '🚀', '🔥', '🎉', '😄', '🦁']; function randomEmoji() {

let random = Math.floor(Math.random() * emoji.length);

return emoji[random];

} console.log('hello %s!', randomEmoji());

The result when you refresh is:

Hello!!

Styled

‘%c’ allows you to inject CSS starting from where you decide to put it.

// styled console.log(

'%cHave a nice day!',

'font-size: 20px; background-color: yellow; color:red; margin-left: 20px;'

);

The result is:

The style depends from the ‘%c’ position.

// styled console.log(

'Have a %cnice day!',

'font-size: 20px; background-color: yellow; color:red; margin-left: 20px;'

);

The result is:

But..there is a better way to add style!

I like to store the style in an array using join(‘;’) to keep a better readability.

const style = [

'background: #000',

'color: #fff',

'padding: 10px 20px',

'line-height: 35px'

].join(';'); console.log('%c Coded with ♥️', style);

The result is:

You can use different backgrounds.

Gradients

const style = [

'background: linear-gradient(to right, #5433ff, #20bdff, #a5fecb);',

'color: #fff',

'padding: 10px 20px',

'line-height: 35px'

].join(';'); console.log('%cHi there!', style);

The result is:

Images

const style = [

'background-image: url("https://media.giphy.com/media/3o85xoi6nNqJQJ95Qc/giphy.gif")',

'background-size: cover',

'color: #fff',

'padding: 10px 20px',

'line-height: 35px'

].join(';'); console.log('%cHi there!', style);

The result is:

Crazy cat is here!

Add more than one styles

You can add more ‘%c’ to add more styles in your console in this way:

const style1 = [

'background: red',

'color: #fff',

].join(';'); const style2 = [

'font-size: 40px',

'color: red'

].join(';'); console.log('%cHi %cthere!', style1, style2);

The result is:

Add a style without having text

Maybe you want to add some style, an image for example, without a text. You can, only remember to add a space after ‘%c’ for making it work.

const style = [

'background-image: url("https://media.giphy.com/media/3o85xoi6nNqJQJ95Qc/giphy.gif")',

'background-size: cover',

'color: #fff',

'padding: 10px 20px',

'line-height: 35px'

].join(';'); console.log('Hi there!%c', style); // it doesn't work

The result is:

But it works with space.

const style = [

'background-image: url("https://media.giphy.com/media/3o85xoi6nNqJQJ95Qc/giphy.gif")',

'background-size: cover',

'color: #fff',

'padding: 10px 20px',

'line-height: 35px'

].join(';'); console.log('Hi there!%c ', style); // it works!

Animations

I found this guy erik who made this discovery: SVG animations in the browser console are possible! You can read his article here if you are interested in it. This is all I found searching a way to have animation into console.

I tried different ways to use CSS Keyframe Animations but it doesn’t seem possible. If someone knows a way to do it please contact me, I love to put CSS everywhere 😄.

Fake animation

It is hard to give up and that’s why I create this fake animation, a simple appearance and disappearance of things.

const textStyle = [

'color: red',

'font-size: 30px',

].join(';'); const imageStyle = [

'background-image: url("https://media.giphy.com/media/sXOj0wtpyELdu/source.gif")',

'background-size: cover',

'padding: 150px 300px'

].join(';'); // it's just a joke 😸 console.log('%cYou have 6 seconds to count all the cats', textStyle); setTimeout(function() {

console.log('%c ', imageStyle);

}, 3000); setTimeout(function() {

console.clear();

}, 9000);

The result is: