Author: Erik Kotsiuba

1. AUTOMATING WORKFLOW
IMPROVING FRONT-END HAPPINESS WITH BETTER TOOLING

2. Trying to develop for the
web today is a little like..

4. Our tooling landscape is
getting more complex.

5. Boilerplate Abstractions
Frameworks Testing Docs
Workflow Dependency
management Performance
optimization Build
Continuous Integration
Deployment Version control

6. OMG. WHAT IS THAT?

7. The second is..
Choose tools you’ll use.

8. Time is a key factor in
staying productive.

10. Automate repetitive tasks
to stay effective.

12. Automation isn’t about being
lazy. It’s about being efficient.

13. The right tools make the
difference between an artist
and a craftsman.

15. The average front-end
workflow today

16. Setup
Scaffolding
Download libraries
Download templates
Download frameworks

17. Develop
Watch Sass / Less / Stylus
Watch CoffeeScript
Watch Jade / Haml
LiveReload
JS / CSS Linting

18. Code linting
Running unit tests
Compile everything
Minify and concatenate
Generate images / icons
Optimize performance
HTTP Server
Deployment
Build

19. Automate this workflow for
simple projects

20. Workflow tools
bit.ly/codekit

21. bit.ly/prepros Win/Mac

22. koala-app.com W/M/L

23. mixture.io Win/Mac

24. So happy.
I may just cry.

25. Iterative
improvement.

26. First do it.
Then do it right.
Then do it better.

28. better?

29. Automate workflow for
all types of projects.

31. Scaffold, write less with Yo
Build, preview and test with Grunt
Manage dependencies with Bower

32. Flexibility to customize your
setup as much as you desire.

33. Limit the time spent
writing boilerplate.

34. Improve your productivity and
delight during development.

36. Helps run repetitive tasks.

37. Linting
Compiling
Minification
Testing
Conversion
Documentation
Deployment
And more

38. Alternative to
Rake/Cake/Make/Ant

39. Huge ecosystem.

40. Fantastic for developers and designers.

41. touch package.json Gruntfile.js

42. package.json

43. {
"name": "awesome-app",
"version": "0.0.1",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.6.3",
"grunt-contrib-uglify": "~0.2.0"
}
}
Specify Grunt plugins and metadata.

44. Gruntfile.js

