Recursive Notes

27 Mar 2021
Progress: Demo

Personally, I'm a fan of whiteboards, but some people swear by post-it notes.

The now-ubiquitous Kanban board, with columns for "to do", "doing" and "done", is often implemented with virtual post-it notes on services such as Trello.

Like any sane human being, I have a certain hatred of management techniques. I've seen them misapplied, misunderstood and used to mask incompetence far too many times. You can't hide behind the tiny post-it notes! But having a healthy hatred of management doesn't mean I reject the techniques entirely. Even for personal projects, managing time is essential.

There's a godawful amount of note-taking and management software out there, so this idea has almost certainly already been done, but what I'd like to have is a recursive trello board, where every post-it note is itself a trello board, ad infinitum.

Since I am a weird person who considers Javascript a form of relaxation, a while back I spent some time playing around with the idea. I built a working prototype, but naturally I got distracted as soon as it stopped being fun.

In the screenshot above, double-clicking on "Test note two" might show this:

The trail along the top keeps track of how deep you are:

To try out the demo, head here. The source code to the demo is on github.

What it's got so far:

• Any note can have text or drawings on it, and can contain any number of notes.

• Double-clicking on a note "jumps into" that note, and a trail along the top lets you return.

• Double-clicking on the text on a note will let you edit it. Some basic markdown support has been added, including hyperlinks and code snippets.

• Double-clicking on the background will add a new note. Click and drag on the background to draw.

• Click and drag to move a note, and drag a note onto another note to send one into the other.

• Drag the corner of a note to resize it.

• Click the gear icon on a note to get a menu of actions.

• Press Ctrl+Z to undo.

• The whole state is saved to the browser's local storage. The state can be downloaded as a .json file and re-loaded by dragging a file onto the page. Hitting "reset" in the top right corner will re-load the original examples.

Before it could be considered usable there are a few things which would absolutely need to get added:

• Support on mobile, touch events etc. It only really works with a mouse currently.

• Cloud sync, automatically saving every change to the server. This would go hand-in-hand with adding multi-user support.

• A tree structure overview of the nested layers, including being able to drag and drop a note to an arbitrary point on the tree structure. Tedious to add, but when enough layers are added it becomes hard to navigate without this.

And ideally, here are some other things that should be added:

• Better pan/zoom, with an infinite canvas and indifference to different screen resolutions.

• Templates, or some other way of enforcing a rigid structure if it was wanted. If you just want a to-do/doing/done setup, this much freedom is not helpful.

• A controlled history of changes, maybe even an event log such as "Bob moved task X into Y". Possibly tied in as a web hook for chat programs.

• Comments and discussions on notes

• URL rewriting, so you can copy and paste the current URL to link to a specific note or view

• Embedding pictures, and all the bits of markdown that are still missing.

The idea of using this recursive project-management tool as a means to finish the outstanding tasks on said tool has not escaped me. There is something infinitely appealing about recursion.

Update: The recursive experiments continue in part 2.