Kanban board in one HTML using localstorage | Hacker News Reader

Kanban board in one HTML using localstorage

github.com

400 pointssynergy20111 comments

This is mine.

It is something I wrote for my own use after looking at all existing options and finding them not to my liking. This is pretty much a weekend hack, it is from 2019 and it's still close to what I need. When I have time I plan to improve keyboard support, add color tags and archiving of completed items. It will also be redone to not use localStorage and to support a remote storage option. Shared use (with 2+ instances working with the same copy of the data) is also something that I'd like to do, but that's on a back burner.

The Show HN post from 2019 - https://news.ycombinator.com/item?id=20077177

For shared use and remote storage, I'd consider using CRDTs like yjs [1] for instance.

Should be pretty easy, local-first, and allow synchronous as well as asynchronous collaboration and syncing. Even p2p over LAN, webrtc or whatever (I'm unsure how to do local peer discovery in a web browser, on the desktop you'd simply use link-local multicast/avahi (DNS-SD)).

[1] https://github.com/yjs/yjs

Although it's tough to use "raw" git from a browser (it is possible, but probably out of scope to include an entire Javascript git client), it would be neat if you could use the git(hub/lab/etc) API as a remote storage option. It would allow for rolling back pretty easily. I'm thinking each board could be it's own directory, and each item could be a .md file. The naming scheme could probably be related to the position of each board's index. Ie: gitrepo/0/0.md could be the first item of the first board.

Please check out logseq.com (used GitHub as back-end with js doing commits from local storage, etc).

I'm desperately looking for documentation on LogSeq. F.i. simply how to embed source code written in PowerShell?

The basics of using it are here - https://logseq.github.io/#/page/getting%20started

With respect to embedding source code - you can wrap it in "pre" and "code" tags, I believe. But are you referring to executing a source block as you might in org-mode? You can also jam whatever custom CSS you want into the https://logseq.com/#/file/logseq%2Fcustom.css file to render code the way you would like.

The Discord channel is also extremely active and the dev team is on there all the time. I am old so I find this all very confusing but they have definitely helped me out several times - https://discord.gg/KpN4eHY

I am a pretty basic user of this, but if there is anything else you want to know, please ask.

I apologize in advance for a low quality response. I just want to be able to return to it easily.

Love it. I love the minimalism. It just fits my use case so well. I just tried it and it just works with no fuss.

FYI there is a "favorite" button on submissions and on comments if you click the timestamp.

Oh good grief, how on earth did I miss it:> Thank you.

It’s cool. I tried reading the code but man, the HTML file is over 2k lines since everything is inline. I understand your motivation to implement this without build tools and frameworks but you could have used at least stylesheets and put JS into separate files. Or even use ES modules to split functionality into modules. All of these are native to modern browsers and do not need any build tools.

Maybe I'll take a shot at a very simple backend, I've not been able to find a kanban which is simple enough for me.

See my reply here - https://news.ycombinator.com/item?id=26152103

This is very cool, I've been looking for a simple Kanban board. Particularly I don't want comments in the kanban application. What I want is too keep conversations as threads in another service, and from that service reference tasks on a task board as well as other things like issues on github etc.

I love the style as well.

What does it mean to do something in "one HTML"?

Other than the font and jQuery, there's only 1 useful file in the repo. The HTML file.

Have you considered a self-editing file approach a la Tiddlywiki Classic, in lieu of browser storage?

Thanks, perfect for what I need (offline, single user, simple to use).

Superb! wish you had keyboard shortcut to delete items..

Is it possible to add colors or themes?

It's impressive that it's all in single HTML file. LocalStorage could be a limitation if you often clear your browser history though.

In the same spirit of Kanban, I had built an offline-first personal Kanban app - https://brisqi.com

Initially I built it for myself but I decided to put it out there for folks who were looking for an offline Kanban app.

It's not a single HTML file though. On line 1211 jQuery is pulled, and on lines 57 and 64 an external font file is referenced.

I am not sure having everything in a single HTML file is any feat though. You can of course compress all your JS deps and CSS to a single HTML file, but it's not very cache efficient if your content is dynamic on the HTTP level.

Targeting raw DOM without jQuery might be actually possible these days though, but they're not doing it.

> I am not sure having everything in a single HTML file is any feat though.

This bears repeating. By this logic all projects, including convoluted React SPAs, are just a bundled away from claiming they are a single-HTML file project.

