Novedades de Chrome 66

Además, hay mucho más.

Soy Pete LePage. ¡Profundicemos y veamos las novedades para desarrolladores en Chrome 66!

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

Modelo de objetos escritos en CSS

Si alguna vez actualizaste una propiedad de CSS a través de JavaScript, usaste el modelo de objetos de CSS. Pero 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, aumentar 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 escritos de CSS, los valores de CSS se exponen como objetos de JavaScript escritos, 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, puedes acceder a los diseños a través de la propiedad .attributeStyleMap o .styleMap. Muestran un objeto similar a un mapa que facilita su 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 de CSS anterior, las comparativas iniciales muestran alrededor de una mejora del 30% en las operaciones por segundo, algo 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 errores causados por olvidar convertir el valor de una cadena a un número, y controla automáticamente el redondeo y la restricción de los valores. Además, hay algunos métodos nuevos bastante interesantes para 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 publicación excelente con varias demostraciones y ejemplos en su explicación.

API de Async Clipboard

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

La función de copiar y pegar síncrona con document.execCommand puede ser adecuada para pequeños fragmentos de texto, pero, para todo lo demás, es probable que su naturaleza síncrona bloquee la página, lo que causará una mala experiencia para el usuario. Y el modelo de permisos entre navegadores no es coherente.

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 el texto en el portapapeles, llama a writeText().

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

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

Del mismo modo, el texto se puede leer 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 Juan 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 procesar videos 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, se trataba de 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 simplificó la visualización de objetos ImageBitmap. Ahora se renderizan de manera más eficiente y con menos bloqueos, ya que trabajan de forma asíncrona y evitan la duplicación de memoria.

Para usarlo, realiza los siguientes pasos:

  1. Llama a createImageBitmap y proporciónale un BLOB de imagen para crear la imagen.
  2. Obtén el contexto bitmaprenderer del canvas.
  3. Luego, transfiere la imagen.
const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);

Listo. Ya renderizamos la imagen.

AudioWorklet

Llegaron los trabajos PaintWorklet se envió en Chrome 65 y ahora habilitamos AudioWorklet de forma predeterminada en Chrome 66. Se puede usar este nuevo tipo de Worklet para procesar audio en el subproceso de audio dedicado, lo que reemplaza el 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 y, 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 para cortar espacios en blanco de las strings.

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

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