The Open Web is cool :). One of the things I most enjoy about modern web development is that so much of the code is open and able to be mashed together.

We were talking in the office about collaborative editing. I remembered having seen a link to Mozilla’s Tow Truck, and thought I should try it out.

TowTruck gives users of a website the ability to collaborate on using the site. You can see where your friend’s mouse is, it’s got built-in text- and voice-chat and changes to page state are mirrored.

It’s really simple to get started: all the local smarts are in a single JavaScript file, and Mozilla runs a service which you can use freely. All the source is available so you can run your own server if you’d prefer. This means that you don’t have to install any software locally: a simple example of a TowTruck-using page is only a few lines long:

<html>
  <head>
    <title>TowTruck</title>
    <script src="https://towtruck.mozillalabs.com/towtruck.js"></script>
  </head>
  <body>
    <button onclick="TowTruck(this); return false;">Start TowTruck</button><br>
    <textarea spellcheck="false" style="width:100%; height:100%"></textarea>
  </body>
</html>

I’ve put this page online, so you can try it out. Click the button, then share the link with a friend or open it yourself in a separate tab or a different browser. When you edit text in the textarea, your changes will be mirrored.

Having come this far, I thought I could take it a bit further – we can edit text together at the moment, but we can’t save what we’ve written. Hastebin is an open-source paste server. I’ve got a (private) instance of this running, and I don’t make much use of the Twitter integration, so I decided to replace it with TowTruck integration. It really is as simple as adding the <script> tag to the HTML and changing the JavaScript to call TowTruck(this) instead of opening a new window to Twitter. I’ve pushed my modifications to GitHub. Now I’ve got a collaborative environment where I can save what we’re working on. There aren’t any sophisticated security controls – if you know the URL, you can view the document – but it took me less time to set up than it did to write about it afterwards, and I think that’s pretty cool :).

blog comments powered by Disqus