Live data from Hacker News

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

hyperclay.com

121–130 of 240 posts

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

#121

I would like web standards have better support for pages stored in a local file (opened using file:// protocol). Sometimes I write simple HTML/Vue based mini-apps for myself and every time something doesn't work and I need workarounds, for example: - local HTML file cannot import local JS modules, so I have to use legacy writing style - local HTML file cannot open other local files (for example, audio files) I unders…

A significant hindrance for generator-type apps is that only pages loaded via HTTPS have access to the clipboard API, so ”copy to clipboard” does not work via file:///. You can have a zero-build zero-dependency offline-only app which users could theoretically just save as a page, but copy buttons will not work, so you have to detect the API not being available and replace buttons with popover textareas. Clunky. As fo…

> As for running a local server, VS Code devcontainers are the solution. Open your workspace, it runs the devcontainer, and you have a server up without extra hassle

it's not easy to install VS Code, let alone use it. VS Codium (and VS Code) are Electron apps, and it is difficult to sandbox them, as Electron (and Chromium as well) use suid helper - a priviledged binary that launches as root, and I won't allow suid binaries in a sandbox. Also, it requires GPU access for fast rendering, and it is difficult to provide in a safe way or switch to software rendering (I couldn't figure it out). Electron apps are a pain to install.

One could use a virtual machine, but it would use more resources.

Obviously, that's not VS Code's issue, it is a problem with Linux which doesn't come with a good sandbox.

It is much easier to type python -m http.server to launch a server, but you need to open a terminal and navigate to a directory first, that takes lot of time I would rather spend on something different (like figuring out how to work around issues with suid binary in Electron apps). And this looks like a hacky workaround, launching a web server only to gain more privileges in a browser.

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

#122

I would like web standards have better support for pages stored in a local file (opened using file:// protocol). Sometimes I write simple HTML/Vue based mini-apps for myself and every time something doesn't work and I need workarounds, for example: - local HTML file cannot import local JS modules, so I have to use legacy writing style - local HTML file cannot open other local files (for example, audio files) I unders…

This is quite similar to what I was trying to explore with [1] & [2] yesterday. Currently, the only option I found is to use localStorage and give the user the option to manually export and import.

Hyperclay has given me some ideas. What I want is something like [3] but that the user only needs to install once. One electron app that can load our mini-apps.

[1] - https://news.ycombinator.com/item?id=44930814

[2] - https://news.ycombinator.com/item?id=44933897

[3] - https://www.electronjs.org/fiddle

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

#123
This is a really cool idea. The use of custom attributes without `data-` before it makes me a little nervous. Is that a concern here? I saw `project` being used on elements and if that's officially used for something eventually can it muddy things up?

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

#124

I would like web standards have better support for pages stored in a local file (opened using file:// protocol). Sometimes I write simple HTML/Vue based mini-apps for myself and every time something doesn't work and I need workarounds, for example: - local HTML file cannot import local JS modules, so I have to use legacy writing style - local HTML file cannot open other local files (for example, audio files) I unders…

It's been a while, but if I remember correctly you can't use some /WEBGL features on images that are loaded from file:// URLs because of CORS (I think it was off-screen canvas). The only workaround I found was to embed the images inside the HTML using base64.

And to embed them you need a build step, and setting it up might take longer than writing the mini app itself.

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

#125
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…

How does this differ from htmx?

htmx requires a server. This enables a single html file to modify itself.

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

#126

At first I thought it is tiddlywiki but it is not.

The author (me) was strongly inspired by TiddlyWiki -- I love that software and wish it was allowed to proliferate more. If only browser vendors allowed their users to persist HTML files back to their own machines, we'd have a whole new ecosystem of personal applications! I wish I could change the name from Hyperclay to TiddlyApp :)

Thank you for your kind words, much appreciated, speaking as the creator/maintainer of TiddlyWiki. I really like what you've done, and the way you've described it on the site. I hope you will enjoy success with it, and have as much fun with it as I have with TiddlyWiki.

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

#127
It's even easier with Go + templ. You can compile a whole site into a single executable file, in the range of 20-30MB. Use sqlite with it and you've built yourself a portable and dynamic site capable of running almost anywhere in an instant. Use nginx load-balancing with a central sqlite if you need to scale

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

#128

Earlier quoted context omitted.

A significant hindrance for generator-type apps is that only pages loaded via HTTPS have access to the clipboard API, so ”copy to clipboard” does not work via file:///. You can have a zero-build zero-dependency offline-only app which users could theoretically just save as a page, but copy buttons will not work, so you have to detect the API not being available and replace buttons with popover textareas. Clunky. As fo…

> As for running a local server, VS Code devcontainers are the solution. Open your workspace, it runs the devcontainer, and you have a server up without extra hassle it's not easy to install VS Code, let alone use it. VS Codium (and VS Code) are Electron apps, and it is difficult to sandbox them, as Electron (and Chromium as well) use suid helper - a priviledged binary that launches as root, and I won't allow suid bi…

> but you need to open a terminal and navigate to a directory first, that takes lot of time

It does?

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

#129

I would like web standards have better support for pages stored in a local file (opened using file:// protocol). Sometimes I write simple HTML/Vue based mini-apps for myself and every time something doesn't work and I need workarounds, for example: - local HTML file cannot import local JS modules, so I have to use legacy writing style - local HTML file cannot open other local files (for example, audio files) I unders…

“…I don't want to open a terminal, navigate to a directory and start a server every time, it takes too much time…”

I have a shell script that does these steps - including opening the browser with the target url. I use it on a regular basis.

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

#130
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…

So… it's a server that stores HTML files?
Post reply on HN