tooling for the productive front-end developer
TRANSCRIPT
![Page 1: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/1.jpg)
Tooling for the productive front-
end developerMaurice de Beijer
@mauricedb
![Page 2: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/2.jpg)
2
Who am I?• Maurice de Beijer• The Problem Solver• Microsoft Azure MVP• Freelance developer/instructor• Twitter: @mauricedb and @React_Tutorial• Web: http://www.TheProblemSolver.nl• E-mail: [email protected]
![Page 3: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/3.jpg)
Overview• Where to get scripts• Searching for NPM pack
ages• ECMAScript 2015 and b
eyond• Task runners• Minification• Bundling• Chrome DevTools
• Performance testing• Unit Testing• E2E Testing• Code generators• Linting• CSS• Online editor• Tools I use with GitHub
![Page 5: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/5.jpg)
Download and copy
![Page 6: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/6.jpg)
Bower
![Page 7: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/7.jpg)
NPM
![Page 8: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/8.jpg)
JSPM
![Page 9: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/9.jpg)
Overview• Where to get scripts• Searching for NPM pack
ages• ECMAScript 2015 and b
eyond• Task runners• Minification• Bundling• Chrome DevTools
• Performance testing• Unit Testing• E2E Testing• Code generators• Linting• CSS• Online editor• Tools I use with GitHub
![Page 10: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/10.jpg)
Searching for NPM packages• https://www.npmjs.com• https://npms.io
![Page 11: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/11.jpg)
NPM
![Page 12: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/12.jpg)
NPMS.IO
![Page 13: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/13.jpg)
Overview• Where to get scripts• Searching for NPM pack
ages• ECMAScript 2015 and b
eyond• Task runners• Minification• Bundling• Chrome DevTools
• Performance testing• Unit Testing• E2E Testing• Code generators• Linting• CSS• Online editor• Tools I use with GitHub
![Page 14: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/14.jpg)
ECMAScript 2015 and beyond• CoffeeScript• Babel• TypeScript• JSX• Dart
![Page 15: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/15.jpg)
CoffeeScript
![Page 16: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/16.jpg)
Babel
![Page 17: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/17.jpg)
TypeScript
![Page 18: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/18.jpg)
JSX
![Page 19: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/19.jpg)
Dart
![Page 20: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/20.jpg)
Overview• Where to get scripts• Searching for NPM pack
ages• ECMAScript 2015 and b
eyond• Task runners• Minification• Bundling• Chrome DevTools
• Performance testing• Unit Testing• E2E Testing• Code generators• Linting• CSS• Online editor• Tools I use with GitHub
![Page 21: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/21.jpg)
Task runners• Grunt• Gulp• Broccoli• NPM Scripts
![Page 22: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/22.jpg)
Grunt
![Page 23: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/23.jpg)
Gulp
![Page 24: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/24.jpg)
Broccoli
![Page 25: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/25.jpg)
NPM Scripts
![Page 26: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/26.jpg)
NPM Scripts
![Page 27: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/27.jpg)
Overview• Where to get scripts• Searching for NPM pack
ages• ECMAScript 2015 and b
eyond• Task runners• Minification• Bundling• Chrome DevTools
• Performance testing• Unit Testing• E2E Testing• Code generators• Linting• CSS• Online editor• Tools I use with GitHub
![Page 28: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/28.jpg)
Minification• uglify-js• clean-css• html-minifier
![Page 29: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/29.jpg)
Uglify
![Page 30: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/30.jpg)
Clean CSS
![Page 31: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/31.jpg)
HTML Minifier
![Page 32: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/32.jpg)
Overview• Where to get scripts• Searching for NPM pack
ages• ECMAScript 2015 and b
eyond• Task runners• Minification• Bundling• Chrome DevTools
• Performance testing• Unit Testing• E2E Testing• Code generators• Linting• CSS• Online editor• Tools I use with GitHub
![Page 33: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/33.jpg)
Bundling• Browserify• SystemJS• Webpack• Rollup• jspm
![Page 34: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/34.jpg)
Browserify
![Page 35: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/35.jpg)
SystemJS
![Page 36: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/36.jpg)
Webpack
![Page 37: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/37.jpg)
Rollup
![Page 38: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/38.jpg)
JSPM
![Page 39: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/39.jpg)
Overview• Where to get scripts• Searching for NPM pack
ages• ECMAScript 2015 and b
eyond• Task runners• Minification• Bundling• Chrome DevTools
• Performance testing• Unit Testing• E2E Testing• Code generators• Linting• CSS• Online editor• Tools I use with GitHub
![Page 40: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/40.jpg)
Chrome DevTools• Console API• Pretty Print• Break on DOM modifications• Break on XHR• Break on Event Listener• Asynchronous stack trace• Timeline• Audits• Profiles
![Page 41: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/41.jpg)
Console API
![Page 42: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/42.jpg)
Pretty Print
![Page 43: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/43.jpg)
Pretty Print
![Page 44: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/44.jpg)
Break on DOM modifications
![Page 45: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/45.jpg)
Break on XHR
![Page 46: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/46.jpg)
Asynchronous stack trace
![Page 47: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/47.jpg)
Timeline
![Page 48: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/48.jpg)
Audits
![Page 49: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/49.jpg)
Profile
![Page 50: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/50.jpg)
Overview• Where to get scripts• Searching for NPM pack
ages• ECMAScript 2015 and b
eyond• Task runners• Minification• Bundling• Chrome DevTools
• Performance testing• Unit Testing• E2E Testing• Code generators• Linting• CSS• Online editor• Tools I use with GitHub
![Page 51: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/51.jpg)
Performance testing• YSlow• WebPageTest• Chrome DevTools• Lighthouse
![Page 52: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/52.jpg)
YSlow
![Page 53: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/53.jpg)
WebPageTest
![Page 54: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/54.jpg)
Chrome timeline
![Page 55: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/55.jpg)
Chrome audit
![Page 56: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/56.jpg)
![Page 57: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/57.jpg)
Overview• Where to get scripts• Searching for NPM pack
ages• ECMAScript 2015 and b
eyond• Task runners• Minification• Bundling• Chrome DevTools
• Performance testing• Unit Testing• E2E Testing• Code generators• Linting• CSS• Online editor• Tools I use with GitHub
![Page 58: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/58.jpg)
Unit Testing• Testem• Mocha• Chai• Chai-as-promised• Jsdom
![Page 59: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/59.jpg)
Testem
![Page 60: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/60.jpg)
Mocha
![Page 61: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/61.jpg)
Chai
![Page 62: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/62.jpg)
Chai as promised
![Page 63: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/63.jpg)
JS Dom
![Page 64: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/64.jpg)
Overview• Where to get scripts• Searching for NPM pack
ages• ECMAScript 2015 and b
eyond• Task runners• Minification• Bundling• Chrome DevTools
• Performance testing• Unit Testing• E2E Testing• Code generators• Linting• CSS• Online editor• Tools I use with GitHub
![Page 65: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/65.jpg)
End 2 End Testing• Selenium• Nightwatch• Browserstack
![Page 66: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/66.jpg)
Selenium
![Page 67: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/67.jpg)
Nightwatch
![Page 68: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/68.jpg)
BrowserStack
![Page 69: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/69.jpg)
Overview• Where to get scripts• Searching for NPM pack
ages• ECMAScript 2015 and b
eyond• Task runners• Minification• Bundling• Chrome DevTools
• Performance testing• Unit Testing• E2E Testing• Code generators• Linting• CSS• Online editor• Tools I use with GitHub
![Page 70: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/70.jpg)
Code generators• Angular CLI• Create React App• Yeoman
![Page 71: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/71.jpg)
Angular CLI
![Page 72: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/72.jpg)
Create React App
![Page 73: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/73.jpg)
Yeoman
![Page 74: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/74.jpg)
Overview• Where to get scripts• Searching for NPM pack
ages• ECMAScript 2015 and b
eyond• Task runners• Minification• Bundling• Chrome DevTools
• Performance testing• Unit Testing• E2E Testing• Code generators• Linting• CSS• Online editor• Tools I use with GitHub
![Page 75: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/75.jpg)
Linting• ESLint• TSLint• Stylelint• SonarQube
![Page 76: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/76.jpg)
ESLint
![Page 77: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/77.jpg)
TSLint
![Page 78: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/78.jpg)
StyleLint
![Page 79: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/79.jpg)
SonarQube
![Page 80: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/80.jpg)
Overview• Where to get scripts• Searching for NPM pack
ages• ECMAScript 2015 and b
eyond• Task runners• Minification• Bundling• Chrome DevTools
• Performance testing• Unit Testing• E2E Testing• Code generators• Linting• CSS• Online editor• Tools I use with GitHub
![Page 81: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/81.jpg)
CSS• Less• SASS• Stylelint• scss-lint• PostCSS• Autoprefixer
![Page 82: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/82.jpg)
LESS
![Page 83: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/83.jpg)
SASS
![Page 84: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/84.jpg)
SyleLint
![Page 85: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/85.jpg)
SCSS Lint
![Page 86: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/86.jpg)
Post CSS
![Page 87: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/87.jpg)
Autoprefixer
![Page 88: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/88.jpg)
Overview• Where to get scripts• Searching for NPM pack
ages• ECMAScript 2015 and b
eyond• Task runners• Minification• Bundling• Chrome DevTools
• Performance testing• Unit Testing• E2E Testing• Code generators• Linting• CSS• Online editor• Tools I use with GitHub
![Page 89: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/89.jpg)
Online editor• JSFiddle• JSBin• HyperDev
![Page 90: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/90.jpg)
JS Fiddle
![Page 91: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/91.jpg)
JS Bin
![Page 92: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/92.jpg)
Hyperdev
![Page 93: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/93.jpg)
Overview• Where to get scripts• Searching for NPM pack
ages• ECMAScript 2015 and b
eyond• Task runners• Minification• Bundling• Chrome DevTools
• Performance testing• Unit Testing• E2E Testing• Code generators• Linting• CSS• Online editor• Tools I use with GitHub
![Page 94: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/94.jpg)
Tools I use with GitHub• Zenhub• Shields• David• Greenkeeper• Travis CI• Codecov
![Page 95: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/95.jpg)
Zenhub
![Page 96: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/96.jpg)
Gulp-main-bower-files
![Page 97: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/97.jpg)
Shields
![Page 98: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/98.jpg)
David
![Page 99: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/99.jpg)
Greenkeeper
![Page 100: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/100.jpg)
Travis CI
![Page 101: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/101.jpg)
Codecov
![Page 102: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/102.jpg)
Overview• Where to get scripts• Searching for NPM pack
ages• ECMAScript 2015 and b
eyond• Task runners• Minification• Bundling• Chrome DevTools
• Performance testing• Unit Testing• E2E Testing• Code generators• Linting• CSS• Online editor• Tools I use with GitHub
![Page 103: Tooling for the productive front-end developer](https://reader036.vdocuments.us/reader036/viewer/2022070517/58d0109f1a28abad3e8b5c1b/html5/thumbnails/103.jpg)
Thank you
Maurice de Beijer - @mauricedb