gordonbrander

import multimethod from './multimethod.js'

const foo = multimethod(x => typeof x)
foo.string = x => 'called string method'
foo.number = x => 'called number method'

foo('x')
// 'called string method'

foo(1)

gordonbrander

HTML in 5 min

The gist

• HTML is just plain text.
• You write it in any text editor. Be careful, though! Programs like Microsoft Word will trick you. They look like plain text, but they are not. I suggest using something like TextWrangler. It saves plain text, but also helpfully color-codes your code.
• You save HTML in a text file, but instead of giving it a .txt extension, you give it a .html.

Tags

gordonbrander

• Asymco: Hollywood by the numbers. IN-DEPTH
• The Critical Path 20: Below the (belt)line. Explores Hollywood financials.
• The Critical Path 21: Negative Costs. Dan and Horace take on the way income from movies is distributed and why no movies ever make money.
• The Critical Path 71: Bingewatch.
• The Critical Path 80: Functional Structure. What is a functional organization and why is that a thing of beauty? What do Pixar and Apple have in common? EXCELLENT
• Horace hypothesizes that apps will become the new distribution mechanism for entertainment. INSIGHTFUL

In one Critical Path episode (can't remember which), Horace posits that Hollywood is like a distributed functional organization:

• Workers are organized by specialty (acting,

gordonbrander

// Create a spring object.
export const Spring = (curr, prev, dest, stiffness, damping) => ({
  curr,                // The current position of spring 
  prev,                // The position of spring at previous tick
  dest,                // The destination of spring
  stiffness,           // How hard it springs back
  damping,             // Friction. 1.0 means no bounce.
});

// Given numbers, calculate the next position for a spring.

gordonbrander

export const Spring = (x, y, mass, stiffness, viscosity) => ({
  prevX: x,
  prevY: y, 
  currX: x,
  currY: y,
  mass, stiffness, viscosity
});

Spring.copy = (spring) => ({
  prevX: spring.prevX,

gordonbrander

export const $$ = (selector) => document.querySelector(selector);
export const $ = (selector) => document.querySelectorAll(selector);

// Apply a side effect to `n` items.
export const sets = (f, n, ...rest) => {
  for (var i = 0; i < n.length; i++) f(n[i], ...rest);
}

export const toggleClass = (el, classname, isAdding) =>
  isAdding ? el.classList.add(classname) : el.classList.remove(classname);

gordonbrander

// A message bus. Dispatches messages to `receive` in order (FIFO).
const Bus = (receive) => {
  var isDraining = false;
  const queue = [];

  // Define a function to send a message to the queue.
  const send = (msg) => {
    queue.push(msg);
    // If we're not already draining the queue, start draining.
    // We only want to kick this loop off once, since send can be called

gordonbrander

export const progress = (t, start, end) =>
  t < start ? 0 :
  t > end ? 1 :
  (t / (end - start));

export const tween = (start, end, step, state, t) =>
  step(state, progress(t, start, end));

export const event = (time, step, state, t) =>
  t < time ? step(state, 0) : step(state, 1);

gordonbrander

/*
Automatically namespace all CSS selectors.
Eliminates most problems with style leak

    .active {}

...becomes

    .button-active {}
*/

gordonbrander

// Create a finite state switching function.
// Given a list of states, returns a function that will take a `prev` state
// and `next` state and will only advance state to `next` if it is one of
// the defined states.
const states = (...states) => (prev, next) =>
  states.indexOf(next) !== -1 ? next : prev;