May 29 2012

Slide-decks the Web 2.0 way

GRCA 83608 Kolb Brothers Projector (front)

At Highgroove we love giving presentations. We sponsor the Atlanta Ruby Users Group (ATLRUG), we each attend at least one conference per year where we are highly encouraged to speak rather than simply attend, and we give weekly tech talks at the office. Each Highgroover has their own presentation tool-stack ranging from extremely simple using nothing more than a web browser with various tabs they manually rotate through, to sophisticated Keynote slide-decks. One can also use a very editor and CLI-centric collection of tools to build flexible presentations using many of our everyday tools like git, guard, slim, and Github with Github Pages. If you like using those sorts of tools to speed things along read on after the jump.

Deck.js is an extremely polished HTML/CSS/Javascript slide-deck creation tool. It provides functionality to theme and control your slides in a very granular fashion. Slim is one of Highgroove’s preferred templating languages for its minimalism and expressiveness. It empowers developers to write correct, well-strucutured semantic markup without the overhead of unnecessary angle-brackets or closing tags. When developing Rails apps Slim is automagically compiled down to HTML but when working on non-Rails projects such as a plain-ole Ruby app or a slide deck it is very handy to have Slim automatically compiled rather than having to run slimrb after every save. To enable that compilation Guard and Guard-Slim work well together to produce output that can be continually reloaded in a browser without ever having to manually intervene. For publication Github pages are extremely convenient. For a given project you can simply create a gh-pages branch and push an index.html to the tracked remote gh-pages branch, and it will be published automatically (for more information see the excellent documentation).

To wrap up this whole process into a single generator command I’ve created a ruby gem Presechute, “The parachute for your presentation creation process.” It can be run by installing the gem via gem install presechute then simply running presechute new <presentation name>. It downloads deck.js, cleans up the environment a bit, and sets up the whole family of tools discussed above. It then creates a gh-pages branch, removes HTML files from the .gitignore file, and creates an initial index.html file ready for pushing to the remote branch with a rake task. Finally it checks out the master branch again and prepares to get down to some serious slide-deck creation!

From there the standard workflow is to launch guard via bundle exec guard (if you use Bundler), open your new presentation file, for example prezzy.slim, and write some slides! After each save prezzy.html will be updated by guard-slim, and you can view it at your leisure in your browser. This makes for a very tight feedback loop while polishing slides. When you’re ready to release simply commit your work, then hop over to the gh-pages branch, rebase against master, and run rake to generate your index.html. Commit it as well and push it upstream and you have a working online slide-deck.

What tools do you use for creating web-ready slides? How do you polish your workflow to keep a tight feedback loop?

Image credit: Grand Canyon NPS

No Comments

Leave a Comment

Join the discussion. Do not worry, your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>