BreizhCamp 2015 #BzhCmp
#45tools #BzhCmp
BreizhCamp 2015 #BzhCmp
45 Tools
to Boost Your Front-End
Nicolas Pennec - @NicoPe...
Nicolas Pennec
● Full-Stack Web Developer
○ JavaScript
○ PHP
○ JEE
● Rennes, France
● Co-Founder of RennesJS
● @NicoPennec...
RennesJS.org #45tools
Rules #45tools
● 1 min / slide
● Auto Play
● Questions at the end
● #45tools #bzhcmp
$document.ready() #45tools
DevDocs.io #45tools
Angular.io (2.0 alpha) #45tools
Aurelia.io #45tools
Polymer-project.org #45tools
Materializecss.com #45tools
Boostrap-Material-Design #45tools
Cmder #45tools
sass/node-sass #45tools
Babeljs.io #45tools
cssnext.io #45tools
JSCS.info #45tools
CSSLint.net #45tools
danielstjules/JSInspect #45tools
JSPM.io #45tools
browserify.org #45tools
webpack.github.io #45tools
Pesticide.io #45tools
FontFace.Ninja #45tools
callmecavs/layzr #45tools
giakki/UnCSS #45tools
Fontello.com #45tools
zeman/Perfmap #45tools
addyosmani/Critical #45tools
BrowserSync.io #45tools
NightwatchJS.org #45tools
Webdriver.IO #45tools
marmelab/gremlins.js #45tools
WebPageTest.org
WPT Private Instance + Vagrant
https://github.com/NicoPennec/vagrant-webpagetest
#45tools
gmetais/grunt-devperf #45tools
VorlonJS.com #45tools
djfarrelly/MailDev #45tools
typicode/json-server #45tools
FrisbyJS.com #45tools
jariz/vibrant.js #45tools
imsky/holder #45tools
MomentJS.com #45tools
connoratherton/Loaders.css #45tools
astoilkov/console.message #45tools
NVD3.org #45tools
jsPDF.com #45tools
ionicframework.com #45tools
facebook/React-Native #45tools
Wappalyzer.com #45tools
Master your Dev Tools
● Chrome Dev Tools + Chrome Canary
● Firefox Dev Tools / Firefox Developer Edition
● Microsoft F12 D...
GitHub.com/Trending #45tools
Communities!!! #45tools
Success… #45tools
Resources (1/3)
● http://devdocs.io/
● http://angular.io/
● http://aurelia.io/
● https://www.polymer-project.org/
● http:/...
Resources (2/3)
● http://webpack.github.io/
● http://pesticide.io/
● http://fontface.ninja/
● http://callmecavs.github.io/...
Resources (3/3)
● https://github.com/djfarrelly/MailDev
● https://github.com/typicode/json-server
● http://frisbyjs.com/
●...
Thanks!
@NicoPennec / pennec.io
#45tools
Prochain SlideShare
Chargement dans…5
×

45 Tools to Boost Your Front-End

3 312 vues

Publié le

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

Publié dans : Logiciels
2 commentaires
7 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
3 312
Sur SlideShare
0
Issues des intégrations
0
Intégrations
272
Actions
Partages
0
Téléchargements
18
Commentaires
2
J’aime
7
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • 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
  • 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

    ×