Vince Speelman VinSpee

## gist:9856884
module.exports = function(grunt) {

	// Configuration
	grunt.initConfig({
		pkg: grunt.file.readJSON('package.json'),
		shell: {
			patternlab: {
				command: "php core/builder.php -gp"
			}
        	},

## SassMeister-input-HTML.html
<div class="tester"></div>
<div class="tester2"></div>
<div class="tester3"></div>

## gulpfile.js
///
var pkg = require("./package.json")
  , rimraf = require("rimraf")
  , gulp = require("gulp")
  , gutil = require("gulp-util")
  , filter = require("gulp-filter")
  , plumber = require("gulp-plumber")
  , concat = require("gulp-concat")

gulp.task("clean", function() {

## rangeslider.html
<!DOCTYPE html>
<html>
<head>
    <title>Customized range slider, pure CSS</title>
    <style>
        body {
            background: #f8f8f8;
        }
        .slider {
            width: 302px;

## ActionTypes.js
export const LOGIN_REQUEST = 'LOGIN_REQUEST';
export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
export const LOGIN_FAILURE = 'LOGIN_FAILURE';
export const LOGOUT        = 'LOGOUT';

## reactjs_componentapi_cheatsheet.md

      
              3 files
            
          
              4 forks
            
          
              0 comments
            
          
              25 stars
            
          
                spoike
                / reactjs_componentapi_cheatsheet.md
            
            
              Created
              May 13, 2014 07:51
            
              
                React JS Cheatsheets for Component API, Specifications and Lifecycle
              
          
    ReactJS Component Cheatsheet

To create a ReactComponent:
ReactComponent React.createClass(object proto)

Basic JSX example:
var TitleComponent = React.createClass({

// REQUIRED

  
## VideoProgressSlider.js
/**
 * @flow
 */

import VisuallyHidden from "@reach/visually-hidden";
import instyle from "instyle";
import * as React from "react";
import { Focus } from "react-events/focus";
import { Drag } from "react-events/drag";
import { Press } from "react-events/press";

## react-native-web_v0.x.x.js
// @flow
// flow-typed signature: aa279642a4cb992a390fedc5acdc896d
// flow-typed version: react-native_v0.5.0/flow_v0.65.0

type RNW$Dimension = {| fontScale: number, height: number, scale: number, width: number |};
type RNW$DimensionsObject = {| window: RNW$Dimension, screen: RNW$Dimension |};

type RNW$StyleObject = { [key: string]: * };
type RNW$Style = mixed;
type RNW$Styles = RNW$StyleObject | RNW$Style | Array<RNW$Styles>;

## [1] superSuit.js
// Our currying wrapper.
function superSuit (a) {
  return function (b) {
    return 'I can now ' + b + ' like ' + a + '.';
  }
}

// Get the suit ready.
var ironman = superSuit('Iron Man');

## joy-of-composition.md

      
              1 file
            
          
              0 forks
            
          
              17 comments
            
          
              94 stars
            
          
                ohanhi
                / joy-of-composition.md
            
            
              Last active
              February 3, 2021 18:14
            
              
                The Joy of Composition - Why stateless rendering is pure bliss
              
          
    This is a proposal for a lightning talk at the Reactive 2015 conference.
NOTE: If you like this, star ⭐ the Gist - the amount of stars decides whether it makes the cut!
The Joy of Composition

Why stateless rendering is pure bliss

React just got stateless components,
meaning that they are in essence pure functions for rendering. Pure functions make it dead simple - even fun - to refactor your views
	module.exports = function(grunt) {

	// Configuration
	grunt.initConfig({
	pkg: grunt.file.readJSON('package.json'),
	shell: {
	patternlab: {
	command: "php core/builder.php -gp"
	}
	},
	<div class="tester"></div>
	<div class="tester2"></div>
	<div class="tester3"></div>
	///
	var pkg = require("./package.json")
	, rimraf = require("rimraf")
	, gulp = require("gulp")
	, gutil = require("gulp-util")
	, filter = require("gulp-filter")
	, plumber = require("gulp-plumber")
	, concat = require("gulp-concat")

	gulp.task("clean", function() {
	<!DOCTYPE html>
	<html>
	<head>
	<title>Customized range slider, pure CSS</title>
	<style>
	body {
	background: #f8f8f8;
	}
	.slider {
	width: 302px;
	export const LOGIN_REQUEST = 'LOGIN_REQUEST';
	export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
	export const LOGIN_FAILURE = 'LOGIN_FAILURE';
	export const LOGOUT = 'LOGOUT';
	/**
	* @flow
	*/

	import VisuallyHidden from "@reach/visually-hidden";
	import instyle from "instyle";
	import * as React from "react";
	import { Focus } from "react-events/focus";
	import { Drag } from "react-events/drag";
	import { Press } from "react-events/press";
	// @flow
	// flow-typed signature: aa279642a4cb992a390fedc5acdc896d
	// flow-typed version: react-native_v0.5.0/flow_v0.65.0

	type RNW$Dimension = {\| fontScale: number, height: number, scale: number, width: number \|};
	type RNW$DimensionsObject = {\| window: RNW$Dimension, screen: RNW$Dimension \|};

	type RNW$StyleObject = { [key: string]: * };
	type RNW$Style = mixed;
	type RNW$Styles = RNW$StyleObject \| RNW$Style \| Array<RNW$Styles>;
	// Our currying wrapper.
	function superSuit (a) {
	return function (b) {
	return 'I can now ' + b + ' like ' + a + '.';
	}
	}

	// Get the suit ready.
	var ironman = superSuit('Iron Man');