14 ms·

Kanban board in one HTML using localstorage

400 points by synergy20 6y ago

synergy20 6y ago
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.
- deleted 6y ago
  [deleted]
deleted 6y ago
[deleted]
crazypython 6y ago
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.
- Phrodo_00 6y ago
  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?
  - bbu 6y ago
    this reminds me of https://twitter.com/killedbygoogle/status/1356105666717392898 https://twitter.com/killedbygoogle/status/135610566671739289...
    - Phrodo_00 6y ago
      This seems to come from thinking that Markup languages are not as important as programming languages. I find that misguided.
  - crazypython 6y ago
    > 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/ https://wwwperiodictable.surge.sh/
    - patates 6y ago
      > 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)
luismedel 6y ago
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 :-)
- apankrat 6y ago
  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.
cma 6y ago
How does the same origin policy for LocalStorage work for file:// pages? Can each file read from everything that is on file:// ?
- Jon_Lowtek 6y ago
  Every file is considered a separate domain.
  - tatersolid 6y ago
    So if you move or rename this file, you lose all your Kanban data? Seems like that “feature” might hamper adoption...
    - Jon_Lowtek 6y ago
      i don't think this is a tool that cares about adoption. Not everything must be a scale first SaaS product.
divbzero 6y ago
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/ https://kanbanflow.com/
- djmips 6y ago
  yeah but it has the ubiquitous sign-in. bleh.
ashdev 6y ago
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 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.
- sebmellen 6y ago
  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)?
  - ashdev 6y ago
    Thank you :) It doesn't sync with third party storage services as of now, but I might consider it in future.
- ramraj07 6y ago
  Use a different chrome user profile for just this site?
- huhtenberg 6y ago
  82MB... that's not quite in "the same spirit" :)
  - richrichardsson 6y ago
    > In the same spirit of Kanban Perhaps re-read the statement. ;-)
- vesinisa 6y ago
  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.
gayprogrammer 6y ago
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?
- ghoshbishakh 6y ago
  What is browser drag grop?
  - whateveracct 6y ago
    i assume https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_a... i just learned of it from this comment. cool!
- malinens 6y ago
  Drag and drop is not supported by all browsers so You can not use it in real world
  - wilsonrocks 6y ago
    I think for a personal project that you use for your own ends, you can use whatever you like:) But in general, I agree!
- apankrat 6y ago
  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.
- ramraj07 6y ago
  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?
ximm 6y ago
I mostly use kanban boards in teams, so not having the option to sync with other people is a deal breaker for me.
- jaisondavis 6y ago
  But would you move if you could sync?
5cents 6y ago
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 https://dynalist.io/d/zUP-nIWu2FFoXH-oM7L7d9DM [0] https://tiddlywiki.com/ https://tiddlywiki.com/ [1] https://ibnishak.github.io/Tesseract/projects/tekan/Tekan.html https://ibnishak.github.io/Tesseract/projects/tekan/Tekan.ht...
- iFreilicht 6y ago
  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.
  - 5cents 6y ago
    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/ https://akhater.github.io/drift/ [1] https://groups.google.com/g/tiddlywiki/c/GRkskZRzj_o/m/M0QVJIg_AQAJ https://groups.google.com/g/tiddlywiki/c/GRkskZRzj_o/m/M0QVJ...
    - iFreilicht 6y ago
      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?
apankrat 6y ago
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 https://news.ycombinator.com/item?id=20077177
- gorbypark 6y ago
  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.
  - zikzak 6y ago
    Please check out logseq.com (used GitHub as back-end with js doing commits from local storage, etc).
    - mvanders 6y ago
      I'm desperately looking for documentation on LogSeq. F.i. simply how to embed source code written in PowerShell?
      - zikzak 6y ago
        The basics of using it are here - https://logseq.github.io/#/page/getting%20started 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 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 https://discord.gg/KpN4eHY I am a pretty basic user of this, but if there is anything else you want to know, please ask.
toto444 6y ago
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
- thewakalix 6y ago
  RAS syndrome?
  - rhymenoceros 6y ago
    RAS syndrome - Recursive Acronym Syndrome (syndrome). See the Wikipedia link: https://en.wikipedia.org/wiki/RAS_syndrome https://en.wikipedia.org/wiki/RAS_syndrome
- lifthrasiir 6y ago
  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_names https://en.wikipedia.org/wiki/List_of_tautological_place_nam...
