HTML Slides with notes

(nbd.neocities.org)

87 points | by Curiositry 3 days ago ago

43 comments

  • fodkodrasz 3 days ago ago

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

    • chrismorgan 2 days ago ago

      ... in 22 lines of JavaScript?

      • fodkodrasz 2 days ago ago

        Not, but in an actually useful way.

        ps: one thing I like on HN is the many related projects linked for each interesting topic, which allow discovery of new tools.

  • hecanjog 3 days ago ago

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

    • econ 2 days ago ago

      The other day I was reminded how SketchUp was a 3D drawing application without a learning curve. Today we get a slide show that needs a manual.

      I suppose the right key is to use the space bar. But then the html moves to the next page without any js. (Shift space to page back)

      Presto even loaded the "next>" link if one pressed space at the end of the page.

    • chrisweekly 3 days ago ago

      Fastmail uses these too, as does vim.

      • hecanjog 2 days ago ago

        Ha, yeah I think it's my vim muscle memory that made it feel so weird. `j` going left instead of down and `k` going right instead of up. `h` and 'l` probably would have made me feel right at home though. (And in fairness, changing the keys is trivial in this case!) :-p

    • tbossanova 3 days ago ago

      jk

    • moravak1984 3 days ago ago

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

      • Diti 3 days ago 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 3 days ago ago

        A vimmer*

        • wosined 3 days ago ago

          or just an evil emacs user

          • branor 3 days ago ago

            not all emacs users are evil!

  • articsputnik 3 days ago 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/

    • zenomt 3 days ago ago

      i made a toolset i call "mdslides" for making pure HTML+CSS (no JavaScript) presentations in Markdown. it's just a CSS stylesheet and an 8 line Awk preprocessor for a slide delimiter, adding just enough HTML wrapping to work with the stylesheet. the stylesheet adds page breaks at each slide so you can get a PDF by asking your browser to print/save-as-PDF. it should work with any CommonMark Markdown formatter (i use "md2html" from the MD4C project).

      presentation: https://zenomt.github.io/mdslides/mdslides.html

      repo: https://github.com/zenomt/mdslides

    • nairadithya 3 days ago ago

      There's also marp

      https://marp.app/

      • Curiositry 2 days ago ago

        I tried to use pandoc+revealJS, then tried presenterm (which was really nice but didn't give me enough control over font sizes), and then settled on Marp, which worked great.

  • econ 2 days ago ago

    This is my favorite size project. It allows us to be pedantic about every detail.

    When the key press event is triggered current is to be increased or decreased if two conditions are met. One shouldn't check just one, take action then change it back if the other condition isn't met.

       if(e.key == 'j'){ cur++; }
       if(e.key == 'k'){ cur--; }
       if(cur < 0){ cur = 0; }
       if(cur >= sl.length){ cur = sl.length - 1; }
    
    something like...

       if(cur<sl.length && e.key=='j'){ cur++ }
       else if(cur>0 && e.key=='k'){ cur-- }
    
    The else is there because we don't need to check the other condition if the first is true.

    Not that the original code doesn't work. I just want to execute instructions needed and avoid unnecessary ones if it is simple enough. The case where we try to increase beyond the array size would still trigger the second check. Even more correct would be:

       if(e.key == 'j'){ 
        if(cur < sl.length){
          cur++; 
        }
       }else if(e.key == 'k'){
        if(cur > 0){
          cur--;
        }
       }
       
    To make it uglier the if can go...

       cur<sl.length && e.key=='j' && cur++;
       cur>0 && e.key=='k' && cur-- 
    
    As it won't check the next condition if the first fails.

    This hideous bit...

       b+=("j"==d)-("k"==d)
    
    Could be slightly less ugly and one character shorter

       b+=d=="j";b-=d=="k"
    
    Then we can shovel the other conditions inthere too!

       b+=d=="j"&&b<l;b-=d=="k"&&b>0
    
    You see, with just a little effort we may improve nothing.
  • chrismorgan 3 days ago 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.)
    • econ 2 days ago ago

      You could also make the notes mandatory.

      • chrismorgan 2 days ago ago

        Or put the notes inside the slide, and then CSS is enough, the JavaScript doesn’t even need to know about notes:

          Notes:
          <label><input type=radio name=notes id=notes-hide checked> Hide</label>
          <label><input type=radio name=notes id=notes-inline> Inline</label>
          <label><input type=radio name=notes id=notes-only> Only</label>
        
          <section>
              Slide
        
              <aside>
                  Notes
              </aside>
          </section>
        
          <style>
              section {
                  position: relative;
              }
        
              aside {
                  background: #feb;
                  padding: 1em;
        
                  body:has(#notes-only:checked) & {
                      position: absolute;
                      inset: 0;
                  }
        
                  body:has(#notes-inline:checked) & {
                      margin-top: auto; /* concept: if the slide uses flex, notes can try sticking to the bottom */
                  }
        
                  body:has(#notes-hide:checked) & {
                      display: none;
                  }
              }
          </style>
        • econ a day ago ago

          I think one would want either slides or notes?

          This seems perfectly heretical.

              <script>
              document.write(`
              <style>
              .${location.search.replace(/\W/g, '')}{
                display:none
              }
              </style>
              `)
              </script>
  • small_scombrus 3 days ago 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

  • xiphias2 3 days ago 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()})
  • asplake 3 days ago 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 3 days ago ago

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

  • lukaslukas 3 days ago 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).

  • cachius 3 days ago 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 3 days ago 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 3 days ago ago

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

  • fjfaase 3 days ago 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.

    • econ 2 days ago ago

      The backend could be just...

          if( is_numeric($_GET['current']) ){
            file_put_contents( 'current.txt',$_GET['current']);
          }
      
      Then could post it it when the clock advances by a second, shortly before the slide advances on the main screen. Aggressively poll it on the clients to figure out how many ms after the whole second to poll.

      All the screens would advance simultaneously which would impress the developers.

      If someone in the audience has a question they can press a button to have their face and audio streamed to the big screen. Modified by LLM of course, or it would be pointless to have.

  • Jotalea 3 days ago 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

  • jeromechoo 3 days ago 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.

    • econ 2 days ago ago

      Having the notes on a phone seems useful.

  • mbo 3 days ago 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...

  • virajk_31 3 days ago ago

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

  • wosined 3 days ago ago

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