10k Apart: 10k Slides

Creating a presentation application in as many bytes as a favicon.

Many years ago—long after it was over—I heard about the 5k challenge. Reading about the event was inspiring. Constraints breed creativity. Making things small and fast is worthwhile. It hones our skills and generates new techniques that allow us to optimize when working on larger projects.

To this day, one quote from the article sticks in my mind.

Halfway through the judging, we hated this contest. Not because the work was bad. But because so much of it was so very, very good.

I was jealous, sad I missed out.

Luckily, in 2016, A List Apart and Microsoft teamed up to run the event again. It was called 10k Apart. I wrote a presentation application called 10k Slides.

10k Slides received an honorable mention. I was delighted. Looking around at the other entries, I was floored by the level of quality.

10k Apart serves as an inspiration in a time when many pages weigh 1000 times that (really, 10mb).

10k Slides

10k Slides is a browser-based presentation application that uses no libraries. It's an application I occasionally use at work for simple presentations. It is simple and fast.

To see the results, check out the GitHub repo or the hosted version.

The slideshow is written in a text area using a lightweight format inspired by Markdown. (If I were to do this again, I would more use a flavor of Markdown).

The slideshow is saved using local storage.

Generating the slideshow is isomorphic. When JavaScript is enabled, the slideshow renders and displays as a single page application. When JavaScript is not enabled (or is broken, or the user is faster than JavaScript loading), the slideshow text is sent to a Node server which generates and returns the slideshow. This version of the slideshow uses anchor tags and hashes to link between slides, making the slideshow interactions possible with only CSS.

The techniques behind the non-JS CSS interactions discussed in CSS3 Interactive Interfaces.