Managing Multiple Versions of a Deck with Reveal.js

Published: September 8, 2016

Tags:

I built a SaaS app called Domain Clamp which monitors domain and SSL certificates and sends you notifications before anything expires. If you've ever been blamed (e.g. by a client) for letting a domain you don't own expire, check it out »

I’m currently in the process of paring down a 60 minute talk to fit into a 30 minute time slot. Going in, I had a pretty good idea of what needed to be cut, but one challenge I wasn’t sure how to tackle was how to manage multiple versions of a single deck.

how do you manage 30 minute and 60 minute version of a deck for the same talk?

— Max Chadwick (@maxpchadwick) September 2, 2016

Aside from my co-worker Gil’s “insightful” idea I didn’t get much of a response on Twitter nor did I find much on Google. I did, however, come up with a solution for this that I think it pretty sweet. I figured I’d write up a quick blog post to outline what I did.

NOTE The technique outlined here is relevant if your deck is powered by Reveal.js.

The Wrong Path

My initial thought on how to handle this was with separate git branches. I already had the 60 minute version created, so I figured I’d just create a new branch for the 30 minute version based off the 60 minute version and then remove slides as needed.

I started down this path, but quickly realized that in the long term this approach could turn into a maintainability nightmare. For example, let’s say I want to update some info in my vanity slide, which would appear in both versions of the deck. Now I need to remember to update both branches. If I forget, and only update in one version, then give a presentation of the other version, now I’m displaying out of date or incorrect information. Ugh. There’s got to be a better way.

How To Do It

I started to think, all I really need to do is hide or modify certain slides for the 30 minute version. How can I make that happen in my HTML and JavaScript based deck?

Hmm…well, I have access to the document via JavaScript. Now we’re getting somewhere.

Basically, the idea I landed on is to use a query parameter to specify which version of the deck to show. Along with this, I add data attributes throughout the document to specify what to show or hide based on the version of the deck requested. Finally, I add a few lines of JavaScript to inspect the URL and perform the desired behavior.

Implementation

The JavaScript is pretty simple. We don’t need no stinkin jQuery. Here it is…

Reveal.addEventListener('ready', function(event) {
    var q = window.location.search;
    if (q) {
        var mode = q.split('?mode=')[1];
        var hide = document.querySelectorAll('[data-not="' + mode + '"]');
        Array.prototype.forEach.call(hide, function(node) {
            node.parentNode.removeChild(node);
        });

        var show = document.querySelectorAll('[data-is="' + mode + '"]');
        Array.prototype.forEach.call(show, function(node) {
            node.style.display = "initial";
        });
    }
})

Note that this implementation assumes that there will only be one query parameter and that query parameter will be set to ?mode=[mode-goes-here]. It wouldn’t be difficult to add support for URLs with more than one query parameter, but I wanted to keep this as simple as possible.

Now, all we need to do is add data-not="30m" to slides that should be hidden in the 30 minute version or data-is="30m" to things that we only want to show in the 30 minute version. You also need to make sure that all elements with data-is are hidden by default

[data-is] {
    display: none;
}

See It In Action

You can see this in action on the the following deck.

Full Version

http://maxchadwick.xyz/monitoring-and-improving-fpc-hit-rate/#/

30 Minute Version

http://maxchadwick.xyz/monitoring-and-improving-fpc-hit-rate/?mode=30m#/

Commits

https://github.com/mpchadwick/monitoring-and-improving-fpc-hit-rate/compare/4fb272c137de71275722dce99aebb598bb1be86b…368fcc03464cb0af95ba29c8bb1e40976e8d6848

Conclusion

I hope that this will help some people find a better approach to managing multiple versions of the same deck. As always, feel free to leave any thoughts in the comments below or reach out to me on Twitter.