Novità di Chrome 66

Pete LePage

E c'è molto altro.

Sono Pete LePage. Diamo un'occhiata alle novità per gli sviluppatori in Chrome 66.

Vuoi l'elenco completo delle modifiche? Consulta l'elenco delle modifiche al repository di origine di Chromium.

Modello oggetto CSS con tipi

Se hai mai aggiornato una proprietà CSS tramite JavaScript, hai utilizzato il modello di oggetti CSS. Tuttavia, restituisce tutto come stringa.

el.style.opacity = 0.3;
console.log(typeof el.style.opacity);
> 'string' // A string!?

Per animare la proprietà opacity, devo convertire la stringa in un numero, poi incrementare il valore e applicare le modifiche. Non proprio l'ideale.

function step(timestamp) {
  const currentOpacity = parseFloat(el.style.opacity);
  const newOpacity = currentOpacity + 0.01;
  element.style.opacity = newOpacity;
  if (newOpacity <= 1) {
    window.requestAnimationFrame(step);
  }
}

Con il nuovo modello di oggetti con tipi CSS, i valori CSS vengono esposti come oggetti JavaScript con tipi, eliminando gran parte della manipolazione dei tipi e offrendo un modo più sensato di lavorare con il CSS.

Anziché utilizzare element.style, accedi agli stili tramite la proprietà .attributeStyleMap o .styleMap. Restituisce un oggetto simile a una mappa che semplifica la lettura o l'aggiornamento.

el.attributeStyleMap.set('opacity', 0.3);
const oType = typeof el.attributeStyleMap.get('opacity').value;
console.log(oType);
> 'number' // Yay!

Rispetto al vecchio modello di oggetti CSS, i primi benchmark mostrano un miglioramento di circa il 30% delle operazioni al secondo, un aspetto particolarmente importante per le animazioni JavaScript.

el.attributeStyleMap.set('opacity', 0.3);
el.attributeStyleMap.has('opacity'); // true
el.attributeStyleMap.delete('opacity');
el.attributeStyleMap.clear(); // remove all styles

Inoltre, aiuta a eliminare i bug causati dalla dimenticanza di convertire il valore da una stringa in un numero e gestisce automaticamente il troncamento e il blocco dei valori. Inoltre, sono disponibili alcuni nuovi metodi molto interessanti per gestire le conversioni di unità, l'aritmetica e l'uguaglianza.

el.style.opacity = 3;
const opacity = el.computedStyleMap().get('opacity').value;
console.log(opacity);
> 1

Eric ha scritto un post fantastico con diverse dimostrazioni ed esempi nel suo articolo esplicativo.

API Async Clipboard

const successful = document.execCommand('copy');

La copia e incolla sincrona con document.execCommand può andare bene per piccoli frammenti di testo, ma per qualsiasi altro elemento è molto probabile che la sua natura sincrona blocchi la pagina, causando un'esperienza utente scadente. Inoltre, il modello di autorizzazione tra i browser non è coerente.

La nuova API Clipboard asincrona è una sostituzione che funziona in modo asincrono e si integra con l'API di autorizzazione per offrire un'esperienza migliore agli utenti.

Il testo può essere copiato negli appunti richiamando writeText().

navigator.clipboard.writeText('Copy me!')
  .then(() => {
    console.log('Text is on the clipboard.');
  });

Poiché questa API è asincrona, la funzione writeText() restituisce una promessa che verrà risolta o rifiutata a seconda che il testo passato sia stato copiato correttamente.

Analogamente, il testo può essere letto dalla clipboard chiamando getText() e aspettando che la promessa restituita venga risolta con il testo.

navigator.clipboard.getText()
  .then((text) => {
    console.log('Clipboard: ', text);
  });

Dai un'occhiata al post e alle demo di Jason nell'articolo esplicativo. Ha anche esempi che utilizzano le funzioni async.

Nuovo contesto Canvas BitmapRenderer

L'elemento canvas ti consente di manipolare la grafica a livello di pixel, di disegnare grafici, manipolare foto o persino elaborare video in tempo reale. Tuttavia, a meno che tu non stia iniziando con un canvas vuoto, devi avere un modo per visualizzare un'immagine sul canvas.

In passato, ciò significava creare un tag image e poi visualizzarne i contenuti in canvas. Purtroppo, ciò significa che il browser deve memorizzare più copie dell'immagine in memoria.

const context = el.getContext('2d');
const img = new Image();
img.onload = function () {
  context.drawImage(img, 0, 0);
}
img.src = 'llama.png';

A partire da Chrome 66, è disponibile un nuovo contesto di rendering asincrono che ha semplificato la visualizzazione degli oggetti ImageBitmap. Ora vengono visualizzati in modo più efficiente e con meno scatti lavorando in modo asincrono ed evitando la duplicazione della memoria.

Per utilizzarla:

  1. Chiama createImageBitmap e fornisci un blob immagine per creare l'immagine.
  2. Recupera il contesto bitmaprenderer da canvas.
  3. Trasferisci l'immagine.
const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);

Fatto, ho visualizzato l'immagine.

AudioWorklet

I worklet sono disponibili. PaintWorklet è stato rilasciato in Chrome 65 e ora stiamo attivando AudioWorklet per impostazione predefinita in Chrome 66. Questo nuovo tipo di worklet può essere utilizzato per elaborare l'audio nel thread audio dedicato, sostituendo lo ScriptProcessorNode legacy che veniva eseguito nel thread principale. Ogni AudioWorklet viene eseguito nel proprio ambito globale, riducendo la latenza e aumentando la stabilità della velocità in bit.

Puoi trovare alcuni esempi interessanti di AudioWorklet su Google Chrome Labs.

E tanto altro.

Queste sono solo alcune delle modifiche in Chrome 66 per gli sviluppatori, ma ce ne sono molte altre.

  • TextArea e Select ora supportano l'attributo autocomplete.
  • L'impostazione di autocapitalize su un elemento form verrà applicata a tutti i campi del form secondari, migliorando la compatibilità con l'implementazione di autocapitalize in Safari.
  • trimStart() e trimEnd() sono ora disponibili come metodo basato su standard per eliminare gli spazi vuoti dalle stringhe.

Assicurati di consultare la pagina Novità di Chrome DevTools per scoprire le novità di DevTools in Chrome 66. Inoltre, se ti interessano le app web progressive, dai un'occhiata alla nuova serie di video del PWA Roadshow. Poi, fai clic sul pulsante Iscriviti sul nostro canale YouTube e riceverai una notifica via email ogni volta che lanceremo un nuovo video.

Sono Pete LePage e, non appena verrà rilasciato Chrome 67, sarò qui per raccontarti le novità di Chrome.