5 tendencias de front-end a seguir en 2022

Hay un montón de artículos de "Tendencias de diseño a seguir" flotando en la web. También le damos un giro a uno en Hot Web Design Trends to Follow in 2022. El enfoque en tales artículos es muy comprensible: el diseño en sí es lo que ven tanto un cliente como un visitante. Sin embargo, el código detrás de él es irrelevante para la mayoría de los usuarios.

Pero aunque parezca irrelevante, por supuesto, es muy importante. El código limpio, los enfoques optimizados y las nuevas técnicas son lo que permite a los desarrolladores presentar hermosos diseños de una manera que se pueda escalar. El rendimiento es lo que quieren los usuarios, la escalabilidad es lo que quiere el cliente.

Entonces, para brindar el debido respeto a todos los desarrolladores front-end, así como algunas ideas e ideas para los diseñadores, hemos compilado esta lista de "Tendencias front-end a seguir en 2022".

1. Propiedades personalizadas de CSS

Esto es algo que los desarrolladores han querido durante años a pesar de que las propiedades personalizadas de CSS (o también conocidas como variables de CSS) existen desde hace un tiempo. Por ejemplo, el Nivel 1 del Módulo W3C es de 2015. Pero como con cualquier tecnología nueva, lleva un tiempo lograr la tracción. Y creemos que en 2021 veremos algunas de las mayores tasas de adopción desde su creación.

¿Por qué es genial?

Las propiedades personalizadas son, de hecho, variables en CSS. Podrías decir "Pero tenemos variables en Sass, ¿no es así?" ¡Sí! Pero cuando compilas Sass a CSS, obtienes, bueno, CSS. Y no hay variables. Ya no puede cambiar el valor de esa variable. $primary: red es solo rojo.

Sin embargo, con las propiedades personalizadas, tiene --primary: red . Y luego puede redefinir --primary a blue, por ejemplo. Directamente en el navegador, no es necesario compilar. Para saber más sobre estos trucos de CSS, consulte este artículo: ¿Cuál es la diferencia entre las variables de CSS y las variables de preprocesador?

Un buen truco para usarlos es para temas personalizados. Puede definir valores HSL a través de variables y luego permitir que los usuarios cambien el tono a través de un control deslizante en la interfaz. Conecte el valor del control deslizante a la variable CSS con JS y BAM con la funcionalidad "Establecer su combinación de colores".

2. Fuentes variables

Las fuentes variables, al igual que las propiedades personalizadas de CSS, existen desde hace un tiempo, pero aún no se usan mucho. Una razón sería el tiempo que necesitan para volverse más populares, la cantidad de tutoriales/guías y técnicas para que los desarrolladores las adopten, así como las propias fuentes necesarias. No puede elegir cualquier fuente y aplicarle cambios.

Uno de los sitios web que puede usar para navegar y experimentar es Fuentes variables. También sirve como una buena demostración en caso de que escuche este término por primera vez. Las fuentes variables le permiten usar un solo archivo y aplicar propiedades como "font-weight" o "font-style" con control total sobre la cantidad de grosor o inclinación...

Fuente

¿Por qué es genial?

Bueno, está claro que nos da a nosotros, los desarrolladores (y diseñadores), una libertad casi infinita en cuanto a la apariencia de una fuente. ¿Alguna vez has pensado que "font-weight: bold" es demasiado, pero "normal" es demasiado delgado y no tienes nada en el medio?

Los diseñadores de fuentes son muy conscientes de eso y, a menudo, proporcionan propiedades intermedias. Los etiquetan con números como 100 (ligero) o 900 (muy grueso) y cualquier valor intermedio como 300, 400, 600, 700, etc. Pero tal vez necesite 750 ¿Y no está disponible? Ahora, con fuentes variables, ¡usted lo hace!

Hay otro gran beneficio para las fuentes variables. Como probablemente sepa, las fuentes contribuyen en gran medida a los tiempos de carga . Tanto en términos de ancho de banda como de renderizado en pantalla. Una solicitud bastante estándar podría verse así:

• headings-font-normal.woff2
• headings-font-bold.woff2
• body-normal.woff2
• body-italic.woff2
• body-bold.woff2

Con toda esa bondad, puede superar fácilmente los 500 kb. Con una fuente variable, solo necesita una fuente y recibe todas las demás variaciones. Una solicitud.

Puede leer más sobre Fuentes variables: Introducción a las fuentes variables en la web.

3. ¡Más JavaScript!

Este es un título que hace “quemar los ojos”, ¡pero es verdad! Los desarrolladores front-end no son solo "desarrolladores de JS", sino también desarrolladores de "CSS/HTML". Y este título es para ellos.

JavaScript no es solo una tendencia, aunque dependiendo de a quién le preguntes, pueden surgir algunas conversaciones muy acaloradas con comentarios como "Sí, y hoy en día, ni siquiera puedes abrir un sitio web si no tienes JS habilitado" o "gracias por cargando controles deslizantes de 5 MB y anuncios para su página Acerca de”.

