Edit 1/20/2023
This blog was written in 2019 when I was live coding on Twitch.tv. I have not done this in many years and have updated parts of this entry to include the original text but with
strikethroughwhere appropraite.
Many programmers, open source developers, hardware gurus and IoT master minds have been taking their craft to online streaming platforms such as Twitch.tv to share with the world what they are doing. Some people are running their live coding sessions as a tutorial and others are just coding. People are watching, and it is really fascinating to watch how other people write software. I have become a big fan of watching other people program as it gives insights into how others solve problems and how I can solve problems in my own projects. This is really a lot different than watching a User Group Live Coding demo. Nothing is prepared ahead of time and it is real world problem solving.
I have been following my friend James Montemagno as he has started his own Live Coding Stream channel on Twitch.tv and have enjoyed watching it evolve. I have become a really big fan of watching Live Coders as it helps me learn new techniques and tricks that people use in the field for their projects. James has inspired me to start my own Live Coding channel on Twitch.tv which is a big step outside my comfort zone. I have done many presentations for companies I have worked for, User Groups, Conferences, Online and in person. Every time I do a presentation it is prepared and scripted to demonostrate the topic effectively which is not the case in a Live Coding Stream.
The other weekend I did my first Live Coding Stream (March 10th, 2019) where I worked on a Pull Request that I submited to .NET Core. Shameless shoutout to new features coming to .NET Core:
My Twitch.tv Channel
Interested in my channel? Go and click on the stream below or navigate straight to the channel to interact in the channel.~~
Schedule: Mondays: 4PM EST/ 1PM PST
My First Live Coding Stream
Equipment
I am constantly comparing blogging notes with my good college friend Halee Whiting who runs a popular travel blog Halee with a Flair, you should check it out! She is constantly running live streams on periscope of her travel trips. As Live Coding Streams have become more popular I’m getting a lot of inspiration from every angle to try it myself. Before I started slinging code online, I reached out to my twitter network to ask James what he uses and what he recommended for me to get started. I really had no idea what I was getting myself into including any software I would need to stream.
Here is my stream setup info: https://t.co/f03ZKdRBpB
— James Montemagno (@JamesMontemagno) March 9, 2019
I quickly learned I could give it a try with a very low financial commitment. All I really needed was a laptop and fast internet connection. I work remotely so I am used to being on video calls all day. While I don’t have any fancy equipment my conference phone or on board microphone from my laptop work very well for what I do. There is no fancy microphone, webcam and no StreamDeck (maybe one day). All I used was my Microsoft Surface Book 2 and some Open Source Software.
| Laptop | Microsoft Surface Book 2 |
| Pretzel Rocks | Background Music that integrates with Twitch |
| Powerpoint | Useful for Stream Starting Soon & Offline messages |
| Streaming Software | Streamlabs OBS |
| Time | Stream configuration |
Retrospective
My first stream has came and gone and it was a nerve racking experience, it probably didn’t help that I worked on .NET Core (CoreCLR/CoreFX) changes. I was happy to pick that topic since it was real world Open Source code I was working on at the time. The development experience for this, is kind of complicated. But I wanted my stream to be as real as possible, solving Open Source Problems and letting people watch my process live. Everything was thrown together last minute because I wanted to see if it is something I wanted to commit to. I spent about 60 minutes configuring my OBS Stream as I got ready.
Getting Started
Just like when I start any presentation or User Group meeting, I was nervous and uncertain. After a few minutes things started to come naturally as I can talk for hours, I just needed to get started. A big difference I found was some presentations I give I have a certain level of excitment and enthusiasm. While I was still realy excited about this topic, a lot of my energy was focused on reading code and understanding my next step. In a Live Coding Presentation it is still scripted even though I am demonstrating a Live Code which is completly different from Live Coding Streaming where I have no idea what I am going to see next on the screen. When presenting I have a specific procedure and set of steps I follow to complete the task. I usually run through this several times to work out any issues so the presentation goes smoothly.
The first half of the Live Coding Session went really well, I even got an awesome shout out on Twitter from James which brought in several live viewers. They even helped me work through the problem when I got stuck and I had the opportunity to interact with my chat room asking them if they saw an answer before I solved it. Live Coding streamers have a unique opportunity to teach and interact with their audience in a way you typically wouldn’t have when writing software by yourself.
I Got Stuck
The first half of the Live Coding Session went really well, everything was moving smoothly until I wrote some code that broke a bunch of unit tests. Since my setup for this particular project didn’t allow me to run a debugger or even leverage the Visual Studio Test Explorer I was stuck reading console outputs. Building and running unit tests took me about 10-20 seconds to run, but since we found errors with these failing tests we needed to run a build of the core project. This is a proecess that typically takes 5 minutes on my machine. This being my first stream using OBS I ran into significant performance issues where the build now took about 15-20 minutes to run. I needed to be very careful on any change I made because it would take a long time and I could potentially lose any viewer engagement I had.
I took my time, read the code and really tried to analyze what was wrong talking outloud through my thought process. I even asked the 5 viewers we had if they had any ideas. We were all kind of upset that I couldn’t just use the debugger. When I realized the problem, I was mad at myself because it was something that should not have been missed. The test code was validating if an event was fired correctly, but the setup code was firing the event many times which was showing a false negative causing the tests the fail. Realizing my mistake I asked the channel again if anyone else found the problem with my code. I got a couple no’s and walked through the solution of why it was wrong and how we were going to fix it. After the new build which took about 20 minutes to run, all the tests passed! I made it out of something I was worried was going to end my stream early.
Actionable Follow-Up
I was really expecting my first stream to be empty and just me talking to myself for 2 hours of coding while listening to background music. After the stream, many of the people that watched live immediately followed me and started reaching out on twitter, asking when I plan to start doing them regularly. As a Software Developer I am constantly in and out of Sprint Retrospective meetings where we put together what went well and what could use improvement. I never say things went bad, because they are always learning experiences that we can improve on.
| What Went Well | Needs Improvement |
|---|---|
| Chat Interactions | Stream Quality - I didn’t use overlays, or scenes correctly |
| 3-8 Live Viewers | OBS should be hosted on separate machine |
| 8 Followers! | Adjust microphone to reduce background |
| Time frame (1-2 hours is good) | I need to setup chat bot to make the stream more interactive |
| Raw Content | Overlay Events Missing |
A Huge Success
Overall my first Live Coding stream was a huge success! Afterwards I spent some time thinking about what went well and what I needed to work on. I asked questions such as:
- Did I go too long?
- Is 2 hours really the right amount of time, should I have gone shorter?
- Could people understand me or what I was trying to accomplish?
- Did I pick an easy task or a hard task?
- Was I talking to softly?
- Was I talking enough?
My list started to grow out of control as I am very critical of myself in everything I do. I originally walked away thinking:
- I don’t know if I want to do this once a week
After more thought, I believe that is just the fear and nerves talking as I worked on some pretty complex Open Source Software. I need to stick with Live Coding for 2-4 months to be able to make any decision on if it is right for me. At the time of writing this article I am really excited for my next 2-4 months of Live Coding and what it will bring for me. I hope it brings personal development growth in public speaking and teaching.
New Setup
Since the dust has settled from my first Live Coding Stream I started working hard on putting together a more customized setup. I am still using my Microsoft Surface Book 2 and not buying a new web camera or microphone (yet!). I still needed to change things around to make the most effective use of my resources to produce the highest quality Live Coding Stream I can.
OBS and 2 Laptops
OBS drained my Microsoft Surface Book 2 to a point where a build time went from 5 minutes to 20 minutes, that is unacceptable. If I continued with this setup I would struggle retaining viewers and followers so something had to be done. When streaming using a tool like OBS it still requires a lot of processing power and it was recommended to me to use a 2nd machine. As a mobile developer I am constantly flipping between my Windows Machine and my MacOS machine. Using the mac will make a great broadcast machine while I do the majority of my development on my windows machine. But how do you connect them together?
I found this amazing Open Source Library that allows me to configure OBS to use NDI Streams over my local network. This means I can easily “cast” my windows machine to my mac and save all of my processing power.
The NewTek NDI Tools for windows are great and are very simple to use. I just launch the program and it runs in the background. I can get all the configuration I need from a system tray to specify web camera settings, audio and even microphone settings.
OBS Output Resolution
If you watch the playback of my first stream which we referenced at the beginning you’ll notice there are black vertical bars on both sides of the video. This is because I was not outputing my video at 1080p which is supported in Twitch and I was just wasting space. The default output resolution was not covering the entire screen and it needed to be udpated for twitch. I couldn’t find any documentation on twitch for recommended resolution, there was plenty of docs available for bitrates and compression.
To access the settings go to Settings->Video
Once this was updated to look like the screenshot above, I tested it with Twitch and my stream was using the correct resolution. Unfortunately I realized this after I built a bunch of custom overlays and scenes inside of OBS which I needed to go an update for full 1080p.
Research, Research, Research
I started researching everything I could, and while I already watched some Live Coders I started watching more to get ideas and inspiration for my stream. Suz Hinton has an amazing blog on getting started with streaming using OBS and Twitch. I started getting a lot of ideas on how to complete my setup from her. Which includes great ideas on organizing all of my scenes.
https://medium.com/@suzhinton/my-twitch-live-coding-setup-b2516672fb21
When organizing my scenes I create a series of child scenes or group scenes that can be used in any scene. This allows me to have a shared scene to create a common overlay between different views the user will see. For example I may be switching between my mac and windows machine and the overlay should look consistent.
Another Live Coding Stream I instantly fell in love with was https://www.twitch.tv/ninjabunny9000. I really enjoy how the overlay is used with windowed portions of her desktop. This prevents the entire desktop from being shown and just showing the viewers what you want them to see. Her layout also has a special section for a terminal which nicely ties everything together. My overlay isn’t going to look as nice as this but I may update it one day to follow a similar pattern for mobile development.
Channel Customization
Twitch allows their streamers to really customize their channel and set themself apart from other streamers. This almost reminds me of the early days of MySpace where I can do anything I want on my page. I don’t have much yet, but a few tiles that describe who I am and what my stream is about.
As I started customizing my channel I started sharing my progress on twitter as I get ready for my first Monday Stream. I was surprised at some of the support I was starting to get from the twitch community, which seems to be a very supportive group of streamers. Everyone wants to see each other succeed.
Events and Alerts
This is technically all apart of Customization of my setup but it is important enough to call out separately. During my first stream it was just a screen share and web camera and I got 8 followers! I did not know who started following me during the stream and which means I couldn’t really interact with them. Something that 100% needs be fixed and done before my next stream. I am planning to give all my followers a shout out at the beginning of my next stream since I missed it. Some of them have already been interacting with me on twitter and are excited for the next one.
Streamlabs
If you are getting into any type of Live Streaming you really need to take a look at streamlabs. If you are running your OBS on a windows machine they even have their own custom branded version of the software. Unfortunately I plan to run OBS from my mac and I used the standard version of OBS. Streamlabs understands this is a common use case and many of their tools and widgets can still be integrated with little work. If you look at my overlay from above I have things such as:
- Live Viewer Count
- Chat Box
- Latest Followers
- Alerts (something you don’t see)
All of these tools are just simple web pages that render in an OBS Scene, which means I just add them using the browser feature of OBS.
Coding and Streaming
Becoming a Live Coding Streamer on Twitch has been a wonderful experience and I am recommending to all my friends regardless of level to try it out. It has also been a great experience putting all of my thoughts on paper, as I plan to do a follow up blog in 2-4 months when I re-evaluate if I will be continueing to see what has changed and what I have learned.
Until then you can find me Mondays at 4pm EST / 1pm PST on twitch @ twitch.tv/SkyeTheDev
-Happy Coding