Nos últimos anos, vimos muitas mudanças no mundo das tecnologias da web. Em 2020, quero chamar sua atenção para duas principais tendências / objetivos que a comunidade da web possui: extensibilidade e compatibilidade.
Extensibilidade
Extensibilidade é quando você pode pegar a tecnologia e expandi-la para atender às suas necessidades. Por vários anos, usamos componentes em todos os lugares, tanto no desenvolvimento de aplicativos (componentes no React, Vue, Svelte) quanto no desenvolvimento do design (design do sistema).
No momento, estamos tentando tornar esses componentes mais exclusivos e convenientes de usar. A extensibilidade na Web nos permite usar a plataforma (navegadores, mecanismos html / css / js) para nossas próprias necessidades e experiências, é claro, para obter mais benefícios.
CSS Houdini
Graças ao CSS Houdini , os desenvolvedores podem expandir os recursos do CSS Object Model, alterar a maneira como os navegadores são exibidos e funcionam com estilos.
Isso significa que agora podemos fazer algo que simplesmente não era possível antes disso. Por exemplo, cantos oblíquos de um botão ou layout arredondado.
( link para a demonstração )
O Houdini permite estender o estilo com CSS e adicionar regras personalizadas ao CSS. Atualmente, Houdini inclui:
Usando essas APIs, o usuário pode usar a semântica no CSS (Typed Object Model), usando o Draw API do Paint como se estivesse na canvas e aplicar o resultado como uma borda (oi borda de gradiente) ou criar uma animação parametrizada em apenas uma linha de CSS.
.sparkles { background: paint(sparkles) }
Por exemplo, você pode levar as animações para um fluxo separado (Animation Worklet) e usar a API de layout para organizar elementos de maneira exclusiva sem usar regras como margem, preenchimento, esquerda, direita.
Em suma, Houdini é uma daquelas coisas que vale a pena prestar atenção neste ano.
Fontes Variáveis
As fontes variáveis são o futuro da tipografia da Web, que oferece várias opções para controlar a exibição de texto nas telas (tamanho, negrito, estilo). E tudo isso com um tamanho de arquivo relativamente pequeno. É hora de dizer adeus ao debate interminável sobre quantas fontes você precisa conectar e deixar seu conteúdo viver uma vida nova e bonita.
Você pode aprender mais sobre fontes variáveis neste artigo .
Propriedades personalizadas
As propriedades personalizadas nos permitem escrever CSS mais estruturado e ao mesmo tempo dinâmico. Não se trata apenas de variáveis, mas também da capacidade de alterar essas variáveis usando JS.
:root { --first-color: #488cff; --second-color: #ffff8c; } #firstParagraph { background-color: var(--first-color); color: var(--second-color); } #secondParagraph { background-color: var(--second-color); color: var(--first-color); } #container { --first-color: #48ff32; } #thirdParagraph { background-color: var(--first-color); color: var(--second-color); }
As propriedades personalizadas já são suportadas, assim como as fontes variáveis, e você não precisa usar nenhum processador pós / pré para elas. Essas "tecnologias" funcionam em diferentes navegadores e em diferentes sistemas. A partir daqui, passamos sem problemas à compatibilidade.
Compatibilidade
Por definição, a compatibilidade neste artigo é a capacidade das tecnologias serem intercambiáveis, dependendo da necessidade do usuário. No lado técnico, você pode dar um exemplo de quantas empresas concluíram ou até mesmo no processo de migração da pilha antiga para a nova. Por exemplo, Backbone -> React, e eles querem chegar a uma visão comum que não exigirá mais migrações tão grandes. Componentes e componentes da web, talvez o estado atual das coisas, que se adapte a muitos.
Componentes da Web
Os componentes da Web estão tentando resolver o problema de compatibilidade dos padrões da Web. A principal tarefa é fornecer um formulário unificado, que nem exigirá nenhuma estrutura ou biblioteca para criar componentes.
Cada componente da web é encapsulado e funciona em navegadores modernos sem nenhuma dependência. Essa tecnologia ainda está em desenvolvimento, mas espero que obtenha ainda mais novos recursos em 2020.
Propriedades lógicas
As propriedades lógicas nos permitem repensar o modelo que usamos para organizar elementos na página e o tornam mais amigável para diferentes idiomas e dispositivos com os quais os usuários acessam sites.
Por exemplo, em russo, que é lido da esquerda para a direita, representamos altura, largura, esquerda, direita, cima, baixo - bem, como imaginamos (sua tampa). Mas, por exemplo, em árabe, onde tudo é da direita para a esquerda, as coisas são um pouco diferentes. padding-left , não será mais o recuo no início do parágrafo, porque não será iniciado à esquerda.
Como exemplo de uma propriedade booleana, você pode usar padding-inline-start vez de padding-left . E, em seguida, o padding será instalado no lado com o qual as palavras geralmente são lidas no idioma escolhido pelo usuário. Se for russo, será usado o padding-left e, se for árabe, o padding-right .
Esses são canais de mídia que nos permitem aprender sobre as preferências do usuário. Por exemplo, um usuário gosta de um tema sombrio. Podemos descobrir isso usando o prefers-color-scheme :
.day { background: #eee; color: black; } .night { background: #333; color: white; } @media (prefers-color-scheme: dark) { .day.dark-scheme { background: #333; color: white; } .night.dark-scheme { background: black; color: #ddd; } } @media (prefers-color-scheme: light) { .day.light-scheme { background: white; color: #555; } .night.light-scheme { background: #eee; color: black; } } .day, .night { display: inline-block; padding: 1em; width: 7em; height: 2em; vertical-align: middle; }
Como sempre, a parte mais interessante e divertida não é suportada apenas no Edge e no IE.
Os meios de comunicação mais interessantes mostram:
prefere esquema de cores
prefere-contraste
prefere movimento reduzido
prefere transparência reduzida
Velocidade
Onde sem ele no novo 2020. Eu já mencionei casualmente o Animation Worklet, que permite que você retire alguma lógica de animação em um thread separado. Mas existem outras tecnologias que nos permitem acelerar a web e que estão prestes a ser amplamente usadas. Por exemplo, Web Assembly , um wrapper que permite escrever código de baixo nível, e não apenas em JS. O WebGL continua a melhorar e nos fornece um componente gráfico poderoso e rápido no navegador. Ao combinar essas duas tecnologias, você pode criar jogos incríveis que antes não podiam ser imaginados em um navegador.
A web está em constante e implacável evolução, talvez seja isso que a torna tão interessante. E quais tecnologias você acha que se tornarão a tendência de 2020?