cool tech graphics

Hackathon Collaboration with Live Share on Visual Studio

Filed under:

One of the challenges of participating remotely in a Hackathon is the ability to cooperate with your team in anything like being there in person. No looking over someone's shoulder. No borrowing the keyboard to fill in a bit of code while the other person looks up something. Slack for chat seems omnipresent these days, but it's not great for interactive coding with someone else. Sharing code using the same repo, and using Zoom for screen sharing and watching one another help to an extent, but they're both lacking that same sense of immediacy and interactivity.

Enter Microsoft's Visual Studio Code and the Live Share tool. There's a how-to available on Microsoft's documentation site for people who want to skip to the chase and try it out. If you haven't used Visual Studio Code before, it's a free, cross-platform (Windows, Mac, and Linux) editor and debugging environment. It supports many different languages, and it has a very extensible environment, AZURE and AWS support, and support for containers. The Live Share tool is an optional extension which one of our teammates had used before, and he recommended we try it out for this Hackathon.

Here's what made it a great tool for us:

We kept a Zoom session going for most of the Hackathon, and we did use it to share our screens with one of the non-coders working with us. But watching someone else coding, and in particular coding in a language that two of us weren't particularly familiar with, can be a frustrating experience. I both wanted to follow them for some of the time, and at other times page through the current file, or even the project, they were working on, to better understand what they were trying to do. Live Share first shared the project folder they were working on from their computer, and made it visible in Visual Studio Code on my computer. I could watch what they were typing as they typed, as well as looking through the other files on the project at my leisure. Even better, I could make my own changes to the files in question where warranted. But it got better from there.

By default, Live Share follows what the Host is doing, but it's not required, and after a while, it's likely that people will be looking at other things. The Focus feature sends an alert to everyone in the session asking that they follow the signaler, making it simple to find where they are and watch what they're doing. This prevents lost time while everyone tries to find what the 'presenter' is working. The person hosting the session can also share a terminal they're running in Visual Studio Code, letting people follow along at the shell level. (They can even, with certain permissions, be allowed to type in the shell, allowing further multitasking.) The built-in Visual Studio Code debugging functions are also shared, so anything that can be debugged in Visual Studio Code can be followed along by other participants.

The final very cool thing we used was shared servers. Our session host was running a local web server on their computer. Normally it would be difficult to get access to this server for debugging and testing from a remote location. Instead of having to do this setup manually, or set up a shared test environment elsewhere, Live Share uses SSH tunneling to make that server available to other people in the session. I was able to access the test server by going to http://localhost:3000/ and it worked as expected. It wasn't quite as quick as running a local server, but it was vastly easier, and kept the focus on the project rather than on overhead.

There are some drawbacks. The built-in chat client isn't as good as Slack, and it doesn't have voice chat or video. You'll have to use Visual Studio Code or Visual Studio, and if those aren't your preferred editor, the interface can be somewhat clunky. You'll also need an account (Microsoft, Github, or Outlook), though Microsoft claims they're not using it for marketing or other research activities.

I also found that having more than two people in a coding session is somewhat awkward. With two, there's a natural following of attention and give-and-take. With three or more in the session, there was a tendency to have a primary person for a long period of time, and a second person primarily paying attention to them, and after that, attention tended to get split away. The Focus feature helps quite a bit with that, but it's not perfect. It also requires participants who can set up and navigate Visual Studio Code and the Live Share tool, which makes it somewhat less helpful for non-coders participating in other roles in a Hackathon.

Those drawbacks aside, I came away from the Hackathon both having learned quite a bit about our project, and with the determination to use Live Share for any pairing I might want to do in the future.

Date posted: May 15, 2020

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <cpp>, <java>, <php>. The supported tag styles are: <foo>, [foo].
  • Web page addresses and email addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Metal Toad is an Advanced AWS Consulting Partner. Learn more about our AWS Managed Services

About the Author

Michael Ellis, Senior Cloud Engineer

Michael Ellis is a Senior Cloud Engineer

Have questions?