How To Be A Web UI Developer Casey West Wednesday, June 5, 13 * Welcome * WhiteHat - Hiring

This is a Crash Course @caseywest Wednesday, June 5, 13 * We'll Cover a Lot * We'll leave some things out. * Overview of projects to glue together

HTML5 Boilerplate html5boilerplate.com @caseywest Wednesday, June 5, 13 * http://www.initializr.com/ - Bootstrap capable * Starter HTML

Boilerplate Initializer www.initializr.com @caseywest Wednesday, June 5, 13 * http://www.initializr.com/ - Bootstrap capable * Starter HTML

@caseywest Wednesday, June 5, 13 I like Twitter's bootstrap: more later. Pick a style and Download it!

@caseywest Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.

body { padding-top: 60px; padding-bottom: 40px; } @caseywest HTML Header Wednesday, June 5, 13 * Legacy IE support for CSS. * Responsive * Modernizr

Modernizr modernizr.com @caseywest Respond.js github.com/scottjehl/Respond Wednesday, June 5, 13 * Modernizr: JS that detects HTML5 and CSS3 features in Browser. Runs tests on browser * Respond.js: Fast polyfill for min/max-width media queries in browser. * Modernizr Polyfills: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

@caseywest Modernizr Classes Wednesday, June 5, 13 * Legacy IE support for CSS. * Responsive * Modernizr

@caseywest Navigation Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.

@caseywest Content Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.

window.jQuery || document.write('<script src="js/vendor/ jquery-1.9.1.min.js"><\/script>')

Mimosa @caseywest Wednesday, June 5, 13 * We'll Cover a Lot * We'll leave some things out. * Overview of projects to glue together

# Install node and npm if needed. shell> brew install npm shell> npm install -g mimosa shell> cd crit.do shell> mimosa config @caseywest Install Mimosa Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.

exports.config = { watch: sourceDir: "src" compiledDir: "public" javascriptDir: "js" exclude: [ /[/\\](\.|~)[^/\\]+$/, /tests/ ] server: defaultServer: enabled: true onePager: true views: path: '.' } @caseywest mimosa-config.coffee Wednesday, June 5, 13 Mimosa config. Here's what we get for free from Mimosa: * Optimization and minification of JavaScript and CSS. * A webserver. * Live reload of the page for any changes to HTML, JavaScript, and CSS. * Compilers for meta languages like Jade (HTML), SASS and LESS (CSS), and CoffeeScript (JavaScript)

@caseywest Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.

@caseywest Wednesday, June 5, 13 File Structure for mimosa

shell> mimosa watch --server \ --optimize --minify shell> open http://127.1:3000 @caseywest Run Mimosa Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.

@caseywest Wednesday, June 5, 13 File Structure for mimosa

body { padding-top: 60px; padding-bottom: 40px; } @caseywest Refactor CSS Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.

@import "bootstrap.min.css"; @import "bootstrap-responsive.min.css"; @media (min-width: 979px) { body { padding-top: 60px; padding-bottom: 40px; } } @caseywest Refactor CSS Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.

Stylus learnboost.github.io/stylus @caseywest Wednesday, June 5, 13 Expressive, dynamic, robust CSS

@import "bootstrap.min.css" @import "bootstrap-responsive.min.css" @media (min-width: 979px) body padding-top 60px padding-bottom 40px @caseywest main.styl Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.

jQuery jquery.com plugins.jquery.com jqueryui.com @caseywest Wednesday, June 5, 13 jQuery is a given. * http://plugins.jquery.com/ * AJAX * DOM Manipulation * UI Effects * Event Handling * Style Manipulation * JqueryUI * http://jqueryui.com/ * Drag/Drop, Sortables

Bower bower.io sindresorhus.com/ bower-components @caseywest Wednesday, June 5, 13 * We'll Cover a Lot * We'll leave some things out. * Overview of projects to glue together

shell> npm install -g bower shell> echo '{"directory": "src/js/vendor/bower"}' > .bowerrc shell> bower init shell> bower install requirejs @caseywest Install Bower Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.

Require requirejs.org @caseywest Wednesday, June 5, 13 Module loading for JavaScript

window.jQuery || document.write('<script src="js/vendor/ jquery-1.9.1.min.js"><\/script>')

