Follow Join

PGannotations.js 4 years ago


  1. Copy and paste this code

  2. Pick your favorite PG blog that has linked annotations (go back as far as 2007 or 2008 I think) such as this one

  3. Paste the script into the console and press enter (for the uninitiated - you can just right or control click the page, hit "inspect element", and then click the console button, paste + enter)

  4. Click the number next to any of the footnotes. It will take you back to the passage from which it was referenced. YAY!

4a. If you're actually Paul Graham, just copy and paste this right after the body of your document

My two favorite writers who publish primarily on the Internet are Paul Graham and Bill Simmons. While they share share very little in terms of content topics, they do share one obvious common stylistic choice: the use of linked footnotes. I love footnotes - they're so much better for adding a second voice than parenthesis (see how annoying this is) and HTML adds the perfect system for footnotes - anchor tags. Just link the annotation to the footnote and the user is taken right where they need to go.

However, it has always annoyed me on PG's essays that his footnotes are at the bottom of the page, but the note itself has no link back to the passage from which it was cited. So I made myself a little script to fix it. It's pure JS, and just does some very basic DOM manipulation. It works all the way back to where he started adding anchor tags to his pieces. No more control+f'ing or scrolling back to find the right passage!

Just load it in to the console, click a footnote, then click the number next to the note and they'll flip you back and forth to the proper place. Click any footnote at any time and see the relevant passage it references. Seriously, it'd be cool if PG just threw anchor links in his footnotes, but for now this will do. I actually use this every time I read a PG blog, it makes a difference.

Let me know what you think! On the Hacker News thread On Twitter