From Zero to Gulp Plugin in No Time

Task run­ners are great. So many things that are tan­gen­tial to the actual core prob­lem I’m work­ing on can be neatly abstracted away to the point where I find myself won­der­ing, “How did I ever get any­thing done before!?” when I step back and notice the pro­duc­tiv­ity ben­e­fit. You can gain a lot of ground rely­ing on other people’s code, but even in Node even­tu­ally you’re going to find your­self in uncharted ter­ri­tory if you stick around long enough. That was me when I found there aren’t many util­i­ties for con­vert­ing assets into data URIs out there. Using Gulp–my pre­ferred task runner–I set out to write my first plu­gin. The process of trans­form­ing a stream of files turned out to be rel­a­tively pain­less. Just make sure you really should.

This gist is a con­trivance for get­ting started with Gulp streams. See gulp-data-uri-stream’s index.js for a com­plete work­ing example.

What’s hap­pen­ing here is we’re act­ing on the Vinyl stream and adding some lovely dec­o­ra­tion to the data that gets passed through. Most of the heavy lift­ing is done by through2, which stream­i­fies the inner logic to work nicely with the rest of our gulp tool­chain. 3rd-party plu­g­ins gen­er­ally exist to take data from some point in a stream after gulp.src() and write back out before gulp.dest() is called. This is what’s called a trans­form stream.

Make sure to read Gulp’s plu­gin author­ing doc­u­men­ta­tion for fur­ther detail.

Use gulp-data-uri-stream



Great friend, meet great city


Tonight I’ll be cel­e­brat­ing the won­der­fully great news that my long­time friend Jim is tak­ing the next step in pur­suit of his dreams and mov­ing out to San Fran­cisco. That’s a pretty com­mon refrain these days, yet I can’t help myself but take this oppor­tu­nity to gush about my life­long love affair with the place I’ve only recently had occa­sion to expe­ri­ence first-hand.

My first time set­ting foot in this place I was so over­joyed that I might’ve even shed a tear or two. I was sup­posed to con­nect on an overnight red­eye, but took a day to adven­ture just a bit instead and ended up los­ing a job over it. It wouldn’t be until a few years later that I’d get to return for a proper expe­ri­ence.

Jimmy, these are like life tips, so don’t fuck ‘em up.


I won’t even try to cover every­thing, but think of this as a Cliff’s notes:

Jan­u­ary 24, 1848: Cal­i­for­nia gold rush. Gold was found by James W. Mar­shall at Sutter’s Mill in Coloma, Cal­i­for­nia. The fol­low­ing year made way to the term “forty-niners” to describe prospec­tors head­ing west in search of a new start. And in case you might think the word “rush” sounds a bit dra­matic, know that whal­ing ships like the Niantic were run aground and con­verted into a store­ship and hotel in the ser­vice of quick money. Some of that ship’s tim­bers still underly the streets of the city.

April 18, 1906: San Fran­cisco earth­quake. 3,000 peo­ple died and over 80% of San Fran­cisco was destroyed. Police dyna­mited man­sions on what is now Van Ness Ave in order to stop the REST of the city from burn­ing to the ground. Phoenix. Ashes.

May 27, 1937: The Golden Gate Bridge opens and it’s breathtaking.

1967: Sum­mer of Love. Peo­ple have sex with everyone/thing.

Novem­ber 27, 1978: George Moscone & Har­vey Milk assas­i­nated. Mur­derer Dan White was con­victed on reduced charges thanks to what was dubbed the “Twinkie defense”. Shit got cray.

Octo­ber 17, 1989: The Loma Pri­eta earth­quake hits a half-hour before game 3 of the world series at Can­dle­stick Park.


The whole inspi­ra­tion for this piece was a beau­ti­ful moment from the 49ers very last game played at Can­dle­stick Park before it being retired at the end of the 2013 sea­son. Words will do no jus­tice. Just know that the sta­dium was a story all its own and that this come-from-behind win was the classi­est send-off for a build­ing i’ve seen in recent time

My brain had melded that clip with the radio broad­cast audio from this one. It wasn’t long before I had too many other bits of trivia, and decided to go full-nuclear with a blog post. The rea­son why this is awe­some is the metaphor at the very end, which I’ll get back to later. Other notable 49ers trivia includes:

  • The Catch
  • The Catch II
  • FIVE Super Bowl cham­pi­onships includ­ing XIX on Jan­u­ary 20, 1985. Good year.

Mean­while the SF Giants were win­ning World Series in 2010 and 2012 all while putting on a clinic on being damn entertaining.

San Francisco Giants shenannigans

San Fran­cisco Giants shenannigans

That’s Brian Wil­son and yes, the beard is real. In fact he’s basi­cally sex on a pitch­ing mound:

Fear the Beard

Fear the Beard

I remem­ber in 2010 that group of dudes bring­ing a whole new level of energy to the game of baseball.



Jour­ney­man. (2007)

Quite pos­si­bly the dorki­est sec­tion of this dia­tribe, but hear me out: SF city porn. Fic­tion­al­ized his­toric events. Time Travel. If noth­ing else appre­ci­ate the beauty of the open­ing title sequence of this short-lived series I’ve gone on about many times pre­vi­ously. The music which I’ve also been in love with is by Amanda Ghost & The Rural.

Vertigo poster

I just loved Ver­tigo. There are many other films that spot­light San Fran­cisco, but none quite so peren­ni­ally. Then there’s the epic poster and title design by Saul Bass and Hitch­cock film obvi­ously. I even found a fas­ci­nat­ing arti­cle on SF then and now.

