Footnotes

June 26th, 2025

Hello, I added footnotes1 to this website.

My webdev experience dating back from 2019 started with React,2 so I never took the time to learn bare bones Javscript that’s available to the web. This was a good experience to fill in that knowledge gap.

Here are some of my notes on how I made this happen:

  • The footnotes appear on the right hand side of a post next to the footnote it’s associated with.
  • When the viewport changes size, the footnote moves adjusts its position accordingly.
  • When the viewport gets too small, the entire RHS of the website disappears. In the future, I’ll either make the footnotes pop up upon clicking or just remain at the bottom of the site.
  • Relevant JS functions:
    • document.querySelector
    • htmlElement.getBoundingClientRect
    • document.createElement

Oh yeah, and as a challenge/experiment for myself, I did not use ChatGPT to troubleshoot the coding. Just bare-bones “Googling” and using the Mozilla Developer documentation.3 I read this article recently about certain cognitive dangers of being over-reliant on AI, and it spurred me to try doing things the “old fashioned” way. But I guess the same thing could be said about any tools we become over-reliant on. When should we delegate understanding?

  1. Footnotes like this. 

  2. I have since moved to Jekyll, because it’s streamlined for blog-like posts while still giving me control over the actual underlying code. 

  3. Docs. Oops, it looks like hyperlinks don’t work in the footnotes. I will need to fix that at a future time.