5 ms·
HTML Slides with notes
- asplake 11mo agoCould 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 11mo agoI find it infuriating when clickers say they send page up/down but actually send regular up/down key events.
- small_scombrus 11mo agoThis 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
- nhinck2 11mo agoNot 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
- paulsmith 11mo agoYou can wrap the navigation event in document.startViewTransition() and get something basic out of the box: https://codepen.io/pauladamsmith/pen/VYeJMMb https://codepen.io/pauladamsmith/pen/VYeJMMb
- zazaulola 11mo agoWhich transitions in Powerpoint are special? I haven't seen better slide transitions than here https://impress.js.org/ https://impress.js.org/
- econ 11mo agoI would use this https://youtu.be/A1XRbPQE9-M?si=VWatyCxmR-ADZKWJ https://youtu.be/A1XRbPQE9-M?si=VWatyCxmR-ADZKWJ
- hecanjog 11mo agoI love it, but it was very disorienting to use `j` to move forward and `k` to move backward.
- moravak1984 11mo agolol yeah... "tell me you are lefty without telling me you are lefty"
- tbossanova 11mo agojk
- chrisweekly 11mo agoFastmail uses these too, as does vim.
- hecanjog 11mo agoHa, 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
- chrismorgan 11mo 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 11mo agoYou could also make the notes mandatory.
- chrismorgan 11mo agoOr 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 11mo agoI 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>
- lukaslukas 11mo agoHaha, 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 11mo agoI 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 11mo agoThe 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 11mo agoMaybe it would be easy to add the shortcuts g - jump to first slide G - jump to last slide
- virajk_31 11mo agoNice, I hv been working on engine that renders pptx (without compromising original styles) in web browsers...
- Jotalea 11mo agoone 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 https://jotalea.com.ar/tests/tpanticx
- fodkodrasz 11mo agoI used https://revealjs.com/ https://revealjs.com/ in the past for this successfully. I have very good experience with that from circa 10 years ago.
- chrismorgan 11mo ago... in 22 lines of JavaScript?
- fodkodrasz 11mo agoNot, 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.
- cachius 11mo agoI 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.
- jy14898 11mo agoOpen the page in two windows, with one that has note mode enabled
- cachius 11mo agoThanks, 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/BroadcastChannel https://developer.mozilla.org/en-US/docs/Web/API/BroadcastCh...
- sunnyam 11mo agoYou 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.
- articsputnik 11mo agoI 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 https://github.com/mfontanini/presenterm [2] https://www.ssp.sh/brain/markdown-presentations-or-slides/ https://www.ssp.sh/brain/markdown-presentations-or-slides/
- nairadithya 11mo agoThere's also marp https://marp.app/ https://marp.app/
- Curiositry 11mo agoI 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.
- zenomt 11mo agoi 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 https://zenomt.github.io/mdslides/mdslides.html repo: https://github.com/zenomt/mdslides https://github.com/zenomt/mdslides
- mbo 11mo agoself 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=Slide%20infrastructure https://maxbo.me/a-html-file-is-all-you-need.html#:~:text=Sl...
- jeromechoo 11mo agoI’m sure this is great on desktop but lack of mobile support today is kindof a bummer. It doesn’t even degrade gracefully.
- econ 11mo agoHaving the notes on a phone seems useful.
- xiphias2 11mo agoThe 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 11mo agoThis 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.