Skip to content

Instantly share code, notes, and snippets.

View greypants's full-sized avatar

Dan Tello greypants

155 followers · 7 following
View GitHub Profile
@greypants
greypants / barebones.html
Created October 16, 2012 00:34
HTML: Barebones
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="no-js ie ie6 lte6 lte7 lte8 lte9"><![endif]-->
<!--[if IE 7 ]><html class="no-js ie ie7 lte7 lte8 lte9"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8 lte8 lte9"><![endif]-->
<!--[if IE 9 ]><html class="no-js ie ie9 lte9"><![endif]-->
<!--[if gt IE 9]><!--><html class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
@greypants
greypants / conditional.html
Created October 16, 2012 00:35
HTML: IE <html> tag IE conditional tags + no-js
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="no-js ie ie6 lte6 lte7 lte8 lte9"><![endif]-->
<!--[if IE 7 ]><html class="no-js ie ie7 lte7 lte8 lte9"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8 lte8 lte9"><![endif]-->
<!--[if IE 9 ]><html class="no-js ie ie9 lte9"><![endif]-->
<!--[if gt IE 9]><!--><html class="no-js"><!--<![endif]-->
@greypants
greypants / touchDesktop.js
Created October 22, 2012 19:27
JS: Touch/Desktop Event Pattern
var supports_touch = 'ontouchend' in document;
var events = {
desktop: {
start : 'mousedown',
stop : 'mouseup',
move : 'mousemove',
leave : 'mouseleave',
resize : 'resize'
},
@greypants
greypants / tbanimation.js
Created October 29, 2012 16:09
JS: Time-based animation-pattern 2
var frames = {
init: function() {
$(window).on({
'blur': frames.pause,
'focus': frames.play
});
frames.play();
},
loop: function() {
@greypants
greypants / wishlist.markdown
Created December 3, 2012 03:35
Dan's Wish List 2012
@greypants
greypants / deferJs.html
Created December 9, 2012 19:53
PageSpeed defer javascript example
<script>
// Add a script element as a child of the body
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "deferredfunctions.js";
document.body.appendChild(element);
}
// Check for browser support of event handling capability
@greypants
greypants / gist:4253097
Created December 10, 2012 20:25 — forked from madrobby/gist:4161897
CSS: Retina screen media query
@media (min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(-webkit-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi),
(min-resolution: 1.5dppx) {
/* Retina rules! */
}
@greypants
greypants / data-track.md
Created December 18, 2012 21:55
GA: data-track attribute pattern

Basic Tracking

data-track

To add basic event tracking to an element on the page, add this attribute with the appropriate values you'd like to send, separated by pipes |.

<button data-track="category|action|opt_label|opt_value|opt_noninteraction">
	Basic Tracking
</button>

Optional attributes

@greypants
greypants / placeholder.js
Created January 18, 2013 14:48
JS: Placeholder polyfill
createPlaceholders: function() {
var noPlaceholderSupport = $('html').hasClass('lte9');
if(noPlaceholderSupport) {
var createPlaceholder = function() {
var self = this;
var $this = $(this);
var isEmpty = true;
var placeholder = this.placeholder;
@greypants
greypants / jquery.placeholder.js
Created February 14, 2013 22:58
JS: Placeholder polyfill
createPlaceholders: function() {
var noPlaceholderSupport = $('html').hasClass('lte9');
if(noPlaceholderSupport) {
var createPlaceholder = function() {
var self = this;
var $this = $(this);
var isEmpty = true;
var placeholder = this.placeholder;