February 24th, 2013
During Emmet project development, I’ve created a few open-source tools and I’d like to introduce them to you.
When I started working on the documentation, I wanted to demonstrate all Emmet features in a more descriptive manner. Reading long texts describing how actions work is always boring and tedious, it is much more better to see “live” how they work.
Usually, developers record videos with demos, but it’s not my case for many reasons:
- Recording a high-quality video takes too much time. For example, it took me about four hours to create a six-minute video about Zen Coding v0.5.
- The video is hard to update. For example, if someone finds errors or users will not understand how action works, it’s likely required to create a new movie.
To solve these and other problems, I’ve created CodeMirror Movie plugin. It’s pretty easy to use it: you create a small script, which defines what should be done by plugin. For example, ”write the text, wait a moment, and then show the tooltip on current caret position”.
As you can guess from the plugin name, it is based on amazing CodeMirror editor, which means that you can create demos for any programming language supported by this editor.
Creating a movie
Usually, to create CodeMirror editor instance you create a
<textarea> element with the initial contents of the editor and call the following JS code:
var myCodeMirror = CodeMirror.fromTextArea(myTextArea);
To create a movie, you need to create a
<textarea> too with initial contents and movie scenario, separated by
<textarea id="code"> <div class="content"> | </div> @@@ type: Hello world wait: 1000 tooltip: Sample tooltip </textarea>
To initialize the movie, you should call
CodeMirror.movie() method and pass
<textarea> ID (or element reference) as the first argument:
var movie = CodeMirror.movie('code'); // start playback movie.play();
As noted above, to create a movie you need to write its scenario.
A scenario is a list of commands to be executed. Each command is written on a separate line in the
name: value form. The value can be written as JS object with command options, but each command has a pretty good default values so you can pass just a string value of the most important option. For example, the following scenario tells CodeMirror Movie to type “Hello world”, then to wait for a second and show “CodeMirror rocks!” tooltip:
type: Hello world wait: 1000 tooltip: CodeMirror rocks!
For more info about all available scenario commands and examples visit plugin page. You can use this plugin whatever you like (MIT license). It looks especially great in JS-based presentation engines like impress.js or reveal.js. I hope you’ll enjoy it!