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?
Top comments (15)
These are peak! Giving indent highlighter and trailing white space a test run tonight on stream. Thx for the suggestions!
I've updated the article to add a few of your suggestions as honorable mentions. Thanks! :D
Hi
Thanks a lot for this great article.
A update about Live Share : this is yet buggy extension. I use it a lot for my training courses, and my students and me have seen some hard buggy (for example : showing good directory list, ...)
Oh no! Still buggy? That's a bummer. I know it used to be REALLY bad.. and it's definitely gotten better. I haven't run into any issues myself recently, but if it's not good enough for training/courses, that's a big red flag. Hopefully they take of these issues soon! It otherwise has so much potential!
(Self promotion..)
Snake Trail: marketplace.visualstudio.com/items...
WHOA!! This is awesome! I might try this out during a stream. Ty for the suggestion and contribution to the extension community! <3
Thanks. :)
I've updated the article to add your extension as an honorable mentions. Thanks! :D
Awesome tips! I got mad respect for live coders!
Preview on Web Browser -perfect for html, css development-
Bookmarks
Night Owl
Vscode pdf
😍 Bookmarks!! Such great extensions!
Thanks for sharing, I love the Comment Anchors and the TODO+ :)
Nice post. Thank you!
Maybe you will also like the VSCode extension "Blockman". It highlights nested code blocks based on curly/square/round brackets, html/xml tags and Python/Yaml indentation. (I am the author of Blockman).
.
i.ibb.co/31F0rm9/vscode-blockman-i...
.
.