![Maurice De Beijer [MVP], profile picture](https://cdn.slidesharecdn.com/profile-photo-mauricedb-48x48.jpg?cb=1756998088)
Tooling for the productive front-end developer
Download as PPTX, PDF2 likes550 views
The document discusses various tools for productive front-end development. It covers tools for getting scripts like Bower and NPM, searching for packages on sites like npmjs.com, transpiling languages like TypeScript and JSX with Babel, running tasks with tools like Gulp and Webpack, minifying code with Uglify and Clean CSS, bundling code, testing with tools like Mocha, ESLint and Selenium, generating code with Angular CLI and Create React App, and using GitHub with tools like Travis CI.
More Related Content
![[English][Test Girls] Zero to Hero: Start Test automation with Cypress](https://cdn.slidesharecdn.com/ss_thumbnails/entestgirlstestingwithcypress-191024022807-thumbnail.jpg?width=560&fit=bounds)
Similar to Tooling for the productive front-end developer(20)
![Java script nirvana in netbeans [con5679]](https://cdn.slidesharecdn.com/ss_thumbnails/javascriptnirvanainnetbeanscon5679-160927041807-thumbnail.jpg?width=560&fit=bounds)
More from Maurice De Beijer [MVP](20)
Tooling for the productive front-end developer
- 1. Tooling for theproductive front-end developer Maurice de Beijer @mauricedb
- 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] 2
- 3. Overview • Where toget scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub
- 4. Where to getscripts • Bower • NPM • JSPM
- 5.
- 6.
- 7.
- 8.
- 9. Overview • Where toget scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub
- 10. Searching for NPMpackages • https://www.npmjs.com • https://npms.io
- 11.
- 12.
- 13. Overview • Where toget scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub
- 14. ECMAScript 2015 andbeyond • CoffeeScript • Babel • TypeScript • JSX • Dart
- 15.
- 16.
- 17.
- 18.
- 19.
- 20. Overview • Where toget scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub
- 21. Task runners • Grunt •Gulp • Broccoli • NPM Scripts
- 22.
- 23.
- 24.
- 25.
- 26.
- 27. Overview • Where toget scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub
- 28. Minification • uglify-js • clean-css •html-minifier
- 29.
- 30.
- 31.
- 32. Overview • Where toget scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub
- 33. Bundling • Browserify • SystemJS •Webpack • Rollup • jspm
- 34.
- 35.
- 36.
- 37.
- 38.
- 39. Overview • Where toget scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub
- 40. Chrome DevTools • ConsoleAPI • Pretty Print • Break on DOM modifications • Break on XHR • Break on Event Listener • Asynchronous stack trace • Timeline • Audits • Profiles
- 41.
- 42.
- 43.
- 44. Break on DOMmodifications
- 45.
- 46.
- 47.
- 48.
- 49.
- 50. Overview • Where toget scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub
- 51. Performance testing • YSlow •WebPageTest • Chrome DevTools • Lighthouse
- 52.
- 53.
- 54.
- 55.
- 57. Overview • Where toget scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub
- 58. Unit Testing • Testem •Mocha • Chai • Chai-as-promised • Jsdom
- 59.
- 60.
- 61.
- 62.
- 63.
- 64. Overview • Where toget scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub
- 65. End 2 EndTesting • Selenium • Nightwatch • Browserstack
- 66.
- 67.
- 68.
- 69. Overview • Where toget scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub
- 70. Code generators • AngularCLI • Create React App • Yeoman
- 71.
- 72.
- 73.
- 74. Overview • Where toget scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub
- 75. Linting • ESLint • TSLint •Stylelint • SonarQube
- 76.
- 77.
- 78.
- 79.
- 80. Overview • Where toget scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub
- 81. CSS • Less • SASS •Stylelint • scss-lint • PostCSS • Autoprefixer
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88. Overview • Where toget scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub
- 89. Online editor • JSFiddle •JSBin • HyperDev
- 90.
- 91.
- 92.
- 93. Overview • Where toget scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub
- 94. Tools I usewith GitHub • Zenhub • Shields • David • Greenkeeper • Travis CI • Codecov
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 102. Overview • Where toget scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub
- 103. Thank you Maurice deBeijer - @mauricedb
Editor's Notes
- #104 https://www.flickr.com/photos/stevendepolo/4582437563/