Webmaker in 2013: Collaborative Tools - Popcorn Maker

Yesterday, Jess Klein and I demonstrated the power of modern web technology as a medium for prototyping ideas with the result of a 48-hour design sprint on ideas for next year’s Mozilla Webmaker offering. After some discussions with Jess and Chris Appleton — following work Jess and Brett Gaylor had done previously — I spent Monday putting together a branch of Popcorn Maker which prototypes collaboration.

For a more complete overview of the project and the ideas behind it, head over to Jess’s blog. She’s written a good explanation of the potential workflow for Webmaker.

https://github.com/secretrobotron/butter/tree/webmaker is a branch of Popcorn Maker which uses WebSockets (via socket.io) to connect multiple participants to a Popcorn Maker session.

A session consists of a host and one or more collaborators, where collaborators are invited by the host from within Popcorn Maker. Perhaps the user would like a second opinion on text placement on the timeline, or simply needs help learning how the timeline works. They can invite a friend to their session accomplish what they need.


Once a friend has joined the session, a chat window is active, enabling session-specific banter to take place. With this feature present, Popcorn Maker passes the obligatory “chat functionality in a websocket app” test.


Chatting about a project is somewhat useful, but we sought to deliver a more visceral collaborative learning experience. The host should be able to ask collaborators to help them use the application directly — not just talk about it. So, what does it mean for collaborator to move a track event in Popcorn Maker? Does Popcorn Maker react as Google Drive (formerly Google Docs) does, letting any qualified user manipulate content without permission? Or, is there perhaps an opportunity to let the host learn something by showing them how a collaborator interacted with the software? I chose to implement a form of the latter.

If the host manipulates aspects of the project, collaborators in the session see the same results immediately.

However, if a collaborator makes a change, the host is notified.

Then, the host is able to choose from a list of potentials for the track event that the collaborator changed.

The actions in this example are simple and limited, but the concept it exemplifies and the subsequent ideas about high-level collaboration it offers are interesting.

All the video content in this post is captured from live demos, so there is working code to support collaboration in a branch Popcorn Maker. However, it took a considerable effort to coerce the app to do my bidding. David Humphrey and I have already begun to discuss how Popcorn Maker’s code-base could benefit from a Command design pattern, encapsulating important actions available to the user as atomic units of functionality (great for implementing redo/undo, which Scott Downe and Mohammed Buttu have already started). I imagine that we’ll have to invent a hybrid system to do exactly what we need, and likely employ a model in which the app’s user is an implementation of an “actor”, abstracting interactions with the app’s core. Then, commands can be carried out by an actor, and most of Popcorn Maker needn’t care whether that actor is being controlled by someone sitting right at the computer, a user at the other end of a network connection, or even a script that was designed to give a tutorial.

Lots of exciting work to do in 2013.

  1. secretrobotron posted this


view archive

Ask me something.

Submit something.