4 ms·
Hi, I'm the creator of Bento. Just wanted to share a bit more about how I created it beyond what's in Github. The file contains more or less two sections. Ther
by starfallg 3mo ago
Hi, I'm the creator of Bento. Just wanted to share a bit more about how I created it beyond what's in Github.
The file contains more or less two sections. There is a plain block of JSON near the top of the file which is the slide data. You can read, grep, or point a harness at it. The app itself is in a base64 blob that loads through a small shim which deflates in the browser with DecompressionStream, which keeps the package small and so that we don't need to fetch any external files at runtime. File System Access API is used for JSON writeback into the same file, which falls back to a plian download and all updates are ECDSA signed.
I started with reveal.js which served as a base, and incorporated GSAP/Flip to handle the animation. Then I added charting with echarts, but due to a number of issues with size and how the worked, I ended up re-implementing both.
What I'm most pleased about is how seamless the CRDT works. The blind relay is a small file that runs on Cloudflare Durable Objects, and all it sees are the encrypted data from the clients. Collab is off until we turn it on in the app (by starting a session by sharing by invite file), and then some sets of keys are generated. Access is handled by user key, and you can have read-only users, and also revoke live collab access by user as well.
- mbreese 3mo agoThis was my biggest question. Thanks for preemptively answering (and being proud!). When I was playing with this, I immediately thought of TiddlyWikis, which I've always been fond of, but they never took for me. However, an easily editable presentation -- that's a use case I can understand. I couldn't see how there was a CDRT when I'm just working with a single file. I was trying to figure out where the server was. So -- this is just on for everyone? Are you concerned that your Cloudflare account will be hammered with this?
- starfallg 3mo agoYou can play around in the guestbook. I'm in it right now and you can see me editing things. Cloudflare Durable Objects are pretty cheap and I'm using it like a very basic pub/sub with each deck having it's own DO. I did some calculations and it should be well within my spend limits.
- francozanardi 3mo agoSomething super small that I've noticed in the guestbook: since there're a lot of people connected, I noticed that every time I received an update, I lost the focus of my text element, so it was a little bit difficult to write something. It may be annoying if two users are working at the same time in the same project. Again, very cool project! :)
- starfallg 3mo agoYup, I've made a note of this and will fix it once the Show HN traffic eases off a bit. Thanks for the feedback and the kind words!
- rpdillon 3mo agoMy project for the past few years is called AppDeck, collection of self-contained HTML files that know how to save themselves back to the AppDeck server, which is just WebDAV. AI has been enormously helpful in building out a suite of apps that can do this. So far I have a diagram editor that can produce SVGs, a multi-document editor that backs everything with markdown, but supports Kandan boards, documents, logs, and calendars. I also have a work flowy clone that I've really been enjoying organizing ideas with at work. There's a gallery app that inlines all of the images and can display them full screen in a light box and with a timed slideshow that also supports captions and encryption. All of it just runs out of a folder on disk and can either be deployed locally or on a server behind a login. I intend to open source it, but I'm not quite proud enough yet of some of the implementation aspects to do so. Hope to do it this summer though!
- Mtinie 3mo agoMy initial reaction was “woah, you just described HyperCard”. Which isn’t exactly true in retrospect, but kudos for capturing the promise of (at least for me) one of the formative technologies that subtly, and not so subtly, influenced the web we know today.
- allisdust 3mo agoI would call this a slide show not powerpoint mostly because making it work with the satanic office formats is a path to hell. Hopefully simpler formats like this will become the norm and the old ones can die.
- starfallg 3mo agoYou are right, but I guess a lot of people recognise PowerPoint as a brand. Maybe I can bill this as better-than-powerpoint!
- stackghost 3mo agoThe term "powerpoint" has been genericized in the common vernacular to mean any electronic slide show, like kleenex for tissues and sellotape/scotch tape for transparent adhesive tape. It might not have reached legal generic status but just about any working professional will understand what you mean if you refer to "making a powerpoint deck" even if you don't use the actual Microslop product.
- ronyeh 3mo agoNice idea. What happens if you upgrade to v2 and my slide decks are on v1? Can I click upgrade and get the JSON slide deck data exported into a v2 shell?
- starfallg 3mo agoYeah, upgrades are pretty seamless so far as the JSON format for the slide data is pretty forgiving. You can also export and reimport the data. It's in the split pill next to Save.
- inanutshellus 3mo agoThe concept that's MAGICAL in Reveal.js is vertical slides. e.g. https://revealjs.com/#/2/1 https://revealjs.com/#/2/1 <-- from here you can go up or down, then go right to continue the presentation. You just make one slide deck with lightweight high-abstraction slides and depending on the audience you just... hit the down arrow. bam. now you're inside the tech slides. no nerdy tech guys? sweet, don't hit down on slide 3. Instead you're with the marketing guys, so hit down on slide 5. Anyway - looks like you got rid of that in order to mimic Powerpoint, but... don't forget it's there. it's my favorite part of using Reveal.js!
- starfallg 3mo agoThat's a great point. I went down the state slide route in order to handle a similar type of use-case, but I'll look into this and see if we can incorporate that somehow. It seems like a really elegant way to implement some state slide use cases. And thanks for the heads-up on this!
- sdoering 3mo agoCould the hidden state slides "just" react to a down arrow press as well as to the click? But then they probably would have to have an order somehow? Just my two cents.
- starfallg 3mo agoTechnically yes, and the order is just dependent on the chain of the keypress event triggering slide changes. Will investigate the best way to do this.
- chrisweekly 3mo agoIt'd be cool to add a third dimension to reveal.js decks. One of the transition animation options is "zoom", which visual effect is like going into / through the current slide. The Overview mode could be enhanced to show a 3D map (a stack of 2D layers). All kinds of fun mazes / games / interactive fiction use cases come to mind....
- PhilippGille 3mo agoThe project looks very interesting, thanks for sharing! You seem to have created a new GitHub account just for this project a week ago. Do you have any other GitHub accounts that enable us to see a track record of your work (maintenance, security)?
- ericyd 3mo agoGood faith question: what would you do with this information if you had it? For example, do you have a systematic audit plan for github accounts that you execute before using a project?
- chr15m 3mo agoWould be cool to use Nostr relays, then you don't have to depend on the proprietary CloudFlare infrastructure.
- starfallg 3mo agoThanks for the pointer on this, will check this out.
- appplication 3mo agoVery cool! FYI I was able to cause all sorts of hell by pinch zooming on mobile safari. This seemed to throw off the click and drag select box and on one occasion crashed the page entirely.
- starfallg 3mo agoLet me reproduce it on iOS and push out a fix shortly. Thanks for the heads up.
- moontear 3mo agoHow do we UPDATE the underlying engine once it gets new features? Since this is a self contained HTML file I am not sure how this works. Editing multiple things at once (select via CTRL) needs some more options (like text centering).