14 Nuevas y Asombrosas Características en el Desarrollo Web

Diálogo HTML nativo

El primero de nuestra lista es el diálogo HTML nativo. Una función que se introdujo hace un año y que ahora es totalmente compatible con los navegadores principales.

Crear un modal desde cero suele ser una tarea tediosa. El proceso suele implicar la creación de un fondo a pantalla completa, una ventana encima y el uso de JavaScript para controlar la visibilidad de estos elementos. Este enfoque convencional siempre ha parecido más complejo de lo que debería. Pero la introducción del diálogo HTML nativo ha cambiado esto.

<dialog> es un elemento HTML estándar que puede identificarse fácilmente por su ID. Viene con algunos métodos JavaScript incorporados para gestionar su visibilidad. Por ejemplo, para mostrar el modal, podemos ejecutar el método showModal(), y ¡voilá! Mágicamente aparece en la interfaz de usuario, con una pantalla de fondo.

<dialog id="dialogo1"> <p>Mi diálogo simple</p>
</dialog>

<button onclick="dialogo1.showModal()">Abrir Diálogo</button>

También se ha simplificado el cierre del modal. Se puede conseguir enviando un formulario contenido en él, utilizando un método de dialog, o llamando a su método close() en otro evento. Esto simplifica drásticamente la gestión de los modales.

<dialog id="dialogo1"> 
  <form method="dialog">
    <p>Mi diálogo simple</p>
    <button>Cerrar</button>
  </form>

  <button onclick="dialogo1.close()">Cerrar Diálogo</button>
</dialog>

<button onclick="dialogo1.showModal()">Abrir Diálogo</button>

El telón de fondo (backdrop), curiosamente, tiene su pseudo-elemento que puede ser estilizado con CSS, ofreciendo el potencial para modales estéticamente agradables.

dialog::backdrop {
  background-color: gray;
}

También podemos animar el elemento de diálogo mediante sencillas transiciones CSS. Esta capacidad permite crear interfaces de usuario más dinámicas y atractivas, y simplifica la tarea del desarrollador web.

dialog {
  opacity: 0;
  scale: 0;
  transition: all 1.5s;
}

dialog[open] {
  opacity: 1;
  scale: 1.5;
}

La función Popover

Crear popovers puede ser complicado. Sin embargo, la llegada de los popovers nativos facilitará significativamente el proceso. Esta función experimental permite mostrar y ocultar contenido sin necesidad de escribir JavaScript ni CSS complejos mediante atributos como popovertarget y popover.

Estos atributos permiten mostrar y ocultar contenido sin necesidad de escribir JavaScript o CSS. Para que esto funcione, basta con hacer coincidir el ID del elemento con el popovertarget:

<button popovertarget="experimental">Abrir</button>
<div id="experimental" popover>
  Soy un popover
</div>

Índices negativos con array.at( )

Veamos algunas de las nuevas funciones de JavaScript, empezando por la introducción de array.at(). Puede que te parezca peculiar que en JavaScript tengas que calcular el índice del último elemento de una matriz restando uno a la longitud de la matriz. Sin embargo, esto cambia con la llegada de array.at().

El método at() nos permite acceder a los elementos de una matriz utilizando índices negativos. Por ejemplo, ahora se puede utilizar array.at(-1) para acceder al último elemento, o array.at(-2) para acceder al penúltimo elemento. Esta característica acerca JavaScript a otros lenguajes de programación y mejora la legibilidad y simplicidad del código.

Copia profunda de objetos con structuredClone( )

En JavaScript, los objetos se pasan por referencia. Así, si asignas un objeto a una nueva variable, ambas variables harán referencia al mismo objeto original. Si modificas una propiedad en la nueva variable, también afectará al objeto original porque comparten la misma referencia de objeto.

En el pasado, los desarrolladores solían utilizar Object.assign() o la sintaxis de propagación ({...}) para crear un nuevo objeto. Sin embargo, estos métodos sólo realizan una copia superficial. Esto significa que si el objeto contiene objetos anidados, esos objetos anidados seguirán manteniendo referencias a sus objetos originales.

Para superar esta limitación, los desarrolladores han recurrido a usar JSON.stringify() para convertir el objeto en un string y luego JSON.parse() para volver a convertirlo en un objeto. Pero es una solución ineficiente.

Afortunadamente, ahora existe una función global llamada structuredClone() que puede clonar un objeto, creando una nueva referencia. Esta función simplifica el proceso de transferencia de datos de un objeto a otro, eliminando la necesidad de complicadas soluciones.

Import maps

Los mapas de importación (import maps) son una función de JavaScript que permite importar varios módulos de JavaScript a la vez de forma más organizada y cómoda. Un mapa de importación se define dentro de una etiqueta <script> con el atributo type establecido como "importmap".

El contenido del script es un objeto JSON que especifica la correspondencia entre los identificadores de los módulos y las URL correspondientes. En el siguiente ejemplo, el objeto "imports" enumera los módulos que se están importando – "module1" y "module2".

<script type="importmap">
  {
    "imports": {
      "module1": "https://example.com/module1.js",
      "module2": "./example/module2.js"
    }
  }
</script>

Web GPU: Tarjetas gráficas en la web

Una de las características más importantes es Web GPU. Esta función tiene una importancia inmensa, ya que es la sucesora de WebGL. Con Web GPU, los navegadores y las aplicaciones web pueden aprovechar la potencia de las GPU.

Aunque actualmente está disponible bajo una bandera experimental, numerosas bibliotecas como Babylon.js ya han extendido el soporte completo. Además, también se está desarrollando la compatibilidad con three.js. Las implicaciones de este avance son notables: los gráficos 3D y los juegos en la web están a punto de experimentar un aumento significativo de su rendimiento.

