It’s been a while, hasn’t it?

Through some mistakes I accidentally deleted my site’s hosted database and, with it, all my content. Fortunately, I still had the original blog articles in Markdown format. This pushed that inevitable redesign to the front.

I was also laid off from my job at MediaLeaf late last month. Cue redesign to the top of the stack. (I’m available for projects!)

I’ve learned a lot over the last three years: I’ve honed my craft, picked up some new technologies and gotten significantly faster at what I do. I wanted something to reflect this and to showcase new work.

There are yet a few issues to be addressed (waiting on you, responsive images), but I’m happy with the results.

I’m running JetPack, Automatic’s do-everything plugin for WordPress. It includes a script, devicepx-jetpack.js, which is meant to serve bigger avatar images for high resolution screens.

This is annoying because it’s an extra script call which increases the page’s weight. I couldn’t find any easy guides for removing it, so here’s one.

The lines in question from jetpack.php:

/**
 * Device Pixels support
 * This improves the resolution of gravatars and wordpress.com uploads on hi-res and zoomed browsers.
 */
function devicepx() {
    wp_enqueue_script( 'devicepx', ( is_ssl() ? 'https' : 'http' ) . '://s0.wp.com/wp-content/js/devicepx-jetpack.js', array(), gmdate('oW'), true );
}

The script goes by the handle devicepx, so that’s what we need to turn off. To do so, add the following to your theme’s functions.php file:

function remove_devicepx() {
    wp_dequeue_script( 'devicepx' );
}
add_action( 'wp_enqueue_scripts', 'remove_devicepx' );

That does the trick.

Glen Maddern made an awesome GIF-based slideshow for a JavaScript talk. He explains how he built it to perform well:

I honestly don’t know if this is a “good idea”, but it solves this particular problem. My reasoning goes like this:

• The GIF isn’t very big, dimensions-wise
• Scaling up the image takes work
• Applying the filter takes work proportional to the number of pixels
• Why not apply the filter first?

He applied the blur first, then scaled up the image using a CSS transform. Neat hack.

(via Web Design Weekly, #96)

Dave Rupert wrote:

Lots has happened in the world of Responsive Images since I wrote Mo’ Pixels, Mo’ Problems. And by lots, I mean nothing at all.

Yep. I think the W3C folks are trying to make everyone happy, but this can’t happen due to the complicated nature of images on the web. There needs to be some solution, and Tim Kadlec’s recent article hints at why:

What is staggering is just how massive the savings could be if these sites served appropriately sized images. At 360px wide, these 402 sites combine to serve 171.62MB of unnecessary weight to their visitors . That’s a whopping 72.2% of image weight that could be ditched by using a responsive image technique.

Pretty ridiculous. If the internet is for readers first, then something must be done to improve their experience.