Improve Your Presentation Skills by Scripting Your Live Coding Demos to Perfection

Hi, I'm Elio and welcome to the session about how you can improve your presentation skills by scripting your live coding demos to perfection. We've all been to sessions where the speaker had to present their slides and then moving over to their IDE to show some code and to start writing and then things go wrong. For instance, if I'm already going to my IDE and having too many windows open, it creates distraction for my audience in order to see, hey, to which is he going to move. So probably I click on this one and then, oh no, accidentally I did it wrong. It needs to be my code editor. And then in my code editor, I need to ask the question, hey, is my font all right? Is it big enough? And start typing and starting to write mistakes. And these can all distract you, but also your audience.

So whenever you're going to do a live coding or presentation in general, you need to make sure that there's not too many distractions, like the notifications have to be turned off. Close down all your applications, only the ones that you need. Keep them open. Tabs. Don't use too many tabs. And context switching is really a big hassle for you to stay in the flow, but also for your audience, because you're going to lose track to which application they have to focus on.

One of those things, whenever you're going to do a coding session, it comes with preparation. And the first thing to prepare for is whenever you show codes, it should be best done with a light in. We already know that, but still, I see people not using it. So try to use a light team and set already your fonts to a bigger font size. What you can also do is change the cursor style. By default, it's a very tiny line in your editor. And it's better to use a block, because the block is more visual and it's easier to spot. And you can also do the expanding animation instead of the blinking. You can change your color. And then the last thing is hover panels. If you're going to show code and you move over to some variable, it can happen that there's a hover panel. That's also a distraction, but also for the audience, it's like, why is it there? And for you, it's like, hey, go away. I don't need you. You can turn these off. And these are very useful settings whenever you're going to do a presentation to just set them up front. So going back to my code, this is how my code looks like. And most probably, you don't see my cursor, because it's a very thin line.

If I change everything to the settings that you just saw, it's a lot more clear for my audience to make it easier to read, but also easier to spot where my cursor is, actually. And in this case, it's on line 14. Presentations can be stressful, and for sure, live coding demos and things that you need to keep in mind. Most probably, you have a script next to your laptop when you're presenting. But you don't have to be stressed if you're using the right tools. One of those tools is Demo Time. And Demo Time is a tool that is actually created to give presentations within Visual Studio Code by scripting all the demos.

That way, you don't have to think about, oh, what can go wrong? No, you scripted it, so it's not going wrong. Everything is going smoothly, because you scripted it and it's going to run that exact way. And that's also how I created this presentation. So moving over from my code over to a slide, this is all done with Demo Time. And I just have to press on the right key, and it's doing the next thing. So Demo Time works like how slides work in PowerPoint or Keynote. You just click on the next key, and it's going to the next action. So everything is scripted within JSON with actions, like an open slide, open file, create file, and so on.

The benefit is that you're not context switching between multiple applications. So you don't lose track, and you don't have to create any snippets anymore. And it's easier to share with your audience, because you can give them something, a repository, for instance, that they can run by themselves, go through the slides, and through the code the same way how you were presenting it. To get started, all you have to do is open Visual Studio Code and go to the extension view, and then click or search for Demo Time. Click on the Install button, and then there's a new Demo Time panel where you can initialize it. From the moment you initialize it, it's going to create you a demo.json file. You can create multiple of these files, but the demo.json file is the default one. So what are you going to do? Whenever you create a demo file, you can start adding some actions.

And most probably, the first action that you're going to add is creating code and opening the file. So this is what I'm going to do here. So this is my demo.json file, and there you can see the first action that I have, which is here, which is the file action. It's going to create me a file, and then replace some of the code with what I want to be inserted. The next action is a highlight code action, and this works exactly like this. So the moment I click on Next, it's going to highlight these lines, and I don't have to do anything. So I don't have to use any tool externally, like Zoom It, to zoom in on the code and to highlight it. So all is built into Demo Time.

Another thing that you can do is run any of the commands from Visual Studio Code. So with the Execute VS Code command action, so in this case, what I did for making it cleaner for when I'm presenting, is I first toggle it in full screen. Then I hide the title bar at the top, and I hide the editor tabs. So you don't see any tabs anymore. And I toggle the presentation mode in the Demo Time extension. And this is what you can do. You can run any of the commands that are available within Visual Studio Code, also the ones from external or third-party extensions. So if I click on Next, you see that it removes all the tabs, and it goes in full screen mode. So now there's less distractions, and this is where you can actually use this Execute VS Code command action but you can use it for anything else.

The third use case is Slides. Slides is a very useful one, because with presentations and with live coding presentations, most likely you will use Slides in order to explain a couple of things or showing some architecture and so on. Slides work with Markdown in Demo Time, and all you need to do is create an action, open Slides, providing the path to a Markdown file, and then the Markdown file looks like this. It can be grouped slides, and in this case, it's just one slide, where at the top you have a front matter section with a team and a layout. And then you write your content, and then the content will be shown like this. So I hope you like Demo Time. I hope you know what you can expect from Demo Time and how it can improve your presentation skills. So if you want to know more, check out the documentation at demotime.elio.dev. And by that, I want to say thank you very much for attending my session. I was Elio Straaf. Bye-bye. Enjoy the rest of your day.