Creating Presentations with Reveal.js
Late last year, I gave a talk at the Sift Science office in San Francisco on “Hadoop at Lookout - how Lookout uses the hadoop infrastructure to power internal analytics”. I used Reveal.js to present the talk in my browser! Reveal.js is a HTML Presentation Framework that uses Javascript and plain HTML to create beautiful slides. I tried the free version on Github where you create your slides by writing html or markdown. There’s also an online editor which I have not tried.
HTML Slides, What? #
You may ask, “Well, do we really need HTML slides when we have mature tools like Powerpoint or Keynote?” Having a presentation in the HTML format allows you to quickly upload it and share it with the world by simply hosting it. Desktop solutions like Powerpoint or Keynote require you to upload your file to an online folder or upload to presentation viewers like SlideShare. Additionally, Reveal.js allows you to write Markdown so you can throw something up real quick. Granted, it is not going to be as pixel perfect as a Keynote but for a lot of technical presentations you really don’t need to be.
Another cool reason to use Reveal.js is the ability to hit ESC and go in the preview mode. I’ve given presentations where during QnA I need to go back to the beginning of the presentation. The preview mode is really awesome. Additionally, the content in your Reveal.js slides can be easily indexed by search engines.
The Good Things #
I write my blogs using Markdown and I absolutely love it. With Markdown support, Reveal.js allows you to focus on your content and nothing else. Which is great. Also the code looks much cleaner. Here’s a one page slide on the agenda:
<! Agenda ############################ -->
<section data-markdown>
#Agenda
- What we do @Lookout
- Analytics Architecture
- Event Ingestion Pipelines
- Storm
- Questions
</section>
Which results in something like this: 
Notice, the HTML comment with a string of “#” characters. I had to do this to visually separate the sections. Otherwise, searching for that one slide you want to update is a bit of a pain.
Adding images with Markdown is easy. Just shove them in a folder inside your dir and simply point to it:
<section data-markdown>
##Storm Parallelism
</section>
But resizing the image in Markdown wasn’t so easy.
The Challenges #
All of this is great, but when the rubber meets the road, does Reveal.js really give its desktop cousins a strong fight? First, writing pure HTML or Markdown needs getting used to. Not being able to look at the preview the instant you make a change can be frustrating, as you may find yourself constantly modifying your markdown file and Cmd+Tab to your Chrome window.
Also, with Reveal.js (at least till version 2.6.2) you can’t include a code block in the markdown. You have to use HTML.
<section>
<h2>Deployment</h2>
<p>Configuration is stored in shell scripts that launch topologies</p>
<pre><code data-trim>
storm jar /topolgoies/data-storm-0.0.3-SNAPSHOT.jar com.lookout.data.topology.KafkaToHdfsTopology \
-topologyname kafka-hdfs \
...
-D statsd.host=statsdhost
</code></pre>
</section>
Another issue is that if you are presenting using a clicker (which generally has only 2 buttons - next and back) then navigating is impossible. For every new Section Group you need to scroll down to reach the slides in that group.
Making diagrams, which I often do in technical presentations, can also be a bit of a pain. You have to create the diagram in an external tool and then export it to png to be visible in the slides.
Overall Impressions #
I’m definitely going to use Reveal.js again for quick presos and when I want to convey an idea quickly. But, for more pixel-perfect and detailed presos with a lot of diagrams, I’m going to stick with the workhorses - Powerpoint and Keynote.