Slideless presentations for live coding demos

Earlier this week, my colleague Gerald and I attended Mozilla’s View Source conference in Amsterdam. Among the amazing talks, with topics ranging from web monetization and internet privacy to coding real-time AR apps in JavaScript, there was one that really stood out for me. Hui Jing Chen gave a live-coding demo about how Firefox DevTools can help you with creating CSS layouts.

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.warn and 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 %c directive:

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. 🕵️