What stood out to me most was her opening slide:
Why? Because that’s not a slide — it’s the DevTools console.
There are plenty of websites out there that use the console in a fun way. Many web agencies and IT companies show a welcome message to curious devs, sometimes linking their jobs page as well. Facebook, doing something right for once, helps prevent oblivious users from accidentally compromising their accounts:
I’d completely forgotten about how it’s possible to apply CSS styles to console output. I guess I never saw a good use-case for it, besides giving warnings and errors some extra visual importance. But then again, we have
console.error for that.
Enter Hui Jing. What an awesome idea to combine slides and demo in one. No more alt-tabbing between a slide deck and the demo environment, no more 'what did the slide say again?', and as a bonus, attendees taking photos on their phones get the whole story in one picture. I’m definitely going to try this out in one of Divotion’s knowledge sharing sessions.
So how does it work? Real easy, actually!
console.log supports string substitution, a bit like
printf does. For example, the
%.2f directive outputs a floating point number with two decimal places. For the console, it’s also possible to add CSS styling to a string with the
console.log('%cHello %cWorld', 'color: red;', 'text-decoration: underline;');
Of course, not all CSS will work, but whether you want to keep it neat and simple, or go crazy with emojis 🤘 and Lea Verou’s CSS patterns, I’m sure this article will help you spice up your next live-coding demo!
And of course… stay curious and check the console. 🕵️