My Do it yourself Slide Deck

First off, this is just too awesome not to talk about. Today, I was reading http://www.igvita.com/2012/05/14/all-presentation-software-is-broken/ and totally agree. As I was putting together my slides for http://www.charlestoncodes.com, I spent a few minutes putting together a simple concept.

Disclaimer

This was not to try to create the next best presentation software toolkit, far from it. But it got my job done and maybe it will inspire others to do their own as well. You don’t need a lot, to get something decent up and running.

You can see the presentation here: http://codecamp.jackhq.com.

It should be responsive and work with both the prev and next buttons at the top as well as the up and down arrow keys.

Pretty Cool!

Now, it is not the most awesome designed slide deck ever, but it has potential, because it is just HTML, CSS, JS) and it only took a few hours to assemble. Also, it does not do the cool analytics jazz Ilya’s does, but I may add it in the future and it would be easy to add.

Here is the index.coffee file for the slide deck

https://gist.github.com/2707271?#file_index.coffee

The markup that I am using is called zeke, a fork from CoffeeKup that uses a plug-able container. Check out zeke, when you have a chance. Here is how I did it.

First,

I created a new project with bam, bam is a very easy to use static site generator.

sh npm install bam -g bam new foo

Then I used easyboot, a simple command-line tool to install twitter-bootstrap into my project.

sh npm install easyboot -g cd foo easyboot

Then, I modified the layout.html file to use the twitter bootstrap asset files:

https://gist.github.com/2707271?#file_layout.html

Next, I created an index.coffee file in the pages directory.

sh touch pages/index.coffee

Next, I created a simple javascript file and css file:

https://gist.github.com/2707271?#file_app.js

https://gist.github.com/https://gist.github.com/2707271/file_app.js

And I started to write my markup, but I realized, I am writing my markup in CoffeeScript. I can DRY this up. So I created a jpg2 method and a slide method. This made it super easy for me to get all my slides together very quickly.

jpg2 = (name) ->
  center ->
    img src: "http://#{name}.jpg.to", style: 'max-height: 90%;max-width:90%'

slide = (title, jpg) ->
  section '.container.hero-unit', ->
    h1 style: 'margin-bottom: 20px;', title if title?
    jpg2 jpg if jpg?

item = (desc, link) -> li -> a href: link, desc

https://gist.github.com/2707271?#file_index.coffee

I am pretty happy with the Return on Investment.