June 9, 2011

Making Hackasaurus Remix Easier

I've been working on an experimental iteration in the X-Ray Goggles which addresses some problems we observed kids having with the Compose A Replacement (aka “remix”) dialog at the TEDx Kids Brussels 2011 event and other hack jams.

The current remix dialog looks like this when focused on a Facebook sidebar on the New York Times website:

There’s a number of problems with this dialog:

  • The HTML Source Code column isn’t formatted in a way that helps the reader understand much about the structure of a Web page.
  • Despite the syntax highlighting provided by Ace, it’s very easy for newcomers to struggle with HTML syntax, missing out on more important concepts (and more fun experimentation).
  • The What Your Browser Sees column is frequently overlooked by users; as such, it doesn’t effectively communicate the idea of a DOM hierarchy, and it also takes up lots of screen space.
  • The What You See column doesn’t inherit the CSS styling of the page being remixed, which is very confusing.

The Easy Remix Dialog is an attempt to resolve the above issues, inspired by the interfaces of tools like Scratch and Yahoo Pipes. Here’s what the new design looks like:

You can see it in action in the following silent screencast.

The video subtitles are courtesy of popcorn.js.

Try It Out

You can try out the two remix interfaces with the following steps:

  1. Install the goggles snapshot bookmarklet and activate it on any page (or just click the link to try them on this page).
  2. Hover your mouse over the element you’d like to remix. Use the up and down arrow keys to traverse up and down the DOM ancestors of the element if needed.
  3. Press R to use the current remix dialog.
  4. Press E to use the new remix dialog.

Limitations

The proposed remix interface isn’t yet finished, and has lots of rough edges. In particular:

  • It only works on Firefox 4, Chrome, and Safari.
  • It’s not possible to add or remove attributes.

Still, this solution is good enough to provide a general impression, and I’m interested to know what people think of the experimental new interface.

Let’s start by activating the X-Ray Goggles on The New York Times.
The Easy Remix Dialog is started by pressing the E key.
Clicking on a text node lets you change its content without accidentally breaking any HTML.
The source code view shows real HTML, formatted with colors and typography to make visible and intuitive concepts like the Document Object Model, elements, and attributes.
Let’s replace this headshot with a Twitter avatar.
As with text nodes, attributes can be edited without having to worry too much about proper syntax.
Elements can also be dragged and dropped to re-arrange them. They can even be moved across web pages.
Now we’ll click OK to bust the hack.

© Atul Varma 2021