ridgehkr’s gists

ridgehkr / zepto-yepnope_with-fallback.coffee

Last active December 16, 2015 07:09

Using yepnope in CoffeeScript to test for Zepto compatibility with a fallback to jQuery

	yepnope [
	{
	# if IE, we need jQuery. Otherwise, Zepto will do just fine
	test: '__proto__' of {}
	yep: '//cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js'
	nope: '//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js'
	complete: ->
	# use local jQuery fallback if neither Zepto nor jQuery loaded
	!Zepto? and !window.jQuery? and yepnope('js/libs/jquery-1.9.1.min.js')
	}

ridgehkr / kill_compatibility_mode.html

Created May 7, 2013 13:17

Use this code in your document head to disable Compatibility Mode in IE 9 and older while still getting IE version classes. Anything that comes before the meta tag disabling Compatibility Mode will in turn cause IE to ignore that meta directive. Conditional comments around the opening body tag gets around this problem, so that's what I've done i…

	<!DOCTYPE html>
	<html lang='en' class='no-js'>
	<head>
	<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>

	<!-- title, other meta, style, and script tags follow here -->
	<!-- if you need detection for >= IE10, use my script here: https://gist.github.com/ridgehkr/5985810 -->
	</head>
	<!--[if IE 7]> <body class="ie7 lt-ie9 lt-ie8"> <![endif]-->
	<!--[if IE 8]> <body class="ie8 lt-ie9"> <![endif]-->

ridgehkr / text_legibility.css

Created May 9, 2013 20:48

Improving text legibility in supported browsers

	body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;

	/*
	if text looks weak, use this as well:
	-webkit-text-stroke: 0.35px;
	*/
	}

ridgehkr / fix_iOS_rotation.coffee

Created May 17, 2013 19:25

correct a screen-zoom issue on rotation in iOS - rewritten in CoffeeScript // by @mathias, @cheeaun and @jdalton // modified by @jpamental and @ridgehkr

	((doc)->
	addEvent = 'addEventListener'
	type = 'gesturestart'
	qsa = 'querySelectorAll'
	scales = [1, 1]
	meta = if qsa of doc then doc[qsa]('meta[name=viewport]') else []

	fix = ->
	meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1]
	doc.removeEventListener(type, fix, true)

ridgehkr / ios_scale_fix.css

Created May 17, 2013 19:28

Fix an orientation scale bug in iOS. MUST come last in your CSS // ht @jpamental

	/* Make sure this is last - helps correct for an orientation scale bug in iOS */
	@media screen and (orientation:landscape) and (device-width:320px) and (device-height: 480px) {
	body {
	width: 480px;
	}
	}

ridgehkr / responsive_video_embed.scss

Created June 6, 2013 20:21

Use this SASS class to make your video embeds responsive.

	.video-embed {
	position: relative;
	padding-bottom: 56.25%; // a 16x9 video's height is 56.25% of its width
	height: 0;
	object, embed, iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

ridgehkr / spaced_grid.scss

Created June 12, 2013 19:17

Grid of evenly-spaced items using text-align: justify. No need to set spacing in between columns! Changing grid item width and bottom margin is the only thing you need to tweak inside your media queries to redefine columns-per-row for different breakpoints.

	// container for evenly-spaced grid items
	.l-spaced-grid {
	text-align: justify;
	font-size: 0;
	&:after {
	content: '';
	display: inline-block;
	width: 100%;
	}
	}

ridgehkr / detect_ie_version.coffee

Last active December 19, 2015 16:39

Detect IE versions in JS without conditional compliation. If there's a match, then the IE version class is added to the html tag.

	test_version = 10 # which version of IE to test for
	isIE10 = document.documentMode? and document.documentMode == test_version

	if isIE10 then document.documentElement.className += ' ie10'

ridgehkr / bugherd-nonblocking.html

Last active December 22, 2015 00:38

Non-blocking BugHerd script. Replace your synchronous BugHerd script with this one to speed up your page up-front load time. Also a bit simpler than the code BugHerd gives you.

	<!-- replace XXXXXX with the Project Key BugHerd gives you in their version of this script -->
	<script>window._bugHerd\|\|document.write('<script src="//www.bugherd.com/sidebarv2.js?apikey=XXXXXX"><\/script>')</script>

ridgehkr / detect_ie_version.js

Created August 31, 2013 13:38

Detect the user's IE version and add that class to the html tag. JS version of https://gist.github.com/ridgehkr/5985810

	var isIE8, test_version;
	test_version = 8;
	isIE8 = (document.documentMode != null) && document.documentMode === test_version;
	if (isIE8) {
	return document.documentElement.className += ' ie8';
	}

Caleb Pierce ridgehkr