Skip to content

Instantly share code, notes, and snippets.

@alvinsj
alvinsj / advanced-react-free.md
Last active December 4, 2017 09:25
Review of the videos from Advanced React (Free version)

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,

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(

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:

var p1, p2, tp1;
// p1 is original promise
p1 = new Promise(function(resolve, reject){
setTimeout(function(){
console.log('+ resolve to hello');
resolve("hello");
}, 1000)
});
/** @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
alvinsj / deep-assign.weird.js
Last active September 4, 2015 08:59
deep-assign (with weird mode)
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
alvinsj / sneakySwift-currying.swift
Last active August 29, 2015 14:21
Sneaky Swift
func add(x: Int) (_ y: Int) -> Int{
return x + y;
}
add(1)(2); // 3
{
"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
alvinsj / gist:6967159d05eff2c66a82
Last active August 29, 2015 14:07
chrome-cli reload all 'localhost:3000'
chrome-cli list links \
| grep localhost:3000 \
| sed -E "s/\\[([0-9]+:)?(.*)\\](.*)/\\2/" \
| xargs -L1 chrome-cli reload -t
#!/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 # ?