Initial Experience with Reveal.js

There are few tasks that I cringe about more than putting together a presentation with a standard slideshow program. With my background in web development the drag-and-drop process, mixing of content with design, and maintaining consistency through an evolving forty-plus slideshow is clunky and inefficient. HTML and CSS are great languages that are easy to use and handle this stuff fine - why can't I just build a presentation with that?

I recently had the opportunity to give a presentation on regex at my local PHP meetup, Fox Cities PHP. Instead of building it in Google Presentation, like I normally would, I decided to try out Reveal.js. This tool promised to do some cool things, like build a presentation in HTML or Markdown, plus have the capabilities of handling like a web page (it does run in a browser, after all). HTML/Markdown for content, CSS for design, and Javascript for functionality… this was exactly what I was looking for.

After trying out a few configurations I decided to use external Markdown for the content and one of the default themes (with a few internal style overrides). To get this to work I had to get node running on my computer, a new but pretty straightforward process. I didn't end up overriding too much with Javascript; the few things I wanted proved to be a bit too much, though the simple modifications weren't be too difficult.

Building the presentation turned out to be a lot of fun. The Markdown was clean and simple, verbose enough for me to publish independently on my Github. I did have to inject a few HTML elements here and there for some of the trickier things, like fragments and specific phrase highlighting. Most of the content ended up being just vanilla text, which was nice.

I did run into a few issues. First, there was more than once that I wished I could customize the Markdown parsing. As far as I could tell the only options available were a few data attributes on the section links, parameters to determine what the slide breaks were and such. It would have been nice to map specific syntax to element, like ```` to <pre class="code-fragment">, etc, or even just target specific generated lists or tables with unique styles.

The other issue I ran into was with race conditions. I don't fully understand how this works, how the frontend Javascript parses and works with node.js, but I ran into some odd things with the synchronicity. If I tried to add jQuery I would have to wait for the Reveal 'ready' event, not the normal document load. Trying to export everything to PDF, which is as simple as adding a print stylesheet, also had loading requirements. I couldn't add the link until after the library had added all of the external Markdown or else the parser would distort all of the slides. Adding the styles had to be done with the same Reveal 'ready' event.

A smaller side issue I had was with customization. I'm so used to working with PHP dependencies, where you build your application independent of the vendor libraries, that it felt weird to wade in and modify the files in this library. It would be nice to boot the Reveal codebase and just point to a few directories, for Markdown and styles and customization, and not actually touch any repo files. Different languages have different conventions, I guess.

Overall the experience was fun, though. Next time I give a presentation, be it this one on regex or otherwise, I have every intention of using Reveal. I'd love to dig around a little bit and see how difficult it is to extend the primary Javascript object it uses to better handle some of the issues I ran into.