Atualização mensal de desenvolvimento da Web 7⁄2018: acessibilidade prática, erros de design e controle de recursos

A web continua a me surpreender. Com toda a sua variedade e diferentes mudanças na plataforma, é difícil ver um padrão direto – se é que existe (apenas) um. Mas é maravilhoso ver o que está sendo alterado, quais recursos são adicionados à plataforma, quais são obsoletos e como os navegadores implementam cada vez mais tecnologia para proteger o usuário de ataques maliciosos a sites. É interessante ver que esses recursos de segurança hoje em dia estão recebendo tanta atenção quanto um recurso para desenvolvedores; isso mostra a importância da privacidade e segurança e como a web era instável e insegura no passado.

Mas o melhor de tudo isso é que mostra o quão importante é manter as coisas que as pessoas nos dão. Em vez de implementar nossas próprias soluções para tudo, geralmente é muito melhor reutilizar um sistema existente. Não só é mais seguro confiar, mas também menos trabalho e mais inclusivo estender um elemento DOM nativo com um elemento personalizado (em vez de escrever nosso próprio elemento personalizado do zero). Se pensarmos se devemos construir nossa própria versão do SSL ou usar um software existente para isso, por que construiríamos um elemento clicável baseado em nada em vez de alterar o comportamento de um elemento a ou button ? E por que verificaríamos a validação do host de recursos por conta própria, se o navegador já nos fornece uma API para isso? Os artigos desta semana são todos dedicados a esses tópicos.

Outra coisa que ficou na minha cabeça é o artigo de Andrea Giammarchi, “A Bloatless Web”, no qual ele descreve como nós cegamente usamos Babel como desenvolvedores quando escrevemos JavaScript para poder escrever ECMAScript moderno. Mas geralmente não percebemos que transpilar todo o nosso código moderno em navegadores modernos não é a maneira mais eficiente. Fico feliz que Andrea oferece algumas ideias sobre como podemos melhorar essa situação e melhorar o desempenho de nossos aplicativos da web. Não seria incrível servir apenas um terço do tamanho do pacote não transpilando mais o código para cada navegador?

Notícias

• O Isolamento de sites torna mais difícil para sites não confiáveis ​​acessar ou roubar informações de suas contas em outros sites. O Chrome 67 agora está sendo enviado com ele e o Cross-Origin Read Blocking (CORB) não será mais carregado, por exemplo, um arquivo JSON como imagem. Mas ainda mais, essas mudanças significam que o layout de página inteira não é mais garantido como síncrono. Esse novo recurso afeta você se você ler tamanhos calculados de um elemento em JavaScript ou usar ouvintes de eventos de unload . Certifique-se de saber sobre isso e verifique se seus sites ainda funcionam conforme o esperado.
• Até agora, sabemos um pouco sobre as Políticas de Segurança de Conteúdo — um recurso que permite aos desenvolvedores limitar a carga de determinados recursos por nomes de host. Mas os fornecedores de navegadores criaram algo novo agora: Política de recursos. Isso permite que os desenvolvedores da web habilitem, desabilitem ou modifiquem seletivamente o comportamento de certas APIs e recursos da web no navegador. É como o CSP, mas em vez de controlar a segurança, ele controla os recursos e Eric Bidelman escreveu uma introdução à Política de Recursos explicando tudo.
• A equipe do navegador Brave mostra seu mais recente recurso para proteger a privacidade de seus usuários: abas que se conectam através da rede Tor.

Genérico

• Anton Sten pergunta se os valores do setor de tecnologia estão quebrados? Analisando as estratégias de marketing da Apple, Microsoft, Google, Amazon, mas também de outras pequenas empresas e como podemos fazer um trabalho realmente intencional e manter nossos valores em vez de tratá-los como material de marketing que não precisamos respeitar ou seguir.
• Agora que o setor de tecnologia do mundo está transformando rapidamente todas as coisas do mundo em coisas digitais, muitos pediram mais ética em nosso campo. Isso é, em muitos casos, um objetivo bastante vago, então vamos aplicá-lo a uma parte do digital: desenvolvimento front-end. Como podemos ser mais éticos como desenvolvedores front-end, que tipo de coisas podemos fazer? Hide de Vries escreveu um artigo sobre isso.

Segurança

• Os dados do cliente da Ticketmaster foram comprometidos e, ao que parece, é devido a uma única linha de código personalizada que inclui um script de terceiros.

IU/UX

• Eugen Esanu mostra dez pequenos erros de design que ainda cometemos e o que podemos fazer para tornar nosso design mais fácil de usar.

Privacidade

