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.

2015 nouveaux outilsdevweb

4,346 views

Published on

2015 nouveaux outilsdevweb devoxxfr

Published in: Technology

2015 nouveaux outilsdevweb

  1. 1. @YourTwitterHandle#YourSessionHashtag Les nouveaux Outils du 
 Développeur Web @PhilippeAntoine Xebia Agile Fullstack Developer
  2. 2. @PhilippeAntoine#WebToolbox Slides disponibles: http://www.slideshare.net/philippeantoine Checklist • Warmup & prototypes • Editeurs et extensions • Styleguide • Strategie de tests • Outiller le build • Performance
  3. 3. @PhilippeAntoine#WebToolbox 1. Elevator Pitch / Vision Box
 Papier & crayon
 2. Personas
 Google Presentation
 3. Métriques de succès
 Pirate Metrics Warmup du Projet
  4. 4. @PhilippeAntoine#WebToolbox • Un éditeur rapide
 • Scaffolder avec Emmet
 • live-server • Github Pages
 • Communiquer Prototyper en 10’
  5. 5. @PhilippeAntoine#WebToolbox 1. git-plus 2. linter-jscs 3. emmet 4. js-refactor 5. atom-grunt-configs 6. autocomplete-plus 7. Seti theme 8. atom-beautify 9. git-control 10. merge-conflicts Atom.io
  6. 6. @PhilippeAntoine#WebToolbox Postman Tester son API
  7. 7. @PhilippeAntoine#WebToolbox • uifaces.com & randomuser.me • <img src="http://placehold.it/350x150"> • blokkfont.com & loripsum.net • fontello.com & svgicons.sparkk.fr 
 
 • • json-generator.com Tricher sur le contenu Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in rebus apertissimis nimium longi sumus. Quid iudicant sensus? Duo Reges: constructio interrete. Traditur, inquit, ab Epicuro ratio neglegendi doloris.
  8. 8. @PhilippeAntoine#WebToolbox • codyhouse.co & tympanus.net/codrops • Google Web Starter Kit Labo: Fast UX
  9. 9. @PhilippeAntoine#WebToolbox RWD: Les Breakpoints
  10. 10. @PhilippeAntoine#WebToolbox Preprocesseur: Sass
  11. 11. @PhilippeAntoine#WebToolbox • viewport resizer • loadtime breakdown • CSS Layout Debugger • Perfmap Bookmarklets
  12. 12. @PhilippeAntoine#WebToolbox Scorecard: librairies • packagequality.com • libscore.com • javascripting.com • cssdb.co Scorecard
  13. 13. @PhilippeAntoine#WebToolbox • BuiltWith Technology Profiler • Requirify •Web Developer Checklist • Screencastify • Pesticide.io Chrome Devtools • Edit this cookie • Pixel Perfect • Junkfill • SEOQuake • Bootstrap Grid
  14. 14. @PhilippeAntoine#WebToolbox Browser trends: les bonnes cibles Statcounter global stats ou depuis vos logs
  15. 15. @PhilippeAntoine#WebToolbox Browser lab whichbrowser.net
  16. 16. @PhilippeAntoine#WebToolbox Versus Strategie de tests Next: Smoke Tests & tests delta
  17. 17. @PhilippeAntoine#WebToolbox http://codyhouse.co/demo/style-guide-template/index.html Styleguide
  18. 18. @PhilippeAntoine#WebToolbox http://blog.vanamco.com/ghostlab-2-is-here/ http://www.wearejh.com/news/browsersync-2-0/ http://localtunnel.me/ https://ngrok.com/ Live Reload / Browser Sync
  19. 19. @PhilippeAntoine#WebToolbox • Phantom.css • StyleStats.com • Critical / Penthouse • galenframework.com • helium CSS • JSCS Asset Pipeline Webpack + Amok.js ?
  20. 20. @PhilippeAntoine#WebToolbox Tests Cross-browser http://modern.ie browserstack.com
  21. 21. @PhilippeAntoine#WebToolbox “Chez moi ca marche”
  22. 22. @PhilippeAntoine#WebToolbox Demo Product Owner
  23. 23. @PhilippeAntoine#WebToolbox Bonnes Pratiques de Perf http://blog.xebia.fr/2015/01/12/mesurer-la-performance-de-vos-pages-web-avec-sitespeed-io/
  24. 24. @PhilippeAntoine#WebToolbox Qualite de code • Plato.js • moniteur • css-perf
  25. 25. @PhilippeAntoine#WebToolbox • http://validator.w3.org/mobile/ • http://ready.mobi/ • https://securityheaders.io/ • https://www.ssllabs.com/ • cssstats.com • csslint.net Outils en ligne
  26. 26. @PhilippeAntoine#WebToolbox Scenarios: BAU / Reportage Capital / Stanley https://github.com/jsebfranck/gatling-bootstrap Pre-Prod: Stress Tests Autres outils: vegeta ou wbench
  27. 27. @PhilippeAntoine#WebToolbox Optimizing Performance Audit Perf: 1000/100/6 Performance Model Paul Irish Audit Exemple
  28. 28. @PhilippeAntoine#WebToolbox Chrome DevTools Yellow labs (phantomas) Analyse de performance Speedcurve
  29. 29. @PhilippeAntoine#WebToolbox Web Page Test
  30. 30. @PhilippeAntoine#WebToolbox • Network filter: domain: *.addthis.com • Event Listener: scroll • Audit Unused CSS • mime-type:* • Hard reload Exemple: devoxx.fr
  31. 31. @PhilippeAntoine#WebToolbox Conclusion Slides disponibles: http://www.slideshare.net/philippeantoine • Warmup & prototypes • Editeurs et extensions • Styleguide • Strategie de tests • Outiller le build • Performance
  32. 32. @PhilippeAntoine#WebToolbox Steve Souders @Souders Paul Irish @paul_irish Addy Osmani @addyosmani Ilya Grigorik @igrigorik Paul Lewis @aerotwist Boris Smus @borismus Philippe Antoine @PhilippeAntoine Follow Friday

×