Dev Tips

130

Forced-colors

2024-05-15

Con il CSS media forced-colors gli sviluppatori possono adattare gli elementi della pagina o applicazione web alle impostazioni di accessibilità del sistema. Per esempio, un elemento che si distacca dallo sfondo per la sola ombra, può necessitare di un bordo quando vengono forzati colori ad alto contrasto.

1.button {
2  border: 0;
3  padding: 10px;
4  box-shadow:
5    -2px -2px 5px gray,
6    2px 2px 5px gray;
7}
8
9@media (forced-colors: active) {
10  .button {
11    /* Use a border instead, since box-shadow is forced to 'none' in forced-colors mode */
12    border: 2px ButtonText solid;
13  }
14}

129

PerformanceObserver for monitoring web performance

2024-04-05

Oggi, per il nostro Dev Tip, parliamo di Performance Observer, uno strumento che consente agli sviluppatori di monitorare e misurare le prestazioni delle applicazioni web in tempo reale. Se volete individuare (per poi ottimizzare) i punti critici delle prestazioni, non potete non conoscerlo!

1```
2const observer = new PerformanceObserver((list) => {
3  const entries = list.getEntries();
4  entries.forEach(entry => {
5    console.log(`Resource timing for ${entry.name}: ${entry.duration}ms`);
6  });
7});
8
9observer.observe({ entryTypes: ['resource'] });
10```

128

navigator.sendBeacon for sending data in background

2024-02-15

Invia dati di analitica al server senza bloccare il browser e compromettere l'esperienza utente. Con la funzione navigator.sendBeacon() si possono effettuare richieste POST in modo asincrono anche se l'utente naviga via dalla pagina.

1// Using navigator.sendBeacon for sending data in the background
2const data = "Analytics data";
3navigator.sendBeacon("/analytics", data);
4
5// Sending analytics at the end of a session
6document.addEventListener("visibilitychange", function logData() {
7  if (document.visibilityState === "hidden") {
8    navigator.sendBeacon("/analytics", data);
9  }
10});

127

Create a revocable Proxy

2024-01-16

Immaginiamo di dover concedere temporaneamente a un utente l'accesso a una funzionalità di un oggetto per poi revocarla dopo un certo periodo di tempo o in base a determinate condizioni. Come fare? Possiamo usare Proxy.revocable() per gestire questa situazione in modo pulito e controllato.

1const target = { value: 42 };
2const { proxy, revoke } = Proxy.revocable(target, {});
3
4console.log(proxy.value); // Output: 42
5revoke();
6console.log(proxy.value); // Throws TypeError: Cannot perform 'get' on a proxy that has been revoked

126

Using Intl.RelativeTimeFormat for human-readable time

2023-12-14

Una semplice soluzione per avere la giusta indicazione temporale (anche se hai un sito in turkmeno e non sai come si scrive "ieri" in turkmeno 😁).

1const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
2
3console.log(rtf.format(-1, "day")); // Output: yesterday
4console.log(rtf.format(2, "week")); // Output: in 2 weeks
5
6const rtf2 = new Intl.RelativeTimeFormat("it", { style: "short" });
7
8console.log(rtf2.format(3, "quarter")); // Output: tra 3 trim.
9console.log(rtf2.format(-1, "day")); // Output: 1 g fa