Live data from Hacker News

Nullboard: Kanban board in a single HTML file

github.com

61–70 of 191 posts

Re: Nullboard: Kanban board in a single HTML file

#62
post #3

This is very neat! I'd be interested to see something like this with a saving mechanism reminiscent of TiddlyWiki [0], which is saved as a portable HTML file. Documents that contain their own editors like this are really neat for offline use and long-term storage. [0] https://tiddlywiki.com/#SavingMechanism

I tried this script (which Claude came up with) to save file with all it's changes. The steps are

1. Put this script in html file and add a save/download button to trigger it

2. Set `contenteditable` on you editable elements

That's it. Now make changes on the page and click download button to save the page with your changes. This should allow seeing your work without necessarily depending on JS.

The script:

    
    function downloadHTMLFile() {
      // Get the current HTML content
      const html = document.documentElement.outerHTML;

      // Create a temporary link element
      const link = document.createElement('a');
      link.setAttribute('download', 'example-page.html');

      // Encode the HTML content as a data URI
      const encodedContent = encodeURIComponent(html);
      link.setAttribute('href', 'data:text/html;charset=utf-8,' + encodedContent);

      // Append the link to the DOM and click it
      document.body.appendChild(link);
      link.click();

      // Remove the temporary link element
      document.body.removeChild(link);
    }
    

Re: Nullboard: Kanban board in a single HTML file

#63
post #32

I think "single HTML file" sets up a certain expectation that a five-thousand-line long HTML file with ~3500 lines of embedded JS doesn't really live up to. I mean, hey, everything can be a single HTML file if you embed the bundle inline in your HTML! Cool project, though - don't mean to take away anything from it.

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

This rational appeals to me strongly, especially on a primal level

But also that’s a lot of code in general

Re: Nullboard: Kanban board in a single HTML file

#64

This is very cool. BTW, when developing single HTML file apps, instead of localStorage, one can use the HTML as the source of truth, so the user can just save/save-as to persist. I had mentioned my quick and dirty attempt at an image gallery that is a self-contained html file and some really liked the concept, if not the "app" itself: https://news.ycombinator.com/item?id=41877482

Wait, so every time I make a change I need to remember to save or it's all lost? Or am I missing something?

You can get the browser to confirm you want to close the tab. That's what I did with my little single-file scrapbook thing: http://kaimac.org/posts/scrapbook/index.html

Re: Nullboard: Kanban board in a single HTML file

#65
Given you can put scripts and css in an html file, you can produce basically any website/app and offer it as a single file.

Loaded locally and/or via the Web, are there any other file formats that work this way or is .html the only bootstrapping option browsers support?

Re: Nullboard: Kanban board in a single HTML file

#66
post #44

Earlier quoted context omitted.

My god this comment made me feel old. God forbid you have to remember to save your work !

The mental model my kids have for work is that typing or even thinking is itself a finished product. For my generation that idea of a conscious action of saving your work on a computer made me think more about what I was doing and how I was doing it. But I am an old.

I understand the overall contrast you're sketching here. But can you elaborate on

> typing or even thinking is itself a finished product

Any specific examples where you notice the difference?

Re: Nullboard: Kanban board in a single HTML file

#67
post #32

I think "single HTML file" sets up a certain expectation that a five-thousand-line long HTML file with ~3500 lines of embedded JS doesn't really live up to. I mean, hey, everything can be a single HTML file if you embed the bundle inline in your HTML! Cool project, though - don't mean to take away anything from it.

> a five-thousand-line long HTML file with ~3500 lines of embedded JS

You made me look at the code and I was afraid of what I was going to find.

But man, that code is pretty and well organized, just like the resulting page.

Re: Nullboard: Kanban board in a single HTML file

#68

Earlier quoted context omitted.

My god this comment made me feel old. God forbid you have to remember to save your work !

I mean - yeah, honestly, god forbid. Requiring manual saves with limited change history (or none at all) was the bad old days . That was bad UI/UX, literally everybody had a “oops I forgot to save” and a “oops I saved and I didn’t mean to” horror story. Things are better now.

I wouldn't say it was totally awful. At least, prior to having an Undo option or perhaps an undo but that can only go back 3 steps, saving as before making any large changes was a pretty common workflow. I might end up with 50 versions of a document numbered incrementally by the time I was finished. that is still a necessary workflow for certain types of documents. I don't necessarily want everything saved automatically all the time.

Re: Nullboard: Kanban board in a single HTML file

#69
post #32

I think "single HTML file" sets up a certain expectation that a five-thousand-line long HTML file with ~3500 lines of embedded JS doesn't really live up to. I mean, hey, everything can be a single HTML file if you embed the bundle inline in your HTML! Cool project, though - don't mean to take away anything from it.

If I can actually hit "ctrl-s" and save it offline, that's a huge and worthwhile feature that meaningfully changes how I can interact with the project; it's not purely a fluff description.

That will probably never work easily in any secure browser. I think at the very least you would have to go: ctrl+s, dialog opens hopefully at the right directory you want to store in, enter/return.

Re: Nullboard: Kanban board in a single HTML file

#70
post #32

I think "single HTML file" sets up a certain expectation that a five-thousand-line long HTML file with ~3500 lines of embedded JS doesn't really live up to. I mean, hey, everything can be a single HTML file if you embed the bundle inline in your HTML! Cool project, though - don't mean to take away anything from it.

What about "single HTML file" sets up an expectation about size? I'm genuinely confused. They seem like nearly unrelated concepts—this isn't a project about trying to fit a kanban board into a kilobyte or anything like that.

I think there are reasonable expectations around code quality that most projects adhere to, e.g.:

- Split JS out from HTML, split CSS out from HTML

- Keep files reasonably small

So if I read "Single HTML file" I'd expect around a couple hundred lines at most, possibly with some embedded CSS.

It's kind of like saying "I've solved your problem in one line of JS" but then your line of JS is 1000 characters long and is actually 50 statements separated by semicolons. Yes, technically you're not lying, but I was expecting when you said "one line of JS" that it would be roughly the size and shape of a typical line of JS found in the wild.

Post reply on HN