{"id":288007,"date":"2019-05-17T13:52:30","date_gmt":"2019-05-17T20:52:30","guid":{"rendered":"http:\/\/css-tricks.com\/?p=288007"},"modified":"2019-05-17T13:52:30","modified_gmt":"2019-05-17T20:52:30","slug":"footnotes-that-work-in-rss-readers","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/footnotes-that-work-in-rss-readers\/","title":{"rendered":"Footnotes That Work in RSS Readers"},"content":{"rendered":"

Feedbin<\/a> is the RSS reader I’m using at the moment. I was reading one of Harry’s blog posts<\/a> on it the other day, and I noticed a nice little interactive touch right inside Feedbin. There was a button-looking element with the number one which, as it turned out, was a footnote. I hovered over it, and it revealed the note.<\/p>\n

<\/p>\n

\"\"<\/figure>\n

The HTML for the footnote on the blog post itself<\/a> looks like this:<\/p>\n

<p>...they\u2019d managed to place 27.9MB of images onto the Critical Path. \r\nAlmost 30MB of previously non-render blocking assets had just been \r\nturned into blocking ones on purpose with no escape hatch. Start \r\nrender time was as high as 27.1s over a cable connection<sup id=\"fnref:1\">\r\n<a href=\"#fn:1\" class=\"footnote\">1<\/a><\/sup>.<\/p><\/code><\/pre>\n
Just an anchor link that points to #fn:1<\/code>, and the <sup><\/code> makes it look like a footnote link. This is how the styling would look by default:<\/p>\n
\"\"<\/figure>\n
The HTML for the list of footnotes at the bottom of the blog post looks like this:<\/p>\n
<div class=\"footnotes\">\r\n  <ol>\r\n    <li id=\"fn:1\">\r\n     <p>5Mb up, 1Mb down, 28ms RTT.&nbsp;<a href=\"#fnref:1\" class=\"reversefootnote\">&#x21a9;<\/a><\/p>\r\n    <\/li>\r\n  <\/ol>\r\n<\/div><\/code><\/pre>\n
As a little side note, I notice Harry is using scroll-behavior<\/code><\/a> to smooth the scroll. He’s also got some nice :target<\/code><\/a> styling in there.<\/p>\n
\"\"<\/figure>\n
All in all, we have:<\/p>\n
    \n
  1. a link to go down and read the note<\/li>\n
  2. a link to pop back up<\/li>\n<\/ol>\n
    Nothing special there. No fancy libraries or anything. Just semantic HTML. That should work in any RSS reader, assuming they don’t futz with the hash links and maintain the IDs on the elements as written.<\/p>\n
    It’s Feedbin that sees this markup pattern and decides to do the extra UI<\/abbr> styling and fancy interaction. By inspecting what’s going on, it looks like they hide the originals and replace them with their own special stuff:<\/p>\n
    \"\"<\/figure>\n
    Ah ha! A Bigfoot<\/a> spotting! It’s right in their source<\/a>.  <\/p>\n
    That means they fire off Bigfoot when articles are loaded and it does the trick. Like this:<\/p>\n
    \n  See the Pen 
    \n  Bigfoot Footnotes<\/a> by Chris Coyier  (    @chriscoyier<\/a>)
    \n  on     CodePen<\/a>.<\/span>\n<\/p>\n
    That said, it’s based on an already functional foundation. Lemme end this with that same markup pattern, and I’ll try to look at it in different RSS readers to see what they do. Feel free to report what it does in your<\/em> RSS reader of choice in the comments, if it does anything at all.<\/p>\n
    \n
    Azul is an abstract board game designed by Michael Kiesling and released by Plan B Games1<\/a><\/sup> in 2017. From two to four players collect tiles to fill up a 5×5 player board. Players collect tiles by taking all the tiles of one color from a repository, and placing them in a row, taking turns until all the tiles for that round are taken. At that point, one tile from every filled row moves over to each player’s 5×5 board, while the rest of the tiles in the filled row are discarded. Each tile scores based on where it is placed in relation to other tiles on the board. Rounds continue until at least one player has made a row of tiles all the way across their 5×5 board.<\/p>\n
    \n
      \n
    1. \n      Plan B makes other cool games like Century and Reef. ↩<\/a><\/small>\n    <\/li>\n<\/ol>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
      Feedbin is the RSS reader I’m using at the moment. I was reading one of Harry’s blog posts on it the other day, and I noticed a nice little interactive touch right inside Feedbin. There was a button-looking element with the number one which, as it turned out, was a footnote. I hovered over it, […]<\/p>\n","protected":false},"author":3,"featured_media":288053,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1280],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/css-tricks.com\/wp-content\/uploads\/2019\/05\/bigfoot-pattern.svg","jetpack-related-posts":[{"id":301432,"url":"https:\/\/css-tricks.com\/netnewswire-and-feedbin\/","url_meta":{"origin":288007,"position":0},"title":"NetNewsWire and Feedbin","date":"January 16, 2020","format":false,"excerpt":"NetNewsWire is one of the classic RSS apps, debuting in 2002. I was pretty stoked when it went 5.0 and was open-sourced in August 2019! You can snag it right here. (Sorry, Mac only.) It's super nice, is fast, and looks great. It has just the right features. But... I\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/netnewswire.png?fit=1200%2C826&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":304061,"url":"https:\/\/css-tricks.com\/pages-for-likes\/","url_meta":{"origin":288007,"position":1},"title":"Pages for Likes","date":"February 24, 2020","format":false,"excerpt":"I posted about parsing an RSS feed in JavaScript the other day. I also posted about my RSS setup talking about how Feedbin is at the heart of it. Dave discovered that Feedbin can also produce an RSS feed for all your likes. Likes is a feature of Feedbin, and\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/rss-likes.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":305622,"url":"https:\/\/css-tricks.com\/rss-stuff\/","url_meta":{"origin":288007,"position":2},"title":"RSS Stuff","date":"March 30, 2020","format":false,"excerpt":"Laura Kalbag wrote How to read RSS in 2020. This would be a nice place to send someone curious about RSS: what it is, what it's for, and how you can start using it as a reader. I like this callout, too: Sometimes the content is just an excerpt, encouraging\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/rss-pattern.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":269678,"url":"https:\/\/css-tricks.com\/its-time-for-an-rss-revival\/","url_meta":{"origin":288007,"position":3},"title":"It’s Time for an RSS Revival","date":"April 12, 2018","format":false,"excerpt":"Brian Barrett: Tired of Twitter? Facebook fatigued? It's time to head back to RSS. I'm an RSS reader lover, so I hate to admit it, but RSS ain't going mainstream. It was too nerdy 20 years ago and it's too nerdy now. RSS is still incredibly useful technology, but I\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/rss-pattern.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":281338,"url":"https:\/\/css-tricks.com\/the-secret-weapon-to-learning-css\/","url_meta":{"origin":288007,"position":4},"title":"The Secret Weapon to Learning CSS","date":"January 22, 2019","format":false,"excerpt":"For some reason, I\u2019ve lately been thinking a lot about what it takes to break into the web design industry and learn CSS. I reckon it has something to do with Keith Grant\u2019s post earlier this month on a CSS mental model where he talks about a \u201ccommon core for\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/rss-pattern.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":297213,"url":"https:\/\/css-tricks.com\/ten-ton-widgets\/","url_meta":{"origin":288007,"position":5},"title":"Ten-Ton Widgets","date":"October 15, 2019","format":false,"excerpt":"At a recent conference talk (sorry, I forget which one), there was a quick example of poor web performance in the form of a third-party widget. The example showed a site that installed the widget in order to add a \"email us\" button fixed to the bottom right of the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/weight-widgets.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/css-tricks.com\/wp-content\/uploads\/2019\/05\/bigfoot-pattern.svg","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/288007"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=288007"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/288007\/revisions"}],"predecessor-version":[{"id":288052,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/288007\/revisions\/288052"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/288053"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=288007"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=288007"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=288007"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}