HN Explorer

22 comments

[ 0.24 ms ] story [ 39.1 ms ] thread
asplake
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.
small_scombrus
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

hecanjog
I love it, but it was very disorienting to use `j` to move forward and `k` to move backward.
econ
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.

chrismorgan 

  (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
You could also make the notes mandatory.
lukaslukas
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).

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

wosined
Maybe it would be easy to add the shortcuts g - jump to first slide G - jump to last slide
virajk_31
Nice, I hv been working on engine that renders pptx (without compromising original styles) in web browsers...
Jotalea
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

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

jeromechoo
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
Having the notes on a phone seems useful.
xiphias2
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()})
econ
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.