Get the latest tech news
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! ...
None
Or read this on Hacker News
