Annamalai Saravanan asvny

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

This is the follow up to a post I wrote recently called From Require.js to Webpack - Party 1 (the why) which was published in my personal blog.

In that post I talked about 3 main reasons for moving from require.js to webpack:

Common JS support
NPM support
a healthy loader/plugin ecosystem.

Here I'll instead talk about some of the technical challenges that we faced during the migration. Despite the clear benefits in developer experience (DX) the setup was fairly difficult and I'd like to cover some of the challanges we faced to make the transition a bit easier.

Folder Structure

Please note

While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.

Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.

	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));
	});

	quicksort :: (Ord a) => [a] -> [a]
	quicksort [] = []
	quicksort (x:xs) =
	let smallerSorted = quicksort (filter (<=x) xs)
	biggerSorted = quicksort (filter (>x) xs)
	in smallerSorted ++ [x] ++ biggerSorted

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

	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
	// ------------

	# npm publish with goodies
	# prerequisites:
	# `npm install -g trash conventional-recommended-bump conventional-changelog conventional-github-releaser conventional-commits-detector json`
	# `np` with optional argument `patch`/`minor`/`major`/`<version>`
	# defaults to conventional-recommended-bump
	# and optional argument preset `angular`/ `jquery` ...
	# defaults to conventional-commits-detector
	np() {
	travis status --no-interactive &&
	trash node_modules &>/dev/null;

	/* bling.js */
	window.$ = document.querySelector.bind(document);
	window.$$ = document.querySelectorAll.bind(document);
	Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
	NodeList.prototype.__proto__ = Array.prototype;
	NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };

	'use strict';

	/**
	* Created by Alexander Litvinov
	* Email: [email protected]
	* May be freely distributed under the MIT license
	*/

	let singleton = Symbol();
	let singletonEnforcer = Symbol();