Preparing my flashtalk, and discovering Impress.js

Last week and after 9 months working for Automattic, I met most of my colleagues for the fist time. We all travelled to San Diego, California, and spent the week working on team and getting to know each other.

Flashtalks are an important part of this annual grand meetup. Each one of us gets to stand up in front of everyone and talk about the topic of their choice for 5 minutes.

As it turns out, that’s actually quite difficult! First of all, because I had never talked in front of that many people, but also because I respect and admire the talented people I work with. It makes it harder to pick a topic that could be interesting and valuable for all the people in the room.

I spent quite some time thinking on the best topic; I wanted to talk about something I was passionate about: your presentation is always better if you are really passionate in your topic (see this talk by Scott Berkun to help you choose a good topic). That made things more difficult for me: I am interested in many things, as long as I feel that I am learning something in the process.

After a lot of back and forth, I ended up with a few good ideas, a lot of them suggested by my wife Adri, and started writing down my ideas to get a feel of what I could say about each one of these topics for 5 minutes. Among the topics I wanted to talk about, Brittany, my daily work, WordPress, Whisky, desserts, Stephen King, …

And then came the hard part: picking a subject, and starting organizing my talk to make sure I wouldn’t go over the 5 minutes, and keep the audience awake :)

That’s when I realized that I didn’t actually have any presentation tool installed on my computer. Yes, there was LibreOffice Impress, but I had never used it before, and didn’t feel very inspired when staring at that starting screen…

So I started looking around, checked prices for Keynote and Powerpoint, and then I got my flashtalk idea: why not looking for the best presentation tool around, and talk about that? That could be interesting for my colleagues, and I would learn something. Win-win!

I had already stumbled upon HTML presentation tools such as Showoff and Jekyll and Hyde last year, when experimenting with Git, Github, and Jekyll. I knew there were a lot of presentation tools out there, and I was eager to learn more about a few of them. Most importantly, I knew I would have to prepare my slides using one of these tools. And the kid that I am couldn’t wait to get his hands on a new toy to play with! That would be the opportunity to experiment with HTML and CSS. And as Adri pointed out later, that was also the occasion to try one of these Javascript Chart APIs to embed a nice looking pie chart in my slides.

There you have it: I actually chose this topic because it would allow me to play, learn, and work at the same time. I am not sure that was the best choice, but I had my flashtalk idea!

Impressed? A Presentation about presentations

I ended up organizing my flashtalk like so:

Explain the story behind the flashtalk
Explain what the perfect presentation tool would do for me
Compare that with the tools that are available out there
Pick one of these tools and tell more about it

As you will see in the presentation, I ended up talking about Impress.js, an open source Javascript library allowing you to create presentations on a canvas, and place each one of your slides somewhere on that canvas. It’s best explained in the demo presentation available here: Impress.js Demo

Building your own presentation

I would recommend building your presentation like so:

1.Turn off your computer

The hardest part was actually to figure out how to organize my slides, where to place each one of them on my canvas, where to zoom, and how to origanize each element to support my ideas. I would really suggest thinking about all this before to actually start working on the slides, so you don’t make a mess later by having to move slides around.

2. Clone an existing presentation

While you can start from scratch, starting from an existing presentation will give you a good grasp about what’s possible with Impress.js, and how to build your slides. You can have a look at my slides on GitHub!

However, I would suggest that you keep only the HTML; one of the reasons I chose this tool is because it allows to create unique presentations, so don’t ruin it by copying from somebody else’s style!

3. Add your slides

Since you already worked on your presentation structure, and know where to place each slide on your canvas, start by adding each slide. You can do so by using the following mark-up:

<div id="name-of-the-slide" class="step" data-x="500" data-y="500" data-z="-4000" data-scale="10">
      <!-- Slide content -->
</div>

The important thing is to place your slide on the canvas, by using the data-x, data-y, and data-z attributes. The data-scale attribute is only used when you want to zoom out of your canvas, to display more than your slide.

4. Style your presentation

It’s now time to give it some style: if you are comfortable editing CSS, this will be a piece of cake: go ahead and add some colors, custom fonts, and make it look great!

And that’s it, you’re done, ready to rock!

But are you, really?

Pro-tips

Test, test, and test

We have all experienced it once: you have prepared your presentation, it looks great on your own machine, but when opening that Powerpoint file on another computer using a different OS / version of Powerpoint, the animations disappeared, fonts have changed, …

You’re in luck, you can test all that from your own computer: try opening it in different browsers, and make sure it looks right everywhere.

Don’t rely on online resources

Since you will be using a web browser to display your slides, it can be tempting to upload all your slides to your website; it’s so much easier to access your presentation later on…

The truth is,so many things can go wrong with that. There could be connecting issues during your presentation, the connection could be slow… The computer you will be presenting from might not even be connected to Internet!

So, when working on your slides, keep that in mind:

Have all the resources used for the presentation in a specific folder
If you have to use jQuery, don’t load it from Google CDN but from your machine
Google Fonts are great, and did you know you can actually download them to your computer? It will then be possible to use them in your presentation using @font-face.

Test with the right resolution

Projectors often use different resolutions. You want to make sure your slides look good in 800×600 as well!

Beware of colours and contrast

Projects will often have a really bright display, so you want to make sure your text colour contrasts from your background.

Want to use a remote to control your slides?

If you are not near your computer during the presentation, you can use this Chrome extension to be able to change slides using your smartphone: RemotePrez
Check the link to see a video of the extension in action!

And that’s it! I don’t have any other tips, but I’d be happy to listen to yours; it might prove useful for next years’ flashtalk! :)