minslides - Easiest Presentation Slides Ever?

Created: 2023-01-11
Updated: 2023-02-26

Quick links:

Goals

I’d like to make a presentation with slides that:

Is an actual web page, so "publishing to the Web" is, like…done.
Works like a web page (you can just scroll down through all the content like normal)
Shows each slide as if it were a separate screen/page
Has keyboard controls for next/previous slide

And jeez, is it easy to roll your own slide tool in HTML, CSS, and a tiny bit of JS these days. I sometimes moan that the Web has gained so much complexity over the years, but they’ve also managed to get some really useful stuff in there now and then too!

Two lines of CSS

Making a <div> act as if it were an entire screen is super simple with the vh (viewport height) relative units:

<style>
    div.slide { height: 100vh; }
</style>

Which means the slides themselves are just HTML content in div tags with the slide class:

<div class="slide">
    <h1>Page 1</h1>
    Hello world, this is page 1.
</div>
<div class="slide">
    <h1>Page 2</h1>
    Page two, this is.
</div>

And if that weren’t cool enough, you can also scale the whole page’s font size by the viewport height, or width, or the bigger or smaller of the two:

    body { font-size: 6vw; }    /* 6% of viewport width */
    body { font-size: 6vh; }    /* 6% of viewport height */
    body { font-size: 6vmin; }  /* 6% of the smaller viewport dimension */
    body { font-size: 6vmax; }  /* 6% of the larger viewport dimension */

The min and max options are very compelling if you’re not sure what screen the content might be viewed upon. After some testing, I like vmin for a huge variety of screen aspect ratios in both portrait and landscape orientation. Here’s what I ended up with for pretty huge text that scales quite nicely:

<style>
    body { font-size: 6vmin; }
</style>

(Note: Once I started adding images to my talk, it definitely required some tweaking to get right. But even the images can be scaled and/or restricted to the viewport width and height. These vw and vh units are my new favorite thing about CSS.)

About ten lines of JS

Having to actually scroll normally down the page to get to the next slide would kind of defeat the purpose of this tool, so I wanted some super simple keyboard controls. I find that the vi/vim style hjkl navigation keys are actually more accessible (to those in the know) than the "arrow keys" across a wider range of devices and keyboards. And they just give me geeky joy.

So thanks to the glorious simplicity of Element.scrollIntoView() (mozilla.org / MDN), it was crazy easy to set this up:

<script>
    // Yes, this really is the entire slide 'j' and 'k' keyboard navigation program.
    var slides = document.getElementsByClassName("slide");
    var current = 0;

    document.addEventListener('keypress', function(event){
        if(event.key == 'j'){ current++; }
        if(event.key == 'k'){ current--; }
        if(current < 0){ current = 0; }
        if(current >= slides.length){ current = slides.length - 1; }
        slides[current].scrollIntoView();
    });
</script>

That’s it. Now I can hit the J key to "flip through my slides".

(Hey kids, do you have any idea how hard that would have been to get working with early 2000’s "DHTML"? That’s Dyanamic HTML for you whippersnappers, and it’s what we called it when you used JavaScript with Hypertext Markup Language and Cascading Style Sheets to make a World Wide Web page that could dance and sing before your astounded eyes. It was also bonkers hard to get anything working reliably.)

Anyway, that’s it. That’s my story.