RickWong

const App = ({name}) => {
    return (
        <h1>Hello {name}</h1>
    );
};

ReactDOM.render(<App name="World" />, document.getElementById("App"));

col

Setup Dokku instance on Digital Ocean

Step 1 - Create a Droplet

1. Goto https://www.digitalocean.com
2. Create Droplet
3. Choose 'One Click App' - 'Dokku 0.4.7 14.04'
4. Choose size (I chose the $10 option)
5. No additional requirements
6. Setup an SSH Key

futurefabric

// Example code from http://futurefabric.co.uk/mooooooving 
// Based on the work of Dave Whyte — http://beesandbombs.tumblr.com


int[][] result;
float t;

void setup() {
  setup_();

paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

kittenlane

//* http://gasolicious.com/remove-tabs-keep-product-description-woocommerce/
//  Location: add to functions.php
//  Output: removes woocommerce tabs

remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );

Vestride

Encoding Video

Installing

Install FFmpeg with homebrew. You'll need to install it with a couple flags for webm and the AAC audio codec.

brew install ffmpeg --with-libvpx --with-libvorbis --with-fdk-aac --with-opus

voter101

'use strict'

var gulp, sass, babelify, browserify, watchify, source, util;

gulp       = require('gulp');
sass       = require('gulp-sass');
babelify   = require('babelify')
browserify = require('browserify');
watchify   = require('watchify');
source     = require('vinyl-source-stream');

gist:da235a8ff7bc821a27cc

// copyrite dw

int[][] result;
float t, c;

float ease(float p) {
  return 3*p*p - 2*p*p*p;
}

float ease(float p, float g) {

danawoodman

WebSockets + Reflux + React

Using WebSockets, React and Reflux together can be a beautiful thing, but the intial setup can be a bit of a pain. The below examples attempt to offer one (arguably enjoyable) way to use these tools together.

Overview

This trifect works well if you think of things like so:

1. Reflux Store: The store fetches, updates and persists data. A store can be a list of items or a single item. Most of the times you reach for this.state in react should instead live within stores. Stores can listen to other stores as well as to events being fired.
2. Reflux Actions: Actions are triggered by components when the component wants to change the state of the store. A store listens to actions and can listen to more than one set of actions.

sebmarkbage

import { Component } from "React";

export var Enhance = ComposedComponent => class extends Component {
  constructor() {
    this.state = { data: null };
  }
  componentDidMount() {
    this.setState({ data: 'Hello' });
  }
  render() {