Mistakes

Mistakes is a tool for teaching Javascript to people, mostly on projectors.

You type Javascript on the left, and it echoes the results of an expression on the right, per-line. There’s not a lot of magic: it works as you’d expect, with eval(), slice(), and so on. The only nitpicky tweak required is to give eval scope, so that loops like for (var i = 0... don’t clobber the i variable that mistakes relies on.

It supports loading from GitHub Gists, using CORS. There’s also a require() function built in that takes a URL of a Javascript file and will include it for you to use. It’s not RequireJS: it’s much simpler.

There’s plenty of prior art: bl.ocks.org, tributary.io, and glsl sandbox all pull content from gists, and SLIME and others have pioneered the idea of running code while writing it. I find the mistakes system for this to be pretty intuitive: instead of having a magic keybinding to evaluate code and to have a mental model of what’s evaluated, it’s very simple: if you have the lines

var a = 1;
var b = 2;
a + b;

It simply evaluates them in order: line 0, line 0 to 1, line 0 to 2. For me, that’s pretty easy to think about and talk about.

If there’s a syntax error, nothing is printed. I could use something like Esprima to be smarter here, but it’s not the focus.

Same with sliders ala worrydream prototypes - we have a saying at MapBox when faced with abstractions of input (preprocessors, typing modes, so on): typing is not the problem.

Anyway, it’s a thing I wanted and it didn’t exist yet: there’s LightTable coming at some point, and plenty of things for doing JS, but mostly focused on Javascript that does stuff to pages, so aimed at demoing your new tab library and so on. This exists and is useful for demonstrating JS itself, explaining stuff like closures, callbacks, etc, in a useful way.

I’ve been using it to demonstrate JS gotchas, and teach tough concepts from d3, and more.

And so mistakes is a tool for teaching Javascript to people, mostly on projectors. Try it out.