Pero por muchos lados positivos y negativos que tenga, su uso crece. Entonces, ¿qué tecnología/enfoque/herramienta basada en JS debería tener más tendencia?

• React/Vue como frente a CMS como WordPress (sin cabeza).
• WebGL (Three.js) Gráficos 3D, simulaciones e interactividad.
• Contenido de realidad virtual y realidad aumentada.
• Flujos de trabajo de compilación más optimizados (webpack, gulp).
• API de navegador para más control/funcionalidad.

Y para agregar otra gran razón para profundizar en él: con solo JS, técnicamente puede construir casi cualquier proyecto de tamaño que desee. Con solo JS, puede hacer una interfaz reactiva, conectarla a algún almacenamiento de datos, utilizar las API del navegador para obtener la mejor experiencia de usuario e implementar su proyecto en vivo. Cualquier ajuste a la configuración se puede hacer fácilmente en la configuración.

4. Estilo basado en utilidades

El estilo basado en utilidades se enfoca en aplicar estilos a través de clases predefinidas. Eso es lo que generalmente significa diseñar una página web. Sin embargo, aquí es un poco diferente al enfoque estándar. Mira, no diseñas una .card con sombra, fondo, etc. Diseñas un elemento HTML con .shadow y .bg-light y .br-5 (como border-radius).

Es un enfoque que funciona sorprendentemente bien para los desarrolladores de JS que solo necesitan generar algo rápidamente y no están preocupados por el CSS.

Esto no es nada nuevo, pero la popularidad de Tailwind ha hecho que los desarrolladores reconsideren el enfoque.

Fuente

Algunos podrían argumentar que es más o menos "escribir CSS en HTML" donde realmente no se puede cambiar un componente de CSS y actualizarlo en todas partes. Técnicamente, eso es cierto, pero cuando sus componentes son archivos JS en una aplicación React/Vue, por ejemplo, SÍ los actualiza en un solo lugar.

Tal vez una de las desventajas es que necesita aprender otro marco. No es como si fuera solo CSS, tienes que memorizar las propiedades ya que algunos elementos pueden verse así:

class="text-xl font-semibold text-white sm:text-2xl sm:leading-7 sm:text-black md:text-3xl"

Aunque siempre habrá gente que lo ame (y lo odie), es una gran solución a muchos problemas. Además, nunca sabrás si funciona para ti hasta que realmente lo pruebes.

5. Nuevas funciones de CSS

El uso de nuevas funciones de CSS puede ser una tendencia tecnológica de front-end en sí misma. Si bien no es un cambio en una característica o enfoque específico, desafía la forma en que hemos estado codificando hasta ahora. ¿Los profesionales? Resuelve muchos problemas. ¿El malo? Compatibilidad con versiones anteriores.

Pero gracias al progreso de los proveedores de navegadores en el último año o dos (mirándote a ti, Microsoft), la mayoría de los usuarios de todo el mundo pueden acceder a la web de manera más eficiente que nunca.

Fuente

Las propiedades personalizadas de CSS son una de estas características, pero al tener unos 6 años (y bastante importante), tiene su propia sección.

Modos de escritura

Si bien no se usa con demasiada frecuencia, ya que muchos desarrolladores rara vez necesitan admitir los idiomas de derecha a izquierda, existen modos de escritura. Son imprescindibles para paneles/marcos y sitios multilingües. Gracias al mayor soporte de propiedades de escritura direccional como margin-inline-start, por ejemplo, no tiene que sobrescribir margin-left a margin-right para RTL.

Subcuadrícula de CSS

Tuvimos flex, luego tuvimos rejillas. Ahora, tenemos grillas dentro de grillas . Las subcuadrículas son algo que los desarrolladores esperaban que estuviera disponible desde el primer momento cuando se admitió Grid por primera vez. Bueno, ahora lo tenemos y es tan genial y útil como parece. Mención de honor: brechas de Flexbox (ya que también es parte de las cuadrículas). Hace lo que dice.

:is

Un selector abreviado que se explica mejor con un fragmento de código que tomamos de MDN:

 /* Selecciona cualquier párrafo dentro de un encabezado, main
o elemento de pie de página que se está desplazando */
:is(encabezado, principal, pie de página) p:hover {
color rojo;
cursor: puntero;
}

 /* Lo anterior es equivalente a lo siguiente */
encabezado p: pasar el mouse,
p principal: flotar,
pie de página p: pasar el cursor {
color rojo;
cursor: puntero;
}

Terminando

Mucho ha cambiado con las tendencias de front-end a lo largo de los años, y las mejoras seguirán llegando. Si desea un sitio web que le brinde las conversiones y los ingresos que desea, debe comenzar a trabajar en su codificación de front-end tan pronto como ahora. Sus clientes deberían poder usar su página web con facilidad para que se animen a interactuar con su negocio.

Intente implementar las tendencias de front-end que hemos mencionado anteriormente y háganos saber cómo ha ayudado a que su negocio crezca.