This happened last night

in family
Caira and Garrett on Facetime Caira and Garrett on Facetime Caira and Garrett on Facetime

Somebody, somewhere caved in. I spoke with Caira and Garrett over Facetime for about forty-five minutes. :)


Hail Satan \m/

in me
Alanna, Casey and I at Raleigh Row Alanna, Paul, Casey and I by the Spanish Arch Suddenly, blood

I travelled to Galway on Saturday to memorialize Michael while Eadaoin was at her family’s summer barbeque in Tipperary. My sister came up with her kids to watch the cat and house, so something something mice played.

As great as it would be to have a post about Saturday, it can be condensed to optician, alcohol, food, alcohol, blood, alcohol, locked out of house, into bed in Dublin:

I had an eye test for new glasses (imblind, lol) and paid my respects to mum, who I found camped out in the beer garden of a tiny bar down in Woodquay. I think mum is doing a bit better. Killer was a burden to her, and mum’s new prescriptions have led to a dramatic improvement in her quality of life. I’m happy to see all of this, as well her nascent acceptance that she can live a life despite arthritis.

After that I met Paul McEoin in Eyre Square for coffee and lunch before alcohol. Paul is the gentleman who helped me move back from Sligo in 2012. We haven’t seen much of him in Galway, as he left for Zurich to become a cancer researcher, so it was great to catch up. Cafe Express in Eyre Square have the best cappuccinos in Galway. There’s a perfect mix of foam, milk and coffee with a dab of chocolate syrup, served at just the right temperature. The baristas there understand the components of a good beverage, and I always want more. I ordered a tuna sandwich, but received a hummus sandwich, which was still bloody good regardless.

And then, alcohol. We retreated to the Salt House bar on Raven’s Terrace after local Garda ran us out of the Spanish Arch, and had a few drinks before dinner at nine with Alanna and Casey. Dinner was great, and well-needed after five or six pints in the early evening. Everyone returned to the Salt House. I drank water while the revelers revelled until I went back to the hostel midnight-ish.

So, there was blood at the hostel. Some poor gentleman vomited blood all over the room I stayed in. I left, wound up at the Salt House for fortification and then back with Alanna and Casey for the night.

I overslept, left six hours later than planned, and so missed my sister at Churchtown. I sat on the front step for for two hours reading books-I polished off an Alastair Reynolds novel and started Tom Wolfe’s The Right Stuff.


Force WordPress to load /all/ JavaScript in footer

in code

This isn’t my own fix, but it deserves to be more visible than it is now. For the sake of performance, I wanted to force all WordPress JavaScript to load in the site’s footer. As a theme developer I have the freedom to put it anywhere I want, but plugin developers also enjoy the same freedom. To hand edit every single plugin, or sed 's/true/false/', isn’t a proper solution. I looked at the objects and global variables tied to scripts, but for all of that and my other pokings with the WordPress API I didn’t get too far. Google wasn’t any help, because three quarters of questions on this topic are simple ones about wp_enqueue_script.

Kevin Leary had a partial answer in a 2013 blog post, but his solution removes all code from the site header, including CSS. A comment from Joshua Nelson contains a better four line solution to only force JavaScript into the footer. He turned his solution into a free plugin, but if you are a developer you can just add this code to your functions.php file:

function clean_header() {
    remove_action('wp_head', 'wp_print_scripts');
    remove_action('wp_head', 'wp_print_head_scripts', 9);
    remove_action('wp_head', 'wp_enqueue_scripts', 1);
}

add_action('wp_enqueue_scripts', 'clean_header');

That’s it!



Make flexbox work in older versions of Internet Explorer

in code

Spoiler: You can’t.

Sniffing for browsers to determine available design or features is considered a Bad Idea.

  1. It increases the complexity of your project.
  2. It ties you to specific browser hacks that act as a wall against future progress.
  3. It is a bad habit, plain and simple.

This rule applies to all modern browsers: every browser more or less supports the same set of CSS. You may have to prefix some CSS features, or just not use them, but them’s the swings. The roundabouts, and the exception to this rule, are older versions of Internet Explorer. Internet Explorers 8, 9, and 10 remain Internet Explorers 8, 9 and 10, and will continue to represent a small percentage of website users.

For my current client I have been set three major goals:

  • Cutoff for support at Internet Explorer 10.
  • The site should be presentable in a minimal format in Internet Explorer 9.
  • The site should use flexbox in conjunction with decimal-to-rem units.

I have had zero problems with rem units, because the px fallback is already in place. I’ve used this site as a cross-browser test bed for the same code I will use for my client. Two birds with one stone! This post will relate some of the misadventures and lessons I’ve learned in getting this site looking good all the way back to Internet Explorer 9.

