I had a code review

in the website

Nothing as in depth as a line-for-line pickapart, but I asked for feedback on boards.ie. The feedback was great and has led to a huge performance boost to the site: I moved all of my media content to a local subdomain; I added a DNS prefetch directed to the media subdomain; and I changed jQuery to load from the footer (which as led to its own interesting problems-most WordPress plugins load their JavaScript into the header).

I’ve seen load times drop from over 4 seconds to under 1.5 on the currently media-heavy home page.

Hurray for peer review. \o/


Mostly CSS3 lightbox

in code

I wanted a very simple and light lightbox for images on the blog, since my content has always been image-heavy: click on image, see image, close image.

I hit Google yesterday for a CSS3 lightbox and found this remarkable codepen by Gregory Schier. It exploits the :target pesudoclass to create a modal box without JavaScript. Put simply, :target styles the target of a hyperlink. :target would, for example style the target of a subsection link on Wikipedia.

Gregory’s codepen relies on a duplicate HTML structure for the lightbox, because the visible link targets a hidden lightbox element. When targeted, it pops out. It works great, but I’ve added a JavaScript control structure to point relevant image sources at the lightbox. View the @position and @prefix mixins for information on the mixins used:

.pop-modal, %pop-modal {
    display: none;
    @include fixed(0);

    &:target {
        display: block;
        outline: 0;
        z-index: 4;
    }
}
#lightbox {
    @extend %pop-modal;
    background: palette(black, dark);

    img {
        max-width: 90%;
        max-height: 90%;
        @include fixed(50% 50%, left top);
        @include prefix(transform, translate(-50%, -50%));
    }
}
var photobox = {
    br: '.article-photobox br',
    a: 'article a:has(img)',
    lightbox: 'lightbox',
    addLightbox: function() {
        // Add lightbox to body on page load.
        jQuery('body').prepend('<a href="#_" id="' + photobox.lightbox + '"><img src="" /></a>');
        photobox.lightbox = '#' + photobox.lightbox;
    },
    setImage: function() {
        // Set lightbox image source on click.
        var src = jQuery(this).find('img').first().attr('src');
        jQuery(photobox.lightbox).find('img').attr('src', src);
    },
    setHref: function() {
        // Change href of all items to point to the lightbox.
        jQuery(this).data('href', jQuery(this).attr('href'));
        jQuery(this).attr('href', photobox.lightbox);
    }
}

// Remove all line breaks within the photobox, as they can break formatting.
jQuery(photobox.br).remove();
photobox.addLightbox();
jQuery(photobox.a).each(photobox.setHref);
jQuery(photobox.a).click(photobox.setImage);

Godspeed you magnificent ornery bastard

in friends

Michael O'Connor

It is easy to be a fair-weather atheist. Anyone can do it with a tiny bit of laziness; you just don’t go to church, don’t pray and scoff at the notion Big Dude up above. But, inevitably, there comes a day when you have to face up to what it means to deny an eternal souls and an afterlife both.

To an atheist, a person comes from dirt, and lives out theirs lives in whatever goodness they may before they go back to it. Proverbial dirt, mind-we’re all made of starstuff. You pop into existence, do stuff, pop out of existence. It, to me, makes life special and precious: we’re all monkeys who climbed down from different branches of the same tree, albeit we are monkeys who can apply abstract concepts like beauty to the wider universe. A dumb deterministic universe ticked along nicely for seventeen billion years, before out birthed you, a conscious little mote who can appreciate beauty and irony.

And someday, for all of that, you’ll die. As far as you’re concerned the universe ends with a rather abrupt stop. Being an atheist does make life precious; I deeply appreciate all the twists and turns that brought Caira and Garrett and Eadaoin and all my friends intos my life, and that in the end they’ll be taken away too.

Mike passed away suddenly last week after a yearlong battle with lung cancer. As far as I understand it, Mike came down with pneumonia and his health snowballed. He was active on Facebook right up until the very end, delivering snark and jibes and jokes. And then, gone.

I remember one time when I had Caira in the hackerspace, Mike said something to her. I have no idea what was said, but she laughed for a solid five minutes.

Mike was the nicest mean bastard I had ever known, a true gentleman who took everything in stride with a joke a node and a smile. By the gods, you’ll be missed.

Michael O’Connor, 1991-2015


I found a folder of webcam snapshots

in me

Images range in date from October 31 2010 to January 28 2012. Some photographs (2010 and 2011) were taken at Prospect Hill, Galway, while the remainder come from Cliffoney Co. Sligo with one or two from the library at I.T. Sligo.

