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