5 tendências de front-end a seguir em 2022

Há uma tonelada de artigos “Tendências de design a seguir” flutuando na web. Também apostamos em uma das tendências do Hot Web Design a seguir em 2022. O foco nesses artigos é muito compreensível – o design em si é o que o cliente e o visitante veem. O código por trás disso, no entanto, é irrelevante para a maioria dos usuários.

Mas, embora pareça irrelevante, é claro, é muito importante. Código limpo, abordagens otimizadas e novas técnicas são o que permitem que os desenvolvedores apresentem belos designs de uma maneira que pode ser dimensionada. Desempenho é o que os usuários querem, escalabilidade é o que o cliente quer.

Então, para dar o devido respeito a todos os desenvolvedores de front-end, bem como algumas ideias e insights para designers, compilamos esta lista de “Tendências de front-end a serem seguidas em 2022”.

1. Propriedades personalizadas de CSS

Isso é algo que os desenvolvedores desejam há anos, embora as propriedades CSS Custom (ou também conhecidas como CSS Variables) já existam há algum tempo. Por exemplo, o nível 1 do módulo W3C é de 2015. Mas, como acontece com qualquer nova tecnologia, demora um pouco para ganhar força. E acreditamos que, em 2021, veremos algumas das maiores taxas de adoção desde o seu início.

Por que é legal?

Propriedades personalizadas são, na verdade, variáveis ​​em CSS. Você pode dizer “Mas nós temos variáveis ​​no Sass, não temos?” Sim nós fazemos! Mas quando você compila Sass para CSS, você obtém, bem, CSS. E não há variáveis. Você não pode mais alterar o valor dessa variável. $primary: red é apenas vermelho.

No entanto, com propriedades personalizadas, você tem --primary: red . E então você pode redefinir --primary para azul, por exemplo. Diretamente no navegador, não é necessário compilar. Para saber mais sobre esses truques de CSS, confira este artigo: Qual é a diferença entre variáveis ​​CSS e variáveis ​​de pré-processador?

Um truque legal para usá-los é para temas personalizados. Você pode definir valores HSL por meio de variáveis ​​e permitir que os usuários alterem o matiz por meio de um controle deslizante no frontend. Conecte o valor do controle deslizante à variável CSS com JS e BAM com a funcionalidade “Definir seu esquema de cores”.

2. Fontes Variáveis

Fontes variáveis, assim como CSS Custom Properties já existem há algum tempo, mas ainda não são amplamente utilizadas. Um dos motivos seria o tempo que eles precisam para se tornarem mais populares, o número de tutoriais/guias e técnicas para serem adotados pelos desenvolvedores, bem como as próprias fontes necessárias. Você não pode simplesmente escolher qualquer fonte e aplicar alterações nela.

Um dos sites que você pode usar para navegar e experimentar é o Variable Fonts. Também serve como uma boa demonstração caso você esteja ouvindo este termo pela primeira vez. As fontes variáveis ​​permitem que você use um único arquivo e aplique propriedades como "font-weight" ou "font-style" com controle total sobre a quantidade de espessura ou inclinação…

Fonte

Por que é legal?

Bem, é claro que isso nos dá, os desenvolvedores (e designers), uma liberdade quase infinita para a aparência de uma fonte. Você já pensou que "font-weight: bold" é um pouco demais, mas "normal" é muito fino e você não tem nada no meio?

Os designers de fontes estão muito cientes disso e geralmente fornecem propriedades intermediárias. Eles os rotulam com números como 100 (leve) ou 900 (muito grosso) e qualquer coisa entre como 300, 400, 600, 700, etc. Mas talvez você precise de 750 E não está disponível? Agora, com fontes variáveis, você tem!

Há outro grande benefício para fontes variáveis. Como você provavelmente sabe, as fontes são grandes contribuintes para o tempo de carregamento . Tanto em termos de largura de banda quanto na renderização na tela. Uma solicitação bastante padrão pode ser assim:

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

Com toda essa bondade, você pode facilmente passar de 500kb. Com uma fonte variável, você só precisa de uma fonte e recebe todas as outras variações. Um pedido.

Você pode ler mais sobre Fontes variáveis: Introdução às fontes variáveis ​​na web.

3. Mais JavaScript!

Este é um título de “revirar os olhos”, mas é verdade! Os desenvolvedores front-end não são apenas “Desenvolvedores JS”, ​​mas também apenas desenvolvedores “CSS/HTML”. E este título é para eles.

JavaScript não é apenas uma tendência, embora dependendo de quem você pergunte, algumas conversas muito acaloradas podem ocorrer com comentários como “Sim, e hoje em dia, você não pode nem abrir um site se não tiver o JS ativado” ou “obrigado por carregando sliders de 5 MB e anúncios para sua página Sobre”.

