131 lines
5.9 KiB
Text
131 lines
5.9 KiB
Text
|
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
|