Added images. I had intended on keeping this purely text based for easy retrieval but I have found that images provide memorable waypoints as the note volume increases.
Conversation
Next line of inquiry is whether having notes slot into place is desirable.
It’s a foundational question about the browser’s inherent block-level stacking. In file explorer contexts, sometimes it’s desirable to have items snap and align to a grid, sometimes is simply irrelevant.
1
4
And the next housekeeping improvement: the notes could have a smaller font size, smaller margins and padding etc.
My blog/tapestry manages to show much more info at any one time - this note-taking prototype needs to go one better.
Quote Tweet
Tidied up the columns in the blog/tapestry and added CSS shapes to add to the picture encyclopedia vibe - jordanm.co.uk
Show this thread
0:17
1.5K views
2
7
Exploring a random detour with colour shortcuts where the currently hovered note can have colours assigned to it via the 0-9 number keys (0 being the default colour).
0:06
147 views
1
4
At a wider scale, it means you can visually group notes by colour (in addition to moving similar notes together)
0:06
216 views
1
6
A typical responsive design would completely ruin the idea behind this.
It’s easy to scoff at pinch-to-zoom, but it’s much better than stacking notes in this situation. There is inferred meaning on horizontal and vertical lines. Proximity matters here.
1
7
The other line of inquiry was if notes slotting into place was desirable — i.e questioning if the browser's inherent block-level stacking is the wrong assumption.
I didn't think this would work but... I love it, EVEN with the directional link modifier keys (look closely to see)
0:25
544 views
2
2
8
W, A, S, D (up, left, right, down) modifiers position the next note close to the chosen side of the active note which keeps it in reach.
Rather than letting the grid/channels put the notes roughly where you want, it feels much more liberating to put them *exactly* where you want
2
8
In an attempt to avoid learning collision detection when multiple notes are opened on the same side within the same active note prior to being moved, I decided to randomly rotate them which produces a nice stacking effect.
(Ignore the random note-opening audio)
0:06
275 views
2
8
Yep, screw the grid. The funny part is, the dynamic grid was the hard bit when it came to opening notes in ↑ ← ↓ → directions.
The stacking is much better with a hint of rotation randomly assigned to each note. There probably is a smarter way with collision detection.
5
14
Replying to
This seems like an important insight. Really enjoying your explorations here.
Replying to
Thank you for the kind words, Andy 🙏🏻 Your notes sparked a chain reaction of ideas!