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

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

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

    we here? 4
  5. Kitt Hodsden • @kitt • http://ki.tt/cfo http://ki.tt/cfo 5

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

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

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

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

    are we talking about?
  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!
  11. Kitt Hodsden • @kitt • http://ki.tt/cfo Prerequisites! 11

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

    downloading the installer and running it. http://nodejs.org
  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
  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
  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
  17. Kitt Hodsden • @kitt • http://ki.tt/cfo 17 https://unfiniti.com/software/mac/jewelrybox Ruby on

    OSX, I recommend JewelryBox, too.
  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
  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
  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
  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
  22. Kitt Hodsden • @kitt • http://ki.tt/cfo http://ki.tt/cfo 22

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

  24. Kitt Hodsden • @kitt • http://ki.tt/cfo 24 Automate All the

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

    AWESOME 25
  26. Kitt Hodsden • @kitt • http://ki.tt/cfo 1. Embrace the DRY

    principle 26 Guiding principles of making our workflows AWESOME
  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
  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
  29. Kitt Hodsden • @kitt • http://ki.tt/cfo Implement a design or

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

    prototype Update the designs 30 What magic do we do?
  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?
  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?
  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?
  34. Kitt Hodsden • @kitt • http://ki.tt/cfo 34 We’re MAGICAL

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

    we have a blank slate, really?
  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
  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
  39. Kitt Hodsden • @kitt • http://ki.tt/cfo change. click. change. click.

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

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

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

  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

  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

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

  48. Kitt Hodsden • @kitt • http://ki.tt/cfo 48 <script>document.write('<script src="http://' +

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

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

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

  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
  54. Kitt Hodsden • @kitt • http://ki.tt/cfo browser-sync 54 http://browsersync.io/

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

  56. Kitt Hodsden • @kitt • http://ki.tt/cfo npm 56 Node Package

    Manager for installng node packages
  57. Kitt Hodsden • @kitt • http://ki.tt/cfo 57 Open a new

    terminal or command window
  58. Kitt Hodsden • @kitt • http://ki.tt/cfo 58 In OSX, drag

    and drop the folder into the terminal window for the path.
  59. Kitt Hodsden • @kitt • http://ki.tt/cfo 59 In Windows, use

    right click cut and paste
  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
  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
  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
  63. Kitt Hodsden • @kitt • http://ki.tt/cfo 63 You can accept

    this local JS file running on node, turn it off later!
  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!
  65. Kitt Hodsden • @kitt • http://ki.tt/cfo browser-sync 65 http://browsersync.io/

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

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

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

    --server --files "css/*.css"
  69. Kitt Hodsden • @kitt • http://ki.tt/cfo bs-config.js 69

  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 $
  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
  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
  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
  74. Kitt Hodsden • @kitt • http://ki.tt/cfo https://github.com/shakyShane/browser-sync/wiki/options 74

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

  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 <script src='//192.168.5.6:3000/socket.io/socket.io.js'></script> <script>var ___socket___ = io.connect('http://192.168.5.6:3000');</script> <script src='//192.168.5.6:3001/client/browser-sync-client.0.7.0.js'></script> [BS] Watching files...
  77. Kitt Hodsden • @kitt • http://ki.tt/cfo 77

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

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

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

  81. Kitt Hodsden • @kitt • http://ki.tt/cfo Alfred http://alfredapp.com/ Quicksilver http://qsapp.com/

    Launchbar http://www.obdev.at/products/launchbar/ 81
  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
  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
  84. Kitt Hodsden • @kitt • http://ki.tt/cfo 84

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

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

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

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

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

    jQuery.
  90. Kitt Hodsden • @kitt • http://ki.tt/cfo 90 Dash has a

    large number of document sets
  91. Kitt Hodsden • @kitt • http://ki.tt/cfo 91 Naïve way to

    open all the browsers at once
  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
  93. Kitt Hodsden • @kitt • http://ki.tt/cfo Can you feel the

    awesome? 93 Awwwwwwwww yissssssssssssssssssss!
  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
  95. Kitt Hodsden • @kitt • http://ki.tt/cfo 95

  96. Kitt Hodsden • @kitt • http://ki.tt/cfo 96 $ npm install

    -g grunt-cli Install the grunt package
  97. Kitt Hodsden • @kitt • http://ki.tt/cfo 97 Windows users, use

    PowerShell
  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 ...
  99. Kitt Hodsden • @kitt • http://ki.tt/cfo Or just download them.

    http://ki.tt/fgrf 99
  100. Kitt Hodsden • @kitt • http://ki.tt/cfo 100 package.json Gruntfile.js The

    two files grunt uses
  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
  102. Kitt Hodsden • @kitt • http://ki.tt/cfo 102 $ npm install

    With a package.json file, you can install the needed packages easily.
  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.
  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
  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
  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
  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
  108. Kitt Hodsden • @kitt • http://ki.tt/cfo browser-sync 108

  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
  110. Kitt Hodsden • @kitt • http://ki.tt/cfo http://npmjs.org 110 Where to

    find node and grunt packages
  111. Kitt Hodsden • @kitt • http://ki.tt/cfo “grunt browser-sync” 111 What

    I searched for on npmjs.org
  112. Kitt Hodsden • @kitt • http://ki.tt/cfo THIS IS OKAY. 112

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

    state before downloading.
  114. Kitt Hodsden • @kitt • http://ki.tt/cfo 114 $ npm install

    grunt-browser-sync --save-dev Installing the browser-sync grunt package
  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
  116. Kitt Hodsden • @kitt • http://ki.tt/cfo 116 "grunt-browser-sync": "~0.7.0"

  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, } },
  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, } },
  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, } },
  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'] } }
  121. Kitt Hodsden • @kitt • http://ki.tt/cfo 121 grunt.loadNpmTasks('grunt-browser-sync'); ... grunt.registerTask('default',

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

  123. Kitt Hodsden • @kitt • http://ki.tt/cfo 123 $ grunt gogogo

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

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

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

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

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

    matchdep --save-dev Installing the browser-sync grunt package
  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']);
  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
  134. Kitt Hodsden • @kitt • http://ki.tt/cfo jshint 134

  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
  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']);
  137. Kitt Hodsden • @kitt • http://ki.tt/cfo 137

  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
  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
  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
  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
  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
  143. Kitt Hodsden • @kitt • http://ki.tt/cfo 1. Reduce file sizes

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

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

  146. Kitt Hodsden • @kitt • http://ki.tt/cfo npm install grunt-contrib-imagemin --save-dev

    146 Make pages load faster by reducing image sizes
  147. Kitt Hodsden • @kitt • http://ki.tt/cfo 147 imagemin: { prod:

    { files: [{ expand: true, cwd: 'imgs-src/', src: ['**/*.{png,jpg,gif}'], dest: 'imgs/' }] } }
  148. Kitt Hodsden • @kitt • http://ki.tt/cfo npm install grunt-svgmin --save-dev

    148 Reduce SVG sizes, too
  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
  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
  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
  152. Kitt Hodsden • @kitt • http://ki.tt/cfo npm install grunt-grunticon --save-dev

    152 SVG with PNG fallbacks https://github.com/filamentgroup/grunticon
  153. Kitt Hodsden • @kitt • http://ki.tt/cfo Non-images 153

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

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

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

    156 Minimize javascript files
  157. Kitt Hodsden • @kitt • http://ki.tt/cfo 157 1. Reduce file

    sizes 2. Reduce the number of files 3. Reduce content rendering time
  158. Kitt Hodsden • @kitt • http://ki.tt/cfo Sprites! 158 Making things

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

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

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

    161 Sprite your images
  162. Kitt Hodsden • @kitt • http://ki.tt/cfo 162 1. Reduce file

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

    sizes 2. Reduce the number of files 3. Reduce content rendering time
  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
  165. Kitt Hodsden • @kitt • http://ki.tt/cfo Change the font BLUE

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

    Easiest change ever!
  167. Kitt Hodsden • @kitt • http://ki.tt/cfo 167 Well, phooey. The

    ticket was reopened.
  168. Kitt Hodsden • @kitt • http://ki.tt/cfo 168 Soon, EVERYTHING is

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

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

  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
  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
  173. Kitt Hodsden • @kitt • http://ki.tt/cfo Use a CSS preprocessor.

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

    Stylus 174 Saw that coming, didn’t you?
  175. Kitt Hodsden • @kitt • http://ki.tt/cfo Quick Check! Did you

    go to Andy Matthews Sass session? 175
  176. Kitt Hodsden • @kitt • http://ki.tt/cfo Are we passing GO?

    Are we collecting $200? 176
  177. Kitt Hodsden • @kitt • http://ki.tt/cfo Sass ⟳ CSS 177

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

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

  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!
  181. Kitt Hodsden • @kitt • http://ki.tt/cfo COMPASS 181 Install Compass,

    too http://compass-style.org/install/
  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.
  183. Kitt Hodsden • @kitt • http://ki.tt/cfo CSS 㱺 Sass 183

  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.
  185. Kitt Hodsden • @kitt • http://ki.tt/cfo Move and rename files.

    185 How we get started with Sass in an existing project.
  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.
  187. Kitt Hodsden • @kitt • http://ki.tt/cfo Use sass-convert 187 How

    we get started with Sass in an existing project.
  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.
  189. Kitt Hodsden • @kitt • http://ki.tt/cfo Use http://css2sass.heroku.com 189 How

    we get started with Sass in an existing project.
  190. Kitt Hodsden • @kitt • http://ki.tt/cfo 190

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

    in 5 slides!
  192. Kitt Hodsden • @kitt • http://ki.tt/cfo 192 $variable: value; Before

    variables...
  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...
  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!
  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/
  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!
  197. Kitt Hodsden • @kitt • http://ki.tt/cfo Variable name best practice.

    197
  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
  199. Kitt Hodsden • @kitt • http://ki.tt/cfo Nested syntax 199 Quick!

    Sass in 5 slides!
  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
  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
  202. Kitt Hodsden • @kitt • http://ki.tt/cfo @extend 202 Quick! Sass

    in 5 slides!
  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; }
  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; }
  205. Kitt Hodsden • @kitt • http://ki.tt/cfo <div class=”box box-info”> ...

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

    @extend <div class=”box-info”> ... </div>
  207. Kitt Hodsden • @kitt • http://ki.tt/cfo @mixin @include 207 Quick!

    Sass in 5 slides!
  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; }
  209. Kitt Hodsden • @kitt • http://ki.tt/cfo When you can, use

    a Compass mixin. 209
  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/
  211. Kitt Hodsden • @kitt • http://ki.tt/cfo @mixin vs @extend 211

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

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

    in 5 slides!
  214. Kitt Hodsden • @kitt • http://ki.tt/cfo 214 Sass syntax, @mixin

    @import "vars"; @import "mixins"; @import "layouts/*";
  215. Kitt Hodsden • @kitt • http://ki.tt/cfo 215 Quick! Sass in

    5 slides! @if/@else @for @each @functions (return a single value)
  216. Kitt Hodsden • @kitt • http://ki.tt/cfo Media Queries made EASY

    216
  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; } } }
  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; } }
  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; } }
  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
  221. Kitt Hodsden • @kitt • http://ki.tt/cfo More Information. 221 Sass

    for Designers Pragmatic Guide To Sass Sass and Compass in Action
  222. Kitt Hodsden • @kitt • http://ki.tt/cfo 222 sass --watch --line-numbers

    --style expanded scss:css
  223. Kitt Hodsden • @kitt • http://ki.tt/cfo Compass has its config.rb

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

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

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

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

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

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

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

  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.
  233. Kitt Hodsden • @kitt • http://ki.tt/cfo npm install grunt-contrib-compass --save-dev

    233 Installing the compass compiling node package
  234. Kitt Hodsden • @kitt • http://ki.tt/cfo 234 grunt.initConfig({ compass: {

    dist: { options: { config: 'config.rb' } } } });
  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' } }, } });
  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' } }, } });
  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' } }, } });
  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' } }, }
  239. Kitt Hodsden • @kitt • http://ki.tt/cfo 239 grunt.loadNpmTasks('grunt-contrib-compass'); ... grunt.registerTask('default',

    ['compass:dev', ‘watch’]);
  240. Kitt Hodsden • @kitt • http://ki.tt/cfo 240

  241. Kitt Hodsden • @kitt • http://ki.tt/cfo 241 1. Reduce file

    sizes 2. Reduce the number of files 3. Reduce content rendering time
  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
  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
  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
  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; }
  246. Kitt Hodsden • @kitt • http://ki.tt/cfo Uh... 246 How do

    we check these?
  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
  248. Kitt Hodsden • @kitt • http://ki.tt/cfo 248 How do we

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

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

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

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

    --watch scss:css
  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' } }, }
  254. Kitt Hodsden • @kitt • http://ki.tt/cfo 254 Don’t deploy to

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

  256. Kitt Hodsden • @kitt • http://ki.tt/cfo 256 This works in

    > Firefox 29, right click to show CSS
  257. Kitt Hodsden • @kitt • http://ki.tt/cfo 257 1. Reduce file

    sizes 2. Reduce the number of files 3. Reduce content rendering time
  258. Kitt Hodsden • @kitt • http://ki.tt/cfo Don’t nest more than

    3 deep 258 http://css-tricks.com/sass-style-guide/
  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
  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
  261. Kitt Hodsden • @kitt • http://ki.tt/cfo Regression testing 261

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

  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
  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
  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
  266. Kitt Hodsden • @kitt • http://ki.tt/cfo Seeing failures 266 http://tldr.huddle.com/blog/css-testing/

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

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

  269. Kitt Hodsden • @kitt • http://ki.tt/cfo git pre-commit hook 269

    svn works, too!
  270. Kitt Hodsden • @kitt • http://ki.tt/cfo Vagrant 270

  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
  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
  273. Kitt Hodsden • @kitt • http://ki.tt/cfo From the beginning! 273

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

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

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

  277. Kitt Hodsden • @kitt • http://ki.tt/cfo <div id="banner"> <div class="logo"></div>

    <ul id="navigation"> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div> 277
  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
  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
  280. Kitt Hodsden • @kitt • http://ki.tt/cfo 280 http://yeoman.io Yeoman

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

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

    282 Installing yeoman globally
  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
  284. Kitt Hodsden • @kitt • http://ki.tt/cfo 284 # download new

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

    generator $ npm install generator-gruntfile # run the generator $ yo gruntfile
  286. Kitt Hodsden • @kitt • http://ki.tt/cfo 286 Lots of generators

    available http://yeoman.io/official-generators.html
  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
  288. Kitt Hodsden • @kitt • http://ki.tt/cfo http://yeoman.io/generators.html#writing-your-first-generator 288 http://ki.tt/yog

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

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

  292. Thanks! 292 You’re awesome!