DEV Community: Patricio Pitaluga

Dejar las cosas quietas: parte 1

Patricio Pitaluga — Thu, 06 Aug 2020 14:22:32 +0000

Animar los contenidos web con css es fantástico, pero sabés qué cosa es mejor: dejarlos quietos. Más específicamente dejarlos quietos cuando el usuario va a interactuar con ellos.

No es un argumento en contra de la animación (que los hay) sino a favor de la usabilidad. Los usuarios ~~son~~ somos ansiosos e internet no es tan rápida como nos gustaría. Hay muchos sitios que hacen aparecer y desaparecer elementos en pantalla (te hablo a tí, Twitter👈🤨) justo en el momento en el que el usuario va a interactuar con (o intentar leer) lo que estaba en ese lugar antes, trayendo con esto likes involuntarios, peleas de parejas, confusiones y fastidio.

En acción:

¿Pero… qué tan rápido puede ser el usuario?

Los usuarios NO van a querer interactuar antes de que esté cargado completamente el sitio… ¿No?

Este es un jugador profesional de Overwatch entrenando su velocidad de respuesta:

Creo que puedo pasar una pantalla de login mucho más rápido 😆.

¿Cuándo sucede?

El contenido html, si es de un tamaño razonable, se renderea en el navegador prácticamente en el acto. Una vez que esto sucedió, el usuario ya puede empezar a interactuar, por ejemplo, intentar clickear un enlace o leer un texto.

Los estilos css y el código javascript pueden ser render blocking o no, es decir, pueden permitir que los elementos subsiguientes se muestren aunque el asset en cuestión no esté completamente cargado. El developer debe elegir estratégicamente qué elementos serán render blocking y cuáles no, para dar la mejor experiencia al usuario desde el segundo cero y evitar mover el contenido que ya es interactuable.

En todo caso, las imágenes en elemento <img> no son render blocking por default y tampoco las tipografías (estas dos cosas son, seguramente, los assets más pesado del sitio).

También, en webapps (sobre todo con frameworks javascript de contenido reactivo) se suele cargar información con XMLHttpRequests (a veces llamado ajax) para que en una lista de elementos se inserten elementos más nuevos arriba, desplazando a los anteriores.

Muchas veces, desde el diseño, no se consideran espacios para notificaciones para que no sean obstáculo para el resto de los contenidos.

Algunos casos en los que el contenido se puede mover inesperadamente mientras el usuario quiere interactuar:

Cuando se terminan de cargar imágenes y desplazan el contenido vecino.
Cuando se terminan de cargar tipografías y cambian el tamaño de los elementos en los que se encuentran y los elementos vecinos.
Cuando se muestran nuevos elementos con información cargada con XMLHttpRequests y desplazan los elementos previos.
Cuando no se tuvo una estrategia de render blocking para el css o javascript y se redimensionan elementos al cargar estilos.
Cuando se usa un framework javascript y no se utilizó cloak para ocultar el contenido template mientras carga.
Cuando se muestran notificaciones en pantalla al usuario que quedan por encima de elementos interactivos o textos.

¿Cómo evitarlo?

En este artículo solo voy a plantear las soluciones que se me ocurren para resolver problemas con carga de imágenes. Atacaré las otras posibles causas en siguientes posts.

1 Posibles soluciones para evitar desplazar elementos al cargar imágenes

Ya sea porque se está utilizando lazy loading, porque la imagen es muy pesada o porque el proveedor de internet está perezoso (hablo de tí, Fibertel👈🤨), las imágenes pueden tardar unos segundos en cargar. Cuando un elemento <img> no terminó de cargar la imagen de su src, su tamaño es cero width y cero height por lo que no desplazará los elementos adjuntos. En la medida que los cargue, "crecerá" y ocupará su espacio. Para evitar desplazar elementos al cargar imágenes se puede:

1.1 Establecer las propiedades width y height del propio elemento.

Sí. Sin css, como hacía tu abuelo 😆. Ventaja: el tamaño será rendereado inmediatamente sin importar dónde se carguen los estilos css Desventaja: como se setea un único tamaño no es responsive.

<img alt="..." src="some-image.jpg" width="100" height="50"/>
<p>Este párrafo no será desplazado.</p>

