Keyan Zhang keyz

Virtual DOM and diffing algorithm

There was a [great article][1] about how react implements it's virtual DOM. There are some really interesting ideas in there but they are deeply buried in the implementation of the React framework.

However, it's possible to implement just the virtual DOM and diff algorithm on it's own as a set of independent modules.

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

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.

Installing V8 on a Mac

Prerequisites

Install Xcode (Avaliable on the Mac App Store)
Install Xcode Command Line Tools (Preferences > Downloads)
Install depot_tools
- $ git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git
- $ nano ~/.zshrc
- Add path=('/path/to/depot_tools' $path)

Reduce boilerplate in Redux

Create actions similar to Flummox.
Generate action ids.
Supports actions with decorators, promises, and therefore ES7 async.

This is an auth example (WIP)

react + redux + RR

It uses https://gist.github.com/iNikNik/3c1b870f63dc0de67c38 for stores and actions.

1) create redux

const redux = createRedux(state);

2) get requireAccess func => bindCheckAuth to redux

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

	#!/usr/bin/ruby
	# Create display override file to force Mac OS X to use RGB mode for Display
	# see http://embdev.net/topic/284710

	require 'base64'

	data=`ioreg -l -d0 -w 0 -r -c AppleDisplay`

	edids=data.scan(/IODisplayEDID.*?<([a-z0-9]+)>/i).flatten
	vendorids=data.scan(/DisplayVendorID.*?([0-9]+)/i).flatten

	/**
	* Fancy ID generator that creates 20-character string identifiers with the following properties:
	*
	* 1. They're based on timestamp so that they sort after any existing ids.
	* 2. They contain 72-bits of random data after the timestamp so that IDs won't collide with other clients' IDs.
	* 3. They sort lexicographically (so the timestamp is converted to characters that will sort properly).
	* 4. They're monotonically increasing. Even if you generate more than one in the same timestamp, the
	* latter ones will sort after the former ones. We do this by using the previous random bits
	* but "incrementing" them by 1 (only in the case of a timestamp collision).
	*/

	import { Component } from "React";

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

	import Data.List

	data Prog = Assign Name Expr
	\| If Expr Prog Prog
	\| While Expr Prog
	\| Seqn [Prog]
	deriving Show
	data Expr = Val Int \| Var Name \| App Op Expr Expr
	deriving Show
	type Name = Char