alvinsj

https://courses.reacttraining.com/courses/advanced-react-free

1. Imperative vs. Declarative, "extending" React
   Making use of react lifecycle to make declarative API (from imperative lib). non-dom, nothing-to-render component. e.g. <Sound />, <Tone />, <D3 />

   • nice: declarative > imperative.
   • maybe? component tree with non-DOM component. e.g. sound(LifeCycleComponent, {isPlaying, pitch, frequency})

2. Implicit State with Compound Components and cloneElement
   Making use of React.Children.map to inject props to children,

alvinsj

import React from 'react';
import FormWithLayout from 'react-form-with-layout';
import {formInputsSerialize} from 'form-input-serialize';

const Form = (props) => {
    const layout = (builder) => {
        const {layout, section} = builder;
        const col = (type, ...children) => builder.col(`col-${type}`, ...children);

        return layout(

alvinsj

Keybase proof

I hereby claim:

• I am alvinsj on github.
• I am alvinsj (https://keybase.io/alvinsj) on keybase.
• I have a public key whose fingerprint is B995 753B 6198 B0ED 48B6 B762 E0B0 9456 C027 0707

To claim this, I am signing this object:

alvinsj

var p1, p2, tp1;

// p1 is original promise
p1 = new Promise(function(resolve, reject){
  setTimeout(function(){
    console.log('+ resolve to hello');
    resolve("hello");
  }, 1000)
});

alvinsj

/** @jsx React.DOM */

// NOTE: This file is formatted for React.js + Browserify
// You might need to make some changes to use it without Browserify

var MousetrapMixin,

    Mousetrap = require('br-mousetrap');

MousetrapMixin = {

alvinsj

var deepAssignFactory = function(weirdMode){
    return function deepAssign(){
        var objs = Array.prototype.slice.apply(arguments);

        return objs.reduce(function(exObj, curObj){
            if(Object.keys(curObj).length == 0) return exObj;

            // merge whatever in curObj to exObj
            return mergeSecondObjectToFirst(exObj, curObj)
            

alvinsj

func add(x: Int) (_ y: Int) -> Int{
    return x + y;
}
add(1)(2); // 3

alvinsj

{
  "name": "my-app",
  "version": "0.0.0",
  "dependencies": {
    "browserify": "~2.36.1",
    "less": "~1.5.1"
  },
  "devDependencies": {
    "watchify": "~0.4.1",
    "catw": "~0.2.0"

alvinsj

chrome-cli list links \
        | grep localhost:3000 \
        | sed -E "s/\\[([0-9]+:)?(.*)\\](.*)/\\2/" \
        | xargs -L1 chrome-cli reload -t

alvinsj

#!/bin/env ruby

# lazy hack from Robert Klemme

module Memory
  # sizes are guessed, I was too lazy to look
  # them up and then they are also platform
  # dependent
  REF_SIZE = 4 # ?
  OBJ_OVERHEAD = 4 # ?