https://futureofcoding.org/ logo
Join Slack
Powered by
Scrolling file at a time on the infinite 2D surfac...
# devlog-together
k
Scrolling file at a time on the infinite 2D surface of my note-taking app. The problem I was trying to solve was that I'd scroll down some ways, open a new file and find the new, short column way off screen above. Now I can bring the new file on screen with with one more, 
top
command. I'm still not quite happy with this solution. I don't want to always automatically jump back up to the top of the surface; that feels more busy than the feeling of solidity/reliability I'm going for.
👍 2
j
👍 1
💡 1
Just to expand a bit. I love the idea of a infinite text file. Archly and Canon Cat were always interfaces I wish existed in modern versions. I particularly like the quasi-modal leap key setup. Definitely something to consider for your app. Used an app called Enso from Jef Raskin’s son Aza back in the day. They used caps-lock as the leap key and it was super efficient once you got used to it.
k
You're the second person to mention Canon Cat to me. I'd never heard of it! It does look very relevant.
j
Yeah Jef Raskin (original macintosh design and author of The Humane Interface) created both archy and the Canon Cat. Your stuff definitely seems in the vein of Jef's approach to design
k
❤️ What a compliment.
w
Yep, I came here to point to Jef Raskin's work. Just to fully flesh things out, Your Undivided Attention https://www.humanetech.com/podcast is arguably Aza Raskin's penance for inventing doom scrolling.
❤️ 1
k
Current state of my note-taking app Thanks a lot to @Jack Rusher and

https://www.youtube.com/watch?v=A0TafHXszgM▾

for guidelines on the command palette.
👍 1
Things of note: • Operates on a hard-coded directory of text files. • No overlapping, no tiling, just an infinite 2D surface of columns. Commands open new columns. • Wordstar-style menu up top of important commands in current context, and their shortcuts. • Command palette at top left that filters commands available in current context. • Files/nodes can have links. Links can form graphs, as the picture shows (original: http://www.maplefish.com/todd/papers/Experiences.html via https://www.notion.so/A-Pattern-Language-for-Interfaces-c2f88d6b16d84293995c006042e79d88 by @yoshiki) • Links have labels (next/previous by default). • Graph-traversal commands can take an argument (next/previous by default) of the edge label you want to follow. • The 
add
command adds an edge immediately to the current node, while 
append
traverses the edge repeatedly to the end, then adds. • 
step
navigates along an edge from the current node and opens it in a new column, 
unroll
traverses the edge repeatedly to the end and collects all nodes into a single column. 
add
: 
append
:: 
step
: 
unroll
It's been a rough couple of days. I added what seemed like a simple feature -- optional headers and footers for notes -- and the cascading bugs and mutual regressions that has caused are revealing fundamental issues with my approach to rendering.
👍 2
Things to note in this screenshot: • Notes show what links emanate from them in the footer. Helps a lot with discoverability. • Notes can have a title. The title isn't a property of the note; the same note has different titles in different columns. When showing neighbors of a single note (middle column), it shows the relationship (edge label) of each note. When unrolling repeatedly along a single edge label, a numeric index gives a sense of how far down you are (a poor replacement for progress bars, which I feel ill-equipped to tackle just yet) • The footer of one note overlaps the title of the next. I fixed it once before, but have ping-ponged back into it.
m
What is the technology stack for your note-taking app?
j
can we see some examples of what notes with multiple links/edges look like?
k
@Maikel I'm exclusively using Lua and https://love2d.org these days because it feels like a nice sweet spot of batteries-included and simple/easy-to-build implementation. @Jack Rusher Does this help?
👍 1
j
Yeah, gives me a better idea of what's going on 🙂
👍🏼 1
k
the cascading bugs and mutual regressions that has caused are revealing fundamental issues with my approach to rendering.
On the positive side, I just realized I haven't had issues with lag in the last few days, and as a result I haven't been closing columns in my (real) notes. I have a couple of dozen open now, and it's still utterly stable. A tiny amount of work I did a few days ago to start evicting off-viewport state seems to have made it significantly more efficient. The issues I've been obsessing over are cosmetic. I can fix that overlap in the screenshots. And it's only been popping back because I've been chasing minor violations of the "single stable surface" visual metaphor with panes appearing and disappearing near the edges. Maybe it's not worth the complexity cost to worry about those.
I've fixed the issues I was struggling with above, and spent some time this morning messing with the colors. Inspiration: https://merveilles.town/@neauoire/108796208617955222
🤩 2
Too late[1], I realized I ended up with HN lolsob No matter, I still like it for now. [1] I've tweaked the color for myself for years so forgot what the default looks like.
😂 3
j
Recommend against the low contrast combo of black on dark orange for anything you're going to read with any frequency.
k
Yeah I already tired of it 🙂 What's good for a book cover turns out not to work in other situations.
💯 2
j
When I first started "blogging" (before the term was coined), I studied book design to understand how the text should be formatted. It's a really good sub-discipline of graphic design for anything that needs to be readable!
💯 1
k
• I had a conversation with Drew DeVault after reading https://drewdevault.com/2022/08/10/Organizing-my-thoughts.html which led me to publish pensieve.love FWIW (links within) • I implemented "find on surface" which lets me search for text patterns in any note currently opened all across the surface. This is preparation for the boss level: searching all my notes without locking up the UI.
🙏 1
Open in Slack
PreviousNext
Powered by