brianbroken

app.directive('backButton', function(){
    return {
      restrict: 'A',

      link: function(scope, element, attrs) {
        element.bind('click', goBack);

        function goBack() {
          history.back();
          scope.$apply();

brianbroken

jQuery Notes

---

Tools
http://jqueryui.com/
http://www.jshint.com/

1 What is jQuery?

brianbroken

Using Git

Global Settings

Related Setup: https://gist.github.com/hofmannsven/6814278

Related Pro Tips: https://ochronus.com/git-tips-from-the-trenches/

brianbroken

@import compass

$icons: sprite-map("icons/*.png")
$icons-hd: sprite-map("icons-hd/*.png")

i
  background: $icons
  display: inline-block
  @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)
    background: $icons-hd

brianbroken

Using SCSS

• Website: http://sass-lang.com/
• Docs: http://sass-lang.com/guide
• Tutorial: https://www.codecademy.com/learn/learn-sass

Global Setup

brianbroken

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

brianbroken

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

brianbroken

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

brianbroken

ul.list-pipes {
    margin: 0px 0px 10px 0px; 

    li {
        font-size: 12px;
		display: inline-block;
    }

    li + li::before {
        content: " | ";

brianbroken

$('ul li a.active').prepend('<span class="activeSpan">Test - </span>');
$('ul li a').click(function(){
    var activeSpan = $('.activeSpan').remove();
    $(this).prepend(activeSpan);
});