Live Coding

Live Coding

I recently hosted my first live coding session on livecoding.tv. The session consisted of me coding a pair of Lightning Components that perform a search for Contact records. This post describes how I set up and then executed the live coding session.

Schedule It

Once I set up my account at livecoding.tv, I scheduled an event by adding a stream. Once this is done it will show up on the site’s schedule and people can plan to attend (I actually had to reschedule my initial time).

Scheduling a live coding session
Scheduling

Pre Set Up

To get set up for the initial streaming I followed the directions on the livecoding.tv streaming guide page.  First I downloaded and installed the streaming software to my computer. I used the recommended Open Broadcast Software (OBS) which works on Linux, Windows, and OSX and followed the directions in the guide.  When I signed up on livecoding.tv I got an email that contained an URL and a stream key. I needed those as part of the setup to be able to successfully connect. I performed a test stream an hour or so before it started just to make sure I had everything set up correctly and I deleted that video later. One thing of note is that you do not have to schedule a streaming session to do one. At any point you can just begin streaming from your channel and stop streaming and your session will be live and then saved as a video recording.

Live Coding

I scripted what I wanted to do and the order I wanted to do it in on a piece of paper to make sure that I stayed on track. I was very sure of what I wanted to do and it was very similar to code I had written before, so it only took about 15 minutes or so to come up with the script and refine it. I began by showing a wireframe that I made in OmniGraffle prior to the session and discussed what I was going to code. Having either the end product or a design that shows the end product can help put the code for the rest of the session in context.

OmniGraffle Design
OmniGraffle Design

After that, I jumped right into the code. I used the Developer Console with the paraiso-dark theme. The dark background is better for showing code and is easy on the eyes.

Developer Console
Developer Console

I coded all of the files from scratch, although I did have similar code done already and showing on another computer for my reference. One area I may explore in the future is having other pieces of the app (e.g., styling) completed prior to the session or even snippets of parts of individual files done and ready to paste in to the session.

I ran into to two code issues that I had to debug on the spot. Luckily neither one was that terrible, and I was able to get by them pretty quickly. There was a positive side effect, though. I was able to show how to use the Chrome JavaScript console to see JavaScript errors and I got to show how to insert a debugger statement in the code and step through Chrome’s interactive JavasScript debugger.

At the beginning, it seemed like I had some technical issues with the streaming software, though the recording ended up fine. I noticed that there are some other settings that can be fined tuned that are mentioned on the livecoding.tv support page, so I’ll play with those before my next session.

I could have spent hours more coding the app with various improvements, or showing how it could be used in a page, but I just wanted to focus on the core concepts. I made a point to discuss other possible enhancements that could be done along the way and at the end.

To wrap it up, I clicked the Stop Streaming button on OBS to end the streaming and got the Mac pinwheel (i.e. hourglass, working…, etc.). I’m not sure what was going on, but it seemed to still be working through something, so I let it go.

Conclusion

My initial live coding event was a blast for me to do. I had a lot of fun showing the concept from design through functioning app.  I plan on scheduling more sessions shortly, so be on the lookout.  The recording is here and my streaming channel is here.