HTML Slides with notes(nbd.neocities.org)

nbd.neocities.org

https://nbd.neocities.org/slidepresentation/Slide%20presentation%20about%20slides

45 comments

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/

zenomt8개월 전

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

nairadithya8개월 전

There's also marp

https://marp.app/

Curiositry8개월 전

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.

fodkodrasz8개월 전

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

chrismorgan8개월 전

... in 22 lines of JavaScript?

fodkodrasz8개월 전

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.

hecanjog8개월 전

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

econ8개월 전

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.

chrisweekly8개월 전

Fastmail uses these too, as does vim.

hecanjog8개월 전

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

tbossanova8개월 전

moravak19848개월 전

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

Diti8개월 전

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.

jgtrosh8개월 전

A vimmer*

wosined8개월 전

or just an evil emacs user

branor8개월 전

not all emacs users are evil!

small_scombrus8개월 전

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

paulsmith8개월 전

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

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

zazaulola8개월 전

Which transitions in Powerpoint are special?

I haven't seen better slide transitions than here https://impress.js.org/

econ8개월 전

I would use this

https://youtu.be/A1XRbPQE9-M?si=VWatyCxmR-ADZKWJ

nhinck28개월 전

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

econ8개월 전

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.

asplake8개월 전

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.

jakegmaths8개월 전

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

chrismorgan8개월 전

  (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.)

econ8개월 전

You could also make the notes mandatory.

chrismorgan8개월 전

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>

econ8개월 전

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>

lukaslukas8개월 전

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).

xiphias28개월 전

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

fjfaase8개월 전

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.

econ8개월 전

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.

cachius8개월 전

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.

sunnyam8개월 전

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.

jy148988개월 전

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

cachius8개월 전

Thanks, I totally missed that the site is intended to be opened in multiple windows/tabs! That lede is buried in the code.

Wasn't familiar with BroadcastChannel, which allows communication between different ... windows and tabs ... of the same origin

https://developer.mozilla.org/en-US/docs/Web/API/BroadcastCh...

Jotalea8개월 전

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

jeromechoo8개월 전

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

econ8개월 전

Having the notes on a phone seems useful.

mbo8개월 전

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_318개월 전

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

TheSilva8개월 전

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

virajk_318개월 전

nope, however my use case requires high level of customization so I had to build it from scratch...

wosined8개월 전

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