Street Cred

• SDSU
• Taught Myself to Code
• EdgeCast / Verizon
  • Network monitoring UI
• LinkedIn
  • Messenger

CSS

Cascading Stlye Sheets

Normalize.css

CSS Reset vs normalize

CSS PREPROCESSORS

Things they do

• Auto add browser prefixes
• Programming in CSS
• Ability to extend CSS classes
• DRY out your CSS
• Make CSS a lot more manageable

sass

/* SASS */
$black: #000;

#header {
  color: $black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

/* CSS */ 
#header {
  color: #000;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

SASS

CSS

#header {
  color: #6c94be;
}

#footer {
  background-color: #5B83AD;
  color: #e0e0e0;
}

.another-element {
  background-color: #e0e0e0;
  color: #5B83AD;
}

$dark-grey: #e0e0e0;
$nice-blue: #5B83AD;
$light-blue: @nice-blue + #111;

#header {
  color: $light-blue;
}

#footer {
  background-color: $nice-blue;
  color: $dark-grey;
}

.another-element {
  background-color: $dark-grey;
  color: $nice-blue;
}

Variable$

SASS

CSS

#header {
  color: #6c94be;
}

/* variables.scss */

$dark-grey: #e0e0e0;
$nice-blue: #5B83AD;
$light-blue: $nice-blue + #111;

Importing

/* landing-page.scss */

@import "variables"

#header {
  color: $light-blue;
}

less

/* CSS */ 
#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

/* LESS */
@black: #000;

#header {
  color: $black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

http://winless.org/online-less-compiler

LESS

CSS

#header {
  color: #6c94be;
}

#footer {
  background-color: #5B83AD;
  color: #e0e0e0;
}

.another-element {
  background-color: #e0e0e0;
  color: #5B83AD;
}

@dark-grey: #e0e0e0;
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
  color: @light-blue;
}

#footer {
  background-color: @nice-blue;
  color: @dark-grey;
}

.another-element {
  background-color: @dark-grey;
  color: @nice-blue;
}

V@riables

LESS

CSS

#header {
  color: #6c94be;
}

/* variables.less */

@dark-grey: #e0e0e0;
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

Importing

/* landing-page.less */

@import "variables"

#header {
  color: @light-blue;
}

CSS FRAMEWORKS

Things they do Well:

• Reusable boilerplate UI elements
• Quick prototyping
• Don't reinvent the wheel
• Grid system
• Improve UI/UX consistency
• Good documentation

Things they do Poorly:

• Force you into conventions
  • (    This can be good and bad)
• Bloat
• Can be a crutch
• New version upgrades are never easy

Bootstrap

• First released by Twitter
• The most popular CSS framework

FoundAtion

• Released by ZURB

Differences are mostly stylistic

JavaScript

Libraries and Frameworks

Libraries Vs Frameworks

Library

Framework

• Simplifies JavaScript
• ToolKit
• Improves cross browser compatibility 

• Simplifies architecture
• Gives structure
• Enforces Conventions

• Quantcast Top 1 million sites: 78% use jQuery
• Simplifies accessing the DOM
• Simplifies JavaScript
• Improves cross-browser JS inconsistencies

* Quantcast jQuery Statistics

JavaScript Utility Belt

Frameworks

* For many of the next slides, it is assumed that you have previously installed node.js

+ More on Node.js

• One of the Older MVC
• Heavy Leverage of jQuery
• Heavy Leverage of Events
• Lightweight toolset
• More like a library
• No 2-way data binding out of the box
• Developer Freedom

• 2-way data binding
• Extends HTML
  • Web Components, now
• Expressive HTML
  • Highly readable
  • Logic split between HTML/JS (con)
• Performance prone at scale
• Concepts can be tricky

+ More on Angular

• 2-way data binding
• Powerful router
• Simple component structure
• Computed property API
• Ember Data
  • Steep Learning Curve
  • Getters and Setters make development difficult
• Cryptic errors / hard to debug

• Verbose JS (Virtual DOM)
  • Hard for junior devs
• Known for performance
• Conforms Developers to Structure
• Easy to write Virtual DOM tests

Generators

Yeomen

• Grunt Generator
  • One of the first JS build tools
  • Configuration based

npm install -g grunt-cli bower yo && 
npm install -g generator-karma && 
npm install -g generator-angular && 
mkdir my-angular-app && cd $_ &&
yo angular my-angular-app

1 Liner Yeomen install + angular setup

Slush

• Gulp Generator
  • "New kid on the block"
  • JS script based

npm install -g slush && 
npm install -g slush-angular && 
mkdir my-slush-angular-app && cd $_ &&
slush angular

+ More on Gulp.js

1 Liner Slush install + angular setup