about the treehouse · riki's house

hey! looks like you have JavaScript disabled.
I respect that decision, but you may find the experience of browsing the treehouse… not great.
for example, links to branches may not work properly. I cannot do anything about this; it's due to how the <details> element works.
(a <details> will not expand itself automatically to reveal the linked element to you.)
I did my best to at least keep the site readable in this state, but you can only do so much with plain HTML and CSS.

Pinky promise this website does not contain any malicious code such as trackers or cryptocurrency miners.
if you don't believe me, you're free to inspect the source yourself! all the scripts are written lovingly in vanilla JS (not minified!) by yours truly ❤️

and if this box is annoying, feel free to block it with uBlock Origin or something. I have no way of remembering you closed it, and don't wanna add a database to this website. simplicity rules!

liquidex’s treehouse can be thought of as many things.
2023-08-20
the treehouse is a reflection of my own personality
2023-08-20
- this is a literal braindump
  2023-08-20
- whatever’s on my mind at the time that I wanna share with the world, I write down here
  2023-08-20
  - doing my best to keep it approachable and readable by not just me, but you too
    2023-08-27
- I built this treehouse because I love sharing cool stuff with people
  2023-08-20
  - and also because I am obsessed with many things and I wanna share this obsession with the world
    2023-08-20
- wouldn’t you make yourself at home?
  2023-08-20
- …
  2023-08-27
  - by the way did you know this website has custom emojis? and quite a lot of them, too
    2023-08-27
the treehouse is a statement of artistic expression
2023-08-20
- the treehouse is not your typical blog
  2023-08-20
- as you can tell the structure is quite different
  2023-08-20
  - instead of containing finished posts, it just sort of… is
    2023-08-20
  - nesting indefinitely
    2023-08-20
    like really, where does it end?
    2023-08-20
    where?
    2023-08-20
    WHERE???
    2023-08-20
  - always evolving and shaping and shifting
    2023-08-20
    so that I never need to finish anything
    2023-08-20
    I can just sit down, type something out
    2023-08-20
    then forget about it
    2023-08-20
    then come back again, type out something more
    2023-08-20
    isn’t this just way more pleasant?
    2023-08-20
    isn’t that… in the spirit of Agile
    2023-08-20
    …of all things?
    2023-08-20
    not that I designed around its ideas, but there’s a semblance, isn’t there?
    2023-08-20
- it is designed to be elegant and clutter-free
  2023-08-20
  - the treehouse contains no ads to annoy you, no sidebars to interrupt
    2023-08-20
  - it doesn’t even have a navigation bar, because it doesn’t need one
    2023-08-20
  - it’s built to focus on the substance
    2023-08-20
  - it’s built to let your imagination go free
    2023-08-20
  - it’s just a cool space to let go of your worries, and breathe
    2023-08-20
- it is designed to be user-friendly
  2023-08-20
  - because there is too much software nowadays that does not care about you
    2023-08-20
  - and that frustrates me, too
    2023-08-20
  - there are bits of JavaScript that power this site, to make it just that little bit more pleasant
    2023-08-20
    but without overwhelming your computer or bandwidth
    2023-08-20
    you can disable the JavaScript, and everything will mostly work
    2023-08-20
    but you may not find the experience favorable
    2023-08-20
- but most important of all, it is weird.
  2023-08-20
  - weird as me
    2023-08-20
  - writing this “poem”
    2023-08-20
    can you even call it that?
    2023-08-20
    have I invented something new here?
    2023-08-20
    the “Choose Your Own Poem” lol
    2023-08-27
  - I understand if this form of writing can be daunting at first, but please, give it a shot. I’m doing my best to make it as accessible as possible.
    2023-08-27
the treehouse is a mostly statically generated website
2023-08-20
- weird poems and philosophical talk are over, it’s time to focus on the tech.
  2023-08-20
  - call this an overview, Defense of Design, or what have you
    2023-08-27
