Miguel Angel Frías Bonfil miguelfrias

Contract Killer

The popular open-source contract for web designers and developers by Stuff & Nonsense

Originally published: 23rd December 2008
Revised date: October 8th 2015
Original post

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.

Element

Box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
elem.getClientRects(), elem.getBoundingClientRect()

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

Deploy your site with git

This gist assumes:

you have a local git repo
with an online remote repository (github / bitbucket etc)
and a cloud server (Rackspace cloud / Amazon EC2 etc)
- your (PHP) scripts are served from /var/www/html/
- your webpages are executed by apache
apache's home directory is /var/www/

How to patch Ubuntu for Heartbleed

sudo apt-get update
sudo apt-get install -y libssl1.0.0 openssl
openssl version -a and confirm the "built on" date is >= 2014-04-07
sudo lsof -n | grep ssl | grep DEL and restart all listed services.

Repeat #4 until no results are returned.

	# Backup
	docker exec CONTAINER /usr/bin/mysqldump -u root --password=root DATABASE > backup.sql

	# Restore
	cat backup.sql \| docker exec -i CONTAINER /usr/bin/mysql -u root --password=root DATABASE

	<script type="text/javascript">
	(function () {
	"use strict";
	// once cached, the css file is stored on the client forever unless
	// the URL below is changed. Any change will invalidate the cache
	var css_href = './index_files/web-fonts.css';
	// a simple event handler wrapper
	function on(el, ev, callback) {
	if (el.addEventListener) {
	el.addEventListener(ev, callback, false);

	<!doctype html>

	<!-- http://taylor.fausak.me/2015/01/27/ios-8-web-apps/ -->

	<html>
	<head>
	<title>iOS 8 web app</title>

	<!-- CONFIGURATION -->

	/jslint sloppy:true, white:true, vars:true, plusplus:true /

	var permutation = function (collection){
	var current,
	subarray,
	result = [],
	currentArray = [],
	newResultArray = [];

	if (collection.length){

	/*
	* a small mixin for easy use of rem with px as fallback
	* usage: @include x-rem(font-size, 14px)
	* usage: @include x-rem(marign, 0 12px 2 1.2)
	* usage: @include x-rem(padding, 1.5 24px)
	*
	* thanks to Eric Meyer for https://github.com/ericam/susy
	* and Hans Christian Reinl for http://drublic.de/blog/rem-fallback-sass-less/
	*/
	@mixin x-rem($property, $values) {