CSS Day 2016

Venerdì 25 marzo 2016 abbiamo avuto modo di partecipare al CSSDay organizzato a Faenza dal Grusp, un evento incentrato sulle nuove metodologie e strumenti a disposizione degli sviluppatori, con delle riflessioni interessanti sulle origini e deviazioni dei CSS. Buona parte dei talk mirava a trovare delle soluzioni di sviluppo non legate a degli hack “esoterici” che permettano di sfruttare proprietà disponibili da subito nella quasi totalità dei browser.

L’evento ha fatto registrare il sold-out, obbligando a spostare la conferenza a due settimane dell’evento. Il teatro che ha ospitato si è rivelato però un’ottima cornice per la conferenza.

È interessante notare come da molti talk emerga che ci siano delle ferite che faticano a rimarginarsi per chi lavora con i CSS, una su tutte l’incubo delle tabelle html, che ancora infesta i sogni degli sviluppatori. Memorabile anche il commento di Davide Di Pumpo durante il suo talk sulle proprietà flexbox “Ogni volta che usate un clearfix una fatina muore”.

Facciamo una rapidissima carrellata degli interventi della giornata:

Microsoft Edge e il web moderno

Anche se IE è tuttora il bersaglio privilegiato delle maledizioni degli sviluppatori CSS, Microsoft ha proposto una panoramica dell’ultimo browser Edge e degli strumenti di sviluppo che ha prodotto. Interessante rilevare che MS ha adottato per Edge una politica di aggiornamenti continui delle parti del motore e non monolitici con release di tutto il browser.

Teams, styles and scalable applications

Il talk ha fatto una panoramica sugli approcci di sviluppo più usati con i CSS arrivando a trattare la metodologia BEM (Block, Element and Modifier), l’argomento risulta molto importante soprattutto nel lavoro in team ed è stato utile vedere la questione sotto diversi punti vista, rilevando che non esiste un approccio univoco, ma è utile cercare di trovare il mix giusto e adatto al proprio workflow.

Responsive Images: ieri, oggi, domani

Talk incentrato sulla tecnica di fornire al browser immagini a dimensioni e risoluzioni differenti a seconda dello schermo del terminale e dell’uso effettivo dell’immagine nella pagina, andando quindi ad ottimizzare la dimensione e l’impiego di banda, oltre alle performance complessive della pagina servita, con occhio particolare per i siti ad elevati accessi. Il talk ha approfondito le tecniche che utilizzano direttive srcset e l’elemento picture di HTML5, assieme agli approcci di realizzazione e taglio delle immagini alternative. Una panoramica su passato, presente e futuro delle immagini responsive a tempo di rap!

About Flexbox: you can’t float anymore

Prendendo spunto dal golden layout (il classico layout a tre colonne con header e footer), il talk presenta i metodi diversi per poterlo realizzare via CSS con tecniche più o meno recenti. Nel talk viene dimostrato come l’utilizzo della proprietà flexbox e delle proprietà collegate renda possibili layout completamente responsive che rispettano la semantica della pagina e l’ordinamento dei tag, a differenza delle tecniche ormai di uso comune che funzionano “piegando” l’utilizzo di strumenti nati per usi completamente diversi.

One step in the future: CSS Variables

L’approccio delle custom properties per parametrizzare i CSS, una rapida analisi su cosa cambia e quali accorgimenti usare nella progettazione dei fogli di stile e le implicazioni nel cascade paragonate a quelle che si ottengono con l’utilizzo dei preprocessori.

The CSS in the Shadow

Le tecniche per gestire lo scope dei CSS utilizzando lo Shadow DOM, analizzando le tecniche per pacchettizzare e incapsulare i componenti e superare i problemi di dipendenze e sovrascritture degli stili.

From preprocessor to postprocessor

Un’interessante riflessione sul fatto che l’uso dei preprocessori porta all’adozione di un meta-linguaggio che esce dallo standard CSS, mentre l’adozione dei postprocessori può raggiungere la stessa flessibilità, se non maggiore, aggiungendo però la possibilità di personalizzazione del linguaggio secondo le esigenze personali e del progetto. Il talk ha preso in esame PostCSS e i suoi moduli che rappresentano uno strumento molto utile per aggiungere elaborazioni automatiche e personalizzazioni prima del deploy al proprio codice.

Accessibility tips & tricks for CSS developers

Questo talk conteneva molti spunti di riflessione sull’usabilità dei nostri siti web e le loro implicazioni. Spesso si sceglie deliberatamente di ignorare il problema dell’accessibilità dei nostri siti, ma questi vanno visti come esercizi pubblici, se si decide di tagliare fuori le persone che hanno delle disabilità ci tagliamo fuori una parte di utenti. Nel talk si è visto come il seguire le best practice di sviluppo rappresentano già un buon primo passo per l’accessibilità, ma sono stati presentati poi dei semplici accorgimenti che permettono di ottenere risultati ottimali per la fruizione dei nostri siti, evidenziando come le diverse disabilità vadano tenute tutte in considerazione nella progettazione.

Niente trucchi da quattro soldi

Il talk prende spunto dai disastri nella vita di uno sviluppatore CSS per capire quali sono gli errori più diffusi e come vadano evitati. Il CSS è facile, ma è difficile renderlo scalabile e estendibile, il talk ha messo in evidenza come vada governata la complessità tramite tecniche di naming, organizzazione, collaborazione, semplificazione, documentazione e chiarezza dei progetti.

Conclusione

Complimenti al Grusp per l’organizzazione della conferenza, si è rivelata un’evento di ottimo livello con speaker ampiamente all’altezza che ha permesso di verificare gli approcci e gli strumenti esistenti per lo sviluppo CSS riflettendo sulle metodologie e le potenzialità di nuove tecniche già disponibili a tutti ma spesso sottovalutate o poco conosciute.

Gli autori

Vi presentiamo i nostri intrepidi esploratori:

• Paolo Vecchiocattivi, Senior PHP Developer e Magento Cerified Developer per MageSpecialist.
• Lorenzo Stramaccia, Senior Frontend Developer e Magento Certified Frontend Developer per MageSpecialist.

Grazie ragazzi! 🙂