CodeMirror Movie

Several third-party projects were created to create Emmet, which I will introduce you to in several posts on this blog.

The first thing I would like to introduce you to is CodeMirror Movie. You can see it on many pages of the documentation site: this is the very mechanism that shows interactive presentations.

When I first started working on the documentation, I wanted to more clearly show how Emmet actions work. It is always boring and tiring to read long texts describing the features of the work, it is much more pleasant to watch how it works “live”.

Usually such tasks are solved by recording video clips, but this option did not suit me for many reasons:

Recording a quality video takes too long. For example, it took me about four hours to create a six-minute video about Zen Coding v0.5. The videos are quite difficult to update. For example, if an error is found or users do not understand how an action works, most likely it will take several more hours to re-record the video. Since Emmet itself is written in pure JS (which means it works in browsers), I wanted users not only to see how Emmet works, but also to try it in action right on the documentation pages.

To solve these and many other problems, CodeMirror Movie was created. The principle of its operation is quite simple: you create a small script in which you indicate what to do, for example, write a text, wait a little, and then show a tooltip.

As you might guess from the name, the project is based on the wonderful CodeMirror editor, which means that you can create presentations for any programming language that this editor supports.