• Este é um relatório interessante sobre como o Google permite que desenvolvedores de aplicativos externos leiam os e-mails do Google das pessoas quando eles concedem permissão durante a autorização do aplicativo. O problema é que não há como evitar isso facilmente e pode ter algum impacto se você usar o Gmail para sua empresa, pois pode afetar as políticas de privacidade e está sujeito ao GDPR.

Desempenho na Web

• Max Bock sobre como podemos construir componentes que reagem à velocidade real de conexão do dispositivo usando a API de informações de rede. E apesar de atualmente estar disponível apenas nos navegadores de Internet Chrome e Samsung, vale a pena experimentá-lo e talvez já servi-lo para esses usuários.
• De tempos em tempos, ainda podemos ler artigos mencionando a importância de otimizar seletores CSS para melhorar o desempenho. Isso se origina em uma pesquisa feita há vários anos, mas Ivan Curic pesquisou isso novamente e descobriu que não importa.

Acessibilidade

• A equipe de desenvolvedores da Microsoft compartilha uma lista de reprodução de vídeo sobre acessibilidade prática, incluindo como otimizar apresentações ou linguagem para inclusão ou como criar uma funcionalidade adequada de “pular navegação” em seu site.
• Sara Novak compartilha como ela conseguiu mostrar empatia ao experimentar ser daltônico para entender como outras pessoas experimentam o mundo de maneira diferente.
• As Ferramentas de Desenvolvedor do Firefox agora têm um modo Inspetor de Acessibilidade . Veja como ativá-lo e como usá-lo.

JavaScript

• Leon Revill nos mostra como podemos estender elementos DOM nativos existentes com Web Components. Isso é extremamente útil e útil, pois podemos não apenas economizar muito tempo usando modelos pré-construídos para elementos personalizados, mas também obter todas as otimizações e padrões (semântica, acessibilidade, funcionalidade do navegador) gratuitamente e ainda criar nosso próprio comportamento em cima disso. No mínimo, se pudéssemos usar elementos personalizados, mas essa é uma história diferente.
• Gerardo Rodriguez mostra como podemos facilmente deixar de otimizar sites para desempenho com Service Workers e a API Fetch e como isso pode resultar em uma exceção de cota nos navegadores. Felizmente, ele descobriu o motivo disso e, definindo os cabeçalhos CORS adequados, Gerardo finalmente resolveu o mistério das respostas opacas em cache único e nos diz como evitar os problemas.
• Filepond é um bom carregador de arquivos JavaScript de código aberto. Rik Schennink compartilha os desafios enfrentados para construí-lo.
• Andrea Giammarchi sobre o problema de empacotar JavaScript com Babel e por que transpilar código não é mais a melhor solução. Em vez disso, devemos pensar em como servir diferentes pacotes dependendo do suporte do navegador para diminuir o tamanho do pacote e melhorar o desempenho.
• Justin Fuller compartilha três ótimos novos recursos que chegarão ao JavaScript em breve que nos ajudarão a escrever um código mais fácil de entender, como encadeamento operacional, coalescência nula ou operador de pipeline.
• Addy Osmani e Mathias Bynens escreveram uma introdução sobre como podemos usar módulos JavaScript na web hoje.

CSS

• Uma série de artigos que aborda como podemos falsificar uma grade de posicionamento automático com lacunas no Internet Explorer.
• CSS Grid é bom, mas muitas vezes ouço que as pessoas não podem usá-lo porque o IE11 não o suporta bem. Mas isso não é exatamente verdade, pois o IE11 tem uma versão anterior do CSS Grid disponível que podemos facilmente transpilar com o autoprefixer. Daniel Tonon explica as diferenças do CSS Grid e quais recursos podemos e não podemos usar e continuaremos com ainda mais dicas.
• Para muitas pessoas, CSS Grid ainda é muito novo, e é muito capaz e nos ajuda a resolver muitos problemas ao criar layouts baseados em grade em CSS. Mas na versão atual, há algumas coisas que ainda não são possíveis. CSS Grid nível 2 nos trará subgrades e Rachel Andrew explica para que você precisa disso.
• CSS-in-JS é bom? É apenas ruim? Por que caímos constantemente na armadilha de discutir quando não há vencedores claros e como podemos fazer melhor reconhecendo a evolução e vendo as coisas no contexto.

Vida de trabalho

• Por que o conceito de paciência e o esforço para construir algo que dure deve ganhar mais atenção nos negócios. Alguns pensamentos que vieram à minha mente ao ler outro artigo e parece que muitas pessoas gostam da ideia por trás disso.
• Ethan Marcotte sobre como ele aborda a escolha de clientes e por que ele acha importante escolher apenas clientes que você possa apoiar eticamente. Mas isso também mostra como isso pode ser difícil às vezes, como mostram as recentes discussões sobre as cooperações de negócios da Microsoft com entidades legais.