Live Coding on Twitch

Information about my live coding stream...why I do it and how.

The Why

I've been trying to create some online video courses, but keep losing focus, and so end up on tangents of tangents. This obviously doesn't happen to me when I'm teaching a live class, or explaining something to someone in person. (Or if I do go off on a tangent, I don't stay there very long.)

After talking (whining?) about the difficulty in finding a person to collaborate with, a friend of mine suggested doing live coding as a way to have virtual collaborators. I thought that it was a great idea, because there's something about having someone observing what I'm doing, even if they're not really collaborating, that helps focus my mind. It gives me the feel of a real audience, something that seems harder for me to recreate when I'm creating my video courses.

While I've done a lot of recording of videos with ScreenFlow, and video creation with Final Cut Pro and Premiere Pro, I haven't done any broadcasting-like things, and, in fact, haven't really watched very much of them. I'll be blogging about my experience as a way to record my learning process, as I can't help but think about meta-learning.

The How

Platform: Twitch

Following in others' footsteps, e.g., Suz Hinton (@noopkat on Twitter and Twitch, who recently posted an update to her Twitch setup here), I've gotten myself set up on Twitch.tv using my nickname @Jitterted: https://twitch.tv/jitterted. I know that some folks use YouTube, but Twitch seems to make discoverability a bit easier.

The main problem with Twitch is that it's aimed at Gamers and not Coders. This means that there's only one category that makes sense to be put into and that's "Science & Technology". I get that use coding streamers are probably 0.01% of the Twitch streamers, but it'd be nice to have a "Programming" category.

You can schedule "Events", which "Followers" can subscribe to, but wow, Twitch's event support is the minimal possible implementation that'd work. You can't have regularly scheduled things (I do daily stuff and weekly stuff and it's a pain) and the UI for indicating the start/end time couldn't be less helpful, e.g., if you change the start date to, say Feb 19, it won't change the end date for you, so you have to manually change both dates.

Twitch Extensions

There's a whole world of Twitch extensions, but again, most of them are aimed at gamers. Lots of other coder streamers write their own extensions and I'll probably do the same. The main extension/service that I use is a chat window from HiDeoo here: https://github.com/HiDeoo/YaTA. Of the several that I tried, it's the nicest, but since it runs inside a browser window, I have issues getting it to be the right size.

Hardware: Mac

I'm using my main dev machine, which is a mid-2015 MacBook Pro (the last of the good MBPs, in my opinion). Here's the specs:

• MacBook Pro mid-2015 15" Retina display, 2.5GHz Intel Core i7
• GPU: Intel Iris Pro 1536 MB
• 16GB RAM, 512GB storage

Since it's very handy to run the broadcaster software on a separate screen, I use the awesome Luna Display that lets me use my iPad Air 2 as another screen. It's $80 and works with either the mini-displayport or USB-C (newer Macs).

I'll probably switch to using external monitors and sit at my desk, but it's been fun to broadcast from my couch!

Software Tools

OBS Studio (Open Broadcaster Software) is the king here. And, since I'm on a Mac, it's pretty much my only choice (other than expensive commercial products).

Getting the video resolutions correct is super annoying with a Retina screen, and the odd ratio of my screen doesn't fit well with the video standard 1080p (1920x1080). And I'm not sure if it's considered a bug in OBS, but OBS sees the native resolution of the screen as 2880x1800 instead of the apparent resolution of 1440x900.

Learning about Scenes was the next barrier, but mostly struggled because of the resolution that I wanted. I started out streaming at 1920x1200, but that ended up getting weird when I wanted to edit and upload videos to YouTube, so 1920x1080 is the output resolution that I use and that's scaled down from my "base" (or "canvas") resolution of 2880x1620. That also means that I don't show my entire screen, but that's fine, because then I can have windows on the right side that don't show up in the broadcast.

Scenes & Graphical Elements

When setting up the scenes, you'll probably have several and here's the ones I currently have:

1. Starting Soon: this is a short video loop that I use when I turn streaming on, but I'm not quite ready to start. Eventually I want this to be my Trello board, showing what I'll be working on in the episode, but haven't done that yet.
2. Main: this has my desktop, where my IDE and browser windows will show up. On the right I have a Java+Spring logo, the chat window, and my webcam view.
3. Break Time: just a simple graphic that I put up when I take my Pomodoro breaks. Doesn't show my webcam -- I'm on break!
4. Secret: I didn't think I'd need this, but then found that I did, so made a screen that has a big image and my webcam. I switch to this when I'm manipulating things like API keys or phone numbers that I don't want to broadcast to the world. Totally stole this from @noopkat! btw, be careful about clipboard managers, as you might have passwords or other keys in there.

So, you'll want to create images for the above (a logo, break time, secret, and starting soon), I've been using Canva and Piktochart to make these.

Post-Processing

OBS allows you to not only stream, but also record the video and save it locally. I do this so I can do some light editing (removing long pauses where I'm thinking, deleting the breaks, etc.). I have a standard Adobe Premiere Pro CC project where I have some intro music, opening title and narration (to introduce the episode), and ending music/credits. It currently takes me far too long to do this "light" editing, so I'm trying to avoid being a perfectionist about it.

Checklist

One thing that kept happening to me is that I'd forget to turn on local video recording, so editing was harder, or had my microphone muted, or got text messages on-screen while streaming, etc. So I finally created a checklist to make sure I didn't forget any of that. Here's mine, yours will obviously differ, but it's something to start with:

• Mic on when starting or resuming streaming
• Local recording on when starting
• Notifications off (do not disturb)
• Clear clipboard history
• Minimize windows with email or other sensitive tabs
• Start Pomodoro timer

Staying Sane

Stream Length

I'm sure I'll add more to this section, but figuring out your schedule and how much time to stream, while still having an operational brain, is important. Since I'm a freelance trainer, my time (when I'm not teaching a class) is my own, so I try to stream on a daily basis. I was doing 90 minute streams for a while, but felt like that wasn't long enough, so did an almost 3 hour stream, which was clearly too long. 2 hours of streaming, using Pomodoros (25 minutes of work, 5 minute breaks) has worked well for me, though I often overrun the pomodoro a bit and don't break each time for the full 5 minutes (I don't want to bore folks). So it ends up being more like 28 minutes of work and 3 minute breaks.

Episode Planning

I've been calling each time I stream an "episode", that way I can say "in episode 14 where I refactored blah blah blah". Helps keep me organized when I post-process and upload to YouTube. I started using "Season 1", but realized that didn't make much sense.

Since the streaming that I'm doing is creating a real application, I'm using Trello to keep track of the User Stories as well as other tasks. This means I generally know what I'm going to do next time, but don't really know much beyond the next episode since I don't know where I'll be at when I'm done for the day. In fact, what I thought would be only an episode or two, ended up being more than 4 episodes (crediting interest)! So when I create the schedule for events, I have a lot of "TBD" in there. Since I make my Trello board publicly viewable, that means interested folks can look to see what's coming up.

What's Next

I have more to say and will flesh out some of the details above with pictures, but wanted to get this up because it might be useful for folks.

If you want to be informed of when I update this post, write a new one, or schedule new coding stream events, click here or scroll to the bottom of this page to subscribe to my newsletter.