YCM Jason

5 Tips for Live-Coding Talks

This year (2018) I have given 4 tech talks at different events.

  1. 05 July @ Vue.js Manchester Meetup: (my first ever tech talk! 🎉🎉) "Demonstrating FLIP and how Vue uses it" Watch video here

  2. 26 July @ Vue.js Hong Kong Meetup: "Introduction to Vue.js"

  3. 21 September @ Vue.js London Conference: "Demonstrating how to build a static website with VuePress"

  4. 21 November @ Manchester Web Meetup: "Building a Simple Virtual DOM from Scratch" Read the follow-up article here Watch the video here

There is one thing in common in all these talks: I did live coding.

# Why did I do live-coding in all the talks? Isn't that risky?

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.

# Tip #1: Be truly enthusiastic about the topic

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.

# Tip #2: Make yourself comfortable on stage by delaying the talk

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:

  • Taking selfies
  • Play a 30 second video that is relevant to your talk
  • Chat with the audience if the venue permits
  • Go to a few useless websites and have a laugh with the audience

## Tip #3: Start the live-coding with mkdir your-topic

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'

# Tip #4: Avoid IDE features

*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:

  • If your IDE create projects with whole bunch of files like .git/, .gitignore, package.json, .eslintrc etc., dont use that!
  • If your IDE has shortcuts to extract lines of codes into a function/variable/constants, don't use that!
  • If your IDE has shortcuts to run command in terminal, JUST RUN THE COMMAND IN THE TERMINAL!!!!

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.

# Tip #5: Make your code elegant!

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:

  1. Help you understand the problem better
  2. Help you to explain the code better
  3. Help your audience to understand easier
  4. Help you write better code in the future!

Here are some tips for simplifying code:

  1. Try to keep the indentation level low. Ideally no more than 4 indentation level. Each indentation level means an extra complexity. So try to eliminate the indentation level. For example, you can use guard clauses to eliminate the else block.
  2. Avoid for-i-loop i.e. for (let i = 0; i < length; i++). Use for-of loop or other higher level loops instead. Or if you really need the index, do Array.prototype.forEach and take the index as the second argument; this is preferable because we don't have to refer to our element with arr[i] but x directly. Use for (const [k, v] of Object.entries(obj)) to loop through the keys and values of an object.
  3. Use pure functions more, avoid side effects. Pure functions are so much easier to reason about and I can guarantee that your audience could follow much better!
  4. Avoid outdated features. You want to advocate good code and modern features. E.g. in Javascript, advocate the use of let and const, stop using var!

# Thank you

I hope my tips did help you for your next live-coding talk! Good luck and keep coding!