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.

1. CSS SCALABILE
Sfide e ricompense di un
percorso in salita
Carla Soloperto
@uochimiluochi

3. WE WILL TALK ABOUT:
CHALLENGES
RESPONSIBILITIES
REWARDS!

4. six packweb
biceps
quadriceps

5. Let’s climb!

6. HOW DOES THE TEAM WORK?

7. BACKEND
BACKEND
BACKEND
UI
FRONTEND

8. ITERATIVE / INCREMENTAL
Iteration 1
Iteration 2
Iteration 3

9. as a
I want
so that
USER STORIES
type of user
some goal
benefit, value

10. HOW DOES
THE FRONTEND DEVELOPER
NOT WORK?

11. USER STORIES
ITERATIVE / INCREMENTAL

13. 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

14. Harry Roberts
Ten Principles for Effective Front-end Development
{ @csswizardry }
#6

15. Harry Roberts
Ten Principles for Effective Front-end Development
{ @csswizardry }
#9

16. v
documents-list

18. v
documents-list

19. - READABLE CODE
- DRY CODE
- SCALABLE CODE
- MODULAR CODE
CHALLENGES

20. = CODING CONVENTIONS
LINTERS
NAMING CONVENTIONS
ARCHITECTURE
Share them!

21. Rely on semantics
Avoid presentational class names
Some tips

23. COLORNAMER

27. PIGMENTS

32. use a TEMPLATE ENGINE for your markup
- break your html into smaller files
- populate your markup with data
Tip

33. Nunjucks, Handlebars, Dust.js

34. Faker

35. MODULAR
index.html
htmlv vvvv
customers
documents
users
products
componentsv
import.scss
stylesv
vvvv
customers
documents
users
products
componentsv

36. v
v
MODULAR?
index.html
htmlv
v
customers
customers-list
products
componentsv
v
products-list

37. v
customers-list
v
products-list
.list { … }
.list__item { … }
.list__title { … } .list__create-new { … }
.list { … }
.list__item { … }
.list__title { … } .list__create-new { … }

38. don’t let MODULARITY become REDUNDANCY

39. RESPONSIBILITIES
- OTHER FRONTEND DEVELOPERS
- BACKEND DEVELOPERS
- OURSELVES!

41. adopt and share your
CODING CONVENTION
let someone
REVIEW YOUR CODE
think
MODULAR

43. !REWARDS
- READABLE CODE
- DRY CODE
- SCALABLE CODE
- MODULAR CODE

44. Thank you
Carla Soloperto
@uochimiluochi