Skip to content

Inutile dire che il titolo del mio talk era volutamente provocatorio e ha sollevato parecchie discussioni e domande, a favore e contro dell’approccio proposto.

Ci tengo a precisare che non ho niente contro i framework CSS e sono perfettamente consapevole che in determinati contesti possono avere un senso. La mia era una critica riguardante prevalentemente l’utilizzo di questi per la realizzazione di un sito, spesso e volentieri utilizzandone solo il sistema di griglia.

Voglio provare a riassumere in qualche modo quelle che sono state bene o male le domande, o principali preoccupazioni, da parte di chi non era giustamente d’accordo con il mio punto di vista per cercare di rifletterci su e vedere se siamo veramente pronti a fare a meno di un framework CSS.

Non voglio reinventare la ruota ad ogni progetto!

Ogni sito è unico (o dovrebbe esserlo) e il markup che andrete a scrivere non deve essere influenzato da un framework per quanto mi riguarda.

Se invece state creando diversi progetti derivati uno dall’altro allora una buona idea può essere quella di crearvi una vostra libreria specifica per quei progetti in modo da ottimizzarne il markup e lo sviluppo piuttosto che sovrascrivere mille stili di un framework.

Con il tempo mi sono reso conto che utilizzo sempre le solite funzioni su ogni progetto, come la funzione per stampare una regola per i font, quella per estrarre un colore o il mixin per le media queries. Queste saranno oggetto del prossimo articolo così avrò anche l’occasione di raccontarvi qual’è il mio setup per ogni progetto.

I framework mi danno già una base di accessibilità, perché farne a meno?

Risposta breve
Perché solo facendone a meno imparerete come funzionano veramente le cose.

Risposta lunga
L’accessibilità è una questione delicata e non coinvolge solo lo stile, Bootstrap da parte sua gestisce una piccola parte ma come giustamente fanno notare l’accessibilità riguarda in larga parte il markup che andrete a scrivere e loro non possono prendere una posizione specifica visto che si tratta di componenti generici (stessa cosa vale per i colori).

Ma non basta semplicemente ottimizzare Bootstrap?

Se proprio si vuole usare Bootstrap (o simili) allora una buona strategia può essere quella di ottimizzare la build, essendo interamente basata su SASS, facendo però attenzione a non cancellare a mano delle parti di libreria perché poi diventa molto complesso mantenere la compatibilità con gli aggiornamenti.

Questo comunque è un palliativo, perché di fatto il sistema di griglia, che è anche il più “antiquato” se mi passate il termine, non può essere ottimizzato più di tanto.

Bello CSS Grid, ma se devo supportare ie?

Grid è supportato su IE10 e IE11 ma implementa una vecchia specifica.

Diciamo che a grandi linee le funzionalità principali ci sono, per esempio: grid-template-columns diventa -ms-grid-columns.

Se proprio dovete supportare anche IE9 nel vostro progetto allora probabilmente potrebbe essere una buona idea ricorrere ad un foglio di stile specifico per creare un fallback adeguato, ma non precludetevi la possibilità di utilizzare grid solo perché una piccola fetta della vostra utenza è ancora su vecchie versioni di IE.

Bootstrap però è documentato, come faccio a lavorare con altre persone se creo tutto custom?

Innanzitutto utilizzando una metodologia specifica, come per esempio BEM, OOCSS, SMACSS, ACSS o ITCSS.

Queste metodologie sono ben documentate e se scegliete di utilizzarle automaticamente chi lavorerà con voi saprà come districarsi tra il codice.

Se invece elaborate una vostra metodologia l’unica cosa che potete fare è documentare il codice che andate a scrivere.

Ci vuole tanto tempo per trovare i nomi di classe giusti per gli elementi?

No, anche se all’inizio vi sembrerà lento e tedioso questo processo.

Ringrazio ancora una volta tutte le persone che hanno avuto la pazienza di ascoltarmi e hanno trovato il tempo per confrontarsi con me su questo tema.

Voi cosa ne pensate?

WordCamp Verona 2019, il giorno dopo

Il WordCamp di Verona 2019 è appena finito, sono appena rientrato a casa dopo questi tre giorni veramente emozionanti e stimolanti per la mia crescita professionale.

È stata la mia prima esperienza da speaker e lead al tavolo temi del contributor day (e per una persona timida ed introversa come me è stato un bello shock) e voglio provare a trarre qualche conclusione e riflessione.

Innanzitutto devo fare i complimenti a Carola, Giulia, Giorgia, Lidia e tutto il team di organizer e volontari per il lavoro impeccabile, organizzazione perfetta e avermi fatto sentire come a casa!

Contributor day

Venerdì è stato il giorno del contributor day, il primo per quanto mi riguarda come co-lead del tavolo temi supportato dal bravissimo Alessandro.
La gestione di un tavolo al contributor day non è per niente semplice ma siamo riusciti ad introdurre un minimo il processo di theme review e nel pomeriggio abbiamo commentato il codice di un tema sviluppato da un giovane partecipante, in qualche modo diciamo che siamo riusciti a passarci un bella giornata ricca di discussioni.

Conferenza

