Live-streaming a development process introduces some unique challenges. Aside from the obvious challenge of edutaining a large group of people (for potentially hours on end), you're also collaborating with them while doing your best to stay on task and not lose their focus either.
Here's a list of 5 extensions I've found extremely useful for overcoming those challenges.
1. Twitch Highlighter
This awesome extension (made during Live Coding streams by a fellow Live Coders teammate Clarkio) lets viewers help you debug your code — highlight lines with a simple chat command!
Missing a semi-colon? !line 36
.
2. Bracket Pair Colorizer 2
In a perfect world, your viewers could give you 100% of their attention 100% of the time. In reality, they're probably also working on their own projects, cooking, or second-screening at their desk. Help your viewers quickly parse what's going on at a glance and feel less disoriented when they look away for a few seconds, glance back, and a few parens or curlies moved around.
💡 PRO-TIP™ - Extensions that help viewers more easily spot syntax errors make it easier to mob-program and debug with your viewers!
3. TODO+
Keep track of current tasks, ideas, bugs you find, and more with this extremely useful but little-known extension. Shortcuts like alt+s
to start, alt+d
to mark as done, and alt+c
to cancel make TODO+ an easy to use task tracker. The extension also supports custom symbols for check boxes and custom-defined tags.
💡 PRO-TIP™ - Tracking stream tasks and progress in a list is a good Live Coding tactic. Viewers often drop-in mid stream and need help getting oriented and caught up. After the stream, use the list to write a recap blog.
4. Live Share
Pair program with guests on stream with Live Share! It's an excellent collaboration tool and a must have for every Live Coder's toolkit.
5. Comment Anchors
This is another useful (but little-known) tool to help viewers follow along and stay engaged. Comment Anchors supports custom tags and colors as well, so you can use them to label any sort of comment!
💡 PRO-TIP™ - If you feel lost during a stream, sift through Comment Anchor tags in the side bar for TODO's and refactor tasks you can focus on until you figure out what to do next!
EDIT: Honorable Mentions
I wanted to update this post with some great suggestions from the dev.to community in the comments below that I've adopted for regular use on Twitch.
Highlight Trailing Whitespaces & Indent Block Highlighting
Shoutout to Juan Carlos for these recommendations! Not only does this scratch a visual itch and keep code looking clean, but it's another thing viewers/chat can help out with (esp in Python where white-space matters!)
Snake Trail
Thanks Rich Somerfield for developing this extension. It's so purty!
Share your favs!
What are your favorite extensions for Live Coding?