Series 1: Speaking

Ep 2: No Code on Slides - Nolan Lawson

How to make a talk without overwhelming the audience with technical details ? Nolan Lawson shares his tips and tricks.

Show Notes


[0:00] (Mariko) This episode is dedicated to Nolan Lawson fan club.

[0:10] (Mariko) Welcome back to the TOAST ! In this episode, I traveled to Seattle to meet up with my friend Nolan Lawson. Nolan is a Program Manager for Microsoft Edge and maintainer of open source libraries such as PouchDB. Before moving to Seattle, he was a regular speaker at JavaScript meetups in NY. I always thought speaking was something he's been doing for long time, but I found out he started speaking when he moved to New York 2 years ago.

[0:38] (Nolan) Well, I remember what happened was that I moved to New York and I didn't know anybody, and my first thought when moving... I moved around a lot and so whenever I moved to a new city my first thought is, "Okay, I'll go on and I'll find some nice meetups with people who have similar interests to me and I'll go hangout with them." And I landed and I looked up and I just typed in JavaScript, and what immediately came up was the plethora of options that we have in New York City, like QueensJS and JerseyScript and BrooklynJS, and I saw there was a lot of hubbub on Twitter about these events, so I was like, "Ah, I wanna go to one of these." So, I went to QueensJS. I think I actually went to the first Queens JS ever, just as an attendee, and I loved it. It was amazing. And so the week after that, I went went to JerseyScript and I applied to be a speaker and they let me speak.

[1:28] (Mariko) Nolan is a very active member of open source community, his 1st invitation to a conference was through he's work in open source.

[1:35] (Nolan) My first conference talk, I think, was Edge Conference in 2015. It's a conference about cutting edge web technologies. It's where people goes to discuss polyfills and upcoming browser APIs. I went there as an independent developer at the time. What they did was they just got together, basically all the major IndexedDB polyfill authors, and got us all together in a room. It was just really neat to get us all up on stage and talk about IndexedDB and browser storage.

[2:06] (Mariko) One thing I really like about Nolan's presentation is that he is really good at explaining technical concepts on stage. I often get lost watching conference talk. I don't know if this ever happen to you, but that monument you are sitting in a conference room and thinking "This sounds really cool but I don't know what I am looking at" Nolan's talk doesn't do that. He says the speaker should care more about experience of the audience.

[2:34] (Nolan) I think a lot of people make mistakes when making presentations that they pack too much detail on it, just way too much detail. And I think what that stems from is it stems from the difference between the experience of writing a presentation versus the experience of watching a presentation. So when you're writing it, you have the laptop screen right in front your face and you can see high resolution and it's nice and quiet usually when you're working on it so you're focused, and you feel like it's okay to put a lot of detail on this page, but then the problem is then that gets blown up on a gigantic screen, it maybe dark, maybe the resolution isn't so great, and then now it's a totally different experience than when you were authoring it. So you have to keep that user experience in mind as you're building it. It's actually very similar to building a web page.

[3:20] (Mariko) When thinking about how much information to put on a slide, Nolan has strong policy about how much code to be shown on a screen.

[3:29] (Nolan) Well, I guess I just kinda realized that when I thought about what kind of technical talks I enjoyed, myself, it wasn't the ones where there was 20 lines of code up on the screen and the speaker just kinda walked through it step-by-step. I don't think that's the right format for that. Especially with the meetups and conferences I would go to in NY, often times it would be at a bar, it would be dark and maybe I'll sitting at back of the room, and I'll only be able to see top half of the screen. So it doesn't make sense to put 20 lines of code up on the screen. So my personal policy is I might put up three lines of code in gigantic font and I don't expect the audience to read it, because I would hope that the content of the talk would be the... The content of what I'm actually saying would be the the thing they'd focus on, not necessarily the slides.

[4:21] (Mariko) The meetup at a bar where only half of slide is visible is the meetup I organize called BrooklynJS. It probably is the least professional venue for technical talk.

[4:31] (Nolan) It's actually good because it forces you to use a lot of discipline when you're building your slides for BrooklynJS. You really have to make sure that the content of the talk can carry it, that you don't even need the slides, and that also you're putting the important stuff in the center of the slides and you're not putting some important detail in the very, very bottom.

[4:52] (Mariko) Nolan makes his slides in browser, using HTML CSS and JavaScript. He even give a talk in a t-shirt that says "the team web". I also make slides in browser because it was really easy for me to embed demos.

