HTML Slides with notes

(nbd.neocities.org)

50 points | by Curiositry 9 hours ago ago

11 comments

  • fjfaase an hour ago

    I use HTML for my presentations and publish them online mentioning the URL at the top, such that people can open them on their device, which is often a smart phone. I take that into account for the interactive parts of the presentation.

  • lukaslukas an hour ago

    Haha, I see people talking about slides everywhere, from specific moment in my life... that's when I started coding slidepicker.com!

    Anyway, nice work! I created something similar for our product (a list of divs that switch visibility based on keyboard input).

  • hecanjog 5 hours ago

    I love it, but it was very disorienting to use `j` to move forward and `k` to move backward.

  • chrismorgan 4 hours ago

      (i = slide.nextElementSibling)?.className == "slidenote" ? i : slide
      ]),
    
    An alternative approach:

      slide.querySelector(":scope+.slidenote") ?? slide
    
    (|| would work just as well as ??, but ?? feels more appropriate.)
  • asplake 6 hours ago

    Could add clicker support (which I have done previously). Note however that clickers vary between Up/Down and PgUp/PgDown. Enabling the former was potentially annoying if you like to use the arrow keys to scroll, so I made that configurable. Alternatively you configure mappings per device outside the browser.

    • jakegmaths 2 hours ago

      I find it infuriating when clickers say they send page up/down but actually send regular up/down key events.

  • small_scombrus 5 hours ago

    This is really cute!

    I have a special spot in my heart for tools that do a good job of explaining themselves using their own outputs.

    I wonder how hard it would be to add the cute old PowerPoint style transitions using CSS

    • nhinck2 4 hours ago

      Not too hard depending on the level of jankiness you're willing to endure.

      Screen capture API > full screen canvas element > css animated clip mask and opacity