3 ms·

I totally understand your take, but as a guy that spends most of his time on side projects working on single HTML files, I have a different perspective. I find

I totally understand your take, but as a guy that spends most of his time on side projects working on single HTML files, I have a different perspective. I find the totally self-contained nature of them very appealing because it travels well through space and time, and it's incredibly accessible, both online and offline. My current side project is actually using a WebDAV server to host a wide variety of different single HTML file apps that you can carry around on a USB drive or host on the web. The main trick to these apps is the same trick that TiddlyWiki uses, which is to construct a file in such a way that it can create an updated copy of itself and save it back to the server. I'm attracted to this approach because it's a way to use relatively modern technologies in a way that is independent from giant corporations that want to hoover up all my data, while also being easy to hack and modify to suit my needs on a day-to-day basis.

ustad 2y ago
Do have a link to all the single html file apps you have in mind?
- rpdillon 2y ago
  I'm authoring two, One that's a keyboard based mnemonic launcher for accessing various websites. It's basically a way to have your bookmarks outside of the browser and quickly accessible. The other is a tabbed markdown document that can render static copies of itself. The two projects out in the wild that natively work with this approach are TiddlyWiki and FeatherWiki. I see room for a lightweight version of a calendar, a world clock, and even a lightweight spreadsheet that could be useful. I also have an idea for something I call a link trap where you can rapidly just drop links in and then search and sort over them to quickly retrieve something you saw before that was interesting. Sort of like my bookmarks-outside-the-browser except more of a history-outside-the-browser.
  - deleted 2y ago
    [deleted]
  - mikae1 2y ago
    Is https://rpdillon.net/redbean-tiddlywiki-saver.html https://rpdillon.net/redbean-tiddlywiki-saver.html still what you're using?
    - rpdillon 2y ago
      I've been working on projects like this for some time and that particular project happened to make the Hacker News front page but was not the client files that I'm referring to here, but rather a server. It was a side project to play with a redbean, since I'm a fan of jart's work. My primary saver is a Python script that I wrote called Notedeck, but I also sometimes use a Rust webdav server called dufs. I haven't released either of my projects I'm working on that are the client files, otherwise I would have just linked them.
getcrunk 2y ago
This rational appeals to me strongly, especially on a primal level But also that’s a lot of code in general
johnfn 2y ago
I think I'd call that "local-first" or perhaps "offline-first". I can't think of a reason why a local-first app would need to be crammed into a single HTML file, hehe. I do agree it's very cool, though!
- rpdillon 2y ago
  I tried to allude to this in my response above, but the fundamental reason that they're all crammed into a single file is to make sharing really easy. This is what I meant when I said it travels well through space.
  - tvmalsv 2y ago
    I definitely get the appeal. It’s analogous to the single file executable. One file to move around, no install process needed, just grab and run. It was the main reason I used to reach for Delphi back in the day for Windows utilities.
- jackvalentine 2y ago
  Same reason excel business apps are one file - easy to move around and share without dependencies going missing!
swah 2y ago
tiddlywiki brings back memories ... never had been so optimistic about computers!
hedgehog 2y ago
Out of curiosity why WebDAV vs loading the HTML straight from disk wherever they are and having a service that's only needed to for saving changes? Edit: I sketched out a basic version in JS + Python, it's fairly ok to use. The nice parts about this approach is the HTML files are viewable without any extra services, and the service that enables saving doesn't itself need configuration or to keep state.
- zamadatix 2y ago
  You can save without any services at all using the File System API https://developer.mozilla.org/en-US/docs/Web/API/File_System_API https://developer.mozilla.org/en-US/docs/Web/API/File_System... The downside is even though you know the current directory due to window.location the API is written in the way it assumes you either want a default location like "desktop" or need the user to navigate to the directory before you can do operations on it (for security reasons) even from a local context. The user needs to select the directory once per fresh page load (if you've dynamically reloaded the current content then multiple saves need only prompt once so long as you save the handle).
est 2y ago
shameless plug: I also made a single HTML metronome in js https://github.com/est/metronome https://github.com/est/metronome
sdeframond 2y ago
> The main trick to these apps [...] is to construct a file in such a way that it can create an updated copy of itself and save it back to the server. Any additional info/pointers on this ?
- deleted 2y ago
  [deleted]
