Deck.js is a modern presentation framework for creating interactive HTML-based interactive slide decks. The framework provides:
- A basic boilerplate.
- CSS themes.
- Extensions including a menu, “go to” button, transitions, etc.
To create a presentation, simply edit the HTML files and host a static website and you have an auto-magic slide deck, available to the world.
I have now done a couple of deck.js-based presentations, and find it incredibly useful, but noticed I was re-implementing the same scaffolding enhancements. I wrapped up these common enhancements in a GitHub project, Deck.js Starter. The notable enhancements the starter kit has are:
- Jade templates with Markdown support for faster slide authoring.
- Executable CoffeeScript code snippets via some specific tweaks I made to the CodeMirror deck.js extension.
Essentially, you can download and install the starter kit, and just start authoring new slides. The starting deck provides a short demo and is available at:
![Deck.js Starter][img_ds_demo] [img_ds_demo]: http://loose-bits.com/media/img/2012/11/05/deck_slides.png
Getting up to speed deck.js is pretty straightforward: check out a tutorial / exemplary demo or dive right into the docs or wiki. After the basics are mastered, there are plenty of avenues for further exploration / additions:
- Themes: Deck.js includes three by default and there are several more available as open source projects.
Extensions: Deck.js includes a menu, navigation and other controls by default. There is a fantastic open source ecosystem around deck providing all manner of additional extensions. To review a few:
- Remote control a presentation.
- Add a laser pointer to the presentation online.
- Easy “presenter” views.
- … and many more!
- Tools: Several open source projects offer meta-level enhancements like markdown support, etc.
Working with Deck.js
I have used deck for two of my presentations to date. My basic workflow was to fork the repository from GitHub, then make my edits and add in extensions. Finally, I pushed the static web project to GitHub Pages for free hosting.
For a better sense of what the end products look like, here are the two live presentation decks.
Getting Started with Node.js in the Cloud
My talk to the Nova Node meetup on using Node.js in the cloud.
![Node.js cloud presentation][img_pres] [img_pres]: http://loose-bits.com/media/img//2012/03/24/nodejs-cloud.png
5 Things I Like About CoffeeScript
A simple CoffeeScript survey I presented at the Node.DC meetup.
![CoffeeScript Talk][img_talk] [img_talk]: http://loose-bits.com/media/img//2012/08/16/nodedc-coffeescript.png
A Starter Kit
After writing these presentations and looking to my next one, I realized I was writing the same boilerplate again, and decided to finally wrap everything up in a concise, opinionated starting point: Deck.js Starter
First, clone the repository:
$ git clone https://github.com/ryan-roemer/deck.js-starter.git my-presentation
Next, make sure Node.js is installed, and install all the necessary support packages.
$ cd my-presentation $ npm install
Once you are ready to author, start the “watch” task that will automatically build “layout.jade” and “index.jade” into the “index.html” static page. You can then preview your slide deck at “index.html”:
$ npm run-script watch
Authoring is pretty easy. To add themes, extensions, or extra scripts, edit
“layout.jade”. For slides, edit “index.jade” and
section.slide elements following the boilerplate as a guide. Make sure to
take a look at the following possibilities:
![Deck.js Starter][img_js_demo] [img_js_demo]: http://loose-bits.com/media/img/2012/11/05/deck_js.png
![Deck.js Starter][img_cs_demo] [img_cs_demo]: http://loose-bits.com/media/img/2012/11/05/deck_cs.png
After exploring the basics of the starter kit, feel free to add in any other Deck.js extensions or other useful components or tweaks. You’ll end up with an interactive, visually appealing presentation that you can easily author and host online.
As a parting thought, the Deck.js Starter was written in a couple of hours over the weekend. I do plan to enhance it as I author real presentations in the future (particularly with an eye towards adding more themes). But any feedback or enhancements are most welcome.