5 tendencias de front-end a seguir en 2021

Hay un montón de artículos sobre "Tendencias de diseño a seguir" que circulan por la web. También le damos un giro a uno en Tendencias de diseño web calientes a seguir en 2021. El enfoque en estos 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 casi irrelevante para la mayoría de los usuarios.

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

Por lo tanto, con el fin de brindar el debido respeto a todos los desarrolladores de front-end, así como algunas ideas e ideas a los diseñadores, hemos compilado esta lista de "Tendencias de Front-End a seguir en 2021".

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 CSS) han existido por un tiempo. Por ejemplo, el módulo de nivel 1 del W3C es de 2015. Pero, como ocurre con cualquier tecnología nueva, se necesita un tiempo para conseguir tracción. Y creemos que en 2021, veremos algunas de las tasas de adopción más altas desde su inicio.

¿Por qué es genial?

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

Las propiedades personalizadas son compatibles en todas partes excepto en Internet Explorer

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

Un buen truco para usarlos es la creación de 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 esquema de color".

2. Fuentes variables

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

Uno de los sitios web a los que puede acudir 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 completo sobre la cantidad de grosor o inclinación ...

Fuente: Introducción a las fuentes variables en la web

¿Por qué es genial?

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

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 cosa entre 300, 400, 600, 700, etc. Pero tal vez necesites 750 ¿Y no está disponible? Ahora, con fuentes variables, ¡lo hace!

Existe 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 pasar fácilmente de 500 kb. Con una fuente variable, solo necesita una fuente y recibirá 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 pone los ojos en blanco, ¡pero es verdad! Los desarrolladores front-end no son solo "Desarrolladores JS", sino también desarrolladores "CSS / HTML". Y este título es para ellos.

JavaScript no es solo una tendencia, aunque dependiendo de a quién le preguntes, pueden ocurrir 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 no importa cuántos lados positivos y negativos tenga, su uso crece. Entonces, ¿qué tecnología / enfoque / herramientas basadas en JS deberían tener más tendencia?

• React / Vue como frente a CMS como WordPress (sin cabeza)
• WebGL (Three.js) Gráficos 3D, simulaciones, interactividad
• Contenido de RV y RA
• Flujos de trabajo de compilación más optimizados (paquete web, gulp)
• API del navegador para mayor 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 realizar 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 le .card estilo a una .card con sombra, fondo, etc. Tú le .shadow estilo a 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 nuevo en absoluto, pero la popularidad de Tailwind ha hecho que los desarrolladores reconsideren el enfoque.

Página de inicio de Tailwind

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 un React / Vue aplicación, por ejemplo, a continuación, les haces actualizar en un solo lugar.

Quizás 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á personas que lo amen (y lo odien), es una gran solución para muchos problemas. Además, nunca sabrá si funciona para usted hasta que realmente lo pruebe.

5. Nuevas funciones CSS

El uso de nuevas funciones de CSS puede ser una tendencia en sí misma. Si bien no es un cambio a 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ándolo a usted, Microsoft), la mayoría de los usuarios de todo el mundo pueden acceder a la web de manera más eficiente que nunca.

CSS Shadow Parts como otra característica próxima

Las propiedades personalizadas de CSS son una de estas características, pero al tener alrededor de 5 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 cuadros de mando / 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 CSS

Tuvimos flex, luego tuvimos rejillas. Ahora, tenemos cuadrículas dentro de cuadrículas . Las subcuadrículas son algo que los desarrolladores esperaban que estuvieran disponibles de forma inmediata cuando se admitió Grid por primera vez. Bueno, ahora lo tenemos y es tan genial y útil como parece. Mención de honor: Flexbox gap (ya que también forma parte de las cuadrículas). Hace lo que dice. Lamentablemente, aún no está bien respaldado.

: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, principal
o elemento de pie de página que está flotando * /
: es (encabezado, principal, pie de página) p: hover {
color rojo;
cursor: puntero;
}

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