- 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. :ralsei_dead:
- therefore there's a bit of JS to make that work, _and_ to tie that together with lazy loading.
- …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](https://github.com/ulid/spec) 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](https://en.wikipedia.org/wiki/Uuid)
- 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](https://www.crockford.com/base32.html)
- 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](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements).
- 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](https://recursive.design) for being an awesome font :ralsei_love:
- (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](https://comicneue.com/) 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.
