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

Automate ALL THE FRONT-END THINGS

Automate ALL THE FRONT-END THINGS

Kitt Hodsden

June 05, 2014
Tweet

More Decks by Kitt Hodsden

Other Decks in Programming

Transcript

  1. Automate ALL THE
    FRONT-END THINGS!
    Text
    SotR 2014 • Kitt Hodsden • http://ki.tt • @kitt
    1

    View full-size slide

  2. Kitt Hodsden • @kitt • http://ki.tt/sotr 2
    AUTOMATE

    View full-size slide

  3. Kitt Hodsden • @kitt • http://ki.tt/sotr 3
    Hi!

    View full-size slide

  4. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Who are you?
    4

    View full-size slide

  5. Kitt Hodsden • @kitt • http://ki.tt/sotr
    And what do have we here?
    5

    View full-size slide

  6. Kitt Hodsden • @kitt • http://ki.tt/sotr
    http://ki.tt/sotr
    6

    View full-size slide

  7. Kitt Hodsden • @kitt • http://ki.tt/sotr 7
    http://ki.tt/sotr

    View full-size slide

  8. Kitt Hodsden • @kitt • http://ki.tt/sotr 8
    http://ki.tt/sotr
    http://ki.tt/sotr

    View full-size slide

  9. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Wait... what?
    9
    What are we talking about?

    View full-size slide

  10. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Wait... what?
    10
    What are we talking about?

    View full-size slide

  11. Kitt Hodsden • @kitt • http://ki.tt/sotr
    You are invited to participate in group note taking at:
    http://ki.tt/sotr14notes
    11
    Community knowledge!

    View full-size slide

  12. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Demo files / examples available at:
    http://ki.tt/sotr.zip
    12
    Demo files!

    View full-size slide

  13. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Prerequisites!
    13

    View full-size slide

  14. Kitt Hodsden • @kitt • http://ki.tt/sotr
    node & ruby
    (and maybe python & php)
    14
    We need node and ruby to use the tools we’re going to talk about.

    View full-size slide

  15. Kitt Hodsden • @kitt • http://ki.tt/sotr 15
    Setup node by downloading the installer and running it.
    http://nodejs.org

    View full-size slide

  16. Kitt Hodsden • @kitt • http://ki.tt/sotr 16
    # mac / linux
    $ which ruby
    /usr/local/bin/ruby
    $ ruby --version
    ruby 2.0.0p195
    # windows
    > where ruby
    C:\Ruby200\bin\ruby.exe
    > ruby --version
    ruby 2.0.0p451
    Yay! Sass installed!
    See if you already have ruby installed

    View full-size slide

  17. Kitt Hodsden • @kitt • http://ki.tt/sotr 17
    RVM RUBY VERSION MANAGER
    https://rvm.io/rvm/install
    Install ruby in different ways on OSX
    OSX

    View full-size slide

  18. Kitt Hodsden • @kitt • http://ki.tt/sotr 18
    RVM RUBY VERSION MANAGER
    https://rvm.io/rvm/install
    Install ruby in different ways on OSX
    OSX

    View full-size slide

  19. Kitt Hodsden • @kitt • http://ki.tt/sotr 19
    https://unfiniti.com/software/mac/jewelrybox
    Ruby on OSX, I recommend JewelryBox, too.

    View full-size slide

  20. Kitt Hodsden • @kitt • http://ki.tt/sotr 20
    APT / YUM
    $ sudo apt-get install ruby1.9.1
    $ sudo yum install ruby1.9.1
    RVM RUBY VERSION MANAGER
    https://rvm.io/rvm/install
    Install ruby in different ways on Linux
    Linux
    http://ki.tt/s223

    View full-size slide

  21. Kitt Hodsden • @kitt • http://ki.tt/sotr 21
    APT / YUM
    $ sudo apt-get install ruby1.9.1
    $ sudo yum install ruby1.9.1
    RVM RUBY VERSION MANAGER
    https://rvm.io/rvm/install
    Install ruby in different ways on Linux
    Linux
    http://ki.tt/s223

    View full-size slide

  22. Kitt Hodsden • @kitt • http://ki.tt/sotr 22
    Install ruby in different ways on Windows
    Windows
    http://chocolatey.org/

    View full-size slide

  23. Kitt Hodsden • @kitt • http://ki.tt/sotr 23
    C:\> cinst ruby
    Install ruby in different ways on Windows
    Windows

    View full-size slide

  24. Kitt Hodsden • @kitt • http://ki.tt/sotr 24
    RUBYINSTALLER
    http://rubyinstaller.org/downloads/
    PIK
    https://github.com/vertiginous/pik
    Install ruby in different ways on Windows
    Windows
    CYGWIN
    http://cygwin.com

    View full-size slide

  25. Kitt Hodsden • @kitt • http://ki.tt/sotr
    http://ki.tt/sotr
    25

    View full-size slide

  26. Kitt Hodsden • @kitt • http://ki.tt/sotr 26

    View full-size slide

  27. Kitt Hodsden • @kitt • http://ki.tt/sotr 27
    Automate All the
    Front-End Things!

    View full-size slide

  28. Kitt Hodsden • @kitt • http://ki.tt/sotr
    1. Embrace the DRY principle
    28
    Guiding principles of making our workflows AWESOME

    View full-size slide

  29. Kitt Hodsden • @kitt • http://ki.tt/sotr
    1. Embrace the DRY principle
    2. Make changes easy
    29
    Guiding principles of making our workflows AWESOME

    View full-size slide

  30. Kitt Hodsden • @kitt • http://ki.tt/sotr
    1. Embrace the DRY principle
    2. Make changes easy
    3. Make finding mistakes easy
    30
    Guiding principles of making our workflows AWESOME

    View full-size slide

  31. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Implement a design or prototype
    31
    What magic do we do?

    View full-size slide

  32. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Implement a design or prototype
    Update the designs
    32
    What magic do we do?

    View full-size slide

  33. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Implement a design or prototype
    Update the designs
    Make sure it works in all browsers
    33
    What magic do we do?

    View full-size slide

  34. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Implement a design or prototype
    Update the designs
    Make sure it works in all browsers
    Make it faster
    34
    What magic do we do?

    View full-size slide

  35. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Implement a design or prototype
    Update the designs
    Make sure it works in all browsers
    Make it faster
    35
    What magic do we do?

    View full-size slide

  36. Kitt Hodsden • @kitt • http://ki.tt/sotr 36
    We’re MAGICAL

    View full-size slide

  37. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Implement a design or prototype
    Update the designs
    Make sure it works in all browsers
    Make it faster
    37

    View full-size slide

  38. Kitt Hodsden • @kitt • http://ki.tt/sotr 38
    How often do we have a blank slate, really?

    View full-size slide

  39. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Implement a design or prototype
    Update the designs
    Make sure it works in all browsers
    Make it faster
    39

    View full-size slide

  40. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Implement a design or prototype
    Update the designs
    Make sure it works in all browsers
    Make it faster
    40

    View full-size slide

  41. Kitt Hodsden • @kitt • http://ki.tt/sotr
    change.
    click.
    change.
    click.
    41

    View full-size slide

  42. Kitt Hodsden • @kitt • http://ki.tt/sotr
    change.
    click.
    change.
    click.
    42
    change.
    click.
    change.
    click.
    change
    click.
    change.
    click.
    change.
    click.
    hange.
    click.
    hange.
    click.
    hange.
    click.
    change.
    click.
    change
    click.
    change
    click.
    change.
    click.

    View full-size slide

  43. Kitt Hodsden • @kitt • http://ki.tt/sotr 43
    Guiding principles!
    1. Embrace the DRY principle
    2. Make changes easy
    3. Make finding mistakes easy

    View full-size slide

  44. Kitt Hodsden • @kitt • http://ki.tt/sotr 44
    3

    View full-size slide

  45. Kitt Hodsden • @kitt • http://ki.tt/sotr
    LiveReload
    45
    http://livereload.com/

    View full-size slide

  46. Kitt Hodsden • @kitt • http://ki.tt/sotr 46

    View full-size slide

  47. Kitt Hodsden • @kitt • http://ki.tt/sotr 47
    http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions-
    http://ki.tt/LR

    View full-size slide

  48. Kitt Hodsden • @kitt • http://ki.tt/sotr 48
    http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions-
    http://ki.tt/LR

    View full-size slide

  49. Kitt Hodsden • @kitt • http://ki.tt/sotr 49
    or!

    View full-size slide

  50. Kitt Hodsden • @kitt • http://ki.tt/sotr 50
    document.write('<script src="http://'<br/>+ (location.host || 'localhost').split(':')<br/>[0] + ':35729/livereload.js?snipver=1"></' +<br/>'script>')
    If you don’t use browser plugins, you need this JS for LiveReload

    View full-size slide

  51. Kitt Hodsden • @kitt • http://ki.tt/sotr 51

    View full-size slide

  52. Kitt Hodsden • @kitt • http://ki.tt/sotr
    IE options
    http://github.com/dvdotsenko/livereload_ie_extension
    http://reloadit.codeplex.com/
    52
    LiveReload IE options

    View full-size slide

  53. Kitt Hodsden • @kitt • http://ki.tt/sotr 53

    View full-size slide

  54. Kitt Hodsden • @kitt • http://ki.tt/sotr 54
    Guiding principles!
    1. Embrace the DRY principle
    2. Make changes easy
    3. Make finding mistakes easy

    View full-size slide

  55. Kitt Hodsden • @kitt • http://ki.tt/sotr
    browser-sync
    55
    http://browsersync.io/

    View full-size slide

  56. Kitt Hodsden • @kitt • http://ki.tt/sotr
    With your handy local
    development web server...
    56

    View full-size slide

  57. Kitt Hodsden • @kitt • http://ki.tt/sotr
    http://ki.tt/3ws
    57
    LOTS of different ways to start a local webserver
    Need one quick?

    View full-size slide

  58. Kitt Hodsden • @kitt • http://ki.tt/sotr 58
    $ python -m SimpleHTTPServer 8000

    View full-size slide

  59. Kitt Hodsden • @kitt • http://ki.tt/sotr 59
    Open a new terminal or command window

    View full-size slide

  60. Kitt Hodsden • @kitt • http://ki.tt/sotr 60
    In OSX, drag and drop the folder into the terminal window for the path.

    View full-size slide

  61. Kitt Hodsden • @kitt • http://ki.tt/sotr 61
    In Windows, use right click cut and paste

    View full-size slide

  62. Kitt Hodsden • @kitt • http://ki.tt/sotr
    http://localhost:8000/index.html
    http://127.0.0.1:8000/index.html
    62
    You can see the temporary site running locally!

    View full-size slide

  63. Kitt Hodsden • @kitt • http://ki.tt/sotr 63
    $ npm install connect &&
    echo "var c =
    require('connect');c.createServer(c
    .static(__dirname)).listen(8000);"
    | node

    View full-size slide

  64. Kitt Hodsden • @kitt • http://ki.tt/sotr
    npm
    64
    Node Package Manager for installng node packages

    View full-size slide

  65. Kitt Hodsden • @kitt • http://ki.tt/sotr
    browser-sync
    65
    http://browsersync.io/

    View full-size slide

  66. Kitt Hodsden • @kitt • http://ki.tt/sotr
    http://ki.tt/sotr.zip
    66
    Demo files if you’d like to follow along
    Example files, if you’d like.

    View full-size slide

  67. Kitt Hodsden • @kitt • http://ki.tt/sotr 67
    $ npm install -g browser-sync

    View full-size slide

  68. Kitt Hodsden • @kitt • http://ki.tt/sotr 68
    $ browser-sync start --server --files "css/*.css"

    View full-size slide

  69. Kitt Hodsden • @kitt • http://ki.tt/sotr 69

    View full-size slide

  70. Kitt Hodsden • @kitt • http://ki.tt/sotr
    bs-config.js
    70

    View full-size slide

  71. Kitt Hodsden • @kitt • http://ki.tt/sotr 71
    $ browser-sync init
    [BS] Config file created (bs-config.js)
    [BS] To use it, in the same directory run: browser-sync
    $

    View full-size slide

  72. Kitt Hodsden • @kitt • http://ki.tt/sotr 72
    module.exports = {
    files: "css/*.css",
    proxy: {
    host: "localhost",
    port: 8000
    },
    ghostMode: {
    clicks: true,
    links: true,
    forms: true,
    scroll: true
    },
    open: true,
    injectChanges: false,
    notify: true,
    };
    https://github.com/shakyShane/browser-sync/wiki/options

    View full-size slide

  73. Kitt Hodsden • @kitt • http://ki.tt/sotr
    module.exports = {
    files: "css/*.css",
    proxy: {
    host: "localhost",
    port: 8000
    },
    ghostMode: {
    clicks: true,
    links: true,
    forms: true,
    scroll: true
    },
    open: true,
    injectChanges: false,
    notify: true,
    };
    73
    https://github.com/shakyShane/browser-sync/wiki/options

    View full-size slide

  74. Kitt Hodsden • @kitt • http://ki.tt/sotr 74
    module.exports = {
    files: ["css/*.css", "**.*.html", "js/**/*.js"],
    proxy: {
    host: "localhost",
    port: 8000
    },
    ghostMode: {
    clicks: true,
    links: true,
    forms: true,
    scroll: true
    },
    open: true,
    injectChanges: false,
    notify: true,
    };
    https://github.com/shakyShane/browser-sync/wiki/options

    View full-size slide

  75. Kitt Hodsden • @kitt • http://ki.tt/sotr
    https://github.com/shakyShane/browser-sync/wiki/options
    75

    View full-size slide

  76. Kitt Hodsden • @kitt • http://ki.tt/sotr 76
    $ browser-sync start

    View full-size slide

  77. Kitt Hodsden • @kitt • http://ki.tt/sotr 77
    $ browser-sync start
    [BS] Copy the following snippet into your website, just before the closing
    body> tag

    var ___socket___ = io.connect('http://192.168.5.6:3000');

    [BS] Watching files...

    View full-size slide

  78. Kitt Hodsden • @kitt • http://ki.tt/sotr 78

    View full-size slide

  79. Kitt Hodsden • @kitt • http://ki.tt/sotr 79
    MAGICAL

    View full-size slide

  80. Kitt Hodsden • @kitt • http://ki.tt/sotr
    click.
    copy.
    scroll.
    click.
    paste.
    80

    View full-size slide

  81. Kitt Hodsden • @kitt • http://ki.tt/sotr 81

    View full-size slide

  82. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Alfred
    http://alfredapp.com/
    Quicksilver
    http://qsapp.com/
    Launchbar
    http://www.obdev.at/products/launchbar/
    82

    View full-size slide

  83. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Skylight
    http://www.candylabs.com/skylight
    Launchy
    http://www.launchy.net/
    http://pylaunchy.sourceforge.net/docs/
    FARR
    https://www.donationcoder.com/Software/Mouser/findrun/
    83

    View full-size slide

  84. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Gnome Launch Box
    https://live.gnome.org/
    Gnome Do
    http://do.davebsd.com/
    Launchy
    http://www.launchy.net/
    http://pylaunchy.sourceforge.net/
    84

    View full-size slide

  85. Kitt Hodsden • @kitt • http://ki.tt/sotr 85

    View full-size slide

  86. Kitt Hodsden • @kitt • http://ki.tt/sotr 86

    View full-size slide

  87. Kitt Hodsden • @kitt • http://ki.tt/sotr 87

    View full-size slide

  88. Kitt Hodsden • @kitt • http://ki.tt/sotr 88
    http://kapeli.com/dash

    View full-size slide

  89. Kitt Hodsden • @kitt • http://ki.tt/sotr 89
    http://zealdocs.org/

    View full-size slide

  90. Kitt Hodsden • @kitt • http://ki.tt/sotr 90
    Alfred looking up jQuery.

    View full-size slide

  91. Kitt Hodsden • @kitt • http://ki.tt/sotr 91
    Dash has a large number of document sets

    View full-size slide

  92. Kitt Hodsden • @kitt • http://ki.tt/sotr 92
    Naïve way to open all the browsers at once

    View full-size slide

  93. Kitt Hodsden • @kitt • http://ki.tt/sotr 93
    https://github.com/zenorocha/alfred-workflows/
    https://github.com/aiyodk/Alfred-Extensions/tree/master/AlfredApp_2.x
    https://github.com/willfarrell/alfred-workflows
    Alfred Workflows

    View full-size slide

  94. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Can you feel the awesome?
    94
    Awwwwwwwww yissssssssssssssssssss!

    View full-size slide

  95. Kitt Hodsden • @kitt • http://ki.tt/sotr
    3
    95

    View full-size slide

  96. Kitt Hodsden • @kitt • http://ki.tt/sotr 96

    View full-size slide

  97. Kitt Hodsden • @kitt • http://ki.tt/sotr 97
    $ npm install -g grunt-cli
    Install the grunt package

    View full-size slide

  98. Kitt Hodsden • @kitt • http://ki.tt/sotr 98
    Windows users, use PowerShell

    View full-size slide

  99. Kitt Hodsden • @kitt • http://ki.tt/sotr 99
    $ npm install -g grunt-init
    $ git clone https://github.com/
    gruntjs/grunt-init-gruntfile.git
    ~/.grunt-init/gruntfile
    $ grunt-init gruntfile
    Download the grunt template files and generate the grunt config files ...

    View full-size slide

  100. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Or just download them.
    http://ki.tt/fgrf
    100

    View full-size slide

  101. Kitt Hodsden • @kitt • http://ki.tt/sotr 101
    package.json
    Gruntfile.js
    The two files grunt uses

    View full-size slide

  102. Kitt Hodsden • @kitt • http://ki.tt/sotr 102
    {
    "engines": {
    "node": ">= 0.10.0"
    },
    "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-contrib-jshint": "~0.7.2",
    "grunt-contrib-watch": "~0.5.3",
    }
    }
    This is what a package.json file looks like

    View full-size slide

  103. Kitt Hodsden • @kitt • http://ki.tt/sotr 103
    $ npm install
    With a package.json file, you can install the needed packages easily.

    View full-size slide

  104. Kitt Hodsden • @kitt • http://ki.tt/sotr
    1. Watch for file changes
    2. Refresh the browser on change
    104
    What we want grunt to do.

    View full-size slide

  105. Kitt Hodsden • @kitt • http://ki.tt/sotr 105
    module.exports = function(grunt) {
    // Project configuration.
    grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
    options: {
    banner: '/*! <%= pkg.name %> <%="yyyy-mm-dd") %> */\n'
    },
    build: {
    src: 'src/<%= pkg.name %>.js',
    dest: 'build/<%= pkg.name %>.min.js'
    }
    }
    });
    // Load the plugin that provides the "uglify" task.
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // Default task(s).
    grunt.registerTask('default', ['uglify']);
    };
    A basic Gruntfile.js file

    View full-size slide

  106. Kitt Hodsden • @kitt • http://ki.tt/sotr 106
    module.exports = function(grunt) {
    // Project configuration.
    grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
    options: {
    banner: '/*! <%= pkg.name %> <%="yyyy-mm-dd") %> */\n'
    },
    build: {
    src: 'src/<%= pkg.name %>.js',
    dest: 'build/<%= pkg.name %>.min.js'
    }
    }
    });
    // Load the plugin that provides the "uglify" task.
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // Default task(s).
    grunt.registerTask('default', ['uglify']);
    };
    A basic Gruntfile.js file

    View full-size slide

  107. Kitt Hodsden • @kitt • http://ki.tt/sotr 107
    module.exports = function(grunt) {
    // Project configuration.
    grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
    options: {
    banner: '/*! <%= pkg.name %> <%="yyyy-mm-dd") %> */\n'
    },
    build: {
    src: 'src/<%= pkg.name %>.js',
    dest: 'build/<%= pkg.name %>.min.js'
    }
    }
    });
    // Load the plugin that provides the "uglify" task.
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // Default task(s).
    grunt.registerTask('default', ['uglify']);
    };
    A basic Gruntfile.js file

    View full-size slide

  108. Kitt Hodsden • @kitt • http://ki.tt/sotr 108
    module.exports = function(grunt) {
    // Project configuration.
    grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
    options: {
    banner: '/*! <%= pkg.name %> <%="yyyy-mm-dd") %> */\n'
    },
    build: {
    src: 'src/<%= pkg.name %>.js',
    dest: 'build/<%= pkg.name %>.min.js'
    }
    }
    });
    // Load the plugin that provides the "uglify" task.
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // Default task(s).
    grunt.registerTask('default', ['uglify']);
    };
    A basic Gruntfile.js file

    View full-size slide

  109. Kitt Hodsden • @kitt • http://ki.tt/sotr
    browser-sync
    109

    View full-size slide

  110. Kitt Hodsden • @kitt • http://ki.tt/sotr
    1. Find grunt plugin*
    2. Install with npm install --save-dev
    3. Add the task to our Gruntfile.js file
    4. Add the tasks to a command
    5. Run the command
    ...
    7. Profit!
    *write if you need to
    110
    How to add a task to grunt

    View full-size slide

  111. Kitt Hodsden • @kitt • http://ki.tt/sotr
    http://npmjs.org
    111
    Where to find node and grunt packages

    View full-size slide

  112. Kitt Hodsden • @kitt • http://ki.tt/sotr
    “grunt browser-sync”
    112
    What I searched for on npmjs.org

    View full-size slide

  113. Kitt Hodsden • @kitt • http://ki.tt/sotr
    THIS IS OKAY.
    113

    View full-size slide

  114. Kitt Hodsden • @kitt • http://ki.tt/sotr 114
    Check for current state before downloading.

    View full-size slide

  115. Kitt Hodsden • @kitt • http://ki.tt/sotr 115
    $ npm install grunt-browser-sync --save-dev
    Installing the browser-sync grunt package

    View full-size slide

  116. Kitt Hodsden • @kitt • http://ki.tt/sotr 116
    $ ls
    Gemfile!! README.txt fonts node_modules template.php
    Gemfile.lock bs-config.js images package.json templates
    Gruntfile.js config.rb js screenshot.png theme.info
    Guardfile! css logo.png scss widgets

    View full-size slide

  117. Kitt Hodsden • @kitt • http://ki.tt/sotr 117
    "grunt-browser-sync": "^0.9.1"

    View full-size slide

  118. Kitt Hodsden • @kitt • http://ki.tt/sotr 118
    browserSync: {
    files: {
    src: [
    'css/*.css',
    'img/*',
    'js/*.js',
    '*.html'
    ]
    },
    options: {
    watchTask: true,
    proxy: {
    host: "localhost",
    port: 8000
    },
    server: false,
    }
    },

    View full-size slide

  119. Kitt Hodsden • @kitt • http://ki.tt/sotr 119
    browserSync: {
    files: {
    src: [
    'css/*.css',
    'img/*',
    'js/*.js',
    '*.html'
    ]
    },
    options: {
    watchTask: true,
    proxy: {
    host: "localhost",
    port: 8000
    },
    server: false,
    }
    },

    View full-size slide

  120. Kitt Hodsden • @kitt • http://ki.tt/sotr 120
    browserSync: {
    files: {
    src: [
    'css/*.css',
    'img/*',
    'js/*.js',
    '*.html'
    ]
    },
    options: {
    watchTask: true,
    proxy: {
    host: "localhost",
    port: 8000
    },
    server: false,
    }
    },

    View full-size slide

  121. Kitt Hodsden • @kitt • http://ki.tt/sotr 121
    watch: {
    gruntfile: {
    files: '<%= jshint.gruntfile.src %>',
    tasks: ['jshint:gruntfile']
    },
    scss: {
    files: ['scss/*.scss'],
    tasks: ['sass:dev']
    },
    js: {
    // watch for js changes except for script.min.js
    files: ['js/*.js', '!js/script.min.js'],
    tasks: ['uglify:dev']
    }
    }

    View full-size slide

  122. Kitt Hodsden • @kitt • http://ki.tt/sotr 122
    grunt.loadNpmTasks('grunt-browser-sync');
    ...
    grunt.registerTask('default', ['browserSync', ‘watch’]);

    View full-size slide

  123. Kitt Hodsden • @kitt • http://ki.tt/sotr 123
    grunt.registerTask('gogogo', ['browserSync', 'watch']);

    View full-size slide

  124. Kitt Hodsden • @kitt • http://ki.tt/sotr 124
    $ grunt gogogo
    Running the newly defined “gogogo” command

    View full-size slide

  125. Kitt Hodsden • @kitt • http://ki.tt/sotr 125

    View full-size slide

  126. Kitt Hodsden • @kitt • http://ki.tt/sotr 126
    modern.ie

    View full-size slide

  127. Kitt Hodsden • @kitt • http://ki.tt/sotr 127

    View full-size slide

  128. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Implement a design or prototype
    Update the designs
    Make sure it works in all browsers
    Make it faster
    128

    View full-size slide

  129. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Javascript?
    129

    View full-size slide

  130. Kitt Hodsden • @kitt • http://ki.tt/sotr 130
    1. Find grunt plugin*
    2. Install with npm install --save-dev
    3. Add the task to our Gruntfile.js file
    4. Add the tasks to a command
    5. Run the command
    ...
    7. Profit!
    *write if you need to

    View full-size slide

  131. Kitt Hodsden • @kitt • http://ki.tt/sotr
    1. Embrace the DRY principle
    2. Make changes easy
    3. Make finding mistakes easy
    131
    Guiding principles of making our workflows AWESOME

    View full-size slide

  132. Kitt Hodsden • @kitt • http://ki.tt/sotr 132
    $ npm install matchdep --save-dev
    Installing the browser-sync grunt package

    View full-size slide

  133. Kitt Hodsden • @kitt • http://ki.tt/sotr 133
    ...
    // load all the grunt modules instead of one each line
    require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);
    grunt.registerTask('checkjs', ['jshint']);
    grunt.registerTask('watchjs', ['jshint', 'watch']);
    grunt.registerTask('gruntjs', ['jshint:gruntfile', 'watch']);

    View full-size slide

  134. Kitt Hodsden • @kitt • http://ki.tt/sotr
    jshint
    134

    View full-size slide

  135. Kitt Hodsden • @kitt • http://ki.tt/sotr
    npm install grunt-contrib-jshint --save-dev
    135
    Use jshint when editing your Gruntfile.js
    https://github.com/gruntjs/grunt-contrib-jshint

    View full-size slide

  136. Kitt Hodsden • @kitt • http://ki.tt/sotr 136
    jshint: {
    options: {
    ...
    },
    gruntfile: {
    src: ‘Gruntfile.js’
    }
    }
    ...
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.registerTask('checkjs', ['jshint']);
    grunt.registerTask('watchjs', ['jshint', 'watch']);
    grunt.registerTask('gruntjs', ['jshint:gruntfile', 'watch']);

    View full-size slide

  137. Kitt Hodsden • @kitt • http://ki.tt/sotr 137

    View full-size slide

  138. Kitt Hodsden • @kitt • http://ki.tt/sotr
    npm install grunt-contrib-qunit --save-dev
    138
    Javascript unit tests
    https://github.com/gruntjs/grunt-contrib-qunit

    View full-size slide

  139. Kitt Hodsden • @kitt • http://ki.tt/sotr
    npm install grunt-contrib-jasmine --save-dev
    139
    Javascript unit tests
    https://github.com/gruntjs/grunt-contrib-jasmine

    View full-size slide

  140. Kitt Hodsden • @kitt • http://ki.tt/sotr
    npm install grunt-simple-mocha --save-dev
    140
    Javascript unit tests
    https://github.com/yaymukund/grunt-simple-mocha

    View full-size slide

  141. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Implement a design or prototype
    Update the designs
    Make sure it works in all browsers
    Make it faster
    141

    View full-size slide

  142. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Implement a design or prototype
    Update the designs
    Make sure it works in all browsers
    Make it faster
    142

    View full-size slide

  143. Kitt Hodsden • @kitt • http://ki.tt/sotr
    1. Reduce file sizes
    2. Reduce the number of files
    3. Reduce content rendering time
    143

    View full-size slide

  144. Kitt Hodsden • @kitt • http://ki.tt/sotr 144
    1. Reduce file sizes
    2. Reduce the number of files
    3. Reduce content rendering time

    View full-size slide

  145. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Images
    145

    View full-size slide

  146. Kitt Hodsden • @kitt • http://ki.tt/sotr
    npm install grunt-contrib-imagemin --save-dev
    146
    Make pages load faster by reducing image sizes

    View full-size slide

  147. Kitt Hodsden • @kitt • http://ki.tt/sotr 147
    imagemin: {
    prod: {
    files: [{
    expand: true,
    cwd: 'imgs-src/',
    src: ['**/*.{png,jpg,gif}'],
    dest: 'imgs/'
    }]
    }
    }

    View full-size slide

  148. Kitt Hodsden • @kitt • http://ki.tt/sotr
    npm install grunt-svgmin --save-dev
    148
    Reduce SVG sizes, too

    View full-size slide

  149. Kitt Hodsden • @kitt • http://ki.tt/sotr 149
    grunt.initConfig({
    svgmin: { // Task
    options: { // Configuration that will be passed directly to SVGO
    plugins: [
    { removeViewBox: false },
    { removeUselessStrokeAndFill: false }
    ]
    },
    dist: { // Target
    files: [{ // Dictionary of files
    expand: true, // Enable dynamic expansion.
    cwd: 'img/src', // Src matches are relative to this path.
    src: ['**/*.svg'], // Actual pattern(s) to match.
    dest: 'img/', // Destination path prefix.
    ext: '.min.svg' // Dest filepaths will have this extension.
    // ie: optimise img/src/branding/logo.svg and store it in img/branding/logo.min.svg
    }]
    }
    });
    grunt.loadNpmTasks('grunt-svgmin');
    grunt.registerTask('default', ['svgmin']);
    Sample grunt-svgmin configuration

    View full-size slide

  150. Kitt Hodsden • @kitt • http://ki.tt/sotr
    npm install grunt-responsive-images --save-dev
    150
    Responsive images by resizing
    https://github.com/andismith/grunt-responsive-images

    View full-size slide

  151. Kitt Hodsden • @kitt • http://ki.tt/sotr 151
    grunt.initConfig({
    responsive_images: {
    myTask: {
    options: {
    sizes: [{
    width: 320,
    height: 240
    },{
    name: 'large',
    width: 640
    },{
    name: "large",
    width: 1024,
    suffix: "_x2",
    quality: 60
    }]
    },
    files: [{
    expand: true,
    src: ['assets/**.{jpg,gif,png}'],
    cwd: 'test/',
    dest: 'resize/{%= width %}/'
    }]
    }
    },
    });
    Sample grunt-responsive-images configuration

    View full-size slide

  152. Kitt Hodsden • @kitt • http://ki.tt/sotr
    npm install grunt-grunticon --save-dev
    152
    SVG with PNG fallbacks
    https://github.com/filamentgroup/grunticon

    View full-size slide

  153. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Non-images
    153

    View full-size slide

  154. Kitt Hodsden • @kitt • http://ki.tt/sotr
    npm install grunt-contrib-cssmin --save-dev
    154
    Minimize CSS files

    View full-size slide

  155. Kitt Hodsden • @kitt • http://ki.tt/sotr
    npm install grunt-csscss --save-dev
    155
    Minimize CSS files

    View full-size slide

  156. Kitt Hodsden • @kitt • http://ki.tt/sotr
    npm install grunt-uncss --save-dev
    156
    Remove unused CSS

    View full-size slide

  157. Kitt Hodsden • @kitt • http://ki.tt/sotr
    npm install grunt-contrib-uglify --save-dev
    157
    Minimize javascript files

    View full-size slide

  158. Kitt Hodsden • @kitt • http://ki.tt/sotr 158
    1. Reduce file sizes
    2. Reduce the number of files
    3. Reduce content rendering time

    View full-size slide

  159. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Sprites!
    159
    Making things easier with sprites!

    View full-size slide

  160. Kitt Hodsden • @kitt • http://ki.tt/sotr
    WHOO!
    160

    View full-size slide

  161. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Creating them is EASY!
    161

    View full-size slide

  162. Kitt Hodsden • @kitt • http://ki.tt/sotr
    npm install grunt-montage --save-dev
    162
    Sprite your images

    View full-size slide

  163. Kitt Hodsden • @kitt • http://ki.tt/sotr 163
    grunt.initConfig({
    montage: {
    iconaroo: {
    files: {
    "images/sprites": [
    "images/icons/*.png"
    ]
    },
    options: {
    size: 32,
    outputImage: "sprite-icons.png",
    outputStylesheet: "sprite-icons.css"
    }
    }
    }
    });
    Sample grunt-montage configuration

    View full-size slide

  164. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Wow. That was a lot of work.
    164

    View full-size slide

  165. Kitt Hodsden • @kitt • http://ki.tt/sotr 165
    $ mkdir 640x480; for file in *.jpg; do convert $file -resize \
    640x480 640x480/$file; done
    A “one-liner” that resizes images

    View full-size slide

  166. Kitt Hodsden • @kitt • http://ki.tt/sotr
    aliases / functions / scripts
    166

    View full-size slide

  167. Kitt Hodsden • @kitt • http://ki.tt/sotr
    aliases / functions / scripts
    167

    View full-size slide

  168. Kitt Hodsden • @kitt • http://ki.tt/sotr 168
    zsh, bash format
    alias d="dirs -v"
    tcsh format
    alias d 'dirs -v'
    Alias syntax

    View full-size slide

  169. Kitt Hodsden • @kitt • http://ki.tt/sotr 169
    $ cat ~/.bash_profile
    alias d='dirs -v'
    alias pu='pushd'
    alias po='popd'
    alias sa='source ~/.bash_profile'
    alias pdw='pwd'
    alias purge='rm *.~*~'
    alias mroe='more'
    alias memacs='emacs `git st | grep modified | cut -c14-180`'
    alias sotr='pushd ~/talks/2014/sotr'
    Create aliases

    View full-size slide

  170. Kitt Hodsden • @kitt • http://ki.tt/sotr 170
    history | cut -c8-120 | cut -d" " -f1 | sort | uniq -c | sort
    Good candidates for your aliases

    View full-size slide

  171. Kitt Hodsden • @kitt • http://ki.tt/sotr 171
    http://alias.sh/

    View full-size slide

  172. Kitt Hodsden • @kitt • http://ki.tt/sotr 172
    http://twitter.com/climagic

    View full-size slide

  173. Kitt Hodsden • @kitt • http://ki.tt/sotr
    aliases / functions / scripts
    173

    View full-size slide

  174. Kitt Hodsden • @kitt • http://ki.tt/sotr 174
    function envg() { env | grep -i $1; }
    Functions if your arguments vary

    View full-size slide

  175. Kitt Hodsden • @kitt • http://ki.tt/sotr 175
    $ mkdir new-dir && cd $_
    # function mkcd { mkdir $1 && cd $1; }
    $ mkcd new-dir
    Functions if your arguments vary

    View full-size slide

  176. Kitt Hodsden • @kitt • http://ki.tt/sotr
    aliases / functions / scripts
    176

    View full-size slide

  177. Kitt Hodsden • @kitt • http://ki.tt/sotr 177
    #!/usr/bin/env bash
    mkdir 640x480
    for file in *.jpg;
    do convert $file -resize 640x480 640x480/$file;
    done
    A bash script to convert

    View full-size slide

  178. Kitt Hodsden • @kitt • http://ki.tt/sotr 178
    #!/usr/bin/env bash
    echo “make the resize dir 640x480”
    mkdir 640x480
    echo “resize each file”
    for file in *.jpg;
    echo “ resizing $file”
    do convert $file -resize 640x480 640x480/$file;
    done
    A bash script to convert

    View full-size slide

  179. Kitt Hodsden • @kitt • http://ki.tt/sotr 179
    #!/usr/bin/env bash -x
    echo “make the resize dir 640x480”
    mkdir 640x480
    echo “resize each file”
    for file in *.jpg;
    echo “ resizing $file”
    do convert $file -resize 640x480 640x480/$file;
    done
    A bash script to convert

    View full-size slide

  180. Kitt Hodsden • @kitt • http://ki.tt/sotr 180
    bash-3.2$ resize-images.sh
    + mkdir 640x480
    mkdir: 640x480: File exists
    + for file in '*.jpg'
    + convert place-kitten-01.jpg -resize 640x480 640x480/place-kitten-01.jpg
    + for file in '*.jpg'
    + convert place-kitten-02.jpg -resize 640x480 640x480/place-kitten-02.jpg
    + for file in '*.jpg'
    + convert place-kitten-03.jpg -resize 640x480 640x480/place-kitten-03.jpg
    + for file in '*.jpg'
    + convert place-kitten-04.jpg -resize 640x480 640x480/place-kitten-04.jpg
    + for file in '*.jpg'
    + convert place-kitten-05.jpg -resize 640x480 640x480/place-kitten-05.jpg
    Output with -x for the bash script

    View full-size slide

  181. Kitt Hodsden • @kitt • http://ki.tt/sotr
    http://www.kfirlavi.com/blog/2012/11/14/
    defensive-bash-programming/
    181

    View full-size slide

  182. Kitt Hodsden • @kitt • http://ki.tt/sotr
    just completed!
    182

    View full-size slide

  183. Kitt Hodsden • @kitt • http://ki.tt/sotr
    livereload, browser-sync,
    grunt, alfred,
    productivity apps,
    aliases, functions, scripts
    183

    View full-size slide

  184. Kitt Hodsden • @kitt • http://ki.tt/sotr
    next up!
    184

    View full-size slide

  185. Kitt Hodsden • @kitt • http://ki.tt/sotr
    sass, media queries,
    source maps, pattern lab,
    phantomcss, wraith,
    emmet, yeoman, bower
    185

    View full-size slide

  186. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Add your suggestions!
    http://ki.tt/sotr14notes
    186
    Community knowledge!
    (You’re awesome!)

    View full-size slide

  187. all the front-end things?
    (automating front-end workflows, part two)
    Text
    SotR 2014 • Kitt Hodsden • http://ki.tt • @kitt
    187

    View full-size slide

  188. Kitt Hodsden • @kitt • http://ki.tt/sotr
    livereload, browser-sync,
    grunt, alfred,
    productivity apps,
    aliases, functions, scripts
    189

    View full-size slide

  189. Kitt Hodsden • @kitt • http://ki.tt/sotr
    sass, media queries,
    source maps, pattern lab,
    phantomcss, wraith,
    emmet, yeoman, bower
    190

    View full-size slide

  190. Kitt Hodsden • @kitt • http://ki.tt/sotr
    http://ki.tt/sotr
    191

    View full-size slide

  191. Kitt Hodsden • @kitt • http://ki.tt/sotr
    You are invited to participate in group note taking at:
    http://ki.tt/sotr14notes
    192
    Community knowledge!

    View full-size slide

  192. Kitt Hodsden • @kitt • http://ki.tt/sotr
    You are invited to participate in group note taking at:
    http://ki.tt/sotr14notes
    193
    Community knowledge!

    View full-size slide

  193. Kitt Hodsden • @kitt • http://ki.tt/sotr
    1. Embrace the DRY principle
    2. Make changes easy
    3. Make finding mistakes easy
    194
    Guiding principles of making our workflows AWESOME

    View full-size slide

  194. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Implement a design or prototype
    Update the designs
    Make sure it works in all browsers
    Make it faster
    195
    What magic do we do?

    View full-size slide

  195. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Implement a design or prototype
    Update the designs
    Make sure it works in all browsers
    Make it faster
    196
    What magic do we do?

    View full-size slide

  196. Kitt Hodsden • @kitt • http://ki.tt/sotr
    1. Reduce file sizes
    2. Reduce the number of files
    3. Reduce content rendering time
    197

    View full-size slide

  197. Kitt Hodsden • @kitt • http://ki.tt/sotr 198
    1. Reduce file sizes
    2. Reduce the number of files
    3. Reduce content rendering time

    View full-size slide

  198. Kitt Hodsden • @kitt • http://ki.tt/sotr 199
    1. Reduce file sizes
    2. Reduce the number of files
    3. Reduce content rendering time

    View full-size slide

  199. Kitt Hodsden • @kitt • http://ki.tt/sotr
    1. Embrace the DRY principle
    2. Make changes easy
    3. Make finding mistakes easy
    200
    Guiding principles of making our workflows AWESOME

    View full-size slide

  200. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Change the font BLUE
    201
    Easiest change ever!

    View full-size slide

  201. Kitt Hodsden • @kitt • http://ki.tt/sotr
    #6c869d 㱺 #212939
    202
    Easiest change ever!

    View full-size slide

  202. Kitt Hodsden • @kitt • http://ki.tt/sotr 203
    Well, phooey. The ticket was reopened.

    View full-size slide

  203. Kitt Hodsden • @kitt • http://ki.tt/sotr 204
    Soon, EVERYTHING is important!

    View full-size slide

  204. Kitt Hodsden • @kitt • http://ki.tt/sotr 205

    View full-size slide

  205. Kitt Hodsden • @kitt • http://ki.tt/sotr 206

    View full-size slide

  206. Kitt Hodsden • @kitt • http://ki.tt/sotr 207
    Guiding principles!
    1. Embrace the DRY principle
    2. Make changes easy
    3. Make finding mistakes easy

    View full-size slide

  207. Kitt Hodsden • @kitt • http://ki.tt/sotr 208
    Guiding principles!
    1. Embrace the DRY principle
    2. Make changes easy
    3. Make finding mistakes easy

    View full-size slide

  208. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Use a CSS preprocessor.
    209
    Saw that coming, didn’t you?

    View full-size slide

  209. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Sass / LESS / Stylus
    210
    Saw that coming, didn’t you?

    View full-size slide

  210. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Quick check!
    211

    View full-size slide

  211. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Sass ⟳ CSS
    212

    View full-size slide

  212. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Getting started with Sass
    213

    View full-size slide

  213. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Install it.
    214

    View full-size slide

  214. Kitt Hodsden • @kitt • http://ki.tt/sotr 215
    $ gem update --system
    $ gem install sass
    $ sudo gem update --system
    $ sudo gem install sass
    Yay! Sass installed!

    View full-size slide

  215. Kitt Hodsden • @kitt • http://ki.tt/sotr
    COMPASS
    216
    Install Compass, too
    http://compass-style.org/install/

    View full-size slide

  216. Kitt Hodsden • @kitt • http://ki.tt/sotr 217
    $ gem update --system
    $ gem install compass
    $ sudo gem update --system
    $ sudo gem install compass
    Setting up tools. In this case, Compass.

    View full-size slide

  217. Kitt Hodsden • @kitt • http://ki.tt/sotr
    See also: Bourbon
    218
    Bourbon is another example of extending Sass
    http://bourbon.io/

    View full-size slide

  218. Kitt Hodsden • @kitt • http://ki.tt/sotr
    CSS 㱺 Sass
    219

    View full-size slide

  219. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Let us count the (3) ways.
    220
    How we get started with Sass in an existing project.

    View full-size slide

  220. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Move and rename files.
    221
    How we get started with Sass in an existing project.

    View full-size slide

  221. Kitt Hodsden • @kitt • http://ki.tt/sotr 222
    $ mkdir scss
    $ mv css/styles.css scss/styles.scss
    Setting up tools. In this case, Compass.

    View full-size slide

  222. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Use sass-convert
    223
    How we get started with Sass in an existing project.

    View full-size slide

  223. Kitt Hodsden • @kitt • http://ki.tt/sotr 224
    $ sass-convert --help
    Usage: sass-convert [options] [INPUT] [OUTPUT]
    $
    $ cd theme-dir
    $ sass-convert --recursive --from=css --to=scss css scss
    Setting up tools. In this case, Compass.

    View full-size slide

  224. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Use http://css2sass.heroku.com
    225
    How we get started with Sass in an existing project.

    View full-size slide

  225. Kitt Hodsden • @kitt • http://ki.tt/sotr 226

    View full-size slide

  226. Kitt Hodsden • @kitt • http://ki.tt/sotr
    $variables
    227
    Quick! Sass in 5 slides!

    View full-size slide

  227. Kitt Hodsden • @kitt • http://ki.tt/sotr 228
    $variable: value;
    Before variables...

    View full-size slide

  228. Kitt Hodsden • @kitt • http://ki.tt/sotr 229
    dev[405]% grep background-color *
    style.css: background-color: #edf5fa;
    style.css: background-color: #ddecf5;
    style.css: background-color: #e6f1f7;
    style.css: background-color: #d4e7f3;
    style.css: background-color: #edf5fa;
    style.css: background-color: #fcfce8;
    style.css: background-color: #fcf9e5;
    style.css: background-color: #fbf5cf;
    style.css: background-color: #fefefe;
    style.css: background-color: #f5f5f5;
    style.css: background-color: #fdf5e6;
    style.css: background-color: #fdf2de;
    style.css: background-color: #fbe4e4;
    style.css: background-color: #fbdbdb;
    style.css: background-color: #ffcccc;
    style.css: background-color: #ffffdd;
    style.css: background-color: #ddffdd;
    Before variables...

    View full-size slide

  229. Kitt Hodsden • @kitt • http://ki.tt/sotr 230
    $color-main: rgb(255,251,114);
    $color-second: rgb(70,87,204);
    $color-hilite: rgb(189,177,255);
    ...
    .button {
    background-color: $color-main;
    ...
    }
    See? Easy!

    View full-size slide

  230. Kitt Hodsden • @kitt • http://ki.tt/sotr 231
    $font-times: Cambria, "Hoefler Text", Utopia, "Liberation Serif",
    "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
    $font-garamond: "Palatino Linotype", Palatino, Palladio, "URW
    Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style",
    "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple
    Garamond", "ITC Garamond Narrow", "New Century Schoolbook",
    "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
    Uses of variables: fonts
    http://css-tricks.com/snippets/css/font-stacks/

    View full-size slide

  231. Kitt Hodsden • @kitt • http://ki.tt/sotr 232
    $color-main: #ff0000;
    $border-main: 2px solid $color-main;
    .multivalue-example {
    border-top: $border-main;
    }
    # compiles to
    .multivalue-example {
    border-top: 2px solid red;
    }
    See? Easy!

    View full-size slide

  232. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Variable name best practice.
    233

    View full-size slide

  233. Kitt Hodsden • @kitt • http://ki.tt/sotr 234
    $ourBlue : #1f4363;
    $ourBlueLight : #355673;
    $ourBlueLighter : #6c869d;
    $ourBlueDark : #0e2c47;
    $ourBlueDarker : #212939;
    $ourBlueHover : #7e99b3;
    ...
    $color_border $ourBlue;
    $color_link: $ourBlue;
    $table_header: $ourBlueLighter;
    Use descriptive AND functional variable names
    http://sachagreif.com/sass-color-variables

    View full-size slide

  234. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Nested syntax
    235
    Quick! Sass in 5 slides!

    View full-size slide

  235. Kitt Hodsden • @kitt • http://ki.tt/sotr 236
    .navigation {
    a {
    display: block;
    padding: .5em;
    color: $color-link;
    border: none;
    }
    b {
    font-size: .9em;
    }
    span {
    display: block;
    font-size: .8em;
    }
    }
    .navigation a {
    display: block;
    padding: .5em;
    color: #444040;
    border: none;
    }
    .navigation b {
    font-size: .9em;
    }
    .navigation span {
    display: block;
    font-size: .8em;
    }
    Sass syntax, talking nesting

    View full-size slide

  236. Kitt Hodsden • @kitt • http://ki.tt/sotr 237
    .navigation {
    a {
    display: block;
    padding: .5em;
    &:hover {
    color: $color-link;
    border: none;
    }
    }
    &>.first {
    padding-left: 0;
    }
    }
    Sass syntax, talking nesting

    View full-size slide

  237. Kitt Hodsden • @kitt • http://ki.tt/sotr
    @extend
    238
    Quick! Sass in 5 slides!

    View full-size slide

  238. Kitt Hodsden • @kitt • http://ki.tt/sotr 239
    Sass syntax, talking @extend
    .box {
    padding: 2em;
    color: $color-text;
    background-color: $color-bg;
    }
    .box-warning {
    @extend .box;
    border: 2px dotted $color-yikes;
    }
    .box-success {
    @extend .box;
    border: 2px dotted $color-success;
    }
    .box-info {
    @extend .box;
    border: 2px dotted $color-info;
    }

    View full-size slide

  239. Kitt Hodsden • @kitt • http://ki.tt/sotr 240
    Sass syntax, talking @extend
    .box, .box-warning, .box-success, .box-info {
    padding: 2em;
    color: #333333;
    background-color: white;
    }
    .box-warning {
    border: 2px dotted #cc0000;
    }
    .box-success{
    border: 2px dotted #33cc00;
    }
    .box-info {
    border: 2px dotted #996633;
    }

    View full-size slide

  240. Kitt Hodsden • @kitt • http://ki.tt/sotr

    ...

    241
    Sass syntax, talking @extend

    View full-size slide

  241. Kitt Hodsden • @kitt • http://ki.tt/sotr 242
    Sass syntax, talking @extend

    ...

    View full-size slide

  242. Kitt Hodsden • @kitt • http://ki.tt/sotr
    @mixin
    @include
    243
    Quick! Sass in 5 slides!

    View full-size slide

  243. Kitt Hodsden • @kitt • http://ki.tt/sotr 244
    Sass syntax, @mixin
    @mixin module($parent-color) {
    color: darken($parent-color, 50%);
    }
    .main_module {
    @include module(#ccc);
    min-height: 3em;
    }
    .sidebar_module {
    @include module(#444);
    min-height: 2em;
    }

    View full-size slide

  244. Kitt Hodsden • @kitt • http://ki.tt/sotr
    When you can, use a
    Compass (or Bourbon) mixin.
    245

    View full-size slide

  245. Kitt Hodsden • @kitt • http://ki.tt/sotr 246
    Sass syntax, @mixin
    @import "compass/css3/box-sizing";
    el {
    @include box-sizing(border-box);
    }
    http://compass-style.org/reference/compass/css3/box_sizing/

    View full-size slide

  246. Kitt Hodsden • @kitt • http://ki.tt/sotr 247
    Sass Overview
    http://caniuse.com/

    View full-size slide

  247. Kitt Hodsden • @kitt • http://ki.tt/sotr
    @mixin vs @extend
    248
    Sass Overview

    View full-size slide

  248. Kitt Hodsden • @kitt • http://ki.tt/sotr
    You’re awesome.
    249

    View full-size slide

  249. Kitt Hodsden • @kitt • http://ki.tt/sotr
    _partials.scss
    250
    Quick! Sass in 5 slides!

    View full-size slide

  250. Kitt Hodsden • @kitt • http://ki.tt/sotr 251
    Sass syntax, @mixin
    @import "vars";
    @import "mixins";
    @import "layouts/*";

    View full-size slide

  251. Kitt Hodsden • @kitt • http://ki.tt/sotr 252
    Quick! Sass in 5 slides!

    View full-size slide

  252. Kitt Hodsden • @kitt • http://ki.tt/sotr 253
    Quick! Sass in 5 slides!
    @if/@else
    @for
    @each
    @functions
    (return a single value)

    View full-size slide

  253. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Media Queries
    made EASY
    254

    View full-size slide

  254. Kitt Hodsden • @kitt • http://ki.tt/sotr 255
    @mixin bp($point) {
    $bp-mobile: "(max-width: 600px)";
    $bp-notso: "(max-width: 1250px)";
    $bp-fullon: "(max-width: 1600px)";
    @if $point == mq-fullon {
    @media #{$bp-fullon} { @content; }
    }
    @else if $point == mq-notso {
    @media #{$bp-notso} { @content; }
    }
    @else if $point == mq-mobile {
    @media #{$bp-mobile} { @content; }
    }
    }

    View full-size slide

  255. Kitt Hodsden • @kitt • http://ki.tt/sotr 256
    h1 {
    font-size: 20px;
    font-family: $font-main;
    @include bp(mq-notso) {
    font-size: 30px;
    }
    @include bp(mq-fullon) {
    font-size: 60px;
    }
    }

    View full-size slide

  256. Kitt Hodsden • @kitt • http://ki.tt/sotr 257
    h1 {
    font-size: 20px;
    }
    @media (max-width: 1250px) {
    h1 {
    font-size: 30px;
    }
    }
    @media (max-width: 1600px) {
    h1 {
    font-size: 60px;
    }
    }

    View full-size slide

  257. Kitt Hodsden • @kitt • http://ki.tt/sotr
    http://breakpoint-sass.com/
    258
    Quick! Sass in 5 slides!

    View full-size slide

  258. Kitt Hodsden • @kitt • http://ki.tt/sotr
    More Information.
    259
    Sass for Designers
    Pragmatic Guide To Sass
    Sass and Compass in Action

    View full-size slide

  259. Kitt Hodsden • @kitt • http://ki.tt/sotr 260
    sass --watch --line-numbers --style expanded scss:css

    View full-size slide

  260. Kitt Hodsden • @kitt • http://ki.tt/sotr 261
    Guiding principles!
    1. Embrace the DRY principle
    2. Make changes easy
    3. Make finding mistakes easy

    View full-size slide

  261. Kitt Hodsden • @kitt • http://ki.tt/sotr
    aliases / functions / scripts
    262

    View full-size slide

  262. Kitt Hodsden • @kitt • http://ki.tt/sotr 263
    alias sassgo="cd ~/project ;sass --watch \
    --line-numbers --style expanded scss:css"

    View full-size slide

  263. Kitt Hodsden • @kitt • http://ki.tt/sotr 264
    function sassgo() {
    cd $1;
    sass --watch --line-numbers --style expanded scss:css
    }

    View full-size slide

  264. Kitt Hodsden • @kitt • http://ki.tt/sotr 265
    #!/usr/bin/env bash
    cd ~/project
    sass --watch --line-numbers --style expanded scss:css

    View full-size slide

  265. Kitt Hodsden • @kitt • http://ki.tt/sotr 266

    View full-size slide

  266. Kitt Hodsden • @kitt • http://ki.tt/sotr 267

    View full-size slide

  267. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Compass has
    its config.rb
    268

    View full-size slide

  268. Kitt Hodsden • @kitt • http://ki.tt/sotr 269

    View full-size slide

  269. Kitt Hodsden • @kitt • http://ki.tt/sotr 270
    compass config config.rb --sass-dir=scss \
    --css-dir=css --javascripts-dir=js \
    --output-style=expanded
    How to create a compass conifig.rb file

    View full-size slide

  270. Kitt Hodsden • @kitt • http://ki.tt/sotr 271
    $ compass watch

    View full-size slide

  271. Kitt Hodsden • @kitt • http://ki.tt/sotr
    GUI
    272

    View full-size slide

  272. Kitt Hodsden • @kitt • http://ki.tt/sotr 273
    https://incident57.com/codekit/

    View full-size slide

  273. Kitt Hodsden • @kitt • http://ki.tt/sotr 274
    http://compass.kkbox.com/

    View full-size slide

  274. Kitt Hodsden • @kitt • http://ki.tt/sotr 275
    http://koala-app.com/

    View full-size slide

  275. Kitt Hodsden • @kitt • http://ki.tt/sotr 276
    https://github.com/vladikoff/grunt-devtools

    View full-size slide

  276. Kitt Hodsden • @kitt • http://ki.tt/sotr
    1. Watch for file changes
    2. Compile our Sass to CSS
    3. Refresh the browser on change
    277
    What we want grunt to do.

    View full-size slide

  277. Kitt Hodsden • @kitt • http://ki.tt/sotr
    npm install grunt-contrib-compass --save-dev
    278
    Installing the compass compiling node package

    View full-size slide

  278. Kitt Hodsden • @kitt • http://ki.tt/sotr 279
    grunt.initConfig({
    compass: {
    dist: {
    options: {
    config: 'config.rb'
    }
    }
    }
    });

    View full-size slide

  279. Kitt Hodsden • @kitt • http://ki.tt/sotr 280
    grunt.initConfig({
    watch: {
    scss: {
    files: ['**/*.scss'],
    tasks: ['compass']
    }
    },
    compass: {
    dev: {
    options: {
    sassDir: 'scss',
    cssDir: 'css',
    outputStyle: 'expanded'
    }
    },
    }
    });

    View full-size slide

  280. Kitt Hodsden • @kitt • http://ki.tt/sotr 281
    grunt.initConfig({
    watch: {
    scss: {
    files: ['**/*.scss'],
    tasks: ['compass']
    }
    },
    compass: {
    dev: {
    options: {
    sassDir: 'scss',
    cssDir: 'css',
    outputStyle: 'expanded'
    }
    },
    }
    });

    View full-size slide

  281. Kitt Hodsden • @kitt • http://ki.tt/sotr 282
    grunt.initConfig({
    watch: {
    scss: {
    files: ['**/*.scss'],
    tasks: ['compass']
    }
    },
    compass: {
    dev: {
    options: {
    sassDir: 'scss',
    cssDir: 'css',
    outputStyle: 'expanded'
    }
    },
    }
    });

    View full-size slide

  282. Kitt Hodsden • @kitt • http://ki.tt/sotr 283
    compass: {
    dev: {
    options: {
    sassDir: 'scss',
    cssDir: 'css',
    outputStyle: 'expanded'
    }
    },
    prod: {
    options: {
    sassDir: 'scss',
    cssDir: 'css',
    outputStyle: 'compressed'
    }
    },
    }

    View full-size slide

  283. Kitt Hodsden • @kitt • http://ki.tt/sotr 284
    grunt.loadNpmTasks('grunt-contrib-compass');
    ...
    grunt.registerTask('default', ['compass:dev', ‘watch’]);

    View full-size slide

  284. Kitt Hodsden • @kitt • http://ki.tt/sotr 285

    View full-size slide

  285. Kitt Hodsden • @kitt • http://ki.tt/sotr 286
    1. Reduce file sizes
    2. Reduce the number of files
    3. Reduce content rendering time

    View full-size slide

  286. Kitt Hodsden • @kitt • http://ki.tt/sotr 287
    @import "compass/utilities/sprites";
    ...
    $sprites-spacing: 20px;
    @import “../img/sprites/*png”;
    Creating sprite images with Compass

    View full-size slide

  287. Kitt Hodsden • @kitt • http://ki.tt/sotr 288
    @import "compass/utilities/sprites";
    ...
    $orange-spacing: 20px;
    @import “../img/orange/*png”;
    Sprite names are dependent on your directory name

    View full-size slide

  288. Kitt Hodsden • @kitt • http://ki.tt/sotr 289
    @import "compass/utilities/sprites";
    ...
    $awesome-spacing: 20px;
    @import “../img/awesome/*png”;
    Sprite names are dependent on your directory name

    View full-size slide

  289. Kitt Hodsden • @kitt • http://ki.tt/sotr 290
    Using generated sprites
    .footer-follow-us{
    .twitter { @include awesome-sprite(follow-us-twitter); }
    .facebook { @include awesome-sprite(follow-us-fb); }
    .google { @include awesome-sprite(follow-us-google); }
    .pinterest { @include awesome-sprite(follow-us-pins); }
    }
    .awesome-sprite,
    .footer-follow-us .twitter,
    .footer-follow-us .facebook,
    .footer-follow-us .google,
    .footer-follow-us .pinterest { background: url('../images/awesome-s34fe0604ab.png')
    no-repeat; }
    .footer-follow-us .twitter { background-position: 0 -96px; }
    .footer-follow-us .facebook { background-position: 0 0; }
    .footer-follow-us .google { background-position: 0 -32px; }
    .footer-follow-us .pinterest { background-position: 0 -64px; }

    View full-size slide

  290. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Uh...
    291
    How do we check these?

    View full-size slide

  291. Kitt Hodsden • @kitt • http://ki.tt/sotr
    1. Embrace the DRY principle
    2. Make changes easy
    3. Make finding mistakes easy
    292
    Guiding principles of making our workflows AWESOME

    View full-size slide

  292. Kitt Hodsden • @kitt • http://ki.tt/sotr 293
    How do we check these?

    View full-size slide

  293. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Source Maps
    294
    How do we check these?

    View full-size slide

  294. Kitt Hodsden • @kitt • http://ki.tt/sotr 295
    c
    http://code.tutsplus.com/tutorials/developing-with-sass-and-chrome-devtools--net-32805

    View full-size slide

  295. Kitt Hodsden • @kitt • http://ki.tt/sotr 296
    Generating

    View full-size slide

  296. Kitt Hodsden • @kitt • http://ki.tt/sotr 297
    sass --compass --sourcemap --watch scss:css

    View full-size slide

  297. Kitt Hodsden • @kitt • http://ki.tt/sotr 298
    gem install compass --pre

    View full-size slide

  298. Kitt Hodsden • @kitt • http://ki.tt/sotr 299
    compass: {
    dev: {
    options: {
    sassDir: 'scss',
    cssDir: 'css',
    outputStyle: 'expanded',
    sourcemap: true
    }
    },
    prod: {
    options: {
    sassDir: 'scss',
    cssDir: 'css',
    outputStyle: 'compressed'
    }
    },
    }

    View full-size slide

  299. Kitt Hodsden • @kitt • http://ki.tt/sotr 300
    Don’t deploy to production!

    View full-size slide

  300. Kitt Hodsden • @kitt • http://ki.tt/sotr 301
    # apache

    Order allow, deny
    Deny from all

    # nginx
    location ~* \.map$ {
    ! deny all;
    }

    View full-size slide

  301. Kitt Hodsden • @kitt • http://ki.tt/sotr 302
    Using

    View full-size slide

  302. Kitt Hodsden • @kitt • http://ki.tt/sotr 303
    This works in > Firefox 29, right click to show CSS

    View full-size slide

  303. Kitt Hodsden • @kitt • http://ki.tt/sotr 304

    View full-size slide

  304. Kitt Hodsden • @kitt • http://ki.tt/sotr 305
    1. Reduce file sizes
    2. Reduce the number of files
    3. Reduce content rendering time

    View full-size slide

  305. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Don’t nest more than 3 deep
    306
    http://css-tricks.com/sass-style-guide/

    View full-size slide

  306. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Avoid using tag selectors
    Use class selectors if you can.
    307
    https://developers.google.com/speed/docs/best-practices/rendering

    View full-size slide

  307. Kitt Hodsden • @kitt • http://ki.tt/sotr
    npm install grunt-devperf --save-dev
    308

    View full-size slide

  308. Kitt Hodsden • @kitt • http://ki.tt/sotr 309
    devperf: {
    options: {
    urls: [
    'http://localhost:8000'
    ]
    }
    }

    View full-size slide

  309. Kitt Hodsden • @kitt • http://ki.tt/sotr 310

    View full-size slide

  310. Kitt Hodsden • @kitt • http://ki.tt/sotr 311
    https://github.com/gmetais/grunt-devperf/

    View full-size slide

  311. Kitt Hodsden • @kitt • http://ki.tt/sotr
    1. Embrace the DRY principle
    2. Make changes easy
    3. Make finding mistakes easy
    312
    Guiding principles of making our workflows AWESOME

    View full-size slide

  312. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Regression testing
    313

    View full-size slide

  313. Kitt Hodsden • @kitt • http://ki.tt/sotr
    PhantomCSS
    Wraith
    DiffUX
    dpxdt
    314

    View full-size slide

  314. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Wraith
    315

    View full-size slide

  315. Kitt Hodsden • @kitt • http://ki.tt/sotr
    gem install wraith
    316

    View full-size slide

  316. Kitt Hodsden • @kitt • http://ki.tt/sotr 317
    $ wraith setup
    create configs/config.yaml
    create javascript/snap.js
    phantomcss grunt task

    View full-size slide

  317. Kitt Hodsden • @kitt • http://ki.tt/sotr 318
    #Headless browser option
    browser:
    webkit: "phantomjs"
    # gecko: "slimerjs"
    #If you want to have multiple snapping files, set the file name here
    snap_file: "js/wraith-snap.js"
    # Type the name of the directory that shots will be stored in
    directory:
    - 'shots'
    # Add only 2 domains, key will act as a label
    domains:
    local: "http://localhost:8000"
    stage: "http://fontsmack.fallgears.com"
    #Type screen widths below, here are a couple of examples
    screen_widths:
    - 320
    - 768
    - 1280
    #Type page URL paths below, here are a couple of examples
    paths:
    home: /
    allthethings: /all-the-things.html
    phantomcss grunt task

    View full-size slide

  318. Kitt Hodsden • @kitt • http://ki.tt/sotr 319
    #Headless browser option
    browser:
    webkit: "phantomjs"
    # gecko: "slimerjs"
    #If you want to have multiple snapping files, set the file name here
    snap_file: "js/wraith-snap.js"
    # Type the name of the directory that shots will be stored in
    directory:
    - 'shots'
    # Add only 2 domains, key will act as a label
    domains:
    local: "http://localhost:8000"
    stage: "http://fontsmack.fallgears.com"
    #Type screen widths below, here are a couple of examples
    screen_widths:
    - 320
    - 768
    - 1280
    #Type page URL paths below, here are a couple of examples
    paths:
    home: /
    allthethings: /all-the-things.html
    phantomcss grunt task

    View full-size slide

  319. Kitt Hodsden • @kitt • http://ki.tt/sotr 320
    #Headless browser option
    browser:
    webkit: "phantomjs"
    # gecko: "slimerjs"
    #If you want to have multiple snapping files, set the file name here
    snap_file: "js/wraith-snap.js"
    # Type the name of the directory that shots will be stored in
    directory:
    - 'shots'
    # Add only 2 domains, key will act as a label
    domains:
    local: "http://localhost:8000"
    stage: "http://fontsmack.fallgears.com"
    #Type screen widths below, here are a couple of examples
    screen_widths:
    - 320
    - 768
    - 1280
    #Type page URL paths below, here are a couple of examples
    paths:
    home: /
    allthethings: /all-the-things.html
    phantomcss grunt task

    View full-size slide

  320. Kitt Hodsden • @kitt • http://ki.tt/sotr 321
    #Headless browser option
    browser:
    webkit: "phantomjs"
    # gecko: "slimerjs"
    #If you want to have multiple snapping files, set the file name here
    snap_file: "js/wraith-snap.js"
    # Type the name of the directory that shots will be stored in
    directory:
    - 'shots'
    # Add only 2 domains, key will act as a label
    domains:
    local: "http://localhost:8000"
    stage: "http://fontsmack.fallgears.com"
    #Type screen widths below, here are a couple of examples
    screen_widths:
    - 320
    - 768
    - 1280
    #Type page URL paths below, here are a couple of examples
    paths:
    home: /
    allthethings: /all-the-things.html
    phantomcss grunt task

    View full-size slide

  321. Kitt Hodsden • @kitt • http://ki.tt/sotr 322
    #Headless browser option
    browser:
    webkit: "phantomjs"
    # gecko: "slimerjs"
    #If you want to have multiple snapping files, set the file name here
    snap_file: "js/wraith-snap.js"
    # Type the name of the directory that shots will be stored in
    directory:
    - 'shots'
    # Add only 2 domains, key will act as a label
    domains:
    local: "http://localhost:8000"
    stage: "http://fontsmack.fallgears.com"
    #Type screen widths below, here are a couple of examples
    screen_widths:
    - 320
    - 768
    - 1280
    #Type page URL paths below, here are a couple of examples
    paths:
    home: /
    allthethings: /all-the-things.html
    phantomcss grunt task

    View full-size slide

  322. Kitt Hodsden • @kitt • http://ki.tt/sotr 323
    #Headless browser option
    browser:
    webkit: "phantomjs"
    # gecko: "slimerjs"
    #If you want to have multiple snapping files, set the file name here
    snap_file: "js/wraith-snap.js"
    # Type the name of the directory that shots will be stored in
    directory:
    - 'shots'
    # Add only 2 domains, key will act as a label
    domains:
    local: "http://localhost:8000"
    stage: "http://fontsmack.fallgears.com"
    #Type screen widths below, here are a couple of examples
    screen_widths:
    - 320
    - 768
    - 1280
    #Type page URL paths below, here are a couple of examples
    paths:
    home: /
    allthethings: /all-the-things.html
    phantomcss grunt task

    View full-size slide

  323. Kitt Hodsden • @kitt • http://ki.tt/sotr
    $ wraith capture automate
    324

    View full-size slide

  324. Kitt Hodsden • @kitt • http://ki.tt/sotr
    $ wraith capture automate
    325

    View full-size slide

  325. Kitt Hodsden • @kitt • http://ki.tt/sotr 326
    $ ls -l configs/
    automate.yaml
    config.yaml
    phantomcss grunt task

    View full-size slide

  326. Kitt Hodsden • @kitt • http://ki.tt/sotr 327
    $ wraith capture automate
    Creating Folders
    Snapping http://localhost:8000/ at width 320
    Snapping http://localhost:8000/ at width 1280
    Snapping http://localhost:8000/ at width 768
    Snapping http://localhost:8000/all-the-things.html at width 320
    Snapping http://fontsmack.fallgears.com/ at width 320
    Snapping http://fontsmack.fallgears.com/ at width 768
    Snapping http://fontsmack.fallgears.com/ at width 1280
    Snapping http://fontsmack.fallgears.com/all-the-things.html at width 320
    Snapping http://localhost:8000/all-the-things.html at width 768
    Snapping http://localhost:8000/all-the-things.html at width 1280
    Snapping http://fontsmack.fallgears.com/all-the-things.html at width 1280
    Snapping http://fontsmack.fallgears.com/all-the-things.html at width 768
    phantomcss grunt task

    View full-size slide

  327. Kitt Hodsden • @kitt • http://ki.tt/sotr 328

    View full-size slide

  328. Kitt Hodsden • @kitt • http://ki.tt/sotr
    PhantomCSS
    329

    View full-size slide

  329. Kitt Hodsden • @kitt • http://ki.tt/sotr
    npm install grunt-phantomcss --save-dev
    install details at
    https://www.npmjs.org/package/grunt-phantomcss
    330

    View full-size slide

  330. Kitt Hodsden • @kitt • http://ki.tt/sotr 331
    phantomcss: {
    desktop: {
    options: {
    screenshots: 'test/visual/desktop/',
    results: 'results/visual/desktop',
    viewportSize: [1024, 768]
    },
    src: [
    'test/visual/**.js'
    ]
    },
    mobile: {
    options: {
    screenshots: 'test/visual/mobile/',
    results: 'results/visual/mobile',
    viewportSize: [320, 480]
    },
    src: [
    'test/visual/**.js'
    ]
    }
    }
    phantomcss grunt task

    View full-size slide

  331. Kitt Hodsden • @kitt • http://ki.tt/sotr 332
    casper.start('http://localhost:8000/')
    .then(function() {
    phantomcss.screenshot('#region-branding', 'region-branding');
    }).
    then(function now_check_the_screenshots(){
    phantomCSS.compareAll();
    });
    phantomcss website flow

    View full-size slide

  332. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Seeing failures
    333
    http://tldr.huddle.com/blog/css-testing/

    View full-size slide

  333. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Style Guides
    334

    View full-size slide

  334. Kitt Hodsden • @kitt • http://ki.tt/sotr
    http://patternlab.io
    335

    View full-size slide

  335. Kitt Hodsden • @kitt • http://ki.tt/sotr
    npm install grunt-contrib-copy --save-dev
    npm install grunt-shell --save-dev
    336

    View full-size slide

  336. Kitt Hodsden • @kitt • http://ki.tt/sotr 337
    watch: {
    ...
    html: {
    files: ['patternlab/source/_patterns/**/*.mustache',
    'patternlab/source/**/*.json'],
    tasks: ['shell:patternlab'],
    options: {
    spawn: false
    }
    }
    }
    ...
    copy: {
    styleguide: {
    files: [{
    src: ['css/main.css'],
    dest: 'patternlab/public/css/style.css',
    filter: 'isFile'}]
    }
    }
    }
    phantomcss website flow

    View full-size slide

  337. Kitt Hodsden • @kitt • http://ki.tt/sotr 338
    grunt.registerTask('default', ['compass:dev', 'copy:sg', 'watch']);
    phantomcss website flow

    View full-size slide

  338. Kitt Hodsden • @kitt • http://ki.tt/sotr 339

    View full-size slide

  339. Kitt Hodsden • @kitt • http://ki.tt/sotr
    https://github.com/midnightspecial/patternlab-node
    340

    View full-size slide

  340. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Phew!
    341

    View full-size slide

  341. Kitt Hodsden • @kitt • http://ki.tt/sotr 342
    What magic do we do?
    Implement a design or prototype
    Update the designs
    Make sure it works in all browsers
    Make it faster

    View full-size slide

  342. Kitt Hodsden • @kitt • http://ki.tt/sotr
    From the beginning!
    343

    View full-size slide

  343. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Faster HTML
    344

    View full-size slide

  344. Kitt Hodsden • @kitt • http://ki.tt/sotr
    http://docs.emmet.io/
    345

    View full-size slide

  345. Kitt Hodsden • @kitt • http://ki.tt/sotr
    div#banner>div.logo+ul#navigation>li*4>a
    346

    View full-size slide

  346. Kitt Hodsden • @kitt • http://ki.tt/sotr









    347

    View full-size slide

  347. Kitt Hodsden • @kitt • http://ki.tt/sotr 348
    http://shortcutfoo.com/

    View full-size slide

  348. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Faster Setup
    349

    View full-size slide

  349. Kitt Hodsden • @kitt • http://ki.tt/sotr 350
    http://yeoman.io
    Yeoman

    View full-size slide

  350. Kitt Hodsden • @kitt • http://ki.tt/sotr
    yo
    351

    View full-size slide

  351. Kitt Hodsden • @kitt • http://ki.tt/sotr
    npm install -g yo
    352
    Installing yeoman globally

    View full-size slide

  352. Kitt Hodsden • @kitt • http://ki.tt/sotr 353
    # use a generator
    $ yo webapp
    # start the server
    $ grunt server
    # run tests
    $ grunt test
    # run default
    $ grunt

    View full-size slide

  353. Kitt Hodsden • @kitt • http://ki.tt/sotr 354
    # download new generator
    $ npm install generator-gruntplugin
    # run the generator
    $ yo gruntplugin

    View full-size slide

  354. Kitt Hodsden • @kitt • http://ki.tt/sotr 355
    # download new generator
    $ npm install generator-gruntfile
    # run the generator
    $ yo gruntfile

    View full-size slide

  355. Kitt Hodsden • @kitt • http://ki.tt/sotr 356
    Lots of generators available
    http://yeoman.io/official-generators.html

    View full-size slide

  356. Kitt Hodsden • @kitt • http://ki.tt/sotr 357
    # download new generator
    $ npm install generator-generator
    # create the directory
    $ mkdir generator-bigred && cd $_
    # run the generator
    $ yo generator

    View full-size slide

  357. Kitt Hodsden • @kitt • http://ki.tt/sotr
    http://yeoman.io/generators.html#writing-your-first-generator
    358
    http://ki.tt/yog

    View full-size slide

  358. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Wow, that was fast.
    359

    View full-size slide

  359. Kitt Hodsden • @kitt • http://ki.tt/sotr
    I skipped over
    Bundler
    Managing what ruby gems you have installed
    http://bundler.io/
    Vagrant
    Setting up development instances for consistency
    http://www.vagrantup.com/
    Creating your own Grunt tasks
    http://gruntjs.com/creating-tasks
    Bower
    Managing project dependencies
    http://bower.io/
    360

    View full-size slide

  360. Kitt Hodsden • @kitt • http://ki.tt/sotr
    Questions?
    361

    View full-size slide

  361. Kitt Hodsden • @kitt • http://ki.tt/sotr
    My Notes!
    http://ki.tt/sotr
    Your Notes!
    http://ki.tt/sotr14notes
    362

    View full-size slide