- treehouse is built in the programming language that gives me the most pleasure coding.
  2023-08-20
  - no need for you to know more.
    2023-08-27
  - personally… the language you build a personal project with almost never matters. it’s rather how you execute your ideas.
    2023-08-20
    therefore I find boasting that my project is powered by a $LANGUAGE or a $FRAMEWORK unnecessary.
    2023-08-27
    but if you really care that much, it’s built with Rust, plain HTML5, plain CSS, and Vanilla JS.
    2023-08-27
    (yes, I know that website is super old, but I still find it incredibly funny )
    2023-08-27
  - if you wanna browse the source code, feel free to check it out here
    2023-08-20
- as I alluded to here, treehouse is built to decay gracefully as you take away the fancy parts.
  2023-08-20
  - you will be able to read it just fine without JavaScript, just that it’ll be a little less pleasant.
    2023-08-27
    that’s because the JS handles stuff like lazy loading of linked trees.
    2023-08-27
    you may have seen a brief ”Loading…” text flash before your eyes as you opened this about this branch - that’s it downloading another tree and pasting it into this document
    2023-08-27
    when JS is unavailable we fall back to a plain old <a> link through a <noscript> tag. if you have uBlock Origin, or any other JS blocker, you can try that out yourself!
    2023-08-27
    the JS also lets you select text in these <details> elements without them collapsing as you release the mouse button.
    2023-08-27
    I have no clue why it is this way by default, but frankly it’s like a 5 line usability fix, so why not.
    2023-08-27
    if you have accessibility concerns about this decision, please let me know.
    2023-08-27
    it also saves your progress as you read. if you refresh the page, you’ll notice you end up exactly where you left off!
    2023-08-27
    but, there is one very crucial piece of JavaScript that makes this website tick, and your experience will be degraded if you disable it. that feature is linking to branches.
    2023-08-27
    by default, if you link to an element by its id and it’s contained within a <details>, the <details> will not expand.
    2023-08-27
    therefore there’s a bit of JS to make that work, and to tie that together with lazy loading.
    2023-08-27
  - treehouse will not work as fine without CSS though - the <details> will look extremely janky, but the content should still be fully readable.
    2023-08-27