mxschmitt 6y ago
jQuery... thought there are at least some modern Web API's in use.
seomint 6y ago
This is great. Nice work.
cookiengineer 6y ago
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 https://github.com/cookiengineer/github-scrumboard [2] https://news.ycombinator.com/item?id=25240087 https://news.ycombinator.com/item?id=25240087
albertzeyer 6y ago
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.
- dmux 6y ago
  PouchDB can be used to solve some of those backing-up and synchronization issues. https://pouchdb.com/ https://pouchdb.com/
macca321 6y ago
I would really like a client-side js library that lets you sync localstorage to consumer cloud storage (onedrive/gdrive etc)
queuep 6y ago
Wow, I was looking for something like this a few days ago. I'll check it out!
tomcooks 6y ago
Great use of simple reliable tools, ignore the complainers.
coffeefirst 6y ago
This is very cool. No frameworks, no compilers, it's FAST as hell, and you can view source and learn exactly how it works.
moksha256 6y ago
I really like this page from the creator's personal website: https://swapped.cc/#!/personal-mark https://swapped.cc/#!/personal-mark This "personal mark" seems to be encapsulated well in this kanban board. Bravo!
kevincox 6y ago
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.
- pickledish 6y ago
  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 https://github.com/pickledish/cardi
  - kevincox 6y ago
    FWIW there are options today like https://remotestorage.io/ https://remotestorage.io/ and https://solidproject.org/ 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.
richardesigns 6y ago
I like how you can have titles half way down the columns.
kwanbix 6y ago
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 https://www.youtube.com/watch?v=CD0y-aU1sXo&t=535s
- mchusma 6y ago
  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.
  - kwanbix 6y ago
    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.
    - twobitshifter 6y ago
      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.
    - mixmastamyk 6y ago
      When it is done, you hand it over to the next column, right?
pseudosavant 6y ago
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/player.html https://github.com/pseudosavant/markdown.html https://github.com/pseudosavant/markdown.html
ThePhysicist 6y ago
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/ https://adewes.github.io/gitboard/
tweetle_beetle 6y ago
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 https://github.com/codaxy/tdo
bernardv 6y ago
I like it. Simple and effective.
sanderdlm 6y ago
I figured I'd have a shot at making one of these: https://github.com/dreadnip/kanban 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!
pruthvishetty 6y ago
The free version of trello is a good alternative.
stjohnswarts 6y ago
Wow I was just looking for this :D and up it pops on hackernews. Proof of Baader-Meinhof in action.
tambourine_man 6y ago
So glad to see jQuery being used. I still think it’s a better solution than React/Vue most of the time.
NotPavlovsDog 6y ago
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/ 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/ 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.html 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 https://news.ycombinator.com/item?id=22888734
monkeydust 6y ago
This is great, so simple, would be great to have a sync feature.

400 points by synergy20 6y ago

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.

deleted 6y ago
[deleted]

deleted 6y ago

[deleted]

crazypython 6y ago

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.

Phrodo_00 6y ago
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?
- bbu 6y ago
  this reminds me of https://twitter.com/killedbygoogle/status/1356105666717392898 https://twitter.com/killedbygoogle/status/135610566671739289...
  - Phrodo_00 6y ago
    This seems to come from thinking that Markup languages are not as important as programming languages. I find that misguided.
- crazypython 6y ago
  > 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/ https://wwwperiodictable.surge.sh/
  - patates 6y ago
    > 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)

luismedel 6y ago

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 :-)

apankrat 6y ago
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.

cma 6y ago

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

Jon_Lowtek 6y ago
Every file is considered a separate domain.
- tatersolid 6y ago
  So if you move or rename this file, you lose all your Kanban data? Seems like that “feature” might hamper adoption...
  - Jon_Lowtek 6y ago
    i don't think this is a tool that cares about adoption. Not everything must be a scale first SaaS product.

divbzero 6y ago

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/ https://kanbanflow.com/

djmips 6y ago
yeah but it has the ubiquitous sign-in. bleh.

ashdev 6y ago

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

sebmellen 6y ago
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)?
- ashdev 6y ago
  Thank you :) It doesn't sync with third party storage services as of now, but I might consider it in future.
ramraj07 6y ago
Use a different chrome user profile for just this site?
huhtenberg 6y ago
82MB... that's not quite in "the same spirit" :)
- richrichardsson 6y ago
  > In the same spirit of Kanban Perhaps re-read the statement. ;-)
vesinisa 6y ago
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.

gayprogrammer 6y ago

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?

