Veja o que é necessário saber:
- O roteamento fica mais fácil com
URLPattern
incluído no navegador. - A API Eye Dropper fornece uma ferramenta integrada para selecionar cores.
- Há um novo teste de origem que permite ativar o recebimento da string do UA reduzida agora.
- Os vídeos do PWA Summit são todos on-line.
- E há muito mais.
Sou Pete LePage, trabalhando e gravando em casa. Vamos conferir as novidades para desenvolvedores no Chrome 95.
Roteamento com URLPattern
Quase todos os apps da Web dependem do roteamento de alguma forma, seja um código executado
em um servidor que mapeia um caminho para arquivos no disco ou uma lógica em um app de página única
que atualiza o DOM quando o URL é alterado. URLPattern
é uma nova API de plataforma da Web que padroniza a sintaxe do padrão de roteamento.
Ela se baseia em frameworks atuais, facilitando a execução de tarefas comuns de roteamento. Por exemplo, correspondência com URLs completos ou um nome de caminho do URL e, em seguida, retornar informações sobre o token e as correspondências do grupo.
Se você já conhece a sintaxe de roteamento usada no Express, no Ruby on Rails ou path-to-regexp, talvez isso seja familiar.
Para usá-lo, crie um novo URLPattern()
e forneça os detalhes aos quais você quer
uma correspondência de padrão. Os padrões podem conter caracteres curinga, grupos de tokens 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 pelos Documentos Google.
Vamos especificar o kind
do arquivo, o arquivo ID
e o mode
em que 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
está ativado por padrão no Chrome e no Edge 95 ou versões mais recentes.
Para navegadores ou ambientes como Node, que ainda não são compatíveis, use a biblioteca urlpattern-polyfill.
Confira o artigo de Jeff URLPattern oferece roteamento para plataforma da Web para mais detalhes.
Como escolher cores com a API Eye Dropper
Quase todos os apps de design que já usei têm uma ferramenta de conta-gotas, que ajuda
a descobrir de qual cor é algo. Alguns navegadores têm um recurso
de conta-gotas integrado ao <input type=color>
, mas não é o ideal.
A API de conta-gotas, implementada por algumas pessoas da Microsoft, traz
essa funcionalidade para a Web. Para usá-lo, crie uma nova instância de EyeDropper()
e chame open()
nela.
const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
// result = {sRGBHex: '#160731'}
Como muitas outras APIs da Web modernas, ela funciona de forma assíncrona, para que não bloqueie a linha de execução principal. Quando o usuário clicar na cor que ele quer, isso será resolvido com a cor em que ele clicou.
Você pode testar uma demonstração rápida e conferir o código no Glitch.
PWA Summit
Você assistiu ao PWA Summit no início deste mês?
Foi ótimo ver tantas pessoas falando sobre PWAs e compartilhando suas experiências. Se você perdeu, os vídeos já estão disponíveis, então não deixe de conferir em PWASummit.org ou no canal PWA Summit do YouTube.
Teste de origem de redução de user agent
A redução do user agent é um esforço para reduzir as superfícies de impressão digital passiva, reduzindo as informações na string do user agent apenas à marca e à versão significativa do navegador, à distinção do computador ou do dispositivo móvel e à plataforma em que ele está sendo executado.
A partir do Chrome 95, há um novo teste de origem que permite ativar agora o recebimento da string do UA reduzida. Isso permitirá que você descubra e corrija problemas antes que o UA reduzido se torne o comportamento padrão no Chrome.
As mudanças serão aplicadas gradualmente em 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 na postagem Testes de origem de redução do user agent em developer.chrome.com.
E muito mais.
Claro, há muito mais.
- Se você está seguindo o trabalho da API Storage Foundation, há um novo teste de origem para identificadores de acesso.
- O WebAssembly agora oferece suporte ao processamento de exceções, que permite que o código interrompa o fluxo de controle quando uma exceção for gerada.
- O Chrome 100 será lançado no ano que vem. O que significa que é hora de garantir que seu código possa lidar com mais de dois dígitos.
Leia mais
Esses são apenas alguns dos principais destaques. Confira os links abaixo para ver outras mudanças no Chrome 95.
- Novidades no Chrome DevTools (95)
- Descontinuações e remoções do Chrome 95
- Atualizações do ChromeStatus.com para o Chrome 95
- Novidades do JavaScript no Chrome 95
- Lista de alterações do repositório de origem do Chromium
- Agenda de lançamentos do Chrome
Fazer inscrição
Para ficar por dentro, inscreva-se no canal do YouTube Chrome Developers para receber uma notificação por e-mail sempre que lançarmos um novo vídeo.
Sou Pete LePage e, assim que o Chrome 96 for lançado, estarei aqui para contar as novidades do Chrome.