- rpdillon 2y ago
  Yes, I have done a lot of analysis on the structure of tiddlywiki and featherwiki to figure out the right way to do this in a more repeatable way. And that's the basis that I'm using for the projects I'm working on. I'm planning to write a blog post on this soon because I've learned a lot. So stay tuned. For the benefit of the Hacker News audience that are curious, let me take a stab here. The general strategy is to include JavaScript in the HTML document that knows how to look at various nodes in the DOM and create a new version of the document that uses an updated set of data. Some sections of the data can be pulled verbatim. So, for example, if you have one giant script at the bottom of the doc, you can give it an ID of perhaps S, and then use that ID to retrieve the outer HTML of that script tag and insert it into the clone. Other areas of the DOM need to be templated. So for example, I insert a script that is of type JSON, and that contains all of the data for the application. This can be pulled and stringified when creating the clone. For a minority of attributes like the title and document settings like whether or not you're in light or dark mode, you want to avoid a flash of unstyled content and so you actually templatize those elements so they are written into the cloned copy with the updated data directly inline. There's no real magic to it, but it can be a little bit tedious. One really interesting gotcha is that the script tag is parsed with higher precedence than quote tags. And so I have to break up all script tags that appear in any string that I'm manipulating so that the parser does not close out the script I'm writing. I have a very minimal app that uses this technique called Dextral. I'll be happy to host it on my site and link it here.
