Stanislav Sysoev d4rkr00t

state-machine-component

A tiny (265 byte) utility to create state machine components using two pure functions.

Usage

The API is a single function that accepts 2 pure functions as arguments:

Cheat sheet for callable entities in ES6

Value:

	FD	FE	AF	C	M
Function-callable	✓	✓	✓	×	✓
Constructor-callable	✓	✓	×	✓	×
Prototype	`F.p`	`F.p`	`F.p`	SC	`F.p`
Property `prototype`	✓	✓	×	✓	×

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

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

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.

	import * as React from 'react';

	const useIsFirstRender = (): boolean => {
	const isFirst = React.useRef(true);

	if (isFirst.current) {
	isFirst.current = false;

	return true;
	} else {

	function getDomDepthLevel(root = document.documentElement) {
	let pathInfo = {
	route: [],
	level: 0
	};
	for (let i = 0, j = root.children.length; i < j; i++) {
	const curNodePathInfo = getDomDepthLevel(root.children[i]);
	if (curNodePathInfo.level > pathInfo.level) {
	pathInfo = curNodePathInfo;
	}


	A list of languages which compile to JS (Elm, Purescript, OCaml)
	(Inspired by this thread: https://groups.google.com/forum/#!topic/elm-discuss/Um7WIBTq9xU)
	They all support curry calling convention by default.

	Some interesting results:

	1. `min` is curried function, only OCaml(BuckleScript) managed to optimize this overhead.
	2. All optimize the self tail call
	3. Only BuckleScript and PureScript type-specialized comparison functoin (>=) and inlined

	// UPD:
	// Now available as npm module!
	// Check out https://github.com/RReverser/better-log for details.

	console.log = (function (log, inspect) {
	return function () {
	return log.apply(this, Array.prototype.map.call(arguments, function (arg) {
	return inspect(arg, { depth: 1, colors: true });
	}));
	};