27 Dec 2013

EDIT April 2015: I took it off the site because it was kind of bad :smile:


There’s a hubbub1 going around about a fun plugin for popover footnotes called Bigfoot.

I think it’s cool. I definitely prefer that reading experience.

this new thing

Some people on Twitter said they prefer Grantland’s sidenotes, except for their behavior on mobile, where they basically don’t work. They imagined a solution that involves swiping/dragging, and enlisted me to work on it.

I’m not sure how to capture that kind of touch event and I’m curious to find out I guess.

I’m starting by recreating Grantland’s sidenotes, and then I’m going to go watch The Hobbit with my dad.

One thing that’s cool about the popular plugin is that it’s easy to drop in and use. What I’ve added to my site isn’t, because it makes assumptions about the structure of your HTML layout. I bet it could be abstracted in a way that’s broadly usable but I’m not sure how. Happy to take input on that!2

assumptions it makes

Here are the assumptions I’m currently making:

That your HTML layout looks something like this:

<div class="post">
  <div class="body">...</div>
  <div class="sidenotes"><ol></ol></div>
  <div class="clearfix"></div>

And your CSS (Sass here) looks something like this:

    width: 70%
    float: left
    width: 25%
    float: left
    clear: both

I’m also assuming that your footnotes look a lot like the ones generated by my favored markdown-to-html processor, kramdown, which … I have no idea if that’ll be a dealbreaker for interoperablity.

Here’s what the code looks like3:

$ ->
  # grab the sidenotes divs
  $sidenotes_container = $(".sidenotes")

  # grab the sidenotes list
  $sidenotes = $sidenotes_container.find "ol"

  # iterate over the footnotes at the bottom of the post
  # and work some magic on them
  $(".footnotes li").each (index, item) ->
    # wrap the footnote in a jQuery object
    $footnote = $(item)

    # move the footnote from the bottom to the right
    $footnote.remove().appendTo $sidenotes

    # remove the little arrow that links back to the source

    # find the source link from within the body of the post
    $source = $(".footnote").eq(index)

    # grab the previous sidenote, if there is one
    $previous_sidenote = $footnote.prev()
    $previous_sidenote = if $previous_sidenote.length then $previous_sidenote else undefined

    # let's set the vertical position of the current sidenote
    # if the previous one is kind of long, we need to push this one down
    # if not, it should be aligned with the source link
    $footnote.offset ->
      aligned_top = $source.offset().top
      if $previous_sidenote? and $previous_sidenote.offset().top + $previous_sidenote.height() >= aligned_top
        top: $previous_sidenote.offset().top + $previous_sidenote.height() + 5
        top: aligned_top

gripes / todos

  1. I noticed it linked by Dr. Drang, who praised it for being “webby”, and Marco Arment who praised it for being like Instapaper. 

  2. truthfully I’m eager to make some kind of open source thing that people use and collaboratively improve. 

  3. I’m archiving it and not linking to the source either here or on GitHub because it’s very liable to change and I want to archive its current state for reference or more likely nostalgia. Actually, I could link to the sidenotes.coffee file as it was at this specific commit, but I haven’t pushed it yet. I was planning to push the footnotes changes and this post, together, but now I want to push the changes first. OK I did. If you prefer GitHub’s syntax highlighting, the file is here. If you prefer the compiled JavaScript, it’s here. OK, now I can safely remove this sidenotes nonsense later on when I grow tired of it.