Novità di Chrome 66

E c'è molto altro.

Mi chiamo Pete LePage. Analizziamo le novità di Chrome 66 per gli sviluppatori.

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

Modello oggetto di tipo CSS

Se ti è capitato di aggiornare una proprietà CSS tramite JavaScript, avrai utilizzato il modello dell'oggetto CSS. Ma restituisce tutto come stringa.

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

Per animare la proprietà opacity, devo trasmettere la stringa a un numero, quindi incrementare il valore e applicare le modifiche. Non proprio 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 a oggetti di tipo CSS, i valori CSS vengono esposti come oggetti JavaScript digitati, eliminando gran parte della manipolazione del tipo e offrendo un modo più sensato di lavorare con CSS.

Anziché utilizzare element.style, puoi accedere agli stili tramite la proprietà .attributeStyleMap o .styleMap. Restituiscono un oggetto simile a una mappa che facilita 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 a 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, consente di eliminare i bug causati dall'dimenticarsi di trasmettere il valore da una stringa a un numero e gestisce automaticamente l'arrotondamento e il blocco dei valori. Inoltre, esistono nuovi metodi molto innovativi 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 pubblicato un post eccezionale con vari esempi e dimostrazioni nel suo spiegatore.

API Async Clipboard

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

La funzionalità di copia e incolla sincrona utilizzando document.execCommand può essere accettabile per piccole poche di testo, ma per qualsiasi altra cosa c'è una buona probabilità che la natura sincrona blocca la pagina, causando un'esperienza negativa per l'utente. Inoltre, il modello di autorizzazione tra i browser non è coerente.

La nuova API Async Clipboard sostituisce l'API Async Clipboard, 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 chiamando 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 trasmesso venga copiato correttamente.

Allo stesso modo, il testo può essere letto dagli appunti chiamando getText() e attendendo 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'spiegazione. Ha anche esempi che usano le funzioni async.

Nuovo contesto canvas BitmapRenderer

L'elemento canvas ti consente di modificare la grafica a livello di pixel, disegnare grafici, manipolare foto o persino elaborare video in tempo reale. Tuttavia, a meno che tu non inizi con un elemento canvas vuoto, devi avere un modo per eseguire il rendering di un'immagine su canvas.

In passato, ciò significa creare un tag image e poi eseguire il rendering dei relativi contenuti in canvas. Sfortunatamente, ciò significa che il browser deve archiviare 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 eseguono un rendering più efficiente e con meno jank lavorando in modo asincrono ed evitando la duplicazione della memoria.

Per utilizzarla:

  1. Chiama createImageBitmap e passa al blob di immagine per creare l'immagine.
  2. Ottieni il contesto bitmaprenderer da canvas.
  3. Poi trasferisci l'immagine verso l'interno.
const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);

Fatto, ho eseguito il rendering dell'immagine.

AudioWorklet

I worklet sono pronti! PaintWorklet è stato spedito in Chrome 65 e ora stiamo abilitando 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 sul thread principale. Ogni AudioWorklet viene eseguito nel proprio ambito globale, riducendo la latenza e aumentando la stabilità della velocità effettiva.

Esistono alcuni esempi interessanti di AudioWorklet su Google Chrome Labs.

E tanto altro.

Queste sono solo alcune delle modifiche apportate a Chrome 66 per gli sviluppatori, e ovviamente 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 modulo figlio, 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 leggere la pagina Novità di Chrome DevTools per scoprire le novità relative a DevTools in Chrome 66. Se ti interessano le app web progressive, dai un'occhiata alla nuova serie di video del roadshow PWA. Fai clic sul pulsante Iscriviti sul nostro canale YouTube e riceverai una notifica via email ogni volta che viene lanciato un nuovo video.

Mi chiamo Pete LePage e non appena verrà rilasciata la versione 67 di Chrome, sarò qui per dirti le novità di Chrome.