Mike Heavers heaversm

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

How to set up Gulp with an ExpressionEngine project

I freaking love working with technologies like Grunt and Gulp, and wanted to share how to get my current EE front-end workflow set up. With a few tweaks, this can also be used with virtually any other sites (I've used it with Laravel, static sites, Craft, etc).

Install Node.js

If Node is not yet installed on the machine, it will need to be installed

Install Gulp (if needed)

This is no longer a bug. I'm keeping the gist for historical reasons, as it helped to get it fixed. Make sure to read the notes by the end of the post.

How to remove hide the select arrow in Firefox using `-moz-appearance:none;`

TL;DR (or, the fix)

Set -moz-appearance to none. This will "reset" the styling of the element;
Set text-indent to 0.01px. This will "push" the text a tiny bit^[1] to the right;

Google Drive File Picker Example

This is an example of how to use the Google Drive file picker and Google Drive API to retrieve files from Google Drive using pure JavaScript. At the time of writing (14th July 2013), Google have good examples for using these two APIs separately, but no documentation on using them together.

Note that this is just sample code, designed to be concise to demonstrate the API. In a production environment, you should include more error handling.

See a demo at http://stuff.dan.cx/js/filepicker/google/

Change default Mac OS X PHP to MAMP's PHP Installation and Install Composer Package Management

Instructions to Change PHP Installation

First, Lets find out what version of PHP we're running (To find out if it's the default version).

To do that, Within the terminal, Fire this command:

which php

##Create an alias to MAMP's PHP installation

To do this, we can simply create an alias for our bash profile. We'll be doing this is nano, though you can do it in vim or a number of other editors as well.

Within the terminal, run:

nano ~/.bash_profile

This will open nano with the contents, at the top in a blank line add the following line:


	var five = require("johnny-five")
	// or "./lib/johnny-five" when running from the source
	var express = require('express');
	var app = express();

	var value = 0;


	// Add headers

	// === Arrays

	var [a, b] = [1, 2];
	console.log(a, b);
	//=> 1 2


	// Use from functions, only select from pattern
	var foo = () => [1, 2, 3];

	/**
	* A linear interpolator for hexadecimal colors
	* @param {String} a
	* @param {String} b
	* @param {Number} amount
	* @example
	* // returns #7F7F7F
	* lerpColor('#000000', '#ffffff', 0.5)
	* @returns {String}
	*/

	# useful for running ssl server on localhost
	# which in turn is useful for working with WebSocket Secure (wss)

	# copied from http://www.piware.de/2011/01/creating-an-https-server-in-python/