3 ms·
Here's my neo-Luddite take on this. Slides with support for notes in a synchronized second window in just 371 bytes of minified javascript, some HTML and some C
by vanderZwan 1y ago
Here's my neo-Luddite take on this. Slides with support for notes in a synchronized second window in just 371 bytes of minified javascript, some HTML and some CSS:
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()});
div.slide, div.slidenote {
height: 100vh;
width: 100vw;
/* Other slide styling options below */
...
...
}
<div class="slide">
Anything in here is one slide
</div>
<div class="slidenote">
(optional) Anything in here is
a note for the slide above
</div>
You can trivially use the HTML and CSS inside markdown, so any markdown parser that generates HTML is now an ultra-lightweight slides generator.
For a deeper explanation, see Dave Gaur's original minslides[0] and my own presentation on how I added note-support to it and golfed the JS code[1].
[0] https://ratfactor.com/minslides/ https://ratfactor.com/minslides/
[1] https://nbd.neocities.org/slidepresentation/Slide%20presentation%20about%20slides https://nbd.neocities.org/slidepresentation/Slide%20presenta...