- myself, I’m writing this content in a bespoke format called .tree.
  2023-08-27
  - the structure of .tree files is extremely minimal. there are only a few syntactic features to speak of.
    2023-08-27
  - here’s a taste of .tree:
    2023-08-27
    % id = "root" - this is a branch % id = "child" - this is a child branch + this is a branch that is collapsed - and this is a child of that branch % content.link = "some-other-tree" - and this branch links to another tree
    2023-08-27
  - the .tree format is line-based. that means the %, -, and + tokens are only interpreted when at the beginning of a line.
    2023-08-27
  - the basic unit of .tree is a branch. branches…
    2023-08-27
    …are located at a specific indent level
    2023-08-27
    …may or may not have attributes - that’s what the percentage sign % begins
    2023-08-27
    …may or may not be expanded by default (this is the branch’s kind) - that’s what the minus - and plus + tokens do
    2023-08-27
  - each branch is constructed in this order: optional attributes, kind, content
    2023-08-27
  - and ends when another line beginning with %, -, or + is found.
    2023-08-27
  - other than that, .tree assumes nothing about what format the branch attributes or content are encoded in.
    2023-08-27
    I chose TOML and Djot for their ease of use and flexibility, but the parser couldn’t care less.
    2023-08-27
    …actually, that’s a lie. see that code example above? Markdown code fences ``` are handled specially to let embed .tree source code blocks within .tree files. that’s all.
    2023-08-27
    I actually used to use Markdown, but then I saw Djot and progressively warmed up to it until I convinced myself fully that “yes, this is a better markup format.”
    2024-07-23
- every branch in the treehouse has a globally unique ID.
  2023-08-27
  - this is because I want every branch to be individually linkable and quotable.
    2023-08-27
    if you ever want to link anything I said in an argument online: hover over a branch, right-click that little permalink icon that’s on the right side of the screen, and Copy Link.
    2023-08-27
  - but manually coming up with ids for branches would be quite the nuisance.
    2023-08-27
    that’s why with the power of Tools Programming™, I built a tool that fills out all the ids for me.
    2023-08-27
    I chose ulids for generated ids, for a few reasons:
    2023-08-27
    they’re guaranteed to be unique, so I can be sure no two branches end up having the same id
    2023-08-27
    which is precisely what lets me pull the trick where I embed one tree within another, and you just dig into index.html.
    2023-08-27
    they embed a timestamp, which I can use to display the date/time when a branch was written, because I generally fix branches right after writing
    2023-08-27
    as well as highlight branches which were added since your last visit
    2023-08-27
    not that either of these features are implemented as of writing this
    2023-08-27
    actually they’re implemented now so yeah
    2024-07-23
    they’re much more compact than uuids
    2023-08-27
    which use 32 hexadecimal digits separated unevenly by 4 dashes, giving you 36 characters.
    2023-08-27
    who even remembers how many digits there are between each dash? I know I don’t.
    2023-08-27
    ulids on the other hand are 26 digits encoded with Crockford’s base32
    2023-08-27
    which is cool because it’s much denser while avoiding ambiguous characters - 0, O, and o are all interpreted as 0 (zero).
    2023-08-27
- noticed how fast the treehouse restores your state? there’s basically no delay.
  2023-08-27
  - this is because it restores your state as it’s loading in, by using a MutationObserver.
    2023-08-27
    initially the treehouse used Web Components, but for Webkit compatibility reasons, I had to switch that out to a more bespoke solution.
    2024-06-13
    elements such as linked branches are implemented using spells, which are a custom framework for composing behaviors on top of existing elements.
    2024-06-13
  - in addition to that, many things on the treehouse are Web Components, which are another awesome API that lets you prepare the DOM as soon as everything is ready.
    2024-06-13
    despite many people calling that API extremely low-level, I beg to differ. it’s actually pretty easy and pleasant to use.
    2023-08-27
    most importantly it lets me enhance vanilla <li> elements with custom behavior executed on load, which I use to restore your reading progress as the page is loading in.
    2023-08-27
- while not strictly a technical topic, I’d like to shout out Recursive for being an awesome font
  2023-08-27
  - (not to be confused with Font Awesome, which I do not use here. icon designs are my own.)
    2023-08-27
  - being a variable font, I can tweak the text’s look and feel on many different axes.
    2023-08-27
    the one that I wanted to shout out in particular is CASL, which lets me make it look a lot more happy and playful.
    2023-08-27
    almost like Comic Sans, but without all the stigma.
    2023-08-27
    I actually considered using Comic Neue as the font on this website, but ultimately chose Recursive.
    2023-08-27
    Comic Neue and not the Real™ Comic Sans MS because it’s licensed under the SIL Open Font License, which means I could redistribute it on my website.
    2023-08-27
    not everyone runs Windows or macOS, so just assuming the reader has Comic Sans installed isn’t ideal.
    2023-08-27
    ~~in particular the variant on my website is 100% casual (CASL), and -2.0 slanted (slnt).~~
    2023-08-27
    that little bit of slant makes it look just a little more like handwriting.
    2023-08-27
    I actually thought of handwriting all the text in the treehouse, but ultimately thought it would be too much work. and a technical challenge too.
    2023-08-27
    how to make it scalable (as in, how to keep it smooth when you zoom in?)
    2023-08-27
    how to make it scalable (as in, my hand really fucking hurts from writing this much, and I really do not wanna go back to the times of writing school essays please?)
    2023-08-27
    how to make it scalable (as in, how to distribute this many images to the user without tanking their internet connection?)
    2023-08-27
    not to mention I’d have to handwrite a lot of text, and then either use OCR or type it all out again for accessibility. yeah, no thanks methinks.
    2023-08-27
    NOTE: not slanted anymore. slnt is 0.
    2024-03-07
NOTE: this page is quite old, so I moved it from the main page to the programming blog to reduce clutter. I deemed it wasn’t important enough to have it on display so profoundly.
2024-11-12