Wow! Very pleasantly surprised to see how popular this got! A few short disclaimers and the like answering general comments:
1: The article is a draft but a mostly complete one - I wrote it in two sittings mostly linearly after doing a bunch of research. I intend to revise it to meet my personal standards sometime soon ish
2: About half of the point of this article for me was to present an article in as pleasing, interesting, and useful way as possible, here are the major features of the site to play around with:
- Hover over the title
- Table of contents is animated, thanks to https://kld.dev/toc-animation/ for the tutorial for thsi
- Squiggle line tooltips: inspired from Codrops but then I procedurally generate the squiggles per line and draw them - I see tooltips as a way to answer questions, and the hovercards as a way to inspire curiousity
- Hovercards on the side of the article: Meant to encourage people to enjoy what they're reading - Skim! Pause! Skip! I don't care - reading things like this should be fun and I wanted to encapsulate that, the hover cards are very pleasing in that sense to me
- Background images on hover: There are many times I wanted to include visual aids but said visual aids weren't quite important enough to break the reading flow, that's what those are for! This effect I had created several years ago for my portfolio: ( https://explosion-scratch.github.io/portfolio ) and got to reuse it here
- Money conversions: A fun component idea that I had, converting old monetary values to present ones accounting for inflation (and back again), turned out nicely I think
- Side timelines: I really wish I had these when I would read articles, it helps me skim and brings clarity to what's going on. I put a lot of work into making these work bidirectionally
- The spanner (grasshopper banner across the page): I really like having this banner and can repurpose it with any other images later =) - Try clicking them
- The jumping locusts: This was the most fun part of the site but it seems people either very much like it or very much don't! I intend to make it more subtle in the future, but double clicking spawns a locust, on which you can click to make it jump lol
- All the jokes and cheesy bits of the article: I am not writing a textbook, I'm writing something I personally would want to read
Also some people commenting about AI usage: I didn't use AI for any of the article content itself (the article was entirely written by me, after tons of research, outlining, etc). The article was essentially written linearly after I made a detailed enough outline to go from there. Someone said that the article was created with AI based on the human outline, this is tickling but no– humans write based on prior outlines too! I'm sure the process is different for everyone! The code _was_ aided by AI though I had a very very heavy hand over it and wrote / repurposed (my own work) much code personally. The site itself represents a UI I personally am very proud of, put countless hours of work into, and take responsibility for! This was a case study for me personally to find a productive usage of AI - not for the content of the article, nor the ideas, nor the creativity, but simply as a tool to guide me towards that.
Thanks for reading everyone, and star on GitHub if you get the chance =)
https://github.com/Explosion-Scratch/locusts