Oregon Breweries Launch

I’m excited to finally launch a fun side project, Oregon Breweries.

A screencap of the “Oregon Breweries” project

It’s a single-page listing of Oregon’s many brew houses and tasting rooms, along with an interactive map. As of this writing, there’s 184 places to savor a cold one in our great state. Drink up!

In the future, I’d like to put the project on GitHub so anyone can contribute. I’d also like to publish an RSS feed so folks can keep track of new locations. Until then, if you notice a missing Oregon pub, have an idea, or want to contribute, please do get in touch.

Back. Better.

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.

Swash Cap’s old site screecap
The old 2010 version of Swash Cap. Rich textures, earth tones.

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.

Swash Cap’s new site screecap
The new (2013) version. Stripped down to its essentials.

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

Removing devicepx-jetpack.js for WordPress

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 on CSS filters

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)