I wrote a simple file encryption app some years ago that is a single self-contained HTML file. When you use it to encrypt files, it outputs another self-contained HTML file with a copy of the encrypted data inside, along with the code to decrypt it (if the correct password is specified): https://hypervault.github.io/
Web apps in a single, portable, self-updating, vanilla HTML file
111–120 of 240 posts
Re: Web apps in a single, portable, self-updating, vanilla HTML file
#112> The coolest part? It's just an HTML file. Nothing special. Change it, it serializes its DOM, and sends it to a /save endpoint. Nothing magic about it.
*The tech: Hyperclay is a NodeJS server and frontend JS library*
So... it's not just an HTML file.
Re: Web apps in a single, portable, self-updating, vanilla HTML file
#113I too have an odd obsession with keeping everything in 1 file. I recently (as an experiment) exclusively vibe-coded an Asteroids clone (with a couple of nifty additions), all in a single HTML file, including a unit test suite, which also works on either desktop or mobile: https://github.com/pmarreck/vibesteroids/blob/yolo/docs/inde... Playable version (deployed via github docs) is here: https://pmarreck.github.io/vib…
I have an odd obsession with github repos that only have 1 file
Re: Web apps in a single, portable, self-updating, vanilla HTML file
#114For people who are confused: Hyperclay is a NodeJS server and frontend JS library that allows HTML pages to update their DOM and then replace their own .html source with the updated version. Imagine clicking a checkbox, which adds the `checked` attribute to its element, then using Hyperclay to globally persist this version of `document.body.outerHTML`, so that it's there next time someone visits the page. There's aut…
So it's a wiki? I don't get it.
Wiki has specific content you can add. New article, body of an article, etc. This lets you change all the html. With this, you could edit your wiki into a calculator.
Re: Web apps in a single, portable, self-updating, vanilla HTML file
#115I've built some single-file HTML page tools at work that use newer Web APIs (WebSerial, WebUSB) and essentially utilize the browser as a cross-platform application virtual machine, which is a great way to think about browsers. With WASM compilation, Canvas, and WebSockets, combined with this self-modifying concept where an HTML file is a contained, stateful application that can persist, we've got very interesting possibilities for the future of user-facing applications, both local and fetched remotely. This is probably exactly what some of the visionaries at Google were thinking of when they concepted the Chromebook and Chrome OS.
Re: Web apps in a single, portable, self-updating, vanilla HTML file
#116For people who are confused: Hyperclay is a NodeJS server and frontend JS library that allows HTML pages to update their DOM and then replace their own .html source with the updated version. Imagine clicking a checkbox, which adds the `checked` attribute to its element, then using Hyperclay to globally persist this version of `document.body.outerHTML`, so that it's there next time someone visits the page. There's aut…
Thanks. Author mentioned TiddlyWiki as inspiration. But the whole point of TiddlyWiki was that it doesn't need a server right?
So I'm trying to understand the difference, the payoff. I understand that local web APIs are ass and you very quickly run into the need for a server.
But I'm wondering about the utility of combining the two approaches. It seems like a contradiction in terms. Here's a server to help you with your dev setup oriented around not needing a server.
I guess the main win would be cross device access? You have it online and you can edit it easily.
I'm editing my stuff on my phone in a text editor. And syncing it to my laptop with a sync app.
Re: Web apps in a single, portable, self-updating, vanilla HTML file
#117For people who are confused: Hyperclay is a NodeJS server and frontend JS library that allows HTML pages to update their DOM and then replace their own .html source with the updated version. Imagine clicking a checkbox, which adds the `checked` attribute to its element, then using Hyperclay to globally persist this version of `document.body.outerHTML`, so that it's there next time someone visits the page. There's aut…
How does this differ from htmx?
Re: Web apps in a single, portable, self-updating, vanilla HTML file
#118I appreciate the storytelling and the nice graphics, but after reading 10 screen lengths of this story I still don't understand what technology they are using to achieve this. Is it a lot of words to talk about localstorage? How exactly are the changes persisted to the HTML file? Is it using FileSystemAPI to overwrite the previous HTML file? How can they implement it seamless for the user without them having to choos…
There's two approaches Hyperclay takes. 1. Hosted: You get a bunch of "HTML Apps" that persist themselves by calling their own /save endpoint. We grab the HTML and overwrite their-app-name.html, making a backup/version along the way. (Each user can edit their own app only, but they can also enable signups so that other people can fork their app. We also have plans to allow them to ship optional updates to forked apps…
And probably uses the Mutation Observer to capture DOM changes
https://developer.mozilla.org/en-US/docs/Web/API/MutationObs...
Re: Web apps in a single, portable, self-updating, vanilla HTML file
#119I too have an odd obsession with keeping everything in 1 file. I recently (as an experiment) exclusively vibe-coded an Asteroids clone (with a couple of nifty additions), all in a single HTML file, including a unit test suite, which also works on either desktop or mobile: https://github.com/pmarreck/vibesteroids/blob/yolo/docs/inde... Playable version (deployed via github docs) is here: https://pmarreck.github.io/vib…
Doesnt really sound like an odd obsession - it's an AI workflow thing. Just copy-pasting everything.
Re: Web apps in a single, portable, self-updating, vanilla HTML file
#120This is really neat! It echoes many of the ideas we've been exploring with the Webstrates project ( https://webstrates.net ). We've been using the DOM as persistence layer for building malleable collaborative software for smaller groups, whereas hyperclay focuses on using the same mechanisms for traditional webpages. Recently, I have been experimenting with a local-first approach to Webstrates ( https://github.com/We…
Hi Clemens, I'm a big admirer of yours and what you're doing with Webstrates. I first heard of you about a year ago, when I was first exploring the ideas that became Hyperclay. I love the idea of a local-first Hyperclay. Offline editing is one of the pillars of personal software and I'd like to head in that direction. Would you be open to hopping on a video call at some point? I'd love to compare notes.
I'd love to. Drop me a mail and let's find a suitable time.