Skip to content

Instantly share code, notes, and snippets.

View jhafner's full-sized avatar

James Hafner jhafner

17 followers · 12 following
View GitHub Profile
@jhafner
jhafner / jquery-to-vanilla-js.md
Created December 16, 2013 17:52 — forked from harmstyler/moving_from_jquery.md
jQuery methods in vanilla JavaScript.

Moving from jQuery

Events

// jQuery
$(document).ready(function() {
  // code
})
@jhafner
jhafner / _color_functions.sass
Created October 25, 2016 16:47
Sass functions for accessible text contrast.
// Power utility to calculate exponents
@function pow($number, $exponent) {
$value: 1;
@if $exponent > 0 {
@for $i from 1 through $exponent {
$value: $value * $number;
}
} @else if $exponent < 0 {
@jhafner
jhafner / bgnoise.css
Created May 30, 2013 15:48
Pure CSS Background Noise
body {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCb
@jhafner
jhafner / js-selecting-that-doesnt-suck.js
Last active February 6, 2018 18:54
3 lines of code, that make writing pure JS so much quicker. Borrowed mostly from http://jsfiddle.net/leaverou/hRz8K/embedded/result,js/
function $(id) { return document.getElementById(id); }
function $c(class) { return document.getElementsByClassName(class); }
function $t(tag, container) { return (container || document).getElementsByTagName(tag); }
function $$(expr, container) { return (container || document).querySelectorAll(expr); }
@jhafner
jhafner / prefetch.html
Created June 5, 2013 14:46
HTML5 DNS Prefetching and Link Prefetching/Prerendering. Source: http://daker.me/2013/05/5-html5-features-you-need-to-know.html
<!--
DNS hostname resolution is one of the issues that can make any website slow. Modern browsers start to be very smart when it comes to DNS resolution, they try to resolve domain names then cache them before the user tries to follow any link on the webpage.
With the dns-prefetch feature you are allowed to manually control this operation by telling the browser which domain names to resolve
-->
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//google-analytics.com">
<link rel="dns-prefetch" href="//www.google-analytics.com">
<link rel="dns-prefetch" href="//platform.twitter.com">
@jhafner
jhafner / fontStacks.css
Created May 30, 2013 15:34
List of modern font stacks.
/* Times New Roman-based serif */
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
/* A modern Georgia-based serif */
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
/*A more traditional Garamond-based serif */
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
/*The Helvetica/Arial-based sans serif */
@jhafner
jhafner / mediaQueries.css
Created May 30, 2013 15:33
General list of media queries.
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}
@jhafner
jhafner / git-open.sh
Created May 16, 2013 15:55
Open the current repo on Github. Script by Brian Edgerton.
#!/bin/bash
git_host='git@github.com:'
git_url='https://github.com/'
remote=`git config --get remote.origin.url`
host=${remote:0:15}
if [ $host = $git_host ]
then
url=${remote/$git_host/$git_url}
@jhafner
jhafner / vCenter.css
Created May 30, 2013 15:36
Vertically center inline content.
.container {
min-height: 6.5em;
display: table-cell;
vertical-align: middle;
}
@jhafner
jhafner / gradients.css
Created May 30, 2013 15:37
CSS3 Gradients Template.
#colorbox {
background: #629721;
background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721));
background-image: -webkit-linear-gradient(top, #83b842, #629721);
background-image: -moz-linear-gradient(top, #83b842, #629721);
background-image: -ms-linear-gradient(top, #83b842, #629721);
background-image: -o-linear-gradient(top, #83b842, #629721);
background-image: linear-gradient(top, #83b842, #629721);
}