automating front-end workflow by addy osmani
Post on 12-Apr-2018
262 Views
Preview:
TRANSCRIPT
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
1/236
AUTOMATING WORKFLOWIMPROVING FRONT-END HAPPINESS WITH BETTER TOOLING
!@addyosmani
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
2/236
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
3/236
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
4/236
Our tooling landscape isgetting more complex.
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
5/236
BoilerplateAbstractions
Frameworks Testing DocsWorkflowDependency
managementPerformance
optimizationBuildContinuous Integration
DeploymentVersion control
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
6/236
OMG. WHAT IS THAT?
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
7/236
The first rule of tooling is
Thou shalt not make @paul_irish cry
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
8/236
Choose tools youll use.The second is..
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
9/236
Time is a key factor instaying productive.
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
10/236
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
11/236
Automate repetitive tasksto stay effective.
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
12/236
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
13/236
Automation isnt about beinglazy. Its about being efficient.
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
14/236
Steve Wozniak
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
15/236
The right tools make the
difference between an artist
and a craftsman.
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
16/236
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
17/236
The average front-endworkflow today
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
18/236
SetupScaffolding
Download librariesDownload templatesDownload frameworks
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
19/236
DevelopWatch Sass/ Less/ Stylus
Watch CoffeeScriptWatch Jade/ HamlLiveReload
JS/ CSSLinting
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
20/236
Code linting
Running unit tests
Compile everything
Minify and concatenate
Generate images / iconsOptimize performance
HTTP ServerDeployment
Build
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
21/236
Automate this workflow forsimpleprojects
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
22/236
Workflow tools
http://bower.io/http://bower.io/http://bower.io/ -
7/21/2019 Automating Front-End Workflow by Addy Osmani
23/236
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
24/236
http://bower.io/http://bower.io/ -
7/21/2019 Automating Front-End Workflow by Addy Osmani
25/236
koala-app.com
http://bower.io/http://bower.io/http://bower.io/http://bower.io/ -
7/21/2019 Automating Front-End Workflow by Addy Osmani
26/236
mixture.io Win/Mac
http://bower.io/http://bower.io/http://bower.io/http://bower.io/ -
7/21/2019 Automating Front-End Workflow by Addy Osmani
27/236
bit.ly/compassapp
http://bower.io/http://bower.io/http://bower.io/http://bower.io/ -
7/21/2019 Automating Front-End Workflow by Addy Osmani
28/236
bit.ly/scout-appWin/Mac
http://bower.io/http://bower.io/http://bower.io/http://bower.io/ -
7/21/2019 Automating Front-End Workflow by Addy Osmani
29/236
So happy.I may just cry.
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
30/236
Iterative
improvement.
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
31/236
First do it.
Then do it right.
Then do it better.
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
32/236
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
33/236
better?
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
34/236
Automate workflow forall typesof projects.
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
35/236
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
36/236
Scaffold, write less with Yo
Build, preview and test with Grunt
Manage dependencies with Bower
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
37/236
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
38/236
Flexibility to customize yoursetup as much as you desire.
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
39/236
Limit the time spentwriting boilerplate.
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
40/236
Improve your productivity anddelight during development.
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
41/236
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
42/236
Helps run repetitivetasks.
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
43/236
Linting
CompilingMinificationTesting
ConversionDocumentationDeployment
And more
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
44/236
Alternative toRake/Cake/Make/Ant
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
45/236
Huge ecosystem.
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
46/236
Fantastic for developers and designers.
!
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
47/236
touch package.json Gruntfile.js
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
48/236
package.json
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
49/236
{ "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.
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
50/236
Gruntfile.js
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
51/236
module.exports= function(grunt){ grunt.initConfig({ uglify: { build: {src: 'app.js',
dest: 'build/app.min.js'} }, jshint: { all: ['**/*.js']} }); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.registerTask('default', ['jshint', 'uglify']);};
Config tasks and load plugins
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
52/236
$ npm install -g grunt-cli
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
53/236
$ npm install
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
54/236
$ grunt
Running jshint:all (jshint) task
Running uglify:build (uglify) task
Done.
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
55/236
Not bad!
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
56/236
$ npm install grunt- --save-dev
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
57/236
task tip
grunt-responsive-images
Create multi-resolution images from
a directory for src-set/srcN
bit.ly/grunt-resp
http://bower.io/http://bower.io/http://bower.io/http://bower.io/http://bower.io/http://bower.io/http://bower.io/http://bower.io/ -
7/21/2019 Automating Front-End Workflow by Addy Osmani
58/236
task tip
grunt-contrib-imageoptim
Lower page-weight by applying
optimizations to JPG/PNG/Gif
bit.ly/grunt-image
http://bower.io/http://bower.io/http://bower.io/http://bower.io/http://bower.io/http://bower.io/http://bower.io/http://bower.io/ -
7/21/2019 Automating Front-End Workflow by Addy Osmani
59/236
speed tip
grunt-concurrent
Speed up build time by concurrently
running tasks like Sass and Coffee.
bit.ly/grunt-conc
http://bower.io/http://bower.io/http://bower.io/http://bower.io/http://bower.io/http://bower.io/http://bower.io/http://bower.io/ -
7/21/2019 Automating Front-End Workflow by Addy Osmani
60/236
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
61/236
A first lookat something new Ivebeen hacking on
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
62/236
grunt-uncss
Remove unused CSS across your
project at build time.
bit.ly/uncss
http://bower.io/http://bower.io/http://bower.io/http://bower.io/http://bower.io/http://bower.io/ -
7/21/2019 Automating Front-End Workflow by Addy Osmani
63/236
A few weeks ago..
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
64/236
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
65/236
Get audits for unused CSS inyour page with DevTools
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
66/236
Chrome DevTools Audits
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
67/236
grunt-uncss can removeunused CSS at build time
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
68/236
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
69/236
Very early days, but 280KBdown to 40KBof CSS.
What about Bootstrap alone?
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
70/236
120KB
11KB
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
71/236
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
72/236
A package manager for the web.
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
73/236
1. That lib is 6 months old? Better update.2. Open up the site
3. Download the lib4. Copy from ~/Downloads5. Paste to app folder
6. Wire in with script tags
The old way of doing things.
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
74/236
New hotness.
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
75/236
$ npm install -g bower
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
76/236
$ bower search
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
77/236
$ bower search angular
Search results:
angular git://github.com/angular/bower-angular.git
angular-mocks git://github.com/angular/bower-angular-mocks.git
angular-resourcegit://github.com/angular/bower-angular-
resource.git
angular-cookies git://github.com/angular/bower-angular-cookies.git
angular-sanitizegit://github.com/angular/bower-angular-
sanitize.git
angular-bootstrap git://github.com/angular-ui/bootstrap-bower.git
........
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
78/236
$ bower install
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
79/236
$ bower install angular --save-dev
bower install angular#1.0.8
angular#1.0.8 app/bower_components/angular
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
80/236
$ bower install
$ bower install
$ bower install #
$ bower install =#
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
81/236
$ bower list
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
82/236
$ bower list
bower check-new Checking for new versions of the project
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.3 available)
jquery#1.9.1 (latest is 2.0.3)
modernizr#2.6.2
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
83/236
Runs over:Git
HTTP(s)Zip
npm
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
84/236
You can even wire updeps
from the command-line!
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
85/236
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
86/236
grunt-bower-install
bit.ly/grunt-bower
http://bower.io/http://bower.io/http://bower.io/http://bower.io/http://bower.io/ -
7/21/2019 Automating Front-End Workflow by Addy Osmani
87/236
$ npm install grunt-bower install --save-dev
$ bower install jquery --save$ grunt bower-install
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
88/236
No more worrying aboutscript tags!
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
89/236
http://bower.io/http://bower.io/ -
7/21/2019 Automating Front-End Workflow by Addy Osmani
90/236
http://bower.io/http://bower.io/ -
7/21/2019 Automating Front-End Workflow by Addy Osmani
91/236
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
92/236
Yo is yourgatewayto this
magical new world.
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
93/236
It scaffolds out boilerplate.
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
94/236
Can prescribe helpful Grunt tasks.
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
95/236
Can automatically install
dependencies you need.
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
96/236
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
97/236
$ npm install -g yo
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
98/236
This installs yo, grunt and bowerfor you.
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
99/236
$ yo
[?] What would you like to do?
! Install a generator
Run the Angular generator (0.4.0) Run the Backbone generator (0.1.9)
Run the Blog generator (0.0.0)
Run the jQuery generator (0.1.4) Run the Gruntfile generator (0.0.6)
(Move up and down to reveal more choices)
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
100/236
$ yo
[?] What would you like to do? Install a generator
[?] Search NPM for generators: jquery
[?] Here's what I found. Install one?
!generator-jquery-boilerplate
generator-jquery-mobile
Search again
Return home
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
101/236
$ 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
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
102/236
Boom. You just created a jQueryplugin.
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
103/236
Installing a custom generator.
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
104/236
$ npm install generator-bootstrap-g
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
105/236
$ yo bootstrap
In what format would you like the Twitter
Bootstrap stylesheets? (Use arrow keys)
!css sass
less
stylus
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
106/236
$ npm install generator-webapp-g
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
107/236
$ yo webapp
Out of the box I include H5BP and jQuery.
[ ? ] What more would you like?
!Bootstrap for Sass
RequireJS
Modernizr
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
108/236
Boom. Just created a webapp!
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
109/236
Boilerplate- H5BP, Bootstrap, ModernizrAbstractions- 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!
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
110/236
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
111/236
$ grunt server
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
112/236
You can now edit and LiveReload!
Make changes. Save. Browser automatically refreshes.
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
113/236
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
114/236
Fantastic for getting a real-timeview of application state.
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
115/236
Edits can also refresh all your
devices. Instant real-devicepreviews.
Cross-device live reload
http://bower.io/ -
7/21/2019 Automating Front-End Workflow by Addy Osmani
116/236
bit ly/gruntsync
http://bower.io/http://bower.io/http://bower.io/http://bower.io/ -
7/21/2019 Automating Front-End Workflow by Addy Osmani
117/236
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
118/236
What about frameworks?
i t ll t l
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
119/236
$ npm install generator-angular-g
l
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
120/236
$ yo angular
[?] Would you like to include Bootstrap? (Y/n)
$ l
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
121/236
$ yo angular
[?] Would you like to include Bootstrap? (Y/n)
[?] Would you like to use the SCSS version?
$ l
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
122/236
$ 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 to select)
! angular-resource.js angular-cookies.js
angular-sanitize.js
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
123/236
$ o ang lar: ie ser
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
124/236
$ yo angular:view user
createapp/views/user.html
$ yo angular:controller user
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
125/236
$ yo angular:controller user
createapp/scripts/controllers/user.js
createtest/spec/controllers/user.js
$ yo angular:directive mydirective
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
126/236
$ yo angular:directive mydirective
createapp/scripts/directives/mydirective.js
createtest/spec/directives/mydirective.js
$ bower install angular local storage
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
127/236
$ bower install angular-local-storage
createapp/scripts/directives/mydirective.js
createtest/spec/directives/mydirective.js
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
128/236
You just created an Angularapp with dependencies
$ yo express angular
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
129/236
$ yo express-angular
AngularJS + Expressbackend
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
130/236
Generators also available for:
BackboneEmberPolymerFlightCanJS& many other frameworks.
$ yo jekyllrb
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
131/236
$ yo jekyllrb
Tell us a little about yourself.
[?] Name: Addy Osmani
[?] Email: addyosmani@gmail.com
[?] GitHub username: addyosmani
[?] Twitter username: @addyosmani
Wire tools and preprocessors.
[?] CSS preprocessor: Sass
[?] Use Autoprefixer? Yes
[?] Javascript preprocessor:
Coffeescript
!None
$ yo chrome extension
mailto:addyosmani@gmail.commailto:addyosmani@gmail.commailto:addyosmani@gmail.com -
7/21/2019 Automating Front-End Workflow by Addy Osmani
132/236
$ yo chrome-extension
[?] What would you like to call this extension?[?] How would you describe it?
[?] Would you like more UI Features?
! Options Page Content Scripts
Omnibox
[?] Would you like to use permissions? (Press to select)
! Tabs Bookmarks
Cookies
History
Management
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
133/236
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
134/236
http://bower.io/http://bower.io/ -
7/21/2019 Automating Front-End Workflow by Addy Osmani
135/236
Demo apps built with Yeoman?
http://bower.io/http://bower.io/ -
7/21/2019 Automating Front-End Workflow by Addy Osmani
136/236
http://bit.ly/yeomandemo
http://bit.ly/yeomandemohttp://bit.ly/yeomandemo -
7/21/2019 Automating Front-End Workflow by Addy Osmani
137/236
Work less. Do more.
Make awesome.
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
138/236
How can we improve the
rest of your workflow?
Learn to love the command line
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
139/236
Learn to love the command-line
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
140/236
It isnt scary. You know how to
use PhotoShops 3000 buttons.Thats scary!
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
141/236
$ server
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
142/236
$server
python -m SimpleHTTPServer
Start up a new local server
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
143/236
$ gitexport
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
144/236
$gitexport
function gitexport(){ mkdir -p "$1" git archive master | tar -x -C "$1"}
Copy a local checkout without the .git stuff
Terminal Replay (iTerm 2)
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
145/236
TotalTerminalA system-wide terminal available via a hot-key
http://bower.io/http://bower.io/ -
7/21/2019 Automating Front-End Workflow by Addy Osmani
146/236
A system wide terminal available via a hot key
bit.ly/totalterminal
@climagic
http://bower.io/http://bower.io/http://bower.io/http://bower.io/http://bower.io/ -
7/21/2019 Automating Front-End Workflow by Addy Osmani
147/236
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
148/236
Do things more quickly.
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
149/236
Alfred.app
Alfred Workflowsbitl / lf d kfl
https://github.com/zenorocha/alfred-workflows -
7/21/2019 Automating Front-End Workflow by Addy Osmani
150/236
Find apps, filesFind packages on npm
Build tasks
bit.ly/alfredworkflows
Alfred Workflowsbitl / lf d kfl
https://github.com/zenorocha/alfred-workflowshttps://github.com/zenorocha/alfred-workflowshttps://github.com/zenorocha/alfred-workflows -
7/21/2019 Automating Front-End Workflow by Addy Osmani
151/236
bit.ly/alfredworkflows
Browser compatibility searchFind documentation on Dash
Font awesome search
Windows? Try Launchy.
https://github.com/zenorocha/alfred-workflowshttps://github.com/zenorocha/alfred-workflowshttp://bower.io/ -
7/21/2019 Automating Front-End Workflow by Addy Osmani
152/236
launchy.net
AutomatorPoint-and-clickautomationof repetitive tasks
http://bower.io/http://bower.io/http://bower.io/ -
7/21/2019 Automating Front-End Workflow by Addy Osmani
153/236
Point and click automation of repetitive tasks
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
154/236
bit.ly/macrorecorder
http://bower.io/http://bower.io/http://bower.io/http://bower.io/ -
7/21/2019 Automating Front-End Workflow by Addy Osmani
155/236
Next, lets look at your editor.
Know yours inside out.
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
156/236
Shortcuts are incredibly powerful.
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
157/236
Sublime AutoprefixerWrite CSS without the prefixes!
http://bower.io/http://bower.io/ -
7/21/2019 Automating Front-End Workflow by Addy Osmani
158/236
p
bit.ly/autoprefixer
Emmet (Zen Coding)
http://bower.io/http://bower.io/http://bower.io/http://bower.io/http://bower.io/http://bower.io/ -
7/21/2019 Automating Front-End Workflow by Addy Osmani
159/236
bit.ly/emmet-sublime
http://bower.io/http://bower.io/http://bower.io/http://bower.io/ -
7/21/2019 Automating Front-End Workflow by Addy Osmani
160/236
Sublime TernJSSmarter code completion, contextual jump to definition.
http://bower.io/http://bower.io/ -
7/21/2019 Automating Front-End Workflow by Addy Osmani
161/236
bit.ly/sublime-tern
Sublime Build SystemCall tools from your editor. Get feedback in the console.
http://bower.io/http://bower.io/http://bower.io/http://bower.io/http://bower.io/http://bower.io/ -
7/21/2019 Automating Front-End Workflow by Addy Osmani
162/236
bit.ly/sublime-grunt
SublimeLinterLive linterfeedback as you code
http://bower.io/http://bower.io/http://bower.io/http://bower.io/http://bower.io/http://bower.io/ -
7/21/2019 Automating Front-End Workflow by Addy Osmani
163/236
bit.ly/sublime-linter
http://bower.io/http://bower.io/http://bower.io/http://bower.io/ -
7/21/2019 Automating Front-End Workflow by Addy Osmani
164/236
Develop and debug in thebrowser
Chrome DevToolsAn improved find and fix workflow.
http://bower.io/http://bower.io/ -
7/21/2019 Automating Front-End Workflow by Addy Osmani
165/236
devtools.chrome.com
WorkspacesAdd and edit local projects. Breakpoints persist. Debug in-place.
http://bower.io/http://bower.io/http://bower.io/http://bower.io/http://bower.io/ -
7/21/2019 Automating Front-End Workflow by Addy Osmani
166/236
New!Create New Files
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
167/236
Sass Source Maps
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
168/236
New!Less Source Maps
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
169/236
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
170/236
New!Ignoring library code
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
171/236
New!DevTools Terminalnpm, git and all your favorite cli tools with this extension
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
172/236
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
173/236
bit.ly/devtools-terminal
http://bit.ly/devtools-terminalhttp://bit.ly/devtools-terminalhttp://bit.ly/devtools-terminalhttp://bit.ly/devtools-terminal -
7/21/2019 Automating Front-End Workflow by Addy Osmani
174/236
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
175/236
What about better integrationbetween tools?
Sublime Web InspectorDebugger. Breakpoints. Console. Evaluate call frames.
http://bower.io/http://bower.io/ -
7/21/2019 Automating Front-End Workflow by Addy Osmani
176/236
bit.ly/sublime-inspector
Emmet LiveStyleEdit CSS. See changes live in Chrome *without* a browser refresh.
http://bower.io/http://bower.io/http://bower.io/http://bower.io/http://bower.io/http://bower.io/ -
7/21/2019 Automating Front-End Workflow by Addy Osmani
177/236
livestyle.emmet.io
Adobe BracketsBi-directional HTML live editing with Chrome.
http://bower.io/http://bower.io/http://bower.io/http://bower.io/http://bower.io/ -
7/21/2019 Automating Front-End Workflow by Addy Osmani
178/236
brackets.io
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
179/236
bit.ly/webstormide
WebStorm: Live Edit
http://bower.io/http://bower.io/http://bower.io/http://bower.io/ -
7/21/2019 Automating Front-End Workflow by Addy Osmani
180/236
WebStorm: Debug with Chrome
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
181/236
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
182/236
LightTable
http://bower.io/ -
7/21/2019 Automating Front-End Workflow by Addy Osmani
183/236
lighttable.com
Sublime jsRunR JS i Ch f S bli
http://bower.io/http://bower.io/http://bower.io/http://bower.io/http://bower.io/http://bower.io/ -
7/21/2019 Automating Front-End Workflow by Addy Osmani
184/236
Run JSin Chrome from Sublime
bit.ly/sublime-jsrun
TailorBrackets + Git for ChromeOS
http://bower.io/http://bower.io/http://bower.io/http://bower.io/http://bower.io/ -
7/21/2019 Automating Front-End Workflow by Addy Osmani
185/236
Synchronized cross-device
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
186/236
testing
Re-checking your site on mobile is a pain
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
187/236
How does this fit into your workflow?
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
188/236
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
189/236
Navigate all devices to the
same URL
A lo-fi, free option
Remote Preview
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
190/236
, p
Remote Preview
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
191/236
! [+] 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
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
192/236
Synchronize navigation &
get screenshots.
Adobe Edge Inspect CC
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
193/236
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
194/236
Adobe Edge Inspect
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
195/236
! [-] One device at a time
! [-] Displays site in a WebView
! [+] Supports live reload
! [+] Extension to load any page you view in Chrome
! [-] Cant account for localhost (i.e. switch to ip addr. ofmachine on local network)
! [+] Remote Inspect via Weinre
bit.ly/edgeinspect
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
196/236
Refresh all devices on edit
Grunt + LiveReload
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
197/236
Grunt + LiveReload
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
198/236
! [+] Free!
! [+] Easily see how each change you save looks across devices
! [+] Works with any modern mobile browser
! [-] Requires you to use Grunt for your build process
bit.ly/gruntsync
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
199/236
Synchronize scrolls, clicks,
interactions as well as navigation
GhostLab
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
200/236
Sync desktop & mobile navigation
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
201/236
Sync navigation across *all* your devices
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
202/236
Sync clicks, scrolls and other interactions
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
203/236
Ghostlab
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
204/236
! [+] Creates server to folder contents
! [+] Syncs scrolls, clicks and reloads
! [-] Needs typing into browser on each device
! [+] Allows to match up scrolling and input
! [-] OS X Only! [+] Debugging via Weinre
bit.ly/ghostapp
Mobile Debugging
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
205/236
DevTools Remote Debugging
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
206/236
New!RAW USB Debugging
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
207/236
jsConsole
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
208/236
bit.ly/jsconsole
js Hybugger
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
209/236
jshybugger.com
iOS WebKit Debug Proxy
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
210/236
bit.ly/webkitdebug
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
211/236
MIHTool
bit.ly/mihtool
Visual regression testing
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
212/236
Wraith
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
213/236
bit.ly/wraithapp
Huxley
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
214/236
bit.ly/huxleyapp
PhantomCSS
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
215/236
bit.ly/phantomcss
Simulate real-networkconditions
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
216/236
conditions
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
217/236
charlesproxy.com
Network Link Conditioner
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
218/236
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
219/236
slowyapp.com
Fiddler
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
220/236
fiddler2.com
Netwem, WANEm (Linux)
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
221/236
bit.ly/linuxnetem
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
222/236
Simulators & Emulators
Open Device Labs
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
223/236
Screenshots or live testing?
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
224/236
SimulatorsMassive, well-maintained list of emulators & simulators available
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
225/236
bit.ly/simulatorlist
Are emulators enough?
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
226/236
Do I even need an emulator?Chrome DevTools Overrides
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
227/236
Emulate touch events
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
228/236
Emulate screens
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
229/236
Emulate device orientation
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
230/236
Emulate Geolocation
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
231/236
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
232/236
To learn more checkout our DevTools
docs at devtools.chrome.com
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
233/236
If you aren't using automation,
you are working too hard
Remember
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
234/236
Use tools. not rules.
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
235/236
Improveyourdeveloper
happiness
-
7/21/2019 Automating Front-End Workflow by Addy Osmani
236/236
Thank you.
top related