Bresson bresson

The introduction to Reactive Programming you've been missing

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

BrowserSync with webpack

Tested under webpack-dev-server 1.7.0.

Clone this gist
npm install
npm start
Visit http://localhost:8080 (or http://192.168.x.x:8080) on multiple devices
Edit entry.js and hit save

The 0.13.0 improvements to React Components are often framed as "es6 classes" but being able to use the new class syntax isn't really the big change. The main thing of note in 0.13 is that React Components are no longer special objects that need to be created using a specific method (createClass()). One of the benefits of this change is that you can use the es6 class syntax, but also tons of other patterns work as well!

Below are a few examples creating React components that all work as expected using a bunch of JS object creation patterns (https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/ch4.md#mixins). All of the examples are of stateful components, and so need to delegate to React.Component for setState(), but if you have stateless components each patterns tends to get even simpler. The one major caveat with react components is that you need to assign props and context to the component instance otherwise the component will be static. The reason is

React Reusable Component Factory

'use strict';

const ENTER_KEY = 13;

const emailFactory = function ({
  React,
  setEmail,

	// hasClass, takes two params: element and classname
	function hasClass(el, cls) {
	return el.className && new RegExp("(\\s\|^)" + cls + "(\\s\|$)").test(el.className);
	}


	/* use like below */
	// Check if an element has class "foo"
	if (hasClass(element, "foo")) {

	/*
	UPDATE July 2016 , moved and updated to here: https://github.com/Sumbera/gLayers.Leaflet

	Generic Canvas Overlay for leaflet,
	Stanislav Sumbera, April , 2014

	- added userDrawFunc that is called when Canvas need to be redrawn
	- added few useful params fro userDrawFunc callback
	- fixed resize map bug
	inspired & portions taken from : https://github.com/Leaflet/Leaflet.heat

	// Created by Max Luster (@maxluster)
	// Usage instructions at https://bugsnag.com/blog/responsive-typography-with-chained-media-queries
	// Requires SASS >= 3.3
	// Enhanced by Breakpoint 2.4.x and Compass 1.0 (alpha)
	// For SASS 3.2.x support, use https://gist.github.com/maxluster/c9ecc6e4a6770e507c2c

	// Provides a simplified syntax for chaining media queries across named or numeric breakpoints
	@mixin responsive($properties, $default-value, $responsive-values){

	// No named breakpoints by default

	/**
	* World's simplest express server
	* - used to serve index.html from /public
	*/

	var express = require('express');
	var serveStatic = require('serve-static');
	var app = express();

	app.use(serveStatic(__dirname + '/public'));

	// fade out

	function fade(el) {
	var op = 1;
	var timer = setInterval(function () {
	if (op <= 0.1){
	clearInterval(timer);
	el.style.display = 'none';
	}
	el.style.opacity = op;