hardscrabble 🍫

By Max Jacobson

Psst. Check out my RubyConf 2017 talk, There are no rules in Ruby.

blog posts

sidenotes

27 Dec 2013

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

background

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>
</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 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
    $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
  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. 

iBooks for Mavericks

09 Dec 2013

OS X 10.9 Mavericks brought us an awesome eBook reader for the desktop in iBooks. Since updating, I’ve gotten into the idea of keeping and managing a library of digital books on my computer, mostly in the open ePub format. I get these books from the excellent Project Gutenberg and publishers like Manning Publications (which has taken a bunch of my money recently due to its generous holiday sales).

I really love being able to keep and read books on my desktop. And it’s cool that they sync to iOS devices, pretty similarly to how iTunes syncs your music. This was possible before Mavericks, but it was all baked into iTunes, and it’s much better as a standalone app. I’d like to see Apple move further in this direction of breaking iTunes down into modules, maybe even introducing some kind of standalone syncing app so iTunes can really just be for managing and playing music, as it semantically desires to be.

Though it introduces the major, terrific feature of ePub rendering, iBooks unfortunately removed several features that its iTunes-embedded predecessor had, such as the ability to edit metadata and also, peevishly, the ability to right click and reveal the files on disk.

Another unfortunate negative to the app is it’s kind of terrible at organizing your books in any way except one flat list, sorted by most-recently-read or title. It offers these categories by default “Purchased”, which refers only to books purchased through Apple’s iBooks store and not the several books I purchased from other sellers, “Books” which refers to files in the ePub format exclusively with no regard to whether they even are books, and “PDFs” which refers to files in the PDF format even if they’re books.

There is some preliminary support for categorization in the ability to add files to “collections”, which removes them from their default category of “Books” or “PDFs”, as though they stop being those things.

A file can only be in one collection.

I think it’s impossible to delete collections, which is kind of too bad because I just clicked the lower-left “+” button 10 times.

My many iBooks collections

Once a book is in a collection, right clicking it gives you the option to “Delete” it, which actually doesn’t delete it, it returns it from the collection into either “Books” or “PDFs” (from where they can be removed from the app entirely). Books which you’ve purchased from the iBooks Store but haven’t downloaded don’t have the “Delete” option, but they do have the “Add to Collection” option, so I don’t think I can move this back out of my collections:

This books is forevermore collected

Actually it’s only true that you can (easily) remove books from “Books” and “PDFs” if they weren’t purchased from the iBooks store. Good luck deleting a book you bought from the iBooks store. It’s kind of possible but not really.

Moving a PDF and an ePub into the same collection seems to be the only way to get them to mix, which is the only reason I can think of to use collections. Unfortunately PDFs are second-class citizens because reading them kicks you over to Preview, which means you have to wait for Preview to open.

Right clicking a book also offers “Share”, an empty dropright menu.

Those filtering buttons along the top are permanently grey and unclickable for me?

Anyway I really like iBooks because I’m excited about reading ePubs on my Mac.