Successfully reported this slideshow.
Your SlideShare is downloading. ×

45 Tools to Boost Your Front-End

Ad

BreizhCamp 2015 #BzhCmp
#45tools #BzhCmp
BreizhCamp 2015 #BzhCmp
45 Tools
to Boost Your Front-End
Nicolas Pennec - @NicoPe...

Ad

Nicolas Pennec
● Full-Stack Web Developer
○ JavaScript
○ PHP
○ JEE
● Rennes, France
● Co-Founder of RennesJS
● @NicoPennec...

Ad

RennesJS.org #45tools

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Check these out next

1 of 56 Ad
1 of 56 Ad

45 Tools to Boost Your Front-End

Download to read offline

"45 Tools to Boost Your Front-End" is a talk that I have presented at the Breizhcamp 2015, a french IT conference in Rennes, France.

I have introduced a list of 45 tools about front-end development : frameworks, code quality, testing, performance, utils, etc.

Replay this talk on video (french) : https://www.parleys.com/tutorial/45-outils-pour-doper-votre-front-end

About me : http://pennec.io/

"45 Tools to Boost Your Front-End" is a talk that I have presented at the Breizhcamp 2015, a french IT conference in Rennes, France.

I have introduced a list of 45 tools about front-end development : frameworks, code quality, testing, performance, utils, etc.

Replay this talk on video (french) : https://www.parleys.com/tutorial/45-outils-pour-doper-votre-front-end

About me : http://pennec.io/

More Related Content

45 Tools to Boost Your Front-End

  1. 1. BreizhCamp 2015 #BzhCmp #45tools #BzhCmp BreizhCamp 2015 #BzhCmp 45 Tools to Boost Your Front-End Nicolas Pennec - @NicoPennec 2015/06/12
  2. 2. Nicolas Pennec ● Full-Stack Web Developer ○ JavaScript ○ PHP ○ JEE ● Rennes, France ● Co-Founder of RennesJS ● @NicoPennec / pennec.io (WIP) #45tools
  3. 3. RennesJS.org #45tools
  4. 4. Rules #45tools ● 1 min / slide ● Auto Play ● Questions at the end ● #45tools #bzhcmp
  5. 5. $document.ready() #45tools
  6. 6. DevDocs.io #45tools
  7. 7. Angular.io (2.0 alpha) #45tools
  8. 8. Aurelia.io #45tools
  9. 9. Polymer-project.org #45tools
  10. 10. Materializecss.com #45tools
  11. 11. Boostrap-Material-Design #45tools
  12. 12. Cmder #45tools
  13. 13. sass/node-sass #45tools
  14. 14. Babeljs.io #45tools
  15. 15. cssnext.io #45tools
  16. 16. JSCS.info #45tools
  17. 17. CSSLint.net #45tools
  18. 18. danielstjules/JSInspect #45tools
  19. 19. JSPM.io #45tools
  20. 20. browserify.org #45tools
  21. 21. webpack.github.io #45tools
  22. 22. Pesticide.io #45tools
  23. 23. FontFace.Ninja #45tools
  24. 24. callmecavs/layzr #45tools
  25. 25. giakki/UnCSS #45tools
  26. 26. Fontello.com #45tools
  27. 27. zeman/Perfmap #45tools
  28. 28. addyosmani/Critical #45tools
  29. 29. BrowserSync.io #45tools
  30. 30. NightwatchJS.org #45tools
  31. 31. Webdriver.IO #45tools
  32. 32. marmelab/gremlins.js #45tools
  33. 33. WebPageTest.org WPT Private Instance + Vagrant https://github.com/NicoPennec/vagrant-webpagetest #45tools
  34. 34. gmetais/grunt-devperf #45tools
  35. 35. VorlonJS.com #45tools
  36. 36. djfarrelly/MailDev #45tools
  37. 37. typicode/json-server #45tools
  38. 38. FrisbyJS.com #45tools
  39. 39. jariz/vibrant.js #45tools
  40. 40. imsky/holder #45tools
  41. 41. MomentJS.com #45tools
  42. 42. connoratherton/Loaders.css #45tools
  43. 43. astoilkov/console.message #45tools
  44. 44. NVD3.org #45tools
  45. 45. jsPDF.com #45tools
  46. 46. ionicframework.com #45tools
  47. 47. facebook/React-Native #45tools
  48. 48. Wappalyzer.com #45tools
  49. 49. Master your Dev Tools ● Chrome Dev Tools + Chrome Canary ● Firefox Dev Tools / Firefox Developer Edition ● Microsoft F12 Developer Tools ● … #45tools
  50. 50. GitHub.com/Trending #45tools
  51. 51. Communities!!! #45tools
  52. 52. Success… #45tools
  53. 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. 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. 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. 56. Thanks! @NicoPennec / pennec.io #45tools

Editor's Notes

  • http://www.breizhcamp.org/
  • https://twitter.com/NicoPennec
    http://pennec.io
  • http://rennesjs.org
  • 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/
  • http://webpack.github.io/
  • http://pesticide.io/
  • http://fontface.ninja/
  • https://github.com/callmecavs/layzr.js
  • 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 »

  • 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/

  • 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
  • (BONUS)
    http://rennesjs.org
  • https://github.com/pazguille/offline-first
  • http://dotdotdot.frebsite.nl/
  • https://twitter.com/NicoPennec
    http://pennec.io

×