Skip the fluff

Backstory

Anytime I want to show off what the web can do with a simple blog I have to pull up this awesome site. I was on A Very Cool Site about Hackery, Math & Design, and the question was asked "how did he do that?"

So it was time to open my console. This is what I found.

Which lead to the question "how did he do that?"

How that is done.

I you are not aware already, there are quite a few methods available in the global console object. If you are not familure I recommend the Mozilla Developer Network pages on console. Some methods of importance are:

• log (duh)
• assert
• trace
• error
• count

These are old news and I wont go into them in detail here. Just look them up on the MDN docs.

So then how was it done?

Scroll ahead to the Outputting Text to the console portion of the MDN doc and you will see that console.log will take in its first parameter some string wrappers. %f for float, %s for string, and so on. At the very bottom of the page you will see the %c, which wrapps the remaining text in some style as the second parameter.

 console.log("%cHello", "color: red;");

Will render as:

Hello

Results across browsers

In the console. From the screen shots below you will see that this works will all modern browsers (although, I don't have direct access to a PC with IE or Edge at the moment, but I will assume they work too).

Chrome

Firefox Inspector

Firefox Firebug

Appendix

This doesn't work in Edge.