Skärmavbild 2011-04-16 kl. 21.12.00


In Popdevelop we have tried a few different setups for our presentations, most of the times we have used Keynote, Prezi or just plaintext Vim/Emacs. There are a few other tools out there but not really something that stands out.

A few month back we found a cool github repo with a presentation tool written in Ruby/HTML/Javascript called Showoff. It gives you a possibility to add new features to your presentation with some simple Ruby or Javascript, and show live examples since the presentation runs in your browser.  We liked the idea a lot, but it was built for coders who present tech stuff to other coders. Since we mostly present stuff to suits and idea people we continued to use Keynote.

When we were asked to present at our Google Technology User Group we finally found a perfect time to try out Showoff. The presentation relied alot on showing code and live examples on how Google Maps could be tweaked. Showoff was the perfect tool for this event and we decided to use it.

It took some time and effort to make our slides look good, but I see a big potential in Showoff. Here is a short summary of what it does and what you could do with it

Showoff Introduction

It’s pretty straight forward, you write your presentations in plain text with Markdown and Showoff renders a slide with your custom css styling. A simple bullet list will look like this
# About Popdevelop

* Started in January 2011
* Four nerds
* Love what we do

This is nothing revolutionary, but the thing with Showoff is the potential it has, it offers a new way of presenting information to an audience. Since it allows you to write your own Javascripts for each slide, only your imagination is the limit to what you can do!

We don’t need a seperate tool to show the Twitter back channel anymore just inline it in your presentation with some simple Javascript. Fetch images live from Flickr or inline web pages in your presentations with an simple iframe(!). Let audience try the examples and follow links live while you are presenting. Only your imagination and Javascript skills sets the limits, here are some ideas on what you could do

  • Use the Flickr API and fetch CC images tagged to match your presentation and get a unique presentation every time you present!
  • Inline a Discus or Twitter flow and keep your back channel inside your presentation. Let this evolve with time and keep the comments with your presentation like a blogpost.
  • Let the audience vote or answer questions live and display the results on a slide.
  • Do a non-linear presentation and let the audience choose what chapters to focus on with simple http links and a voting system
  • Publish your slides online easily since its html/js
  • Add Facebook “like” buttons or Linkedin “share” buttons on your slides
  • Add Google Analytics to the slides and analyze the usage
  • We embedded live Goole Maps Javascript in our presentation.


For the geeks there are some more advantanges like:

  • Being able to version control your slides and and move chapters between presentations
  • Display code highlighted in your slides easily
  • Also writing the presentation in your favorite text editor with syntax highlight for code and Markdown is really cool.
  • Reenact command line interactions
  • Execute Javascript or Ruby live and display results
  • Host your presentation on Github Pages easily with the built in showoff github command

Currently it takes a few hours to get this working and if you want to make any custom addons you need to write it in javascript. So for the moment you probably need to be a serious geek to love this. In the future something like this could be hosted like WordPress with a catalog of plugins and then this would be available for everyone!

Click here to see our presentation

Oh. And we made a custom function for enabling full screen background images. See it here. Basically what you need to do is just to insert an image with the title “background” and it will become a fullscreen background image. Thanks sris for the original concept!