Es una solución primitiva para un problema primitivo y muchas veces es suficiente.

Nota: No se debe especificar que son px como se haría en css porque por defecto considera que el valor son píxeles. También se puede setear valor porcentual con el signo %.

1.2 Setear el width y height de la imágen explícitamente en la hoja de estilo

Es la solución más óptima. Ventajas: funciona estupendamente, es responsive y permite usar imágenes de mayor definición para pantallas con alta densidad de pixeles (retina) Desventajas: hay que conocer tamaño de cada imagen y especificarla en la hoja de estilo. El bloque <style> deberá estar antes o inmediámente después del elemento <img> ya que si se carga asincrónicamente pueden ocurrir unos segundos mientras el browser renderea el alto del elemento de su estilo.

<style>
.the-image {
  height: 100px;
  width: 100px;
}
@media only screen and (min-width: 768px) {
  .the-image {
    height: 150px;
    width: 150px;
  }
}
</style>
...
<img alt="..." class="the-image" src="my-image.jpg"/>
<p>Este párrafo no será desplazado.</p>

1.3 Reservar el espacio en el elemento contenedor

Se puede establecer el height del estilo, no de la imagen en sí, sino del elemento contenedor. Luego la imagen puede estar en un elemento <img> dentro, o bien como background-image del contenedor con background-size: cover o contain. Desventaja: con esto se decide un alto máximo pre-establecido y las imágenes que sean de una proporción más vertical quedan cortadas.

1.4 Reservar el espacio relativo a la proporción de la imagen

¿Y qué pasa si no sé cuánto va a medir la imagen de alto porque está en un elemento responsive que ajusta su ancho?

Seguramente sí conozcas su proporción (aspect ratio).

Considerando que el padding porcentual es relativo al ancho del elemento, se puede setear la proporción como padding-bottom del contenedor. Por ejemplo, para que una imagen que sabemos que será cuadrada, ya tenga el alto correcto antes de cargarse, se puede contener con un elemento con padding-bottom: 100% y con la imagen como position: absolute. Esto también es útil cuando deba ponerse una imagen como background-image. Otros porcentajes se pueden calcular con regla de tres simple pero es útil tener a mano las dos proporciones de fotos más usadas: 16:9 es el 56.25% y 4:3 es el 75%. Ventajas: es responsive. Desventajas: es un hack y obliga a poner la imagen como position absolute. Ejemplo:

<style>
  .my-img-container {
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    position: relative;
  }
  .my-image {
    position: absolute;
  }
</style>
...
<figure class="my-img-container">
  <img alt="" src="my-image-with-known-aspect-ratio.jpg" class="my-image"/>
</figure>
<p>Este párrafo no será desplazado.</p>

Hay un feature experimental de css que permite directamente específicar el aspect ratio y esto dejará obsoleto el hack del padding proporcional, pero todavía (agosto 2020) no es soportada por muchos navegadores. En el futuro será:

.mi-image {
  aspect-ratio: 16 / 9;
}

Si estás leyendo esto mucho más adelante podés checkear: https://caniuse.com/#search=aspect-ratio para saber si ya está aconsejado su uso.

1.5 En grillas de thumbnails considerar el espacio que ocupará la imagen de mayor alto

Suele suceder mucho en tiendas online que se plantea una grilla de items con thumbnails. Si todas esas fotos tendrán la misma proporción, se puede aplicar la solución 1.2 especificando el alto en css pero, muy probablemente, como desarrolladores permitamos que los usuarios suban imágenes de cualquier proporción. En ese caso se pueden pensar varias soluciones:

La solución 1.3 antes mencionada: especificar por css un alto máximo y que todas las imágenes se encuentren centradas verticalmente en contenedores de ese alto Desventaja: quedan espacios en blanco arriba y abajo en las imágenes más apaisadas.
Con css forzar a que todos los elementos de ese row de la grilla se adapten al alto del de la imágen de mayor altura con grid-auto-rows: 1fr; o con display: flex al contendor y flex: 1 1 auto a los contenidos Desventaja: de todos modos se desplazarán los contenidos mientras no se haya cargado la imagen más alta.

