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;",
    ""
)

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)

RegExp.exec and String.match are the same, right?

In JavaScript RegExp.exec() and String.match() should be interchangeable so long as the inputs are the same. Right?

const pat = /(dog).*(bird)/g;
const str = 'dog cat bird';

const foo = str.match(pat);
const bar = pat.exec(str);

Right, so why are foo and bar different?

foo is an array containing the original string. That’s it. Not what I was expecting;

['dog cat bird']

bar contains the expected, complete RegExp result:

['dog cat bird', 'dog', 'bird', index: 0, input: 'dog cat bird']

What happened?*

That little g flag at the end of the RegExp? It completely changes the behavior of String.match. From MDN’s String.match docs:

If the regular expression does not include the g flag, str.match() will return the same result as RegExp.exec(). The returned Array has an extra input property, which contains the original string that was parsed. In addition, it has an index property, which represents the zero-based index of the match in the string.

If the regular expression includes the g flag, the method returns an Array containing all matched substrings rather than match objects. Captured groups are not returned. If there were no matches, the method returns null.

In 21 years of JavaScript, I never saw that before now.

String.match might be a bit too quirky for me, I’ll be sticking to explicit RegExp methods.

ES6 Set.has() vs. Array.indexOf()

I decided to use the new ES6 Set.has() language construct instead of Array.indexOf(). Turns out they’re the same character length.

if (new Set(Object.keys(commands)).has(process.argv[2])) {

…vs.

if (Object.keys(commands).indexOf(process.argv[2] > -1)) {

I’m sticking with Set. It works, the code is clean and it kind of reminds me of Python. The indexOf check feels more fragile since it’s easy to lose the actual condition at the end there.

Webpack indentation

Sort of useless, but if you’re annoyed that Webpack’s output files have re-indented your exquisitely space-indented source files with a tab (no-mixed-spaces-and-tabs!), just set output.sourcePrefix to spaces in your webpack.config.js file.

The main reason I did this was to be able to review the output files in a text editor without triggering thousands of ESLint indentation errors.