403 lines
19 KiB
Plaintext
403 lines
19 KiB
Plaintext
%% 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.
|