HTML Slides with notes

29 comments

• fodkodrasz 10 hours ago

  I used https://revealjs.com/ in the past for this successfully. I have very good experience with that from circa 10 years ago.

• articsputnik 9 hours ago

  I found Presenterm [1] to be optimal for me. Simple and works in the terminal, yet powerful to export to PDF and HTML. It supports Mermaid and images. I'm also collecting a list [2] with other Markdown-first presentation tools, and according to the git stars, reveal.js seems to be the most popular. Tough for me, it was too heavy.

  [1] https://github.com/mfontanini/presenterm

  [2] https://www.ssp.sh/brain/markdown-presentations-or-slides/

  [-]
  • nairadithya 8 hours ago

    There's also marp

    https://marp.app/

• hecanjog 16 hours ago

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

  [-]
  • chrisweekly 8 hours ago

    Fastmail uses these too, as does vim.

  • tbossanova 14 hours ago

    jk

  • moravak1984 15 hours ago

    lol yeah... "tell me you are lefty without telling me you are lefty"

    [-]
    • Diti 11 hours ago

      Those are Vim bindings. The J key rests right under your index finger (and it’s easy to find it thanks to the nudge on your key), which enables you to spend little to no energy to “scroll down”; the K key is for scrolling up.

    • jgtrosh 14 hours ago

      A vimmer*

      [-]
      • wosined 11 hours ago

        or just an evil emacs user

        [-]
        • branor 9 hours ago

          not all emacs users are evil!

• xiphias2 6 hours ago

  The original code is really nice:

    // 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()})

• chrismorgan 15 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.)
• small_scombrus 16 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

  [-]
  • paulsmith 8 hours ago

    You can wrap the navigation event in document.startViewTransition() and get something basic out of the box:

    https://codepen.io/pauladamsmith/pen/VYeJMMb

  • nhinck2 15 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

• cachius 10 hours ago

  I find the notes mode confusing. You can't tell if you're viewing a note or a slide.

  Why would you use it? In PowerPoint the point of notes is to have an aside view for the presenter for extra info. Here all is revealed to the viewer.

  [-]
  • sunnyam 9 hours ago

    You could share a screen with the slides and have the notes visible to yourself. Also the notes mode has a dashed border around it.

    This is just a simple demo but it's really cool how simple and easy it is in practice.

  • jy14898 9 hours ago

    Open the page in two windows, with one that has note mode enabled

• jeromechoo 7 hours ago

  I’m sure this is great on desktop but lack of mobile support today is kindof a bummer. It doesn’t even degrade gracefully.

• mbo 7 hours ago

  self plug: one of my articles also has its own slide infrastructure (exposed to the reader as well!): https://maxbo.me/a-html-file-is-all-you-need.html#:~:text=Sl...

• lukaslukas 13 hours 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).

• Jotalea 10 hours ago

  one thing that I immediately noticed is that this site has no mobile support at all.

  that's why I will link this presentation I made, in just a few hours, for a school project. it has mobile support, automatic fullscreen, and is still lightweight. unfortunately, I lost the code for the engine alone, so I only have the "exported product".

  https://jotalea.com.ar/tests/tpanticx

• fjfaase 12 hours 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.

• asplake 17 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 13 hours ago

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

• virajk_31 10 hours ago

  Nice, I hv been working on engine that renders pptx (without compromising original styles) in web browsers...

  [-]
  • TheSilva 10 hours ago

    Have you check https://pitch.com/ ?

• wosined 11 hours ago

  Maybe it would be easy to add the shortcuts g - jump to first slide G - jump to last slide