about the treehouse

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

© riki moe / リキ萌

    \    /
   | \__/ |
 \ /      \ /   ___
--|  _  _  |-- =_  \
 / `------` \    \  \
     |   \        |  |
     |    \      _/  |
    /      |    /  _/
   |        \  / _/
   |         |__/
   \-,,-,,--/