When I give a presentations, my notes are the full text that belongs to that slide.

It looks like this:

This is great because when you are in “presenter mode” and you stumble over your words, you can just read the slides. I try to rehearse every presentation I do but I don’t always know it 100%. The notes are my fallback to deliver a smooth presentation.

Now, when I want to share my presentation online I have a problem: the slides are pretty bare and minimal, and the actual content is contained within the notes.

In the past I reworked some of my presentations to contain the notes text within the slides. It looks like this:

I would then share these on my Slideshare.

It was a lot of work, and most of the time when you just did a presentation you kind of want to let it go and work on the next thing.

But I knew that this method conveyed the presentation’s message in a much better way. Some of these slideshows got really popular.

What’s not ideal is that the text is contained in images. It’s not accessible, it’s not very SEO friendly… it’s against everything I learned when people still cared about web standards .

Next to that what has always bothered me here is that my content is living on someone else’s platform. Apparently SlideShare has been bought by LinkedIn now which makes things even worse. As hundreds of startups have learned us by shutting down without any export options, you have to own your data. Everyone should have read FUCK THE CLOUD.

I tried to solve my “slide sharing problem” with video, but that’s even more work. Next to editing a whole video project I spent hours making subtitles for this talk and gave up somewhere around the 10 minute mark.

This doesn’t work. How do I fix this?

Some people have argued that I could use something like reveal.js to create the slides, but this is not a solution to my problem. It’s simply an alternative to Keynote.

For the kind of presentations I do I want to be able to do a bit of layout, drag images in slides etc. It’s very hard to do this in reveal.js style presentations.

Now, I’ve read presentations on the web in this way before, and I always thought that was a good idea:

This is from Maciej Cegłowski’s “Internet with a human face“, which you should really check out.

Another example is Scott Jehl’s Delivering Responsibly, which is very well done.

Basically it’s just a really long HTML page where the slides are next to the text.

It’s pretty simple, but how to achieve this without a lot of copying and pasting?

I wrote Maciej on Twitter how he did his work and he said there’s no trick to it for him – just manual work.

I don’t like to do manual work when a computer can do it… so I found a way to do it. It involves some steps but it’s nowhere near as labor intensive as doing it manually.

• First you do an image export of your presentation
• Then you do another export, in the Keynote ’09 format
• Rename the keynote 09 export (in .key format) to .zip
• Unarchive it and find a file called index.apxl
• Now run this script on the index.apxl file
• Now you have an index.html file with your notes. Place the output of the image export step in a folder called ‘images’
• Then install Keynote extractor. You can install it globally using npm install keynote-extractor -g (This code was written by my great colleague Thomas ? Great job!)<
• Run the keynote-extractor command in the folder containing the index.html and the images folder
• Tadaa! Here is your presentation.

I’ll share the slides of my recent talk soon.

Give it a try for yourself… and let me know what you think.

P.S. Keynote has an “extract to HTML” option, but what it returns is a big pile of bloat. It also eats your notes in the process. It’s not usable for my use case.