Michael Scott Hertzberg moimikey

@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) {

In this gist I would like to describe an idea for GraphQL subscriptions. It was inspired by conversations about subscriptions in the GraphQL slack channel and different GH issues, like #89 and #411.

Conceptual Model

At the moment GraphQL allows 2 types of queries:

query
mutation

Reference implementation also adds the third type: subscription. It does not have any semantics yet, so here I would like to propose one possible semantics interpretation and the reasoning behind it.

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

	import React, {PropTypes} from 'react';

	import firebase from 'decorators/firebase';

	@firebase({
	items: '/items',
	// or
	// items: (props) => `/${props.id}/items`,
	// items: (props) => ref.child('items'),
	})

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<div><div><p><p><span><input type="text" value=""></span></p></p></div></div>

	<script src="https://code.jquery.com/jquery.js"></script>

	'use strict';

	var React = require('react');

	var emptyFunction = require('../../jslib/emptyFunction');
	var throttle = require('lodash.throttle');

	var listening = false;

	var instances = [];

	var konamiCommand = (function(i, commands){
	function keyDown(e) {
	e.keyCode == commands[i] ? i++ : i = 0;
	if (i == commands.length) alert('KONAMI!');
	}
	window.addEventListener('keydown', keyDown);
	})(0, [38, 38, 40, 40, 37, 39, 37, 39, 66, 65]);

	/**
	* function coerce(x) {
	* return ''+x===x?(p=~~+x?r=+x:r=x):r=x
	* }
	* > undefined
	* coerce(123)
	* > 123
	* coerce('123')
	* > 123
	* coerce('apple')

	// Written by @iclanzan
	// All credit goes to him!

	// You create the reducer like this:
	// var reducer = createTimelineReducer('someName', someReducer, ['foo', 'bar']);
	// And then whenever an action of type `foo` or `bar` happens it calls `someReducer` and adds the result to the timeline.
	// Then to undo/redo you trigger an action of type `someNameUndo`/`someNameRedo`.

	var defaults = require('lodash/object/defaults');
	var capitalize = require('lodash/string/capitalize');

	import React, { Component } from 'react';
	import { createStore, combineReducers, applyMiddleware, bindActionCreators } from 'redux';
	import { provide, connect } from 'react-redux';
	import thunk from 'redux-thunk';

	const AVAILABLE_SUBREDDITS = ['apple', 'pics'];

	// ------------
	// reducers
	// ------------