Skip to content

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.

Variabili CSS, come e quando usarle

Le variabili CSS, da non confondere con le variabili dei pre processor come SASS o LESS, sono in giro da parecchio ma solo negli ultimi anni si è iniziato a vedere qualche utilizzo nel mondo reale grazie anche al migliorato supporto da parte dei vari browser, tranne come al solito Internet Explorer. 

CSS Variables (Custom Properties)

Permits the declaration and usage of cascading variables in stylesheets.

W3C Candidate Recommendation

Supported from the following versions:

Desktop

  • 49
  • 31
  • No
  • 36
  • 9.1

Mobile / Tablet

  • 9.3
  • 76
  • No
  • 76
  • 68

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Cosa sono esattamente le variabili CSS?

Le variabili CSS ci permettono di specificare un valore e ripeterlo più volte all’interno del nostro foglio di stile, un esempio?

:root {
  --colore-principale: #333;
  --colore-titoli: #000;
}

body {
  color: var(--colore-principale);
}

h1 {
  color: var(--colore-titoli);
}

h2 {
  color: var(--colore-titoli);
}

Questo è un semplice esempio con i colori, ma potete tranquillamente applicare lo stesso approccio anche per le spaziature, creando di fatto una specie di indice che vi risparmierà tanto tempo di ricerca e sostituzione qualora aveste la necessità di cambiare un valore in applicato in più punti.

A questo punto starete pensando, beh ma una sostituzione in batch con un editor di testo come Sublime Text o Visual Studio Code si fa in pochi secondi, dov’è il gran vantaggio delle variabili?

Pensate per un attimo di dove alterare dei parametri a seconda di una classe, come per esempio il cambio della skin o il cambio delle spaziature ad una determinata media query.

:root {
  --colore-principale: #333;
  --colore-sfondo: #fff;
  --gutter: 30px;
}

@media screen and (max-width:768px) {
  :root {
    --colore-principale: #fff;
    --colore-sfondo: #111;
    --gutter: 15px;
  }
}

body {
  color: var(--colore-principale);
  background-color: var(--colore-sfondo);
  padding: 0 var(--gutter);
}

Grids e le variabili

Quando abbiamo iniziato a sviluppare il concept del nostro plugin Grids ci siamo chiesti come fare per ottimizzare il più possibile il codice ed evitare che Javascript si facesse carico di stampare del CSS inline ad ogni cambio di proprietà dai controlli alla preview nel block editor aka Gutenberg. Abbiamo deciso quindi di sperimentare un approccio basato interamente sulle variabili.

Le variabili possono essere definite globalmente come abbiamo visto nell’esempio precedente o all’interno di un elemento, nel nostro caso il contenitore di markup della sezione:

.grids-areas-wrapper {    
    --section-columns: 1fr 1fr 1fr 1fr;
    --section-rows: auto;
    --section-gutter: 0px;
    --section-background-repeat: no-repeat;
    --section-background-size: auto;
    --section-background-attachment: scroll;
    --section-background-position-x: 50%;
    --section-background-position-y: 50%;
}

In questo modo siamo in grado cambiare una variabile e lasciare che sia il browser ad applicare tramite CSS il cambiamento al nostro elemento.

Compatibilità nel mondo reale e considerazioni

Bene, vi ho convinto a sperimentare con le variabili ma fermi tutti, dovete assolutamente supportare IE nel vostro progetto!

La buona notizia è che potete utilizzare il css-vars-ponyfill realizzato da John Hildenbiddle, utilizzato peraltro in Grids, ma la cattiva notizia è che non supporta le variabili nelle media queries, cosa purtroppo molto limitante dal punto di vista creativo.

E voi state già utilizzando le variabili CSS nei vostri progetti?

p.s.

Questo sito utilizza le variabili per cambiare la skin al cambio giorno/notte 😉