Live data from Hacker News

Web apps in a single, portable, self-updating, vanilla HTML file

hyperclay.com

51–60 of 240 posts

Re: Web apps in a single, portable, self-updating, vanilla HTML file

#51
Been doing something similar with save files for my game. Line 1 is "const rawData =" and line 2 is all the state.

Then the save button downloads document.documentElement.outerHTML with line 2 replaced by the current state. No server required.

https://github.com/mcteamster/white/blob/main/src/lib/data.t...

Re: Web apps in a single, portable, self-updating, vanilla HTML file

#52
post #39
post #35

For 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…

This all sounds like something from 2001. I was doing pretty much exactly this around 2001, using contenteditable with an IIS/JScript back-end.

I think contenteditable is more akin to a rich-text document, while Hyperclay goes a bit beyond by allowing JS to edit the DOM too. I think Smalltalk images and virtual machines are a closer comparison, but applied to the web. You download the image, with some running code, use it, and persist the whole application state.

Re: Web apps in a single, portable, self-updating, vanilla HTML file

#53
post #46

This is just awesome! But seems like a closed source project, and the pricing page returns HTTP 404. Are there any open source alternatives like this? First time I hear about this idea. However, I can imagine it wouldn't take much effort to implement the basics. Chromium even has a design mode you can activate by typing `document.designMode='on'` in the console. Then you would just need to write a little javascript t…

There is an open source, local app version by the same author (me) here: https://hyperclay.com/hyperclay-local

Re: Web apps in a single, portable, self-updating, vanilla HTML file

#54
post #9

Am I the only one that does not understand what the author wants to explain ? Do we need a story with illustration to understand how a new framework works ? What's the plain markdown 2 to 3 paragraph that explains the concept ? Edit : here it is. https://docs.hyperclay.com/docs/docs-tldr-paste-in-llm/#how-... > Whenever the page changes—or the user explicitly saves the page—we grab all the HTML, make a few modificati…

> instead of storing JSON we store HTML with all its verbosity and all its tags that have nothing to do with the user edit

Yes. In exchange, we get a portable, malleable, self-contained application. That's the tradeoff.

> What about if the webmaster then wants to change the HTML title

1. The webmaster owns my-app.hyperlay.com (or somecustomdomain.com). 2. The user forks their version and gets user-version.hyperclay.com (or user-version.somecustomdomain.com)

You need to fork before editing. In the future, we'll have support for shipping updates to forked applications that can be accepted or denied by the end users.

Re: Web apps in a single, portable, self-updating, vanilla HTML file

#55
This is great and all (I've been making my own standalone web app htmls), but one issue I've found when sharing with others is iOS (iPhone/iPads) don't support them. Apple ugh.

Any suggestions how to overcome this? I believe it's a security setting, not allowing localstorage to be set.

Re: Web apps in a single, portable, self-updating, vanilla HTML file

#56
post #31

Earlier quoted context omitted.

> web browser was also an editor Ummmm all the browsers I know of are also editors... Are there any that aren't? Edit - does no one use dev tools anymore? No HTML? No vanilla JS and CSS? Everyone just using TS, React and gluing things together? Like, you literally have an entire IDE in your browser (assuming you use anything derived from Chrome, Firefox or Safari) that can code a web page live...

DevTools was not part of the original browsers. Firebug brought the concept to existence in the first place. As a sidenote, does manipulating forms count as editing?

Netscape had a JavaScript debugger, IE had a debugger as well. What firebug did was pull the inspector, debugger, console, and everything together in a really nice dev experience. The goal posts were moved far back and the major browsers hurriedly released their “dev tools” to counter FireBug. Chrome being the first after, followed shortly by Safari (who already had an inspector). It would take MS another 6 years to do the same for IE8.

Re: Web apps in a single, portable, self-updating, vanilla HTML file

#57
post #21

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

2. Local: You download the open-source Hyperclay Local [0] and you can have your own personal, local HTML apps that also call the /save endpoint and make backups. You're also open to extracting the core code from this to host your own personally malleable apps on your own server (just implement some kind of auth)

[0] https://hyperclay.com/hyperclay-local

Re: Web apps in a single, portable, self-updating, vanilla HTML file

#58
post #5

This is coming close to WWW's original vision because the very first web browser was also an editor. Tim Berners-Lee's application on the NeXT was basically a wrapper for the operating system's built-in rich text editing class named TextView. (It later became NSTextView on Apple's Mac OS X and still powers the TextEdit app on Mac.) We lost editing for two reasons: 1) The HTTP PUT method didn't exist yet, so edited HT…

Making a more read/annotate/write web is near and dear to my heart. There's a lot I find admirable - noble about pages like Hyperclay! But also, it's a distinctly different answer for each page to build its own toolkit for the user (Hyperclay) vs TBL's read-write web. The user-agent ought, imo, afford standard tools that are going to work across web pages, that extend the user agency whatever site they are visiting.

Yes, I agree. My dream would be to one day work on a browser and integrate Hyperclay into it. I believe web apps have been around long enough as a core web technology that browsers should ship with a local web host, knowledge of what a user and user account is, and the ability to persist to disk whatever the user chooses.

Re: Web apps in a single, portable, self-updating, vanilla HTML file

#59
post #46

This is just awesome! But seems like a closed source project, and the pricing page returns HTTP 404. Are there any open source alternatives like this? First time I hear about this idea. However, I can imagine it wouldn't take much effort to implement the basics. Chromium even has a design mode you can activate by typing `document.designMode='on'` in the console. Then you would just need to write a little javascript t…

There is an open source, local app version by the same author (me) here: https://hyperclay.com/hyperclay-local

There is no reference to its license model...

Re: Web apps in a single, portable, self-updating, vanilla HTML file

#60
post #5

This is coming close to WWW's original vision because the very first web browser was also an editor. Tim Berners-Lee's application on the NeXT was basically a wrapper for the operating system's built-in rich text editing class named TextView. (It later became NSTextView on Apple's Mac OS X and still powers the TextEdit app on Mac.) We lost editing for two reasons: 1) The HTTP PUT method didn't exist yet, so edited HT…

Making a more read/annotate/write web is near and dear to my heart. There's a lot I find admirable - noble about pages like Hyperclay! But also, it's a distinctly different answer for each page to build its own toolkit for the user (Hyperclay) vs TBL's read-write web. The user-agent ought, imo, afford standard tools that are going to work across web pages, that extend the user agency whatever site they are visiting.

> Making a more read/annotate/write web is near and dear to my heart

Isn't that basically Wikipedia? I can't imagine a much simpler system that could work at modern web scale.

Post reply on HN