Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

CSS SCALABILE: Sfide e ricompense di un percorso in salita

392 visualizaciones

Publicado el

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.

Publicado en: Tecnología
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

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

×