Slideless presentations for live coding demos
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?
console.log supports string substitution, a bit like
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. 🕵️