Tom MacWright

tom@macwright.com

Big 3

Big 3 is better. It’s the version of Big where I’ve learned from years of user input, from many presentations made, and I wanted to make the best possible presentation framework.

Giving up golf

The main in-joke with Big before was that it was code-golfed: the entire source code was around 50 lines long, and, over the years, tended to get shorter rather than longer.

Big 3 gives this up. Golf was fun, but it also made big less comfortable to refactor, and intertwined different features that should have been separable. Big is now over 400 lines long, and rich with comments. It’s far from the other extreme: it’s still only around 7k uglified & gzipped, and our bloodthirsty competitors like reveal.js are many thousands of lines long.

Straightforward background image setting

Before v3, to set the background image of a slide, you’d add an image element as the first thing in the slide. This was fun and very literal, but, in my usage, I relied on my knowledge of TextNodes:

<!-- the image is the first thing in this slide -->
<div><img src='foo.png' /></div>

<!-- but not in this one: the first thing is a textnode with ' ' content -->
<div> <img src='foo.png' /></div>

Unfortunately, the workings of the TextNode are not well-known, so this was a common stumbling block in the design. So, in Big v3, background images are specified simply, using data attributes - the same way that time-to-next and bodyclass are specified.

<!-- the image is the first thing in this slide -->
<div data-background-image='foo.png'>hi</div>

Printing & jumping

One of the big failings of Big before v3 was print. I wrote big-printer to try to work around this problem, but it never really got there: it relied on PhantomJS, and wasn’t very consistent in its reproduction of notes and such.

Another big failing was the total lack of context: if you lost your place in a presentation or wanted to find a slide, it was really hard to do so, without remembering all the slides in the presentation and their order.

Big v3 really fixes these problems, by having three modes, that you can jump between by hitting t, p, and j:

  1. talk mode: slides are full-screen, keybindings work
  2. print mode: shows all the slides, with a white background and notes, for printing
  3. jump mode: shows all slides in a very compact layout, and you can click a slide to jump to it.

Includes code highlighting

Adding syntax highlighting to code in presentations was always kind of a pain, and I eventually decided that it should be on by default: after all, this is a presentation tool used by people who can write HTML, so it’s likely that they want to talk about code. So, highlight.js is included and enabled by default.

Installation

Previously, big was installable two different ways: by using wget to download a ‘quickstart’ or by cloning the repository. This was great in some ways, but failed in others: quickstart got you started quickly, but was harder to manipulate after the fact, because it was all smushed together. Cloning the repo got you verbatim contents, but also unnecessary content, and you would have to delete .git to commit your presentation elsewhere.

Big v3 changes this by introducing tooling: to create a presentation, you, for instance,

$ npm install -g big-presentation
$ big-presentation-init my-presentation
$ cd my-presentation
$ big-presentation-serve

The tooling provides:

big-presentation-init

Creates presentations, dumps the files in places.

This essentially ‘scaffolds’ a presentation by putting the necessary CSS, JavaScript, and HTML into a folder.

big-presentation-serve

Serves up presentations

This also helps new users dodge the “double-click on an index.html” problem. For newbies, it’s popular to open HTML files in browsers as if they’re other files, and they’ll be opened with file:// URLs. But that’s a terrible trap: file:// URLs have lots of gotchas that make them hazardous.

big-presentation-offline

Creates an offline-ready version of your presentation.

One of the golden rules is to never rely on conference wifi, ever. This script makes that easier, by taking a presentation with potentially-online references to resources like images, and making them inline so that they aren’t affected by network connection status.

Still keeping it simple

Big has grown up, a little, but the important parts are preserved: there’s no configuration, there are few places to fiddle, and as long as you keep it simple, you can just write your presentation, it’ll work, and you can do it quickly and easily.