treehouse/content/about-treehouse.tree

%% title = "about the treehouse"

% id = "01H89RFHCQCD3E1XS5XAPW86J5"
- liquidex's treehouse can be thought of as many things.

% id = "01H89RFHCQQMBNFETGPY4HHDT6"
+ ### the treehouse is a reflection of my own personality

    % id = "01H89RFHCQ4XHDXK0FH376SNZ8"
    - this is a literal braindump

    % id = "01H89RFHCQEQ2RAWRTRN6HZ8A3"
    - whatever's on my mind at the time that I wanna share with the world, I write down here

        % id = "01H8W7VEVGGS29756T8C466GRY"
        - doing my best to keep it approachable and readable by not just me, but _you_ too

    % id = "01H89RFHCQY5EE9Y46PHJT9DFR"
    - I built this treehouse because I love sharing cool stuff with people

        % id = "01H89RFHCQR0H2CRNA81XAGXWJ"
        - and also because I am obsessed with many things and I wanna share this obsession with the world

    % id = "01H89RFHCQDC73N0MD2ZF629MF"
    - wouldn't you make yourself at home?

    % id = "01H8VWEFHZA94G0DNPD79YV535"
    + …

        % content.link = "about-treehouse/emoji"
          id = "01H8VWEFHZ7Z71WJ347WFMC9YT"
        + by the way did you know this website has custom emojis? and quite a lot of them, too

% id = "01H89RFHCQKAPHSGCDN832QRMD"
+ ### the treehouse is a statement of artistic expression

    % id = "01H89RFHCQAD7WKW59CAFAX814"
    - the treehouse is not your typical blog

    % id = "01H89RFHCQKJPNXX7QKWM9X8GM"
    - as you can tell the structure is quite different

        % id = "01H89RFHCQJNJSTJCTXSDCVF6C"
        - instead of containing finished posts, it just sort of… is

        % id = "01H89RFHCQHWWE24N1NF1N2V85"
        + nesting indefinitely

            % id = "01H89RFHCQNX4PP80E49AWWQPM"
            + like really, where does it end?

                % id = "01H89RFHCQCCWWMZCXEXF704Q3"
                + _where?_

                    % id = "01H89RFHCQW4NN6PW6V6RFCVH3"
                      content.link = "about-treehouse/the-end-is-never"
                    + _*WHERE???*_

        % id = "01H89RFHCQPAMNSN81SRVH2TZ5"
        - always evolving and shaping and shifting

            % id = "01H89RFHCQEJZQFXKVVQ92816R"
            - so that I never need to _finish_ anything

            % id = "01H89RFHCQ3Q6W2Q0QKRHRVFVW"
            - I can just sit down, type something out

                % id = "01H89RFHCQCTZFY3RV0J5MPMW9"
                - then forget about it

                % id = "01H89RFHCQ3J04CRY0RAVN8YG5"
                - then come back again, type out something more

                % id = "01H89RFHCQYK8R7SG5SNH5JNC8"
                - isn't this just way more pleasant?

                % id = "01H89RFHCQ4F0AWTGVWVQXFFGK"
                - isn't that… in the spirit of [Agile](https://en.wikipedia.org/wiki/Agile_software_development)

                    % id = "01H89RFHCQHS0R71CP198SRX16"
                    - …of all things?

                    % id = "01H89RFHCQYH846FGW8Z8EFX2E"
                    - not that I designed around its ideas, but there's a semblance, isn't there?

    % id = "01H89RFHCQQK8Q1WHZK4ZK1EK1"
    + it is designed to be elegant and clutter-free

        % id = "01H89RFHCQ4N6GMFF0Q2N4PCM6"
        - the treehouse contains no ads to annoy you, no [sidebars][page:design/sidebars] to interrupt

        % id = "01H89RFHCQDMWX7WNSMBDWJC9G"
        - it doesn't even have a navigation bar, because it doesn't need one

        % id = "01H89RFHCQ9WEBCQMQH7PSQDFS"
        - it's built to focus on the substance

        % id = "01H89RFHCQ9PVANQV8YNKBY399"
        - it's built to let your imagination go free

        % id = "01H89RFHCQR2R4XX7CRX8HZRAF"
        - it's just a cool space to let go of your worries, and breathe

    % id = "01H89RFHCQ6WVDR3CWVY99F87M"
    + it is designed to be user-friendly

        % id = "01H89RFHCQBDVZX9Y7JTSGRV5G"
        - because there is too much software nowadays that does not care about _you_

        % id = "01H89RFHCQEFERYSZ77ZD2DS0M"
        - and that frustrates me, too

        % id = "01H89RFHCQ3EAP0F6PRSEK7S1T"
        - there are bits of JavaScript that power this site, to make it just that little bit more pleasant

            % id = "01H89RFHCQGF3R8FAP0QHYB6WM"
            - but without overwhelming your computer or bandwidth

            % id = "01H89RFHCQ1XA3BB3BTKXH36CX"
            - you can disable the JavaScript, and everything will mostly work

                % id = "01H89RFHCQS2WW7PBP1YV0BEJZ"
                - but you may not find the experience favorable

    % id = "01H89RFHCQ7HTZSP6P2RZR8JHE"
    + but most important of all, it is _weird_.

        % id = "01H89RFHCQTRVPZ0AJ0DGJHXKX"
        - weird as me

        % id = "01H89RFHCQ3D3Z82YGJRNV8ASR"
        - writing this "poem"

            % id = "01H89RFHCQXB6F45KN28P91YCK"
            + can you even call it that?

                % id = "01H89RFHCQ48R7BCZV8JWPVFCY"
                + have I invented something new here?

                    % id = "01H8VWEFJ1BGA21FBVHC4TFF3V"
                    - the "Choose Your Own Poem" lol

        % id = "01H8W7VEVHCAEM03Z75QYC36SG"
        - 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.