If you don’t want any external dependencies and want to replace jQuery. Then one solution is the site titled “You might not need jQuery” [1]. It points out plenty jQuery methods that can be replaced with plain JS. I actually recently advised a coworker to try learning plain JS and recommended that site. I honestly love using React though and won’t go without so don’t think I’m just a roll your own and dogfooding kind of person.

Anyways also as a self plug: I recently wrote a quick little dom library [2] (that is not published and only exists on a single code sandbox [doesn’t even have a license yet]) it’s in the file dom-lib.js. I made it in the last two days that people could look at just to see how you might go about writing a small framework that rerenders an app from top to bottom each time. Super unperformant and without optimizations. Well you can take a look, but don’t assume it’s anything more than two days work and some old code that I had laying around to help me traverse an object. I definitely don’t recommend adopting it or anything especially for production, but it works well enough as a lower-level dom library for the moment and I might make something more of it at some point (Be careful of XSS and understand that when something is assigned to .innerHTML, like the second parameter of the El function, then it should not contain user input. User input is what the third parameter of El is for.)

[1]: http://youmightnotneedjquery.com/ [2]: https://codesandbox.io/embed/example-plain-js-app-u6ce7?code...

Not-a-web-developer-question: Would it make sense to add a module that replicated the localStorage data 'upstream' or somewhere, something like an rsync.net copy that could be sync'ed by the user before they blow the cache?

It could be very neat, but there are very few projects that would interested in it. localStorage is persistent enough for small hobby projects like this, and for something more serious you'd like to have some kind of backend DB anyway.

Not really. For instance, with TiddlyWiki you can run a local server and save everything on disk in a single html file. Jumping from localStorage to a DB means you go straight from "only in one browser" to having to deal with the overhead of a DB. A single text file has the advantage that you can drop it in a repo and have it version controlled or keep it in a Dropbox folder and use it on multiple computers/share it with others.

Oh I don't know. A serious dev team might want to be able to use their kanban on an airplane. An individual might want automated backup, while being able to code in a park or on the beach.

Yes, I wouldn't trust localStorage to survive for long.

I'm surprised no one is mentioning IndexedDB [0] Seems like a well-supported [1] document database built into the browser would beat LocalStorage in almost every way. That's what I've found in my experience at least.

[0] https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_A... [1] https://caniuse.com/indexeddb

It survives pretty well. I built a super basic localStorage only web app and it's worked really well. Until I switched phones and realized I didn't add export functionality.

I simply added a local storage inspector bookmark to my chrome profile, so it gets sync to all devices. Now on any page, I just need to type its name, it will appear in dropdown, & clicking it exports all local storage used by current page or domain as json file.

Code of bookmarklet:

javascript:(function() { var backup = {}; for (i = 0; i < localStorage.length; i++) { var key = localStorage.key(i); var value = localStorage.getItem(key); backup[key] = escape(encodeURIComponent(value)); } var json = JSON.stringify(backup); var base = btoa(json); var href = 'data:text/javascript;charset=utf-8;base64,' + base; var link = document.createElement('a'); link.setAttribute('download', 'backup.json'); link.setAttribute('href', href); document.querySelector('body').appendChild(link); link.click(); link.remove();})()

from experience, I wouldn't trust any of the web storage APIs. they can survive for a long time, but your data can get corrupted.

Looks very nice, always think it should be commended working in an offline first manner. We don't all have reliable internet

82MB... that's not quite in "the same spirit" :)

> In the same spirit of Kanban

Perhaps re-read the statement. ;-)

This looks fantastic, going to give it a try for sure.

Nice, I really like the clean design of Brisqi. Very neat and well put together. Can you sync using your own cloud (say Dropbox or Nextcloud)?

Thank you :) It doesn't sync with third party storage services as of now, but I might consider it in future.

> offline-first

But subscription based.

It's free for offline-use.

Only if you need syncing to cloud with end-to-end encryption then you'd need a subscription.

Use a different chrome user profile for just this site?

Brisqi looks cool, is it possible to use self-hosted?

Thanks, it's a desktop app so no need to self-host.

I mean can I use it offline and be in complete control of all the data rather than storing it in the cloud?

Sorry for the late response. Yes you can use it completely offline. It's an offline-first app, you're in complete control of your data. You don't need to store it in the cloud.

Only if you need to sync with other devices then you can choose to do so by getting a subscription, but it's not a requirement to use the app at all. It only syncs your data to cloud if you're signed in and have a subscription, otherwise it doesn't.

