Simon Willison’s Weblog

Footnotes that work in RSS readers. Chris Coyier explained the mechanism used by Feedbin to render custom footnotes back in 2019.

I stumbled upon this after I spotted an inline footnote rendered in NetNewsWire the other day (from this post by Drew Breunig):

Since feed readers generally strip JavaScript and CSS and only allow a subset of HTML tags I was intrigued to figure out how that worked.

I found this code in the NetNewsWire source (it's MIT licensed) which runs against elements matching this CSS selector:

sup > a[href*='#fn'], sup > div > a[href*='#fn']

So any link with an href attribute containing #fn that is a child of a <sup> (superscript) element.

In Drew's post the HTML looks like this:

<!-- Footnote link: -->
<sup id="fnref:precision" role="doc-noteref">
  <a href="#fn:precision" class="footnote" rel="footnote">1</a>
</sup>
<!-- Then at the bottom: -->
<div class="footnotes" role="doc-endnotes">
  <ol>
    <li id="fn:precision" role="doc-endnote">
      <p>This is the footnote.
        <a href="#fnref:precision" class="reversefootnote" role="doc-backlink">&#8617;</a>
      </p>
    </li>
  </ol>
</div>

Where did this convention come from? It doesn't seem to be part of any specific standard. Chris linked to www.bigfootjs.com (no longer resolving) which was the site for the bigfoot.js jQuery plugin, so my best guess is the convention came from that.

# 1st August 2024, 9:57 pm / atom, jquery, rss, netnewswire

When a rewrite isn’t: rebuilding Slack on the desktop. Slack appear to have pulled off the almost impossible: finishing a complete, incremental rewrite of their core product. They moved from jQuery to React over the course of two years, constantly shipping new features as they went along. The biggest gain was in rewriting their code to support multiple workspaces, which means desktop client users no longer have to run a separate copy of Electron for every workspace they are signed into.

# 22nd July 2019, 6:30 pm / rewrites, slack, jquery, react, electron

React is the new Dojo. In which Mikeal Rogers provides his perspective on the history of Dojo, the earliest break-out JavaScript framework, how jQuery eclipsed it and contemplates the same thing eventually happening to React.

# 20th October 2017, 12:22 am / dojo, jquery, react

jQuery 1.4.3 Released. Once again, the thing that impresses me most about this jQuery release is how stable the core API is. Hardly any new methods added, but the existing methods are made faster, more flexible and more predictable. The same as been true for the past several releases as well. It just keeps getting more and more polished.

# 17th October 2010, 12:15 am / api-design, javascript, jquery, recovered

Backbone.js. As should be expected for a DocumentCloud project, Backbone is a concise, elegant and educational take on the JavaScript MVC pattern. Depends on Underscore.js and plays well with jQuery.

# 13th October 2010, 5:23 pm / backbone, documentcloud, javascript, jquery, mvc, underscore, recovered

jQuery.queueFn. “Execute any jQuery method or arbitrary function in the animation queue”. I’m surprised this isn’t baked in to jQuery itself—the plugin is only a few lines of code.

# 30th June 2010, 12:59 pm / ben-alman, javascript, jquery, recovered

Pure CSS3 Spiderman Cartoon w/ jQuery and HTML5. Great demo, though calling -webkit-animation HTML5 (or even CSS3) is a bit of a stretch...

# 4th May 2010, 7:27 pm / animation, css, css3, html5, javascript, jquery, webkitanimation, recovered

Lazy Load Plugin for jQuery. I’m using this jQuery plugin to save some bandwidth when people first view my Redis tutorial slides. It unobtrusively replaces images on a page with a placeholder graphic, then sets them to load automatically as the user scrolls down the page.

# 26th April 2010, 12:02 am / lazyload, jquery, javascript, performance, plugins

jQuery special events. Ben Alman’s comprehensive guide to jQuery’s special events API, which allows you to register new kinds of events that can then be attached and detached using jQuery’s bind and unbind methods. Ben’s clickoutside event is a particularly useful example.

# 17th April 2010, 9:08 pm / jquery, events, ben-alman, javascript

jQuery UI: Trying to manipulate the position of a draggable mid-drag doesn’t seem to work. This has bitten me on two separate projects now—it’s the only problem I’ve had with jQuery UI’s draggables, which have otherwise been fantastic.

# 11th April 2010, 9:59 pm / jqueryui, jquery, draggables, dragndrop, javascript

jQuery source viewer. A neat way of browsing the source code of jQuery itself, complete with hyperlinks to other jQuery methods. Kind of a single-purpose IDE. I can see myself using this a lot.

# 1st February 2010, 10:01 am / james-padolsey, jquery, javascript

HTML 5 audio player demo. Scott Andrew’s experiments with the HTML5 audio element (and jQuery)—straight forward and works a treat in Safari, but Firefox doesn’t support MP3. Presumably it’s not too hard to set up a fallback for Ogg.

# 1st February 2010, 9:58 am / mp3, ogg, firefox, safari, html5, audio, scott-andrew, javascript, jquery

Dojo 1.4.1 vs jQuery 1.4.2pre on Taskspeed. John Resig’s reponse. When JavaScript libraries compete on performance, everybody wins.

# 29th January 2010, 2:19 pm / john-resig, javascript, jquery, dojo, performance, benchmarks

Dojo: Still Twice As Fast When It Matters Most. Alex Russell shows how Dojo out-performs jQuery on the TaskSpeed benchmark, which attempts to represent common tasks in real-world applications and has had code that have been optimised by the development teams behind each of the libraries.

# 28th January 2010, 10:40 pm / taskspeed, benchmarking, performance, alex-russell, dojo, jquery, javascript

jQuery 1.4 Released. With comprehensive release notes. Huge performance improvements and a ton of very sensible enhancements to the API—far too many to summarise.

# 14th January 2010, 10:37 pm / jquery, javascript, releasenotes

qTip. Advanced tooltip plugin for jQuery, including borders and pointers created using CSS. Very flexible (we used this for the latest MP expenses application) but a little on the heavy side, weighing in at 38KB when minified.

# 30th December 2009, 6:23 pm / jquery, tooltips, plugins, javascript

tipsy. Simple Facebook-style tooltip plugin for jQuery.

# 30th December 2009, 6:21 pm / jquery, tooltips, plugins, facebook, javascript

jQuery.require() implementation. John Resig has added a new jQuery.require() function to a jQuery development branch, for release as part of jQuery 1.4. The commit on GitHub has an extensive discussion attached to it (scroll to the bottom).

# 17th December 2009, 11:24 am / github, jquery, john-resig, javascript

jQuery 1.4 Alpha 1 Released. Impressively the new version contains no new features at all (correct me if I’m wrong), instead focusing on significant performance improvements to the existing API.

# 5th December 2009, 5:31 pm / performance, jquery, javascript

jQSlickWrap. Clever jQuery plugin which allows text to wrap around irregularly shaped images, by processing the image with canvas and rewriting it as a sequence of floated horizontal bars of different widths. It’s a a modern variant of the the ragged float trick first introduced by Eric Meyer.

# 23rd November 2009, 7:44 am / float, css, jquery, canvas, eric-meyer

Underscore.js. A new library of functional programming primitives for JavaScript—each, map, all, any, inject, detect etc. Unlike some similar libraries this one doesn’t extend the built-in objects, instead opting to bind the new functions to the underscore symbol. A jQuery-style noConflict() option is available if even that is too much namespace pollution for you.

# 28th October 2009, 5:08 pm / underscore, javascript, documentcloud, functional, jquery, noconflict

BBC: Glow (via) The BBC have released Glow, their jQuery-like JavaScript library developed in house over the past few years. It’s open source under the Apache license.

# 8th July 2009, 3:25 pm / jquery, glow, javascript, bbc, open-source

SWFUpload jQuery Plugin. Nice looking plugin around an invisible Flash shim that provides multiple file uploads and client-side progress indicators.

# 16th June 2009, 11:46 am / jquery, swfupload, upload, flash, javascript