top | item 42461688

Nullboard: Kanban board in a single HTML file

610 points| smusamashah | 1 year ago |github.com

179 comments

order
[+] egeozcan|1 year ago|reply
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
[+] smusamashah|1 year ago|reply
Does using save as retain changes you make in the HTML (like aedits on a contenteditable element)? In my experience it does not. When you save, the originally loaded html will be saved, any changes in html stay in your browser.
[+] xandrius|1 year ago|reply
Wait, so every time I make a change I need to remember to save or it's all lost? Or am I missing something?
[+] pyinstallwoes|1 year ago|reply
I like urls as source of truth. It’s beautifully deterministic
[+] 65|1 year ago|reply
How would this work without manually editing the HTML file?
[+] AlphaWeaver|1 year ago|reply
Came here to comment this as well! TiddlyWiki uses this as it's default storage format.
[+] apankrat|1 year ago|reply
This is mine.

FWIW here's a Show HN from 2019 - https://news.ycombinator.com/item?id=20077177

[+] s2l|1 year ago|reply
Do you know if a remote backup service was written? I am going through SimpleBackup code, (and if not exists) I would like to contribute remote agent for backup. Any pointers for that implementation would be appreciated.
[+] okwhateverdude|1 year ago|reply
Thanks for writing this. I found it useful and trivial to setup.
[+] asdev|1 year ago|reply
did you market it at all? or people just found it organically
[+] yunruse|1 year ago|reply
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

[+] smusamashah|1 year ago|reply
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:

    <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);
    }
    </script>
[+] pseudosavant|1 year ago|reply
I have implemented Google Drive and MS OneDrive support in my one-file video player app. I'm using it for reading, but I think it could be used to push back changes to a file for saving.
[+] zimpenfish|1 year ago|reply
I guess that's something you could add into the remote backup server. I'm considering writing my own (in Go/Rust) and I might see if I can add that.
[+] huijzer|1 year ago|reply
I really think we are as developers underusing setups like this. If you could somehow figure out a simple but effective sync between devices then that would be able to cover many use-cases.

Maybe we just need an sqlite with better support for replicas? Then people have one tiny server with a bunch of sqlite’s to which the apps can sync?

[+] WickyNilliams|1 year ago|reply
I feel GitHub gists are a very good store for data: writable, versioned, shareable and read-only for non authors, workable, support for arbitrary data including binary
[+] all2|1 year ago|reply
SyncThing is my go-to for multi-device syncing.
[+] oidar|1 year ago|reply
CouchDB + PouchDB
[+] evantbyrne|1 year ago|reply
For something as simple as this a manual export/import would be the most appropriate. Probably not a strong foundation for a communication tool.
[+] oneshtein|1 year ago|reply
Firefox has Pocket. Maybe, it can be used for synchronization ("pocketing") between devices.
[+] tomcam|1 year ago|reply
> If you could somehow figure out a simple but effective sync between devices

If only there were a technology one could use to “serve” information from a central storage mechanism, then update this “server” in a deterministic fashion, possibly with security as part of the feature set…

[+] pseudosavant|1 year ago|reply
I love tools like this. I have my own single HTML file project for a HTTP video player along those lines. https://github.com/pseudosavant/player.html

I'll definitely be looking at the source code to see if there are any ideas I want to incorporate into my own single file tools.

[+] imiric|1 year ago|reply
This is fantastic, thanks for sharing!

I've been using something similar for a few years now hacked together from different sources, but yours is much more polished.

[+] dools|1 year ago|reply
I love it. I use Trello as my 2nd brain but it means that I can't do anything offline. Where I can see loving this is if I write a little converter so I can take a Trello board JSON export, load it into Nullboard and work on it offline, then a thing that goes back the other way and creates a Trello board from my NBX file.

Maybe if I put the original trello card ID at the bottom of each NBX "note" and then synched any text back as a new comment on that card, and the list ID in the title of each list and adding any notes without a Trello card link as new cards to that list, it would be a pretty automated way to get a bunch of edits back into Trello where I could tidy up with copy/paste.

Rock on!! Forked the repo and have my new local version pinned.

[+] seanwilson|1 year ago|reply
I wish there was some browser solution for apps like this where you could save and share your app state between your own devices, and push/share that state with others, all without any server backend involvement e.g. so you could have a Kanban board shared with others and the state would be stored locally and/or in bring-your-own cloud storage.

There's so many apps like this that could be simple, but for robust state saving involve setting up and maintaining a backend (e.g. with security patches, backups, performance monitoring). There's also the privacy implications on your data being store on someone's server, and the risk of data leaks.

It's like there's a key part of the internet that's missing.

Something like this could be a browser extension? This exists?

[+] WorldMaker|1 year ago|reply
`roamingStorage` as a relative to `localStorage` sort of like Windows' "Local App Data" versus "Roaming App Data' would be nice to have in theory.

Of course even if you kept it to the simple KV store interface like `localStorage` you'd need to define sync semantics and conflict resolution mechanics.

Then you'd have to solve all the security concerns of which pages get access to `roamingStorage` and how it determines "same app" and "same user" to avoid rogue apps exfiltrating data from other apps and users.