TiddlyWiki [0] is also a single HTML+JS page with incredible flexibility, and someone made kanban in it too: tekan [1].

There is a long list of task/project management adaptions, including more kanban implementations, here: https://dynalist.io/d/zUP-nIWu2FFoXH-oM7L7d9DM

[0] https://tiddlywiki.com/

[1] https://ibnishak.github.io/Tesseract/projects/tekan/Tekan.ht...

Oh boy, TiddlyWiki looks amazing! I'm using Joplin right now, and the rigid structure of having notes in notebooks and sub-notebooks really starts getting in the way.

I use TiddlyWiki/drift for my own notes [0], hosting it with a php script to get a public and a private version [1]. May not fit for everyone of course, but easy to tweak and perfect for me!

[0] https://akhater.github.io/drift/

[1] https://groups.google.com/g/tiddlywiki/c/GRkskZRzj_o/m/M0QVJ...

Thanks for the suggestion. Drift looks interesting as well, but it’s hard to say whether any of its additional features are really worth it compared to the regular tiddlywiki.

Are you just hosting this on a VPS?

I constantly find myself wishing that there was a browser API for synced storage. I find myself wanting to make tools like this for my personal use but would like to share them for others as well. However right now there aren't many options other than standing up a database and being responsible for user data including privacy, security, uptime, backups and cost. I would love if there was some sort of option where the user could be responsible for their own storage and I can just let them access the code.

Of course the problem is coming up with a good syncing model. However I think even something simple would be good enough. This of course leaves the complexity to the app but we can let libraries step in until we find something that works well then consider standardizing that.

There are of course limitations with this model (you can't do inter-user logic like "friends") and for "sharing" you need another solution. (However this solution only needs to deal with "public" data).

I think the biggest problem though is that people will try to use it for tracking. But it would be super useful.

Ha, I'm very interested in this!

I had this same problem for my own app[0], I ended up solving it by just using dynamodb in my personal AWS account as the storage. Generous free tier, great uptime, and no users, security, etc to manage for me, like you mention.

It's way more technical than I'd like of course, since anyone who wants to use it needs to have a personal AWS account. And it isn't "synced", like you say, it's just using the AWS JS SDK to speak to dynamodb directly. But still it's been a real pleasure to build a web app this way -- the fact that anyone can use the app by plugging in their own storage is kind of the web development holy grail IMO, really interested in seeing what else can be done in this space.

[0] https://github.com/pickledish/cardi

FWIW there are options today like https://remotestorage.io/ and https://solidproject.org/ (which I don't know much about but it was recently on the front page). remotestorage is a nice idea because the provide client-side shims for Google Drive and Dropbox so many users can use it today but these shims are slow and buggy so it isn't really good enough today.

I definitely don't want users to need to set up their own database. Ideally I could just publish a static website (or an HMTL file) and users can use their own synced storage.

Yeah, totally agree on ideally "don't want users to need to set up their own database". And thank you a ton for these links, I hadn't seen either of these initiatives before and they're super interesting to me!

Switch local storage for IndexedDB. Good library that wraps it is PouchDB: https://pouchdb.com/

It can sync browser db to remote database.

HTML gets little respect as a programming language because it's easy. But used properly, it's extremely powerful. Used improperly, as it almost invariably is due to the very little curriculum focus on it, it is slow and stupid. I used CSS Grid to create a mini-Domain Specific Language for Periodic Table of Web APIs.

HTML is a document format. It defines the CONTENT of a webpage. That it has an API or is usually styled is secondary. The semantic tags– as used here, as used to STORE DATA here– are what make it possible to build a kanban solution so easily.

HTML is also a data format. It can be styled through the use of CSS.

HTML gets little respect as a programming language because it's not one. The programming/behavior part of this is using javascript.

That said, I'm interesting in that DSL, care to link it/talk more about it?

> HTML gets little respect as a programming language because it's not one. The programming/behavior part of this is using javascript.

Open a typical modern website– you'll see a horrible mess of divs. People using very large amounts of HTML to do what should be very simple tasks. People writing complex JavaScript and React and SPAs instead of simply writing HTML. This is a case of people doing what should be done in HTML, in JavaScript.

> That said, I'm interesting in that DSL, care to link it/talk more about it?

view-source:https://wwwperiodictable.surge.sh/

> This is a case of people doing what should be done in HTML, in JavaScript.

I see where you are coming from but people embedding static content in a scripting language doesn't make HTML a programming language. Yes, it can be used for more than what it is used for right now, but you can't "program" in HTML. You can indeed build state machines in CSS but still...

(obviously you also know this, but it could confuse people starting new)

this reminds me of https://twitter.com/killedbygoogle/status/135610566671739289...

This seems to come from thinking that Markup languages are not as important as programming languages. I find that misguided.

I really like this page from the creator's personal website:

https://swapped.cc/#!/personal-mark

This "personal mark" seems to be encapsulated well in this kanban board. Bravo!

What I most miss from nullboard is a self-hosted-absurdly-small-single-file PHP backend which adds SQLite support. I can't (== don't want to) rely on LocalStorage.