1.6 Precargar imágenes que se mostrarán luego para reservar su alto

Como el elemento <img> puede no estar presente en el DOM inicialmente sino que se muestra con javascript, puede ser útil precargar las imágenes. Se puede hacer con css pero si se hace con javascript ya sabremos con anticipación el tamaño y la proporción de la imagen antes de mostrarla. En ese caso se puede setear el height en el style del elemento antes de mostrarlo. Ventaja: como se carga por javascript, el elemento <img> puede estar display: none o incluso ausente en el DOM. Desventaja: si no se ocultan todos los contenidos hasta haber cargado la imagen, de todos modos se renderea inicialmente con alto cero y se desplaza el resto de los contenidos terminar la precarga. Ejemplo en vanilla js para que se comprenda. Puede reproducirse de manera similar en React, Angular o Vue:

  <style>
  img {
    display: block;
  }
  .tab {
    display: none;
  }
  .tab.tab--active {
    display: block;
  }
  </style>

  <button onclick="showTab(1)">Ver solapa 1</button>
  <button onclick="showTab(2)">Ver solapa 2</button>

  <div id="tab1" class="tab tab--active">
    <p>Aquí no hay ninguna imagen, por lo que el alto será el mínimo</p>
    <div id="image-placeholder">
    </div>
  </div>
  <div id="tab2" class="tab">
    <p>Aquí hay una imagen pero esta solapa está oculta</p>
    <img alt="..." src="https://placekitten.com/200/300"/>
  </div>
  <p>Este párrafo no será desplazado.</p>
  ...
  <script>
    const preloadImg = new Image();
    preloadImg.src = 'https://placekitten.com/200/300';
    preloadImg.onload = function() {
      // Puede no ser un div placeholder sino setearlo al contenedor
      document.getElementById('image-placeholder').style.height = this.height + 'px';
    };
    const showTab = function(_tabNumber) {
      document.querySelector('.tab--active').classList.remove('tab--active');
      document.getElementById('tab' + _tabNumber).classList.add('tab--active');
    };
  </script>

1.7 No mostrar el contenido accionable cercano a la imagen hasta que no se cargue

Si no se conoce el tamaño ni la proporción de la imagen, es mejor no mostrar el contenido accionable subsiguiente. El ejemplo más obvio de las interfaces con imágenes de proporción variable es Pinterest. Simplemente no se muestra en pantalla nada interactuable hasta que la imagen que puede desplazarlo no se cargó o se reservó el espacio que ocupará. Para hacer esto se puede utilizar el evento onload del elemento <img> para llamar a la función que haga visibles los elementos accionables vecinos. Ventaja: soluciona el problema Desventaja: el usuario pasa más tiempo esperando. Si le muestran animaciones de carga o skeleton placeholders puede parecerle lento o incluso demodé.
Ejemplo en vanilla js para que se comprenda. Puede reproducirse de manera similar en React, Angular o Vue:

<style>
  .container__actionable-parts {
    display: none;
  }
  // Hasta que no se haya cargado la img y se conozca el alto 
  // no estará listo para ser mostrado y los botones 
  // cercanos permaneceran display: none;
  .container--ready .container__actionable-parts {
    display: block;
  }
</style>
...
<div class="container">
  <img
    alt="..." src="someimage.jpg"
    onload="this.parentElement.classList.add('container--ready')"
  />
  <div class="container__actionable-parts">
    <button>Este botón…</button>
    <p>
      y este párrafo no serán desplazados, porque
      no estarán visibles hasta que la imagen esté
      lista para mostrarse
    </p>
  </div>
</div>

1.8 Permitir que el backend mida la imagen del archivo antes de servirla y comunicar el tamaño al frontend

