Rhy Moore morewry

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

HTTP Streaming (or Chunked vs Store & Forward)

The standard way of understanding the HTTP protocol is via the request reply pattern. Each HTTP transaction consists of a finitely bounded HTTP request and a finitely bounded HTTP response.

However it's also possible for both parts of an HTTP 1.1 transaction to stream their possibly infinitely bounded data. The advantages is that the sender can send data that is beyond the sender's memory limit, and the receiver can act on

The following is largely based on these test results

According to DOM Level 3 Focus Event Order there is a whole slew of events to be dispatched upon change of focus. focusin and focus are the two events dispatched the first time any element of the document receives focus. After that, when focus shifts to another element, we first get focusout on the element that has focus, then focusin on the element that will receive focus, then blur on the element that just lost focus, then focus on the element that got focus.

[…]

While focusout and focusin sound like the superior choice, they are not supported in Gecko at all. Blink 449857, WebKit 140596, [Trident 1

	const $slotRendered = Symbol();
	const Slot = (props, chren) => {
	const { changed } = props;

	function onSlotchange(e) {
	const slot = e.target;
	if (slot[$slotRendered]) {
	if (changed) {
	changed(slot);
	}

	#!/bin/sh
	enter_directory(){
	if [ "$PWD" != "$PREV_PWD" ]; then
	PREV_PWD="$PWD";
	if [ -e ".nvmrc" ]; then
	nvm use;
	fi
	fi
	}

	var webpack = require('webpack');
	var HtmlWebpackPlugin = require('html-webpack-plugin');
	var path = require('path');
	var folders = {
	APP: path.resolve(__dirname, '../app'),
	BUILD: path.resolve(__dirname, '../build'),
	BOWER: path.resolve(__dirname, '../bower_components'),
	NPM: path.resolve(__dirname, '../node_modules')
	};

	# http://codepen.io/morewry/pen/pvLxPV

	# manually create touch event
	touchStartOn = (el, x = 0, y = 0) ->
	try
	e = document.createEvent('TouchEvent')
	e.initTouchEvent("touchstart", true, true)
	catch err
	try
	e = document.createEvent('UIEvent')

	import { Component } from "React";

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

	var Bar1 = base => class extends base {
	componentWillMount(){
	super.componentWillMount();
	console.log('Bar1');
	}
	};

	var Bar2 = base => class extends base {
	componentWillMount(){
	super.componentWillMount();

	/**
	* AngularJS hack - This way we can get and decorate all custom directives
	* in order to broadcast a custom directive events: $directiveAdd
	**/
	// This is where all the custom directives will be stored
	var $directives = [];
	var originalModule = angular.module;
	angular.module = function () {
	var module = originalModule.apply(this, arguments);
	var originalDirective = module.directive;