Hardscrabble 🍫

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

background

There’s a hubbub¹ 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!²

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>
</div>

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

.post
  .body
    width: 70%
    float: left
  .sidenotes
    width: 25%
    float: left
  .clearfix
    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 like³:

$ ->
  # 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
    $footnote.find(".reversefootnote").remove()

    # 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
      else
        top: aligned_top

gripes / todos

• looks bad on mobile, and when resizing the windows. Should have some responsiveness, possibly including that swiping thing @smarterbits imagined
• when you click a footnote link, nothing seems to happen. maybe the related sidenote should pulse briefly to attract the eye
• I don’t like how posts without sidenotes kind of look unbalanced now. This makes me want to have at least one footnote per post? Weird.
• vertical positions are screwed up when a post includes an embedded tweet, because the tweet’s height grows as Twitter’s JavaScript reformats the HTML from a vanilla blockquote to a whole thing, by which time my code has already set a height for all the sidenotes