Automate all the things

809 views

Published on

Published in: Software, Technology, Sports
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
809
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Automate all the things

  1. 1. Automate All the Front-End Development Things! Text Kitt Hodsden • http://ki.tt • @kitt 1
  2. 2. Kitt Hodsden • @kitt • http://ki.tt/cfo 2 Hi!
  3. 3. Kitt Hodsden • @kitt • http://ki.tt/cfo Who are you? 3
  4. 4. Kitt Hodsden • @kitt • http://ki.tt/cfo And what do have we here? 4
  5. 5. Kitt Hodsden • @kitt • http://ki.tt/cfo http://ki.tt/cfo 5
  6. 6. Kitt Hodsden • @kitt • http://ki.tt/cfo 6 http://ki.tt/cfo
  7. 7. Kitt Hodsden • @kitt • http://ki.tt/cfo 7 http://ki.tt/cfo http://ki.tt/cfo
  8. 8. Kitt Hodsden • @kitt • http://ki.tt/cfo Wait... what? 8 What are we talking about?
  9. 9. Kitt Hodsden • @kitt • http://ki.tt/cfo Wait... what? 9 What are we talking about?
  10. 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. 11. Kitt Hodsden • @kitt • http://ki.tt/cfo Prerequisites! 11
  12. 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. 13. Kitt Hodsden • @kitt • http://ki.tt/cfo 13 Setup node by downloading the installer and running it. http://nodejs.org
  14. 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:Ruby200binruby.exe > ruby --version ruby 2.0.0p451 Yay! Sass installed!See if you already have ruby installed
  15. 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. 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. 17. Kitt Hodsden • @kitt • http://ki.tt/cfo 17 https://unfiniti.com/software/mac/jewelrybox Ruby on OSX, I recommend JewelryBox, too.
  18. 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. 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. 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. 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. 22. Kitt Hodsden • @kitt • http://ki.tt/cfo http://ki.tt/cfo 22
  23. 23. Kitt Hodsden • @kitt • http://ki.tt/cfo 23
  24. 24. Kitt Hodsden • @kitt • http://ki.tt/cfo 24 Automate All the Front-End Development Things!
  25. 25. Kitt Hodsden • @kitt • http://ki.tt/cfo Make your Front-End Workflow AWESOME 25
  26. 26. Kitt Hodsden • @kitt • http://ki.tt/cfo 1. Embrace the DRY principle 26 Guiding principles of making our workflows AWESOME
  27. 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. 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. 29. Kitt Hodsden • @kitt • http://ki.tt/cfo Implement a design or prototype 29 What magic do we do?
  30. 30. Kitt Hodsden • @kitt • http://ki.tt/cfo Implement a design or prototype Update the designs 30 What magic do we do?
  31. 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. 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. 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. 34. Kitt Hodsden • @kitt • http://ki.tt/cfo 34 We’re MAGICAL
  35. 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. 36. Kitt Hodsden • @kitt • http://ki.tt/cfo 36 How often do we have a blank slate, really?
  37. 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. 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. 39. Kitt Hodsden • @kitt • http://ki.tt/cfo change. click. change. click. 39
  40. 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. 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. 42. Kitt Hodsden • @kitt • http://ki.tt/cfo 42
  43. 43. Kitt Hodsden • @kitt • http://ki.tt/cfo LiveReload 43 http://livereload.com/
  44. 44. Kitt Hodsden • @kitt • http://ki.tt/cfo 44
  45. 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. 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. 47. Kitt Hodsden • @kitt • http://ki.tt/cfo 47 or!
  48. 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. 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. 50. Kitt Hodsden • @kitt • http://ki.tt/cfo 50
  51. 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. 52. Kitt Hodsden • @kitt • http://ki.tt/cfo 52
  53. 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. 54. Kitt Hodsden • @kitt • http://ki.tt/cfo browser-sync 54 http://browsersync.io/
  55. 55. Kitt Hodsden • @kitt • http://ki.tt/cfo http://ki.tt/cfo 55
  56. 56. Kitt Hodsden • @kitt • http://ki.tt/cfo npm 56 Node Package Manager for installng node packages
  57. 57. Kitt Hodsden • @kitt • http://ki.tt/cfo 57 Open a new terminal or command window
  58. 58. Kitt Hodsden • @kitt • http://ki.tt/cfo 58 In OSX, drag and drop the folder into the terminal window for the path.
  59. 59. Kitt Hodsden • @kitt • http://ki.tt/cfo 59 In Windows, use right click cut and paste
  60. 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. 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. 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. 63. Kitt Hodsden • @kitt • http://ki.tt/cfo 63 You can accept this local JS file running on node, turn it off later!
  64. 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. 65. Kitt Hodsden • @kitt • http://ki.tt/cfo browser-sync 65 http://browsersync.io/
  66. 66. Kitt Hodsden • @kitt • http://ki.tt/cfo 66 $ npm install -g browser-sync
  67. 67. Kitt Hodsden • @kitt • http://ki.tt/cfo 67 $ browser-sync $
  68. 68. Kitt Hodsden • @kitt • http://ki.tt/cfo 68 $ browser-sync start --server --files "css/*.css"
  69. 69. Kitt Hodsden • @kitt • http://ki.tt/cfo bs-config.js 69
  70. 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. 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. 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. 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. 74. Kitt Hodsden • @kitt • http://ki.tt/cfo https://github.com/shakyShane/browser-sync/wiki/options 74
  75. 75. Kitt Hodsden • @kitt • http://ki.tt/cfo 75 $ browser-sync start
  76. 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. 77. Kitt Hodsden • @kitt • http://ki.tt/cfo 77
  78. 78. Kitt Hodsden • @kitt • http://ki.tt/cfo 78 MAGICAL
  79. 79. Kitt Hodsden • @kitt • http://ki.tt/cfo click. copy. scroll. click. paste. 79
  80. 80. Kitt Hodsden • @kitt • http://ki.tt/cfo 80
  81. 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. 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. 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. 84. Kitt Hodsden • @kitt • http://ki.tt/cfo 84
  85. 85. Kitt Hodsden • @kitt • http://ki.tt/cfo 85
  86. 86. Kitt Hodsden • @kitt • http://ki.tt/cfo 86
  87. 87. Kitt Hodsden • @kitt • http://ki.tt/cfo 87
  88. 88. Kitt Hodsden • @kitt • http://ki.tt/cfo 88
  89. 89. Kitt Hodsden • @kitt • http://ki.tt/cfo 89 Alfred looking up jQuery.
  90. 90. Kitt Hodsden • @kitt • http://ki.tt/cfo 90 Dash has a large number of document sets
  91. 91. Kitt Hodsden • @kitt • http://ki.tt/cfo 91 Naïve way to open all the browsers at once
  92. 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. 93. Kitt Hodsden • @kitt • http://ki.tt/cfo Can you feel the awesome? 93 Awwwwwwwww yissssssssssssssssssss!
  94. 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. 95. Kitt Hodsden • @kitt • http://ki.tt/cfo 95
  96. 96. Kitt Hodsden • @kitt • http://ki.tt/cfo 96 $ npm install -g grunt-cli Install the grunt package
  97. 97. Kitt Hodsden • @kitt • http://ki.tt/cfo 97 Windows users, use PowerShell
  98. 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. 99. Kitt Hodsden • @kitt • http://ki.tt/cfo Or just download them. http://ki.tt/fgrf 99
  100. 100. Kitt Hodsden • @kitt • http://ki.tt/cfo 100 package.json Gruntfile.js The two files grunt uses
  101. 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. 102. Kitt Hodsden • @kitt • http://ki.tt/cfo 102 $ npm install With a package.json file, you can install the needed packages easily.
  103. 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. 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. 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. 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. 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. 108. Kitt Hodsden • @kitt • http://ki.tt/cfo browser-sync 108
  109. 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. 110. Kitt Hodsden • @kitt • http://ki.tt/cfo http://npmjs.org 110 Where to find node and grunt packages
  111. 111. Kitt Hodsden • @kitt • http://ki.tt/cfo “grunt browser-sync” 111 What I searched for on npmjs.org
  112. 112. Kitt Hodsden • @kitt • http://ki.tt/cfo THIS IS OKAY. 112
  113. 113. Kitt Hodsden • @kitt • http://ki.tt/cfo 113 Check for current state before downloading.
  114. 114. Kitt Hodsden • @kitt • http://ki.tt/cfo 114 $ npm install grunt-browser-sync --save-dev Installing the browser-sync grunt package
  115. 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. 116. Kitt Hodsden • @kitt • http://ki.tt/cfo 116 "grunt-browser-sync": "~0.7.0"
  117. 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. 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. 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. 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. 121. Kitt Hodsden • @kitt • http://ki.tt/cfo 121 grunt.loadNpmTasks('grunt-browser-sync'); ... grunt.registerTask('default', ['browserSync', ‘watch’]);
  122. 122. Kitt Hodsden • @kitt • http://ki.tt/cfo 122 grunt.registerTask('gogogo', ['browserSync', 'watch']);
  123. 123. Kitt Hodsden • @kitt • http://ki.tt/cfo 123 $ grunt gogogo Running the newly defined “gogogo” command
  124. 124. Kitt Hodsden • @kitt • http://ki.tt/cfo 124
  125. 125. Kitt Hodsden • @kitt • http://ki.tt/cfo 125 modern.ie
  126. 126. Kitt Hodsden • @kitt • http://ki.tt/cfo 126
  127. 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. 128. Kitt Hodsden • @kitt • http://ki.tt/cfo Javascript? 128
  129. 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. 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. 131. Kitt Hodsden • @kitt • http://ki.tt/cfo 131 $ npm install matchdep --save-dev Installing the browser-sync grunt package
  132. 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. 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. 134. Kitt Hodsden • @kitt • http://ki.tt/cfo jshint 134
  135. 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. 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. 137. Kitt Hodsden • @kitt • http://ki.tt/cfo 137
  138. 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. 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. 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. 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. 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. 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. 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. 145. Kitt Hodsden • @kitt • http://ki.tt/cfo Images 145
  146. 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. 147. Kitt Hodsden • @kitt • http://ki.tt/cfo 147 imagemin: { prod: { files: [{ expand: true, cwd: 'imgs-src/', src: ['**/*.{png,jpg,gif}'], dest: 'imgs/' }] } }
  148. 148. Kitt Hodsden • @kitt • http://ki.tt/cfo npm install grunt-svgmin --save-dev 148 Reduce SVG sizes, too
  149. 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. 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. 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. 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. 153. Kitt Hodsden • @kitt • http://ki.tt/cfo Non-images 153
  154. 154. Kitt Hodsden • @kitt • http://ki.tt/cfo npm install grunt-contrib-cssmin --save-dev 154 Minimize CSS files
  155. 155. Kitt Hodsden • @kitt • http://ki.tt/cfo npm install grunt-csscss --save-dev 155 Minimize CSS files
  156. 156. Kitt Hodsden • @kitt • http://ki.tt/cfo npm install grunt-contrib-uglify --save-dev 156 Minimize javascript files
  157. 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. 158. Kitt Hodsden • @kitt • http://ki.tt/cfo Sprites! 158 Making things easier with sprites!
  159. 159. Kitt Hodsden • @kitt • http://ki.tt/cfo WHOO! 159
  160. 160. Kitt Hodsden • @kitt • http://ki.tt/cfo Creating them is EASY! 160
  161. 161. Kitt Hodsden • @kitt • http://ki.tt/cfo npm install grunt-montage --save-dev 161 Sprite your images
  162. 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. 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. 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. 165. Kitt Hodsden • @kitt • http://ki.tt/cfo Change the font BLUE 165 Easiest change ever!
  166. 166. Kitt Hodsden • @kitt • http://ki.tt/cfo #6c869d #212939 166 Easiest change ever!
  167. 167. Kitt Hodsden • @kitt • http://ki.tt/cfo 167 Well, phooey. The ticket was reopened.
  168. 168. Kitt Hodsden • @kitt • http://ki.tt/cfo 168 Soon, EVERYTHING is important!
  169. 169. Kitt Hodsden • @kitt • http://ki.tt/cfo 169
  170. 170. Kitt Hodsden • @kitt • http://ki.tt/cfo 170
  171. 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. 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. 173. Kitt Hodsden • @kitt • http://ki.tt/cfo Use a CSS preprocessor. 173 Saw that coming, didn’t you?
  174. 174. Kitt Hodsden • @kitt • http://ki.tt/cfo Sass / LESS / Stylus 174 Saw that coming, didn’t you?
  175. 175. Kitt Hodsden • @kitt • http://ki.tt/cfo Quick Check! Did you go to Andy Matthews Sass session? 175
  176. 176. Kitt Hodsden • @kitt • http://ki.tt/cfo Are we passing GO? Are we collecting $200? 176
  177. 177. Kitt Hodsden • @kitt • http://ki.tt/cfo Sass ⟳ CSS 177
  178. 178. Kitt Hodsden • @kitt • http://ki.tt/cfo Getting started with Sass 178
  179. 179. Kitt Hodsden • @kitt • http://ki.tt/cfo Install it. 179
  180. 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. 181. Kitt Hodsden • @kitt • http://ki.tt/cfo COMPASS 181 Install Compass, too http://compass-style.org/install/
  182. 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. 183. Kitt Hodsden • @kitt • http://ki.tt/cfo CSS Sass 183
  184. 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. 185. Kitt Hodsden • @kitt • http://ki.tt/cfo Move and rename files. 185 How we get started with Sass in an existing project.
  186. 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. 187. Kitt Hodsden • @kitt • http://ki.tt/cfo Use sass-convert 187 How we get started with Sass in an existing project.
  188. 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. 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. 190. Kitt Hodsden • @kitt • http://ki.tt/cfo 190
  191. 191. Kitt Hodsden • @kitt • http://ki.tt/cfo $variables 191 Quick! Sass in 5 slides!
  192. 192. Kitt Hodsden • @kitt • http://ki.tt/cfo 192 $variable: value; Before variables...
  193. 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. 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. 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. 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. 197. Kitt Hodsden • @kitt • http://ki.tt/cfo Variable name best practice. 197
  198. 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. 199. Kitt Hodsden • @kitt • http://ki.tt/cfo Nested syntax 199 Quick! Sass in 5 slides!
  200. 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. 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. 202. Kitt Hodsden • @kitt • http://ki.tt/cfo @extend 202 Quick! Sass in 5 slides!
  203. 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. 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. 205. Kitt Hodsden • @kitt • http://ki.tt/cfo <div class=”box box-info”> ... </div> 205 Sass syntax, talking @extend
  206. 206. Kitt Hodsden • @kitt • http://ki.tt/cfo 206 Sass syntax, talking @extend <div class=”box-info”> ... </div>
  207. 207. Kitt Hodsden • @kitt • http://ki.tt/cfo @mixin @include 207 Quick! Sass in 5 slides!
  208. 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. 209. Kitt Hodsden • @kitt • http://ki.tt/cfo When you can, use a Compass mixin. 209
  210. 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. 211. Kitt Hodsden • @kitt • http://ki.tt/cfo @mixin vs @extend 211 Sass Overview
  212. 212. Kitt Hodsden • @kitt • http://ki.tt/cfo You’re awesome. 212
  213. 213. Kitt Hodsden • @kitt • http://ki.tt/cfo _partials.scss 213 Quick! Sass in 5 slides!
  214. 214. Kitt Hodsden • @kitt • http://ki.tt/cfo 214 Sass syntax, @mixin @import "vars"; @import "mixins"; @import "layouts/*";
  215. 215. Kitt Hodsden • @kitt • http://ki.tt/cfo 215 Quick! Sass in 5 slides! @if/@else @for @each @functions (return a single value)
  216. 216. Kitt Hodsden • @kitt • http://ki.tt/cfo Media Queries made EASY 216
  217. 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. 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. 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. 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. 221. Kitt Hodsden • @kitt • http://ki.tt/cfo More Information. 221 Sass for Designers Pragmatic Guide To Sass Sass and Compass in Action
  222. 222. Kitt Hodsden • @kitt • http://ki.tt/cfo 222 sass --watch --line-numbers --style expanded scss:css
  223. 223. Kitt Hodsden • @kitt • http://ki.tt/cfo Compass has its config.rb 223
  224. 224. Kitt Hodsden • @kitt • http://ki.tt/cfo 224
  225. 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. 226. Kitt Hodsden • @kitt • http://ki.tt/cfo 226 $ compass watch
  227. 227. Kitt Hodsden • @kitt • http://ki.tt/cfo GUI 227
  228. 228. Kitt Hodsden • @kitt • http://ki.tt/cfo 228 https://incident57.com/codekit/
  229. 229. Kitt Hodsden • @kitt • http://ki.tt/cfo 229 http://compass.kkbox.com/
  230. 230. Kitt Hodsden • @kitt • http://ki.tt/cfo 230 http://koala-app.com/
  231. 231. Kitt Hodsden • @kitt • http://ki.tt/cfo 231 https://github.com/vladikoff/grunt-devtools
  232. 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. 233. Kitt Hodsden • @kitt • http://ki.tt/cfo npm install grunt-contrib-compass --save-dev 233 Installing the compass compiling node package
  234. 234. Kitt Hodsden • @kitt • http://ki.tt/cfo 234 grunt.initConfig({ compass: { dist: { options: { config: 'config.rb' } } } });
  235. 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. 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. 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. 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. 239. Kitt Hodsden • @kitt • http://ki.tt/cfo 239 grunt.loadNpmTasks('grunt-contrib-compass'); ... grunt.registerTask('default', ['compass:dev', ‘watch’]);
  240. 240. Kitt Hodsden • @kitt • http://ki.tt/cfo 240
  241. 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. 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. 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. 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. 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. 246. Kitt Hodsden • @kitt • http://ki.tt/cfo Uh... 246 How do we check these?
  247. 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. 248. Kitt Hodsden • @kitt • http://ki.tt/cfo 248 How do we check these?
  249. 249. Kitt Hodsden • @kitt • http://ki.tt/cfo Source Maps 249 How do we check these?
  250. 250. Kitt Hodsden • @kitt • http://ki.tt/cfo 250 c http://code.tutsplus.com/tutorials/developing-with-sass-and-chrome-devtools--net-32805
  251. 251. Kitt Hodsden • @kitt • http://ki.tt/cfo 251 Generating
  252. 252. Kitt Hodsden • @kitt • http://ki.tt/cfo 252 sass --compass --sourcemap --watch scss:css
  253. 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. 254. Kitt Hodsden • @kitt • http://ki.tt/cfo 254 Don’t deploy to production!
  255. 255. Kitt Hodsden • @kitt • http://ki.tt/cfo 255 Using
  256. 256. Kitt Hodsden • @kitt • http://ki.tt/cfo 256 This works in > Firefox 29, right click to show CSS
  257. 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. 258. Kitt Hodsden • @kitt • http://ki.tt/cfo Don’t nest more than 3 deep 258 http://css-tricks.com/sass-style-guide/
  259. 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. 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. 261. Kitt Hodsden • @kitt • http://ki.tt/cfo Regression testing 261
  262. 262. Kitt Hodsden • @kitt • http://ki.tt/cfo PhantomCSS 262
  263. 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. 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. 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. 266. Kitt Hodsden • @kitt • http://ki.tt/cfo Seeing failures 266 http://tldr.huddle.com/blog/css-testing/
  267. 267. Kitt Hodsden • @kitt • http://ki.tt/cfo Phew! 267
  268. 268. Kitt Hodsden • @kitt • http://ki.tt/cfo Triggering tests 268
  269. 269. Kitt Hodsden • @kitt • http://ki.tt/cfo git pre-commit hook 269 svn works, too!
  270. 270. Kitt Hodsden • @kitt • http://ki.tt/cfo Vagrant 270
  271. 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. 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. 273. Kitt Hodsden • @kitt • http://ki.tt/cfo From the beginning! 273
  274. 274. Kitt Hodsden • @kitt • http://ki.tt/cfo Faster HTML 274
  275. 275. Kitt Hodsden • @kitt • http://ki.tt/cfo http://docs.emmet.io/ 275
  276. 276. Kitt Hodsden • @kitt • http://ki.tt/cfo div#banner>div.logo+ul#navigation>li*4>a 276
  277. 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. 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. 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. 280. Kitt Hodsden • @kitt • http://ki.tt/cfo 280 http://yeoman.io Yeoman
  281. 281. Kitt Hodsden • @kitt • http://ki.tt/cfo yo 281
  282. 282. Kitt Hodsden • @kitt • http://ki.tt/cfo npm install -g yo 282 Installing yeoman globally
  283. 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. 284. Kitt Hodsden • @kitt • http://ki.tt/cfo 284 # download new generator $ npm install generator-gruntplugin # run the generator $ yo gruntplugin
  285. 285. Kitt Hodsden • @kitt • http://ki.tt/cfo 285 # download new generator $ npm install generator-gruntfile # run the generator $ yo gruntfile
  286. 286. Kitt Hodsden • @kitt • http://ki.tt/cfo 286 Lots of generators available http://yeoman.io/official-generators.html
  287. 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. 288. Kitt Hodsden • @kitt • http://ki.tt/cfo http://yeoman.io/generators.html#writing-your-first-generator 288 http://ki.tt/yog
  289. 289. Kitt Hodsden • @kitt • http://ki.tt/cfo Wow, that was fast. 289
  290. 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. 291. Kitt Hodsden • @kitt • http://ki.tt/cfo Questions? 291
  292. 292. Thanks! 292 You’re awesome!

×