Mas não importa quantos lados positivos e negativos tenha, seu uso cresce. Então, qual tecnologia/abordagem/ferramenta baseada em JS deve ser mais tendência?

• React/Vue como fachada para CMS como WordPress (headless).
• WebGL (Three.js) Gráficos 3D, simulações e interatividade.
• Conteúdo VR e AR.
• Fluxos de trabalho de compilação mais otimizados (webpack, gulp).
• APIs de navegador para mais controle/funcionalidade.

E para adicionar outro grande motivo para mergulhar mais fundo nisso – com apenas JS, você pode construir tecnicamente praticamente qualquer projeto de tamanho que desejar. Com apenas JS, você pode fazer um frontend reativo, conectá-lo a algum armazenamento de dados, utilizar as APIs do navegador para obter a melhor experiência do usuário e implantar seu projeto ao vivo. Quaisquer ajustes nas configurações podem ser feitos facilmente na configuração.

4. Estilo Baseado em Utilidade

O estilo baseado em utilitário se concentra na aplicação de estilos por meio de classes predefinidas. Isso é o que geralmente significa estilizar uma página da web. No entanto, aqui é um pouco diferente da abordagem padrão. Veja, você não estiliza um .card com sombra, plano de fundo, etc. Você estiliza um elemento HTML com .shadow e .bg-light e .br-5 (como border-radius).

É uma abordagem que funciona incrivelmente bem para desenvolvedores JS que precisam apenas produzir algo rapidamente e não estão preocupados com o CSS.

Isso não é novidade, mas a popularidade do Tailwind fez os desenvolvedores reconsiderarem a abordagem.

Fonte

Alguns podem argumentar que é basicamente “escrever CSS em HTML” onde você não pode realmente mudar um componente de CSS e atualizá-lo em todos os lugares. Tecnicamente, isso é verdade, mas quando seus componentes são arquivos JS em um aplicativo React/Vue, por exemplo, você os atualiza em um só lugar.

Talvez uma das desvantagens seja que você precisa aprender outro framework. Não é como se fosse apenas CSS, você precisa memorizar as propriedades, pois alguns elementos podem se parecer com isso:

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

Embora sempre haverá pessoas que amam (e odeiam), é uma ótima solução para muitos problemas. Além disso, você nunca saberá se funciona para você até que você realmente tente.

5. Novos recursos CSS

O uso de novos recursos CSS pode ser uma tendência tecnológica de front-end por si só. Embora não seja uma mudança em um recurso ou abordagem específica, ela desafia a maneira como codificamos até agora. Os prós? Resolve muitos problemas. O mal? Compatibilidade com versões anteriores.

Mas, graças ao progresso dos fornecedores de navegadores nos últimos dois anos (olhando para você, Microsoft), a maioria dos usuários em todo o mundo pode acessar a web com mais eficiência do que nunca.

Fonte

As propriedades personalizadas do CSS são um desses recursos, mas com cerca de 6 anos (e bastante importantes), ele tem sua própria seção.

Modos de escrita

Embora não seja usado com muita frequência, já que muitos desenvolvedores raramente precisam suportar os idiomas da direita para a esquerda, existem modos de escrita. Eles são obrigatórios para painéis/frameworks e sites multilíngues. Graças ao maior suporte de propriedades de escrita direcional como margin-inline-start, por exemplo, você não precisa sobrescrever margem esquerda para margem direita para RTL.

Subgrade CSS

Tínhamos flex, depois tivemos grades. Agora, temos grades dentro de grades . Subgrids são algo que os desenvolvedores esperavam estar disponíveis imediatamente quando o Grid foi suportado pela primeira vez. Bem, agora temos e é tão legal e útil quanto parece. Menção honrosa: Gaps Flexbox (já que também faz parte das grades). Faz o que diz.

:is

Um seletor abreviado que é melhor explicado com um trecho de código que tiramos do MDN:

 /* Seleciona qualquer parágrafo dentro de um cabeçalho, main
ou elemento de rodapé que está passando o mouse */
:is(header, main, footer) p:hover {
cor vermelha;
cursor: ponteiro;
}

 /* O acima é equivalente ao seguinte */
cabeçalho p: passar o mouse,
p principal: passar o mouse,
rodapé p:hover {
cor vermelha;
cursor: ponteiro;
}

Empacotando

Muita coisa mudou com as tendências de front-end ao longo dos anos, e as melhorias continuarão chegando. Se você deseja um site que forneça as conversões e a receita desejada, comece a trabalhar na codificação de front-end o mais rápido possível. Seus clientes devem poder usar sua página da Web com facilidade para que sejam incentivados a interagir com sua empresa.

Tente implementar as tendências de front-end que mencionamos acima e conte-nos como isso ajudou sua empresa a crescer.