Atualização Mensal de Desenvolvimento Web 6⁄2018: Complexidade, DNS sobre HTTPS e notificações push

Vemos complexidade em todos os cantos de um projeto web nos dias de hoje. Lemos vários artigos sobre como uma tecnologia específica se tornou complexa e discutimos isso repetidamente. Vindo de uma época em que subíamos sites via FTP e não tínhamos git nem nada comparável, agora vivendo em uma época em que temos um sistema de compilação, transpilers, frameworks, testes e um CI até para os projetos menores, isso é fácil de entender . Mas, por outro lado, o desenvolvimento web cresceu tanto nos últimos 15 anos que não podemos mais comparar hoje com o passado . E embora possa parecer que algumas coisas eram mais fáceis no passado, negligenciamos as vantagens e inúmeras possibilidades que temos hoje. Quando não escrevíamos testes naquela época, bem, simplesmente não tínhamos teste – o que significa que não havia uma maneira confiável de testar o sucesso. Quando não tínhamos processo de implantação, era fácil fazer upload de uma nova versão, mas também era fácil quebrar alguma coisa — e isso acontecia muito mais do que hoje, quando um sistema de Integração Contínua está em vigor.

Jeffrey Zeldman escreveu um artigo interessante sobre o assunto: “The Cult of Complex” descreve como nos perdemos em detalhes desnecessários e muitas vezes tentamos pensar demais nos problemas . Gosto do desafio de construir sistemas que não sejam muito complexos, mas que mostrem uma quantidade razoável de responsabilidade (no que diz respeito à ética, privacidade, segurança, ótima experiência do usuário e desempenho) e que funcionem de forma confiável (testes, implantações, disponibilidade e desempenho novamente). Acho que o problema de encontrar o equilíbrio certo não vai desaparecer tão cedo. A complexidade está em toda parte — só precisamos decidir se é uma complexidade útil ou se foi adicionada simplesmente porque era mais fácil ou porque estávamos superestimando o problema original.

Notícias

• A próxima versão Safari 12 foi revelada na WWDC da Apple. Aqui está o que há de novo: ícones em abas, senhas fortes, bem como um controle de gerador de senha através de atributos HTML, incluindo controle de autenticação de dois fatores, um visualizador de modelo 3D e AR, a API Fullscreen em iPads, font-display e, muito importante, Intelligent Tracking Prevention 2.0, que é mais restritivo do que nunca e pode ter um impacto significativo na funcionalidade dos sites existentes.
• A biblioteca de automação sem cabeça do Chrome, Puppeteer, já está disponível na versão 1.5. Ele traz contextos de navegador para isolar cookies e outros dados geralmente compartilhados entre páginas, e os Trabalhadores agora também podem ser usados ​​para interagir com os Trabalhadores da Web.
• O Google lançou o Lighthouse 3.0, a terceira versão principal de sua ferramenta de análise de desempenho, que apresenta uma nova interface de relatório, algumas alterações de pontuação, uma exportação de CSV e a medição do First Contentful Paint.
• O Chrome 67 está aqui, trazendo Progressive Web Apps para a área de trabalho, bem como suporte para a API de sensor genérico e estendendo a API de gerenciamento de credenciais para oferecer suporte a autenticadores U2F via USB.
• Vimos algumas mudanças nas interfaces de segurança dos navegadores nos últimos meses. Primeiro, eles enfatizaram sites que oferecem uma conexão segura (HTTPS). Então eles decidiram indicar sites inseguros, e agora o Chrome anunciou novas mudanças no outono que tornarão o HTTPS o padrão, marcando as páginas HTTP como “não seguras”.

Em geral

• Em “The Cult of the Complex”, Jeffrey Zeldman escreve sobre como muitas vezes parecemos esquecer que a simplicidade é a chave e o objetivo de tudo o que fazemos, o objetivo geral dos projetos e da vida. Ele explica por que é tão difícil de alcançar e por que é muito mais fácil — e tentador — cultivar sistemas complexos. Uma leitura muito boa e definitivamente uma peça que adicionarei à minha lista de 'evergreen'.
• Heydon Pickering compartilhou um artigo novo e muito interessante que nos ensina a construir um componente web corretamente: Desta vez ele explica como construir um módulo “Card” inclusivo e responsivo.

IU/UX

• Cool Backgrounds é um projeto paralelo legal de Moe Amaya. É um gerador online de fundos poligonais com gradientes que podem gerar muitas variantes e formas. Simplesmente lindo.

Ferramentas

• Ben Frain compartilha algumas técnicas úteis de edição de texto que estão disponíveis em quase todos os editores de código modernos.

Segurança