I'ts on my to-do list, but life always puts aonther thing on top of that :-)

For this to happen the storage "module" needs to be redone and cleaned up, which in turn requires having a couple of free weekends and these are hard to come by.

That said, if you will get to the point of doing anything with an aim of submitting a pull request - do ask me first. Chances are that it will take a very long time to accept the request, because that too requires a weekend to review.

In case somebody is looking for something that's integrated with GitHub's Issue API (without any third-party service scamming you off for it): I built a GitHub Scrumboard Chromium Extension that is offline-ready and doesn't need any third-party server. [1]

As I'm often developing on my laptop while being on 2G slow, this extension is offline-ready and automatically synchronizes the issues once visiting the /issues URL of an online repository again.

I posted it a while ago but I thought nobody was interested in something like this? [2]

[1] https://github.com/cookiengineer/github-scrumboard

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

This is very cool.

No frameworks, no compilers, it's FAST as hell, and you can view source and learn exactly how it works.

An elegant solution, thanks for sharing!

For self-hosted personal Kanban board with persistent DB storage and potential shared access, I've had good experience with Kanboard, https://kanboard.org/ , I'm running on a DO droplet with Nginx (or Apache) & MySQL.

One can also access the board via an JSON RPC android app, GNU GPL 3.0. https://f-droid.org/en/packages/in.andres.kandroid/

Kanboard is distributed under MIT, needs a web-server, database and php. For DB: Sqlite, Mysql/Postgres, others.

Requirements here: https://docs.kanboard.org/en/latest/admin_guide/requirements...

If you want to run it on your local machine, a LAMP / LNMP / *nix, php & DB setup (or just use docker, one command install) is quite fast and convenient. Kanboard is not as elegantly minimalist as the parent-linked-project, but since there were requests for self-hosted Kanban solutions with persistent storage and possibly web-access, I decided to share my experience. Kanboard works well for me and mobile access has been handy.

Archive link to previous discussion on Kanban & HN https://news.ycombinator.com/item?id=22888734

Was this written recently?

Exclusive use of jQuery, not using browser drag and drop (manually edits element position), using JS to animate and fade/transition instead of CSS, etc.

Is localStorage the only modern/HTML5 concept being used?

It was written when I needed a kanban board done to my specs in a minimum amount of time using whatever things I was most comfortable with.

> Exclusive use of jQuery, not using browser drag and drop (manually edits element position), using JS to animate and fade/transition instead of CSS, etc.

What's wrong with any of these?

I get that you may not personally want to work on a project like this, but as a tool you either use or don't, what does it matter whether localStorage is the only "modern" concept being used?

Not saying this to be polemic, I would genuinely like to know why as programmers we're always so critical of each others' tools.

As opposed to what? It's supposed to be a single page so why is jQuery a bad option? Only issue to point out maybe about composability, but Can any of the modern frameworks produce a single page solution?

Vue definetly could, I have a single page music/note sequencer done in it that is maybe a bit more complicated than this so yes (I really should find the time to make it public and maybe showHN, made a parse backend to it but had to leave it mid due to real-life commitments).

After trying to use HTML5 drag once, I would say never again. Unless I needed to accept files from a local file system or something. The HTML5 drag API is significantly worse than using mouse move events and absolute positioning in my experience.

What is browser drag grop?

i assume https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_a...

i just learned of it from this comment. cool!

Drag and drop is not supported by all browsers so You can not use it in real world

I think for a personal project that you use for your own ends, you can use whatever you like:)

But in general, I agree!

I’m a happy customer of KanbanFlow [1] which manages to be simple and fast while offering a range of features.

[1]: https://kanbanflow.com/

yeah but it has the ubiquitous sign-in. bleh.