Lo que es aún más emocionante es que librerías como TensorFlow.js también proporcionan soporte para Web GPU. Esto significa que los desarrolladores tendrán la posibilidad de crear aplicaciones web en las que los usuarios finales puedan entrenar modelos de aprendizaje automático sin necesidad de descargar varias bibliotecas de Python.

Anidamiento CSS

Una nueva característica importante de CSS es el anidamiento, que por fin se ha generalizado en los navegadores modernos. El anidamiento permite escribir estilos de forma más concisa y legible, anidándolos dentro de un elemento principal. Este método elimina la necesidad de duplicar los nombres de las clases en el código.

.container {
  .inner {
    max-width: 90%;
    
    h2 {
      font-size: 1.5rem;
    }
  }
}

Con el anidamiento de CSS, puedes organizar fácilmente tus estilos colocando selectores hijos dentro del ámbito de tus selectores padres. Esta estructura jerárquica mejora la claridad del código y reduce la redundancia.

Mejora de diseño responsive: queries para contenedores

Tradicionalmente, los desarrolladores han confiado en las media-queries para aplicar estilos diferentes a los elementos en función del tamaño de la ventana gráfica. Sin embargo, el problema surge cuando es necesario tener en cuenta el contenedor principal de un elemento en lugar de la propia ventana gráfica.

Con las container-queries, se puede crear un contexto de contención especificando una propiedad container-type. Esto establece el contexto en el que puede utilizar la regla @container. Esta regla permite aplicar estilos diferentes en función del contenedor más cercano.

.main {
  container-type: inline-size;
}

@container (min-width: 600px) {
  .inner {
    flex-direction: column;
  }
}

Además, se han introducido varias unidades nuevas, como la anchura y la altura del contenedor-query. Estas unidades permiten calcular directamente el tamaño adecuado de los elementos del contenedor dentro del propio CSS:

• cqw: 1% del ancho del contenedor
• cqh: 1% de la altura del contenedor
• cqi: 1% del tamaño en línea del contenedor
• cqb: 1% del tamaño en bloque del contenedor
• cqmin: El menor valor de cqi o cqb
• cqmax: El mayor valor de cqi o cqb.

Mezcla de colores en CSS

En el pasado, la combinación de colores era posible utilizando herramientas como SaaS, pero ahora tenemos soporte nativo para la mezcla de colores directamente en CSS. Esta característica se implementa como una función que toma dos argumentos de color y los mezcla dentro de un espacio de color especificado. Por ejemplo, cuando mezclamos los colores amarillo y azul dentro del espacio de color RGB, el resultado es verde.

.container {
  background-color: color-mix(in srgb, yellow, blue);
}

Por sí solo, esto puede no parecer particularmente útil. Sin embargo, puede resultar valioso cuando se crean efectos como degradados que abarcan varios elementos. Por ejemplo, utilizando la mezcla de colores para combinar el azul y el blanco en una lista de elementos, dando lugar a un efecto de degradado.

Fuentes cromáticas: Un toque de color

Otra fascinante novedad que hay que explorar son las fuentes de color, también conocidas como fuentes cromáticas. Estas fuentes utilizan varios colores en un mismo glifo, lo que abre un nuevo abanico de posibilidades creativas. Con las fuentes de color, ahora puedes personalizar toda la paleta de colores de una fuente y crear efectos asombrosos, como degradados 3D.

Lo que hace que las fuentes de color sean aún más impresionantes es que los navegadores las siguen interpretando como fuentes normales. En el pasado, para conseguir efectos similares se necesitaban gráficos vectoriales personalizados. Sin embargo, con las fuentes de color, puedes incorporar a la perfección tipografía vibrante y multicolor en tus diseños web.

Aunque en la actualidad sólo se dispone de unas pocas fuentes de color, es interesante pensar en lo que nos deparará el futuro.

Propiedades individuales de transformación de CSS

La introducción de propiedades de transformación CSS individuales permite modificar fácilmente la traslación, la rotación y la escala. Esto se traduce en un diseño más sensible, dinámico e interactivo que puede cautivar a su público.

.container {
  translate: 40% 0;
  rotate: 50deg;
  scale: 2;
}

Funciones trigonométricas en CSS

Los amantes de los patrones geométricos estarán encantados con las nuevas funciones trigonométricas en CSS. Ahora puedes utilizar funciones de seno, coseno y tangente directamente en tu código CSS. Estas funciones son increíblemente útiles a la hora de diseñar patrones circulares o implementar cualquier diseño que implique curvas y ángulos.

.design {
  translate: 
    calc(cos(30deg) * 10px)
    calc(sin(30deg) * 10px * -1);
}

Propiedad CSS initial-letter

La nueva propiedad CSS de letra inicial le permite imitar el diseño de un artículo de revista. Te permite hacer más grande la primera letra de un artículo, añadiendo un toque de elegancia y sofisticación a las entradas de tu blog o a tus artículos.

.article {
  initial-letter: 3 2;
}

Plugin Web Vitals: Monitorización del rendimiento

Por último, centrémonos en el rendimiento y en la introducción del nuevo plugin de Web Vitals para Chrome. Aunque se puede medir el rendimiento de cualquier sitio web ejecutando un informe de Lighthouse, el proceso puede ser lento. Sin embargo, con el plugin de Web Vitals, ahora puedes supervisar las métricas de rendimiento directamente en la consola del navegador mientras navegas por un sitio web.

Este plugin es increíblemente útil, ya que no sólo proporciona información sobre el rendimiento en tiempo real, sino que también señala problemas específicos que pueden afectar a la experiencia del usuario. Por ejemplo, puede identificar problemas como saltos de layout y destacar el elemento exacto responsable del problema.