aguarde...

6 de dezembro de 2019

Destaques do Chrome Dev Summit 2019

Destaques do Chrome Dev Summit 2019

Estou no Chrome Dev Summit há alguns anos ( 2016 e 2018 ) e sempre gosto de fazer este artigo de resumo, destacando o que eu pensava serem as idéias e projetos mais interessantes da conferência. Então, vamos entrar nisso!

O HTML está (finalmente) recebendo alguns 💕

Parece que o design e a funcionalidade de praticamente todos os elementos de controle permaneceram os mesmos desde o início do navegador. Isso é verdade mesmo que a maneira como usamos os navegadores tenha mudado muito, por exemplo, com a mudança para dispositivos móveis. Bem, não mais! Na conversa, o HTML não está pronto , Nicole e Greg discutiram algumas atualizações que serão introduzidas no Chrome em breve.

Elementos de formulário redesenhados

Vários elementos do formulário estão finalmente recebendo uma atualização visual! Não apenas os elementos estão sendo projetados para parecerem mais modernos, mas eles estão sendo projetados com acessibilidade e mobilidade em mente. O selecionador de data, por exemplo, agora permitirá destinos de toque maiores ao selecionar valores.

Extensibilidade dos elementos do formulário

Os elementos do formulário também estão ficando mais flexíveis! Um exemplo disso é o elemento Muitos de nós acabamos usando componentes de seleção personalizados porque queremos fazer algo tão simples quanto adicionar um ícone a uma opção ou algo tão complexo quanto permitir que os usuários pesquisem opções. Nas versões futuras do Chrome, tudo isso será possível com o próprio elemento nativo !

Novos elementos?

Embora isso seja mais uma melhoria para um futuro mais distante, a equipe do Chrome quer adicionar elementos à web que ainda não existem. Elementos como uma visualização de tabela semelhante a um UITableView no iOS ou um elemento de chave seletora estão no pipeline.

CSS também está melhorando!

O CSS também está recebendo alguns refinamentos muito necessários. Em sua palestra sobre o estilo da web da próxima geração , Una e Adam falaram sobre 12 novos recursos que estão chegando ao CSS. Embora houvesse muitos recursos brilhantes como o Houdini mencionado, o que me deixou realmente empolgado foram os refinamentos que nos permitirão escrever CSS de maneira mais simples e eficaz.

:is()seletor

:is()seletor nos permite agrupar vários seletores iguais. Isso é melhor explicado com um exemplo.

Normalmente, se queremos aplicar o mesmo estilo a vários elementos que compartilham uma parte do seletor, ainda precisamos escrever o seletor inteiro a cada vez.

body.theme--light button,
body.theme--light a,
body.theme--light p,
body.theme--light h1 { 
    /* ... */ 
}

Com :is(), podemos agrupar as partes dos seletores que são diferentes.

body.theme--light :is(button, a, p, h1) { 
    /* ... */ 
}

Incrível né ?!

Propriedades lógicas

Propriedades lógicas são uma mudança do CSS tendencioso para idiomas da esquerda para a direita, como o inglês, para uma abordagem mais agnóstica. Em vez de pensar no modelo de bloco como superior, direito, inferior, esquerdo, ele está mudando para início do bloco, fim da linha, fim do bloco, início da linha.

Destaques do Chrome Dev Summit 2019

Crédito: Una Kravets

Isso pode ser um pouco difícil de entender desde a primeira vez, mas depois que você pega o jeito, percebe por que faz mais sentido. Muitas vezes, quando queremos uma margem ou um preenchimento à esquerda, o que realmente queremos é uma margem / preenchimento no início do bloco embutido. Com essas propriedades lógicas, podemos aplicar esses tipos de estilos que se adaptarão com base no idioma do usuário. Por vezes, quando esquerda realmente significa esquerda, as propriedades direcionais ainda estão lá.

A web está chegando para nativos

Por meio do novo Projeto Fugu , a equipe do Chromium tenta agressivamente preencher a lacuna entre os recursos de aplicativos da Web e nativos. Houve duas palestras na conferência que realmente mergulharam nas novas APIs que estão chegando à web.

Em O que há de novo na inscrição e na entrada , Eiji falou sobre a nova API do SMS Receiver, que permitirá que os navegadores acessem as mensagens de texto recebidas no dispositivo para ajudar a preencher automaticamente durante o processo de autenticação.

Ele também falou sobre a API de autenticação da Web, que permitirá que os navegadores acessem mecanismos de credenciais locais, como o FaceID. Usando o que é definitivamente o nome de método mais longo de todos os tempos, podemos verificar se um desses mecanismos de credencial está disponível:

PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable()
    .then((available) => { 
        // Proceed with authentication...
    });

Para colmatar a lacuna de aplicativos nativos , Sam discutiu várias outras APIs que chegarão à Web em breve, incluindo:

  • API de compartilhamento da Web
  • API de destino do compartilhamento da Web
  • API do seletor de contatos
  • API do sistema de arquivos nativo

Na área de sandbox, também testemunhei algumas demos surpreendentes de APIs como WebXR, Web Bluetooth e Web NFC.

Aprimoramento progressivo através de “carregamento adaptável”

Estou sempre interessado no tópico de aprimoramento progressivo e em como podemos servir melhor as experiências apropriadas com base nas capacidades do usuário. Addy Osmani introduziu um conceito que ele chamou de ” Carregamento Adaptável “, que é a prática de adaptar a experiência para o usuário, dependendo dos recursos do dispositivo / rede / navegador.

Para criar essa experiência adaptativa, podemos aproveitar várias APIs do navegador que nos informam em que tipo de dispositivo / rede / navegador o usuário está atualmente.

Por exemplo, com a API de informações de rede, podemos determinar se o usuário está em uma rede 4G ou se a configuração de economia de dados está ativada.

const network = navigator.connection.effectiveType;
// => 4g

const isOnSaveData = navigator.connection.saveData;
// => true

Vale a pena notar que o suporte para esses recursos ainda não está amplamente disponível. Dito isto, eles ainda podem ser usados ​​para obter informações extras, sempre que disponíveis.

Posted in Blog
Write a comment