Styled text in the JavaScript console

Console.log() in Chrome, Safari and Edge all support styled output. Syntax is simple:

console.log("look, %cBig Red Letters", "font-size: 42px; color: red;")

The %c token is a placeholder for a CSS ruleset. Think of it as wrapping whatever comes after it in a span with the rule in a style attribute. So, the above command would function like this:

 

look, <span style="font-size: 42px; color: red;">Big Red Letters</span>

Additional style blocks can be added with more %c tokens, so long as there’s a corresponding ruleset. If no ruleset is provided “%c” will appear as text in whatever style preceded it.

console.log(
    "%cRed %cGreen %cBlue?", 
    "font-size: 42px; color: red;",
    "font-size: 42px; color: green;"
)

Empty strings can be used to reset styles back to default.

console.log(
    "%cRed %cGreen %cNope?", 
    "font-size: 42px; color: red;",
    "font-size: 42px; color: green;",
    ""
)

Big List of Naughty Strings

Fun, but also quite useful and educational.

https://github.com/minimaxir/big-list-of-naughty-strings

Pragma Prefixing the devtool option in Webpack

The Vue.js example webpack config prefixed the devtool option with a hashmark (”#”), I hadn’t seen that before. 

devtool: '#eval-source-map',

Apparently it enforces a pragma style. It’s documented in the old Webpack docs.

Prefixing @, # or #@ will enforce a pragma style. (Defaults to @ in webpack@1 and # in webpack@2; using # is recommended)

Cobalt 2 Sublime Text Theme

I’m surprised the Cobalt2 Theme from @wesbos isn’t more popular. The  colored filetype sidebar icons make working in Sublime Text much faster for me.