No more jQuery

Here’s a change: your Sheepie experience is now free of jQuery unless you are a dirty IE9 peasant.

This morning I removed the last piece of jQuery-dependent code, a preprocessor for highlight.js. highlight.js operates on <pre> tags with a <code> child element. Since I have a few hundred older posts without code that I didn’t want to hand-edit, I used jQuery’s .wrapInner() function to prepare them:

if ($('pre').length) {
    $('pre:not(:has(> code))').wrapInner('<code></code>');

I replaced it with my own version that uses vanilla JS:

function wrapInsideElement(selector, wrapper) {
    selector = document.querySelectorAll(selector);
    wrapper = wrapper.replace(/(^<.*\/|>$)/g, '');

    [], function(element) {
        if (!element.querySelectorAll(wrapper).length) {
            var newChild = document.createElement(wrapper);
            while (element.childNodes.length) {


wrapInsideElement('pre', '<code></code>');

Update: No jQuery at all. You can still load it as a script dependency if necessary.

Sass power function

This was fun to write. Raise or lower a number to any power, although you are limited to five digits of precision. Any number of greater precision is rounded off to the nearest whole number, so you couldn’t have an rem font-size equal to the gravitational constant (not that I’d want to do this):

#gravitationally-awesome {
    // font-size: 0rem;
    font-size: #{6.674 * power(10,-11)}rem;
 * Exponential Number
 * -----------------------------------------------------------------------------
 * Raise a number to a given power.
 * @param   number      $number         Number to raise.
 * @param   number      $power          Power to which it should be raised.
 * @return  number      $exponent       Number raised to exponent.

@function power($number, $power) {
    $exponent: 1;

    @if $power > 0 {
        @for $i from 1 through $power {
            $exponent: $exponent * $number;
    } @else if $power < 0 {
        @for $i from 1 through $power {
            $exponent: $exponent / $number;

    @return $exponent;

(Better) dynamic CSS columns through sass

I spent an hour on Google after my last post on dynamic columns. I wanted an idea of everyone else’s solutions to the problem of “how can I generate dynamic columns with Scss?” I found:

  • Seb Kay, who doesn’t attempt dynamic generation, and instead pre-generates column classes;
  • Steve Hickey who modifies pre-existing bourbon code;
  • Luke Harrison also pre-generates column classes;
  • eddiemoore, who pregenerates column classes;
  • and Thad Bloom, whose approach is better, but still uses floats.
  • Singularity is the nuclear option; it can do all the things. But it still floats, and you can’t even control the side.

Singularity is overkill and the other lack in features. What I wanted was to

  1. generate symmetric and asymmetric columns on the fly;
  2. be able to add responsive code through @content;
  3. a programmatic solution: if I say, “give me three columns here”, I wanted three columns here, now;
  4. generate either float or flexbox columns;
  5. and not have to care about context. I don’t care about the size, padding, colour or anything else about the parent. I just want a mixin I can drop into an element.

Because of all that, I wrote this monster. So what can it do?

  1. Equal columns with optional margin.
  2. Asymmetric columns with optional margin.
  3. Output them with flexbox or floats.

For example:

// Three equal columns, using flexbox, separated by a 11% margin.
@include columns(flex, div, 3, 11%);
// Three equal floated columns, separated by a 2% margin.
@include columns(float, div, 3, 2%);
// Five columns: three "auto" filling width, and two with a set width, each separated by 5%
@include columns(flex, div, auto 10% 30% auto auto, 5%);
// Four columns: one each of 10%, 5% and 3%, and the last taking up the remaining width.
@include columns(float, div, 10% 5% 3% auto, 0);

Elements are set using the nth-child pesudo class.

A more complex example. The mixin accepts an @content block that is applied to each child element.

@include columns(float, div, 10% 5% 3% auto, 0) {
    box-sizing: border-box;
    padding: 10px;

That’s all of it, now try it out:

Mostly CSS3 lightbox II

…now with 480% more JavaScript!

Eadaoin on the beach at Sandymount Beach

I rewrote the lightbox I put together in May. Wikipedia added a cool feature a while back: it you click on an image, the lightbox image is added to the URL hash. Later, if you follow the hash link directly, the image will open in the lightbox. Click through to this photo of Pluto. It’s a neat feature that I want to steal for my site. So, since then:

The CSS hasn’t changed, but I’ve put the JavaScript through a complete rewrite to add what I know now. The core flow is the same:

  1. Take in target selector.
  2. Add appropriate data to image.
  3. Add lightbox to <body>.
  4. Set and show lightbox image on click.

The biggest addition is the Wikipedia-ish link to an image. I look for a hash and show the image if it matches an image on the page. The next thing I want to fix is links to article images when they are presented on non-article pages. I have a few hacks in mind, but it’s midnight.

If you click this link to the post, the photo of Eadaoin should open up in the lightbox.

My next step will be to figure a permanent solution to image links on non-single articles. The problem is that the URL hash isn’t passed from the browser to the server, since the server shouldn’t care to where the browser scrolls. So, try it out! Click around! Throw new an exciting browsers at this. Grab the gist and mod it for your own site. Pat me on the back, even!

It’s called with:

$('article a img').addLightbox();


  1. This is still tied to the article ID structure I use on my blog.
  2. I presume the image is wrapped in an anchor link to a bigger image, because I subvert the target URL.
  3. Again: I presume. I don’t yet wrap the image if it isn’t.

Split up columns evenly with flexbox

I need to split up children elements on a regular basis (like here), and I realized that it was a waste to do it piecemeal. So:

$separation is the percentage separation between columns. $separation: 2 is a 2% separation between columns, after they are sized. So, with this and two columns, each column would be 48% wide.

@function column-width($columns, $separation) {
    @return (100 - ($columns - 1) * $separation) / $columns;
@mixin column-of($child: div, $columns: 3, $separation: 2) {
    $column-width: column-width($columns, $separation);

    @include flex-parent(row, space-between, wrap);

    > #{$child} {
        @include flex-child(0 1 #{$column-width + '%'});

Edit: I added a float mixin too, for IE fallbacks:

@mixin float-of($child: div, $columns: 3, $separation: 2, $direction: left) {
    $column-width: column-width($columns, $separation);
    @include clearfix();

    > #{$child} {
        float: $direction;
        width: #{$column-width + '%'};

        &:not(:nth-child(#{$columns + 'n'})) {
            margin-right: #{$separation + '%'};