Creating Slide Decks with Reveal.js

When creating slides for my talks, I use Reveal.js. These are my notes about creating presentations this way.

Add Persistent Elements

I’ve found it valuable to have my Twitter handle and the conference Twitter hashtag on all my slides. I’ve created a separate post on How to add a Persistent Header to Reveal.js.

Do Not Use Nested Slides

Far too often when using Nested (a.k.a. Vertical) slides, I accidentally skip over them during my presentation. The only time I’ve found them to be a good use is when I use them to add extra content at the end of the presentation – however, I should be practicing my talk enough that the duration of the talk should not be in question. Do not use nested slides.

Reveal.js Configuration Preferences

Reveal.js includes many configuration options, these options are set near the bottom of the page in the Reveal.initialize() call. By default, they look like this.

Default Reveal.initialize() Call

Reveal.initialize({
    dependencies: [
        { src: 'plugin/markdown/marked.js' },
        { src: 'plugin/markdown/markdown.js' },
        { src: 'plugin/notes/notes.js', async: true },
        { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
    ]
});

Modified Reveal.initialize() Call

Reveal.initialize({
    // Hide slide navigation arrow controls.
    controls: false,
    // Make the browser back button work.
    history: true,
    // Hide presentation progress bar.
    progress: false,
    dependencies: [
        { src: 'plugin/markdown/marked.js' },
        { src: 'plugin/markdown/markdown.js' },
        { src: 'plugin/notes/notes.js', async: true },
        { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
    ]
});

Hide Slide Navigation Arrow Controls

By default, Reveal.js displays arrows for navigation. This is helpful in highlighting when there is a nested slide and you can transition down. However, as mentioned above, I’m against nested slides making these controls unnecessary.

Make the Back Button Work

By default, if you hit the browser Back button you’ll leave your presentation and when you come back you’ll be on slide 1. When this happens accidentally during a presentation, it can really throw things off as you navigate back to your current slide.

Hide Presentation Progress Bar

I’m not a fan of a progress bar showing how far through the presentation you are. I prefer to turn this off.

Other Tips

Full Screen Image

Use

<section data-background="images/my-image.jpg" data-background-size="contain">

See my post Full Screen Image in Reveal.js.

Use fragments

I like to use fragments, which allow me to reveal part of the slide at a time. This should be used sparingly.

Fade In / Fade Out Transition

Sometimes I want behavior similar to a fragment but a fragment won’t quite work (this often comes up when I have a code snippet I want to reveal a section at a time). In this case, I setup two slides that are almost identical and use a fade transition between them (instead of the default slide transition). This is done with the data-transition attribute.

<section data-transition="slide-in fade-out">
    <pre><code>"I see", said the blind man as he picked up his hammer...</code></pre>
</section>
<section data-transition="fade-in slide-out">
    <pre><code>"I see", said the blind man as he picked up his hammer... and saw.</code></pre>
</section>

Markdown

I do a lot of my writing in Markdown. Typically, I build my slides using straight HTML but on my list of things to explore more is creating Reveal.js slides with Markdown.

Sal Ferrarello (@salcode)

Sal is a PHP developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a senior backend engineer.