45. module.exports = function(grunt){
grunt.initConfig({
uglify: {
build: {
src:
dest:
'app.js',
'build/app.min.js'}
{ all: ['**/*.js']}
},
jshint:
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.registerTask('default', ['jshint', 'uglify']);
};
Config tasks and load plugins

46. $ npm install -ggrunt-cli

47. $ npm install

48. $ grunt
Running “jshint:all”(jshint)task
Running “uglify:build”(uglify) task
Done.

49. Not bad!

50. $ npm install grunt-<taskname> --save-dev

51. task tip
grunt-responsive-images
Create multi-resolution images from
a directory for src-set/srcN
bit.ly/grunt-resp

52. task tip
grunt-contrib-imageoptim
Lower page-weight by applying
optimizations to JPG/PNG/Gif
bit.ly/grunt-image

53. speed tip
grunt-concurrent
Speed up build time by concurrently
running tasks like Sass and Coffee.
bit.ly/grunt-conc

54. speed tip
grunt-newer
Run tasks on only source files
modified since the last run.
bit.ly/grunt-newer

55. A first look at something new I’ve
been hacking on

56. grunt-uncss
Remove unused CSSacross your
project at build time.
bit.ly/uncss

57. A few weeks ago..

59. Get audits for unused CSS in
your page with DevTools

60. Chrome DevTools Audits

61. grunt-uncss can remove
unused CSS at build time

62. 120KB
11KB
What about Bootstrap alone?

63. Very early days, but 120KB
down to 11KB of CSS.

65. A package manager for the web.

66. 1.That lib is 6 months old? Better update.
2. Open up the site
3. Download the lib
4. Copy from ~/Downloads
5. Paste to app folder
6. Wire in with script tags
The old way of doing things.

67. New hotness.

68. $ npm install -gbower

69. $ bower search

70. $ bower search angular
Search results:
angular git://github.com/angular/bower-angular.git
angular-mocks git://github.com/angular/bower-angular-mocks.git
angular-resource git://github.com/angular/bower-angular-
resource.git
angular-cookies git://github.com/angular/bower-angular-cookies.git
angular-sanitize git://github.com/angular/bower-angular-
sanitize.git
angular-bootstrap git://github.com/angular-ui/bootstrap-bower.git
........

71. $ bower install

72. $ bower install angular --save-dev
bowerinstall angular#1.0.8
angular#1.0.8app/bower_components/angular

73. $ bower install
$ bower install <package>
$ bower install <package>#<version>
$ bower install <name>=<package>#<version>

74. $ bower list

75. $ bower list
Checking fornew versions of the projectbowercheck-new
dependencies..
testapp#0.0.0/Users/addyo/projects/testapp
├ ─ ─ angular#1.0.8(latest is 1.2.0-rc.3)
├ ─ ┬ bootstrap#3.0.0
│ └ ─ ─ jquery#1.9.1(2.0.3available)
├ ─ ─ jquery#1.9.1(latest is 2.0.3)
└ ─ ─ modernizr#2.6.2

76. Runs over:
Git
HTTP(s)
Zip
npm

77. You can even wire up deps
from the command-line!

78. grunt-bower-install
bit.ly/grunt-bower

79. $ npm install grunt-bowerinstall --save-dev
$ bower install jquery --save
$ grunt bower-install

80. No more worrying about
script tags!

81. http://bower.io

82. bit.ly/bowersearch

84. Yo is your gateway to this
magical new world.

85. It scaffolds out boilerplate.

86. Can prescribe helpful Grunt tasks.

87. C an automatically install
dependencies you need.

88. $ npm install -gyo

89. This installs yo, grunt and bower
for you.

90. $ yo
[?]What would you like to do?
›❯Install a generator
Run theAngular generator (0.4.0)
Run the Backbone generator (0.1.9)
Run the Blog generator (0.0.0)
Run the jQuerygenerator (0.1.4)
Run the Gruntfile generator (0.0.6)
(Move up and down to revealmore choices)

91. $ yo
[?]What would you like to do? Install a generator
[?]SearchNPM for generators:jquery
[?]Here's what I found.Install one?
›❯generator-jquery-boilerplate
generator-jquery-mobile
Searchagain
Return home

92. $ yo jquery-boilerplate
create.jshintrc
createCONTRIBUTING.md
createGruntfile.js
createHISTORY.md
createboilerplate.jquery.json
createdemo/index.html
createdist/jquery.boilerplate.js
createdist/jquery.boilerplate.min.js
createpackage.json
createsrc/jquery.boilerplate.coffee
createsrc/jquery.boilerplate.js

93. Boom. You just created a jQuery
plugin.

94. Installing a custom generator.

95. $ npm install generator-bootstrap -g

96. $ yo bootstrap
In what format would you like theTwitter
Bootstrap stylesheets? (Use arrow keys)
›❯css
sass
less
stylus

97. $ npm install generator-webapp -g

98. $ yo webapp
Out of the box I include H5BPand jQuery.
[? ]What more would you like?
›❯Bootstrap for Sass
RequireJS
Modernizr

100. Boilerplate - H5BP, Bootstrap, Modernizr
Abstractions - optionally Sass, CoffeeScript, grunt-
bower-install available by default.
Performance optimization - optimize images,
scripts, stylesheets, get lean Modernizr builds,
concurrently run all of these tasks at build time.
Testing and build process - Mocha, Jasmine,
PhantomJS
Boom. Just created a webapp!

101. $ grunt server

102. You can now edit and LiveReload!

103. Make changes. Save.Browser automatically refreshes.

104. Fantastic for getting a real-time
view of application state.

105. Edits can also refresh all your
devices. Instant real-device previews.

106. Cross-device live reload
bit.ly/gruntsync

107. What about frameworks?

108. $ npm install generator-angular -g

109. $ yo angular
[?]Would you like to include Bootstrap? (Y/n)

110. $ yo angular
[?]Would you like to include Bootstrap? (Y/n)
[?]Would you like to use the SCSS version?

111. $ yo angular
[?]Would you like to include Bootstrap? (Y/n)
[?]Would you like to use the SCSS version?
[?]Which modules would you like to include?
(Press <space>to select)
›❯ angular-resource.js
angular-cookies.js
angular-sanitize.js

113. $ yo angular:view user
create app/views/user.html

114. $ yo angular:controller user
create app/scripts/controllers/user.js
create test/spec/controllers/user.js

115. $ yo angular:directive mydirective
create app/scripts/directives/mydirective.js
create test/spec/directives/mydirective.js

116. $ bower install angular-local-storage
create app/scripts/directives/mydirective.js
create test/spec/directives/mydirective.js

117. You just created an Angular
app with dependencies

118. $ yo express-angular
AngularJS + Express
backend

119. Generators also available for:
Backbone
Ember
Polymer
Flight
CanJS
& many other frameworks.

120. $ yo jekyllrb
Tellus a little about yourself. ☛
[?]Name: Erik Kotsuba
[?]Email:eko24ive@gmail.com
[?]GitHub username:eko24
[?]Twitterusername:@eko24ive
Wiretools and preprocessors. ☛
[?]CSS preprocessor:Sass
[?]UseAutoprefixer?Yes
[?]Javascriptpreprocessor:
Coffeescript
›❯None

121. $ yo chrome-extension
[?]What would you liketo callthis extension?
[?]How would you describeit?
[?]Would you likemore UI Features?
›❯ Options Page
Content Scripts
Omnibox
[?]Would you liketo use permissions? (Press <space>to select)
›❯ Tabs
Bookmarks
Cookies
History
Management

122. $ yo mobile
Bootstrap 3, TopCoat, Foundation,
Pure Generates responsive images
Generates site screenshots
Removes 30 0 ms delay on
touch Boilerplate for
Fullscreen API Integrated
BrowserStack testing Polyfill
for async localStorage and
more.
bit.ly/yomobile

123. http://yeoman.io

124. Generator search

125. Demo apps built with Yeoman?
http://bit.ly/yeomandemo

126. Work less. Do more.
Make awesome.

127. How can we improve the
rest of your workflow?

128. Learn to love the command-line

129. It isn’t scary. People know how to
use PhotoShop’s 30 0 0 buttons.
That’s scary!

130. @climagic

131. Do things more quickly.

132. Alfred.app

133. Alfred Workflows
Find apps, files
Find packages on npm
Build tasks
bit.ly/alfredworkflows

134. Alfred Workflows
bit.ly/alfredworkflows
Find documentation on Dash
Browser compatibility search
Font awesome search

135. Automator
Point-and-click automation of repetitive tasks

136. bit.ly/macrorecorder

137. Next, let’s look at your editor.

138. Know yours inside out.

139. Shortcuts are incredibly powerful.

140. Sublime Autoprefixer
Write CSS without the prefixes!
bit.ly/autoprefixer

141. Emmet (Zen Coding)
bit.ly/emmet-sublime

142. Emmet (Zen Coding)
emmet.io/

143. STProjectMaker
Easily reuse your boilerplates
bit.ly/stprojectmaker

144. Sublime TernJS
Smarter code completion, contextual jump to definition.
bit.ly/sublime-tern

145. Develop and debug in the
browser

146. Chrome DevTools
An improved find and fix workflow.
devtools.chrome.com

147. Workspaces
Add and edit local projects.Breakpoints persist.Debug in-place.

148. New! Create New Files

149. Sass Source Maps

150. New! Less Source Maps

151. New! CSS Pretty-printing

152. New! Ignoring library code

153. New! DevTools Terminal
npm, git and all your favorite cli tools with this extension

154. bit.ly/devtools-terminal

155. What about better integration
between tools?

156. bit.ly/sublime-inspector
Sublime Web Inspector
Debugger.Breakpoints. Console.Evaluate call frames.

157. Emmet LiveStyle
Edit CSS.See changes live in Chrome *without*a browser refresh.
livestyle.emmet.io

158. Sublime jsRun
Run JS in Chrome from Sublime
bit.ly/sublime-jsrun

159. Synchronized cross-device
testing

160. Re-checking your site on mobile is a pain

161. Navigate all devices to the
same URL

162. A lo-fi, free option
Remote Preview

163. Remote Preview
◦ [+]Free!
◦ [-]Loads page into iframe
◦ [-]Requires user to type url in page
◦ [+]Central place to change url to load into iframe after
initial set-up
bit.ly/remotepreview

164. Synchronize navigation &
get screenshots.

165. Adobe Edge Inspect CC

167. Adobe Edge Inspect
◦ [-]One device at a time
◦ [-]Displays site in a WebView
◦ [+]Supports live reload
◦ [+]Extension to load any page you view in Chrome
◦ [-]Can’t account for localhost (i.e.switch to ip addr.of
machine on local network)
◦ [+]Remote Inspect via Weinre
bit.ly/edgeinspect

168. Refresh all devices on edit

169. Grunt + LiveReload

170. Grunt +LiveReload
◦ [+]Free!
◦ [+]Easily see how each change you save looks acrossdevices
◦ [+]Works with any modern mobile browser
◦ [-]Requires you to use Grunt for your build process
bit.ly/gruntsync

171. Synchronize scrolls, clicks,
interactions as well as navigation

172. Mobile Debugging

173. DevTools Remote Debugging

174. New! RAW USB Debugging

175. jsConsole
bit.ly/jsconsole

176. js Hybugger
jshybugger.com

177. Visual regression testing

178. Wraith
bit.ly/wraithapp

179. Huxley
bit.ly/huxleyapp

180. PhantomCSS
bit.ly/phantomcss

181. Simulate real-network
conditions

182. charlesproxy.com

183. Network Link Conditioner

184. slowyapp.com

185. Fiddler
fiddler2.com

186. Simulators & Emulators

187. Open Device Labs

188. Screenshots or live testing?

189. Simulators
bit.ly/simulatorlist
Massive,well-maintained list of emulators & simulators available

190. Are emulators enough?

191. Do I even need an emulator?
Chrome DevTools Overrides

192. Emulate touch events

193. Emulate screens

194. Emulate device orientation

195. Emulate Geolocation

196. To learn more checkout our DevTools
docs at devtools.chrome.com

197. If you aren't using automation,
you are working too hard
Remember

198. Use tools. not rules.

199. Improve your developer
happiness

200. Thank you.

201. Questions ?