Reveal.js --- in-browser JS Presentations framework and my CDN-loading template for it

Clinicians Who Code
, ,
1

Not directly a coding tool, and not clinical, but I thought might be of interest to some CwC because at some point we all end up doing presentations of our ideas, and this tool can really help.

Reveal.js

Reveal.js is a fairly light Javascript-based ‘framework’ that turns an index.html into a presentation that you can view in a browser. I have been using it for at least 10 years. However it can be a little tricky to get started, so I have made a GitHub template repository which you can simply copy.

Marcus’ Reveal.js CDN template repository

Demo

Great things about Reveal.js

  • ‘Presentations as code’ - manage source in Git and publish via GitHub
  • Put your presentations on the web for free, forever, using GitHub Pages
  • In-browser presentation,
  • Vertical slides! - as well as the more usual horizontal slides, you can scroll up and down too, which helps with ‘sectioning out’ your idea/story/pitch.
  • AV people at conferences are slightly freaked out when you say ‘no I don’t need PowerPoint’, I am using a browser

Annoying things about Reveal.js

  • Your own changes are mainly in index.html, but if following the default install instructions you end up with all the Reveal.js code in a repo as well (see solutions below) - fixed by using the Submodule or CDN versions I have created.

Reveal.js doesn’t clearly tell you in its own installation documentation that if you use their default install method - copy the whole Reveal.js repo into your project - not only is your presentation much larger than it needs to be, but you also have a headache if you want to update the version of Reveal.js that you use, because you will have changed some of the files.

I originally solved this with a different approach - load Reveal.js as a Git submodule, which lets you update it independently - but more recently I had the idea to try loading Reveal.js from a CDN so that the only thing you need to think about is index.html and any assets or graphics you bring in.

Embed it in Discourse (or any site!)

Oh, and one final killer feature? You can embed your presentation in basically any website using an iframe:

Embedding Code 
  <iframe
    src="Your URL Here"
    width="960"
    height="540"
    style="max-width: 100%;"
    allowfullscreen
  ></iframe>

For it to work in Discourse you need to allow certain iframe origins in the settings

1 Like