Notas de la interfaz n. ° 1

En este artículo, encontrará algunas pequeñas notas de la interfaz. A veces serán breves porque el tema se revela completamente en un par de oraciones y, a veces, porque el autor no tiene la experiencia y el conocimiento suficientes para revelarlos de manera más completa. Si te gusta, escribiré cada vez con más detalle, con enlaces e investigaciones.



La idea de escribir un artículo surgió al releer la correspondencia con un amigo, un líder de equipo, un front-end (¡Lyokha, hola!), Quien siempre comparte generosamente sus conocimientos, ideas y problemas conmigo.



Todo lo que está escrito es la opinión personal de un pequeño grupo de personas y difícilmente pretende ser cierto. Empecemos.

Trate de no usar la transición: todos

Mucha gente lo sabe, pero recientemente me encontré con otra razón por la que debe tener mucho cuidado al usar el valor total con la propiedad de transición.



Imaginemos que tenemos un contenedor con una propiedad de transición:

.content{
  color: red;
  transition: 1s;
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Al pasar el mouse, el color cambia:

.content:hover {
  color: blue;
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Si envolvemos en este contenedor, por ejemplo, svg, cuya propiedad de relleno será igual a currentColor , luego al pasar el mouse , la luz de la imagen cambiará. Pero, ¿qué pasa si especificamos dicha propiedad en algún lugar para todos los svg?

svg {
  transition: 1s;
  fill: currentColor;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Al pasar el mouse, el relleno cambiará no 1 segundo, sino aproximadamente 2, porque primero se aplicará la transición para cambiar el color, y según tengo entendido, por cada cambio de color del exterior, se activará un cambio en el interior, pero si alguien tiene una explicación más precisa, estaré encantado de leerla.



Solución: especifique explícitamente la transición: relleno para svg (si especifica el color , la situación no cambiará, de ahí la salida anterior).

svg {
  transition: fill 1.5s;
  fill: currentColor;
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Mantener las proporciones de los bloques

Siempre pensé que todo el mundo, cualquier desarrollador de front-end experimentado, conoce el antiguo truco que le permite mantener las proporciones del bloque, resultó que no todos.



La propiedad de relleno , si se especifica como un porcentaje, se basa exactamente en el ancho, lo que nos permite hacer este truco:

.image-container {
  height: 0;
  position: relative;
  /*       */
  padding-top: calc(100% * 9 / 16 );
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Ahora podemos poner una imagen en este contenedor, cuya altura será calculada por el ancho del contenedor.

.img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

relación de aspecto

No hace mucho, se agregó la propiedad de relación de aspecto, que le permite hacer todo lo que ve desde arriba en una línea.

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

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Las principales, en mi opinión, las diferencias y conveniencia de esta propiedad son que:

1. No necesitamos un contenedor
2. Si se especifica ancho O alto, el segundo valor se calculará en función del valor de la relación de aspecto
3. Si se proporciona ancho Y alto, la propiedad se ignora

La compatibilidad con la relación de aspecto aún está lejos del apreciado 95%, así que utilícelo con precaución.

No posponga la paginación para más tarde

Suena, por supuesto, extraño, pero como persona que hizo un frontal de varios productos desde cero, diré que siempre existe la tentación de "puntuar" en la paginación de listas, opciones en selectores, tablas, etc. Decidí por mí mismo que nunca dejaría esto en un segundo plano, porque en cuanto los usuarios comienzan a generar datos, las páginas comienzan a ralentizarse, la búsqueda de las causas de los frenos, por supuesto, no es demasiado difícil, pero cuando se trata de buscar, la situación requiere una solución inmediata y esto son nervios, código de mierda y pérdida de credibilidad con el departamento de desarrollo.

Controlar la apariencia de los componentes a través de variables css

Las variables en CSS ya son amadas y respetadas por muchos, pero la experiencia de las entrevistas ha demostrado que pocas personas las usan, y aún menos personas conocen el verdadero poder de la herencia. La mayor parte permaneció en la parte de la documentación sobre la que hablan : root (y esto es solo una pseudoclase, un alias para la raíz del árbol, más a menudo para html).



Entonces, imagine que tenemos un componente de botón con estilos de ámbito (en el ejemplo, uso Vue.js), que tiene los siguientes estilos:

.button {
  color: var(--text-color, #000);
  background-color: var(--bg-color, #444)
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Y luego podemos simplemente definir la clase .dark en el componente principal:

.dark {
    --text-color: #fff;
    --bg-color: #333
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Y pase esta clase al componente de botón:

<my-button class="dark"/>

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Y ahora un control de estilo tan simple sin anular los estilos CSS en el padre está disponible usando un poderoso mecanismo de herencia de variables.

Errores divertidos e insoportables

Quiero resumir este artículo con una historia sobre pequeños pero desagradables errores de primera línea que mis colegas y yo detectamos.

Insertar imágenes en el editor wysiwyg

En los editores de texto en el navegador (usamos pluma), es posible insertar una imagen de otro sitio usando ctrl + v. No pensamos en eso, que todos usan el mecanismo implementado para insertar imágenes, pero los usuarios son esos usuarios. Un sitio, especialmente sensible al préstamo de imágenes, determinaba de dónde provenía la solicitud y, si el dominio no era suyo, daba un banner publicitario de su propio producto, lo cual es cierto, por supuesto, pero nos sorprendió. Entonces, si está desarrollando / usando wysiwyg, observe qué y dónde insertar =)

Vue SSR + Cloudflare = <3

El problema del que me habló el camarada antes.



Solo cuando va a una página que fue generada y proporcionada por SSR y la navegación de SPA posterior, todas las solicitudes a la API se duplicaron. Durante mucho tiempo no pudieron entender cuál era el problema. Después de una investigación cuidadosa, resultó que el pie de página tiene un campo estándar con el correo electrónico de la empresa, pero cloudflare ofusca el correo electrónico (para protegerlo contra los raspadores). Cuando Vue en el servidor recopila un árbol en js, luego obtiene otro árbol en el cliente (con correo no coincidente), la rehidratación de Vue se rompió y se bloqueó, creando una nueva instancia de vue, pero sin eliminar la anterior incompleta. Como resultado, bajo ciertas circunstancias, 2 instancias de Vue se estaban ejecutando en la página al mismo tiempo.



Eso es todo. Comentarios, deseos, duras críticas: estaré encantado de leer todo esto y sacar conclusiones.