Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How to be a Web UI Developer

How to be a Web UI Developer

YAPC::NA 2013, Austin TX

Casey West

June 05, 2013
Tweet

More Decks by Casey West

Other Decks in Programming

Transcript

  1. How To Be A Web UI Developer Casey West Wednesday,

    June 5, 13 * Welcome * WhiteHat - Hiring
  2. 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
  3. <!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8

    lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/bootstrap.min.css"> <style> body { padding-top: 60px; padding-bottom: 40px; } </style> <link rel="stylesheet" href="css/bootstrap-responsive.min.css"> <link rel="stylesheet" href="css/main.css"> <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script> </head> <body> @caseywest HTML Header Wednesday, June 5, 13 * Legacy IE support for CSS. * Responsive * Modernizr
  4. 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
  5. <!-- From this... --> <html class="no-js"> <!-- To this... -->

    <html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths" style=""> @caseywest Modernizr Classes Wednesday, June 5, 13 * Legacy IE support for CSS. * Responsive * Modernizr
  6. <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="btn

    btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="#">crit.do</a> <div class="nav-collapse collapse"> <ul class="nav"> <li class="active"> <a href="http://twitter.com/caseywest">by @caseywest</a> </li> </ul> </div> </div> </div> </div> @caseywest Navigation Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.
  7. <div class="container"> <div class="row"> <div class="span4 offset4"> <ol> <li>Try crit.do</li>

    <li></li> <li></li> <li></li> <li></li> </ol> </div> </div> <div class="row"> <div class="span4 offset4"> <form> <input type="text" placeholder="What's critical?" /> </form> </div> </div> </div> @caseywest Content Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.
  8. Mimosa @caseywest Wednesday, June 5, 13 * We'll Cover a

    Lot * We'll leave some things out. * Overview of projects to glue together
  9. # 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.
  10. 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)
  11. 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.
  12. <!-- From this... --> <link rel="stylesheet" href="css/bootstrap.min.css"> <style> body {

    padding-top: 60px; padding-bottom: 40px; } </style> <link rel="stylesheet" href="css/bootstrap-responsive.min.css"> <link rel="stylesheet" href="css/main.css"> <!-- To this... --> <link rel="stylesheet" href="css/main.css"> @caseywest Refactor CSS Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.
  13. @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.
  14. @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.
  15. 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
  16. 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
  17. 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.
  18. 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.
  19. 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.
  20. Backbone backbonejs.org @caseywest Wednesday, June 5, 13 * MVC(ollections) *

    Backbone.localStore * http://documentup.com/jeromegn/backbone.localStorage
  21. 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.
  22. 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.
  23. 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.
  24. 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.
  25. define ['backbone'], (Backbone) -> window.Backbone.View.extend el: '#todo-list' render: -> self

    = this this.collection.each (todo) -> self.$el.append "<li>#{todo.get 'content'}</li>" @caseywest TodoListView.coffee Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.
  26. 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.
  27. // 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.
  28. 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.
  29. Moment momentjs.com @caseywest Wednesday, June 5, 13 Date Manipulation in

    JS parsing, validating, manipulating, and formatting. Localized timeago()
  30. PhantomJS phantomjs.org @caseywest Wednesday, June 5, 13 headless browser for

    testing automation, screen capture, page automation, network monitorying
  31. Thank you. @caseywest Wednesday, June 5, 13 * We'll Cover

    a Lot * We'll leave some things out. * Overview of projects to glue together