thebuilder

/**
* Offset the anchor tag
*/
a.anchor{
	display: block;
	position: relative;
	top: -20px;
	visibility: hidden;
}

thebuilder

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

thebuilder

Libraries

• 960 Grid System - An effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
• Compass - Open source CSS Authoring Framework.
• Bootstrap - Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
• Font Awesome - The iconic font designed for Bootstrap.
• Zurb Foundation - Framework for writing responsive web sites.
• SASS - CSS extension language which allows variables, mixins and rules nesting.
• Skeleton - Boilerplate for responsive, mobile-friendly development.

Guides

thebuilder

Libraries

• jQuery - The de-facto library for the modern age. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
• Backbone - Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
• AngularJS - Conventions based MVC framework for HTML5 apps.
• Underscore - Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects.
• lawnchair - Key/value store adapter for indexdb, localStorage

thebuilder

//Find angular.module definition. $2 contains the modules defined. Append with replacing like:
// $1$2,\n		require('newModule')$3
/(angular.module\(.+\[)(.*)(\]\))/g

//Capture all methods called on the angular module. Allows you to append to it. with $&
/(?:angular.module\(.+\))(\s+\..+\))+/g

thebuilder

input[type="search"] {
  background: url("../img/search.svg") no-repeat right center;
  border-right: 8px solid transparent; //Hack to offset background icon
}

thebuilder

RegExp: /[^-\w \.]/i
pattern: [^-\w \.]

thebuilder

if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
	var msViewportStyle = document.createElement("style");
	msViewportStyle.appendChild(document.createTextNode("@-ms-viewport{width:auto!important}"));
	document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}

thebuilder

<meta property="og:title" content=""/>
<meta property="og:type" content="website"/>
<meta property="og:image" content=""/>
<meta property="og:url" content=""/>
<meta property="og:description" content=""/>

thebuilder

function loadImage(file) {
	img = new Image();
	img.onload = e => drawImageToCanvas();
	img.onerror = e => $log.warn('Failed to load image.');

	fileReader = new FileReader();
	fileReader.onload = e => img.src = e.target.result;
	fileReader.onerror = e => $log.warn('Failed to load file.');
	fileReader.readAsDataURL(file);
}