Downloaded 22 times
Uploaded byNicolas PENNEC
45 Tools to Boost Your Front-End
Breizhcamp 2015 features a presentation by Nicolas Pennec on '45 tools to boost your front-end', highlighting various resources for web development. The document includes a list of 45 tools, such as Angular, Polymer, Webpack, and testing frameworks. It emphasizes the importance of mastering developer tools and engaging with communities for success in modern web development.
![[SEN#7] Le Top 100 des entreprises qui recrutent dans le numérique](https://cdn.slidesharecdn.com/ss_thumbnails/top100sen7entreprises-v1-170315153624-thumbnail.jpg?width=640&height=640&fit=bounds)
45 Tools to Boost Your Front-End
- 1. BreizhCamp 2015 #BzhCmp #45tools#BzhCmp BreizhCamp 2015 #BzhCmp 45 Tools to Boost Your Front-End Nicolas Pennec - @NicoPennec 2015/06/12
- 2. Nicolas Pennec ● Full-StackWeb Developer ○ JavaScript ○ PHP ○ JEE ● Rennes, France ● Co-Founder of RennesJS ● @NicoPennec / pennec.io (WIP) #45tools
- 3.
- 4. Rules #45tools ● 1min / slide ● Auto Play ● Questions at the end ● #45tools #bzhcmp
- 5.
- 6.
- 7. Angular.io (2.0 alpha)#45tools
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33. WebPageTest.org WPT Private Instance+ Vagrant https://github.com/NicoPennec/vagrant-webpagetest #45tools
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49. Master your DevTools ● Chrome Dev Tools + Chrome Canary ● Firefox Dev Tools / Firefox Developer Edition ● Microsoft F12 Developer Tools ● … #45tools
- 50.
- 51.
- 52.
- 53. Resources (1/3) ● http://devdocs.io/ ●http://angular.io/ ● http://aurelia.io/ ● https://www.polymer-project.org/ ● http://materializecss.com/ ● http://fezvrasta.github.io/bootstrap-material-design/ ● http://gooseberrycreative.com/cmder/ ● https://github.com/sass/node-sass ● https://babeljs.io/ ● http://cssnext.io/ ● http://jscs.info/ ● http://csslint.net/ ● https://github.com/danielstjules/jsinspect ● http://jspm.io/ ● http://browserify.org/ #45tools
- 54. Resources (2/3) ● http://webpack.github.io/ ●http://pesticide.io/ ● http://fontface.ninja/ ● http://callmecavs.github.io/layzr.js/ ● https://github.com/giakki/UnCSS ● http://fontello.com/ ● https://github.com/zeman/perfmap ● https://github.com/addyosmani/critical ● http://www.browsersync.io/ ● http://nightwatchjs.org/ ● http://webdriver.io/ ● https://github.com/marmelab/gremlins.js ● http://www.webpagetest.org/ ● https://github.com/gmetais/grunt-devperf ● http://vorlonjs.com/ #45tools
- 55. Resources (3/3) ● https://github.com/djfarrelly/MailDev ●https://github.com/typicode/json-server ● http://frisbyjs.com/ ● https://github.com/jariz/vibrant.js/ ● https://github.com/imsky/holder ● http://momentjs.com/ ● https://github.com/ConnorAtherton/loaders.css ● https://github.com/astoilkov/console.message ● http://nvd3.org ● http://jspdf.com/ ● http://www.ionicframework.com/ ● https://facebook.github.io/react-native/ ● https://wappalyzer.com/ ● Press F12 ● https://github.com/trending?since=monthly #45tools
- 56.
Editor's Notes
- #3 http://www.breizhcamp.org/
- #4 https://twitter.com/NicoPennec http://pennec.io
- #5 http://rennesjs.org
- #9 http://devdocs.io/
- #10 http://angular.io/
- #11 http://aurelia.io/
- #12 https://www.polymer-project.org/
- #13 http://materializecss.com/
- #14 http://fezvrasta.github.io/bootstrap-material-design/
- #15 http://gooseberrycreative.com/cmder/
- #16 https://github.com/sass/node-sass
- #17 https://babeljs.io/
- #18 http://cssnext.io/
- #19 http://jscs.info/
- #20 http://csslint.net/
- #21 https://github.com/danielstjules/jsinspect
- #22 http://jspm.io/
- #23 http://browserify.org/
- #24 http://webpack.github.io/
- #25 http://pesticide.io/
- #26 http://fontface.ninja/
- #27 https://github.com/callmecavs/layzr.js
- #28 https://github.com/giakki/UnCSS UnCSS un outil qui va effacer le CSS inutilisé de votre feuille de style. Interet => gain de poids => temps de chargement et de traitement de CSS Utilise PhantomJS pour le rendu et pars ensuite le css (avec CSS Parse = css parser pour node) Lib sous Npm évidemment, configurable (media queries, ignore list, fichiers cibles, etc.) Task Grunt / Gulp / Brocoli Style ajouté par interaction utilisateur non détecter (hover, click, ….) => mettre en « ignore »
- #29 http://fontello.com/
- #30 https://github.com/zeman/perfmap
- #31 https://github.com/addyosmani/critical
- #32 http://www.browsersync.io/
- #33 http://nightwatchjs.org/
- #34 http://webdriver.io/
- #35 https://github.com/marmelab/gremlins.js
- #36 http://www.webpagetest.org/
- #37 https://github.com/gmetais/grunt-devperf
- #38 http://vorlonjs.com/
- #39 https://github.com/djfarrelly/MailDev
- #40 https://github.com/typicode/json-server
- #41 http://frisbyjs.com/
- #42 https://github.com/jariz/vibrant.js/
- #43 https://github.com/imsky/holder
- #44 http://momentjs.com/
- #45 https://github.com/ConnorAtherton/loaders.css
- #46 https://github.com/astoilkov/console.message
- #47 http://nvd3.org
- #48 http://jspdf.com/
- #49 http://www.ionicframework.com/
- #50 https://facebook.github.io/react-native/
- #51 https://wappalyzer.com/
- #52 Press F12
- #53 https://github.com/trending?since=monthly
- #54 (BONUS) http://rennesjs.org
- #55 https://github.com/pazguille/offline-first
- #56 http://dotdotdot.frebsite.nl/
- #61 https://twitter.com/NicoPennec http://pennec.io