A little thread about an extremely simple web-based slideshow I made for my @BigMathsJam talk yesterday.
You can see it at somethingorotherwhatever.com/each-edge-peac…
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

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.

This time, there were no links or interactive bits in the slides that people might want to access on their own, do I just needed it to work for me during the presentation.

Anyway, I'm not going to make any effort to share this system for other people to make presentations with.
The point is that it's idiosyncratic, a product of exactly the things I know how to do and don't know how to do.

thanks to @pkrautz for telling me about CSS scroll-snap, which lets me insist that you can't scroll halfway between slides. I've replaced the focus listener with a scroll listener, so this now works nicely with just scrolling!