What’s new in S5?

The current version of S5, available from the Mercurial repository, is not the same as Eric’s last version. I’ve made some changes. Please note that when I started making these changes, I was doing it just for fun and as a private fork. I’m open to changing any of them.

First of all, the reason this all started– I added previews of the actual slides to the notes window. I say “the reason this all started” because I made this hack while working on a presentation at XTech (with the help of Simon Willison). After hacking this feature in (then finishing my presentation), I realized that S5 could benefit from having a wider development community. So, here we are.

Anyway, my implementation of this is still lacking. I’m using innerHTML to copy the slides to the notes window. I chose not to use iframes because I didn’t want to create the overhead of loading a separate resource for browsers. As always, I’m open to changing this.

Either way, the current version is ugly - the layout isn’t quite consistent and the slides don’t have the actual styles from the theme. I’m sure someone would love to volunteer to work on this. *hint*, *hint*

The second change I’ve made is to incorporate MochiKit. The second round of work I did on S5 (after the aforementioned hack), included using MochiKit for both DOM manipulation and signaling. I really like their signaling API, despite the fact that there’s a bug with it in Safari (its a Safari bug, AFAICT).

Why’d I choose MochiKit? Well, to be honest, I was working on this offline during a layover at Heathrow airport on my way from XTech to WWW2006 and MochiKit was the only suitable library among the interesting Javascript libaries (dojo, MochiKit, YUI, jQuery) that I had already downloaded. So, there it is.

A feature I’d like to add in the future is transitions, both between slides and in incrementals. MochiKit doesn’t have support for this, but some of the above libraries do. As cool as all the libraries are, I’m concerned about require too large of downloads for presentations. But, we can cross that bridge when we get there.

A third change I’ve made, which may be a bit controversial is this: I rewrote the whole application as an object. I know that Eric has expressed a liking for the non-OO version, but I think there’s a real and significant advantage to the OO version- it’s easier to write unit tests (and we will have them soon, I hope). I’ve written it by building on the prototype object, not as an object-literal. I’m sure this will cause a religious war. I dont’ really care either way, I’ve just never gotten used to the object-literal syntax.

There may be some concern about the Object-based version being less performant. This may be the case, but even so, I’ve made other changes that had even more drastic improvements in performance. There were several situations where an entire list of DOM nodes was being retrieved repeatedly (i.e., on every slide change). In those situations, I changed S5 to grab that list at startup and store a reference to it. I noticed a significant speedup from this change, though I don’t have any numbers to back it up.

I have a done a bit of timing/profiling, and it seems that for most interactions (like changing slides), only a few milliseconds is spend actually executing the javascript, then a significantly longer period of time (on the order of hundreds of milliseconds) is spent re-rendering. If we want to make S5 faster, I think we need to look at ways to make rendering happen faster.

There have been some other minor changes, which you can see in the commit logs.

Ok, hopefully I’ve gotten everyone caught up to what I’ve done. Next up, I have some ideas for the future (and I’m sure you do, too), but I won’t get to those until tomorrow.

14 Responses to “What’s new in S5?”

  1. Jer Says:

    It’s good to see S5 development becoming active.

    Are transistions really necessary? I’m no expert on presentations, but I don’t think I’ve ever seen people use transistions in a professional setting; they just distract if anything. The added weight to the program wouldn’t be worth it imho. What are other people’s experiences here?

  2. Jeff Says:

    I’d have to agree… I really don’t see any need for transitions. I’ve been using the original for a while now and am currently looking for a way to automate slide creation for some of my presentations.

  3. Jonathan Snook Says:

    One thing I noticed is that you’re doing:
    var S6 = function(){…}
    var s = new S6();

    Why not just do var S6 = new function(){…} and then have any references within the codebase to refer to S6, instead? If anything, you should be able to make all function calls internal and therefore not even have to reference window.s/window.S6.

    I’m glad you went the OO approach. Eric Meyer made mention of possible performance issues but I’d suspect they’re very minimal.

  4. Dean Edwards Says:

    Eric’s original JS code was 23KB in size. The code has now grown to 27KB *after* adding a 110KB library. Use jQuery instead.

  5. Lars Koudal Says:

    I would say that transitions is not the most important thing to focus on. I’m sure that there can be other areas that need further refinement.

    I have yet to encounter a professional presentation that uses slides, everything is focused on the actual content, and slides would perhaps be fun for hobbyists to use, but I doubt the target audience for S5 would use it very much.

  6. kourge Says:

    It would also be nice to have another version of S5 that utilizes Prototype for better integration. For example, script.aculo.us transition effects.

  7. Asbjørn Ulsberg Says:

    Uhm, nice with a dedicated website and all, but where do I find the code? A “download” link in the menu wouldn’t exactly hurt.

  8. ryan Says:


    Point taken.

  9. Asbjørn Ulsberg Says:


  10. Stephan Spencer Says:

    Is it possible with this version of S5 to add audio to each slide, essentially making a lightweight screencast? I have a separate MP3s for each slide and would like the MP3 to play automatically once the user navigates to the slide.

  11. Christian Effenberger Says:

    I’ve extended the last S5 version from Eric Meyer 1.2a2 by some abilities painfully missed by me (scalable images, transitions, other navigation panel).

    #1 Images do now scale accordingly to text.
    #2 Slides and incremental images use simple fading transitions on change slide event.
    #3 On loading and releasing the slide show transitions are also available.
    #4 Navigation is modified (more keys, different symbol characters, other panel).

    S5 1.3 runs on gecko/webkit/opera without any trouble.

    Since I do not own a PC with Windump and IE 6/7 (thank God), I’ll need the assistance of the user community to fix the surely arising problems with IE.

    To visit and/or download the extended S5 version: http://s5.netzgesta.de

  12. apaella Says:

    Please take a look @ http://blog.amicoimmaginario.it/demo/s5generator/index.php

  13. Markus Says:

    Is this newly created project already dead?

    Please blog some update - if I should choose some of the other, newly created slide tools or if I should stay with S5, but the version of Eric Meyer

    Also, this page could need some more love than a default wordpress blog theme etc.

  14. Markus Says:

    Okay, no answer is also a answer - I stay with the version of Eric Meyer..

    Or wait, it would be more senseful to fork this project and host it on my website where people can really participate.

Leave a Reply