Get rid of prefixes
My own sass library had a mixin to generate prefixed attribute and values on demand. It worked up until it didn’t work; manual prefixes are aren’t comprehensive and are prone to errors. This is simply a job best left to machines and Can I use…, so my first step was to remove all hand-entered prefixes from my library and website.

Node.js and Gulp
Node.js offers gulp and gulp offers several tools to streamline my CSS build: autoprefixer and gulp-sourcemaps are the two heavy ones I use. Here are my package.json and gulpfile.js scripts.

Save them and run npm install followed by gulp css to download dependencies and build the transpiled CSS file.

Look at what’s broken
Browserstack is worth every cent of its monthly subscription. It has become an invaluable tool to test and debug my code in target problem browsers: Browserstack has versions of Internet Explorer all the back to 6. My first step with Browserstack was to look at what broke, and determine why it broke, in successive versions of Internet Explorer 11 backward.

IE11 works pretty well; there’s one nasty bug that causes a vertically-centered cell to wig out if the parent has a min-height value set. The header/sidebar to the left is centered in this manner, but I gave the div a top and bottom of 0 to sidestep height problems.

IE10 only has limited support for the older, 2009, version of flexbox. Autoprefixer will fill a lot of holes for itself. Side-by-side flex containers will Just Work, but be careful to check at every step! The biggest, glaringest problem is flexbox elements that wrap: They go all to hell. In the end I add a media query for Internet Explorer 10, and made the elements float:

/**
 * Internet Explorer
 * -----------------------------------------------------------------------------
 * I am happy to exclude Internet Explorer 11 because it is decently good. My
 * IE problems increase exponentially as I work backwards in time.
 *
 * @link http://keithclark.co.uk/articles/moving-ie-specific-css-into-media-blocks/
 * @link http://keithclark.co.uk/articles/moving-ie-specific-css-into-media-blocks/media-tests/
 * @link http://www.limecanvas.com/css-hacks-targeting-ie-10/
 * @link http://www.paulirish.com/2009/browser-specific-css-hacks/
 */
 
@mixin ie($version: null) {
    @if ($version) {
        @if ($version == 6) {
            $version: 'screen\9';
        } @else if ($version == 7) {
            $version: '\0screen\,screen\9';
        } @else if ($version == 8) {
            $version: '\0screen';
        } @else if ($version == 9) {
            $version: 'screen\0';
        } @else if ($version == 10) {
            $version: 'screen and (min-width:0\0)';
        }
    } @else {
        // Target 8, 9 and 10 by default.
        $version: 'screen\0';
    }
 
    @media #{$version} {
        @content;
    }
}
%article-child {
    @include flex-parent(row, flex-start, wrap);

    @include media(ie) {
        // Fallback for IE8, IE9 and IE10.
        @include clearfix();
    }

    > * {
        box-sizing: border-box;
        @include flex-child(0 1 32%);

        @include media(ie) {
            float: left;
            width: 32%;
        }

        &:not(:nth-child(3n+0)):not(:last-child) {
            margin-right: 2%;
        }
    }
}

IE9 does not support flexbox at all. There is a polyfill, Flexie, which can extend support back to Internet Explorer 6, but Flexie only supports the now-deprecated 2009 flexbox syntax. While I played around with Flexie for a few hours to confirm it works, Flexie requires me to use a second set of flexbox CSS, and to adapt existing mixins… it wasn’t worth the effort. I decided to fallback to floats. Verbatim example for the main #content container:

#content {
    /* ¬°Important! Mozilla Firefox applies an invisible min-width to the
     * element. I guess it is a bug? While in flex-row layout, the column
     * has a minimum width of ~900px, set invisibly, and not reported in the
     * developer tools. Thanks, Obama. */
    min-width: 0;
    @include flex-child(0 1 $sides-66);

    @include media(ie 9) {
        float: right;
        width: $sides-66;
    }

    @include media($b-960) {
        // For Internet Explorer 9.
        float: none;
        width: 100%;
        @include flex-child(1);
    }
}

There isn’t an easy path to fallback from flexbox to float. A general garment isn’t suitable; a specific fit is required because after all, width: 100% and flex: 1 do two completely different things. On top of that, IE9 plain ignores unrecognized HTML5 elements. It renders them, but won’t style them. HTML5 Shiv is a JavaScript workaround that uses black magic to make the browser apply styles.

Listos version: IE11 works great. IE10 sorta works. IE9 is a fucking mess that needs a graceful fallback.