A little thread about an extremely simple web-based slideshow I made for my MathsJam talk yesterday.
You can see it at https://somethingorotherwhatever.com/each-edge-peach-pear-plum-mathsjam-2021/
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.
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 @pkra 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!
@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.
Your chart is ready, and can be found here:
Things may have changed since I started compiling that, and some things may have been inaccessible.
The chart will eventually be deleted, so if you'd like to keep it, make sure you download a copy.
The social network of the future: No ads, no corporate surveillance, ethical design, and decentralization! Own your data with Mastodon!