[HN Gopher] Kanban board in one HTML using localstorage
___________________________________________________________________
Kanban board in one HTML using localstorage
Author : synergy20
Score : 365 points
Date : 2021-02-16 05:22 UTC (17 hours ago)
(HTM) web link (github.com)
(TXT) w3m dump (github.com)
| coffeefirst wrote:
| This is very cool.
|
| No frameworks, no compilers, it's FAST as hell, and you can view
| source and learn exactly how it works.
| sanderdlm wrote:
| 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!
| luismedel wrote:
| 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 wrote:
| 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 wrote:
| How does the same origin policy for LocalStorage work for file://
| pages? Can each file read from everything that is on file:// ?
| Jon_Lowtek wrote:
| Every file is considered a separate domain.
| tatersolid wrote:
| So if you move or rename this file, you lose all your Kanban
| data? Seems like that "feature" might hamper adoption...
| Jon_Lowtek wrote:
| i don't think this is a tool that cares about adoption. Not
| everything must be a scale first SaaS product.
| kwanbix wrote:
| 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
| mchusma wrote:
| 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 wrote:
| 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.
| mixmastamyk wrote:
| When it is done, you hand it over to the next column,
| right?
| twobitshifter wrote:
| 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.
| pseudosavant wrote:
| 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
| stjohnswarts wrote:
| Wow I was just looking for this :D and up it pops on hackernews.
| Proof of Baader-Meinhof in action.
| queuep wrote:
| Wow, I was looking for something like this a few days ago. I'll
| check it out!
| macca321 wrote:
| I would really like a client-side js library that lets you sync
| localstorage to consumer cloud storage (onedrive/gdrive etc)
| divbzero wrote:
| 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/
| djmips wrote:
| yeah but it has the ubiquitous sign-in. bleh.
| 5cents wrote:
| 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...
| iFreilicht wrote:
| 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 wrote:
| 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/M0
| QVJ...
| pruthvishetty wrote:
| The free version of trello is a good alternative.
| apankrat wrote:
| 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
| solinent wrote:
| 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.
| apankrat wrote:
| See my reply here -
| https://news.ycombinator.com/item?id=26152103
| A4ET8a8uTh0 wrote:
| 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.
| mulmen wrote:
| FYI there is a "favorite" button on submissions and on
| comments if you click the timestamp.
| A4ET8a8uTh0 wrote:
| Oh good grief, how on earth did I miss it:> Thank you.
| murukesh_s wrote:
| Superb! wish you had keyboard shortcut to delete items..
| sdfjkl wrote:
| Thanks, perfect for what I need (offline, single user, simple
| to use).
| MayeulC wrote:
| 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
| gorbypark wrote:
| 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 wrote:
| Please check out logseq.com (used GitHub as back-end with js
| doing commits from local storage, etc).
| CyberDildonics wrote:
| What does it mean to do something in "one HTML"?
| wccrawford wrote:
| Other than the font and jQuery, there's only 1 useful file in
| the repo. The HTML file.
| crowdhailer wrote:
| 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.
| tomcooks wrote:
| Great use of simple reliable tools, ignore the complainers.
| mxschmitt wrote:
| jQuery... thought there are at least some modern Web API's in
| use.
| tambourine_man wrote:
| So glad to see jQuery being used. I still think it's a better
| solution than React/Vue most of the time.
| seomint wrote:
| This is great. Nice work.
| [deleted]
| ThePhysicist wrote:
| 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/
| kevincox wrote:
| 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 wrote:
| 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
| kevincox wrote:
| 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.
| pickledish wrote:
| 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!
| ashdev wrote:
| 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.
| blowfish721 wrote:
| This looks fantastic, going to give it a try for sure.
| oilbagz wrote:
| 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?
| the_gipsy wrote:
| Yes, I wouldn't trust localStorage to survive for long.
| gryn wrote:
| 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.
| donkeyd wrote:
| 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.
| davchana wrote:
| 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();})()
| 5560675260 wrote:
| 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.
| DennisP wrote:
| 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.
| bachmeier wrote:
| 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.
| ramraj07 wrote:
| Use a different chrome user profile for just this site?
| huhtenberg wrote:
| 82MB... that's not quite in "the same spirit" :)
| richrichardsson wrote:
| > In the same spirit of Kanban
|
| Perhaps re-read the statement. ;-)
| vesinisa wrote:
| 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.
| rualca wrote:
| > 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.
| tasogare wrote:
| > offline-first
|
| But subscription based.
| ashdev wrote:
| It's free for offline-use.
|
| Only if you need syncing to cloud with end-to-end encryption
| then you'd need a subscription.
| nojs wrote:
| Brisqi looks cool, is it possible to use self-hosted?
| ashdev wrote:
| Thanks, it's a desktop app so no need to self-host.
| sebmellen wrote:
| 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 wrote:
| Thank you :) It doesn't sync with third party storage
| services as of now, but I might consider it in future.
| crowdhailer wrote:
| Looks very nice, always think it should be commended working in
| an offline first manner. We don't all have reliable internet
| albertzeyer wrote:
| 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 wrote:
| PouchDB can be used to solve some of those backing-up and
| synchronization issues.
|
| https://pouchdb.com/
| crazypython wrote:
| 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 wrote:
| 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 wrote:
| this reminds me of https://twitter.com/killedbygoogle/status/
| 135610566671739289...
| crazypython wrote:
| > 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/
| patates wrote:
| > 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)
| moksha256 wrote:
| 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!
| cookiengineer wrote:
| 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
| richardesigns wrote:
| I like how you can have titles half way down the columns.
| synergy20 wrote:
| 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]
| bernardv wrote:
| I like it. Simple and effective.
| gayprogrammer wrote:
| 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?
| malinens wrote:
| Drag and drop is not supported by all browsers so You can not
| use it in real world
| wilsonrocks wrote:
| I think for a personal project that you use for your own
| ends, you can use whatever you like:)
|
| But in general, I agree!
| ghoshbishakh wrote:
| What is browser drag grop?
| whateveracct wrote:
| i assume https://developer.mozilla.org/en-
| US/docs/Web/API/HTML_Drag_a...
|
| i just learned of it from this comment. cool!
| recursive wrote:
| 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.
| ramraj07 wrote:
| 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?
| whizzter wrote:
| 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).
| Udo wrote:
| _> 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.
| apankrat wrote:
| 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.
| toto444 wrote:
| 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 wrote:
| RAS syndrome?
| rhymenoceros wrote:
| RAS syndrome - Recursive Acronym Syndrome (syndrome). See the
| Wikipedia link: https://en.wikipedia.org/wiki/RAS_syndrome
| lifthrasiir wrote:
| 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...
| tweetle_beetle wrote:
| 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
| ximm wrote:
| I mostly use kanban boards in teams, so not having the option to
| sync with other people is a deal breaker for me.
| jaisondavis wrote:
| But would you move if you could sync?
___________________________________________________________________
(page generated 2021-02-16 23:02 UTC)