Eugen F eugenf

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

#Migrating from homebrew-php to phpbrew

After installing phpbrew it's time to install a set of chosen PHP versions. My picks at the time of this writing were:

sudo phpbrew install php-5.5.0 +default+dbs+mb+apxs2=/usr/sbin/apxs
sudo phpbrew install php-5.4.17 +default+dbs+mb+apxs2=/usr/sbin/apxs
sudo phpbrew install php-5.3.27 +default+dbs+mb+apxs2=/usr/sbin/apxs

When not sure where apxs is located on your system, whereis apxs is quite chatty.

Share Counts

I have always struggled with getting all the various share buttons from Facebook, Twitter, Google Plus, Pinterest, etc to align correctly and to not look like a tacky explosion of buttons. Seeing a number of sites rolling their own share buttons with counts, for example The Next Web I decided to look into the various APIs on how to simply return the share count.

If you want to roll up all of these into a single jQuery plugin check out Sharrre

Many of these API calls and methods are undocumented, so anticipate that they will change in the future. Also, if you are planning on rolling these out across a site I would recommend creating a simple endpoint that periodically caches results from all of the APIs so that you are not overloading the services will requests.

Twitter

Mac web developer apps

This gist's comment stream is a collection of webdev apps for OS X. Feel free to add links to apps you like, just make sure you add some context to what it does — either from the creator's website or your own thoughts.

— Erik

	// GF method: http://www.gravityhelp.com/documentation/gravity-forms/extending-gravity-forms/hooks/filters/gform_init_scripts_footer/
	add_filter( 'gform_init_scripts_footer', '__return_true' );

	// solution to move remaining JS from https://bjornjohansen.no/load-gravity-forms-js-in-footer
	add_filter( 'gform_cdata_open', 'wrap_gform_cdata_open' );
	function wrap_gform_cdata_open( $content = '' ) {
	$content = 'document.addEventListener( "DOMContentLoaded", function() { ';
	return $content;
	}
	add_filter( 'gform_cdata_close', 'wrap_gform_cdata_close' );

	/**
	* Optimize WooCommerce Scripts
	* Remove WooCommerce Generator tag, styles, and scripts from non WooCommerce pages.
	*/
	add_action( 'wp_enqueue_scripts', 'child_manage_woocommerce_styles', 99 );

	function child_manage_woocommerce_styles() {
	//remove generator meta tag
	remove_action( 'wp_head', array( $GLOBALS['woocommerce'], 'generator' ) );

	#!/usr/bin/env bash

	# fresh-chrome
	#
	# Use this script on OS X to launch a new instance of Google Chrome
	# with its own empty cache, cookies, and user configuration.
	#
	# The first time you run this script, it will launch a new Google
	# Chrome instance with a permanent user-data directory, which you can
	# customize below. Perform any initial setup you want to keep on every

	@font-face {
	font-family: 'EntypoRegular';
	src: url('font/entypo.eot');
	src: url('font/entypo.eot?#iefix') format('embedded-opentype'),
	url('font/entypo.woff') format('woff'),
	url('font/entypo.ttf') format('truetype'),
	url('font/entypo.svg#EntypoRegular') format('svg');
	font-weight: normal;
	font-style: normal;
	}

	<?xml version="1.0"?>
	<layout>
	<default>
	<!--Root/Default Layouts-->
	<reference name="root">
	<!--Appending Block-->
	<block type="page/html_breadcrumbs" name="breadcrumbs" as="breadcrumbs"/>
	</reference>

	<!--CSS and JS Files-->