kerrishotts

/****************************************************************************************************
 *
 * h - Simple DOM templating
 *
 * Version 0.1
 * Kerri Shotts
 * MIT License
 *
 ****************************************************************************************************/

kerrishotts

/**
 * Validates a source against the specified rules. `source` can look like this:
 *
 *     { aString: "hi", aNumber: { hi: 294.12 }, anInteger: 1944.32 }
 *
 * `rules` can look like this:
 *
 *     {
 *       "a-string": {
 *         title: "A String",     -- optional; if not supplied, key is used

kerrishotts

/**
 * Merges the supplied objects together and returns a copy containin the merged objects. The original
 * objects are untouched, and a new object is returned containing a relatively deep copy of each object.
 * 
 * Important Notes:
 *   - Items that exist in any object but not in any other will be added to the target
 *   - Should more than one item exist in the set of objects with the same key, the following rules occur:
 *     - If both types are arrays, the result is a.concat(b)
 *     - If both types are objects, the result is merge(a,b)
 *     - Otherwise the result is b (b overwrites a)

kerrishotts

var x = { 
          a: { 
               b: [ 
                    { c: 2, d: 3 },
                    { c: 3, d: 4 } 
                  ]
             }, 
          f: null
        };

kerrishotts

  /**
   *
   * Parse response header string of the form:
   *
   * "
   *     header: value
   *     another-header: value
   * "
   *
   * @param {string} headerStr    headers to parse

kerrishotts

#!/bin/bash
#
# note v0.1
# Kerri Shotts <kerrishotts@gmail.com>
#
# Add a note to a file (or default file in current directory) with an optional timestamp and other nifty features

# what version are we?
version="0.1"

kerrishotts

ch4/ex5: Responsive Flex for UI

This example demonstrates using the flexbox layout module in a responsive manner to create user interface layouts. In this example, the navigation bar is no longer pinned absolutely to the container, but rather it is a non-flexing element at the two of a vertical flex box. The scrolling container, OTH, can flex based on the remaining size of the parent.

The navigation bar is also using flex box -- there are three groups within that are positioned appropriately within. If the width of the bar is too small, the bar can expand as necessary to fit the content.

The list also uses flex box -- as you resize the view, the list items will expand, but they will also group themselves into a grid layout if they can fit. Internal to each list item is also several flex boxes. This simplifies layout dramatically.

A Pen by Kerri Shotts on CodePen.

kerrishotts

// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console

kerrishotts

/******************************************************************************
 *
 * SCROLLER
 * Author:  Kerri Shotts
 * Version: 0.1 alpha
 * License: MIT
 *
 * This library is intended to be similar to iScroll-lite in that it should be
 * a relatively fast method of scrolling content without being horribly laggy
 * or cause incorrect "clicks" to be registered. 

kerrishotts

/*jshint asi:true, forin:true, noarg:true, noempty:true, eqeqeq:false, bitwise:true, undef:true, curly:true, browser:true, devel:true, smarttabs:true, maxerr:50 */
/******************************************************************************
 *
 * UI-GESTURES
 * Author:  Kerri Shotts
 * Version: 0.1 alpha
 * License: MIT
 *
 * A simple, no-frills gesture recognizer. Permits long-press recognition,
 * horizontal swipe recognition, and vertical swipe recognition. Recognizing