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

Automate All the Front-End Development Things!

Automate All the Front-End Development Things!

cfObjective 2014 talk slides on how to automate front-end workflows with Grunt, Sass, Browser-Sync, Yeoman, Alfred, application launchers, and the like.

Kitt Hodsden

May 15, 2014
Tweet

More Decks by Kitt Hodsden

Other Decks in Programming

Transcript

  1. Automate All the Front-End
    Development Things!
    Text
    Kitt Hodsden • http://ki.tt • @kitt
    1

    View Slide

  2. Kitt Hodsden • @kitt • http://ki.tt/cfo 2
    Hi!

    View Slide

  3. Kitt Hodsden • @kitt • http://ki.tt/cfo
    Who are you?
    3

    View Slide

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

    View Slide

  5. Kitt Hodsden • @kitt • http://ki.tt/cfo
    http://ki.tt/cfo
    5

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  11. Kitt Hodsden • @kitt • http://ki.tt/cfo
    Prerequisites!
    11

    View Slide

  12. Kitt Hodsden • @kitt • http://ki.tt/cfo
    node & ruby
    12
    We need node and ruby to use the tools we’re going to talk about.

    View Slide

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

    View Slide

  14. Kitt Hodsden • @kitt • http://ki.tt/cfo 14
    # 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 Slide

  15. Kitt Hodsden • @kitt • http://ki.tt/cfo 15
    HOMEBREW
    http://mxcl.github.com/homebrew/
    $ brew install ruby
    RVM RUBY VERSION MANAGER
    https://rvm.io/rvm/install
    Install ruby in different ways on OSX
    OSX

    View Slide

  16. Kitt Hodsden • @kitt • http://ki.tt/cfo 16
    HOMEBREW
    http://mxcl.github.com/homebrew/
    $ brew install ruby
    RVM RUBY VERSION MANAGER
    https://rvm.io/rvm/install
    Install ruby in different ways on OSX
    OSX

    View Slide

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

    View Slide

  18. Kitt Hodsden • @kitt • http://ki.tt/cfo 18
    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

    View Slide

  19. Kitt Hodsden • @kitt • http://ki.tt/cfo 19
    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

    View Slide

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

    View Slide

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

    View Slide

  22. Kitt Hodsden • @kitt • http://ki.tt/cfo
    http://ki.tt/cfo
    22

    View Slide

  23. Kitt Hodsden • @kitt • http://ki.tt/cfo 23

    View Slide

  24. Kitt Hodsden • @kitt • http://ki.tt/cfo 24
    Automate All the Front-End
    Development Things!

    View Slide

  25. Kitt Hodsden • @kitt • http://ki.tt/cfo
    Make your Front-End
    Workflow AWESOME
    25

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  34. Kitt Hodsden • @kitt • http://ki.tt/cfo 34
    We’re MAGICAL

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  39. Kitt Hodsden • @kitt • http://ki.tt/cfo
    change.
    click.
    change.
    click.
    39

    View Slide

  40. Kitt Hodsden • @kitt • http://ki.tt/cfo
    change.
    click.
    change.
    click.
    40
    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 Slide

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

    View Slide

  42. Kitt Hodsden • @kitt • http://ki.tt/cfo 42

    View Slide

  43. Kitt Hodsden • @kitt • http://ki.tt/cfo
    LiveReload
    43
    http://livereload.com/

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  47. Kitt Hodsden • @kitt • http://ki.tt/cfo 47
    or!

    View Slide

  48. Kitt Hodsden • @kitt • http://ki.tt/cfo 48
    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 Slide

  49. Kitt Hodsden • @kitt • http://ki.tt/cfo 49

    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 Slide

  50. Kitt Hodsden • @kitt • http://ki.tt/cfo 50

    View Slide

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

    View Slide

  52. Kitt Hodsden • @kitt • http://ki.tt/cfo 52

    View Slide

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

    View Slide

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

    View Slide

  55. Kitt Hodsden • @kitt • http://ki.tt/cfo
    http://ki.tt/cfo
    55

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  60. Kitt Hodsden • @kitt • http://ki.tt/cfo 60
    // save this into run-server.js
    var connect = require('connect');
    connect.createServer(
    connect.static(__dirname)
    ).listen(8080);
    If you don’t have a local development environment, use this run-server.js

    View Slide

  61. Kitt Hodsden • @kitt • http://ki.tt/cfo 61
    $ npm install connect
    ...
    $ node run-server.js
    # open http://localhost:8080/index.html
    # control-c to stop
    If you don’t have a local development environment, install the connect package

    View Slide

  62. Kitt Hodsden • @kitt • http://ki.tt/cfo 62
    > npm install connect
    ...
    > node run-server.js
    # open http://127.0.0.1:8080/index.html
    # control-c to stop
    If you don’t have a local development environment on Windows, install the connect package

    View Slide

  63. Kitt Hodsden • @kitt • http://ki.tt/cfo 63
    You can accept this local JS file running on node, turn it off later!

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  67. Kitt Hodsden • @kitt • http://ki.tt/cfo 67
    $ browser-sync
    $

    View Slide

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

    View Slide

  69. Kitt Hodsden • @kitt • http://ki.tt/cfo
    bs-config.js
    69

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  76. Kitt Hodsden • @kitt • http://ki.tt/cfo 76
    $ 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 Slide

  77. Kitt Hodsden • @kitt • http://ki.tt/cfo 77

    View Slide

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

    View Slide

  79. Kitt Hodsden • @kitt • http://ki.tt/cfo
    click.
    copy.
    scroll.
    click.
    paste.
    79

    View Slide

  80. Kitt Hodsden • @kitt • http://ki.tt/cfo 80

    View Slide

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

    View Slide

  82. Kitt Hodsden • @kitt • http://ki.tt/cfo
    Skylight
    http://www.candylabs.com/skylight
    Launchy
    http://www.launchy.net/
    http://pylaunchy.sourceforge.net/docs/
    82

    View Slide

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

    View Slide

  84. Kitt Hodsden • @kitt • http://ki.tt/cfo 84

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  88. Kitt Hodsden • @kitt • http://ki.tt/cfo 88

    View Slide

  89. Kitt Hodsden • @kitt • http://ki.tt/cfo 89
    Alfred looking up jQuery.

    View Slide

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

    View Slide

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

    View Slide

  92. Kitt Hodsden • @kitt • http://ki.tt/cfo 92
    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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  98. Kitt Hodsden • @kitt • http://ki.tt/cfo 98
    $ 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 Slide

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

    View Slide

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

    View Slide

  101. Kitt Hodsden • @kitt • http://ki.tt/cfo 101
    {
    "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 Slide

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

    View Slide

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

    View Slide

  104. Kitt Hodsden • @kitt • http://ki.tt/cfo 104
    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 Slide

  105. Kitt Hodsden • @kitt • http://ki.tt/cfo 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 Slide

  106. Kitt Hodsden • @kitt • http://ki.tt/cfo 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 Slide

  107. Kitt Hodsden • @kitt • http://ki.tt/cfo 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 Slide

  108. Kitt Hodsden • @kitt • http://ki.tt/cfo
    browser-sync
    108

    View Slide

  109. Kitt Hodsden • @kitt • http://ki.tt/cfo
    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
    109
    How to add a task to grunt

    View Slide

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

    View Slide

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

    View Slide

  112. Kitt Hodsden • @kitt • http://ki.tt/cfo
    THIS IS OKAY.
    112

    View Slide

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

    View Slide

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

    View Slide

  115. Kitt Hodsden • @kitt • http://ki.tt/cfo 115
    $ 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 Slide

  116. Kitt Hodsden • @kitt • http://ki.tt/cfo 116
    "grunt-browser-sync": "~0.7.0"

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  120. Kitt Hodsden • @kitt • http://ki.tt/cfo 120
    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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

  124. Kitt Hodsden • @kitt • http://ki.tt/cfo 124

    View Slide

  125. Kitt Hodsden • @kitt • http://ki.tt/cfo 125
    modern.ie

    View Slide

  126. Kitt Hodsden • @kitt • http://ki.tt/cfo 126

    View Slide

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

    View Slide

  128. Kitt Hodsden • @kitt • http://ki.tt/cfo
    Javascript?
    128

    View Slide

  129. Kitt Hodsden • @kitt • http://ki.tt/cfo 129
    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 Slide

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

    View Slide

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

    View Slide

  132. Kitt Hodsden • @kitt • http://ki.tt/cfo 132
    ...
    // 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

  136. Kitt Hodsden • @kitt • http://ki.tt/cfo 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  149. Kitt Hodsden • @kitt • http://ki.tt/cfo 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 Slide

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

    View Slide

  151. Kitt Hodsden • @kitt • http://ki.tt/cfo 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  159. Kitt Hodsden • @kitt • http://ki.tt/cfo
    WHOO!
    159

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  165. Kitt Hodsden • @kitt • http://ki.tt/cfo
    Change the font BLUE
    165
    Easiest change ever!

    View Slide

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

    View Slide

  167. Kitt Hodsden • @kitt • http://ki.tt/cfo 167
    Well, phooey. The ticket was reopened.

    View Slide

  168. Kitt Hodsden • @kitt • http://ki.tt/cfo 168
    Soon, EVERYTHING is important!

    View Slide

  169. Kitt Hodsden • @kitt • http://ki.tt/cfo 169

    View Slide

  170. Kitt Hodsden • @kitt • http://ki.tt/cfo 170

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  175. Kitt Hodsden • @kitt • http://ki.tt/cfo
    Quick Check!
    Did you go to Andy Matthews Sass session?
    175

    View Slide

  176. Kitt Hodsden • @kitt • http://ki.tt/cfo
    Are we passing GO?
    Are we collecting $200?
    176

    View Slide

  177. Kitt Hodsden • @kitt • http://ki.tt/cfo
    Sass ⟳ CSS
    177

    View Slide

  178. Kitt Hodsden • @kitt • http://ki.tt/cfo
    Getting started with Sass
    178

    View Slide

  179. Kitt Hodsden • @kitt • http://ki.tt/cfo
    Install it.
    179

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  183. Kitt Hodsden • @kitt • http://ki.tt/cfo
    CSS 㱺 Sass
    183

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  188. Kitt Hodsden • @kitt • http://ki.tt/cfo 188
    $ 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 Slide

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

    View Slide

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

    View Slide

  191. Kitt Hodsden • @kitt • http://ki.tt/cfo
    $variables
    191
    Quick! Sass in 5 slides!

    View Slide

  192. Kitt Hodsden • @kitt • http://ki.tt/cfo 192
    $variable: value;
    Before variables...

    View Slide

  193. Kitt Hodsden • @kitt • http://ki.tt/cfo 193
    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 Slide

  194. Kitt Hodsden • @kitt • http://ki.tt/cfo 194
    $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 Slide

  195. Kitt Hodsden • @kitt • http://ki.tt/cfo 195
    $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 Slide

  196. Kitt Hodsden • @kitt • http://ki.tt/cfo 196
    $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 Slide

  197. Kitt Hodsden • @kitt • http://ki.tt/cfo
    Variable name best practice.
    197

    View Slide

  198. Kitt Hodsden • @kitt • http://ki.tt/cfo 198
    $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 Slide

  199. Kitt Hodsden • @kitt • http://ki.tt/cfo
    Nested syntax
    199
    Quick! Sass in 5 slides!

    View Slide

  200. Kitt Hodsden • @kitt • http://ki.tt/cfo 200
    .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 Slide

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

    View Slide

  202. Kitt Hodsden • @kitt • http://ki.tt/cfo
    @extend
    202
    Quick! Sass in 5 slides!

    View Slide

  203. Kitt Hodsden • @kitt • http://ki.tt/cfo 203
    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 Slide

  204. Kitt Hodsden • @kitt • http://ki.tt/cfo 204
    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 Slide

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

    ...

    205
    Sass syntax, talking @extend

    View Slide

  206. Kitt Hodsden • @kitt • http://ki.tt/cfo 206
    Sass syntax, talking @extend

    ...

    View Slide

  207. Kitt Hodsden • @kitt • http://ki.tt/cfo
    @mixin
    @include
    207
    Quick! Sass in 5 slides!

    View Slide

  208. Kitt Hodsden • @kitt • http://ki.tt/cfo 208
    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 Slide

  209. Kitt Hodsden • @kitt • http://ki.tt/cfo
    When you can, use a
    Compass mixin.
    209

    View Slide

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

    View Slide

  211. Kitt Hodsden • @kitt • http://ki.tt/cfo
    @mixin vs @extend
    211
    Sass Overview

    View Slide

  212. Kitt Hodsden • @kitt • http://ki.tt/cfo
    You’re awesome.
    212

    View Slide

  213. Kitt Hodsden • @kitt • http://ki.tt/cfo
    _partials.scss
    213
    Quick! Sass in 5 slides!

    View Slide

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

    View Slide

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

    View Slide

  216. Kitt Hodsden • @kitt • http://ki.tt/cfo
    Media Queries
    made EASY
    216

    View Slide

  217. Kitt Hodsden • @kitt • http://ki.tt/cfo 217
    @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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  223. Kitt Hodsden • @kitt • http://ki.tt/cfo
    Compass has
    its config.rb
    223

    View Slide

  224. Kitt Hodsden • @kitt • http://ki.tt/cfo 224

    View Slide

  225. Kitt Hodsden • @kitt • http://ki.tt/cfo 225
    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 Slide

  226. Kitt Hodsden • @kitt • http://ki.tt/cfo 226
    $ compass watch

    View Slide

  227. Kitt Hodsden • @kitt • http://ki.tt/cfo
    GUI
    227

    View Slide

  228. Kitt Hodsden • @kitt • http://ki.tt/cfo 228
    https://incident57.com/codekit/

    View Slide

  229. Kitt Hodsden • @kitt • http://ki.tt/cfo 229
    http://compass.kkbox.com/

    View Slide

  230. Kitt Hodsden • @kitt • http://ki.tt/cfo 230
    http://koala-app.com/

    View Slide

  231. Kitt Hodsden • @kitt • http://ki.tt/cfo 231
    https://github.com/vladikoff/grunt-devtools

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  245. Kitt Hodsden • @kitt • http://ki.tt/cfo 245
    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 Slide

  246. Kitt Hodsden • @kitt • http://ki.tt/cfo
    Uh...
    246
    How do we check these?

    View Slide

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

    View Slide

  248. Kitt Hodsden • @kitt • http://ki.tt/cfo 248
    How do we check these?

    View Slide

  249. Kitt Hodsden • @kitt • http://ki.tt/cfo
    Source Maps
    249
    How do we check these?

    View Slide

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

    View Slide

  251. Kitt Hodsden • @kitt • http://ki.tt/cfo 251
    Generating

    View Slide

  252. Kitt Hodsden • @kitt • http://ki.tt/cfo 252
    sass --compass --sourcemap --watch scss:css

    View Slide

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

    View Slide

  254. Kitt Hodsden • @kitt • http://ki.tt/cfo 254
    Don’t deploy to production!

    View Slide

  255. Kitt Hodsden • @kitt • http://ki.tt/cfo 255
    Using

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  261. Kitt Hodsden • @kitt • http://ki.tt/cfo
    Regression testing
    261

    View Slide

  262. Kitt Hodsden • @kitt • http://ki.tt/cfo
    PhantomCSS
    262

    View Slide

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

    View Slide

  264. Kitt Hodsden • @kitt • http://ki.tt/cfo 264
    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 Slide

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

    View Slide

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

    View Slide

  267. Kitt Hodsden • @kitt • http://ki.tt/cfo
    Phew!
    267

    View Slide

  268. Kitt Hodsden • @kitt • http://ki.tt/cfo
    Triggering tests
    268

    View Slide

  269. Kitt Hodsden • @kitt • http://ki.tt/cfo
    git pre-commit hook
    269
    svn works, too!

    View Slide

  270. Kitt Hodsden • @kitt • http://ki.tt/cfo
    Vagrant
    270

    View Slide

  271. Kitt Hodsden • @kitt • http://ki.tt/cfo
    Say Goodbye to “It works
    on my machine” with Chef
    and Vagrant.
    Curt Gratz, 3pm this room
    271

    View Slide

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

    View Slide

  273. Kitt Hodsden • @kitt • http://ki.tt/cfo
    From the beginning!
    273

    View Slide

  274. Kitt Hodsden • @kitt • http://ki.tt/cfo
    Faster HTML
    274

    View Slide

  275. Kitt Hodsden • @kitt • http://ki.tt/cfo
    http://docs.emmet.io/
    275

    View Slide

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

    View Slide

  277. Kitt Hodsden • @kitt • http://ki.tt/cfo









    277

    View Slide

  278. Kitt Hodsden • @kitt • http://ki.tt/cfo
    http://www.thoughtdelimited.org/thoughts/
    post.cfm/zen-coding-a-faster-way-to-write-html-
    and-tag-based-cfml-in-cfbuilder-cfeclipse
    278
    http://ki.tt/cfoem

    View Slide

  279. Kitt Hodsden • @kitt • http://ki.tt/cfo 279
    http://ki.tt/cfoem
    http://www.thoughtdelimited.org/thoughts/
    post.cfm/zen-coding-a-faster-way-to-write-html-
    and-tag-based-cfml-in-cfbuilder-cfeclipse

    View Slide

  280. Kitt Hodsden • @kitt • http://ki.tt/cfo 280
    http://yeoman.io
    Yeoman

    View Slide

  281. Kitt Hodsden • @kitt • http://ki.tt/cfo
    yo
    281

    View Slide

  282. Kitt Hodsden • @kitt • http://ki.tt/cfo
    npm install -g yo
    282
    Installing yeoman globally

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  289. Kitt Hodsden • @kitt • http://ki.tt/cfo
    Wow, that was fast.
    289

    View Slide

  290. Kitt Hodsden • @kitt • http://ki.tt/cfo
    I skipped over
    Bundler
    Managing what ruby gems you have installed
    http://bundler.io/
    Creating your own Grunt tasks
    http://gruntjs.com/creating-tasks
    Bower
    http://bower.io/
    290

    View Slide

  291. Kitt Hodsden • @kitt • http://ki.tt/cfo
    Questions?
    291

    View Slide

  292. Thanks!
    292
    You’re awesome!

    View Slide