jonathantneal

Handy GIT ZSH shortcuts

Here are some handy git shortcuts I use with oh-my-zsh to both speed up and protect my workflow.

All merges are handled without a fast-forward. All merges use the default messaging. Whenever possible, autocompletion is provided.

gmto

Merges the current branch into another branch and prompts you to automatically push changes.

jonathantneal

// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console

jonathantneal

/* Gulpfile
   ========================================================================== */

/* Plugins
   -------------------------------------------------------------------------- */

var
del          = require( 'del' ),
gulp         = require( 'gulp' ),

jonathantneal

[aria-hidden="false"]:not(:active):not(:focus) {
	clip: rect(0 0 0 0);
	position: absolute;
}

jonathantneal

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

/// @alias font
/// @access public
/// @author Jonathan Neal
/// @group helpers
/// Define many font and text styles in one line.

jonathantneal

font

Define many font and text styles in one line.

.basic-usage {
	@include font( light condensed center italic slashed-zero uppercase underline 2em 1.5 500 "Helvetica Neue" "Helvetica" sans-serif );
}

jonathantneal

Fonts

These are the actual fonts commonly represented by generic font families like serif and sans-serif on the web.

| serif | sans-serif | monospace | cursive | fantasy --- | --- | --- | --- | --- | --- Windows | Times New Roman | Arial | Courier New | Comic Sans MS | Arial Macintosh | Times | Helvetica | Courier | Apple Chancery | Papyrus Linux | DejaVu Serif | DejaVu Sans | DejaVu Sans Mono | DejaVu Sans | DejaVu Sans

jonathantneal

(function () {
	// cache Array filter
	var filter = Array.prototype.filter || function (callback) {
		for (var index = 0, array = []; index < this.length; ++index) {
			if (callback(this[index], index)) {
				array.push(this[index]);
			}
		}

		return array;

jonathantneal

Element Queries via CSS CMQ

In this example, we use the W3C CSS Custom Media Queries syntax to simulate element queries.

First, we create an element in HTML:

<div class="my-component"></div>

jonathantneal

document.addEventListener('input', function (event) {
	var target = event.target;
	var labels = target && target.labels;

	if (labels) {
		var attribute = 'data-filled';
		var isFilled = target.value;
		var index = -1;
		var label;