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.
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)).
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.
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.
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.
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.
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.)
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.
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.
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();})()
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.
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!
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.
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.
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.
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!
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.
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?
> 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)
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]
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.
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.
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?
> 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.
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:
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.
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.
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!
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.
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
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.
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