I recently wrote about a talk I gave at the Mozilla Summit on What Mozilla Can Learn From 826 National. Shortly after my presentation, Mark Surman dared me to teach a class on Web hacking for non-techies at the Peer 2 Peer University School of Webcraft, which got me thinking about how I’d teach a class in such a distance-learning environment.
My favorite kind of teaching is face-to-face, one-on-one mentoring. I think it works well because teacher and student have easy access to each others’ “state”: they can see what each other are working on, and infer how they’re feeling based on body language and other non-verbal cues. This makes it much easier for a teacher to gain insight on a student’s thought processes.
So at the very least, I needed a tool allowing HTML to be written and rendered collaboratively in real-time. I also wanted to prototype a solution as fast as possible, so I could quickly iterate, learn from my mistakes, and respond to the needs of my students.
Tools
The simplest and most effective collaborative environment I knew of at the time was called Etherpad, which allows non-technical users to easily collaborate on simple documents, or pads, in real-time. No “saving” is necessary because every keystroke is remembered and the whole pad is undoable back to the moment of its creation.
Etherpad lets you create a pad by just inventing your own URL. For instance, if you want to create a pad called hai2u on Mozilla’s Etherpad server, you can just visit etherpad.mozilla.org:9000/hai2u and then share the link with friends to work on it together in real-time.
The fundamental fabric of the Web—HTML, JavaScript, and CSS—is all plain text, so Etherpad had enough functionality to serve as a source code editor. The only other thing I needed was a way to get the user’s browser to render and execute that code, instead of just treating it as plain text.
So I bought the htmlpad.org domain and set it up with a few lines of Python to essentially serve as a HTML “viewer” for pads on Mozilla’s Etherpad server. The aforementioned hai2u, for instance, could now be viewed at htmlpad.org/hai2u.
It was far from ideal; I’d actually tried setting up Etherpad on my own server so I could modify its user interface to make this process much simpler, but ran into technical problems as Etherpad required more memory than my server had. Still, the simple hack would allow students to experiment with HTML in one browser window and view it in another, collaborate or receive assistance in real-time, and instantly share their work with friends, which was good enough.
Now all I needed were some students.
Guinea Pigs
The awesome Mozilla community engagement team has bi-weekly meetings to discuss things like local community events and the latest fundraising, download, and education campaigns. I noticed, though, that they used Keynote to create presentations that were uploaded to SlideShare and only viewable with the Flash plugin. Besides requiring proprietary technologies, it was just a crummy user experience.
Aside from that, our engagement team isn’t comprised of techies, which made them an excellent specimen for my pedagogical experiment. If the Web is so great because it’s open and hackable and remixable, then surely they wouldn’t mind doing their slides using HTML, right? I had my own doubts about this theory, but I wanted to try it out.
I hastily grabbed screenshots of their Keynote template, combined them with the hacked-up JavaScript from my Summit presentation, and cobbled together a makeshift template. Then I scheduled a meeting with the engagement team.
Teaching them how to write HTML at the meeting was easy—they’d all had at least a little experience with it before. Also interesting were my answers to their questions on how to do specific things: most of the time, I just told them to find another slide that did what they wanted, copy its code, paste it into a new slide, and modify it as necessary. I’ve read about the power of the browser’s View Source feature, but actually seeing it used by non-engineers was inspiring. And perhaps it was just because they were part of Mozilla, but it was great to see them having fun hacking on HTML.
Before leaving the meeting, my coworker Mary Colvig wrote up instructions for the rest of the engagement team to use. That evening, some people who hadn’t been able to make the meeting tried things out for themselves.
When I looked at the first slide of my template the next day, it had changed:
This is why I like making things for people.
Remixes
The engagement team used my hacked-up template for their July 28 meeting, but after that I worked with Sean Martell to make one that didn’t suck.
Paul Rouget and the European engagement team later used htmlpad.org and the slides to do some amazing things. Because we now had an easy way to play with the very fabric of the Web, we could start using all its awesome power in our own meetings. In particular, Paul hooked up WebSockets, a chat widget, and open video to create a fully synchronized experience that allowed people to see the meeting’s video, the current HTML slide, and chat with other participants at the same time.
Drumbeats
Mark Surman has recently put me in touch with Ari Bader-Natal, the creator of sketchpad.cc, which is a beautiful Etherpad-powered collaboration and learning environment for processing.js. I’m hoping to work with him to vastly improve htmlpad.org.
The amazing Anant Narayanan also joined us at Mozilla at the beginning of October, and I’m working with him to push forward experimentation with webcam and microphone input, so we can make our meetings even more participatory while also moving the Web platform forward.
I’m also looking forward to working with Ingrid Erickson and Taylor Bayless at the Drumbeat Festival to build something that makes it easy and fun for newcomers to learn and hack together on the Open Web—perhaps it will build upon htmlpad.org or the Open Web Challenges that I made for my Design Challenge Tutorials, or maybe it will be something completely different.
Either way, I’m excited.