It would be neat to find an architecture to solve such things and see it added as a web standard.

[+] Zigurd|1 year ago|reply
As of writing this there are 113 previous comments, none of which mention "metrics," "Scrum," or "velocity."

I hope any Scrum Master who comes across this thread takes the absence of those terms as an indicator of the value of those things and all the related feature bloat that bedevils Agile project management tools.

[+] nicholasjarnold|1 year ago|reply
I run Planka in an LXC container on Proxmox, but this looks useful (despite being 'beta') for anyone who just wants an absolutely no frills local-first GUI for simple task management.

The README mentions that "Trello wasn't bad", but storing this type of data in the cloud wasn't desirable. Well, Planka is the answer to that.

[+] ytjohn|1 year ago|reply
Glad to see this on here. I've been using this for 3 years now with my club to track race course participants for a 50K. Radio operators at each station call in bib numbers, and we drag their bib from their last waypoint to the new one. There is a laptop in the van mirrored to a TV outside the van. Friends and family can then check on their particpant.

https://i.imgur.com/UZWhppc.png

I basically modified the CSS a bit so you can fit multiple cards in a row. nullboard as a board import/export feature to a simple json file. I have small python script that generates the columns (way-points) and cards (bib numbers). Then I can import that json to start that years race. While I would like more features (time tracking), it's a rather simple tool that can be easily operated offline and requires no resources other than a web browser.

[+] arialdomartini|1 year ago|reply
Neat, very very well done.

One observation: Kanban is all about limiting the work in progress. That’s really its foundation. WIP limit is the main means for controlling and improving overall workflow effectiveness.

I would argue that boards not offering a WIP limit are not really “Kanban” boards, as they defeat the very goal of Kanban.

[+] chairmansteve|1 year ago|reply
WIP limits are not important to me.

I use my Trello boards for mental hygiene.

Something comes in, I put it on the board to get it out of my head. Then, when appropriate, I go to the board, rearrange the top 5 or so items by priority, then start on the top item.

Many things never get done, but they have turned out to lower priority, by definition.

If I am waiting for something to happen on a current task, I put it second or third in the queue.

Keeps me sane....

[+] candu|1 year ago|reply
Cool! This could be interesting as the base for a quick kanban board for mid-sized personal projects.

That said: agree with others that sharing state between devices (either yours or others), and being able to collaborate on the same board, is sort of the canonical feature requirement of kanban boards. They can be used for 1-person projects, goal tracking, etc. - I've used e.g. Notion boards in this way - but they gain most of their value from allowing multiple people to share awareness of task status and ownership.

Plus the use of localStorage means I'd eventually blow away my board state by accident - which is kind of a showstopper IMHO; being able to trust your tools is important.

Still: nice to see people experimenting with what you can do just using web basics :)

[+] AstroJetson|1 year ago|reply
I have this and like it alot. I've used it since a 2020 post on hacker news. It takes some effort, but once you get past the learning curve.

I'm very color oriented, so my forked version does colors to help me organized. (Yes I've sent it in as a pull request).

[+] bachmeier|1 year ago|reply
From the readme:

> Still very much in beta.

The last commit was November 2023.

[+] apankrat|1 year ago|reply
Well, I didn't have a need to add or to change anything since then.

Here's the full timeline to get a general sense of the development pace - http://nullboard.io/changes

[+] sockaddr|1 year ago|reply
Really cool. I love that editing a note doesn't involve pop up modal windows, save buttons, focus selection and all the other crap that things like Notion and Trello end up relying on.

You just edit the text. Perfect.

[+] zimpenfish|1 year ago|reply
Fortuitous - I've been looking for a simple Kanban board this week and all the popular ones are a bit heavy (`plane` uses 8 containers!) or insist on using `mysql`.
[+] vovkasm|1 year ago|reply
You might like kanboard, it's a classic LAMP project but it can use sqlite for small installations.
[+] lf-non|1 year ago|reply
I use teable with sqlite - it has a kanban board view
[+] gatinsama|1 year ago|reply
Thanks a lot for this. I use it everday and it brings me a lot if joy. We need more tools like this one.
[+] bArray|1 year ago|reply
Going to take a look at integrating this later, along with nbagent [1]. I have a 'dark mode' open source project with a few collaborators, many tasks and no good way to currently organise them.

One change I think I'll need to make is prettify the export of .nbx (JSON) so that git diffs perform better. Hopefully nbagent can keep the data synced as the board is updated.

[1] https://github.com/luismedel/nbagent

[+] gbraad|1 year ago|reply
Nice to see, but hope he moves away from LocalStorage, as that is far from ideal. Chrome clears this when cookies are cleared; and many 3rd party tools suggest this as a way to 'optimize' your web experience. Often seen people file an issue for an application I made that used this.
[+] efitz|1 year ago|reply
I thought the primary value of Kanban was about collaboration.

What is the purpose of a 1-person kanban?

How do you collaborate with local storage?

[+] apankrat|1 year ago|reply
Grocery and ToDo lists. That's Nullboard's primary purpose.