jacob-beltran

function getAverageColourAsRGB (img) {
  var canvas = document.createElement('canvas'),
      context = canvas.getContext && canvas.getContext('2d'),
      rgb = {r:102,g:102,b:102}, // Set a base colour as a fallback for non-compliant browsers
      pixelInterval = 5, // Rather than inspect every single pixel in the image inspect every 5th pixel
      count = 0,
      i = -4,
      data, length;

  // return the base colour for non-compliant browsers

jacob-beltran

var getAverageColor = (function(window, document, undefined){
	return function(imageURL, options}){
		options = {
			// image split into blocks of x pixels wide, 1 high
			blocksize: options.blocksize || 5,
			fallbackColor: options.fallbackColor || '#000'
		};

		var img = document.createElement('img'),
			canvas = document.createElement('canvas'),

jacob-beltran

function getAverageRGB(imgEl) {

    var blockSize = 5, // only visit every 5 pixels
        defaultRGB = {r:0,g:0,b:0}, // for non-supporting envs
        canvas = document.createElement('canvas'),
        context = canvas.getContext && canvas.getContext('2d'),
        data, width, height,
        i = -4,
        length,
        rgb = {r:0,g:0,b:0},

jacob-beltran

/*
 * Easing Functions - inspired from http://gizma.com/easing/
 * only considering the t value for the range [0, 1] => [0, 1]
 */
EasingFunctions = {
  // no easing, no acceleration
  linear: function (t) { return t },
  // accelerating from zero velocity
  easeInQuad: function (t) { return t*t },
  // decelerating to zero velocity

jacob-beltran

// Detect autoplay
// ---------------

// This script detects whether the current browser supports the
// autoplay feature for HTML5 Audio elements, and it sets the
// `AUTOPLAY` variable accordingly.

// Used in the Meteor app [PicDinner](http://picdinner.com)

jacob-beltran

/*
Passing an inline bound function (including ES6 arrow functions)
directly into a prop value is essentially passing a new 
function for each render of the parent component.
*/
render() {
  return (
    <div>
      <a onClick={ () => this.doSomething() }>Bad</a>
      <a onClick={ this.doSomething.bind( this ) }>Bad</a>

jacob-beltran

/*
Object literals or Array literals are functionally equivalent to calling
Object.create() or new Array(). This means that if object literals or
array literals are passed as prop values, React will consider these to be new
values for each render.

This is problematic mostly when dealing with Radium or inline styles.
*/

/* Bad */

jacob-beltran

/*
Sometimes a fallback value or object may be created in the render function
( or prop value ) to avoid undefined value errors. In these cases, it's best
to define the fallbacks as a constant external to the component instead of
creating a new literal.
/*

/* Bad */
render() {
  let thingys = [];

jacob-beltran

// How to propery cancel timeouts/intervals

compnentDidMount() {
 this._timeoutId = setTimeout( this.doFutureStuff, 1000 );
 this._intervalId = setInterval( this.doStuffRepeatedly, 5000 );
}
componentWillUnmount() {
 /*
    ProTip: If the operation already completed, or the value is undefinded
    these functions don't give a damn

jacob-beltran

class ScrollMonitor extends React.Component {
  constructor() {
    this.handleScrollStart = this.startWatching.bind( this );
    this.handleScrollEnd = debounce(
      this.stopWatching.bind( this ),
      100,
      { leading: false, trailing: true } );
  }

  componentDidMount() {