about-treehouse

liquidex’s treehouse can be thought of as many things.
the treehouse is a reflection of my own personality
- this is a literal braindump
- whatever’s on my mind at the time that I wanna share with the world, I write down here
  - doing my best to keep it approachable and readable by not just me, but you too
- I built this treehouse because I love sharing cool stuff with people
  - and also because I am obsessed with many things and I wanna share this obsession with the world
- wouldn’t you make yourself at home?
- …
  - by the way did you know this website has custom emojis? and quite a lot of them, too
the treehouse is a statement of artistic expression
- the treehouse is not your typical blog
- as you can tell the structure is quite different
  - instead of containing finished posts, it just sort of… is
  - nesting indefinitely
    like really, where does it end?
    where?
    WHERE???
  - always evolving and shaping and shifting
    so that I never need to finish anything
    I can just sit down, type something out
    then forget about it
    then come back again, type out something more
    isn’t this just way more pleasant?
    isn’t that… in the spirit of Agile
    …of all things?
    not that I designed around its ideas, but there’s a semblance, isn’t there?
- it is designed to be elegant and clutter-free
  - the treehouse contains no ads to annoy you, no sidebars to interrupt
  - it doesn’t even have a navigation bar, because it doesn’t need one
  - it’s built to focus on the substance
  - it’s built to let your imagination go free
  - it’s just a cool space to let go of your worries, and breathe
- it is designed to be user-friendly
  - because there is too much software nowadays that does not care about you
  - and that frustrates me, too
  - there are bits of JavaScript that power this site, to make it just that little bit more pleasant
    but without overwhelming your computer or bandwidth
    you can disable the JavaScript, and everything will mostly work
    but you may not find the experience favorable
- but most important of all, it is weird.
  - weird as me
  - writing this “poem”
    can you even call it that?
    have I invented something new here?
    the “Choose Your Own Poem” lol
  - 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.
the treehouse is a mostly statically generated website
- weird poems and philosophical talk are over, it’s time to focus on the tech.
  - call this an overview, Defense of Design, or what have you
- treehouse is built in the programming language that gives me the most pleasure coding.
  - no need for you to know more.
  - personally… the language you build a personal project with almost never matters. it’s rather how you execute your ideas.
    therefore I find boasting that my project is powered by a $LANGUAGE or a $FRAMEWORK unnecessary.
    but if you really care that much, it’s built with Rust, plain HTML5, plain CSS, and Vanilla JS.
    (yes, I know that website is super old, but I still find it incredibly funny )
  - if you wanna browse the source code, feel free to check it out on GitHub
- as I alluded to here, treehouse is built to decay gracefully as you take away the fancy parts.
  - you will be able to read it just fine without JavaScript, just that it’ll be a little less pleasant.
    that’s because the JS handles stuff like lazy loading of linked trees.
    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
    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!
    the JS also lets you select text in these <details> elements without them collapsing as you release the mouse button.
    I have no clue why it is this way by default, but frankly it’s like a 5 line usability fix, so why not.
    if you have accessibility concerns about this decision, please let me know.
    it also saves your progress as you read. if you refresh the page, you’ll notice you end up exactly where you left off!
    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.
    by default, if you link to an element by its id and it’s contained within a <details>, the <details> will not expand.
    therefore there’s a bit of JS to make that work, and to tie that together with lazy loading.
  - treehouse will not work as fine without CSS though - the <details> will look extremely janky, but the content should still be fully readable.
- myself, I’m writing this content in a bespoke format called .tree.
  - the structure of .tree files is extremely minimal. there are only a few syntactic features to speak of.
  - here’s a taste of .tree:
    % 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
  - the .tree format is line-based. that means the %, -, and + tokens are only interpreted when at the beginning of a line.
  - the basic unit of .tree is a branch. branches…
    …are located at a specific indent level
    …may or may not have attributes - that’s what the percentage sign % begins
    …may or may not be expanded by default (this is the branch’s kind) - that’s what the minus - and plus + tokens do
  - each branch is constructed in this order: optional attributes, kind, content
  - and ends when another line beginning with %, -, or + is found.
  - other than that, .tree assumes nothing about what format the branch attributes or content are encoded in.
    I chose TOML and Markdown for their ease of use and flexibility, but the parser couldn’t care less.
    …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.
- you may have noticed in that code example above that almost every branch has an id attribute.
  - this is because I want every branch to be individually linkable and quotable.
    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.
  - but manually coming up with ids for branches would be quite the nuisance.
  - that’s why with the power of Tools Programming™, I built a tool that fills out all the ids for me.
    I chose ulids for generated ids, for a few reasons:
    they’re guaranteed to be unique, so I can be sure no two branches end up having the same id
    which is precisely what lets me pull the trick where I embed one tree within another, and you just dig into index.html.
    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
    as well as highlight branches which were added since your last visit
    not that either of these features are implemented as of writing this (2023-08-20)
    they’re much more compact than uuids
    which use 32 hexadecimal digits separated unevenly by 4 dashes, giving you 36 characters.
    who even remembers how many digits there are between each dash? I know I don’t.
    ulids on the other hand are 26 digits encoded with Crockford’s base32
    which is cool because it’s much denser while avoiding ambiguous characters - 0, O, and o are all interpreted as 0 (zero).
- noticed how fast the treehouse restores your state? there’s basically no delay.
  - this is because it restores your state as it’s loading in, by using Web Components.
    despite many people calling that API extremely low-level, I beg to differ. it’s actually pretty easy and pleasant to use.
    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.
  - linked branches also use Web Components by the way.
- while not strictly a technical topic, I’d like to shout out Recursive for being an awesome font
  - (not to be confused with Font Awesome, which I do not use here. icon designs are my own.)
  - being a variable font, I can tweak the text’s look and feel on many different axes.
  - the one that I wanted to shout out in particular is CASL, which lets me make it look a lot more happy and playful.
    almost like Comic Sans, but without all the stigma.
    I actually considered using Comic Neue as the font on this website, but ultimately chose Recursive.
    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.
    not everyone runs Windows or macOS, so just assuming the reader has Comic Sans installed isn’t ideal.
    in particular the variant on my website is 100% casual (CASL), and -2.0 slanted (slnt).
    that little bit of slant makes it look just a little more like handwriting.
    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.
    how to make it scalable (as in, how to keep it smooth when you zoom in?)
    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?)
    how to make it scalable (as in, how to distribute this many images to the user without tanking their internet connection?)
    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.

the treehouse is a reflection of my own personality

the treehouse is a statement of artistic expression

the treehouse is a mostly statically generated website