dogtierstatus 2y ago
> construct a file in such a way that it can create an updated copy of itself and save it back to the server Is there some way to accomplish this through GitHub? Like the single html file running on GitHub.io pages can commit the changes to its repo?
- wizzwizz4 2y ago
  You should be able to use the Smart HTTP protocol with HTTP Basic Auth (https://git-scm.com/docs/http-protocol https://git-scm.com/docs/http-protocol) to push a locally-created commit. Forgejo supports CORS here, but I don't know whether GitHub does.
  - mdaniel 2y ago
    Both GitHub and GitLab have killed http basic auth https://docs.github.com/en/rest/authentication/authenticating-to-the-rest-api?apiVersion=2022-11-28#authenticating-with-username-and-password https://docs.github.com/en/rest/authentication/authenticatin... https://docs.gitlab.com/ee/topics/git/troubleshooting_git.html#error-on-git-fetch-http-basic-access-denied https://docs.gitlab.com/ee/topics/git/troubleshooting_git.ht... That's not to say one couldn't still do what you're describing via other headers, I'm just saying "<input name=username><input name=password>" won't get it done

ustad 2y ago

Do have a link to all the single html file apps you have in mind?

rpdillon 2y ago
I'm authoring two, One that's a keyboard based mnemonic launcher for accessing various websites. It's basically a way to have your bookmarks outside of the browser and quickly accessible. The other is a tabbed markdown document that can render static copies of itself. The two projects out in the wild that natively work with this approach are TiddlyWiki and FeatherWiki. I see room for a lightweight version of a calendar, a world clock, and even a lightweight spreadsheet that could be useful. I also have an idea for something I call a link trap where you can rapidly just drop links in and then search and sort over them to quickly retrieve something you saw before that was interesting. Sort of like my bookmarks-outside-the-browser except more of a history-outside-the-browser.
- deleted 2y ago
  [deleted]
- mikae1 2y ago
  Is https://rpdillon.net/redbean-tiddlywiki-saver.html https://rpdillon.net/redbean-tiddlywiki-saver.html still what you're using?
  - rpdillon 2y ago
    I've been working on projects like this for some time and that particular project happened to make the Hacker News front page but was not the client files that I'm referring to here, but rather a server. It was a side project to play with a redbean, since I'm a fan of jart's work. My primary saver is a Python script that I wrote called Notedeck, but I also sometimes use a Rust webdav server called dufs. I haven't released either of my projects I'm working on that are the client files, otherwise I would have just linked them.

getcrunk 2y ago

This rational appeals to me strongly, especially on a primal level But also that’s a lot of code in general

johnfn 2y ago

I think I'd call that "local-first" or perhaps "offline-first". I can't think of a reason why a local-first app would need to be crammed into a single HTML file, hehe. I do agree it's very cool, though!

rpdillon 2y ago
I tried to allude to this in my response above, but the fundamental reason that they're all crammed into a single file is to make sharing really easy. This is what I meant when I said it travels well through space.
- tvmalsv 2y ago
  I definitely get the appeal. It’s analogous to the single file executable. One file to move around, no install process needed, just grab and run. It was the main reason I used to reach for Delphi back in the day for Windows utilities.
jackvalentine 2y ago
Same reason excel business apps are one file - easy to move around and share without dependencies going missing!

swah 2y ago

tiddlywiki brings back memories ... never had been so optimistic about computers!

hedgehog 2y ago

Out of curiosity why WebDAV vs loading the HTML straight from disk wherever they are and having a service that's only needed to for saving changes? Edit: I sketched out a basic version in JS + Python, it's fairly ok to use. The nice parts about this approach is the HTML files are viewable without any extra services, and the service that enables saving doesn't itself need configuration or to keep state.

zamadatix 2y ago
You can save without any services at all using the File System API https://developer.mozilla.org/en-US/docs/Web/API/File_System_API https://developer.mozilla.org/en-US/docs/Web/API/File_System... The downside is even though you know the current directory due to window.location the API is written in the way it assumes you either want a default location like "desktop" or need the user to navigate to the directory before you can do operations on it (for security reasons) even from a local context. The user needs to select the directory once per fresh page load (if you've dynamically reloaded the current content then multiple saves need only prompt once so long as you save the handle).

est 2y ago

shameless plug: I also made a single HTML metronome in js https://github.com/est/metronome https://github.com/est/metronome

sdeframond 2y ago

> The main trick to these apps [...] is to construct a file in such a way that it can create an updated copy of itself and save it back to the server. Any additional info/pointers on this ?

deleted 2y ago
[deleted]
rpdillon 2y ago
Yes, I have done a lot of analysis on the structure of tiddlywiki and featherwiki to figure out the right way to do this in a more repeatable way. And that's the basis that I'm using for the projects I'm working on. I'm planning to write a blog post on this soon because I've learned a lot. So stay tuned. For the benefit of the Hacker News audience that are curious, let me take a stab here. The general strategy is to include JavaScript in the HTML document that knows how to look at various nodes in the DOM and create a new version of the document that uses an updated set of data. Some sections of the data can be pulled verbatim. So, for example, if you have one giant script at the bottom of the doc, you can give it an ID of perhaps S, and then use that ID to retrieve the outer HTML of that script tag and insert it into the clone. Other areas of the DOM need to be templated. So for example, I insert a script that is of type JSON, and that contains all of the data for the application. This can be pulled and stringified when creating the clone. For a minority of attributes like the title and document settings like whether or not you're in light or dark mode, you want to avoid a flash of unstyled content and so you actually templatize those elements so they are written into the cloned copy with the updated data directly inline. There's no real magic to it, but it can be a little bit tedious. One really interesting gotcha is that the script tag is parsed with higher precedence than quote tags. And so I have to break up all script tags that appear in any string that I'm manipulating so that the parser does not close out the script I'm writing. I have a very minimal app that uses this technique called Dextral. I'll be happy to host it on my site and link it here.

dogtierstatus 2y ago

> construct a file in such a way that it can create an updated copy of itself and save it back to the server Is there some way to accomplish this through GitHub? Like the single html file running on GitHub.io pages can commit the changes to its repo?

wizzwizz4 2y ago
You should be able to use the Smart HTTP protocol with HTTP Basic Auth (https://git-scm.com/docs/http-protocol https://git-scm.com/docs/http-protocol) to push a locally-created commit. Forgejo supports CORS here, but I don't know whether GitHub does.
- mdaniel 2y ago
  Both GitHub and GitLab have killed http basic auth https://docs.github.com/en/rest/authentication/authenticating-to-the-rest-api?apiVersion=2022-11-28#authenticating-with-username-and-password https://docs.github.com/en/rest/authentication/authenticatin... https://docs.gitlab.com/ee/topics/git/troubleshooting_git.html#error-on-git-fetch-http-basic-access-denied https://docs.gitlab.com/ee/topics/git/troubleshooting_git.ht... That's not to say one couldn't still do what you're describing via other headers, I'm just saying "<input name=username><input name=password>" won't get it done