Skip to content

Instantly share code, notes, and snippets.

@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/
View js-selecting-that-doesnt-suck.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 / _color_functions.sass
Created October 25, 2016 16:47
Sass functions for accessible text contrast.
View _color_functions.sass
// 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 / removeEmptyElements.js
Last active August 29, 2015 13:59
Remove null, undefined, NaN, and empty strings from an object.
View removeEmptyElements.js
var settings = {
foo: "",
bar: undefined,
hello: "world",
baz: NaN,
what: null,
test: "string",
zero: 0,
falseVal: false
}
@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.
View jquery-to-vanilla-js.md

Moving from jQuery

Events

// jQuery
$(document).ready(function() {
  // code
})
View fresh-chrome.sh
#!/usr/bin/env bash
# fresh-chrome
#
# Use this script on OS X to launch a new instance of Google Chrome
# with its own empty cache, cookies, and user configuration.
#
# The first time you run this script, it will launch a new Google
# Chrome instance with a permanent user-data directory, which you can
# customize below. Perform any initial setup you want to keep on every
@jhafner
jhafner / succinct-usage.js
Created September 18, 2013 18:20
A tiny jQuery plugin for truncating multiple lines of text.
View succinct-usage.js
$(function(){
$('.truncate').each(function(el){
var $this = $(this);
var t_size = $this.data('text-length');
$this.succinct({
size: t_size
});
});
});
View icons.scss
// For adding icons to elements using CSS pseudo-elements
// Source: http://jaydenseric.dev/blog/fun-with-sass-and-font-icons
@mixin icon($position: 'before', $styles: true, $icon: false) {
// Either a :before or :after pseudo-element, defaulting to :before
&:#{$position} {
@if $icon {
// Icon has been specified
content: match($icons, $icon);
}
@if $styles {
@jhafner
jhafner / canvas-boilerplate.js
Created August 23, 2013 22:38
Canvas (2D) Boilerplate
View canvas-boilerplate.js
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
function loop() {
clear();
update();
draw();
@jhafner
jhafner / mobile-form.html
Created August 19, 2013 15:47
Describes HTML5 Attributes for Forms on Mobile Devices
View mobile-form.html
<form id="mobile-form">
<input type="tel" /> <!-- Displays number pad -->
<input type="text" pattern="\d*" novalidate /> <!-- Displays number pad on text fields -->
<input type="email" autocapitalize="off" /> <!-- Displays email input, disables auto-capitalization -->
<input type="text" autocorrect="off" /> <!-- Disables autocorrect -->
</form>
@jhafner
jhafner / absolute-centering.css
Created August 19, 2013 14:06
Absolute centering of elements with CSS. Advantages: Cross-browser (including IE8-10) No special markup, minimal styles Responsive with percentages and min-/max- Use one class to center any content Centered regardless of padding (without box-sizing!) Blocks can easily be resized Works great on images Caveats: Height must be declared Recommend se…
View absolute-centering.css
.Center-Container {
position: relative;
}
.Absolute-Center {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;