November 6, 2025
Slide into the drama
HTML Slides in 22 Lines of JavaScript
Tiny code, huge debate: keys, clickers, and retro vibes
TLDR: A 22-line script turns a web page into slides with a notes view, impressing fans of simple tools. Comments exploded over key controls (j/k vs arrows), clicker support, and retro transitions, with code purists suggesting tweaks—proof that tiny tech can spark big, useful debate.
A tiny 22‑line JavaScript trick turns plain web pages into full-screen slides—with a secret notes view you can toggle by pressing “n”—and the internet promptly turned it into a keyboard war. Built on minslides and proudly “batteries‑included,” the demo’s simplicity had fans cooing “so cute,” while others immediately demanded sparkly PowerPoint‑style transitions. “Can we please have star wipes?” was the vibe, with one commenter begging for old‑school whooshes via CSS.
The spiciest thread? Keybindings. The author mapped forward/back to “j” and “k,” which some users love (it’s a nod to keyboard‑heavy browsing), but one voice summed up the backlash: it’s disorienting. Meanwhile, practicality police showed up with a megaphone: add clicker support for presentation remotes—except those remotes don’t agree on which keys to send. Cue a mini drama about making controls configurable versus keeping the script gloriously minimal.
Then the code purists stepped in, swapping one‑liners like trading cards—suggesting a sleeker selector for notes (“:scope+.slidenote,” anyone?). And of course, there was a cheeky self‑promo drop for slidepicker.com, proving no dev thread is safe from hustle. Verdict: a tiny hack set off big feelings—nostalgia, nerdy nitpicks, and a surprising amount of passion over which key moves the slide.
Key Points
- •A slide system is implemented in 22 lines (~371 bytes) of JavaScript, extending Dave Gaur’s minslides.
- •Slides are div elements with class 'slide'; optional notes follow in divs with class 'slidenote'.
- •Navigation uses getElementsByClassName to gather slides and scrollIntoView to switch slides; keypresses j/k control navigation.
- •Notes are paired using nextElementSibling checks; spread syntax converts the array-like slides list into an array for mapping.
- •Pressing 'n' toggles between slide and note views, enabling multi-window note display.