[5:06] (Nolan) I decided to do it out of principle. It's like, "We build for the web. Let's build our presentations on the web". I love the way you do it too, you built your own presentation software right? your own framework.

(Mariko) Yeah. Maybe not the clever idea, but...

(Nolan) No, your slides are amazing and they always have great interactivity. You always really milk the browser when you do presentations. You do the kind of presentations that you could not do outside of the browser, and that's what I really like to see whether you're making your own JavaScript framework for presentations or if you're just use reveal.js, like actually having interactive demos, having Codepens inside of there, doing some tricky CSS animations or SVG animations or something. That's what the web is good at, it's perfect for doing presentations.

[5:50] (Mariko) So when we are building slides in browser, is there anything we should keep in mind?

[5:56] (Nolan) There's something that I feel really strongly about, which is funny that I don't see a lot of other presenters doing, which is that we have these presentations where we'll have like a reveal.js presentation where one slide will have a beautiful h1/h2 tag with really crisp text, and then they go to the next slide and suddenly it's a full bleed GIF and that GIF is horrible resolution and really chunky and low frame rate and looks ugly but it's blown up to full size. And then when you look at the presentation on the web, you're downloading this 3 mega byte GIF that looks ugly. And I feel like you should be using HTML5 video for that, 'cause you can make really high resolution videos, high frame rate videos, and it's super easy to do. On a Mac you can just use QuickTime to take a screen recording and then convert that with something like FFmpeg to MP4 or WebM, and then it looks beautiful when you're giving a presentation and it's also a smaller file size when people download it after the conference. The ugliest GIF you've ever seen is bigger in file size then the most beautiful MP4 or WebM you can imagine. It's enormous.

On Mac I would use QuickTime, on Windows I use... This is a little trick for Windows, is that you can actually use the Xbox app to screen record any other app. All you have to do is you have to open it up and you hit windows+G and then says, "Is this a video game?" And you just check the little box that says yes, and then you can video record anything. And then at the end of this you get a video that if you convert with FFmpeg to MP4, 'cause in the case of QuickTime, you have to convert from MOV to MP4 or WebM. You can do this with FFmpeg on a command line. I actually have my dot files repository on GitHub actually has the scripts I use for this, if anybody wants to borrow it.

[7:45] (Mariko) It's clear Nolan put a lot of effort into his slide but he also spends a lot of time thinking about content for the talk. Making material to teach someone is really difficult and some thing I'm still learning. I wonder if there is anyway we can practice for it?

[8:01] (Nolan) Yeah, I would say the best way to start is to write a lot. I actually find that's the most important thing to do. I started a blog like five, six years ago and I never got a lot of traffic, in the beginning, but it gave me a way to understand my own thinking inside of my head because I was forced to actually put it down on the page. And then that gave me ideas that then fed into other blog posts that then that fed into, "Oh there's this interesting open source project" and it solves this problem that I've been thinking about and maybe I want to contribute to it. And then, that would feed into other ideas and then I would end up writing blog posts for the PouchDB blog or on my personal blog or now hopefully soon the Microsoft Edge Dev blog. Just think about what problems you're running into in your day-to-day life as a software developer and then think about what learnings you would like to pass on to someone else if they were in your shoes. Like what you'd like to tell yourself two years ago. Like you'd wanna go back in time, in a time machine and grab yourself by the shoulders and say, "Don't do this thing. Do this other thing" and whatever that is, whatever you're passionate about, write a blog post about that. Because if you can write a blog post about it, you can do a talk about it.

[9:10] (Mariko) Understand your own thinking by writing it down, and pass on learnings to someone. I think, I Nolan passed me some leanings about writing a talk.

Next week, I'm talking to Justin Falcone, he is a speaker who does this unique talk that is almost a performance art.

[9:28] (Justin) I think a lot of people in our community who do talks...they've been doing tech for while and they see talks and see "oh that's something I connect with". I actually kinda came from the opposite direction where I started with talks and then got into tech from there.

I'm not an educator, I'm much more of a... I don't know... I'm much more of an entertainer.

[9:59] (Mariko) TOAST is written, produced, and edited by me. Thank you Nolan, and thank you for coming back for second episode.

By the way the show is on iTunes now, so if you like it, please rate and maybe write a comment.