Thibault thibaultboursier

ES6 JavaScript Compose Function

Definition

const compose = (...fns) =>
  fns.reduceRight((prevFn, nextFn) =>
    (...args) => nextFn(prevFn(...args)),
    value => value
 );

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

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

fork_mode.js

var child_process = require('child_process');
var cpus = require('os').cpus();
var net = require('net');
var tcpSrv = net.createServer();

tcpSrv.listen(8000, function() {
    for (var i = 1; i <= cpus.length; i++) {

Observable React elements with RxJS

Note: if you want to skip history behind this, and just looking for final result see: rx-react-container

When I just started using RxJS with React, I was subscribing to observables in componentDidMount and disposing subscriptions at componentWillUnmount.

But, soon I realised that it is not fun to do all that subscriptions(that are just updating property in component state) manually, and written mixin for this...

Later I have rewritten it as "high order component" and added possibility to pass also obsarvers that will receive events from component.

	import React, {PropTypes} from 'react';
	import { debounce } from 'lodash';

	// A simple helper component, wrapping retina logic for canvas and
	// auto-resizing the canvas to fill its parent container.
	// To determine size/layout, we just use CSS on the div containing
	// the Canvas component (we're using this with flexbox, for example).
	// Expects a "paint" function that takes a "context" to draw on
	// Whenever this component updates it will call this paint function
	// to draw on the canvas. For convenience, pixel dimensions are stored

	//Some of the examples use spread syntax available via Babel in ES7 proposal.
	//Live at: https://jsbin.com/zawavekepo/edit?js,console
	//Arrays, slicing and avoiding mutations
	const numArray = [10, 20, 30, 40, 50, 60];

	const removeAtIndex = (arr, x) => {
	return [
	...arr.slice(0, x),
	...arr.slice(x + 1)
	];

	<html>
	<head>
	</head>
	<body>
	<script src="lib/yourlib.js"></script>
	<script>
	window.onload = function () {
	EntryPoint.run();
	};
	</script>

	function logClass(target: any) {

	// save a reference to the original constructor
	var original = target;

	// a utility function to generate instances of a class
	function construct(constructor, args) {
	var c : any = function () {
	return constructor.apply(this, args);
	}

	var Middleware = function() {};

	Middleware.prototype.use = function(fn) {
	var self = this;

	this.go = (function(stack) {
	return function(next) {
	stack.call(self, function() {
	fn.call(self, next.bind(self));
	});