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.

CSS SCALABILE: Sfide e ricompense di un percorso in salita

391 visualizações

Publicada em

In questo talk parleremo di alcuni strumenti e pratiche che possiamo utilizzare nel lavoro quotidiano per scrivere codice di qualità, nonché della nostra responsabilità nel renderlo comprensibile, scalabile e manutenibile nel tempo.

Publicada em: Tecnologia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

CSS SCALABILE: Sfide e ricompense di un percorso in salita

  1. 1. CSS SCALABILE Sfide e ricompense di un percorso in salita Carla Soloperto @uochimiluochi
  2. 2. WE WILL TALK ABOUT: CHALLENGES RESPONSIBILITIES REWARDS!
  3. 3. six packweb biceps quadriceps
  4. 4. Let’s climb!
  5. 5. HOW DOES THE TEAM WORK?
  6. 6. BACKEND BACKEND BACKEND UI FRONTEND
  7. 7. ITERATIVE / INCREMENTAL Iteration 1 Iteration 2 Iteration 3
  8. 8. as a I want so that USER STORIES type of user some goal benefit, value
  9. 9. HOW DOES THE FRONTEND DEVELOPER NOT WORK?
  10. 10. USER STORIES ITERATIVE / INCREMENTAL
  11. 11. STATIC TEMPLATES - contain more than the product will ever need - hard to split into partials - hard to expand - living their lives outside the actual product
  12. 12. Harry Roberts Ten Principles for Effective Front-end Development { @csswizardry } #6
  13. 13. Harry Roberts Ten Principles for Effective Front-end Development { @csswizardry } #9
  14. 14. v documents-list
  15. 15. v documents-list
  16. 16. - READABLE CODE - DRY CODE - SCALABLE CODE - MODULAR CODE CHALLENGES
  17. 17. = CODING CONVENTIONS LINTERS NAMING CONVENTIONS ARCHITECTURE Share them!
  18. 18. Rely on semantics Avoid presentational class names Some tips
  19. 19. COLORNAMER
  20. 20. PIGMENTS
  21. 21. use a TEMPLATE ENGINE for your markup - break your html into smaller files - populate your markup with data Tip
  22. 22. Nunjucks, Handlebars, Dust.js
  23. 23. Faker
  24. 24. MODULAR index.html htmlv vvvv customers documents users products componentsv import.scss stylesv vvvv customers documents users products componentsv
  25. 25. v v MODULAR? index.html htmlv v customers customers-list products componentsv v products-list
  26. 26. v customers-list v products-list .list { … } .list__item { … } .list__title { … } .list__create-new { … } .list { … } .list__item { … } .list__title { … } .list__create-new { … }
  27. 27. don’t let MODULARITY become REDUNDANCY
  28. 28. RESPONSIBILITIES - OTHER FRONTEND DEVELOPERS - BACKEND DEVELOPERS - OURSELVES!
  29. 29. adopt and share your CODING CONVENTION let someone REVIEW YOUR CODE think MODULAR
  30. 30. !REWARDS - READABLE CODE - DRY CODE - SCALABLE CODE - MODULAR CODE
  31. 31. Thank you Carla Soloperto @uochimiluochi

×