Format console.log with CSS and String Template Tags

[00:00] When you console.log something, it's just a plain, black message. I'll say regular message, and it's just black and white, which is pretty boring. What you can do is add %c, and then log takes additional arguments, where this can be a string of CSS properties.

[00:18] I'll say color red. Now, when this runs, you'll see regular message turned red. Maybe I don't want my whole message red, just this part. I can add another %c here. If I save, you'll see it just adds %c, which means it requires an additional parameter right here to match up with this %c.

[00:40] Basically, saying that these styles end here, so start with this and end with this. I'll hit save here, and I'll have a regular red, and then a black message. Now, you can make this look a little nicer, like a label, if you do a color of white, and then a background color of something like red, which will now have a nice label feel to it.

[01:00] You can even add some additional padding around it. If I said padding, top 05em right, bottom 05em left, and now it has some nice padding on the left and the right. To me, this looks like a nice error label. I'll call this error. Now, you see in my console, I have a nice label error with a black message.

[01:22] Now, I can make this a bit easier to write by extracting this out into a function, which I'll use as a template tag. I'll call this function label, and that's going to return these strings as an array. I'll spread them out, so each of them are passed into console.log.

[01:41] Since label is a template tag, I need the two backticks so that this tag applies to this, and then the output of this function will be spread into console.log. Let's save, and get the exact same result. Now, because this is a tag, I can pass things in, like red, error, this is my error message, and this won't do anything, because I've hard-coded the return value.

[02:06] I need to take these as parameters in here, and pass them in. To do that, a template function takes an array, which has the raw string in there, labeled as raw. I'll de-structure that in the array form, and then return this array again.

[02:23] This will still have the exact same thing. It's just that now we have access to everything that was passed in. Now because raw is a string, I can de-structure this as an array. I'll say raw split, and we'll just split on white space.

[02:40] The first thing is the color, so I'll say color. The second thing is the label, so I'll call that label. The rest in here are the messages combined into a message. We'll just call this message. Color, label, and then the rest is the message.

[02:58] Now, I can take this color, and I'm going to drop it into the background color here, and just use that as a variable in a template string. Let's go ahead and change this into a template string. At the end of it -- and I'm going to format this onto multiple lines, just to make it easier to read -- then the label is going to be here, inside of the %cs.

[03:25] This needs to be a template string as well. The message will land right here as a message that's joined back together, because currently, this is just the rest of an array, and will join it back together into a string.

[03:42] Now when I hit save, I have an error, which is the label. The background color's red, and this is my error message, is the rest of the message here. I can reuse this saying console.log. I want to label this as a "green success yay, it worked!"

[04:01] Hit save, and you can see I have a nice success label on top of this message. Again, label is a function returning an array, which we're spreading into console.log. Spreading means it's passing each of these in as a parameter, another parameter, another parameter into here.

[04:21] The label is basically tearing apart this raw string. We're splitting it using the first value as the color, the second as the label, and the rest as the message, and then forming those back together in the strings necessary to properly console.log them out.