How I make presentations

Saturday 25 April 2015

I like giving talks. I spend a lot of time on my presentation slides, and have a typically idiosyncratic toolchain for them. This is how I make them. Note: I am not recommending that anyone else make slides this way. If you like it, fine, but most people will prefer more common tools.

I generally favor text-based tools over WYSIWYG, and slides are no exception. For simple presentations, I will use Google Docs. But PyCon talks are not simple. They usually involve technical details, or involved explanations, and I want to have code helping me make them. I choose text tools for the control they give me, not for convenience.

HTML-based presentations are popular, and they suit my need for text-based tooling. Other options include Markdown- or ReST-based tools, but they remove control rather than provide it, so I prefer straight-up HTML.

There are a number of HTML-based presentation tools, like impress.js and reveal.js. For reasons lost in the mists of time, I long ago chose one that no one else seems to use: Slippy. Maybe someday I will switch, but Slippy does what I need.

To make a Slippy presentation, I create a .html file, open it in vim, and start typing. Each slide is a <div class=”slide”>. To see and present the slides, I just open that HTML file in a browser. If you want to see an actual artifact, click the “actual presentation” link on any of my recent talks, or take a look at the repo for one of them:

When I need more power than just my own typing, I want to use Python to produce content. In Pragmatic Unicode, I used it to produce tables of character translations, and to run the Python code samples. In Names and Values, I used it to write Cupid figures.

To run Python code that can create content in my HTML file, I use Cog, a tool I wrote that can execute Python code inline in a text file, and put the output back into the file. I originally wrote it to solve a different problem, but it works great here. It lets me stick with a workflow where I have one file that contains both the program and result.

Sometimes, I don’t need Cog. Loop Like a Native is just static text, with no need, so it’s not in there.

For explaining code, it’s very helpful to be able to highlight individual lines in a snippet on the screen. I couldn’t find a way to do this, so I wrote lineselect.js, a jQuery plugin to let me select individual lines. While presenting, I use a presentation remote with volume control buttons, and remap those keys to j and k so that I can manually move the line selection as I talk.

As I write the presentation, I like working out what I am going to say by writing it out in English. This helps me find the right way to explain things, but has another huge advantage: it means I have a written presentation as well as a visual one. It frustrates me to hear about someone’s great presentation, and then to have two options of how to learn from it: either watch a video, or look at slides with no words behind them.

When I write the English, I put it into the .html file also, interleaved with the slides, as <div class=”text”>. CSS lets me hide those divs during the presentation, but I can work in my HTML file and see the slides near the text.

For publication on my site, I have a Python program that parses the HTML and extracts the text divs into a .px file for insertion into my typically idiosyncratic site publication toolchain.

Producing that .px file also involves producing PNGs from the slides. Slippy comes with a phantomjs program to do this which works well. The px-producing program inserts those PNGs into the page.

As I say, I’m not explaining this to convince you to make slides this way. Most people will vastly prefer a more convenient set of tools. I like the control this gives me, and I like writing the kind of tooling I need to make them this way. To each her own.

Comments

[gravatar]
Shrikant Giridhar 2:21 PM on 25 Apr 2015

Hi Ned,

I've watched all of your PyCon talks (I think) so far and I must say that you're a great presenter. I've been looking for a text-based workflow for quite sometime now. I tried reveal.js and LATEX and those markdown-based tools but nothing quite beats the simplicity and cross-platform awesomeness of good ol' HTML. I'll try out Slippy for my next Python meetup presentation.

Just another fanboy dropping by to say hello :-)

[gravatar]
Corey Goldberg 4:25 PM on 25 Apr 2015

good stuff Ned. It's neat to hear how others create presentation slides. Slippy actually looks good (and would remove the generate/pre-process step in my process below).

My presentation toolchain:
I like self-contained HTML based slide-decks too. But, I like the transforms/transitions between slides that impress.js provides... and I like the simplicity of authoring in .rst.

Given those contraints, and preferring Python for everything possible... I've been very happy using Hovercraft. It's a nice Python3 based presentation tool that generates HTML (with embedded impress.js) from reStructuredText sources. It keeps authoring extremely simple, but provides powerful customization, styling, and syntax highlighting. It also generates a nice presenter console with notes and slide previews.

hovercraft: https://github.com/regebro/hovercraft
demo: http://regebro.github.io/hovercraft

[gravatar]
Ned Batchelder 4:53 PM on 25 Apr 2015

@corey one thing I definitely miss is a presenter console.... :)

Add a comment:

Ignore this:
Leave this empty:
Name is required. Either email or web are required. Email won't be displayed and I won't spam you. Your web site won't be indexed by search engines.
Don't put anything here:
Leave this empty:
URLs auto-link and some tags are allowed: <a><b><i><p><br><pre>.