2010-01-31-182150.jpg
2011-05-18-222743.jpg
2011-05-18-222753.jpg
2011-05-18-222816.jpg
2011-05-18-222835.jpg
2011-05-18-222837.jpg
2011-05-18-222839.jpg
2011-05-31-141706.jpg
2011-05-31-141732.jpg
2011-05-31-194232.jpg
2011-07-14-190115.jpg
2011-10-22-173646.jpg
2011-10-22-212847.jpg
2011-10-31-171444.jpg
2011-11-02-165229.jpg
2011-11-02-194021.jpg
2011-11-07-201019.jpg
2011-11-07-201025.jpg
2011-11-07-201155.jpg
2011-11-07-201257.jpg
2011-11-07-202222.jpg
2011-11-07-203010.jpg
2011-11-07-203813.jpg
2011-11-10-145305.jpg
2011-11-10-145820.jpg
2011-11-10-152610.jpg
2011-11-12-175548.jpg
2011-11-14-185823.jpg
2011-11-14-185922.jpg
2011-11-14-185930.jpg
2011-11-14-190145.jpg
2011-11-14-190158.jpg
2011-11-14-190218.jpg
2011-11-14-190258.jpg
2011-11-16-173704.jpg
2011-11-20-214517.jpg
2011-12-04-144316.jpg
2011-12-04-144338.jpg
2011-12-05-142710.jpg
2011-12-20-200526.jpg
2011-12-20-200635.jpg
2011-12-21-205408.jpg
2011-12-27-190213.jpg
2011-12-27-200448.jpg
2011-12-27-200505.jpg
2011-12-27-200713.jpg
2011-12-27-200731.jpg
2011-12-27-200746.jpg
2011-12-27-200809.jpg
2011-12-27-201009.jpg
2012-01-05-132939.jpg
2012-01-14-015018.jpg
2012-01-14-142836.jpg
2012-01-14-142854.jpg
2012-01-14-142917.jpg
2012-01-14-144201.jpg
2012-01-15-120520.jpg
2012-01-16-203240.jpg
2012-01-16-203249.jpg
2012-01-16-203257.jpg
2012-01-16-203329.jpg
2012-01-16-203338.jpg
2012-01-16-203402.jpg
2012-01-16-203416.jpg
2012-01-16-203430.jpg
2012-01-18-190032.jpg
2012-01-20-122507.jpg
2012-01-20-122528.jpg
2012-01-28-144740.jpg

The Cliffs of Moher

in ireland

True story: Eadaoin and I got on a bus to Kylemore the day after my birthday, except it was the bus to the Cliffs of Moher. Something YOLO fuck it. It was a lovely day outside of some awful nausea for the first hour. The weather was gorgeous, except when it was bad, and when it was bad it was still gorgeous in that broody wesht way.

I haven’t been to Clare-to Doolin or Lisdoonvarna since the 2010 photowalk.

It was good to be back there, doubly so with Eadaoin.

Mark puts his feet up at the Cliffs of Moher Lahinch from the cliffs The Cliffs of Moher The Cliffs of Moher Looking toward O'Brien's Tower Looking toward O'Brien's Tower Eadaoin reflects on the view The Aran Islands from the Cliffs of Moher The North Atlantic from the Cliffs of Moher

Operation Break the Site V

in the website

AKA “Who’s left to care?”

While the front-end appearance of the site hasn’t changed too much since the March update, the back-end appearance certainly has. I’ve pushed about eighty commits to Sheepie in the past few days with the goal of refactoring the code and bringing it to a higher standard:

  1. I renamed the theme to Sheepie, after Garrett’s favourite toy as a toddler.
  2. Completely rewrote the CSS. I moved it to decimal units that compile to rem, with a px fallback. Works great: the site very easily scales and a lot of my headaches about margins and padding went away. A++, would recommend.
  3. Changed the last outliers of elements to flexbox.
  4. Added GPL and MIT license boilerplate to all the things!
  5. Removed dependence on JavaScript for many functional elements. The only part of the theme that now depends on JavaScript are code blocks marked up by highlight.js, and they fall back gracefully to white text on black.
  6. Look left (or maybe above if you’re on a small screen)! Vector sprite icons for all the peoples through all the days!

I undertook all of this effort because I needed to prototype a major work project on a smaller scale, and also because will be on the hunt for work in Dublin soon. I needed to have a decently-sized project up on GitHub showing the scope of what I know: my code standards, style and depth of knowledge of CSS and JavaScript among others.

And with that noted, I’ll also warn that the search functionality is broken and archives lack features:

  • Search is utterly broken.
  • Pages are broken.
  • The pagination counter only correctly works on the main index loop.
  • There may be scrolling problems on Android and iOS mobile devices, but I think I have that licked.
  • The site still lacks good intra-section navigation (think: navigation within either archives or search results).
  • I found a bug in Firefox. Thanks, Obama.