• À medida que os ataques de segurança via DNS ganham popularidade, o DNS sobre HTTPS se torna cada vez mais importante. Lin Clark explica a tecnologia com um desenho para facilitar a compreensão.
• O Windows Edge agora está visualizando o suporte para cookies same-site . O atributo para bloquear ainda mais os cookies já está disponível no Firefox e no Chrome, então o Safari é o único navegador importante que ainda precisa implementá-lo, mas acho que chegará às versões Tech Preview muito em breve.

Privacidade

• A ACLU descobriu que a Amazon agora se uniu oficialmente à aplicação da lei e fornece uma tecnologia de reconhecimento facial em massa que já é usada em cidades ao redor do mundo.

Desempenho na Web

• A KeyCDN pediu a 15 pessoas que sabem muito sobre desempenho na web para compartilhar seus melhores conselhos com os leitores. Agora eles compartilharam este artigo contendo muitas dicas úteis de desempenho para 2018, incluindo algumas palavras minhas.
• Stefan Judis descobriu que já podemos pré-carregar módulos ECMA Script no Chrome 66 adicionando um link rel="modulepreload" .

Acessibilidade

• É relativamente fácil construir um spinner de carregamento — para um aplicativo de página única durante o carregamento, por exemplo —, mas raramente pensamos em torná-lo acessível. Stuart Nelson agora explica como fazer isso.
• Paul Stanton compartilha quais ferramentas de acessibilidade devemos usar para obter os melhores resultados.

JavaScript

• O JavaScript ultimamente tem sido intimidado por pessoas que preferem Elm, Rust, TypeScript, Babel ou Dart. Mas JavaScript definitivamente não é pior, como Andrea Giammarchi explica com ótimos exemplos. Este artigo também é uma ótima leitura para todos que usam um desses outros idiomas, pois mostra algumas armadilhas que devemos estar cientes.
• Para muitos projetos, queremos usar análises ou outros scripts que coletam informações pessoais. Com o GDPR em vigor, isso ficou muito mais difícil. Yett é uma boa ferramenta JavaScript que permite bloquear a execução de tais recursos até que um usuário concorde com isso.
• Ryan Miller criou uma nova publicação chamada “The Frontendian”, e apresenta uma das melhores explicações e guias sobre CORS que encontrei até agora.
• O pessoal da Microsoft criou uma boa página de demonstração interativa para mostrar como as notificações por push da Web podem e devem ser. Se você ainda não se familiarizou com a tecnologia, é uma ótima cartilha de como tudo funciona e como construir uma interface que não perturbe os usuários.
• Filepond é uma biblioteca JavaScript para upload de arquivos. Parece ótimo e vem com muitos adaptadores para React, Vue, Angular e jQuery.
• O React 16.4 saiu e traz um recurso e tanto para a biblioteca: Pointer Events. Eles vão facilitar as interações dos usuários e já são solicitados há muito tempo.

CSS

• Oliver Schondorfer compartilha como começar com fontes variáveis ​​na web e como podemos estilizá-las com CSS. Um resumo bastante completo das coisas que você precisa considerar, bem como possíveis armadilhas.
• Com o próximo macOS Mojave suportando um 'modo escuro', o Safari começará a definir automaticamente a cor de fundo dos sites para uma cor preta se nenhuma background-color for definida explicitamente. Este é um ótimo lembrete de que os navegadores podem definir e alterar seus estilos padrão e que precisamos definir os padrões de nosso site com cuidado. Ainda espero que o 'modo escuro' seja exposto a um CSS Media Query para que possamos adicionar oficialmente suporte a ele.
• Rafaela Ferro compartilha como usar CSS Grid para criar uma galeria de fotos que não é apenas boa, mas realmente ótima. Este artigo tem as respostas para muitas perguntas que recebo regularmente ao falar sobre layout de grade.
• Marcin Wichary explica como podemos criar um tema escuro em pouco tempo com propriedades personalizadas CSS modernas.

Vida de trabalho

• Anton Sten escreveu sobre as implicações morais para nossos aplicativos. Uma explicação significativa por que os tempos de “agir rápido e quebrar as coisas” definitivamente acabaram, pois estamos lidando com Inteligência Artificial, redes sociais que afetam a vida das pessoas e questões de privacidade impostas pelo GDPR.
• O Basecamp agora tem um novo tipo de gráfico para exibir o status de um projeto: o chamado “gráfico de colinas” adiciona um contexto melhor do que uma simples barra de progresso jamais poderia fazer.
• Ben Werdmuller compartilha seus pensamentos sobre currículos e como eles sempre falham em refletir quem você é, o que você faz e por que você deve ser contratado.

Espero que tenham gostado desta atualização mensal. A próxima está marcada para o dia 13 de julho, então fique atento. Enquanto isso, se você gosta do que eu faço, considere me ajudar a financiar financeiramente a Lista de Leitura de Desenvolvimento Web.

Tenha um ótimo dia!

— Anselmo