Modern CSS, HTML Keeps Moving Forward.

As we all know, the only constant in life is change, and the world of HTML, CSS and JS is moving along very nicely. Illustrating this, we have many great web sites now that operate so well they work like apps. (the prime example here is forecast.io ) but we still have to consider the issue of older browser support. Old browsers, especially the old Internet Explorer browsers, remain an anchor around the neck of site development. 1

Do we still care about IE8, 7 and 6? I feel it’s becoming more okay to ignore them now, but IE8 support is still a bit of a should-I-or-should-I-not case.

A new post by Alexander over at alxmedia.se takes us through a quick overview of how to add the basic support for some of the modern CSS, HTML in WordPress.

We may not solve the old browser issue any time soon. We can make things a little more sane with the javascript solutions respond.js, selectivizr.js, and html5shiv.js. Bringing these to WordPress will go along way to keeping our potential readers reading WordPress sites with all the media queries and responsive designs.


  1. especially on corporate campuses, it seems

Footnotes by Bigfoot, plugin by WP-Bigfoot

Footnotes are all the rage

Whether the author wants to include an afterthought, additional observations, commentary, etc. everyone publishing on the web seem to be adding these footnotes. Some examples are: the article you are reading 1,  Dr. Drang, and Marco Arment.

I don’t really need to go into great detail of the old way footnotes worked, but suffice it to say they had some issues. The primary issue was due to the way anchor tags worked – moving from the article to the bottom of page and back again.2 See an example of this issue on Casey Liss’s blog.
To solve this problem, footnotes that kept you in place but popped up the text of the footnote were born. This kept you in the spot and didn’t have the side effects. Nice. With some Javascript fu you could be the footnote hero to those reading your site. Of course an easy way of doing this was not too far off with the defacto standard from Chris Suave with his Bigfootjs project. This little project made it tremendously easy to add nice graphical popup style footnotes. Double nice.

WordPress and Footnotes

Bringing these footnotes to the sites using WordPress were hacked into WordPress but several weeks ago WP-Bigfoot plugin was released. Finally, Bigfootjs-style footnotes for WordPress users. A simple “footnote” shortcode was all that was needed to get these in your blog.

Numbers

I hacked up some changes to the WP-Bigfoot plugin so I could get the numeric example that Chris Suave demonstrated. The changes came down to the markup on the page in the original Bigfootjs uses  “data-footnote-number” instead of the “data-footnote-identifier” coded in the WP-bigfoot plugin.

WP-Bigfoot Original bigfoot.js in the Settings section.


contentMarkup : "<aside class=\"footnote-content bottom\"" +
 "data-footnote-identifier=\"{{FOOTNOTENUM}}\" " +
 "alt=\"Footnote {{FOOTNOTENUM}}\">" +
 "<div class=\"footnote-main-wrapper\">" +
 "<div class=\"footnote-content-wrapper\">" +
 "{{FOOTNOTECONTENT}}" +
 "</div></div>" +
 "<div class=\"tooltip\"></div>" +
 "</aside>",

buttonMarkup : "<a href=\"#\" class=\"footnote-button\" " +
 "data-footnote-identifier=\"{{FOOTNOTENUM}}\" " +
 "alt=\"See Footnote {{FOOTNOTENUM}}\" " +
 "rel=\"footnote\"" +
 "data-footnote-content=\"{{FOOTNOTECONTENT}}\">" +
 "<span class=\"footnote-circle\" data-footnote-identifier=\"{{FOOTNOTENUM}}\"></span>" +
 "<span class=\"footnote-circle\"></span>" +
 "<span class=\"footnote-circle\"></span>" +
 "</a>"
 }, options);
....
then around line 514
....
   // Gets the easy replacements out of the way (try is there to ignore the "replacing undefined" error if it's activated too freuqnetly)
     var content = settings.contentMarkup
          .replace(/\{\{FOOTNOTENUM\}\}/g, $this.attr("data-footnote-identifier"))
          .replace(/\{\{FOOTNOTECONTENT\}\}/g, $this.attr("data-footnote-content").replace(/&gtsym;/, "&gt;").replace(/&ltsym;/, "&lt;"));

    // Handles replacements of BUTTON attribute requests

My Version

contentMarkup : "<aside class=\"footnote-content bottom\"" +
 "data-footnote-identifier=\"{{FOOTNOTEID}}\" " +
 "alt=\"Footnote {{FOOTNOTENUM}}\">" +
 "<div class=\"footnote-main-wrapper\">" +
 "<div class=\"footnote-content-wrapper\">" +
 "{{FOOTNOTECONTENT}}" +
 "</div></div>" +
 "<div class=\"tooltip\"></div>" +
 "</aside>",

buttonMarkup : "<a href=\"#\" class=\"footnote-button\" " +
 "data-footnote-number=\"{{FOOTNOTENUM}}\" " +
 "data-footnote-identifier=\"{{FOOTNOTENUM}}\" " +
 "alt=\"See Footnote {{FOOTNOTENUM}}\" " +
 "rel=\"footnote\"" +
 "data-footnote-content=\"{{FOOTNOTECONTENT}}\">" +
 "<span class=\"footnote-circle\" data-footnote-number=\"{{FOOTNOTENUM}}\"></span>" +
 "<span class=\"footnote-circle\"></span>" +
 "<span class=\"footnote-circle\"></span>" +
 "</a>"
 }, options);

....
then around line 514
....
    // Gets the easy replacements out of the way (try is there to ignore the "replacing undefined" error if it's activated too freuqnetly)
        var content = settings.contentMarkup
          .replace(/\{\{FOOTNOTENUM\}\}/g, $this.attr("data-footnote-number"))
          .replace(/\{\{FOOTNOTEID\}\}/g, $this.attr("data-footnote-identifier"))
          .replace(/\{\{FOOTNOTECONTENT\}\}/g, $this.attr("data-footnote-content").replace(/&gtsym;/, "&gt;").replace(/&ltsym;/, "&lt;"));

    // Handles replacements of BUTTON attribute requests

 

and I added the number style sheet available from the Bigfootjs.com site. Finally, I made some further edits to the sizes used in the button’s, but those are just stylistic. Here’s gist the wp-bigfoot.css file with my changes.

 

Update: 2014-02-13 – I added a line that was also changed in the bigfoot.js and forgot to show. Additionally, I posted a gist to the css file that I changed.


  1. 🙂

  2. –albeit in a slightly different place because the anchor would now be at the very top edge of the browser window and not bring you back to the reading position and window position–

A BASH function that should be built-in.

The create directory command, cd, is one of those commands that I use almost every day on the command line. I realized after listening to a recent podcast 1, I should look at how many keystrokes I do and where I can make things more efficient.

function mcd() {
mkdir $1
cd $1
}

One extra character in the command to create a directory not only creates the new directory but then changes into that directory. 2 This saves at least 4 keystrokes each time I create a new directory!


  1. Pretty much any Back to Work episode where they talk about TextExpander 🙂

  2. Which is what you do almost 100% of the time when you create a new directory.