code-workshop-kit: a tool for remote code workshops

Challenges in online workshops

  • No response.
    When you ask a question to the room of online participants, you will likely find that it’s much less common for people to answer.
    Part of this is a lack of accountability and responsibility, since a participant is essentially invisible in a group of many other participants that might answer. Even when asking a participant by their name specifically, will sometimes leave an awkward silence, as you did not realize the person was at this moment grabbing a snack, a coffee, having a toilet break or busy shooing away their kids from their improvised home office.
  • Can you share your screen?
    Whenever one of your participants runs into an issue, especially if they’re not an expert at explaining code bugs/errors, you end up asking them to share their screen so you can look what’s going on.
    Apart from the time spent to share screens and get that working properly, you also distract everyone else in the meeting with the issue of that one participant. In a physical classroom, you can walk up, look over their shoulder, and whisper to help them out.
    This is much more welcoming than asking the participant to essentially broadcast their mistakes to the entire room. I have found that participants are far less likely to ask for help for this reason alone.

Finding a solution

  • Shared code: I need to be able to see and collaborate on the code of my participants.
  • Shared output: I need to be able to see the output that the code of the participant produces.
  • See the output of backend languages where the output is not a served web application or module
  • My participants will all have their own code, and therefore their own output. How do I easily distinguish and view a specific participant’s output?
  • Seeing an overview of all the outputs of the participants, so I can easily glance at all of them simultaneously to see if I find a participant who is lagging behind or stuck on something
  • See updates of the output whenever a participant saves a file inside their folder without refreshing the page

code-workshop-kit

  • Basic user authentication for participants and hosts
  • An overview page on which the output of every participant is aggregated to
  • Hot Module Replacement for frontend workshops
  • Follow-mode, allowing the host to switch pages on localhost and the participants’ URLs are updated to follow
  • An Admin-only UI bar for toggling dev server settings on the fly

How to use it

Frontend

Backend

Future

  • Leverage codespaces to allow participants to connect to a session from their browser, without needing to install VS Code & extensions
  • Collaborate with the live share team to further improve and suggest new features for their extension
  • Leverage the extensibility API of VS Code to further reduce the work needed to be done by the workshop host
  • Create more content on delivering high quality workshops, and supplying out of the box working setups for specific languages/frameworks

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store