gordonbrander

// 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

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

// 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

// 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

// 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

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

var StateMachine = {
  // Register valid states for this object.
  __states__: {
    'success': ['failure'],
    'failure': ['success']
  },

  // Set initial state.
  __state__: 'success',

gordonbrander

// 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

/* 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);
}

gordonbrander

Preparation

• Print a copy of wireframes to use as paper prototypes
• Sharpie marker

Tip: You can use Photo Booth or iMovie to record video/audio from your Mac.

What is the job-to-be-done for this script?