Automate ALL THE FRONT-END THINGS

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