Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Tooling for the productive front end developer

422 views

Published on

Tooling for the productive front end developer at the Dutch Microsoft TechDays 2016

Published in: Technology
  • Be the first to comment

Tooling for the productive front end developer

  1. 1. 3
  2. 2. Where to get 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
  3. 3. Bower NPM JSPM
  4. 4. Where to get 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
  5. 5. https://www.npmjs.com https://npms.io
  6. 6. Where to get 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
  7. 7. CoffeeScript Babel TypeScript JSX Dart
  8. 8. Where to get 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
  9. 9. Grunt Gulp Broccoli NPM Scripts
  10. 10. NPM Scripts
  11. 11. Where to get 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
  12. 12. uglify-js clean-css html-minifier
  13. 13. Where to get 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. 14. Browserify SystemJS Webpack Rollup jspm
  15. 15. Where to get 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
  16. 16. Chrome DevTools Console API Pretty Print
  17. 17. Break on DOM modifications
  18. 18. Break on XHR
  19. 19. Where to get 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
  20. 20. YSlow WebPageTest Chrome DevTools Lighthouse
  21. 21. Where to get 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
  22. 22. Testem Mocha Chai Chai-as-promised Jsdom
  23. 23. Where to get 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
  24. 24. Selenium Nightwatch Browserstack
  25. 25. Where to get 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
  26. 26. Angular CLI Create React App Yeoman Swagger
  27. 27. Where to get 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. 28. ESLint TSLint Stylelint SonarQube
  29. 29. Where to get 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
  30. 30. Less SASS Stylelint scss-lint PostCSS Autoprefixer
  31. 31. Where to get 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
  32. 32. JSFiddle JSBin HyperDev
  33. 33. Where to get 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
  34. 34. Zenhub Shields David Greenkeeper Travis CI Codecov
  35. 35. Shields
  36. 36. Where to get 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
  37. 37. Maurice de Beijer - @mauricedb

×