Tag Archives: JavaScript

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

NPM
https://www.npmjs.org/package/gulp-data-uri-stream

GitHub
https://github.com/wittnl/gulp-data-uri-stream

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

1
2
3
4
5
6
7
8
9
// ========= Extended Primitives =========

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

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

Sam­ple inheritance

11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/***************************************
* 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
	ParentClass.call(this);
}

// Inheritance
ExtendedClass.extends(ParentClass);

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