Novidades do Chrome 95

Pete LePage

Veja o que é necessário saber:

Sou Pete LePage, trabalho e tiro de casa, vamos nos aprofundar e ver as novidades para desenvolvedores no Chrome 95.

Roteamento com URLPattern

Quase todos os apps da Web dependem do roteamento, seja por código em execução em um servidor que mapeia um caminho para arquivos em disco ou lógica em um app de página única; que atualiza o DOM quando o URL muda. O URLPattern é uma nova versão da Web de plataforma que padroniza a sintaxe do padrão de roteamento.

Ele se baseia em frameworks atuais, o que facilita a execução tarefas de roteamento comuns. Por exemplo, a correspondência com URLs completos ou um URL pathname e, em seguida, retorne informações sobre as correspondências do token e do grupo.

Caso você já conheça a sintaxe de roteamento usada no Express, Ruby on Rails, ou path-to-regexp, isso provavelmente parecerá familiar.

Para usá-lo, crie um novo URLPattern() e forneça os detalhes que você quer um padrão correspondente. Os padrões podem conter caracteres curinga, grupos de token nomeados grupos de expressões regulares e modificadores de grupo.

const p = new URLPattern({
  protocol: 'https',
  hostname: 'example.com',
  pathname: '/:folder/*/:fileName.jpg',
  search: '*',
  hash: '*',
});

Por exemplo, vamos analisar o URLPattern que pode ser usado pelo app Documentos Google. Vamos especificar o kind do arquivo, o arquivo ID e em qual mode ele será aberto. Em seguida, para usar o padrão, podemos chamar test() ou exec().

const url = 'https://docs.google.com/document/d/1s...5c/edit#heading=h.8...c';

const pattern = new URLPattern({
  pathname: '/:kind/d/:fileID/:mode',
  hash: '*',
});

const r = pattern.exec(url);
// {
//   "pathname": {"groups": {
//     "fileID": "1s...5c",
//     "kind": "document",
//     "mode": "edit"
//   }, ...},
//   "hash": {"groups": {"0":"heading=h.8...c"}, ...},
//   ...
// }

URLPattern é ativado por padrão no Chrome e no Edge versão 95 e posteriores. Para navegadores ou ambientes como Node, que ainda não têm suporte, use a biblioteca urlpattern-polyfill.

Confira o artigo de Jeff URLPattern traz o roteamento para a plataforma Web para mais detalhes.

Escolher cores com a API Eye Dropper

Quase todos os apps de design que eu já usei têm uma ferramenta de conta-gotas, o que torna fácil descobrir de que cor é uma coisa. Alguns navegadores têm conta-gotas integrado ao <input type=color>, mas não é o ideal.

A API de conta-gotas, implementada por alguns dos colegas da Microsoft, traz essa funcionalidade à Web. Para usá-lo, crie um novo EyeDropper() instância e chame open() nela.

const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
// result = {sRGBHex: '#160731'}

Como muitas outras APIs modernas da Web, ela funciona de forma assíncrona. Dessa forma, não bloqueie a linha de execução principal. Quando o usuário clica na cor desejada, será resolvido com a cor em que ele clicou.

Confira uma demonstração rápida code no Glitch.

Conferência de PWA

Você participou do PWA Summit mais cedo deste mês?

Foi ótimo ver tanta gente falando sobre PWAs e compartilhando seus experiências Se você perdeu, os vídeos estão no ar, então não deixe de conferir em PWASummit.org ou no Canal do PWA Summit no YouTube.

Teste de origem da redução do user agent

A redução do user agent é uma iniciativa para reduzir as cargas nas superfícies de impressão digital, reduzindo as informações somente para a marca do navegador e a versão mais relevante, sua área de trabalho ou a diferença entre dispositivos móveis e a plataforma em que ele é executado.

A partir do Chrome 95, haverá um novo teste de origem que permite que você ative o recebimento da string do UA reduzida agora. Isso permitirá descobrir e corrigir problemas antes que o UA reduzido se torne o padrão. no Chrome.

As mudanças vão ser aplicadas gradualmente ao longo de várias versões, mas tudo o que você precisa para preparar e testar está pronto agora.

Todos os detalhes e o cronograma estão no postagem sobre o teste de origem da redução do user agent developer.chrome.com.

E muito mais.

É claro que há muito mais.

Leitura adicional

Isso cobre apenas alguns dos principais destaques. Verifique os links abaixo para outras mudanças no Chrome 95.

Inscrever-se

Para ficar por dentro, inscreva-se no canal Chrome Developers no YouTube, e você receberá uma notificação por e-mail sempre que lançarmos um novo vídeo.

Meu nome é Pete LePage, e assim que o Chrome 96 for lançado, estarei aqui para contar as novidades do Chrome.