No importa cual sea el lenguaje del backend seguramente puede leer el tamaño del archivo de la imagen antes de servirla. Por ejemplo Node puede hacerlo con la librería https://www.npmjs.com/package/image-size o similares. Así puede setear en el template (o devolver en el api endpoint como parte del json) cuál es el tamaño original de la imagen para que el frontend calcule el tamaño que ocupará proporcionalmente. Si la url de la imagen se guardará en una base de datos también se pueden guardar como campos integer el ancho y alto de la imagen para que la medición se haga una sola vez. Ventaja: ya que el tamaño en pixeles es un número entero es información que se lee muy rápidamente comparada con el tiempo de carga de una imagen pesada. Desventajas: se debe contar con un backend dinámico; exige mayor uso del servidor y puede demorar un instante más antes de servir la imagen; requiere un endpoint que indique el tamaño y otro que sea la descarga en sí de la imagen; si la imagen no es hosteada en el mismo servidor seguramente requiera descargarla allí temporalmente para medirla; es la solución más compleja.

1.9 Permitir que el usuario que sube la imagen la recorte para adaptarse a la proporción esperada

Ventajas: todas las imágenes quedan del mismo tamaño o proporción y se puede reservar ese espacio con css; si el recorte se hace en el frontend, se sube al servidor una imagen más pequeña así que al mismo tiempo se ahorra tiempo de upload y recursos del servidor.
Desventajas: Requiere compromiso y tiempo del usuario; la interfaz para recortar la imagen puede ser compleja o requerir librerías específicas de manipulación de imágenes.

1.10 Permitir que el backend haga crop y resize automáticamente de la imagen para adaptarla a la proporción esperada

Ventaja: es práctico para el usuario y luego se puede setear por css el mismo espacio para todas las imágenes. Desventajas: consume recursos de proceso y disco del servidor; puede recortar partes de la foto que arruinen lo que se quería mostrar.

En conclusión

En el diseño de UX/UI suele ni siquiera considerarse que los elementos en pantalla tienen tiempos de carga y que el usuario querrá leer los textos o interactuar con los elementos accionables inmediatamente. Muchas veces esto queda a consideración únicamente del programador.

Colegas: valoremos el tiempo y la paciencia del usuario y esforcémonos al máximo por no mover elementos en pantalla mientras el usuario está tratando de interactuar con ellos o leerlos.

Cuando esto se ha planeado y funciona correctamente parece tan natural e inevitable que pasa desapercibido. Querido usuario: si los elementos en pantalla están quietos es porque he puesto atención al detalle.

La quietud de los elementos accionables y de los textos en pantalla es amor ❤️.

Continua pronto en la parte 2 con consideraciones para tipografías, estrategia de render blocking, el contenido dinámico y las notificaciones.

Photo by Ran Berkovich on Unsplash

ASCII art/Pixel art in js

Patricio Pitaluga — Sat, 27 Jun 2020 19:48:36 +0000

Let's do something fun and pretty (yet professionally useless). We can make ASCII art in the browser. ASCII art is pretty much forgotten since high definition UI are common, but it's a beautiful and nostalgic form of art. The browser might not be the the natural environment for ASCII art but nonetheless it presents some advantages, like being able to create effects using the same css and js that we use in our web projects.

How can js parse an image pixel by pixel?

Hardly.

Let's do it

The server

Since loading images in a canvas element and CORS policy don't get along very well, we need to create a node server to deliver the html and the image that we are using. This is the simplest one that I was able to create:

server.js

const fs = require('fs');
require('http').createServer((req, res) => {
  if (req.url === '/')
    res.end(require('fs').readFileSync('./index.html', 'utf8'));
  if (req.url === '/sample.jpg') {
    res.writeHead(200, { 'Content-Type': 'image/jpg' });
    res.end(fs.readFileSync('./sample.jpg'), 'binary');
  }
}).listen(3000, () => console.log('Listening port 3000'));

The frontend

In an empty index.html file, we'll have the script that creates canvas element and get the 2d context of it.

<html>
<head>
</head>
<body>
<script>
const theCanvas = document.createElement('canvas');
const theContext = theCanvas.getContext('2d');
</script>
</body>
</html>

But what is a context and why do we need one? Doesn't really matter and you can find official explanation somewhere else to not understand it anyway. We'll use one.

Then we need to load an image in a img element and load it in the canvas using the context that we created.

const theImg = new Image;
theImg.onload = () => {
  theContext.drawImage(theImg, 0, 0, theImg.width, theImg.height, 0, 0, theImg.width, theImg.height);
};
theImg.src = 'sample.jpg';

