Tooling for the productive front end developer
0 likes449 views
![Maurice De Beijer [MVP], profile picture](https://cdn.slidesharecdn.com/profile-photo-mauricedb-48x48.jpg?cb=1750747544)
The document presents a comprehensive guide for front-end developers, covering various tools and techniques including task runners, minification, bundling, and testing. It lists resources for obtaining JavaScript packages, provides insights into performance testing, and suggests tools for linting and code generation. The author, Maurice de Beijer, offers a wealth of knowledge on modern web development practices and tools.
Tooling for the productive front end developer
- 1. Tooling for the productive front-end developer Maurice de Beijer @mauricedb
- 2. Who am I? Maurice de Beijer The Problem Solver MicrosoftAzure MVP Freelance developer/instructor Twitter: @mauricedb and @React_Tutorial Web: http://www.TheProblemSolver.nl E-mail: maurice.de.beijer@gmail.com 2
- 3. Overview Where to get scripts Searching for NPM packages ECMAScript 2015 and beyond Task runners Minification Bundling Chrome DevTools Performance testing UnitTesting E2ETesting Code generators Linting CSS Online editor Tools I use with GitHub
- 6. Bower
- 7. NPM
- 9. JSPM
- 10. Overview Where to get scripts Searching for NPM packages ECMAScript 2015 and beyond Task runners Minification Bundling Chrome DevTools Performance testing UnitTesting E2ETesting Code generators Linting CSS Online editor Tools I use with GitHub
- 11. Searching for NPM packages https://www.npmjs.com https://npms.io
- 12. NPM
- 13. NPMS.IO
- 14. Overview Where to get scripts Searching for NPM packages ECMAScript 2015 and beyond Task runners Minification Bundling Chrome DevTools Performance testing UnitTesting E2ETesting Code generators Linting CSS Online editor Tools I use with GitHub
- 16. CoffeeScript
- 17. Babel
- 18. TypeScript
- 19. JSX
- 20. Flow
- 21. Dart
- 22. Overview Where to get scripts Searching for NPM packages ECMAScript 2015 and beyond Task runners Minification Bundling Chrome DevTools Performance testing UnitTesting E2ETesting Code generators Linting CSS Online editor Tools I use with GitHub
- 24. Grunt
- 25. Gulp
- 26. Broccoli
- 27. NPMScripts
- 28. NPM Scripts
- 29. Overview Where to get scripts Searching for NPM packages ECMAScript 2015 and beyond Task runners Minification Bundling Chrome DevTools Performance testing UnitTesting E2ETesting Code generators Linting CSS Online editor Tools I use with GitHub
- 31. Uglify
- 32. CleanCSS
- 33. HTML Minifier
- 34. Overview Where to get scripts Searching for NPM packages ECMAScript 2015 and beyond Task runners Minification Bundling Chrome DevTools Performance testing UnitTesting E2ETesting Code generators Linting CSS Online editor Tools I use with GitHub
- 36. Browserify
- 37. SystemJS
- 38. Webpack
- 39. Rollup
- 40. JSPM
- 41. Overview Where to get scripts Searching for NPM packages ECMAScript 2015 and beyond Task runners Minification Bundling Chrome DevTools Performance testing UnitTesting E2ETesting Code generators Linting CSS Online editor Tools I use with GitHub
- 42. Chrome DevTools Console API Pretty Print Break on DOM modifications Break on XHR Break on Event Listener Asynchronous stack trace Timeline Audits Profiles
- 43. ConsoleAPI
- 44. Pretty Print
- 45. Pretty Print
- 47. Break on XHR
- 49. Timeline
- 50. Audits
- 51. Profile
- 52. Overview Where to get scripts Searching for NPM packages ECMAScript 2015 and beyond Task runners Minification Bundling Chrome DevTools Performance testing UnitTesting E2ETesting Code generators Linting CSS Online editor Tools I use with GitHub
- 54. YSlow
- 55. WebPageTest
- 56. Chrome timeline
- 57. Chrome audit
- 59. Overview Where to get scripts Searching for NPM packages ECMAScript 2015 and beyond Task runners Minification Bundling Chrome DevTools Performance testing UnitTesting E2ETesting Code generators Linting CSS Online editor Tools I use with GitHub
- 61. Testem
- 62. Mocha
- 63. Jest
- 64. Chai
- 65. Chai as promised
- 66. JS Dom
- 67. Overview Where to get scripts Searching for NPM packages ECMAScript 2015 and beyond Task runners Minification Bundling Chrome DevTools Performance testing UnitTesting E2ETesting Code generators Linting CSS Online editor Tools I use with GitHub
- 69. Selenium
- 70. Nightwatch
- 71. BrowserStack
- 72. Overview Where to get scripts Searching for NPM packages ECMAScript 2015 and beyond Task runners Minification Bundling Chrome DevTools Performance testing UnitTesting E2ETesting Code generators Linting CSS Online editor Tools I use with GitHub
- 74. AngularCLI
- 75. Create React App
- 77. Yeoman
- 78. Overview Where to get scripts Searching for NPM packages ECMAScript 2015 and beyond Task runners Minification Bundling Chrome DevTools Performance testing UnitTesting E2ETesting Code generators Linting CSS Online editor Tools I use with GitHub
- 79. Linting ESLint JavaScript Standard Style JavaScript Semi-Standard Style TSLint Stylelint SonarQube Code Climate
- 80. ESLint
- 83. TSLint
- 84. StyleLint
- 85. SonarQube
- 87. Overview Where to get scripts Searching for NPM packages ECMAScript 2015 and beyond Task runners Minification Bundling Chrome DevTools Performance testing UnitTesting E2ETesting Code generators Linting CSS Online editor Tools I use with GitHub
- 89. LESS
- 90. SASS
- 91. SyleLint
- 92. SCSS Lint
- 93. PostCSS
- 94. Autoprefixer
- 95. Overview Where to get scripts Searching for NPM packages ECMAScript 2015 and beyond Task runners Minification Bundling Chrome DevTools Performance testing UnitTesting E2ETesting Code generators Linting CSS Online editor Tools I use with GitHub
- 97. JS Fiddle
- 98. JS Bin
- 99. Glitch
- 100. Overview Where to get scripts Searching for NPM packages ECMAScript 2015 and beyond Task runners Minification Bundling Chrome DevTools Performance testing UnitTesting E2ETesting Code generators Linting CSS Online editor Tools I use with GitHub
- 101. Tools I use with GitHub Zenhub Refined GitHub Shields David Greenkeeper Travis CI Codecov Code Climate
- 102. Zenhub
- 105. Shields
- 106. David
- 107. Greenkeeper
- 108. TravisCI
- 109. Codecov
- 110. CodeClimate
- 111. Overview Where to get scripts Searching for NPM packages ECMAScript 2015 and beyond Task runners Minification Bundling Chrome DevTools Performance testing UnitTesting E2ETesting Code generators Linting CSS Online editor Tools I use with GitHub
- 112. Thank you Maurice de Beijer - @mauricedb