Oh lordy

in code

Dealing with a WordPress developer

I understand that GPL license gives you the permissions to modify the code and then do whatever you want with it, claiming as your own work, but we are not very OK with this, because this is a commercial theme and there are a lot of people who preferred to buy a premium theme rather than using a free one. So I don’t think that they will be happy seeing a similar theme somewhere else being distributed for free.

The GPL is apparently all well and good until it comes to your own license obligations.


These are the things I do to trash talk my girlfriend

in random

A GIF of a sandworm eating a cupcake

I couldn’t tell you how the crap this started, but suddenly trash talk about cupcakes is flying thick and fast on Facebook and I’ve been challenged to a cupcake-off at the Iveagh Gardens this summer.

I am so fucked.


Overly-dramatic Mark

in me

Dramatic Mark up in Corrib Village

Props to Eadaoin for the great shot. :D We went up to Dangan yesterday, but the weather was dull, the trees were barely in bloom and there was nothing neither of hadn’t photographed in better light. A shower caught us at Corrib Village, so we stopped in by the boat shed, and Eadaoin shot this with her phone after the rain passed.

I screwed with this in Photoshop: perspective (keystone) correction, bleach bypass, a second black and white layer, over-sharpening of the shed and lots of dodging and burning to make the carved graffiti stand out.


Dynamic-ish CSS spritesheets

in code

CSS spritesheets are cool, even if their use is hacky as hell. You can drastically lower the load time of a site with a little prep work, but did I mention their use is hacky as hell? A sprite sheet works by showing a portion of a bigger image instead of downloading many smaller images. In this case I want to show social icons. Rather than seventeen different service icons in separate 40kb 300×300 PNG file, I added all of them to one 12 kb 600×300 SVG file.

My problem is the hacky part of a spritesheet. Assume you don’t know just what a sprite sheet is for a moment. Envision an image, 200 pixel wide by 100 high. The left part of the image is a Facebook icon taking up 100 by 100 pixels, and the right size is a Twitter icon taking up 100 by 100 pixels. My only other experience with a sprite sheet was in C# for a 2012 college project (which you can still find on GitHub), and in the XNA game engine, you can elect to display a portion of the image, say the 100×100 Facebook side. With CSS, the sprite sheet works slightly differently:

  1. You increase or decrease the size of the image, such that the foo x bar portion of the sprite sheet takes up exactly the size of the icon. This necessitates a fixed icon size.
  2. You then rotate through the sprites by moving the image. Instead of a separate process to select a portion of the image, you show the entire image, but arrange matters so that only the portion you need is what displays.
  3. Did I mention the icon size is fixed? The icon size is fixed, unless you apply an inordinate amount of CSS media queries or JavaScript $(window).resize() rules.

This works, don’t mistake me, but it smacks me as being hacky. The process feels backwards versus how this has worked for me in the past. I dorked around with the process a little bit tonight, and came up with a simple Scss mixin that hopefully reduces the amount of work and code needed to generate social media links. You pass it three parameters:

  1. Element for the links. This can be anything: a class (.foo), an ID (#bar) or an element (fizz).
  2. Icon size.
  3. Path to the SVG spritesheet.
$spritesheet-positions: (
    positions: (
        beard: (#343537, 0, 0),
        discuss: (#b9dfbc, 20%, 0),
        email: (#f5756c, 40%, 0),
        facebook: (#3B5998, 60%, 0),
        flickr: (#ff0084, 80%, 0),
        github: (#666666, 100%, 0),
        google: (#dd4b39, 0, 33.33%),
        instagram: (#3f729b, 20%, 33.33%),
        linkedin: (#0976b4, 40%, 33.33%),
        pinterest: (#cc2127, 60%, 33.33%),
        print: (#007aaf, 80%, 33.33%),
        reddit: (#ff5700, 100%, 33.33%),
        rss: (#ff6600, 0, 66.6%),
        search: (#000000, 20%, 66.6%),
        share: (#000000, 40%, 66.6%),
        tumblr: (#35465c, 60%, 66.6%),
        twitter: (#55acee, 80%, 66.6%),
        youtube: (#b31217, 100%, 66.6%),
        menu: (#000000, 0, 100%)
   )
) !default;

$black-sprites: (sprites: ('scss-helpers/vectors/button-sprites-black.svg', 6, 4)) !default;
$white-sprites: (sprites: ('scss-helpers/vectors/button-sprites-white.svg', 6, 4)) !default;

$spritesheet-black: map-merge($spritesheet-positions, $black-sprites) !default;
$spritesheet-white: map-merge($spritesheet-positions, $white-sprites) !default;
@mixin generate-social-link($element: null, $size: 100% 1, $service: null, $spritesheet: $spritesheet-white) {
    /* Element can be a class, ID, element-whatever. #foo, .a or baz, or a[href^=fizz]
     * are all perfectly acceptable. */

    // Path to sprtesheet.
    $url: nth(map-get($spritesheet, sprites), 1);
    // Columns/width.
    $columns: nth(map-get($spritesheet, sprites), 2);
    // Rows/height.
    $rows: nth(map-get($spritesheet, sprites), 3);
    // Positional information.
    $networks: map-get($spritesheet, positions);
    // Pixel/percentage/rem/em/whatever size.
    $width: nth($size, 1);
    // Ratio of height to width. See square-flex().
    $ratio: nth($size, 2);

    #{$element} {
        // Vector spritesheet is background-image.
        background-image: url($url);
        /* Final icon is square. background-image size is:
         * width: icon size * number of rows in spritesheet
         * height: icon size * number of columns in spritesheet */
        background-size: #{$width * $columns} #{$width * $rows};
        background-repeat: no-repeat;
        display: block;
        @include square-flex($width $ratio);
    }

    @if ($service) {
        // If you supply a service, just output link for that.
        $color: nth(map-get($networks, $service), 1);
        $position-x: nth(map-get($networks, $service), 2);
        $position-y: nth(map-get($networks, $service), 3);

        #{$element}.#{$service} {
            background-color: $color;
            background-position: $position-x $position-y;
            @content;
        }
    } @else {
        // Else iterate map-list to produce social links.
        @each $map, $network in $networks {
            $color: nth($network, 1);
            $position-x: nth($network, 2);
            $position-y: nth($network, 3);

            #{$element}.#{$map} {
                background-color: $color;
                background-position:  $position-x $position-y;
                @content;
            }
        }
    }
}

I use it in the below manner for the Ouro landing page:

ul#nav-social, ul.team-social {
    @include enerate-social-link(a);
}

If you add or subtract icons, you must update the array of relative positions. There is no way for Sass to access an image, determine its size and change the array to reflect alterations. Sizes work like this:

  1. Give the mixin a size, say 50px.
  2. The height of the box is equal to the width, using a really cool trick that has been around since 2009. So, 50×50.
  3. The SVG spritesheet uses an 6×3 layout. Six columns, three rows.
  4. The size of the spritesheet, as a background object is set to $size * 6 by $size * 3, or in this case 300×150.
  5. The array contains the service colour and relative position as a percentage, so the size you input can be anything at all.

So there you go: dynamic CSS social media sprite sheets through Scss. You can find all of the code in this GitHub gist.