Slideless presentations for live coding demos

by Paul —

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:

Photo of speaker Hui Jing Chen and a big screen showing a webpage with the browser DevTools open, showing a slide stating 'Demystify Modern CSS Layouts with DevTools'

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:

Screenshot of the DevTools console while visiting Facebook.com, stating 'Stop! This is a browser feature intended for developers. If someone told you copy-paste something here to enable a Facebook feature or "hack" someone's account, it is a scam and will give them access to your Facebook account. See https://www.facebook.com/selfxss for more information.'

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;');

Screenshot showing the output of the console.log statement above

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

meerdivotion

Cases

Blogs

Event