gordonbrander

var reducible = require("reducible/reducible");
var isReduced = require("reducible/is-reduced");

function fps(desiredFps) {
  // Create a stream of times to use as an event loop with
  // https://github.com/Gozala/coreduction/blob/master/coreduction.js
  // Number -> Reducible[Float time, Float time, ...]

  // Convert seconds to milliseconds.
  var msPerFrame = 1000 / desiredFps

gordonbrander

var STATE_FILTERS = [
  function clampIndex(state, old, update) {
    return extend(state, {
      // Validate and sanitize properties.
      index: clamp(state.index, 0, state.units - 1)
    });
  },
  function calculateOffset(state, old, update) {
    return extend(state, {
      // Create calculated properties.

gordonbrander

function uid() {
  // Generate a unique and non-colliding id.
  return Math.random().toString(36).slice(2);
}

// Create unique, non-colliding ID namespace.
var __id__ = uid();

function idOf(thing) {
  return (thing && typeof(thing) === ('object' || 'function')) ?

gordonbrander

// Simple, tiny, dumb module definitions for Browser JavaScript.
//
// What it does:
//
// * Tiny enough to include anywhere. Intended as a shim for delivering
//   browser builds of your library to folks who don't want to use script loaders.
// * Exports modules to `__modules__`, a namespace on the global object.
//   This is an improvement over typical browser code, which pollutes the
//   global object.
// * Prettier and more robust than the

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?

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

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

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

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

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

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