Le mie aspettative per questo WordCamp devo dire che erano molto alte, il pubblico dei WordCamp è generalmente composto da professionisti anche di alto livello, avevo il terrore di fallire miseramente e non ricordami più niente, insomma, la mia sindrome dell’impostore giusto pochi minuti prima di entrare in sala è tornata alla ribalta prepotentemente!

Veniamo alla prima lezione che ho imparato: mettere sempre in conto che possono esserci dei problemi tecnici ed è fondamentale non perdere la calma e rimanere concentrati.
Il microfono ad archetto ha iniziato a funzionare male e spegnersi in modo casuale, abbiamo cercato di sistemarlo ma siamo dovuti tornare a quello tradizionale. Questo piccolo inconveniente ha rischiato di mandarmi in crisi, ed effettivamente ho saltato un paio di frasi che mi ero preparato, sono andato lungo con i tempi e ho dovuto tagliare alcune parti improvvisando.

La seconda lezione che ho imparato è che se si vuole fare live coding (il mio talk prevedeva in conclusione un 10 min di live coding) forse è meglio impostare l’intero talk in questo modo perché il passaggio non è semplice e in questo caso senza il microfono ad archetto è stato particolarmente rocambolesco, salvato da Giulia che si è prestata a tenere il microfono mentre provavo a scrivere!

La terza lezione: imparare a scrivere un talk che intrattenga il pubblico, non un polpettone per tecnici.
Era la prima volta, ho voluto portare un argomento forse un pò troppo ambizioso per essere condensato in 30 minuti senza averne le capacità, mi è servito da lezione, pensavo di potercela fare ma su questo punto ho fallito miseramente e ho allo stesso tempo imparato tantissimo (come per esempio chiedere aiuto alla super coach Simona).

Con questa esperienza mi porto a casa un grandissimo bagaglio di conoscenza, spunti sul quale riflettere e tanta voglia di riprovarci al più presto perché in fondo, anche se ci sono stati problemi e dentro di me sento di aver fatto un pò schifo, mi sono divertito un sacco e abbiamo fatto tante discussioni costruttive sul mio talk e non solo soprattutto all’after party, una su tutte una lunghissima chiacchierata con Riccardo che è stata veramente stimolante e divertente!

Una parentesi sui talk di quest’anno, tutti veramente belli e speaker bravissimi, se dovessi sceglierne uno direi senza ombra di dubbio il talk di Simone Mignami sull’accessibilità, tema di un’importanza incredibile, per giunta Simone è un ragazzo simpaticissimo ed estremamente preparato con il quale ho avuto il piacere di scambiare anche due parole e spero di poter incontrare nuovamente al prossimo WordCamp.

Ora andiamo a prendere i biglietti per il WordCamp Milano 2019!

Contare gli elementi in pagina con CSS

In uno degli ultimi progetti di Evolve mi è capitato di utilizzare una proprietà CSS che si chiama counter-increment, che uso raramente, così ho pensato che potesse essere una buona idea fare una breve panoramica per chi ancora non la conosce.

Counter-increment è una proprietà che si occupa di aumentare o diminuire un valore, è molto semplice da utilizzare ed è molto utile in quei casi in cui magari non vogliamo o non possiamo creare un contatore via PHP.

Come funziona?

Nella sua implementazione base ci basterà aggiungere counter-increment: contatore; alla classe o elemento che vogliamo contare, per esempio:

h2 {
    counter-increment: contatore;
}

A questo punto il valore di contatore sarà disponibile e potremo riutilizzarlo per esempio per prependerlo a tutti gli h2 utilizzando la funzione counter():

h2:before {
    content: counter(contatore);
}

La funzione counter() è incaricata di ritornare il valore di un contatore e può essere utilizzata come counter(contatore) oppure counter(contatore,stile) e supporta gli stessi stili delle liste, ovvero: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit.

Un aspetto molto interessante dei contatori è che possono essere circoscritti a diverse aree o contesti utilizzando la proprietà counter-reset che permette di resettare il valore di uno o più contatori a zero o ad un valore predefinito.

Counter-increment può essere influenzato dalla struttura del markup, quindi è importante capire quando è necessario utilizzare counter-reset:

<ul>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>

In questo caso se volessimo contare i li ci basterebbe scrivere:

li {
    counter-increment: contatore-li;
}

Aggiungendo un altro ul il conteggio dei li ripartirà automaticamente da 0.

Facciamo un altro esempio per capire quando utilizzare la proprietà di counter-reset:

<article>Articolo</article>
<article>Articolo</article>
<article>Articolo</article>
    
<aside>
    <article>Articolo</article>
    <article>Articolo</article>
    <article>Articolo</article>
</aside>
article {
    counter-increment: conta-articoli;
}

article:before {
    content: counter(conta-articoli);
}

In questo caso il valore del contatore sull’ultimo articolo sarà 6.

Per far si che il conteggio degli article all’interno del nostro elemento aside riparta da 0 dovremo aggiungere la seguente regola:

aside {
    counter-reset: conta-articoli;
}

Cosa non può fare

Onde evitare fraintendimenti, counter-increment non è disponibile globalmente una volta valorizzato ma è sempre associato all’elemento dove è stato specificato.

Il valore anche se è un intero possiamo considerarlo come una stringa perché non è possibile usarlo all’interno di calc() per delle operazioni.