Esta é a segunda edição do Chrome Dev Insider, onde compartilhamos atualizações sobre as novidades da comunidade e do Chrome. Este é um novo episódio de histórias privilegiadas sobre como abordamos nosso trabalho e uma visão rápida de algumas das atualizações mais importantes nas quais você deve prestar atenção.
Meu nome é Rachel Andrew, sou líder de conteúdo do web.dev e do developer.chrome.com e faço parte da equipe de relações com desenvolvedores do Chrome. Trabalho com a Web há mais de 20 anos, com foco em padrões abertos da Web e em CSS, e faço parte do grupo de trabalho dos CSS.
Há dois meses, encerramos o Google I/O, em que compartilhamos algumas das atualizações mais importantes sobre como apoiamos os desenvolvedores a tornar a Web mais rápida e eficiente, mantendo as informações dos usuários seguras e particulares.
Uma das coisas que mais se destacou (e estamos felizes que a comunidade tenha percebido) é a enorme quantidade de trabalho que a equipe está fazendo para oferecer suporte a mais recursos de CSS e interface na Web. Nesta edição do Chrome Dev Insider, vamos mostrar os bastidores de quem está por trás desse trabalho, como trabalhamos para oferecer suporte aos desenvolvedores de CSS e interface e o que vem por aí. É por isso que estou animado em organizar esta edição do Insider.
Notícias
No primeiro Chrome Dev Insider, compartilhamos algumas atualizações sobre as iniciativas Compat 2021 e Interoperabilidade 2022 em que fornecedores de navegadores e agentes do ecossistema fizeram parcerias para oferecer à Web mais recursos com suporte em todos os navegadores. A iniciativa tem um grande foco no CSS porque a incompatibilidade de navegadores é um dos maiores desafios para os desenvolvedores de CSS.
Embora isso possa não ser novidade para a maioria, é empolgante ver o progresso que já fizemos em todos os navegadores.
No início do mês passado, vimos o Safari anunciar um lançamento bumper com o Safari 16.0 Beta que inclui recursos interessantes como Consultas de contêiner, subgrid e um Inspetor de flexbox. Os lançamentos recentes do Firefox e do Chrome incluíram vários recursos e correções incríveis. A cada mês, aborde os principais itens dos navegadores estáveis e Beta na minha série de postagens sobre novas plataformas da Web.
Informações importantes: suporte a desenvolvedores de IU e CSS
Como 2022 está sendo um ano cheio de novidades para os recursos do CSS, achamos que é uma boa hora para mostrar os bastidores. Conversei com Una Kravets, líder de DevRel de interface da Web e Devtools, e Nicole Sullivan, gerente de produto de IU da Web focada em APIs de CSS e HTML, para falar sobre a jornada do Chrome para oferecer suporte a desenvolvedores de UI.
Vamos começar com vocês. Conte um pouco mais sobre você.
Nicole:sou gerente de produto de interface da Web no Chrome. Meu foco são as novas APIs de CSS e HTML e os desenvolvedores e designers que criam a interface. Esse é um espaço empolgante, e algumas APIs muito importantes serão lançadas, como Consultas de contêiner, Escopo e, esperamos, ritmo vertical.
Una:lidero as equipes de interface da Web e DevRel do DevTools. Nosso foco é oferecer suporte aos engenheiros de IU na plataforma da Web e garantir que eles tenham as ferramentas necessárias para terem sucesso. Isso inclui APIs CSS e componentes HTML, além de recursos do DevTools, para conferir as mudanças ativas e o feedback.
O suporte do Chrome para desenvolvedores de interface do usuário se acelerou nos últimos anos. Por que você acha que demorou tanto para chegar aqui? Quais foram os maiores desafios?
Una: Precisávamos mostrar como esse trabalho era importante e por que ele deveria ser uma prioridade. Começamos com a pesquisa de DNA da MDN em 2019, que identificou a IU como alguns dos principais pontos fracos da plataforma. Desde então, continuamos usando dados como nosso guia por meio do MDN e de nossas próprias pesquisas internas de satisfação de desenvolvedores. O resultado de tudo isso é que conseguimos uma maior adesão da liderança e conseguimos priorizar o trabalho de engenharia em torno de alguns dos recursos de desenvolvedores mais solicitados no espaço de interface que também formam a maior parte do foco para iniciativas como Compat 2021 e Interoperabilidade 2022.
Nicole: além de conseguir o apoio da liderança, também foi preciso encontrar a maneira certa de levar essas APIs aos desenvolvedores. Quando entrei no Chrome, estraguei tudo em um projeto chamado APIs em camadas (ou LAPIs). LAPIs destinadas a dar aos desenvolvedores uma experiência de componentes drop-in. Ainda acho que esse foi um ótimo resultado para se tentar, mas cometemos muitos erros! Primeiro, nos concentramos nas notificações de aviso e na Lista virtual. Os avisos são quase impossíveis de tornar acessíveis, e uma lista virtual é um dos componentes mais difíceis de acertar. Nossas intenções eram boas, mas não ajudavam os desenvolvedores. Por isso, encerramos o projeto. É difícil aprender da forma mais difícil, mas todos os erros estão impulsionando o renascimento do CSS e do HTML que está acontecendo no momento.
Vamos falar um pouco mais sobre as LAPIs. O que aconteceu?
Nicole: para as LAPIs, sabíamos que a Web precisava de uma experiência de desenvolvedor de componentes com integração simples que se aproximasse da criação de uma interface nativa. E ficou claro que reinventar a roda estava atrapalhando os desenvolvedores. Não consigo contar o número de guias que criei na minha carreira! Dito isso, tentamos resolver isso enviando JavaScript pelo navegador, que era muito difícil. Ninguém havia enviado JavaScript no navegador antes, e não está claro como ele deve interagir com o código C++ que alimenta o mecanismo de renderização do navegador. Ouvimos outros fornecedores de navegadores (agradecimento, Mozilla!) e desistimos dessa abordagem. Assim, encontramos algo muito melhor com a interface aberta. Ao adotar o HTML e o CSS, chegamos a soluções flexíveis e declarativas. Por ser declarativo, é possível incorporar a acessibilidade de uma maneira que não seria tão fácil com JavaScript. Estou muito animado para o futuro. Estamos trabalhando para oferecer suporte a selectmenu, pop-up, tooltip, nav, accordion, guias, carrossel e alternância, que são realmente padrões essenciais de design de IU.
Então, aprendemos muito. E sei que há outras iniciativas nessa área, como o CSS Houdini. Qual é a história?
Una: Sim, CSS Houdini é outro lugar onde aprendemos com a comunidade. Existem muitos recursos úteis do Houdini (em inglês), mas muitos eram de nível baixo demais para receberem mais adoção e suporte. Percebemos que a implementação de APIs de baixo nível não necessariamente reduz o atrito para os desenvolvedores. Em vez disso, o foco em soluções e necessidades mais complexas ajudou a angariar suporte entre navegadores e os acessos necessários para avançar no ecossistema. Estamos acompanhando o progresso em https://ishoudinireadyyet.com/ (em inglês).
Falando no suporte entre navegadores, iniciativas como a Interop 2022 e a Open UI parecem estar entregando resultados positivos significativos para a comunidade. O que os desenvolvedores estão dizendo?
Una: Um dos principais pontos problemáticos que ouvimos de desenvolvedores é "fazer com que o design funcione da mesma forma em todos os navegadores". Resolvemos isso ao trabalhar com outros fornecedores de navegadores para priorizar e lançar alguns dos recursos mais solicitados aos desenvolvedores. O feedback que recebemos da comunidade foi extremamente positivo. Além disso, por meio de um grande esforço de rearquitetura chamado RenderingNG, é possível conseguir alguns desses recursos com muito melhor desempenho. Os desenvolvedores estão entusiasmados com o fato de que esses recursos há muito esperados há anos estão finalmente sendo desenvolvidos e disponíveis em vários navegadores.
Nicole: A empolgação na comunidade é evidente. Você pode vê-la no Twitter. :)
Trabalhar com o ecossistema provou ser fundamental para qualquer sucesso que tivemos ao tornar os desenvolvedores vida mais fácil. Sei que sua equipe tem feito muito trabalho lá. Você gostaria de compartilhar alguns detalhes?
Nicole: Primeiro, estou sempre admirado com os projetos que os desenvolvedores criam na Web. Desde as menores bibliotecas até as mais completas, os desenvolvedores estão criando coisas incríveis. É uma comunidade fantástica de criadores. Além disso, o Chrome está tomando uma série de etapas para se conectar a esses projetos.
Por exemplo, há alguns anos começamos a trabalhar com frameworks de JavaScript, como React e Angular. E metaframeworks, como Next, Nuxt e Gatsby. No ano passado, começamos a fazer o mesmo com ferramentas e frameworks de IU, como Sass, Bootstrap e Material. Espero que no próximo ano possamos colaborar com a GreenSock e outras ferramentas que tornam vida mais fácil. Acabei de ver a Cassie Evans do GreenSock falar na Smashing Conference e fiquei muito entusiasmado em trabalhar com as pessoas da área de animação.
Então, onde vemos a maior oportunidade para o ecossistema de interface da Web?
Una: Em termos de grandes oportunidades, sinto que estamos apenas conhecendo as possibilidades de experiências na Web personalizáveis. Novas APIs, como consultas de contêiner e recursos de mídia de preferência do usuário do CSS, estão redefinindo a forma como os desenvolvedores veem o design responsivo. Também estou animado com as experiências de design colaborativas que estão permitindo que desenvolvedores e designers trabalhem em harmonia com os usuários que visitam os sites.
Nicole, quais são as próximas etapas da sua equipe?
Nicole:Nem todas as explorações se transformam em itens transferíveis, mas há muitas coisas que me entusiasmam no momento:
Uma vez tocados na primeira coisa, estamos possibilitando o design responsivo e baseado em componentes. Ele inclui ferramentas para projetar sistemas de cores para que os designers possam responder às preferências do usuário, como o modo escuro. Por exemplo, o espaço de cores OKLCH mantém o brilho consistente em todos os tons. Os designers podem passar da escolha de cores para o design de relações entre as cores, sem acabar com paletas sujas.
Também estamos trabalhando em algumas das APIs mais solicitadas, como consultas de contêiner, camadas em cascata, seletor pai (:has), estilos com escopo e aninhamento. Os desenvolvedores precisam desses elementos para criar sistemas de design flexíveis e cheios de componentes reutilizáveis.
Animações com links para rolagem são outra área divertida. Gosto muito da demonstração do Steve Gardner. Ele tem uma rolagem suave e animações divertidas de avião acionadas na rolagem. Embora sejam divertidos, pode ser complicado acertar tudo isso, especialmente considerando a acessibilidade. Por isso, estamos fazendo testes com os usuários para conferir a acessibilidade do recurso.
O que mais me empolga são os controles integrados de IU da Web. Os desenvolvedores continuam criando o mesmo conjunto de guias várias vezes, acho que o navegador pode ajudar. Em Open UI, estamos trabalhando em componentes como selectmenu, pop-up, tooltip, guias, navegação, accordion e botão de alternância. Estamos analisando como seria incorporar a acessibilidade a essas primitivas de navegador para que a Web pudesse, com o tempo, se tornar acessível por padrão. Assim, os desenvolvedores podem se concentrar nos problemas mais complexos e variados, enquanto o navegador oferece suporte aos conceitos básicos, como a guia "Como fazer guias", Isso provavelmente precisa de uma postagem própria, então vou parar por aqui por enquanto.
Por fim, vamos continuar investindo na interoperabilidade entre os navegadores. Tem sido ótimo trabalhar com o pessoal da WebKit e da Gecko para dar consistência à experiência do desenvolvedor. Ouvimos os desenvolvedores dizerem que querem isso!
Ah, e se você ainda não conferiu, a API Shared Element Transitions da equipe da Uniforme Web vai mudar a forma como as pessoas projetam para a Web. Todas essas pequenas transições sutis que permitem que os designers orientem os designs no espaço físico serão não apenas possíveis, mas fáceis. Jake Archibald tem uma excelente demonstração.
Se os padrões correrem bem, poderemos até considerar o ritmo vertical este ano! Podemos criar com base no LayoutNG, o que desbloqueia muitos recursos.
Agradeço as duas. Tenho certeza de que toda a comunidade, como nós, está animada para ver o ritmo renovado de melhorias e recursos que chegam ao mundo da interface da Web. Ainda há muito para mergulhar, então por onde você diria que alguém deveria começar essa jornada?
Una: nossa sessão O que há de novo na plataforma da Web no Google I/O aborda os destaques de muitos dos recursos lançados este ano. Adam Argyle também escreveu um ótimo artigo sobre todos os destinos novos e futuros do CSS. Por enquanto, eu me concentraria nas versões estáveis e só ficaria ciente dos outros trabalhos que estão por vir. Sua incrível série Novo na plataforma da Web é excelente para isso. Assine a newsletter web.dev também para levar esse conteúdo aos desenvolvedores. caixa de entrada. Para os desenvolvedores que querem se envolver e ajudar com tudo isso, participar da interface aberta é uma das melhores formas de apoiar esse trabalho.
Principais atualizações futuras
Estamos mantendo nossa tradição para avisar você sobre uma mudança futura que você deve ter em mente ao criar suas experiências na Web.
Limitar o tempo máximo para cookies a 400 dias
- A atualização:quando os cookies forem definidos com um atributo
Expires/Max-Ageexplícito, o valor vai ser limitado para, no máximo, 400 dias no futuro. Antes, não havia limite, e os cookies podiam expirar vários milênios no futuro. O objetivo desse limite é encontrar um equilíbrio entre padrões de uso comuns e o respeito pela privacidade do usuário. Qualquer site visitado com mais frequência do que a cada 400 dias pode atualizar os cookies para garantir a continuidade do serviço, e os usuários podem ter certeza de que os cookies não permanecerão no navegador por milênios sem serem usados. - Cronograma estimado:frete no Chrome 104 (estável em 2 de agosto de 2022).
- CTA do desenvolvedor: talvez os desenvolvedores precisem atualizar os cookies proativamente com mais frequência do que antes quando os usuários acessam os sites. Caso contrário, os usuários poderão ser desconectados 400 dias após a definição inicial do cookie.
Espero que você tenha gostado de ler esta edição do Chrome Dev Insider. Se você perdeu, aqui está a primeira. Esperamos trazer mais novidades no próximo trimestre.
Até lá, dê sua opinião sobre esta edição do Chrome Dev Insider e o que podemos fazer para melhorá-la.
O que você achou desta edição do Chrome Dev Insider? Envie seu feedback.