post: Requiem for a Fractal Forest
This commit is contained in:
parent
36705e7c1e
commit
8d17639c96
2 changed files with 137 additions and 0 deletions
130
content/requiem.dj
Normal file
130
content/requiem.dj
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
title = "Requiem for a Fractal Forest"
|
||||
|
||||
+++
|
||||
|
||||
|
||||
It's been almost 2 years since the treehouse's inception, and there've been a lot of changes in the project throughout.
|
||||
It all started on my holiday in August 2023, when I was bored without a computer.
|
||||
Reading [Lobsters](https://lobste.rs), I stumbled upon someone's website, and it made me think a lot about how I could make a website I would love as an outlet for writing.
|
||||
A website that would truly be a reflection of myself, my own values, and my own quirkiness.
|
||||
|
||||
I opened the A5 notepad I had on me during that trip, and started sketching.
|
||||
|
||||
A website made out of bullet points.
|
||||
A tree of paragraphs, nesting forever and ever, where in every collapsed branch you could find something more.
|
||||
And it would grow into an ever-more-deeply-nesting fractal forest, a rabbit hole to suck you in for hours.
|
||||
Imagine [Vsauce](https://www.youtube.com/@Vsauce), but on a blog, and if all the tangents were optional.
|
||||
|
||||
I was really enjoying [Logseq](https://logseq.com/) at the time, and it was my primary source of inspiration for the treehouse.
|
||||
It just felt like a natural way to organise thoughts, so I wanted to create something like it, but without the lagginess and chugginess coming with a bloated frontend app written in Clojure.
|
||||
|
||||
And that, my friends, is how the treehouse was born.
|
||||
|
||||
|
||||
## The implementation
|
||||
|
||||
When I came back home, I jumped straight to my code editor.
|
||||
First a data format. Then an HTML generator. And then some CSS to style it.
|
||||
|
||||
The first version of the treehouse was up and running.
|
||||
|
||||
It wasn't much, but it worked.
|
||||
It proved the concept, so I started fleshing it out.
|
||||
|
||||
- I added some JavaScript to make the navigation more friendly.
|
||||
- Fixed some UX details of the `<details>` element that bugged me.
|
||||
- I made it so that branches could expand into lazily-loaded trees, so that you wouldn't have to navigate away from the main page.
|
||||
- I made it possible to permalink to branches of the tree, so that you could link parts of it to your friends.
|
||||
- I wrote a script that would generate unique IDs for branches for me automatically, so that I could just run `treehouse fix` before a commit, and everything would be linkable.
|
||||
- I added dates, so that you could keep track of when something was updated.
|
||||
- [And so many more things.][page:treehouse/changelog]
|
||||
|
||||
And of course, alongside all those technicalities, I was writing.
|
||||
|
||||
The treehouse is single-handedly what taught me to write regularly about my thoughts, observations, insights, and pet peeves.
|
||||
And through that, I taught myself to _Write_. \
|
||||
Text. Essays. Prose.
|
||||
|
||||
The treehouse has been on my mind as my main project ever since I started it.
|
||||
|
||||
It just resonated with me so strongly.\
|
||||
I cherished it like a beloved friend.
|
||||
|
||||
Everything I did revolved around the treehouse.
|
||||
|
||||
Most side projects I did were features, improvements, and weird experiments.
|
||||
Like that one time I wanted to add a sort-of-visual-novel-type-of-thing to the website, so I started banging out a whole [Twine](https://twinery.org/)-like story graph editor.
|
||||
|
||||
It was all incredibly fun.
|
||||
|
||||
|
||||
## The limits
|
||||
|
||||
But throughout this whole process, I was constantly running into problems with the tree format.
|
||||
You see, the UX just plain _sucked_.
|
||||
|
||||
By that I mean, the basic UX of reading pages was pretty bad.
|
||||
It felt more like reading a braindump than a polished post, even when I spent hours on structuring, proofreading, and everything.
|
||||
|
||||
The nesting was distracting.
|
||||
The more of it was there, the worse it would get.
|
||||
I pretty soon learned you gotta dial it back down to the absolute minimum. 1--3 levels is enough.
|
||||
Root for introduction and headings, 2 for heading content, and 3 for tangents.
|
||||
|
||||
But it never felt _right_.
|
||||
As you expanded branches on the main page, they would drift rightwards.
|
||||
The indentation would quickly get out of hand, eating away all your precious screen space.
|
||||
I added indent guides to help combat it, but they didn't help.
|
||||
It was like browsing an overly nested folder.
|
||||
Probably because it was _precisely that_.
|
||||
|
||||
The UI around it just felt like a huge distraction.
|
||||
Hovering over a branch always caused something to fade into your view to signal it could be interacted with, and I feel like it resulted in a lack of sense of stability to the pages.
|
||||
It was detracting you from the actual content of the website.
|
||||
|
||||
It was a fun quirk, but not much more than that.
|
||||
|
||||
I was also reaching the limits of the structure.
|
||||
A tree can only have one parent, but what if a post fits more than one category?
|
||||
Where do I put it then?
|
||||
|
||||
And what if I wanna edit posts on the web, or add a section for short tweet-like braindumps, or something?
|
||||
|
||||
It was all incredibly limiting.
|
||||
|
||||
|
||||
## The breakpoint
|
||||
|
||||
The moment I decided it was time to let go, was the moment I needed to do a layout change that'd be impossible with a tree.
|
||||
|
||||
I wanted to add my fursona to the right side of the screen.
|
||||
|
||||
Whatever I did, it would eat away too much space, and result in a feeling of imbalance.
|
||||
I had to eat away all the padding from the left side, but then the text felt too cramped.
|
||||
It was much too close to the edge of the screen.
|
||||
|
||||
The only real solution I could see was to limit the page to a smaller width, but that didn't work with the amount of UI elements tree branches had.
|
||||
|
||||
So I abandoned them!
|
||||
|
||||
Welcome to the new treehouse.
|
||||
Or, rather, just house, because there's no longer a tree.
|
||||
You can call it a _meoooow~_house if you insist. :ahyes:
|
||||
|
||||
---
|
||||
|
||||
But!
|
||||
|
||||
Even if it's not a tree in structure, it still has to support the tree format for backwards compatibility.
|
||||
I wouldn't wanna have to rewrite all those pages I've accumulated throughout the past two years.
|
||||
|
||||
But it's the end of an era.
|
||||
I'll slowly be rewriting _some parts_ of the site to this document-oriented format, just like this page.
|
||||
But maybe that isn't such a bad thing?
|
||||
|
||||
There are lots of ways you can make a really fun blog post.
|
||||
[This one comes to mind immediately](https://modem.io/blog/blog-monetization/), and honestly---would you be able to make something that amazing with a tree structure?
|
||||
|
||||
Because I wouldn't.
|
||||
|
||||
So... welcome to the new treehouse :3
|
||||
|
|
@ -26,6 +26,13 @@ if you've been wondering what I've been up to, you've come to the right place.
|
|||
if you want to read any of the posts, follow the links.
|
||||
it's like that by design.
|
||||
|
||||
% tags = ["design", "treehouse"]
|
||||
id = "01K02XZTW3VYKX0Q5NZ17NRVTF"
|
||||
- ### [Requiem for a Fractal Forest][page:requiem.dj]
|
||||
|
||||
% id = "01K02XZTW3W08E195CRHJ4XATD"
|
||||
- A retrospect on the treehouse's form factor, and why I'm getting rid of it. (at least partially)
|
||||
|
||||
% tags = ["programming"]
|
||||
id = "01JX0GYB1D4W3A6FRPBG738N4F"
|
||||
- ### [on changing the Firefox New Tab, and software freedom][page:programming/new-tab]
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue