Claude vs Gemini, i miei casi d'uso
Un confronto pratico tra Anthropic Claude e Google Gemini: come li integro nel mio workflow quotidiano tra sviluppo, lavoro e vita personale.
Rendo il web più veloce e più usabile
Blog
Dovremmo smettere di usare la parola "Responsive" per il design?
Come la definizione di "responsive" di Ethan Marcotte del 2010 si scontra con le linee guida delle app mobili sulla "adattabilità" e con le metriche di interattività delle performance web.
Talk: "Ehi Gemini, sistema il CSS!" al CSS Day Bologna
Ho parlato al CSS Day Bologna di Chrome DevTools for Agents (DTA), mostrando come utilizzare il Model Context Protocol (MCP) per fare il debug di layout, visualizzazioni responsive e accessibilità in linguaggio naturale.
Google Antigravity 2 & Gemini 3.5 Flash: questa accoppiata IA ha cambiato il mio flusso di sviluppo... di nuovo
Google Antigravity 2 e Gemini 3.5 Flash hanno completamente trasformato il mio flusso di lavoro di sviluppo. Ecco la mia esperienza diretta con questa accoppiata IA incredibilmente veloce.
Il mio sogno di un formato d'immagine contenitore: un appello alla web community
Un singolo file d'immagine contenente ogni risoluzione potrebbe finalmente rendere il tag `<img>` di nuovo semplice. Un appello alla web community per creare un formato d'immagine contenitore.
Talk: Migliorare la reattività del web al Web Day 2026, Milano
Ho tenuto un talk sul miglioramento della reattività del web al Web Day 2026 a Milano, condividendo consigli pratici per fare il debug ed evitare interazioni lente tramite l'Interaction to Next Paint (INP).
Rifattorizziamo i bias di genere, un commit alla volta
Ho co-presentato con Giulia Naponiello un talk sui bias inconsci di genere nel mondo tech in occasione di due meetup a Bologna e Imola. Ecco di cosa abbiamo parlato e perché è importante.
GitBar Podcast: Non toccate quel tag!
Ho partecipato al podcast GitBar con Mauro "Brainrepo" Murru per parlare di web performance, Core Web Vitals, ottimizzazione delle immagini e dei danni silenziosi di Google Tag Manager.
Talk: Gemini + Chrome: Oltre la Chat, Bologna JS Meetup
Ho mostrato come utilizzare il server MCP per Chrome DevTools per connettere l'IA a Chrome DevTools per test visivi, analisi delle prestazioni e automazione del browser.
Video del talk: "Ehi Gemini, sistema il CSS!", Bologna Front-end #58
Ho mostrato in anteprima il server MCP per Chrome DevTools, in grado di trasformare il terminale in un assistente IA per test responsivi, audit di accessibilità e debugging front-end.
Google Antigravity: il nuovo IDE che abbraccia l'IA agentica
Google Antigravity trasforma l'assistenza dell'IA da semplice strumento a partner attivo. Scopri come questo nuovo IDE sfrutta Gemini 3 e gli agenti autonomi per cambiare il modo in cui sviluppiamo software.
Migliorare la reattività del web - Ottimizzazioni dell'interattività da casi reali
La velocità di interazione è un aspetto chiave della reattività di un sito alle azioni dell'utente. Questo talk mostrerà tecniche pratiche per migliorare le interazioni lente attraverso casi di studio reali di debugging e ottimizzazione di scarsa velocità di interazione.
Il gestore degli appunti di macOS che stavi aspettando, ora nativo in macOS 26 Tahoe
Hai presente quando copi un pezzo di codice, poi ne copi un altro e perdi quello precedente? O quando sai di avere qualcosa negli appunti, vorresti copiare qualcos'altro, ma devi prima incollare quello che hai negli appunti altrimenti lo perderai? Niente più stress da appunti. Finalmente gli appunti multipli sono arrivati su macOS.
Video del talk: "Debugging and Optimizing Interaction to Next Paint (INP) for a Smoother Web", Meetup Performance Observer
Il 16 aprile 2025 ho tenuto una presentazione a un meetup di Performance Observer, condividendo spunti su come fare il debug e ottimizzare l'Interaction to Next Paint (INP). Questo post include la registrazione video del talk.
Presentazione di yieldy-for-loop: un pacchetto npm per mantenere i loop non bloccanti (e la UI fluida)
Una piccola utility per elaborare cicli di grandi dimensioni in JavaScript senza bloccare l'interfaccia utente. Ispirato all'articolo di Rick Viscomi “Breaking up with long tasks, or how I learned to group loops and wield the yield”, yieldy-for-loop cede periodicamente il controllo al browser in modo che l'app rimanga reattiva.
Ottimizzare l'uso degli SVG per le prestazioni web: una guida completa
Confronto tra varie tecniche per renderizzare gli SVG: SVG inline, tag `<img>`, sfondi CSS e sprite SVG. Ecco una sintesi delle principali considerazioni e raccomandazioni dal punto di vista del design e delle performance web.
Video del talk: "How I made the web more responsive — real-world case studies of INP optimizations", conferenza We Love Speed 2024
Il 17 settembre 2024 ho parlato alla conferenza We Love Speed 2024 su come migliorare la reattività del web. In particolare, ho spiegato come fare il debug ed evitare le interazioni lente sulla base della mia esperienza nell'audit dell'Interaction to Next Paint (INP) sui siti web dei clienti. Questo è il video del mio talk.
Il web è morto, lunga vita al web (repost)
“La pubblicazione online come l'abbiamo conosciuta negli ultimi vent'anni è ormai morta e sepolta”. Condivido un articolo del mio amico Antonio Moro, in arte Itomi, uno di quelli che ha fatto parte dell'“editoria online” in Italia fin dagli albori.
La mia esperienza a performance.now() 2024: la principale conferenza sulla web performance in Europa
Un resoconto dettagliato della mia partecipazione e delle idee emerse frequentando e contribuendo a performance.now(), la più importante conferenza sulla web performance in Europa.
Come usare Google Meet con due schermi: separare i contenuti condivisi e i volti dei partecipanti
Scopri come migliorare la tua esperienza con Google Meet utilizzando la modalità Companion per separare i contenuti condivisi e i volti dei partecipanti su due schermi, per una maggiore concentrazione e coinvolgimento.
Modalità a schermo intero reale per i contenuti condivisi su Google Meet
Stanco della mancanza di un'opzione di schermo intero reale per i contenuti condivisi su Google Meet, ho creato un bookmarklet per risolvere il problema, disponibile su GitHub.
Il dibattito sul lavoro da remoto: la mia visione per trovare un equilibrio
Dopo anni di lavoro sia da remoto che in ufficio, ho capito che se da un lato il lavoro da remoto offre flessibilità e concentrazione, dall'altro può far mancare quelle connessioni spontanee che stimolano la creatività e cementano il team.
Talk: Come ho reso il web più reattivo — casi reali di ottimizzazione dell'INP
A partire da maggio 2024 ho iniziato a parlare a conferenze e meetup su come migliorare la reattività del web. Nello specifico, parlo di come fare il debug ed evitare interazioni lente sulla base della mia esperienza di audit dell'Interaction to Next Paint (INP) sui siti web dei clienti. Video, slide, date e location del mio talk.
Le mie funzioni preferite di iOS 18: una svolta per gli utenti multilingue (e non solo)
Con ogni nuova versione di iOS, non vedo l'ora di esplorare le ultime funzionalità offerte da Apple. iOS 18 ha introdotto diversi cambiamenti, alcuni piccoli e discreti, altri più profondi, che hanno migliorato notevolmente la mia esperienza d'uso. Ecco le mie nuove funzioni preferite in iOS 18 e perché penso che rappresentino una svolta.
Mitigare il CLS causato da banner promozionali: una soluzione pratica
Esploriamo una soluzione pratica per mitigare il Cumulative Layout Shift (CLS) causato dai banner promozionali. Evita spostamenti di layout imprevisti usando sessionStorage per memorizzare il contenuto e lo stato di visualizzazione del banner tra i caricamenti di pagina.
Impressioni su Google I/O Connect 2024 + GDE Forum a Berlino
Come l'anno scorso, sono stato invitato al Google I/O Connect EMEA 2024. E in qualità di Google Developer Expert (GDE), il giorno successivo ho partecipato anche al GDE Forum presso gli uffici Google di Berlino. In questo post condivido le mie impressioni.
Il talk di Jake Archibald "In the loop", trascritto
Il talk di Jake Archibald "In the loop" è ancora una delle migliori fonti di informazioni su come i browser gestiscono i task e rispondono all'input dell'utente. Poiché non ho trovato nulla di così chiaro in formato testuale, ho deciso di trascrivere il suo intervento in questo articolo.
Snippet di web performance per il debug dell'INP in Chrome DevTools
Dopo averli tenuti sul mio computer per alcuni giorni, ho deciso di pubblicare su GitHub questa raccolta di snippet di web performance per fare il debug dell'INP in Chrome Developer Tools, o per inviare i dati ai tuoi sistemi di analytics.
Come usare scheduler.yield per migliorare la reattività delle pagine web
Google Chrome sta introducendo una nuova funzionalità chiamata scheduler.yield. Questa funzione consente agli sviluppatori web di cedere esplicitamente il controllo al thread principale. Ecco i punti chiave.
Prepararsi a Interaction to Next Paint (INP), una nuova Core Web Vital da marzo 2024
Come consulente di web performance, sono sempre attento alle novità che influenzano l'esperienza utente dei siti web. Una di queste novità è l'introduzione da parte di Google di una nuova metrica chiamata Interaction to Next Paint (INP). Destinata a diventare una Core Web Vital a marzo 2024, l'INP è progettata per misurare il tempo impiegato da un sito web per rispondere alle interazioni dell'utente. In questo articolo approfondiremo cos'è l'INP, perché è importante e come le aziende possono prepararsi per garantire che i loro siti soddisfino questa metrica fondamentale.
Talk: Come e perché ($) migliorare le prestazioni web nel 2023
Nel 2023 ho parlato di web performance in conferenze, Google Developer Groups (GDG) e meetup locali in tutta Europa. Il titolo di questo talk è "Come e perché ($) migliorare le prestazioni web: consigli pratici per il 2023".
Sono un Google Developer Expert per le Web Performance
Nel dicembre 2023 sono diventato un Google Developer Expert (GDE) per le Web Performance. Google Developer Experts è un programma di Google volto a creare una rete globale di professionisti, influencer e opinion leader, per consentire loro di condividere le proprie conoscenze con la community di sviluppatori, ad esempio parlando ad eventi, condividendo best practice e offrendo mentorship.
aspect-ratio: Un modo moderno per riservare spazio a immagini e contenuti asincroni nel responsive design
Per evitare lo spostamento del layout (layout shifting) e ottimizzare la metrica Web Vital Cumulative Layout Shift (CLS) nelle tue pagine web, è necessario riservare spazio per qualsiasi contenuto che potrebbe essere renderizzato in un secondo momento. Questo è il caso di immagini, video e qualsiasi contenuto caricato in modo asincrono (ad esempio con chiamate AJAX). Ecco un nuovo modo per farlo.
Contro lo streaming online dei meetup locali
Mi piace partecipare ai meetup locali. Sono informativi, divertenti e allo stesso tempo stimolanti dal punto di vista sociale. A volte viene chiesto agli organizzatori dei meetup di trasmettere gli eventi online. Sarebbe una bella funzionalità, ma a mio parere farebbe più male che bene alla community. Vi spiego perché.
Abbiamo ancora bisogno delle librerie di lazy loading e di `data-src`?
In passato, quando il supporto dei browser per il lazy loading nativo non era diffuso, la best practice consisteva nell'usare gli attributi `data-src` e una libreria JavaScript come vanilla-lazyload per caricare le immagini man mano che entravano nella viewport. Questa è ancora la best practice oggi?
Talk: Velocizzare il web con le immagini responsive - LazyLoad Conference 2022
Il 24 giugno 2022 ho parlato di come automatizzare l'ottimizzazione delle immagini responsive alla LazyLoad Conference 2022. Ecco il video del mio talk.
Talk: Ottimizzazione delle immagini 4.0, automatizza il tuo lavoro con un approccio incentrato sull'utente - CSS Day 2022
Il 1° aprile 2022 ho parlato di ottimizzazione delle immagini responsive 4.0 alla conferenza CSS Day 2022 a Faenza, in Italia. Questo talk spiega come essere più produttivi automatizzando le immagini responsive.
Come integrare git nel Terminale (shell) di Mac OS
Ora che zsh è la shell predefinita sul terminale di Mac OS, potresti voler configurare il tuo nuovo Mac o il terminale di VS Code per avere un'integrazione intelligente con git, simile a git bash per Windows.
Una tecnica elegante per il lazy loading delle immagini in Swiper e la creazione lazy delle istanze di Swiper
Immagina di avere più caroselli in una pagina, ognuno contenente più immagini, e di voler scaricare solo le immagini che si trovano all'interno della porzione visibile della pagina, magari risparmiando tempo di CPU creando le istanze del carosello in modalità lazy. Credo di aver trovato una tecnica valida ed elegante per farlo.
vanilla-lazyload vs lazysizes
Come autore di vanilla-lazyload, non è la prima volta che mi viene posta questa domanda: quali sono le differenze tra vanilla-lazyload e lazysizes? Questo post è la risposta a tale domanda.
Case study su Quicklink: pagine più veloci, aumento delle visualizzazioni
Quicklink è una libreria leggera creata da Addy Osmani (Google) che esegue il prefetch delle pagine collegate alla pagina corrente non appena i link a tali pagine entrano nella porzione visibile della pagina (viewport). Ecco un case study al riguardo.
Un modo intelligente per servire immagini WebP ai browser moderni e JPG a Internet Explorer
Prima che Safari iniziasse a supportare le immagini WebP, eravamo costretti a usare il tag picture per servire le immagini WebP ai browser che le supportavano. Oggi tutti i browser moderni supportano il formato WebP, quindi c'è probabilmente un modo intelligente per farlo usando un singolo tag: img.
Come limitare la fedeltà delle immagini a 2x e risparmiare il 45% del peso sui telefoni cellulari di fascia alta
Con la diffusione di schermi ad altissima densità “super retina” nei dispositivi di fascia alta più recenti, limitare la fedeltà delle immagini a 2x porta a un notevole miglioramento nei tempi di rendering, senza alcuna perdita di qualità percepibile per gli utenti. Ecco una nuova best practice su come fare.
Come ottimizzare il CLS quando si caricano altri contenuti in modo asincrono
Il Cumulative Layout Shift (CLS) è un'importante metrica incentrata sull'utente per misurare la stabilità visiva, poiché aiuta a quantificare la frequenza con cui gli utenti riscontrano spostamenti imprevisti del layout — un CLS basso aiuta a garantire che l'esperienza sulla pagina sia piacevole.
Lazy loading delle immagini responsive nel 2020
Vuoi migliorare le prestazioni del tuo sito web? Puoi farlo utilizzando le immagini responsive e il lazy loading! In questo articolo troverai il codice HTML, JavaScript e CSS per caricare le immagini responsive in modalità lazy, per fare in modo che i browser utilizzino formati di immagine moderni come WebP e Jpeg2000, e per abilitare il lazy loading nativo dove supportato.
Come usare in modo produttivo il nuovo browser Microsoft Edge basato su Chromium
Una guida pratica su come usare in modo produttivo il nuovo browser Microsoft Edge basato su Chromium
Critical CSS con Jekyll e SASS
In passato il mio blog era gestito da Jekyll su GitHub Pages e il suo CSS era compilato usando SASS. Oggi ho deciso di migliorare ulteriormente le prestazioni integrando inline il critical CSS che blocca il rendering, ma anche cercando su internet ho faticato a trovare un modo semplice per farlo. Questo post fa al caso tuo, se vuoi fare la stessa cosa.
Web Share API, il passo successivo alla PWA
Oggi ho sperimentato con la Web Share API e l'ho implementata su questo sito, tanto per iniziare. Ecco cosa ho fatto e come puoi implementarla sul tuo sito.
Trasformare il mio blog in una Progressive Web Application
Alcuni colleghi ed io abbiamo partecipato a un Hackathon di Google sulle Progressive Web Application e abbiamo imparato molto, così ho deciso di abilitare questo sito web come PWA. Ecco cosa ho fatto.
Un fantastico articolo sul lazy loading ibrido
Il 6 maggio 2019 ho scritto il mio primo articolo su Smashing Magazine: Lazy Loading Ibrido, Una Migrazione Progressiva Al Lazy Loading Nativo.
Lazy loading nativo e fallback js con vanilla-lazyload 12
Il 6 aprile 2019, Addy Osmani ha scritto del lazy loading nativo delle immagini. Due giorni dopo Yvain, uno sviluppatore front-end di Parigi, mi ha chiesto se il mio vanilla-lazyload potesse essere usato come polyfill per l'attributo loading, ispirandomi a sviluppare e rilasciare la versione 12 del mio script, che introduce la nuova opzione use_native per abilitare il lazy loading nativo dove supportato. Puoi già provarlo oggi stesso.
Design di tabelle responsive e accessibili
Come far adattare una tabella potenzialmente larga ai dispositivi più piccoli, senza perdere leggibilità e accessibilità? Ecco semplici soluzioni per far apparire le tabelle come liste e le liste come tabelle, in un design responsive e accessibile.
Caricamento lazy di immagini responsive nel 2019
Negli ultimi anni, sia per lavoro che come manutentore di uno script LazyLoad, mi sono specializzato nel caricamento lazy delle immagini responsive. Oggi ti mostrerò quale codice HTML, CSS e JavaScript devi scrivere nel 2019 per servire immagini responsive e caricarle in modalità lazy.
Verificare se un elemento è ancora nella viewport dopo un certo tempo
Cosa faresti se qualcuno ti chiedesse di caricare un elemento DOM solo se rimane all'interno della viewport per un determinato periodo di tempo? Utilizzeresti vanilla-lazyload, giusto?
Creare una libreria JavaScript con moduli ES2015, Gulp, Rollup e Jest
Vediamo come scrivere una libreria JavaScript in ES2015 transpilata con Babel, utilizzando i moduli ES impacchettati con Rollup tramite Gulp, e Jest per testare il codice.
Intersection Observer e il caricamento lazy degli elementi
Ad agosto 2017 l'API Intersection Observer, una nuova ed entusiasmante API del browser, ha finalmente ottenuto un supporto piuttosto ampio. Possiamo usarla per sapere quando due elementi DOM si intersecano, o quando un determinato elemento DOM entra nella viewport del browser. Il caricamento lazy delle immagini è proprio il caso d'uso ideale.
Usare le variabili CSS come unità di spaziatura
In questo articolo ti mostro come utilizzare le variabili CSS, note popolarmente come proprietà personalizzate (CSS custom properties), per scalare gli spazi del tuo layout su diverse media query.
Cambiare il colore del testo per contrasto in base alla luminosità dello sfondo
Se dovessi cambiare il colore di un testo con posizionamento fisso in base alla luminosità del suo sfondo durante lo scorrimento, come faresti? Filtri CSS, blend mode? E se dovessi supportare tutti i browser, incluso Internet Explorer? Ecco un paio di modi per farlo utilizzando le proprietà CSS clip e clip-path.
Immagini responsive, uno standard HTML 5.1
È ufficiale. Le immagini responsive sono una raccomandazione W3C da novembre 2016, con il nuovissimo tag picture e nuovi attributi per il tag img: srcset e sizes
Immagini responsive? Il tag picture non serve
Supponiamo di avere un layout di sito web responsive in cui le immagini sono dimensionate al 100% del loro contenitore, ma il contenitore non è sempre largo quanto la viewport. Dobbiamo usare il tag picture o il tag img è sufficiente?
Caricamento lazy di immagini responsive con srcset e LazyLoad
Ora è possibile avere il caricamento lazy (lazy loading) sulle immagini responsive per fare in modo che si adattino agli schermi degli utenti e mantenere veloce il nostro sito web. In questo articolo vedremo quale markup dobbiamo scrivere e quali librerie Javascript ci serviranno.
Generazione avanzata di sprite con Compass (SASS)
Creare sprite (spriting) è un modo per migliorare le prestazioni del tuo sito web raggruppando molte immagini (o icone) in un'unica immagine più grande, al fine di effettuare una singola richiesta HTTP anziché molte. Ecco come puoi creare sprite utilizzando Compass.
Un nuovo LazyLoad per migliorare le prestazioni del tuo sito web
Negli ultimi giorni ho lavorato all'ottimizzazione delle prestazioni dei siti web e mi sono reso conto che non c'è modo di sfruttare il formato immagine JPEG progressivo sui siti web se si utilizza jQuery_lazyload di Mika Tuupola, così ho deciso di scrivere il mio lazy load personale, che si è rivelato migliore per molteplici motivi.
Animazione di caricamento "loading" rotante in solo CSS 3
Abbiamo usato immagini GIF per creare animazioni per anni, ma non sono belle da usare sopra gradienti o immagini (niente canale alfa, niente anti-aliasing) di cui i siti web moderni sono pieni. Esistono molte soluzioni alternative per animare invece immagini PNG, ma...