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. shhh

            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 hueh)

                  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. ralsei_dead

                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 ralsei_love

          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