Thursday 16 March 2017

reveal.js

Our architect recently put together a presentation regarding our new framework using reveal.js¹.

I had never heard of reveal.js and I was intrigued. It seems to be a presentation framework that runs in your webbrowser, using npm² and grunt³ and javascript and MarkDown⁴ and all that.

I figured I'd give it a try for my next presentation.

I downloaded a release⁶ and used the very clear instructions on how it works on GitHub⁵.

Installing a new release, seems to be nothing more than:

- download
- unzip
- edit index.html
- browse to index.html

Luckily, I had the changes our architect made to bring it into line with the company layout guidelines. It was nothing more than a different css file that is based on the "white"-theme (which is also a css file). The default theme when you get a release is the "black"-theme, similar to the one visible at [1].

You can decide to just browse to the file index.html locally to display the presentation, but if you do a "grunt serve" a small webserver is started that serves the webpage and related resources. The latter option provides more functionality.

MarkDown

As you can see above, you can specify how the sheets are divided. What exactly the sequence is for detecting a division.

Initializing the presentation is done using:

// More info https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
      width : 1280,
      height : 1024,
      slideNumber: 'c/t',
      showNotes: true,
      history: true,
// More info https://github.com/hakimel/reveal.js#dependencies
      dependencies: [
          { src: 'plugin/markdown/marked.js' },
          { src: 'plugin/markdown/markdown.js' },
          { src: 'plugin/notes/notes.js', async: true },
          { src: 'plugin/zoom-js/zoom.js', async: true } }
          ]
});

I set the "snowNotes" to true, because I wished to print out the sheets including the notes. See Printing below.

CSS

It is easy to add custom CSS to individual slides. For example:

A common one used to change the font of the previous element (useful for source code):

Printing

Printing your sheets seems to be as simple as surfing to the url:

http://localhost:8080/?print-pdf#/

It generated in Chrome browser a PDF file that you can simply print to file in the browser.

Conclusions

It is very nice, if you are a programmer or web guy and you do not wish to fire up Microsoft Powerpoint.

An advantage is of course that MarkDown files can easily be added to your version control system.

Another advantage is that you can refer to images on the Internet/Intranet. I managed to do just that, by referring to images already on our Intranet Confluence pages. At least the images will always be up to date.

(p.s. It also means that in order to view my presentation properly, one has to be logged into Confluence. I found that out rather quickly, when trying my presentation out in one of our conference rooms.)

I don't really like the markdown setting displayed above, as it is too easy to add one line or remove one line to many.

I also had a problem where I must have made a grammatical mistake, and in my FireFox browser the presentation managed to hang and after several seconds I'd get a "Script is running too long. Do something about it?" message.

There are several keyboard shortcuts for navigation through the sheets during the presentation, which is nice, as the mouse isn't all that handy.

I don't much like the "sheet notes", which are displayed in a separate browser window. I usually have them turned off.

References

[1] Reveal.ks - the HTML Presentation Framework: http://lab.hakim.se/reveal-js/
[2] NPM: https://www.npmjs.com/
[3] Grunt: https://gruntjs.com/
[4] Wikipedia - MarkDown: https://en.wikipedia.org/wiki/Markdown
[5] GitHub - reveal.js: https://github.com/hakimel/reveal.js
[6] reveal.js releases: https://github.com/hakimel/reveal.js/releases
GitHub- Basic Writing and Formatting Syntax: https://help.github.com/articles/basic-writing-and-formatting-syntax/

Random Thoughts on Java Programming