Live data from Hacker News

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

hyperclay.com

231–240 of 240 posts

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

#231

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

I keep this bookmark in Chrome which lets me open an editor in a tab and Chrome maintains the state of the textarea even through reboots as long as you don't close the tab: data:text/html, Notepad html,body{margin:0;padding:0;}textarea{padding:10px;font-family:Courier;font-size:16px;height:100%;width:100%;border:none;outline:none;} document.getElementsByTagName('textarea')[0].focus()

You can get rid of the JS by setting the autofocus[1] attribute to the textarea.

[1] https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...

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

#232
post #199

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 understand that there is a risk if we allow local HTML files to access anything, but there should be some way - for example, a file or directory might have some suffix that allows access to it. > I do not want to use a web-server because it feels like overengineering and I don't want to open a terminal, navigate to a directory and start a server every time, it takes too much time. I just want to type the URL and…

Interesting, I also had an idea of "sandbox mode", into which the page can voluntarily switch after loading and which prevents it from using network, cookies or any ways to exfiltrate the data. This can be used for online utilities like text encryption, audio file format conversion etc. The browser could indicate that the page is in a sandbox mode so that the user can trust it.

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

#233

Earlier quoted context omitted.

I used https://github.com/slaymaker1907/TW5-browser-nativesaver , that still works with the current version 5.3.8, though just in Chromium based browsers. You save the file once and from then on, as long as the tab is open, it autosaves itself.

That said, I advise against Tiddly Wiki, after using it for long. It has multiple bugs, which the author won't fix (e.g. div's inside p's), It has a cryptic syntax (e.g. code in attribute values), and tagging is not implemented in a way which makes a wiki scale (well, technically it is, tags can have tags). It is a thing where features are added but nothing outdated gets deprecated, so it is bloated. One will be more…

My solution to a lot of issues is to use Tiddlywiki Classic. No divs inside p that I can find, less bloat (412 KB for a blank file instead of 2.5 MB), and it's still maintained. The main advantage, to me, is that it fits more tiddlers on screen at a time, which is the main point of TiddlyWiki for me; TW5 adds large amounts of spacing, borders, and large font sizes, which looks nicer but is less practical.

It's not perfect, though. Paragraphs are rendered by using two br tags, instead of p tags. Link syntax is the reverse of MediaWiki syntax; i.e. [[foo|bar]] links to "foo" in MediaWiki, but "bar" on TiddlyWiki, which trips me up constantly. There's other syntax awkwardness like sensitivity to spacing and newlines. Journals sort in alphabetical, not chronological order.

https://classic.tiddlywiki.com/>

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

#234
post #199

Earlier quoted context omitted.

> I understand that there is a risk if we allow local HTML files to access anything, but there should be some way - for example, a file or directory might have some suffix that allows access to it. > I do not want to use a web-server because it feels like overengineering and I don't want to open a terminal, navigate to a directory and start a server every time, it takes too much time. I just want to type the URL and…

Interesting, I also had an idea of "sandbox mode", into which the page can voluntarily switch after loading and which prevents it from using network, cookies or any ways to exfiltrate the data. This can be used for online utilities like text encryption, audio file format conversion etc. The browser could indicate that the page is in a sandbox mode so that the user can trust it.

I like that idea! It would be cool if pages choose to give up those permissions granularly as well, sort of like OpenBSD's `pledge`

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

#235
post #231

Earlier quoted context omitted.

I keep this bookmark in Chrome which lets me open an editor in a tab and Chrome maintains the state of the textarea even through reboots as long as you don't close the tab: data:text/html, Notepad html,body{margin:0;padding:0;}textarea{padding:10px;font-family:Courier;font-size:16px;height:100%;width:100%;border:none;outline:none;} document.getElementsByTagName('textarea')[0].focus()

You can get rid of the JS by setting the autofocus[1] attribute to the textarea. [1] https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...

Thank you, I'm going to try this.

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

#236
post #231

Earlier quoted context omitted.

I keep this bookmark in Chrome which lets me open an editor in a tab and Chrome maintains the state of the textarea even through reboots as long as you don't close the tab: data:text/html, Notepad html,body{margin:0;padding:0;}textarea{padding:10px;font-family:Courier;font-size:16px;height:100%;width:100%;border:none;outline:none;} document.getElementsByTagName('textarea')[0].focus()

You can get rid of the JS by setting the autofocus[1] attribute to the textarea. [1] https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...

Thanks, I trimmed it down to this:

  data:text/html,Notepad

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

#237
post #85

Earlier quoted context omitted.

fwiw, for this kind of tech - personal level projects - there is not a snowball's first summer outing in hell's chance I'm going to pay for someone else to host my thing remotely. I would like to just self host, and if it was good I would buy a license for it so I can self host - but I think you have a customer in mind that doesn't exist. Your ideal customer a) is extremely technically proficient, such that they are…

> You gotta eat, I know, but I'm wondering who it is that is ok paying for someone else to do the easiest part what they do for a living. I don't think that hosting is necessarily "part of what they do for a living" for people who write the code.

I mean, if you can't host a box, hang up the gloves.

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

#238

Full disclaimer: I only scanned the article, but based on the title, SvelteKit does that with a single option "inline". https://svelte.dev/docs/kit/configuration#output

How so? Can you describe what usecase that enables?

I ended up reading the entire article and what SvelteKit does isn't exactly the same, you can't edit the site.

The use case for a single html file for me is to provide a local dev experience for my customers that mirrors production.

`my-cli dev` spins up the services needed for my platform, including the SvelteKit web app.

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

#239

Earlier quoted context omitted.

I used https://github.com/slaymaker1907/TW5-browser-nativesaver , that still works with the current version 5.3.8, though just in Chromium based browsers. You save the file once and from then on, as long as the tab is open, it autosaves itself.

That said, I advise against Tiddly Wiki, after using it for long. It has multiple bugs, which the author won't fix (e.g. div's inside p's), It has a cryptic syntax (e.g. code in attribute values), and tagging is not implemented in a way which makes a wiki scale (well, technically it is, tags can have tags). It is a thing where features are added but nothing outdated gets deprecated, so it is bloated. One will be more…

I don't know, for me it works, but I don't do anything fancy with it. I just put it on a server, so I can access it from all my devices. I don't even use tags, just tiddlers with sources which are other tiddlers or external web pages.

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

#240

Earlier quoted context omitted.

fwiw, for this kind of tech - personal level projects - there is not a snowball's first summer outing in hell's chance I'm going to pay for someone else to host my thing remotely. I would like to just self host, and if it was good I would buy a license for it so I can self host - but I think you have a customer in mind that doesn't exist. Your ideal customer a) is extremely technically proficient, such that they are…

I think you're underestimating the market here. It's not just extremely technically proficient people, it's the glitch people, the "custom myspace theme" people, possibly even the jsfiddle people. The `/save` endpoint looks almost trivial. Knocking up a mimic wouldn't take much. The client libs will be interesting, but from the looks of things they're not quite there yet.

> the glitch people

poor art students?

> the "custom myspace theme" people

they stopped existing a decade or more ago?

> possibly even the jsfiddle people

These aren't even a real group?

lol

Post reply on HN