Console.rules(💪)

irene.tomainiBlockedUnblockFollowFollowing

Nov 26, 2018

How to level up your console appearance

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:

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:

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: