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

Automate ALL THE FRONT-END THINGS

Automate ALL THE FRONT-END THINGS

3f2f0c0fbc7be587727cdfff33c8be43?s=128

Kitt Hodsden

June 05, 2014
Tweet

Transcript

  1. Automate ALL THE FRONT-END THINGS! Text SotR 2014 • Kitt

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

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

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

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

    we here? 5
  6. Kitt Hodsden • @kitt • http://ki.tt/sotr http://ki.tt/sotr 6

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

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

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

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

    are we talking about?
  11. Kitt Hodsden • @kitt • http://ki.tt/sotr You are invited to

    participate in group note taking at: http://ki.tt/sotr14notes 11 Community knowledge!
  12. Kitt Hodsden • @kitt • http://ki.tt/sotr Demo files / examples

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

  14. Kitt Hodsden • @kitt • http://ki.tt/sotr node & ruby (and

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

    downloading the installer and running it. http://nodejs.org
  16. Kitt Hodsden • @kitt • http://ki.tt/sotr 16 # mac /

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

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

    MANAGER https://rvm.io/rvm/install Install ruby in different ways on OSX OSX
  19. Kitt Hodsden • @kitt • http://ki.tt/sotr 19 https://unfiniti.com/software/mac/jewelrybox Ruby on

    OSX, I recommend JewelryBox, too.
  20. Kitt Hodsden • @kitt • http://ki.tt/sotr 20 APT / YUM

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

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

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

    Install ruby in different ways on Windows Windows
  24. Kitt Hodsden • @kitt • http://ki.tt/sotr 24 RUBYINSTALLER http://rubyinstaller.org/downloads/ PIK

    https://github.com/vertiginous/pik Install ruby in different ways on Windows Windows CYGWIN http://cygwin.com
  25. Kitt Hodsden • @kitt • http://ki.tt/sotr http://ki.tt/sotr 25

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

  27. Kitt Hodsden • @kitt • http://ki.tt/sotr 27 Automate All the

    Front-End Things!
  28. Kitt Hodsden • @kitt • http://ki.tt/sotr 1. Embrace the DRY

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

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

    principle 2. Make changes easy 3. Make finding mistakes easy 30 Guiding principles of making our workflows AWESOME
  31. Kitt Hodsden • @kitt • http://ki.tt/sotr Implement a design or

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

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

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

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

    prototype Update the designs Make sure it works in all browsers Make it faster 35 What magic do we do?
  36. Kitt Hodsden • @kitt • http://ki.tt/sotr 36 We’re MAGICAL

  37. Kitt Hodsden • @kitt • http://ki.tt/sotr Implement a design or

    prototype Update the designs Make sure it works in all browsers Make it faster 37
  38. Kitt Hodsden • @kitt • http://ki.tt/sotr 38 How often do

    we have a blank slate, really?
  39. Kitt Hodsden • @kitt • http://ki.tt/sotr Implement a design or

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

    prototype Update the designs Make sure it works in all browsers Make it faster 40
  41. Kitt Hodsden • @kitt • http://ki.tt/sotr change. click. change. click.

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

    42 change. click. change. click. change click. change. click. change. click. hange. click. hange. click. hange. click. change. click. change click. change click. change. click.
  43. Kitt Hodsden • @kitt • http://ki.tt/sotr 43 Guiding principles! 1.

    Embrace the DRY principle 2. Make changes easy 3. Make finding mistakes easy
  44. Kitt Hodsden • @kitt • http://ki.tt/sotr 44 3

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

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

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

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

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

  50. Kitt Hodsden • @kitt • http://ki.tt/sotr 50 <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
  51. Kitt Hodsden • @kitt • http://ki.tt/sotr 51

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

    52 LiveReload IE options
  53. Kitt Hodsden • @kitt • http://ki.tt/sotr 53

  54. Kitt Hodsden • @kitt • http://ki.tt/sotr 54 Guiding principles! 1.

    Embrace the DRY principle 2. Make changes easy 3. Make finding mistakes easy
  55. Kitt Hodsden • @kitt • http://ki.tt/sotr browser-sync 55 http://browsersync.io/

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

    development web server... 56
  57. Kitt Hodsden • @kitt • http://ki.tt/sotr http://ki.tt/3ws 57 LOTS of

    different ways to start a local webserver Need one quick?
  58. Kitt Hodsden • @kitt • http://ki.tt/sotr 58 $ python -m

    SimpleHTTPServer 8000
  59. Kitt Hodsden • @kitt • http://ki.tt/sotr 59 Open a new

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

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

    right click cut and paste
  62. Kitt Hodsden • @kitt • http://ki.tt/sotr http://localhost:8000/index.html http://127.0.0.1:8000/index.html 62 You

    can see the temporary site running locally!
  63. Kitt Hodsden • @kitt • http://ki.tt/sotr 63 $ npm install

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

    Manager for installng node packages
  65. Kitt Hodsden • @kitt • http://ki.tt/sotr browser-sync 65 http://browsersync.io/

  66. Kitt Hodsden • @kitt • http://ki.tt/sotr http://ki.tt/sotr.zip 66 Demo files

    if you’d like to follow along Example files, if you’d like.
  67. Kitt Hodsden • @kitt • http://ki.tt/sotr 67 $ npm install

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

    --server --files "css/*.css"
  69. Kitt Hodsden • @kitt • http://ki.tt/sotr 69

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

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

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

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

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

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

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

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

    [BS] Copy the following snippet into your website, just before the closing </ body> tag <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...
  78. Kitt Hodsden • @kitt • http://ki.tt/sotr 78

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

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

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

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

    Launchbar http://www.obdev.at/products/launchbar/ 82
  83. Kitt Hodsden • @kitt • http://ki.tt/sotr Skylight http://www.candylabs.com/skylight Launchy http://www.launchy.net/

    http://pylaunchy.sourceforge.net/docs/ FARR https://www.donationcoder.com/Software/Mouser/findrun/ 83
  84. Kitt Hodsden • @kitt • http://ki.tt/sotr Gnome Launch Box https://live.gnome.org/

    Gnome Do http://do.davebsd.com/ Launchy http://www.launchy.net/ http://pylaunchy.sourceforge.net/ 84
  85. Kitt Hodsden • @kitt • http://ki.tt/sotr 85

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

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

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

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

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

    jQuery.
  91. Kitt Hodsden • @kitt • http://ki.tt/sotr 91 Dash has a

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

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

    Alfred Workflows
  94. Kitt Hodsden • @kitt • http://ki.tt/sotr Can you feel the

    awesome? 94 Awwwwwwwww yissssssssssssssssssss!
  95. Kitt Hodsden • @kitt • http://ki.tt/sotr 3 95

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

  97. Kitt Hodsden • @kitt • http://ki.tt/sotr 97 $ npm install

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

    PowerShell
  99. Kitt Hodsden • @kitt • http://ki.tt/sotr 99 $ npm install

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

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

    two files grunt uses
  102. Kitt Hodsden • @kitt • http://ki.tt/sotr 102 { "engines": {

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

    With a package.json file, you can install the needed packages easily.
  104. Kitt Hodsden • @kitt • http://ki.tt/sotr 1. Watch for file

    changes 2. Refresh the browser on change 104 What we want grunt to do.
  105. Kitt Hodsden • @kitt • http://ki.tt/sotr 105 module.exports = function(grunt)

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

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

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

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

  110. Kitt Hodsden • @kitt • http://ki.tt/sotr 1. Find grunt plugin*

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

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

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

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

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

    grunt-browser-sync --save-dev Installing the browser-sync grunt package
  116. Kitt Hodsden • @kitt • http://ki.tt/sotr 116 $ ls Gemfile!!

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

  118. Kitt Hodsden • @kitt • http://ki.tt/sotr 118 browserSync: { files:

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

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

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

    { files: '<%= jshint.gruntfile.src %>', tasks: ['jshint:gruntfile'] }, scss: { files: ['scss/*.scss'], tasks: ['sass:dev'] }, js: { // watch for js changes except for script.min.js files: ['js/*.js', '!js/script.min.js'], tasks: ['uglify:dev'] } }
  122. Kitt Hodsden • @kitt • http://ki.tt/sotr 122 grunt.loadNpmTasks('grunt-browser-sync'); ... grunt.registerTask('default',

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

  124. Kitt Hodsden • @kitt • http://ki.tt/sotr 124 $ grunt gogogo

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

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

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

  128. Kitt Hodsden • @kitt • http://ki.tt/sotr Implement a design or

    prototype Update the designs Make sure it works in all browsers Make it faster 128
  129. Kitt Hodsden • @kitt • http://ki.tt/sotr Javascript? 129

  130. Kitt Hodsden • @kitt • http://ki.tt/sotr 130 1. Find grunt

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

    principle 2. Make changes easy 3. Make finding mistakes easy 131 Guiding principles of making our workflows AWESOME
  132. Kitt Hodsden • @kitt • http://ki.tt/sotr 132 $ npm install

    matchdep --save-dev Installing the browser-sync grunt package
  133. Kitt Hodsden • @kitt • http://ki.tt/sotr 133 ... // load

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

  135. Kitt Hodsden • @kitt • http://ki.tt/sotr npm install grunt-contrib-jshint --save-dev

    135 Use jshint when editing your Gruntfile.js https://github.com/gruntjs/grunt-contrib-jshint
  136. Kitt Hodsden • @kitt • http://ki.tt/sotr 136 jshint: { options:

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

  138. Kitt Hodsden • @kitt • http://ki.tt/sotr npm install grunt-contrib-qunit --save-dev

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

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

    140 Javascript unit tests https://github.com/yaymukund/grunt-simple-mocha
  141. Kitt Hodsden • @kitt • http://ki.tt/sotr Implement a design or

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

    prototype Update the designs Make sure it works in all browsers Make it faster 142
  143. Kitt Hodsden • @kitt • http://ki.tt/sotr 1. Reduce file sizes

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

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

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

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

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

    148 Reduce SVG sizes, too
  149. Kitt Hodsden • @kitt • http://ki.tt/sotr 149 grunt.initConfig({ svgmin: {

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

    150 Responsive images by resizing https://github.com/andismith/grunt-responsive-images
  151. Kitt Hodsden • @kitt • http://ki.tt/sotr 151 grunt.initConfig({ responsive_images: {

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

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

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

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

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

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

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

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

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

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

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

    162 Sprite your images
  163. Kitt Hodsden • @kitt • http://ki.tt/sotr 163 grunt.initConfig({ montage: {

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

    lot of work. 164
  165. Kitt Hodsden • @kitt • http://ki.tt/sotr 165 $ mkdir 640x480;

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

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

    scripts 167
  168. Kitt Hodsden • @kitt • http://ki.tt/sotr 168 zsh, bash format

    alias d="dirs -v" tcsh format alias d 'dirs -v' Alias syntax
  169. Kitt Hodsden • @kitt • http://ki.tt/sotr 169 $ cat ~/.bash_profile

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

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

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

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

    scripts 173
  174. Kitt Hodsden • @kitt • http://ki.tt/sotr 174 function envg() {

    env | grep -i $1; } Functions if your arguments vary
  175. Kitt Hodsden • @kitt • http://ki.tt/sotr 175 $ mkdir new-dir

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

    scripts 176
  177. Kitt Hodsden • @kitt • http://ki.tt/sotr 177 #!/usr/bin/env bash mkdir

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

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

    echo “make the resize dir 640x480” mkdir 640x480 echo “resize each file” for file in *.jpg; echo “ resizing $file” do convert $file -resize 640x480 640x480/$file; done A bash script to convert
  180. Kitt Hodsden • @kitt • http://ki.tt/sotr 180 bash-3.2$ resize-images.sh +

    mkdir 640x480 mkdir: 640x480: File exists + for file in '*.jpg' + convert place-kitten-01.jpg -resize 640x480 640x480/place-kitten-01.jpg + for file in '*.jpg' + convert place-kitten-02.jpg -resize 640x480 640x480/place-kitten-02.jpg + for file in '*.jpg' + convert place-kitten-03.jpg -resize 640x480 640x480/place-kitten-03.jpg + for file in '*.jpg' + convert place-kitten-04.jpg -resize 640x480 640x480/place-kitten-04.jpg + for file in '*.jpg' + convert place-kitten-05.jpg -resize 640x480 640x480/place-kitten-05.jpg Output with -x for the bash script
  181. Kitt Hodsden • @kitt • http://ki.tt/sotr http://www.kfirlavi.com/blog/2012/11/14/ defensive-bash-programming/ 181

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

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

    productivity apps, aliases, functions, scripts 183
  184. Kitt Hodsden • @kitt • http://ki.tt/sotr next up! 184

  185. Kitt Hodsden • @kitt • http://ki.tt/sotr sass, media queries, source

    maps, pattern lab, phantomcss, wraith, emmet, yeoman, bower 185
  186. Kitt Hodsden • @kitt • http://ki.tt/sotr Add your suggestions! http://ki.tt/sotr14notes

    186 Community knowledge! (You’re awesome!)
  187. all the front-end things? (automating front-end workflows, part two) Text

    SotR 2014 • Kitt Hodsden • http://ki.tt • @kitt 187
  188. Text 188

  189. Kitt Hodsden • @kitt • http://ki.tt/sotr livereload, browser-sync, grunt, alfred,

    productivity apps, aliases, functions, scripts 189
  190. Kitt Hodsden • @kitt • http://ki.tt/sotr sass, media queries, source

    maps, pattern lab, phantomcss, wraith, emmet, yeoman, bower 190
  191. Kitt Hodsden • @kitt • http://ki.tt/sotr http://ki.tt/sotr 191

  192. Kitt Hodsden • @kitt • http://ki.tt/sotr You are invited to

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

    participate in group note taking at: http://ki.tt/sotr14notes 193 Community knowledge!
  194. Kitt Hodsden • @kitt • http://ki.tt/sotr 1. Embrace the DRY

    principle 2. Make changes easy 3. Make finding mistakes easy 194 Guiding principles of making our workflows AWESOME
  195. Kitt Hodsden • @kitt • http://ki.tt/sotr Implement a design or

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

    prototype Update the designs Make sure it works in all browsers Make it faster 196 What magic do we do?
  197. Kitt Hodsden • @kitt • http://ki.tt/sotr 1. Reduce file sizes

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

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

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

    principle 2. Make changes easy 3. Make finding mistakes easy 200 Guiding principles of making our workflows AWESOME
  201. Kitt Hodsden • @kitt • http://ki.tt/sotr Change the font BLUE

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

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

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

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

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

  207. Kitt Hodsden • @kitt • http://ki.tt/sotr 207 Guiding principles! 1.

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

    Embrace the DRY principle 2. Make changes easy 3. Make finding mistakes easy
  209. Kitt Hodsden • @kitt • http://ki.tt/sotr Use a CSS preprocessor.

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

    Stylus 210 Saw that coming, didn’t you?
  211. Kitt Hodsden • @kitt • http://ki.tt/sotr Quick check! 211

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

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

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

  215. Kitt Hodsden • @kitt • http://ki.tt/sotr 215 $ gem update

    --system $ gem install sass $ sudo gem update --system $ sudo gem install sass Yay! Sass installed!
  216. Kitt Hodsden • @kitt • http://ki.tt/sotr COMPASS 216 Install Compass,

    too http://compass-style.org/install/
  217. Kitt Hodsden • @kitt • http://ki.tt/sotr 217 $ gem update

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

    Bourbon is another example of extending Sass http://bourbon.io/
  219. Kitt Hodsden • @kitt • http://ki.tt/sotr CSS 㱺 Sass 219

  220. Kitt Hodsden • @kitt • http://ki.tt/sotr Let us count the

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

    221 How we get started with Sass in an existing project.
  222. Kitt Hodsden • @kitt • http://ki.tt/sotr 222 $ mkdir scss

    $ mv css/styles.css scss/styles.scss Setting up tools. In this case, Compass.
  223. Kitt Hodsden • @kitt • http://ki.tt/sotr Use sass-convert 223 How

    we get started with Sass in an existing project.
  224. Kitt Hodsden • @kitt • http://ki.tt/sotr 224 $ sass-convert --help

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

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

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

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

    variables...
  229. Kitt Hodsden • @kitt • http://ki.tt/sotr 229 dev[405]% grep background-color

    * style.css: background-color: #edf5fa; style.css: background-color: #ddecf5; style.css: background-color: #e6f1f7; style.css: background-color: #d4e7f3; style.css: background-color: #edf5fa; style.css: background-color: #fcfce8; style.css: background-color: #fcf9e5; style.css: background-color: #fbf5cf; style.css: background-color: #fefefe; style.css: background-color: #f5f5f5; style.css: background-color: #fdf5e6; style.css: background-color: #fdf2de; style.css: background-color: #fbe4e4; style.css: background-color: #fbdbdb; style.css: background-color: #ffcccc; style.css: background-color: #ffffdd; style.css: background-color: #ddffdd; Before variables...
  230. Kitt Hodsden • @kitt • http://ki.tt/sotr 230 $color-main: rgb(255,251,114); $color-second:

    rgb(70,87,204); $color-hilite: rgb(189,177,255); ... .button { background-color: $color-main; ... } See? Easy!
  231. Kitt Hodsden • @kitt • http://ki.tt/sotr 231 $font-times: Cambria, "Hoefler

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

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

    233
  234. Kitt Hodsden • @kitt • http://ki.tt/sotr 234 $ourBlue : #1f4363;

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

    Sass in 5 slides!
  236. Kitt Hodsden • @kitt • http://ki.tt/sotr 236 .navigation { a

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

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

    in 5 slides!
  239. Kitt Hodsden • @kitt • http://ki.tt/sotr 239 Sass syntax, talking

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

    @extend .box, .box-warning, .box-success, .box-info { padding: 2em; color: #333333; background-color: white; } .box-warning { border: 2px dotted #cc0000; } .box-success{ border: 2px dotted #33cc00; } .box-info { border: 2px dotted #996633; }
  241. Kitt Hodsden • @kitt • http://ki.tt/sotr <div class=”box box-info”> ...

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

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

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

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

    a Compass (or Bourbon) mixin. 245
  246. Kitt Hodsden • @kitt • http://ki.tt/sotr 246 Sass syntax, @mixin

    @import "compass/css3/box-sizing"; el { @include box-sizing(border-box); } http://compass-style.org/reference/compass/css3/box_sizing/
  247. Kitt Hodsden • @kitt • http://ki.tt/sotr 247 Sass Overview http://caniuse.com/

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

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

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

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

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

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

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

    254
  255. Kitt Hodsden • @kitt • http://ki.tt/sotr 255 @mixin bp($point) {

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

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

    20px; } @media (max-width: 1250px) { h1 { font-size: 30px; } } @media (max-width: 1600px) { h1 { font-size: 60px; } }
  258. Kitt Hodsden • @kitt • http://ki.tt/sotr http://breakpoint-sass.com/ 258 Quick! Sass

    in 5 slides!
  259. Kitt Hodsden • @kitt • http://ki.tt/sotr More Information. 259 Sass

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

    --style expanded scss:css
  261. Kitt Hodsden • @kitt • http://ki.tt/sotr 261 Guiding principles! 1.

    Embrace the DRY principle 2. Make changes easy 3. Make finding mistakes easy
  262. Kitt Hodsden • @kitt • http://ki.tt/sotr aliases / functions /

    scripts 262
  263. Kitt Hodsden • @kitt • http://ki.tt/sotr 263 alias sassgo="cd ~/project

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

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

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

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

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

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

  270. Kitt Hodsden • @kitt • http://ki.tt/sotr 270 compass config config.rb

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

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

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

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

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

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

  277. Kitt Hodsden • @kitt • http://ki.tt/sotr 1. Watch for file

    changes 2. Compile our Sass to CSS 3. Refresh the browser on change 277 What we want grunt to do.
  278. Kitt Hodsden • @kitt • http://ki.tt/sotr npm install grunt-contrib-compass --save-dev

    278 Installing the compass compiling node package
  279. Kitt Hodsden • @kitt • http://ki.tt/sotr 279 grunt.initConfig({ compass: {

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

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

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

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

    { options: { sassDir: 'scss', cssDir: 'css', outputStyle: 'expanded' } }, prod: { options: { sassDir: 'scss', cssDir: 'css', outputStyle: 'compressed' } }, }
  284. Kitt Hodsden • @kitt • http://ki.tt/sotr 284 grunt.loadNpmTasks('grunt-contrib-compass'); ... grunt.registerTask('default',

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

  286. Kitt Hodsden • @kitt • http://ki.tt/sotr 286 1. Reduce file

    sizes 2. Reduce the number of files 3. Reduce content rendering time
  287. Kitt Hodsden • @kitt • http://ki.tt/sotr 287 @import "compass/utilities/sprites"; ...

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

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

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

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

    we check these?
  292. Kitt Hodsden • @kitt • http://ki.tt/sotr 1. Embrace the DRY

    principle 2. Make changes easy 3. Make finding mistakes easy 292 Guiding principles of making our workflows AWESOME
  293. Kitt Hodsden • @kitt • http://ki.tt/sotr 293 How do we

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

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

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

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

    --watch scss:css
  298. Kitt Hodsden • @kitt • http://ki.tt/sotr 298 gem install compass

    --pre
  299. Kitt Hodsden • @kitt • http://ki.tt/sotr 299 compass: { dev:

    { options: { sassDir: 'scss', cssDir: 'css', outputStyle: 'expanded', sourcemap: true } }, prod: { options: { sassDir: 'scss', cssDir: 'css', outputStyle: 'compressed' } }, }
  300. Kitt Hodsden • @kitt • http://ki.tt/sotr 300 Don’t deploy to

    production!
  301. Kitt Hodsden • @kitt • http://ki.tt/sotr 301 # apache <Files

    ~ "\.map$"> Order allow, deny Deny from all </Files> # nginx location ~* \.map$ { ! deny all; }
  302. Kitt Hodsden • @kitt • http://ki.tt/sotr 302 Using

  303. Kitt Hodsden • @kitt • http://ki.tt/sotr 303 This works in

    > Firefox 29, right click to show CSS
  304. Kitt Hodsden • @kitt • http://ki.tt/sotr 304

  305. Kitt Hodsden • @kitt • http://ki.tt/sotr 305 1. Reduce file

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

    3 deep 306 http://css-tricks.com/sass-style-guide/
  307. Kitt Hodsden • @kitt • http://ki.tt/sotr Avoid using tag selectors

    Use class selectors if you can. 307 https://developers.google.com/speed/docs/best-practices/rendering
  308. Kitt Hodsden • @kitt • http://ki.tt/sotr npm install grunt-devperf --save-dev

    308
  309. Kitt Hodsden • @kitt • http://ki.tt/sotr 309 devperf: { options:

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

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

  312. Kitt Hodsden • @kitt • http://ki.tt/sotr 1. Embrace the DRY

    principle 2. Make changes easy 3. Make finding mistakes easy 312 Guiding principles of making our workflows AWESOME
  313. Kitt Hodsden • @kitt • http://ki.tt/sotr Regression testing 313

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

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

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

  317. Kitt Hodsden • @kitt • http://ki.tt/sotr 317 $ wraith setup

    create configs/config.yaml create javascript/snap.js phantomcss grunt task
  318. Kitt Hodsden • @kitt • http://ki.tt/sotr 318 #Headless browser option

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

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

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

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

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

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

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

    325
  326. Kitt Hodsden • @kitt • http://ki.tt/sotr 326 $ ls -l

    configs/ automate.yaml config.yaml phantomcss grunt task
  327. Kitt Hodsden • @kitt • http://ki.tt/sotr 327 $ wraith capture

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

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

  330. Kitt Hodsden • @kitt • http://ki.tt/sotr npm install grunt-phantomcss --save-dev

    install details at https://www.npmjs.org/package/grunt-phantomcss 330
  331. Kitt Hodsden • @kitt • http://ki.tt/sotr 331 phantomcss: { desktop:

    { options: { screenshots: 'test/visual/desktop/', results: 'results/visual/desktop', viewportSize: [1024, 768] }, src: [ 'test/visual/**.js' ] }, mobile: { options: { screenshots: 'test/visual/mobile/', results: 'results/visual/mobile', viewportSize: [320, 480] }, src: [ 'test/visual/**.js' ] } } phantomcss grunt task
  332. Kitt Hodsden • @kitt • http://ki.tt/sotr 332 casper.start('http://localhost:8000/') .then(function() {

    phantomcss.screenshot('#region-branding', 'region-branding'); }). then(function now_check_the_screenshots(){ phantomCSS.compareAll(); }); phantomcss website flow
  333. Kitt Hodsden • @kitt • http://ki.tt/sotr Seeing failures 333 http://tldr.huddle.com/blog/css-testing/

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

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

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

    npm install grunt-shell --save-dev 336
  337. Kitt Hodsden • @kitt • http://ki.tt/sotr 337 watch: { ...

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

    'watch']); phantomcss website flow
  339. Kitt Hodsden • @kitt • http://ki.tt/sotr 339

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

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

  342. Kitt Hodsden • @kitt • http://ki.tt/sotr 342 What magic do

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

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

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

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

  347. Kitt Hodsden • @kitt • http://ki.tt/sotr <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> 347
  348. Kitt Hodsden • @kitt • http://ki.tt/sotr 348 http://shortcutfoo.com/

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

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

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

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

    352 Installing yeoman globally
  353. Kitt Hodsden • @kitt • http://ki.tt/sotr 353 # use a

    generator $ yo webapp # start the server $ grunt server # run tests $ grunt test # run default $ grunt
  354. Kitt Hodsden • @kitt • http://ki.tt/sotr 354 # download new

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

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

    available http://yeoman.io/official-generators.html
  357. Kitt Hodsden • @kitt • http://ki.tt/sotr 357 # download new

    generator $ npm install generator-generator # create the directory $ mkdir generator-bigred && cd $_ # run the generator $ yo generator
  358. Kitt Hodsden • @kitt • http://ki.tt/sotr http://yeoman.io/generators.html#writing-your-first-generator 358 http://ki.tt/yog

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

    359
  360. Kitt Hodsden • @kitt • http://ki.tt/sotr I skipped over Bundler

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

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

    Notes! http://ki.tt/sotr14notes 362