Skip to content
Web app boilerplate and helper functions
JavaScript HTML CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

A launch pad for your web app

An abstraction of commonalities i've discovered in web apps i've built. Includes DDS, FatUI, and DOM-Builder via Bower.

Simple helper functions

  • Easily loop through any collection with h.each() and
  • Get element(s) by css selector with h.qs() and h.qsa()
  • Add and remove event listeners with h.on() and
var taskList = h.qs('#tasks');
h.each(h.qsa('li', taskList), function(li) {
    var checkbox = h.qs('input[type=checkbox]', li);
    h.on(checkbox, 'click', function taskComplete() {, 'click', taskComplete);

Complete localStorage + JSON wrapper

Easily store data in the form of an object, array, boolean, string, or number. The storage object has the following available methods:

  • get
  • set
  • has
  • remove
  • clear

Set data:

storage.set('taskListTitle', 'My ToDos');
storage.set('taskList', tasks);

And later (even after browser refresh), retrieve the data:

var taskListTitle = storage.get('taskListTitle');
var tasks = storage.get('taskList') || [];

Easily render data to the DOM with DOM-Builder

First create an element renderer:

function renderTask(task) {
    return DOM.buildNode({ el: 'li', kid: task.title });

Then you can use the renderer to render elements to the DOM. For example, when the user adds a new entry via a form we can use the prependAInB() function to put it at the top of our task list:

on(qs('#newTaskForm'), submit, function newEntryHandler(event) {
    var taskData = {this.title, done: false};
    h.prependAInB(renderTask(taskData), taskList);
    tasks.push(taskData);'taskList', tasks);

Or, you can use the renderMultiple() function to render multiple elements to the DOM efficiently in one go. For example, on page load:

h.renderMultiple(tasks, renderTask, taskList);
Something went wrong with that request. Please try again.