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.

2 favourites 1 retweet

In reply to @christianp

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.

1 favourite 0 retweets

In reply to @christianp

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

0 favourites 0 retweets

In reply to @christianp

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

0 favourites 0 retweets

In reply to @christianp

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.

0 favourites 0 retweets

In reply to @christianp

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.

0 favourites 0 retweets

In reply to @christianp

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.

1 favourite 0 retweets

In reply to @christianp

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!

1 favourite 0 retweets

In reply to @christianp

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.

0 favourites 0 retweets

In reply to @christianp

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.

0 favourites 0 retweets

In reply to @christianp

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.

0 favourites 0 retweets

In reply to @christianp

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.

0 favourites 0 retweets

In reply to @christianp

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!

1 favourite 0 retweets

View this tweet on twitter.com

This tweet as JSON