CSS figli di un dio minore

Diciamoci la verità, il CSS è facile e alla portata di tutti. Ma nonostante questo molti sviluppatori vedono CSS come un male necessario. Tra chi lo odia e lo evita come la peste, chi cerca di fixarlo e lo inserisce in Javascript, chi aspetta e brama qualche tool di disegno che esporti CSS utilizzabile. Ma c'è tra di noi chi il CSS lo ama, ma se ne vergogna amaramente. Usciamo fuori dall'ombra e facciamo vedere davvero cosa vuol dire scrivere CSS nel mondo del lavoro moderno. Perché alla fine che mondo sarebbe senza colori?

Transcript

1. CSS: Figli di un dio minore Davide Di Pumpo Faenza 2017
2. Chi sono? Davide Di Pumpo Senior Front End Developer Coorganizzatore maintainer MakhBeth on Mi piacciono: gatti, fumetti, videogiochi e le cravatte @Credimi Milano Front End Meetup Super GiGi Twitter GitHub Internet
3. LET'S START MEOW!
4. Prima però Devo parlarvi un po' di me
5. Quando sono nato
6. Cosa volevo fare? IL WEB DESIGNER * Il dentista
7. Cosa ho fatto Informatica Graphic Design Programmatore Flash Grafico Pubblicitario Front End Developer UI Designer (Nel mentre ho sempre fatto siti web)
8. Per due anni Ho fatto praticamente il CSSsista
9. Perché vi racconto questo? È una storia
10. Una storia che ci accomuna un po' tutti
12. Il web è una miniera d'oro (almost)
13. E come per il far west, ci siamo trovati di tutto alla frontiera Designer Developer IT Addetti marketing Web master Scappati di casa Che è un bene eh, il Web è bello anche perché è eterogeneo
14. Designer VS Developer
15. Ma com'è il rapporto tra un CSSista e gli altri?
16. Testimonianze
19. Stai sul ***** a TUTTI
21. Nessuno ti ama
23. IL CSS FA SCHIFO
24. Seriamente Quanti di voi scrivono CSS? Escludendo: CSS Modules, Style component … Sass, Less, PostCSS … Bootstrap (brrr), Foundation …
25. React: CSS in JS by vjeux
26. E per un designer:
27. CSS NEMMENO RICONOSCE GLI ERRORI
28. Sapete cosa mi ricorda?
29. Javascript nel 2008 tipo
31. Ma Javascript ha ottenuto il giusto rispetto
32. Attraverso: Educazione Testing Preprocessor & Tools Convenzioni Non includendo jQuery ovunque
33. Educazione O come evitare le bad practice
34. Magic number un numero o una stringa ripetuta più volte nel codice sorgente di un programma a cui non è attribuito un significato esplicito. Questo uso del termine è prettamente dispregiativo Wikipedia
35. Il CSS è pieno di numeri e misure Che spesso inseriamo a caso
38. Vogliamo parlare della line- height?
40. Come risolvere? Passate al funzionale
41. .my-column { @include color('primary'); @include font-size('huge'); @include grid-column(12); @include space('margin-top', 2); }
42. Ci sono già un sacco di risorse là fuori - A meaningful web typography starter kit - Flex Sass Grid Generator - A visual guide Intro to the 8-Point Grid System Font metrics, line-height and vertical-align Why vertical rhythms Truly Fluid Typography With vh And vw Units Modular scale calculator Gutenberg Super GiGi Sass color functions
43. Testing No seriamente, non sto scherzando
44. Dovete testare la vostra roba!
45. Se già fate unit test it('some css property', function () { expect(el.css('display')).to.eq('block'); });
46. Ma si può andare oltre
47. @include test-module('Utilities') { @include test('Font Size [mixin]') { @include assert('Outputs a font size and line height based on keyword.' @include input { @include font-size(large); } @include expect { font-size: 2rem; line-height: 3rem; } } } }
48. Regression, baby
49. Tool Su questo siamo messi bene, dai
50. Non credo ci sia bisogno di presentare: Sass Less PostCSS CSS in JS Ecc…
51. Ecco, nel caso non li conosciate, magari dateci un occhio. Pure ora da cellulare, vi perdono.
52. Convenzioni No, non parlo di sconti se siete affiliati LIDL
53. E se ti dicesasi Che anche quanti spazi metti conta?
54. Le convenzioni sono importanti Rafforza le Best Practice Aumenta la manutenibilità E' più professionale
55. Come? Linter baby
57. Link Style Lint Scss Lint CSS Lint
58. Stop importing jQuery everywhere
59. Ecco, la stessa cosa per Bootstrap
60. Link Video Slide
61. Quindi?
62. Il css deve essere facile da capire, per supportare tutta la gente che si avvicina al web.
63. Ma il CSS non ha bisogno della vostra pietà!
64. Ma io già faccio tutto questo e, nonostante tutto, nessuno vuole giocare con me!
66. Thank you