Comment by starfallg

12 hours 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.

The concept that's MAGICAL in Reveal.js is vertical slides.

e.g. 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!

  • It'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....

  • That'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!

This 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?

  • My 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!

    • My 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.

  • You 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.

    • Something 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! :)

      1 reply →

The 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)?

Nice 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?

  • Yeah, 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.

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

  • The 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.