cssday 2022
1 Apr 2022 at Cinema Sarti

13

Può sembrare strano, ma è possibile essere tracciati e avere i propri dati sottratti nelle condizioni più improbabili. Ad esempio, avendo JavaScript disattivato. Sorprendente? Eppure abbiamo già avuto di queste avvisaglie in passato, e con l'evoluzione di CSS come linguaggio degli ultimi anni le tecniche sono diventate sempre più raffinate. Ne vedremo alcune che forse non vi aspettavate...

13

Oggi è impensabile avviare un nuovo progetto web senza includere dentro un framework CSS. Da Bootstrap a Milligram, da Tailwind a Bulma, siamo sempre vincolati ad un codebase predefinito che spesso non si adatta alla perfezione al design system che ci viene fornito o al mockup che dobbiamo realizzare. A questo punto sorge spontanea la domanda: abbiamo davvero bisogno di un framework CSS? Forse si, forse no. Ovviamente reinventare la ruota ogni volta non è utile ed efficiente, proprio come capita con i framework JS, però con il CSS a volte è più facile creare la propria libreria interna piuttosto che utilizzare un framework esistente. In questo talk cercherò di rispondere alla domanda del titolo mostrando i pro e contro dell’utilizzo di framework CSS.

9

Vi illustro una tecnica ed un tool per ottimizzare le immagini a partire dai dati di risoluzione e densità schermo sui siti web. I risultati sono: - un codice HTML molto più leggero; - maggior riutilizzo della cache della CDN; - performance migliorate grazie al limite della fedeltà a 2x; - pixel-perfection sui device più diffusi. Inoltre: - più facilità nel calcolare le dimensioni delle immagini; - calcolo dello spreco di banda incluso; - generazione automatica del tag `picture` con controllo test-driven.

Spesso ci ritroviamo ad avere risorse recuperate da altri design system, progetti precedenti o da icon pack di terze parti. Iniziando un nuovo progetto, una delle prime cose da realizzare e decidere, è la palette dei colori. Generare i nostri asset nella color palette predefinita ci permette di aver maggior controllo sulla distribuzione e manutenzione del design system. In questo talk vedremo quali strumenti, o librerie open source (come ImageGoNord) possono aiutarci in questo task.

6

Volenti o nolenti gli Styled Components sono parte delle possibili soluzioni che abbiamo a disposizione per lo styling di un'applicazione web. Mettendo da parte i possibili pregiudizi sul CSS in JS, diamo uno sguardo a come funzionano e su come e quando possono essere una ragionevole soluzione nell'ambito della creazione di un Design System.

Compilare un questionario, creare il proprio profilo su un’app che promette di cambiare il nostro stile di vita, pubblicare un post sui social; tutte queste azioni, oramai quotidiane, implicano l’utilizzo di un form. Ma quante volte avete rinunciato per la complessità delle richieste? Quante volte avete imprecato dopo l’ennesimo errore di validazione? Creare e disegnare un form che sia efficace nel raccogliere i dati e al contempo leggibile e piacevole, non è un’impresa semplice e non si può più lasciare spazio all’improvvisazione. Come rivolgersi all’utente? L’estetica è importante, o dobbiamo puntare sulla semplicità? La posizione di un bottone o un messaggio non coerente possono far perdere un cliente o rendere i dipendenti frustrati, esploriamo una serie di regole che possono aiutare e gli errori più comuni da evitare, e il freestyle lasciamo a chi fa rap.

Vi siete mai chiesti come mai i Front-End non vogliono più scrivere il CSS? E perché quando lo scrivono preferiscono Tailwind o usano Bootstrap? Sui curriculum il CSS e i relativi pre-processori hanno sempre 5 stelline su 5, ma nella pratica sono in pochi a sapere e voler fare un front-end pixel-perfect. Perché succede e perché il termine Front-End Developer da solo non basta più? In questo talk esploreremo le mie personali esperienze negli anni e come la figura del Front-End Developer sia cambiata negli anni.

7

Nella lotta ai vari modi di scrivere CSS, tra gemme ruby e utility atomiche, io ho trovato il mio vincitore. EmotionJS è un tool CSS-in-JS che permette in semplicità di scrivere 'stile in linea' e trasformarlo 'automagicamente' in classi univoche. Con un sacco di idee prese dai concorrenti come styled component, pieno supporto a TypeScript e un ecosistema ormai maturo, vedremo un paio di use case e come mai lo reputo il vincitore... per ora. Perché altri concorrenti come Vanilla-Extract potrebbero presto prendere il suo posto.