% id = "01H89RFHCQAXJ0ST31TP1A104V"
+ ### the treehouse is a mostly statically generated website

    % id = "01H89RFHCQ2GWJPTAKTRGS1QAC"
    + weird poems and philosophical talk are over, it's time to focus on the tech.

        % id = "01H8V55APDEF8WTQ3KFC7E9HWB"
        - call this an overview, Defense of Design, or what have you

    % id = "01H89RFHCQF4N9T05B9DVWX67K"
    - treehouse is built in the programming language that gives me the most pleasure coding.

        % id = "01H8V55APDXH5N1YC2WXDBCDN4"
        - no need for you to know more. :shhh:

        % id = "01H89RFHCQAQVXP6B2H0T8NNDS"
        - personally… the language you build a personal project with almost never matters. it's rather how you execute your ideas.

            % id = "01H8V55APDRZHHG69A6BWQM8YE"
            + therefore I find boasting that my project is powered by a `$LANGUAGE` or a `$FRAMEWORK` unnecessary.

                % id = "01H8V55APDNJ4W3MY1A204PHJ3"
                + but if you really care that much, it's built with Rust, plain HTML5, plain CSS, and
                [Vanilla JS](http://vanilla-js.com/).

                    % id = "01H8V55APDYHZG2QXQ78HZE97V"
                    - (yes, I know that website is super old, but I still find it incredibly funny :hueh:)

        % id = "01H89RFHCQRA4BBBWDC8K68BB0"
        - if you wanna browse the source code, feel free to [check it out here][def:treehouse/repo]

    % id = "01H89RFHCQFWC2FWBAE9PVNC08"
    - as I alluded to [here][branch:01H89RFHCQ3EAP0F6PRSEK7S1T], treehouse is built to decay gracefully
      as you take away the fancy parts.

        % id = "01H8V55APDMPF3WFTNTFSYBQRF"
        + you will be able to read it just fine without JavaScript, just that it'll be a little
          less pleasant.

            % id = "01H8V55APD1RSSRMDZ3CEE9S9C"
            - that's because the JS handles stuff like lazy loading of linked trees.

                % id = "01H8V55APDAPSR7R9M569GW4S7"
                - 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

                    % id = "01H8V55APDS9BNC2TQ5S5VYC0G"
                    - 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!

            % id = "01H8V55APD503DMXJD9JA2WJGS"
            - the JS also lets you select text in these `<details>` elements without them collapsing
              as you release the mouse button.

                % id = "01H8V55APD34KE6ED6MRTW34H6"
                - I have no clue why it is this way by default, but frankly it's like a 5 line
                  usability fix, so why not.

                    % id = "01H8V55APDR3VCEANQ6XVJP3X8"
                    - if you have accessibility concerns about this decision, please let me know.

            % id = "01H8V55APDFW5SPAKSQ04K5HRE"
            - it also saves your progress as you read. if you refresh the page, you'll notice you end up exactly where you left off!

            % id = "01H8V55APDNSXZMZJ2K1KW11KN"
            - 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.

                % id = "01H8V55APDBG6AH2W3RNMX724X"
                - 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:

                % id = "01H8V55APDE0KSKKAS8RBRPYRM"
                - therefore there's a bit of JS to make that work, _and_ to tie that together with lazy loading.

        % id = "01H8V55APDTZSSYTY17SYZ6DGQ"
        - treehouse will not work *as* fine without CSS though - the `<details>` will look extremely
          janky, but the content should still be fully readable.

    % id = "01H8V55APDWN8TV31K4SXBTTWB"
    + myself, I'm writing this content in a bespoke format called `.tree`.

        % id = "01H8V55APDGX4EYV8W7ECXZ6FP"
        - the structure of `.tree` files is extremely minimal. there are only a few syntactic features to speak of.

        % id = "01H8V55APDR95HSV0TX7TK63AF"
        - here's a taste of `.tree`:

            % id = "01H8V55APD5686J8GTXP118V8E"
            - ```treehouse
            % 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
            ```

        % id = "01H8V55APDB49SPHPPMV2BCMW3"
        - the `.tree` format is line-based. that means the `%`, `-`, and `+` tokens are only
          interpreted when at the beginning of a line.

        % id = "01H8V55APD67W8FHEZK6E2A21K"
        - the basic unit of `.tree` is a branch. branches…

            % id = "01H8V55APDQ1KS7S313GK590GM"
            - …are located at a specific _indent level_

            % id = "01H8V55APDHNRFCGH9STD46J0F"
            - …may or may not have _attributes_ - that's what the percentage sign `%` begins

            % id = "01H8V55APDF9C7Y0QDYF3EBMMS"
            - …may or may not be expanded by default (this is the branch's _kind_) - that's what the minus `-` and plus `+` tokens do

        % id = "01H8V55APDJ6EYE4PR370JAT4W"
        - each branch is constructed in this order: optional attributes, kind, content

        % id = "01H8V55APDGT47G5DKZKTQ1S80"
        - and ends when another line beginning with `%`, `-`, or `+` is found.

        % id = "01H8V55APDQ3VYBBTTMNFTVNV4"
        - other than that, `.tree` assumes nothing about what format the branch attributes or content are encoded in.

            % id = "01H8V55APDCXPW8JPRYZHY9NXV"
            - I chose TOML and [Djot](https://djot.net) for their ease of use and flexibility, but the parser couldn't care less.

                % id = "01H8V55APDWDPSHNZX6QJFM8ZA"
                - …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.

                % id = "01J3GNWRFBPK8VSRV1J61Q2V8F"
                - 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."

    % id = "01H8V55APDVQB6AD23Y6PZPPB8"
    - every branch in the treehouse has a globally unique ID.

        % id = "01H8V55APD4H5JT8NTYCCTN77G"
        + this is because I want every branch to be individually linkable and quotable.

            % id = "01H8V55APDPSZNP9AK7QRK62BG"
            - 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_.

        % id = "01H8V55APDCZ0HY20GGXYE8D1G"
        - but manually coming up with ids for branches would be quite the nuisance.

            % id = "01H8V55APDXV0KRVEF9PTA72J7"
            + that's why with the power of Tools Programming™, I built a tool that fills out all the ids for me.

                % id = "01H8V55APD8VG7WE6JX5JBDJEC"
                - I chose [ulids](https://github.com/ulid/spec) for generated ids, for a few reasons:

                    % id = "01H8V55APD2J58ENT1T0JRJ7H6"
                    - they're guaranteed to be unique, so I can be sure no two branches end up having the same id

                        % id = "01H8V55APDGV6PKJKZ16CJ1YXY"
                        - which is precisely what lets me pull the trick where I embed one tree within another, and you just dig into `index.html`.

                    % id = "01H8V55APD1CYZD8GE3AK87QK2"
                    - 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

                        % id = "01H8V55APDFXW5A5J85HJQP17C"
                        - as well as highlight branches which were added since your last visit

                        % id = "01H8V55APDPZK4C8H5TTHTHH7J"
                        - not that either of these features are implemented as of writing this

                            % id = "01J3GNWRFBK2W3X8BZHD2AXQXZ"
                            - actually they're implemented now so yeah

                    % id = "01H8V55APDXB9AXTAGAE9TNQRB"
                    - they're much more compact than [uuids](https://en.wikipedia.org/wiki/Uuid)

                        % id = "01H8V55APDZE5AE92GDM2TH2EF"
                        - which use 32 hexadecimal digits separated unevenly by 4 dashes, giving you 36 characters.

                            % id = "01H8V55APDS478E3ED5CRVT6RE"
                            - who even remembers how many digits there are between each dash? I know I don't.

                        % id = "01H8V55APDXP1D0MHGN2DXBT16"
                        - ulids on the other hand are 26 digits encoded with [Crockford's base32](https://www.crockford.com/base32.html)

                            % id = "01H8V55APD79QTC2NFC6X7S3W4"
                            - which is cool because it's much denser while avoiding ambiguous characters - `0`, `O`, and `o` are all interpreted as `0` (zero).

    % id = "01H8V55APDXT064G9PA78JW0CM"
    + noticed how fast the treehouse restores your state? there's basically no delay.

        % id = "01H8V55APDGS626M5Y6DDAS9ZE"
        + this is because it restores your state _as it's loading in_, by using a [`MutationObserver`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).

            % id = "01J09E55GTGHTGJP3JQN1SY4BM"
            - initially the treehouse used Web Components, but for Webkit compatibility reasons, I had to switch that out to a more bespoke solution.

            % redirect_here = ["01H8V55APD4V54M2EKQKQ4GNP8"]
              id = "01J09E55GTFSQW46JSG3T3SSMQ"
            - elements such as linked branches are implemented using _spells_, which are a custom framework for composing behaviors on top of existing elements.

        % id = "01J09E55GTHJXWRG0P9MADASRQ"
        + 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.

            % id = "01H8V55APD73AG65NP2VGX6169"
            - despite many people calling that API extremely low-level, I beg to differ. it's actually pretty easy and pleasant to use.

            % id = "01H8V55APDDHYNRZXQDEG0A242"
            - 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.

    % id = "01H8V55APDKY0HYEJM2C1CJHEG"
    + while not strictly a technical topic, I'd like to shout out [Recursive](https://recursive.design) for being an awesome font :ralsei_love:

        % id = "01H8V55APD88JCQBQ4SHVCYR97"
        - (not to be confused with [Font Awesome](https://fontawesome.com/), which I do not use here. icon designs are my own.)

        % id = "01H8V55APD0S00ACN0YY7Y9MSW"
        + being a variable font, I can tweak the text's look and feel on many different axes.

            % id = "01H8V55APDRG88JRV74MMDTV4J"
            + the one that I wanted to shout out in particular is `CASL`, which lets me make it look a lot more happy and playful.

                % id = "01H8V55APDMP5FE9ZCMRACH18W"
                + almost like Comic Sans, but without all the stigma.

                    % id = "01H8V55APDPGMD33J4M3SJ2QKP"
                    - I actually considered using [Comic Neue](https://comicneue.com/) as the font on this website, but ultimately chose Recursive.

                        % id = "01H8V55APDXBS7HMDSCEJ1JDPY"
                        - 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.

                            % id = "01H8V55APDFT0Y4ECEM92XFTTR"
                            - not everyone runs Windows or macOS, so just assuming the reader has Comic Sans installed isn't ideal.

            % id = "01H8V55APD2BPGQXEK7JARYJ9H"
            + {-in particular the variant on my website is 100% casual (`CASL`), and -2.0 slanted (`slnt`).-}

                % id = "01H8V55APDXZJE3HHH5AQ8ZQHF"
                + that little bit of slant makes it look just a little more like handwriting.

                    % id = "01H8V55APDGSB2Y742S07DHTAZ"
                    - 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.

                        % id = "01H8V55APDDXH02F91RM19RDHX"
                        - how to make it scalable (as in, how to keep it smooth when you zoom in?)

                        % id = "01H8V55APDQ1N44QASCHVDB4D5"
                        - 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?)

                        % id = "01H8V55APDP5T3EYPVMVN9QVK7"
                        - how to make it scalable (as in, how to distribute this many images to the user without tanking their internet connection?)

                        % id = "01H8V55APDB8PC2BF5P9TVYJ35"
                        - 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.

                % id = "01HRD97CSJSQN78SGM691B6PNQ"
                - NOTE: not slanted anymore. `slnt` is 0.