Recently I was asked to run a workshop on ES6 at CodeHub Bristol, a great meetup you should definitely check out if you’re ever in the south west. Having done a few workshops in person I wanted to try something different in order to see if I could fix some of the problems I’d come across in previous workshops, such as attendee’s computers not playing with the software. To do this I built an online environment for the attendees to work with. If you’re eager to try it out or explore the code, it’s all on GitHub.
Problems with Workshops
From experience running some workshops in the past, there’s some issues that tend to surface pretty consistently:
- there’s always at least one person who has an issue with their environment on the day. This isn’t their fault, but nearly always we lose time to a weird npm install issue or something that just won’t play ball.
- It can be difficult to distribute the workshop materials ahead of time; despite all your emails about what to do ahead of time you can be certain not everyone will.
- when you’ve assigned the students a project to work on it’s difficult to know when they are all finished, or when you should move on. I’m always worried about moving too quickly, or not spotting someone who needs an extra hand.
How the app works
I’m currently working on adding service worker support, which would enable users to continue to go through the workshop even if the WiFi drops (a common issue at workshops which I’m sure many of you have come across!). Service workers were a huge feature of the 2015 Chrome Dev Summit and you can check out an introduction to Service Workers on HTML5 Rocks. Service works run in the background of your browser and enable access to features including caching, push notifications and more. We are able to intercept network requests and respond with cached assets, meaning the user doesn’t need to be constantly online. If they visit the page once with WiFi, but come back later when they are offline, the service worker will serve up the cache and the site will still work.
To solve the problem of not knowing when a student has completed a task, and allowing a student to make a request for help I reached for the Pusher JS library. Every time the user runs a challenge, the results are sent using client events over a Pusher channel. There’s then a dashboard view that logs every user’s progress as they make their way through the challenges.
Additionally, the student can hit the “help me” button to send a request for help, which includes the last challenge they ran and the state of their code. This isn’t anonymous, such that the person running the workshop can then go and help them.
There’s loads of potential improvements that could be made to the web app, and if you’ve ever run or attended a workshop, I’d love to hear your pain points. I’m keen to continue working on this app to make it a viable alternative to the traditional set up of running code on each person’s machine.