Optimized CodeMirror with RequireJS AMD modules

CodeMirror is a great JavaScript library if you want to have a syntax-highlighted text area in a web page, but if you’re using AMD modules and want to use a compressed version, such as one from their minification helper on the CodeMirror site, you’re going to have a bad time. More specifically, you will get a mismatched anonymous define() modules error.

The first part of the solution is to build your own minified file using RequireJS’s optimizer, r.js. Download the files you want, making sure to keep the files in the proper folder structure (e.g. codemirror.js needs to be in its lib/ folder). Then us r.js with the modules you want to use. You don’t need to specify the core codemirror.js file to include, as r.js gathers dependencies automatically. For example:

//build.js
({ 
 out: 'codemirror-html.js',
 include: ['mode/htmlmixed/htmlmixed']
})
//command line:
node path/to/r.js -o build.js
//folder structure where command is ran from:
build.js
lib/codemirror.js
mode/css/css.js
mode/htmlmixed/htmlmixed.js
mode/javascript/javascript.js
mode/xml/xml.js

Now, you will get a nice codemirror-html.js file that defines AMD modules nicely. To use the modules, you need to first require your new optimized file which will define the modules. Wrap the require of the modules to use in a require of the codemirror-html to ensure it is loaded first, so RequireJS doesn’t try to find the modules as path names:

require(['codemirror-html'], function() {
  require(['lib/codemirror', 'mode/htmlmixed/htmlmixed'], function(codeMirror) {
    codeMirror.fromTextArea(...
  });
});
// your data-main file (optional - you could just write the full path in the outer require above)
requirejs.config({
 paths: {
 'codemirror-html': 'path/to/codemirror-html' // leave off the .js from the filename
 }
});

And that should work! At least it does for me.

FacebookTwitterGoogle+RedditShare

Arpeggio Screensaver

So on Khan Academy, I created one of those classic screensavers with the object that bounces off the sides of the screen. The object is a basic music staff with four notes making an Em chord arpeggio (assume treble clef). For a bonus, the background color morphs randomly. Also, click anywhere to make the staff move to your click position.

Oh, for that moment when the staff hits exactly in the corner!

Follow the title link below to see the code, and edit it as a Spin-off if you want.

Arpeggio Screensaver

Made using: Khan Academy Computer Science.