O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

2015 nouveaux outilsdevweb

4.298 visualizações

Publicada em

2015 nouveaux outilsdevweb devoxxfr

Publicada em: Tecnologia
  • Seja o primeiro a comentar

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

×