Zander Martineau mrmartineau

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

Learning FP the hard way: Experiences on the Elm language

by Ossi Hanhinen, @ohanhi

with the support of Futurice 💚.

Licensed under CC BY 4.0.

Editorial note

Hi Nicholas,

I saw you tweet about JSX yesterday. It seemed like the discussion devolved pretty quickly but I wanted to share our experience over the last year. I understand your concerns. I've made similar remarks about JSX. When we started using it Planning Center, I led the charge to write React without it. I don't imagine I'd have much to say that you haven't considered but, if it's helpful, here's a pattern that changed my opinion:

The idea that "React is the V in MVC" is disingenuous. It's a good pitch but, for many of us, it feels like in invitation to repeat our history of coupled views. In practice, React is the V and the C. Dan Abramov describes the division as Smart and Dumb Components. At our office, we call them stateless and container components (view-controllers if we're Flux). The idea is pretty simple: components can't

	/**
	*
	* Paste image class / identifier in IIFE parenthesis at end of function
	*
	* */

	(function(i){"use strict";var img=$(i),sizes=[];window.addEventListener("resize",()=>{var vw=Math.round(((img.offsetWidth*100)/window.innerWidth))+"vw",mq="(min-width: "+window.innerWidth+"px)",value=vw;vw!=="0vw"&&sizes.indexOf(vw)===-1&&(sizes.push(value),console.log(mq,vw))})})("PASTE CLASS OR IDENTIFIER HERE");

	#!/usr/bin/env bash

	# A basic Self Signed SSL Certificate utility
	# by Andrea Giammarchi @WebReflection

	# https://www.webreflection.co.uk/blog/2015/08/08/bringing-ssl-to-your-private-network

	# # to make it executable and use it
	# $ chmod +x certificate
	# $ ./certificate # to read the how-to

	define(function() {

	var cssomPrefixes = 'Moz O ms Webkit'.split(' ');
	var modElem = {
	elem: document.createElement('modernizr')
	};
	var mStyle = {
	style: modElem.elem.style
	};

	mocha 44731
	chai 17944
	grunt 17447
	should 11882
	grunt-contrib-jshint 11466
	gulp 8619
	istanbul 7374
	tape 7313
	sinon 6851
	grunt-contrib-clean 6807

	import gulp from 'gulp';
	import { argv as args } from 'yargs';
	import browserSync from 'browser-sync';
	import del from 'del';
	import path from 'path';
	import assign from 'lodash.assign';
	import configRaw from './gulp.config';
	const config = configRaw();
	import gulpPlugins from 'gulp-load-plugins';
	const $ = gulpPlugins({lazy: true});

	<?php

	// Detect our key devices
	$iPod = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
	$iPhone = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
	$iPad = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");
	$Android = stripos($_SERVER['HTTP_USER_AGENT'],"Android");

	// if iPad or iPhone, add a deep link to launch the Instagram iOS App
	if( $iPod \|\| $iPhone ){ ?>

	(function() {

	// see code in action: https://jsfiddle.net/desaroxx/jp4pmd2u/

	/* Configuration variables */
	var MAX_COLOR = 200; // Max value for a color component
	var MIN_COLOR = 120; // Min value for a color component
	var FILL_CHANCE = 0.5; // Chance of a square being filled [0, 1]
	var SQUARE = 80; // Size of a grid square in pixels
	var GRID = 5; // Number of squares width and height