Footnotes - iameven.com

I added some support to use markdown footnotes properly.

I've mainly been adding additional info in parenthesis directly in the text, but I think footnotes might be a cleaner way in some cases. I've been using an asterisk[1] with a <sup>[2] element below the paragraph as a hacky footnote system in some of my recent posts. Of course, there is a better way, the footnotes extension for markdown. That lets me insert a [^unique-id] anywhere in the text. I can then reference that tag in the bottom[3] of the document to add additional information. With the inline_notes extension I can even insert a footnote right in the text if I want to. It looks something like this: 

…just as I defenestrated^[defenestrate means throwing someone out the window] the guy.

And it'll render like this: …just as I defenestrated[4] the guy. Remarkable, which I use to parse markdown and render the HTML, will keep track and add numbered links to the footnotes, with links back to the footnote reference in the text. I find that to be quite neat.

I'm also quite fond of footnote previews I've seen on various sites. Browsing with a computer it is nice to just hover the footnote reference with the mouse and see it immediately. So I added some javascript to do just that. It'll clone the footnote and insert it next to the reference tag and add event listeners for mouse events to show and hide the footnote on hover. I found some code on stackoverflow to calculate text width. That way I can size the box of the footnote previews to be no bigger than needed on small footnotes with a max width for longer notes. I think it looks nice.

While I was there I decided to modernize my scripts a bit:

I think all of these features have been supported for several years in all the relevant browsers now. The scripts are just nice to have, and won't break the site if they don't work for whatever reason, so I'm not too worried[7].

  1. asterisk symbol: * ↩

  2. <sup> will make the text smaller and push it up a bit with default styling ↩

  3. or anywhere really ↩

  4. defenestrate means throwing someone out the window ↩

  5. const and let are properly scoped and makes it clear if the value is mutable. In javascript that is a bit weird because you can declare an array or an object as const and still mutate the properties within it. The primitives or reference to an object can't be changed so I still think it is worth it to make the intent of the code clearer. And I've conditioned myself to consider var old code and a code smell. ↩

  6. I used setTimeout before, which is really hacky. ↩

  7. Also, my reader numbers are probably fairly low, and I, as the most frequent reader, am using a modern browser ↩

← Mats Toothache →