requirejs.config({ baseUrl: '/js', paths: { "jquery": "vendor/jquery-1.9.1.min", "bootstrap": "vendor/bootstrap.min" }, shim: { bootstrap: ["jquery"] }, enforceDefine: true }); requirejs( ['jquery', 'bootstrap'], function($, Bootstrap) { $(function() { // onLoad }) }); @caseywest main.js Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.

CoffeeScript coffeescript.org @caseywest Wednesday, June 5, 13 Expressive, dynamic, robust CSS

requirejs.config baseUrl: '/js' paths: jquery: 'vendor/jquery-1.9.1.min' bootstrap: 'vendor/bootstrap.min' shim: bootstrap: ['jquery'] enforceDefine: true requirejs ['jquery', 'bootstrap'], ($, Bootstrap) -> $ -> console.log "loaded" @caseywest main.coffee Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.

Backbone backbonejs.org @caseywest Wednesday, June 5, 13 * MVC(ollections) * Backbone.localStore * http://documentup.com/jeromegn/backbone.localStorage

shell> bower install underscore shell> bower install backbone shell> bower install backbone.localStorage @caseywest Install Backbone Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.

requirejs.config baseUrl: '/js' paths: jquery: 'vendor/jquery-1.9.1.min' bootstrap: 'vendor/bootstrap.min' underscore: 'vendor/bower/underscore/underscore-min' backbone: 'vendor/bower/backbone/backbone-min' 'backbone.localstore': '.../backbone.localStorage-min' shim: bootstrap: ['jquery'] backbone: ['underscore', 'jquery'] enforceDefine: true @caseywest Backbone and Require Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.

requirejs ['jquery', 'bootstrap', 'backbone', 'app/TodoRouter'], ($, Bootstrap, Backbone, TodoRouter) -> # TodoRouter handles itself. Backbone.history.start pushState: true @caseywest Backbone and Require Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.

define ['backbone', 'app/TodoCollection', 'app/TodoListView'], (Backbone, TodoCollection, TodoListView) -> TodoRouter = Backbone.Router.extend routes: index: 'index' '.*': 'index' router = new TodoRouter router.on 'route:index', -> listView = new TodoListView collection: TodoCollection listView.render() router @caseywest TodoRouter.coffee Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.

define ['backbone'], (Backbone) -> window.Backbone.View.extend el: '#todo-list' render: -> self = this this.collection.each (todo) -> self.$el.append "

#{todo.get 'content'}

" @caseywest TodoListView.coffee Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.

define ['backbone', 'backbone.localstore'], (Backbone) -> TodoCollection = Backbone.Collection.extend localStorage: new Backbone.LocalStorage "Todos" new TodoCollection @caseywest TodoCollection.coffee Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.

Underscore underscorejs.org @caseywest Wednesday, June 5, 13 Utility belt library that holds up Backbone.

// JavaScript var width = _.reduce( $('.tabs').get(), 0, function(total,tab) { return $(tab).outerWidth(true) + total; } ); # CoffeeScript width = _.reduce $('.tabs').get(), 0, (total,tab)-> $(tab).outerWidth(true) + total @caseywest Powerful Wins Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.

var doubleYourMoney = _.map( [1.00, 2.00], function(money) { return money * 2 } ); @caseywest Powerful Wins Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.

this.collection.each (todo) -> self.$el.append "

#{todo.get 'content'}

" @caseywest Powerful Wins Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.

Moment momentjs.com @caseywest Wednesday, June 5, 13 Date Manipulation in JS parsing, validating, manipulating, and formatting. Localized timeago()

Bootstrap twitter.github.io/bootstrap @caseywest Wednesday, June 5, 13 * Simplified Style * Bootstrap Responsive * Style on any device

Font-Awesome fortawesome.github.io/Font-Awesome @caseywest Wednesday, June 5, 13 Scalable vector icons that can be styled with CSS.

Mocha visionmedia.github.io/mocha @caseywest Wednesday, June 5, 13 JS testing framework. BDD describe(), it(), before(), after(), etc.

PhantomJS phantomjs.org @caseywest Wednesday, June 5, 13 headless browser for testing automation, screen capture, page automation, network monitorying

Thank you. @caseywest Wednesday, June 5, 13 * We'll Cover a Lot * We'll leave some things out. * Overview of projects to glue together