jhafner

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

// 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

var settings = {
    foo: "",
    bar: undefined,
    hello: "world",
    baz: NaN,
    what: null,
    test: "string",
    zero: 0,
    falseVal: false
}

jhafner

Moving from jQuery

Events

// jQuery
$(document).ready(function() {
  // code
})

jhafner

#!/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

$(function(){
  $('.truncate').each(function(el){
    var $this = $(this);
    var t_size = $this.data('text-length');
    $this.succinct({
      size: t_size
    });
  });
});

jhafner

// 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

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
 
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
 
function loop() {
  clear();
  update();
  draw();

jhafner

<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

.Center-Container {
  position: relative;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;