Skip to content

Instantly share code, notes, and snippets.

Avatar

Gordon Brander gordonbrander

View GitHub Profile
@gordonbrander
gordonbrander / tlc.js
Created Dec 10, 2011
Tiny Little JavaScript Classes
View tlc.js
// Create a prototype bridge between two functions.
var __bridge = function(child, parent) {
function ctor() { this.constructor = child; }
ctor.prototype = parent.prototype;
child.prototype = new ctor();
return child;
};
// Merge any number of objects together.
// The first object has it's reference modified
@gordonbrander
gordonbrander / LiveCollection.js
Created Dec 27, 2011
Backbone Live Collections w/ Streaming and Automatic Duplicate Handling
View LiveCollection.js
var LiveCollection = (function (_, Backbone) {
var Collection = Backbone.Collection;
// Define a Backbone Collection handling the details of running a "live"
// collection. Live collections are expected to handle fetching their own
// data, rather than being composed from separate models.
// They typically add new models instead of resetting the collection.
// A custom add comparison makes sure that duplicate models are not
// added. End result: only new elements will be added, instead
// of redrawing the whole collection.
//
@gordonbrander
gordonbrander / decorateCtor.js
Created Jan 29, 2012
jQuery-style Instantiation: Decorate a Constructor Function to Enforce `new` and `return this`
View decorateCtor.js
// Takes a function and wraps it, making sure:
//
// * It enforces `new`
// * It returns `this`
//
// Doing this enables a jQuery coding style for object creation,
// where constructor functions become chain-able immediately after
// construction, and don't have to be called with `new`. For example:
//
// var F = decorateCtor(function (a, b, c) { ... });
@gordonbrander
gordonbrander / construct.js
Created Mar 5, 2012
construct -- an alternate way to invoke constructor functions
View construct.js
// Bind another function as the `this` context for `construct` to create
// a method that will construct the given function and return the object
// directly, enabling immediate chaining.
//
// A bound version of `construct` can be thought of as a Functor, converting data in (the function)
// to a new kind of data out (the constructed object).
//
// Before:
//
// var f = new F();
@gordonbrander
gordonbrander / ID.js
Created Mar 28, 2012
ID - a unique ID/name generator for JavaScript
View ID.js
// Generate unique IDs for use as pseudo-private/protected names.
// Similar in concept to
// <http://wiki.ecmascript.org/doku.php?id=strawman:names>.
//
// The goals of this function are twofold:
//
// * Provide a way to generate a string guaranteed to be unique when compared
// to other strings generated by this function.
// * Make the string complex enough that it is highly unlikely to be
// accidentally duplicated by hand (this is key if you're using `ID`
@gordonbrander
gordonbrander / chain.js
Created Apr 17, 2012
JavaScript Method Composition
View chain.js
// In JavaScript, we can treat `this` as an implied first argument that can be
// set via `Function.prototype.bind`, `Function.prototype.call` or
// `Function.prototype.apply`. If we treat `this` as an argument containing a
// value that should be operated on and returned, a number of benefits emerge:
//
// * All methods of an object can be easily chained, jQuery style.
// * It reduces the confusing nature of side-effects in JavaScript OOP by taking the
// implicit `this` object and treating it as an explicit data object to be
// operated on.
// * Any method of an object that returns
@gordonbrander
gordonbrander / statelessview.js
Created May 9, 2012
Potential Kicks Controller/View API
View statelessview.js
var postModels = new Models();
postModels.fetch();
postModels.on('change', function (postModels) {
$('.post').models(postModels)
.render(function (model) {
$(this)
.find('.meta .author').html(model.prop('meta.author')).end()
@gordonbrander
gordonbrander / tiny-state-machine.js
Created May 25, 2012
World's Tiniest JavaScript State Machine
View tiny-state-machine.js
var StateMachine = {
// Register valid states for this object.
__states__: {
'success': ['failure'],
'failure': ['success']
},
// Set initial state.
__state__: 'success',
@gordonbrander
gordonbrander / tomethod-toLambda.js
Created Jul 12, 2012
toMethod and toLambda - higher order helpers for codebases that use both functional and OOP styles
View tomethod-toLambda.js
// Convert a function that does not use `this` context into a function that
// does. The category of information that was previously passed as the first
// parameter of the function is now its `this` context.
function toMethod(lambda) {
return function () {
var args = [this];
var concat = args.concat;
// Spread arguments over arity of concat, since arguments is not a true array.
var combined = concat.apply(args, arguments);
return lambda.apply(null, combined);
@gordonbrander
gordonbrander / grid.less
Created Aug 31, 2012
Flexible Grid factory in Less
View grid.less
/* Creates a grid with a margins on either side of all units. To do the left-margin style of grid, change the .unit definition, subtracting 1 from the number of columns. */
@context: 740px;
@col: 40px;
@gutter: 20px;
.unit(@cols) {
@target: (@cols * @col) + (@cols * @gutter);
width: 100% * (@target / @context);
}
You can’t perform that action at this time.