just open the html in browser as a file and you're ready to go, you can delete the demo board and create one from scratch, and export/import the localStorage as a plain json file.

I once wrote something similar in React, storing all cards as issues in Github via their API. Worked quite nicely back then and even after 7 years it still does:

https://adewes.github.io/gitboard/

I always wonder why most implementation of kamban use only one column per step, instead of two as explained by Eric Brechner.

https://www.youtube.com/watch?v=CD0y-aU1sXo&t=535s

I think this is semantic. At our company we use kamban, but each step is pretty literally a step (we move back and forth between being too detailed and too focused). For us, our main definition of a "step" is a handoff. When work moves from one person to another, make a new step. Examples include to do, in progress, PR, pending qa, pending push to staging, etc. Some steps are optional, some required. Basically I think people should use Kanban tailored to their team workflow.

But if you are in, "in progress" for example, how does anyone knows it is done if you don't have the two columns? More so in your case where you do handovers.

Not GP, but the traditional kanban way is for the doer to move it to the next column. The reviewer can then move it back if they’re not satisfied.

Kanban has branched into so many different directions from the original, since people feel inspired to create their own boards. The double column approach may have its own advantages. What bothers me is when tools layer on more functionality that interfere with the basic act of moving items between columns. The last iteration of Microsoft’s kanban tool wanted you to set status by right clicking and coloring. By clicking done the task would vanish from the board. In their conception of kanban the columns were only for categorization and not for a process.

When it is done, you hand it over to the next column, right?

I love the utility of single file web apps, even if this one does use 2 external dependencies.

I've gotten into this myself. I made a couple of (actually) single file web apps for navigating/viewing videos on a web server, or Markdown on a web server.

https://github.com/pseudosavant/player.html

https://github.com/pseudosavant/markdown.html

I figured I'd have a shot at making one of these: https://github.com/dreadnip/kanban

I don't need board/list management so I made simplified version with a fixed HTML structure, only the notes are dynamic. Also uses localStorage, browser drag & drop and single file without dependencies. Pretty fun exercise in building small single page applications with just JS. Thanks for the idea OP!

Great use of simple reliable tools, ignore the complainers.

How does the same origin policy for LocalStorage work for file:// pages? Can each file read from everything that is on file:// ?

Every file is considered a separate domain.

So if you move or rename this file, you lose all your Kanban data? Seems like that “feature” might hamper adoption...

i don't think this is a tool that cares about adoption. Not everything must be a scale first SaaS product.

I would really like a client-side js library that lets you sync localstorage to consumer cloud storage (onedrive/gdrive etc)

This looks nice. I esp like that it runs fully offline.

I wonder, for offline apps like this, how would you organize the data, like e.g. backing it up, synchronize to other PCs, just making sure that you don't accidentally loose it? I wouldn't quite trust localstorage. Maybe only temporarily.

PouchDB can be used to solve some of those backing-up and synchronization issues.

https://pouchdb.com/

This is worth a look - similar goals for use, but different technical goals. The custom CSS regex rules are a nice touch. https://github.com/codaxy/tdo

So glad to see jQuery being used. I still think it’s a better solution than React/Vue most of the time.

Wow I was just looking for this :D and up it pops on hackernews. Proof of Baader-Meinhof in action.

Wow, I was looking for something like this a few days ago. I'll check it out!

This is great, so simple, would be great to have a sync feature.

This is great. Nice work.

I like how you can have titles half way down the columns.

Just FYI talking about Kanban board is a bit like talking about IT technologies (where the T stands for technology). I can't remember the word for it.

In Japanese Kanban means : signboard; sign; billboard; hoarding; doorplate

It's a bilingual tautological name and very common in place naming [1]. And nothing is wrong about that because only one word out of them would make sense to monolingual speakers.

RAS syndrome, which itself and "IT technologies" are an example, only concerns about a single word in both abbreviated and unabbreviated forms.

[1] https://en.wikipedia.org/wiki/List_of_tautological_place_nam...

RAS syndrome?

RAS syndrome - Recursive Acronym Syndrome (syndrome). See the Wikipedia link: https://en.wikipedia.org/wiki/RAS_syndrome

The free version of trello is a good alternative.

I like it. Simple and effective.

I mostly use kanban boards in teams, so not having the option to sync with other people is a deal breaker for me.

But would you move if you could sync?

jQuery... thought there are at least some modern Web API's in use.

Reply on news.ycombinator.com