Daniel P. Shannon phyllisstein

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

I recently got a new Macbook Pro and wanted to document how I setup my PHP environment. I like full control of how PHP is built and I usually build it from source. I do this because I often add custom extensions and modules not found in the common PHP OSX installers. If your looking for a easier method than building from source try https://php-osx.liip.ch/.

NOTE: This post assumes you are running a fresh install of MacOS Sierra 10.12.16 with System Integrity Protection disabled. If you don't know how to disable it just boot into recovery mode and open a terminal and type csrutil disable, or google search it :) This post also assumes you are using Zsh instead of Bash shell. If you are using Bash you can replace anytime you see ~/.zshrc with ~/.bashrc.

First lets get some of the prerequisites. Start by grabbing the command line tools neccessary:

xcode-select --install

Enable macOS Server Performance Mode

Performance mode changes the system parameters of your Mac. These changes take better advantage of your hardware for demanding server applications.

A Mac with macOS Server that needs to run high-performance services can turn on performance mode to dedicate additional system resources for server applications. Note, however, that performance mode can be enabled even without macOS Server being installed to achieve similar benifits for other high-performance services.

sudo nvram boot-args="serverperfmode=1 $(nvram boot-args 2>/dev/null | cut -f 2-)"
sudo reboot

Reference: https://support.apple.com/en-us/HT202528.

	# This script comes from Pry Everywhere by Luca Pette
	# http://lucapette.com/pry/pry-everywhere/

	# https://github.com/carlhuda/bundler/issues/183#issuecomment-1149953
	if defined?(::Bundler)
	global_gemset = ENV['GEM_PATH'].split(':').grep(/ruby.*@global/).first
	if global_gemset
	all_global_gem_paths = Dir.glob("#{global_gemset}/gems/*")
	all_global_gem_paths.each do \|p\|
	gem_path = "#{p}/lib"

	# generate your private key, put the public key on the server you will be connecting to
	ssh-keygen -t rsa -f ./my_key

	# generate the password/secret you will store encrypted in the .travis.yml and use to encrypt your private key
	cat /dev/urandom \| head -c 10000 \| openssl sha1 > ./secret

	# encrypt your private key using your secret password
	openssl aes-256-cbc -pass "file:./secret" -in ./my_key -out ./my_key.enc -a

	# download your Travis-CI public key via the API. eg: https://api.travis-ci.org/repos/travis-ci/travis-ci/key

	/* http://meyerweb.com/eric/tools/css/reset/
	v2.0-modified \| 20110126
	License: none (public domain)
	*/

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,

	.col-ab > * { } // Two columns, 50%-50%
	.col-ab_ > * { } // Two columns, 33%-66%
	.col-a_b > * { } // Two columns, 66%-33%
	.col-abc > * { } // Three columns, 33%-33%-33%
	.col-a_bc > * { } // Three columns, 50%-25%-25%
	.col-a_b_c > * { } // Three columns, 37.5%-37.5%-25%

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

	import mySaga from 'mySaga';
	import { take, fork, cancel } from 'redux-saga/effects';

	const sagas = [mySaga];

	export const CANCEL_SAGAS_HMR = 'CANCEL_SAGAS_HMR';

	function createAbortableSaga (saga) {
	if (process.env.NODE_ENV === 'development') {
	return function* main () {

	import express from 'express';
	import React from 'react';
	import ReactDOMServer from 'react-dom/server';
	import App from './components/App';
	import {flushServerSideRequires} from 'react-loadable';

	let app = express();

	let webpackStats = require('./output-webpack-stats.json');