For this example I'm using a very small sample.jpg less than 100px file. It might get a really slow for big images so always use small ones. Also since we will generate characters for every pixel it won't fit in the screen if we were using a big image. You can also use the settings in the drawImage function to resize the image. Check out the documentation.

Now let's read every pixel in the image and get the rgb value of it:

for (let y = 0; y < theImg.height; y++) {
  for (let x = 0; x < theImg.width; x++) {
    const theImageData = theContext.getImageData(x, y, 1, 1);
    const theRGBvalues = theImageData.data;
    console.log('Red ' + theRGBvalues[0]);
    console.log('Green ' + theRGBvalues[1]);
    console.log('Blue ' + theRGBvalues[2]);
  }
}

For every "row" of pixels in the y axis we're getting the color information of every "column" of pixels in the x axis. That's why this process is slow.

let's set the style of our "DOM pixels" in the head of the document.

<style>
.a-row-of-pixels {
  display: flex;
}
.a-pixel {
  flex: 0 0 auto;
  height: 20px;
  width: 20px;
}
</style>

Instead of logging it we're going to draw them in "div pixels". Since updating the DOM that many times can get a little slow I'm concatenating the full pixel matrix in a single string and throw it to the DOM at the end.

let myPixelArt = '';
// Start the first row of "pixels".
myPixelArt += '<div class="a-row-of-pixels">';
for (let y = 0; y < theImg.height; y++) {
  for (let x = 0; x < theImg.width; x++) {
    const theImageData = theContext.getImageData(x, y, 1, 1);
    const theRGBvalues = theImageData.data;

    // Concatenate every column of "pixels" in this row, one after the other.
    myPixelArt += `<div class="a-pixel" style="background: rgb(${ theRGBvalues[0] }, ${ theRGBvalues[1] }, ${ theRGBvalues[2] })"></div>`;

  }
  // Concatenate the end of the row and the beginning of a new one.   
  myPixelArt += '</div><div class="a-row-of-pixels">';
}
// The last row will be empty but who cares, let's close it.
myPixelArt += '</div>';
document.body.innerHTML = myPixelArt;

To start the node server, we'll run 'node server' and enter to http://localhost:3000 in the browser to see the magic happens.

Every square is actually a div element with the color as background in the style attribute.

Having fun with characters

Now that We're in control of divs like pixels. How can we turn this into ASCII art?

Back in the day when interfaces lacked graphics and colors, ~~nerds~~ people used characters to represent different nuances of brightness in the screen according to how "bright" (how many pixels where white) were in every monospace characters. For example " .,:ilwW" is a palette of ASCII characters ordered from the darkest to the brightest. What if we want to use characters instead of colors in our pixelart generator.

First we need to set the font style for the document:

  body {
    background: black;
    color: white;
    font-family: monospace;
    font-size: 18px;
  }
  .a-pixel {
    flex: 0 0 auto;
    height: 19px;
    line-height: 19px;
    width: 10px;
    text-align: center;
  }

I'm setting the cell height to almost twice the width because characters are rectangular. You can try different sizes and proportions to get different effects.

Lets define a variable with a set of characters from the darkest to the brightest before the pixel loop:

const brightnessChars = ' .:;+=xX$';

To get the brightness of the pixel we'll find the average of the sum of the red, green and blue values.

const howBrightThisPixelIs = (theRGBvalues[0] + theRGBvalues[1] + theRGBvalues[2]) / 3;

Instead of setting the background of the cell, we will replace it with the character mapping the brightness of the pixel in the brighnessChars string length.

myPixelArt += `<div class="a-pixel">${ brightnessChars.substr(Math.floor(howBrightThisPixelIs * brightnessChars.length / 255), 1) }</div>`;

The result will look something like this:

You can try different sets of character palettes. E.g:

const brightnessChars = ' .`^",:;Il!i><~+_-?][}{1)(|tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$';

const brightnessChars = ' ░▒▓█';

Create your own and have fun.

Taking advantage of css and js

For the cover image of this post I experimented with setting a fixed text and changing the font-size and color for every character.

First, before the loop, I set the text that I want to be repeated along the image and a numeric variable to increment the position:

