A little thread about an extremely simple web-based slideshow I made for my MathsJam talk yesterday.
You can see it at somethingorotherwhatever.com/e
I wanted to show a little bit of text next to a graphic that changes on each slide.

For years I've been using reveal.js for presentations, because I do _not_ get on with powerpoint, and I often want to embed web stuff. It's really good, but there's always a point where I get frustrated trying to lay stuff out.

reveal.js is 10 years old now, and the way it works has changed a bit to keep up with new stuff in browsers. So each time I make a presentation, I have to decide if I'm going to update reveal.js, and see if it's got a way of doing something I had to hack in before.

My solution lately has been to use CSS display: grid on slides, because I know how to centre stuff and share out space in a fairly straightforward manner.

But it's always a faff, and reveal.js is now so big I spend a lot of time trying to understand how it works.

What do you do when you don't understand how a complicated bit of software works? Write your own copy from scratch!
Then you have only yourself to blame.

The thing that got me this time was having the same graphic displayed on a range of slides, and updating it depending on which slide is shown. I spent a couple of hours fiddling with reveal.js's events API before giving up.

I came up with something very simple: each slide is a <section> tag, styled to 100vh height and laid out vertically, so you only see one at a time. They have tabindex="0" so you move between them by pressing Tab.

I was expecting to have to write a thing to call scrollIntoView on the next slide, but Firefox automatically scrolls an element into view when you focus it, so I got the fundamentals of a slideshow without any JS!

To update the graphic, I added a 'focus' event listener to each <section> tag, calling a function 'update_graph' with the index of the tag among its siblings.

That's it! It worked brilliantly.

I think for a set of slides I want other people to be able to use, it'd need more stuff: at the moment it only knows which slide is shown from focus events, but it should really pay attention to scrolling too.


@christianp I just use css scroll snap nowadays which also does the job well nowadays. Arrow keys are enough. Horizontally it's a little unusual but a note on the first slide siffices. I usually make my headings auto-link out of markdown to get anchors for slides; then tabbing works to navigate, too.

Sign in to participate in the conversation

The social network of the future: No ads, no corporate surveillance, ethical design, and decentralization! Own your data with Mastodon!