ghoshbishakh 6y ago
What is browser drag grop?
- whateveracct 6y ago
  i assume https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_a... i just learned of it from this comment. cool!
malinens 6y ago
Drag and drop is not supported by all browsers so You can not use it in real world
- wilsonrocks 6y ago
  I think for a personal project that you use for your own ends, you can use whatever you like:) But in general, I agree!
apankrat 6y ago
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.
ramraj07 6y ago
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?

ximm 6y ago

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

jaisondavis 6y ago
But would you move if you could sync?

5cents 6y ago

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 https://dynalist.io/d/zUP-nIWu2FFoXH-oM7L7d9DM [0] https://tiddlywiki.com/ https://tiddlywiki.com/ [1] https://ibnishak.github.io/Tesseract/projects/tekan/Tekan.html https://ibnishak.github.io/Tesseract/projects/tekan/Tekan.ht...

iFreilicht 6y ago
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.
- 5cents 6y ago
  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/ https://akhater.github.io/drift/ [1] https://groups.google.com/g/tiddlywiki/c/GRkskZRzj_o/m/M0QVJIg_AQAJ https://groups.google.com/g/tiddlywiki/c/GRkskZRzj_o/m/M0QVJ...
  - iFreilicht 6y ago
    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?

apankrat 6y ago

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 https://news.ycombinator.com/item?id=20077177

gorbypark 6y ago
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.
- zikzak 6y ago
  Please check out logseq.com (used GitHub as back-end with js doing commits from local storage, etc).
  - mvanders 6y ago
    I'm desperately looking for documentation on LogSeq. F.i. simply how to embed source code written in PowerShell?
    - zikzak 6y ago
      The basics of using it are here - https://logseq.github.io/#/page/getting%20started 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 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 https://discord.gg/KpN4eHY I am a pretty basic user of this, but if there is anything else you want to know, please ask.

toto444 6y ago

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

thewakalix 6y ago
RAS syndrome?
- rhymenoceros 6y ago
  RAS syndrome - Recursive Acronym Syndrome (syndrome). See the Wikipedia link: https://en.wikipedia.org/wiki/RAS_syndrome https://en.wikipedia.org/wiki/RAS_syndrome
lifthrasiir 6y ago
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_names https://en.wikipedia.org/wiki/List_of_tautological_place_nam...

mxschmitt 6y ago

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

seomint 6y ago

This is great. Nice work.

cookiengineer 6y ago

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 https://github.com/cookiengineer/github-scrumboard [2] https://news.ycombinator.com/item?id=25240087 https://news.ycombinator.com/item?id=25240087

albertzeyer 6y ago

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.

dmux 6y ago
PouchDB can be used to solve some of those backing-up and synchronization issues. https://pouchdb.com/ https://pouchdb.com/

macca321 6y ago

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

queuep 6y ago

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

tomcooks 6y ago

Great use of simple reliable tools, ignore the complainers.

coffeefirst 6y ago

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

moksha256 6y ago

I really like this page from the creator's personal website: https://swapped.cc/#!/personal-mark https://swapped.cc/#!/personal-mark This "personal mark" seems to be encapsulated well in this kanban board. Bravo!

kevincox 6y ago

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.

pickledish 6y ago
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 https://github.com/pickledish/cardi
- kevincox 6y ago
  FWIW there are options today like https://remotestorage.io/ https://remotestorage.io/ and https://solidproject.org/ 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.

richardesigns 6y ago

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

kwanbix 6y ago

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 https://www.youtube.com/watch?v=CD0y-aU1sXo&t=535s

mchusma 6y ago
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.
- kwanbix 6y ago
  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.
  - twobitshifter 6y ago
    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.
  - mixmastamyk 6y ago
    When it is done, you hand it over to the next column, right?

pseudosavant 6y ago

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/player.html https://github.com/pseudosavant/markdown.html https://github.com/pseudosavant/markdown.html

ThePhysicist 6y ago

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/ https://adewes.github.io/gitboard/

tweetle_beetle 6y ago

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 https://github.com/codaxy/tdo

bernardv 6y ago

I like it. Simple and effective.

sanderdlm 6y ago

I figured I'd have a shot at making one of these: https://github.com/dreadnip/kanban 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!

pruthvishetty 6y ago

The free version of trello is a good alternative.

stjohnswarts 6y ago

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

tambourine_man 6y ago

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

NotPavlovsDog 6y ago

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/ 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/ 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.html 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 https://news.ycombinator.com/item?id=22888734

monkeydust 6y ago

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