Michael Schwab Golden Gate National Parks

Speak­ing of design, there are these glo­ri­ous posters done by Michael Schwab as part of his National Parks series. The Golden Gate bridge even has it’s own CMYK sam­ple! Cyan: 0%, Magenta: 69%, Yel­low: 100%, Black: 6%.


Sour­dough bread, surely. But there are plenty of lesser-known gems that are worth the trip. Namely a bur­rito from the Mis­sion dis­trict. Fresh seafood abounds and a size­able asian pop­u­la­tion lends itself to plenty of tasty Ramen among other asian food options. Heck, even Rice-a-roni has some his­tory to it.


49 square miles

49 square miles

The num­ber 7 and it’s square 49 pop up in a cou­ple pecu­liar places. A lot of it can be attrib­uted to human con­fir­ma­tion bias, but I refuse to dis­count the awe­some­ness for that reason.

49 has it’s obvi­ous root from the year 1849 and the peo­ple that came west with the gold rush. The San Fran­cisco 49ers are named after that event not sur­pris­ingly. What’s REALLY inter­est­ing is the cor­re­la­tion of 7’s. The city of San Francisco’s penin­sula is roughly 7 miles going both north-south and east-west. Fur­ther­more one of it’s com­mon nick­names is “City of seven hills” which, the Cal­i­for­nia Acad­emy of Sci­ences pays homage to on it’s museum’s green roof in Golden Gate park. The USGS has des­ig­nated far more than just 7 notable hills, but the human psy­che loves pat­terns. Here are the most pop­u­lar seven:

  1. Nob Hill
  2. Russ­ian Hill
  3. Tele­graph Hill
  4. Rin­con Hill
  5. Twin Peaks
  6. Mount Sutro
  7. Mount David­son

If you remem­ber, I promised I’d explain the metaphor I so enjoyed by the 49ers’ KNBR radio announcer. His phrase when describ­ing the longest inter­cep­tion return for a touch­down by a line­backer in NFL his­tory was,

[Navarro Bow­man] catches a deflected pass for an inter­cep­tion and runs it seven miles for a touchdown.”

Now you should be able to truly under­stand the beauty of that sen­tence. Ken Robin­son giv­ing a valen­tine to every San Fran­cisco fan in describ­ing the most mem­o­rable play of that team’s sea­son by allud­ing to the sheer dis­tance with a ref­er­ence to their very own home city.

These are just a few of the things that come to mind when I think fondly of San Fran­cisco and now I’ll have Cal­i­for­nia on my mind for yet another rea­son. Hav­ing sent off another awe­some per­son in style is a moment I’ll not want to soon for­get. Cheers, Jimmy.

jQuery Conference San Diego

Jel­lyvi­sion was cool enough to offer to send me to San Diego for a devel­op­ment con­fer­ence last month. All I had to do in return was present what I learned to all the other engi­neers! Here are those slides:

You bet­ter believe I par­took in some In-N-Out burger and fish tacos while I was out there.

Aaaand jQuery con­fer­ence is com­ing to Chicago in Sep­tem­ber!

Class Inheritance in JavaScript

As is the case with most design pat­terns, the JS world is hardly united. Still, there are prac­ti­cal appli­ca­tions for OOP in JavaScript. This method is the result of a few days of trial and error with mul­ti­ple approaches. Unlike reg­u­lar pro­to­typal inher­i­tance, class prop­er­ties are per-instance so chang­ing one Extend­ed­Class instance prop­erty will not affect any other instances.

The exam­ple below illus­trates a min­i­mal imple­men­ta­tion, but the pat­tern can be evolved to sup­port mul­ti­ple inher­i­tance and sin­gle­tons too. My func­tion sugar—extends—is marked reserved for future use by ECMAScript5 so you if you run strict mode, just get rid of the trail­ing ‘s’ to pre­vent conflict.

Func­tion sugar

// ========= Extended Primitives =========

Function.prototype.extends = function(o) {
	var cn = this;
	this.prototype = new o;
	this.prototype.constructor = cn;

// ========= Extended Primitives =========

Sam­ple inheritance

* ParentClass
* @type Class

function ParentClass() {


ParentClass.prototype.myProp = "Parent Property";

* ExtendedClass
* @type Class

function ExtendedClass() {
	// extended properties will be static unless next line is uncommented;

// Inheritance

// Public Properties
ExtendedClass.prototype.myExtendedProp = 'Extended Property';

Extensibly Redirecting to HTTPS in Apache

I often find myself Googling apache con­fig snip­pets and now that I’m man­ag­ing a server myself, HTTPS is use­ful pretty much every­where. Here is a rewrite that will work in either .htac­cess or a vhost dec­la­ra­tion to redi­rect traf­fic to HTTPS with min­i­mal URL hard-coding.

<IfModule mod_rewrite.c>
	RewriteEngine On
	RewriteCond %{HTTPS} !=on
	RewriteRule ^/?(.*) https://%{SERVER_NAME}/$1 [R,L]

Productivity Week

Per­haps my most pro­duc­tive week of the year is the one between Christ­mas and New Years. Hav­ing just secured my snazzy new domain, I took off to get my money’s worth by set­ting up all kinds of ser­vices to make this site a com­mand cen­ter for all of my projects.

Already, I’ve configured:

  • Email (Postfix/Dovecot/Roundcube)
  • Apache
  • MySQL
  • Word­Press (with caching and security)
  • SSL (just a snakeoil cert for now)
  • URL short­ener (YOURLS)

Hope­fully I’ll remem­ber to doc­u­ment all the stuff I’ve been work­ing on to have a record to look back on.