Reveal.js: JavaScript presentations

By Max Thayer

I recently gave a talk at PyCon called "NLTK vs Twitter: A Voyage into Linguistic Frontiers". If you're into that kind of thing, check out the presentation. It was my first time speaking, and an absolute blast.

NLTK vs Twitter: A Voyage into Linguistic Frontiers

Hit 's' to see my speaker notes, which give you basically the full experience minus my nervous pauses

I made my slides using reveal.js, a framework in HTML, CSS, and JavaScript for "easily creating beautiful presentations." I'd seen it used elsewhere, and thought I'd give it a try. I was not disappointed:

  • Write your slides in HTML or Markdown; Reveal handles styling.
  • Customize with HTML classes and directives :D
  • Extend with JavaScript plugins. The built-in multiplex plugin lets your audience watch on devices like laptops, phones, tablets, etc., but their presentation changes with yours in real-time. Nifty, eh?

Since your presentation boils down to a bunch of static files, I decided to host it on Cloudant as a CouchApp. Since reveal.js is awesome, I want to show you how to do that too.

Reveal.js as a CouchApp

If you don't already have node.js installed, go do that. It's a super slick web server in JavaScript, and the backbone of the modern JavaScript ecosystem. Then, we'll use a Yeoman generator to build out our app for us:

npm install -g generator-reveal
mkdir YOUR_PRESENTATION && cd $_
yo reveal
# answer yeoman's questions

Doing up your presentation as a CouchApp will take some extra dependencies, which we'll install with this:

npm install couchapp grunt-couchapp --save-dev

Now, create app.js. It'll look like this:

var couchapp = require('couchapp')
  , path = require('path')
  , fs = require('fs');

ddoc = {
    _id: '_design/reveal'
  , views: {}
  , lists: {}
  , shows: {}
};

couchapp.loadAttachments(ddoc, __dirname);

module.exports = ddoc;

Next, modify Gruntfile.js. Add this to the end of the grunt.initConfig block, around line 52:

couchapp: require('./.couchapp.json')

That will call any configuration values from .couchapp.json, which of course we haven't created yet. Let's do that now:

touch .couchapp.json

Now let's fill it out with something like this, where anything like {THIS} is replaced with values specific to you, such as your Cloudant username, or what database you want the CouchApp to live in:

{
  "app": {
      "app": "./app.js",
      "db": "https://{USERNAME}:{PASSWORD}@{USERNAME}.cloudant.com/{DATABASE}"
  }
}

That's it! Now just run grunt build && grunt couchapp and grunt will push your presentation to the database you specified, outputting the URL where it now lives.

Create an account and try it yourself

Sign Up for Updates!

Recent Posts