MODO

We help companies build outstanding web sites by filling the gap between design agencies and IT specialists. We code design.

[MODO @madebymodo]

Un talk “stratificato” del nostro @decarola come piatto forte della mattina: da non perdere.

Ci vediamo @cssdayit per parlare di frontend, performance, scalabilità, architettura e futuro.

#weCodeDesign

[cssday | 28 Marzo 2025 | Faenza @cssday_it]

Ci vediamo domani a #cssday!

Tutto pronto per questa fantastica edizione virtuale 🚀

Se hai il biglietto, controlla la tua mail: abbiamo mandato istruzioni importanti per la partecipazione!

Se non l'hai ancora preso, puoi farlo adesso: https://t.co/mVCYycevXJ

[MODO @madebymodo]

Lavoro da remoto, Work From Home e Smart Working: il@nostro @decarola a tavola. All’ora di pranzo. Dal diario personale le note sulla sessione con @__fevr @milanofrontend @lucamezzalira @grusp e tanti altri

[MODO @madebymodo]

Nuova metrica disponibile su SpeedCurve: LCP misura quando viene visualizzato l’elemento più grande del viewport.

Qual è il Largest Contentful Paint del vostro sito?

(Psst: potete chiedercelo per avere un test e una consulenza con SpeedCurve) #gofaster

[SpeedCurve @SpeedCurve]

NEW! Largest Contentful Paint is now available in your SpeedCurve metrics. LCP measures when the largest element in the viewport is rendered. Here’s a good example of LCP on the @nytimes home page.

Glossary of #webperf metrics: https://t.co/0do6nal8mc

[MODO @madebymodo]

Migliorare le performance di un sito vuol dire chiedersi se ogni byte è giustificato, se deve arrivare prima o dopo.
Abbiamo risparmiato 110Kb (più del 20%) sul peso di una libreria JavaScript sostituendo momentJs con dayJs e facendo treeShaking sugli import di lodash #gofaster

[MODO @madebymodo]

Con migliaia di immagini per cui calcolare la distanza geografica da un punto (lat/long) un Web Worker ci ha permesso di rendere totalmente asincrono il calcolo, liberando l‘app #VueJS a vantaggio dell'interazione utente.
👉 https://t.co/Ou0ZYwEiU6
👉 https://t.co/qJLRoAohKH

[MODO @madebymodo]

RequestAnimationFrame è il miglior modo per effettuare operazioni impegnative in JS senza bloccare il browser. Richiede però di parcellizzare il compito. Quando non è possibile o semplice possiamo usare un Web Worker.
1/3

[MODO @madebymodo]

I Web Worker sono processi JavaScript separati dal main thread del browser, per cui non impattano sulle prestazioni del DOM (scroll, click/tap, etc.). Si delega il task completo e quando l'elaborazione è completata si riceve il risultato.
2/3

[MODO @madebymodo]

Per chi vuole saperne di più:

*perché è importante? evita al browser di ridisegnare la pagina dopo aver scaricato immagini dimensionate via CSS

*tecniche valide oggi*
- https://t.co/wOxVgPh5jh
- https://t.co/5aTKrbfuMc

*Proposal CSSWG
- https://t.co/WQg2rvw91B

[MODO @madebymodo]

Rimettiamo gli attributi width/height ai tag IMG! Chrome segue l’esempio di Firefox 🦊 usandoli per calcolare il rapporto immagine, riducendo il jank e migliorando le performance di visualizzazione.

Possiamo (finalmente) dire addio alle tecniche basate sul padding #gofaster

[Addy Osmani @addyosmani]

Chrome is implementing a change to avoid layout jank during image loading 🖼💨

This calculates aspect ratio using width/height attributes
(to size images using/CSS) before they have fully loaded. Already in Firefox 🦊

https://t.co/6GpCeyGPm9 ty @jensimmons & CSSWG!

[MODO @madebymodo]

Oggi lavoriamo qui.

[MODO @madebymodo]

@lelamanolio We want you to get “there” and appreciate everything you do. Keep asking, keep giving, the joy of each one of us is ours to share @pecus

[MODO @madebymodo]

Our supertalented @giulia_chiola and @lelamanolio attending @kerningconf #keming2019

[MODO @madebymodo]

Anche quest’anno siamo al #cssday, e @decarola porta dei doni (oltre a un talk sui service worker)!
@cssdayit

[cssday | 28 Marzo 2025 | Faenza @cssday_it]

[Speaker di #cssday 2019]

Bentornato Andrea De Carolis @decarola che quest'anno ci parla di "#ServiceWorkers - Out of the shadows"

➡️ Biglietti
➡️ https://t.co/b2cjnanuAo

#FrontEnd #conference #WebDesign #JavaScript

[Jen Simmons @jensimmons]

We just added support for animating CSS Grid to @FirefoxNightly. You can use CSS animations to change the track lists on `grid-template-columns` and `grid-template-rows`.

Try it out, and send me a link to your demo! (Use Firefox Nightly as of today. No flag needed.)

[MODO @madebymodo]

More Service Worker goodies

[Jake Archibald @jaffathecake]

📝 Introducing Background Fetch.

➡️ Perform long-running fetches in the background.
➡️ Hear about the result in your service worker.
➡️ User can see progress and pause/cancel.

Demo & docs: https://t.co/oBFJAKqb6X

[MODO @madebymodo]

Il nostro @decarola all'opening talk della WebAppConf 2018. Ci vediamo domani per parlare di #Styleguide e #webperf

[MODO @madebymodo]

H2 is not set and forget for #webperf
Patrick Meenan shows how low level you need to go to make it really work aside from parallelization of requests.

[MODO @madebymodo]

Molto contenti di sostenere come Patreon @milanofrontend straordinaria community di dev e web maker.

[MODO @madebymodo]

Yessss! We are now a proud patron of Milano Frontend Meetup on @patreon, and you should be too: #NewPatron https://t.co/YdSDP4Rvnb