HTML Slides with notes
nbd.neocities.org
nbd.neocities.org
[1] https://github.com/mfontanini/presenterm
[2] https://www.ssp.sh/brain/markdown-presentations-or-slides/
presentation: https://zenomt.github.io/mdslides/mdslides.html
ps: one thing I like on HN is the many related projects linked for each interesting topic, which allow discovery of new tools.
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.
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
Screen capture API > full screen canvas element > css animated clip mask and opacity
I haven't seen better slide transitions than here https://impress.js.org/
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; }
if(cur<sl.length && e.key=='j'){ cur++ }
else if(cur>0 && e.key=='k'){ cur-- }
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--;
}
}
cur<sl.length && e.key=='j' && cur++;
cur>0 && e.key=='k' && cur--
This hideous bit...
b+=("j"==d)-("k"==d)
b+=d=="j";b-=d=="k"
b+=d=="j"&&b<l;b-=d=="k"&&b>0
(i = slide.nextElementSibling)?.className == "slidenote" ? i : slide
]),
slide.querySelector(":scope+.slidenote") ?? slide
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>This seems perfectly heretical.
<script>
document.write(`
<style>
.${location.search.replace(/\W/g, '')}{
display:none
}
</style>
`)
</script>Anyway, nice work! I created something similar for our product (a list of divs that switch visibility based on keyboard input).
// 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()}) if( is_numeric($_GET['current']) ){
file_put_contents( 'current.txt',$_GET['current']);
}
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.
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.
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...
This is just a simple demo but it's really cool how simple and easy it is in practice.
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".