Kanitkorn Sujautra lukyth

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.

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

@kangax's ES6 quiz, explained

@kangax created a new interesting quiz, this time devoted to ES6 (aka ES2015). I found this quiz very interesting and quite hard (made myself 3 mistakes on first pass).

Here we go with the explanations:

Question 1:

(function(x, f = () =&gt; x) {

Service Worker - offline support for the web

Progressive apps - high-res icon, splash screen, no URL bar, etc.

Progressive Web Apps: Escaping Tabs Without Losing Our Soul

	// Future versions of Hyper may add additional config options,
	// which will not automatically be merged into this file.
	// See https://hyper.is#cfg for all currently supported options.

	module.exports = {
	config: {
	// default font size in pixels for all tabs
	fontSize: 14,

	// font family with optional fallbacks

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Building a router</title>
	<script>
	// Put John's template engine code here...

	(function () {
	// A hash to store our routes:

	function mapValues(obj, fn) {
	return Object.keys(obj).reduce((result, key) => {
	result[key] = fn(obj[key], key);
	return result;
	}, {});
	}

	function pick(obj, fn) {
	return Object.keys(obj).reduce((result, key) => {
	if (fn(obj[key])) {

	JedWatson/classnames (2650855 dls, 1465 stars)
	yannickcr/eslint-plugin-react (2077066 dls, 710 stars)
	rackt/react-router (1833204 dls, 9050 stars)
	facebook/react-dom (782024 dls, 33044 stars)
	gaearon/react-hot-loader (708042 dls, 3250 stars)
	rackt/redux (568969 dls, 10743 stars)
	rackt/react-redux (495498 dls, 1509 stars)
	jsdf/coffee-react-transform (463488 dls, 380 stars)
	JedWatson/react-input-autosize (455277 dls, 107 stars)
	reflux/reflux (393281 dls, 4316 stars)

	#!/bin/sh

	# Tap required repos
	brew tap blackfireio/blackfire
	brew tap caskroom/cask
	brew tap caskroom/versions
	brew tap homebrew/dupes
	brew tap homebrew/fuse
	brew tap homebrew/php
	brew tap homebrew/versions


	zshrc () {
	exec zsh -l
	}

	s () {
	subl "$1"
	}

	cyberd () {