Styleguiding is not a crime

Il talk tappabuchi con flip e slide. Volo pindarico tra style guide di ieri e di oggi, con riferimenti tanto a Brad Frost quanto a Rodney Mullen.

Off, Bologna front end, 25 settembre 2018.

Transcript

1. OFF – Bologna – 25 settembre 2018
6. @decarola ciao@decaro.la
7. Perché siamo qui?
8. Style guide tipo Pattern lab?
9. Style guide tipo GEL?
10. Style guide tipo Fractal?
11. Style guide tipo Bootstrap?
12. Style guide tipo Storybook?
13. https://standardsmanual.com/products/nasa-graphics-standards-manual
21. http://styleguides.io/
22. • Nessun favoritismo • Nessun ordine di importanza • Nessuna ambizione di completezza
23. Freestyle Classic & old school
24. https://www.youtube.com/watch?v=WUjjH2v5Pto
25. Manazza
31. Front end =======================
 Back end
32. Pattern primer • Esempio di style guide di (santo) Jeremy • https://github.com/adactio/Pattern-Primer
35. Style tiles • Mood board • Agli inizi del RWD • http://styletil.es • By Samantha Warren
41. In conclusione. • Vocabolario prima di tutto. • Separa front end da back end (e volendo i componenti dallo stile). • Anche fatta a manazza, è comunque meglio di niente.
42. Street skating Modern & aggressive
43. https://www.youtube.com/watch?v=dZIL61ru6YM
51. Tips & tricks http://fractal.clearleft.com/components/detail/banner--notice.html
53. https://www.dropbox.com/s/5mgv7qxdea1fgkw/Studio%20Poster%20ITCSS%203.pdf?dl=0
55. Pro e Contro • Pulite, ordinate, manutenibili. • Aiutano a quantificare il lavoro. • Diventano uno strumento per sviluppatori E designer. • Linea di comando richiesta. • Manutenzione inevitabile. • x = numero di componenti
 y = bravura del designer
 z = stabilità del rapporto
 
 y = x/z #
56. Sviluppatore B/E • (+) Ha degli esempi chiari su come funzionano i vari componenti. • (-) Si sente in soggezione se deve modificare qualcosa
57. _shame.scss
58. Designer • (+) Ha l’inventario dei componenti a disposizione. Più sensibile alle dinamiche di sviluppo. • (-) Mani legate.
59. /* Eccezion fatta per */
60. Quindi • Rotto il ghiaccio con il terminale, è tutto in discesa. • Organizzare bene gli stili è possibile (es. ITCSS). • Devs Designers
61. MEGARAMP Extreme & PRO only
65. https://www.youtube.com/watch?v=1Q3PNj3tRW4
66. https://www.youtube.com/watch?v=1fmfsZ3Ye-g
68. Storybook • Pattern library interattiva • React or Vue or Angular • https://storybook.js.org
69. Styleguidist • Pattern library interattiva • Creato partendo da React Styleguidist • https://github.com/vue-styleguidist/vue- styleguidist
72. cinemainpiazza.info
73. –John F. Kennedy “Every accomplishment starts with the decision to try”.
74. –Anonimo skater “Skate before is too late”.
76. Grazie! @decarola ciao@decaro.la Domande & chiacchiere