This year (2018) I have given 4 tech talks at different events.
26 July @ Vue.js Hong Kong Meetup: "Introduction to Vue.js"
21 September @ Vue.js London Conference: "Demonstrating how to build a static website with VuePress"
There is one thing in common in all these talks: I did live coding.
I am not sure. I felt that talking slides are boring; engaging with the audience with actual code seems to be much more fun. I just had the feeling that I could probably pull off a decent live-coding talk despite having no past experience. I guess it was just born with me! 😂
I noticed that many people are scared of doing live-coding. This is why I decided to write down a few tips that I think is essential for a good live-coding talk.
This does not only apply to live-coding talks. Talking about something you love brings you excitement; excitement gives you energy; and energy in general is what attracts the attention of the audience!
If you are not "truly" enthusiastic about the topic, persuade yourself or try to fake it for at least the duration of your talk. Pretend everything you talk about is a new discovery. Pretend every "small" line of code you write, is a "giant" leap for mankind. Saying things like "isn't it amazing/cool/awesome?", "oh my godddd" excitedly usually persuade the audience that you are truly enthusiastic about something. (controversial; I seldom use the above trick except for my final year project presentation at University😂😂😂.)
However, to be able to fake enthusiasm, it requires a high level of acting skills. So if you are not good at acting, simply change the topic to something you love.
From my past experiences singing on stage, I have learned that making yourself comfortable on the stage will boost the performance a lot. I had a lot of experiences singing on stage. I sang in a few competitions when I was at high school. Then I joined a student acapella group in London performing songs in different events.
There is one trick that I would do if I were nervous on the stage. I would change the position of the mic stand. Try to delay my performance by "setting up" the stage. It might look like that you were "setting up", but the real purpose of this delay is for yourself to familiarise yourself with the stage; make yourself comfortable.
You can invent some ways to delay the start of your talk. I find taking selfie to be the most natural and fun way to delay the talk.
Here are some other ideas you can use:
## Tip #3: Start the live-coding with
I can't stress enough about the importance of starting the live-coding by creating an empty project directory! This can make the audience feel that they know what is happening and would start to follow your flow right from the start.
Live-coding by filling in lines of some functions is not a good idea because nobody in the audience would know what the other parts of the app is doing.
The following is the standard routine of how I would start my live-coding:
"So let's start the live coding by creating an EMPTY directory" $ mkdir /tmp/amazing-meetup "Let's go into our directory" $ cd /tmp/amazing-meetup "Now let's do some basic project setup by initiating git and npm" $ git init && npm init -y "Now we got the pacakge.json and git directory setup" $ ls -l .git/ package.json "Let's do our initial commit now!" $ git add -A $ git commit -am 'initial commit'
*This should not apply to languages like Java which is impossible to code in without an IDE.*🤢🤢🤢
There might be some really cool tricks in your IDE that does a lot of things at once, please don't use them during the live-coding. Your audience might have a different setup and would be confused if things magically happened. You want your audience to flow with your code step by step.
Here are some common IDE features you should avoid using:
.eslintrcetc., dont use that!
The only IDE feature that I would recommend using is formatting/linting the code.
If you really NEED to use a shortcut, make sure you explicitly talk about what shortcut you are applying before doing it. However, I don't think there is something that you couldn't do manually.
P.S. Vim is my major editor. I am not a big fan of IDE.
When you were preparing the code that you are going to live-code, put extra time into making the code elegant, clean and simple.
If you can't explain it simply, you don't understand it well enough.
The process of simplifying your code will help you in so many ways:
Here are some tips for simplifying code:
for (let i = 0; i < length; i++). Use
for-ofloop or other higher level loops instead. Or if you really need the index, do
Array.prototype.forEachand take the index as the second argument; this is preferable because we don't have to refer to our element with
for (const [k, v] of Object.entries(obj))to loop through the keys and values of an object.
const, stop using
I hope my tips did help you for your next live-coding talk! Good luck and keep coding!