HTML Slides with notes

HTML Slides with notes ... in 22 lines of JavaScript let slides = [...document.getElementsByClassName("slide")] .map((slide, i) => [ slide, (i = slide.nextElementSibling)?.className === "slidenote" ? i : slide ]), current = 0 viewSlides = 0, jump = () => slides[current][viewSlides].scrollIntoView(), bc = new BroadcastChannel("slide_switching"), l = slides.length-1; bc.onmessage = ({data}) => { viewSlides = 1 ^ data.viewSlides; current = data.current; jump(); }; document.addEventListener("keypress", ({key}) => { current += (key == "j") - (key == "k"); current = current < 0 ? 0 : current > l : l : current; viewSlides ^= (key == "n"); bc.postMessage({current, viewSlides}); jump(); }); (Use j and k to navigate, n to swap notes and slides)

Don't worry, I'll walk you all through it in a readable font size!

HTML Slides with notes ... in 22 lines, or 371 bytes of JavaScript let a=[...document.getElementsByClassName("slide")].map((a,b)=>[ a,"slidenote"==(b=a.nextElementSibling)?.className?b:a]),b=0,c=0, d=()=>a[b][c].scrollIntoView(),e=new BroadcastChannel("s"),l=a. length-1;d();e.onmessage=({data:a})=>{c^=a.c,b=a.b,d()};document. addEventListener("keypress",({key:f})=>{b+=(f=="j")-(f== "k");b=b<0?0:b>l?l:b;c^=f=="n";e.postMessage({c,b});d()})

... but not before pointing out that this really minifies to super-tiny code - and still is practical to use!

But first, some attribution This code builds on minslides (https://ratfactor.com/minslides/) by Dave Gaur. // golfed minslides, 173 bytes let a=document.getElementsByClassName("slide"),b=0,c=a.length-1; document.addEventListener("keypress",({key:d})=>{b+=("j"==d)- ("k"==d),b=0>b?0:b>l?l:b,a[b].scrollIntoView()}) My addition: notes in a second window (Also the hand-optimized minifaction)

I want to credit Dave Gaur for coming up with minslides. For me it was yet another reminder that browsers are "batteries included" for surprisingly many scenarios as long as you bother to dig into the APIs available. Case-in-point: it turned out to be ridiculously simple to add note support in a second window! Here, let me show you by switching between notes and slides with a keypress ( n , to be exact)

Let's define our slide

Anything in here is one slide (who needs components?)

(optional) Anything in here is a slide note for the slide above

Notes are optional, but must follow the slides that they are for. To switch to the note view, press n

So how to determine is something is a slide? Well, why not use plain old

with a slide class? And let's define slide notes as a div with a slidenote class. Easy. This also lets us put anything in our slide that we are allowed to put into a plain webpage. Also, we can write a plain old markdown file (or whatever you prefer), and separate the slides by inserting those div tags (like I did for these slides, actually)

CSS to make a slide fit the screen div.slide, div.slidenote { height: 100vh; width: 100vw; /* Other slide styling options below */ ... ... } Yes, it's that simple

Of course, we want our slides to be exactly as big as the screen in full-screen, and as big as the window when windowed. Turns out modern CSS has a ludicrously simple way to do that.

... continue reading