const theText = 'THIS IS THE TEXT';
let positionInText = 0;

Then, inside the loop, I'll get the letter in the position and increment the counter until it gets to the end of the phrase, then reset it to start again.

const theLetter = theText.substr(positionInText, 1);
positionInText++;
if (positionInText === theText.length) positionInText = 0;

I also defined an array with the font sizes that I want to allow.

  const fontSizes = ['12px', '13px', '14px', '15px', '18px', '20px', '22px'];

In every character I'm mapping the brigtness to the length of fontSizes array and I'm setting the color of the corresponding pixel.

myPixelArt += `<div
  class="a-pixel"
  style="
          color: rgb(${ theRGBvalues[0] }, ${ theRGBvalues[1] }, ${ theRGBvalues[2] });
          font-size: ${ fontSizes[Math.floor(howBrightThisPixelIs * fontSizes.length / 255)] };
        ">${ theLetter }</div>`;

You can experiment with other css effects like rotation, border-radius, opacity, even 3d rotations and animations. Poetry, lyrics, random texts, movie scripts. You can also try allowing some interactivity to the user. Webcam real time ascii art? What about using P5? Let me know if you achieve something interesting.

The code that I used to create the cover image:

<html>
<head>
<meta charset="UTF-8"/>
<style>
  body {
    background: black;
    color: #fff;
    font-family: monospace;
    font-size: 18px;
    font-weight: bold;
  }
  .a-row-of-pixels {
    display: flex;
  }
  .a-pixel {
    flex: 0 0 auto;
    height: 19px;
    height: 10px;
    line-height: 19px;
    width: 10px;
    width: 10px;
    // transform: rotate(20deg);
    text-align: center;
  }
</style>
</head>
<body>
<script>
const theCanvas = document.createElement('canvas');
const theContext = theCanvas.getContext('2d');

const theImg = new Image;
theImg.crossOrigin = '';
theImg.onload = () => {
  theContext.drawImage(theImg, 0, 0, theImg.width, theImg.height, 0, 0, theImg.width, theImg.height);

  const theText = 'BEARSAREAWESOMEAREN\'TTHEY?';

  // const brightnessChars = ' .,:ilwW';
  // const brightnessChars = ' .`^",:;Il!i><~+_-?][}{1)(|tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$';
  const brightnessChars = ' .:;+=xX$';
  // const brightnessChars = ' ░▒▓█';
  // const brightnessChars = '  ░░▒▓▓███';
  const fontSizes = ['12px', '13px', '14px', '15px', '18px', '20px', '22px'];

  let myPixelArt = '';
  myPixelArt += '<div class="a-row-of-pixels">';
  let positionInText = 0;
  for (let y = 0; y < theImg.height; y += 1) {
    for (let x = 0; x < theImg.width; x++) {
      const theImageData = theContext.getImageData(x, y, 1, 1);
      const theRGBvalues = theImageData.data;
      const howBrightThisPixelIs = (theRGBvalues[0] + theRGBvalues[1] + theRGBvalues[2]) / 3; // the average

      const theLetter = theText.substr(positionInText, 1);
      positionInText++;
      if (positionInText === theText.length) positionInText = 0;
      myPixelArt += `<div
        class="a-pixel"
        style="
color: rgb(${ theRGBvalues[0] }, ${ theRGBvalues[1] }, ${ theRGBvalues[2] });
font-size: ${ fontSizes[Math.floor(howBrightThisPixelIs * fontSizes.length / 255)] };
        ">${ theLetter }</div>`;
      // myPixelArt += `<div class="a-pixel">${ brightnessChars.substr(Math.floor(howBrightThisPixelIs * brightnessChars.length / 255), 1) }</div>`;

      // myPixelArt += `<div class="a-pixel" style="background: rgb(${ theRGBvalues[0] }, ${ theRGBvalues[1] }, ${ theRGBvalues[2] })"></div>`;
    }
    myPixelArt += '</div><div class="a-row-of-pixels">';
  }
  myPixelArt += '</div>';
  document.body.innerHTML = myPixelArt;
};
theImg.src = '/sample.jpg';
</script>
</body>
</html>

Photo by Tom Radetzki on Unsplash