Code.Movie

Blog / Substantial playground upgrades

The Code.Movie playground has been upgraded to support more decoration types and show accurate previews in the editor panel. Code.Movie is a JavaScript library that animates source code for the web - imagine a combination of git diffs, virtual DOM diffing, syntax highlighting, code annotations and CSS animations.

[]

["World"]

["Hello", "World"]

[
  "Hello",
  "World"
]

[
  "World",
  "Hello"
]

New playground feature: full animation preview in editors

In a misguided (and, as it turns out, entirely unnecessary attempt at performance optimization) editors in previous iterations of the playground did not accurately reflect the look of the finished animation. Now every editor's contents looks like its corresponding frame:

This not only looks better, but also helps when tweaking themes.

New playground feature: full support for all decoration types

Where the playground previously only supported two sub-types of text decorations, it now comes with support for three types of text decorations and three types of line decorations:

Editing decorations works just like text formatting does in a word processor: select text, click the button, done. Text decorations apply to the selected characters, while line decorations apply to the entirety of all affected lines.

There is even a very rudimentary UI for adding gutter decorations. Click any of the cells in the gutter to be greeted with a dialog for setting the gutter decoration:

This UI will probably be replaced with a less embarrassing emoji picker sometime soon. Its also worth noting that the theming options for line decorations are currently quite limited (and non-existent for gutter decorations), but this too could change in short order.

Other changes

• Previously broken "Copy to clipboard" buttons in the "embed and export" now work as expected
• Dismissing the language selection dialog does now actually not select a new language