Novedades de Chrome 66

Pete LePage

¡Y hay mucho más!

Soy Pete LePage. Analicemos las novedades para desarrolladores en Chrome 66.

¿Quieres ver la lista completa de cambios? Consulta la lista de cambios del repositorio de código fuente de Chromium.

Modelo de objetos tipados de CSS

Si alguna vez actualizaste una propiedad CSS a través de JavaScript, usaste el modelo de objetos CSS. Sin embargo, muestra todo como una cadena.

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

Para animar la propiedad opacity, tendría que transmitir la cadena a un número, luego incrementar el valor y aplicar mis cambios. No es exactamente lo ideal.

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 el nuevo modelo de objetos tipados de CSS, los valores de CSS se exponen como objetos de JavaScript tipados, lo que elimina gran parte de la manipulación de tipos y proporciona una forma más sensata de trabajar con CSS.

En lugar de usar element.style, accedes a los estilos a través de la propiedad .attributeStyleMap o .styleMap. Muestran un objeto similar a un mapa que facilita la lectura o actualización.

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

En comparación con el modelo de objetos CSS anterior, las primeras comparativas muestran una mejora de alrededor del 30% en las operaciones por segundo, lo que es especialmente importante para las animaciones de JavaScript.

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

También ayuda a eliminar los errores causados por olvidarse de transmitir el valor de una cadena a un número y controla automáticamente el redondeo y el recorte de valores. Además, hay algunos métodos nuevos bastante útiles para abordar las conversiones de unidades, la aritmética y la igualdad.

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

Eric tiene una gran publicación con varias demostraciones y ejemplos en su explicación.

API de Async Clipboard

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

El copiar y pegar síncrono con document.execCommand puede ser adecuado para fragmentos pequeños de texto, pero para cualquier otra cosa, es probable que su naturaleza síncrona bloquee la página, lo que provocará una experiencia deficiente para el usuario. Además, el modelo de permisos entre navegadores es incoherente.

La nueva API de Async Clipboard es un reemplazo que funciona de forma asíncrona y se integra con la API de permisos para brindar una mejor experiencia a los usuarios.

Para copiar texto en el portapapeles, llama a writeText().

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

Como esta API es asíncrona, la función writeText() muestra una promesa que se resolverá o rechazará según si el texto que pasamos se copia correctamente.

Del mismo modo, se puede leer texto desde el portapapeles llamando a getText() y esperando a que la promesa que se muestra se resuelva con el texto.

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

Consulta la publicación y las demostraciones de Jason en la explicación. También tiene ejemplos que usan funciones async.

Nuevo contexto de Canvas BitmapRenderer

El elemento canvas te permite manipular gráficos a nivel de píxeles, dibujar gráficos, manipular fotos o incluso realizar procesamiento de video en tiempo real. Sin embargo, a menos que comiences con un canvas en blanco, necesitas una forma de renderizar una imagen en el canvas.

Históricamente, eso significaba crear una etiqueta image y, luego, renderizar su contenido en canvas. Lamentablemente, eso significa que el navegador debe almacenar varias copias de la imagen en la memoria.

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

A partir de Chrome 66, hay un nuevo contexto de renderización asíncrona que optimizó la visualización de objetos ImageBitmap. Ahora se renderizan de manera más eficiente y con menos interrupciones, ya que funcionan de forma asíncrona y evitan la duplicación de memoria.

Para usarlo, realiza los pasos siguientes:

  1. Llama a createImageBitmap y entrégale un blob de imagen para crearla.
  2. Obtén el contexto de bitmaprenderer de canvas.
  3. Luego, transfiere la imagen.
const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);

Listo, rendericé la imagen.

AudioWorklet

¡Ya están disponibles los worklets! PaintWorklet se envió en Chrome 65 y ahora habilitamos AudioWorklet de forma predeterminada en Chrome 66. Este nuevo tipo de Worklet se puede usar para procesar audio en el subproceso de audio dedicado, lo que reemplaza a ScriptProcessorNode heredado que se ejecutaba en el subproceso principal. Cada AudioWorklet se ejecuta en su propio alcance global, lo que reduce la latencia y aumenta la estabilidad de la capacidad de procesamiento.

Hay algunos ejemplos interesantes de AudioWorklet en Google Chrome Labs.

Y mucho más.

Estos son solo algunos de los cambios en Chrome 66 para desarrolladores, por supuesto, hay muchos más.

  • TextArea y Select ahora admiten el atributo autocomplete.
  • La configuración de autocapitalize en un elemento form se aplicará a cualquier campo de formulario secundario, lo que mejorará la compatibilidad con la implementación de autocapitalize de Safari.
  • trimStart() y trimEnd() ahora están disponibles como la forma basada en estándares de recortar espacios en blanco de las cadenas.

Asegúrate de consultar Novedades de las Herramientas para desarrolladores de Chrome para conocer las novedades de DevTools en Chrome 66. Además, si te interesan las apps web progresivas, consulta la nueva serie de videos del PWA Roadshow. Luego, haz clic en el botón Suscribirse en nuestro canal de YouTube y recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo.

Soy Pete LePage y, en cuanto se lance Chrome 67, estaré aquí para contarte las novedades.