Atualização mensal de desenvolvimento da Web 9⁄2018: carregamento lento nativo e trabalho imaginário

Publicados: 2022-03-10
Resumo rápido ↬ A web está evoluindo em um ritmo tão rápido que pode ser difícil ficar por dentro das coisas. Para dar uma visão geral do que aconteceu no mundo dos desenvolvedores da web nas últimas semanas, Anselm mais uma vez compilou sua atualização mensal.

É um conceito interessante comparar JavaScript com CO2 e ainda assim muito válido. Alex Russel, que trabalha para a equipe do Chrome e tem muitos insights sobre o estado atual da web, diz que usar muito JavaScript ou usá-lo exclusivamente (sem aprimoramento progressivo/degradação graciosa) terá o mesmo efeito que muito CO2 para o ecossistema no planeta Terra — o ecossistema vai desmoronar. E assim como precisamos de uma certa quantidade de CO2 para viver, precisamos de JavaScript na web. É essa linha tênue que faz a diferença – a linha entre não muito e nada.

Eu sinto que com as APIs nativas do navegador que temos hoje em dia, temos uma oportunidade fantástica de construir ótimos serviços da web sem inchar muito e sem depender apenas de JavaScript. Podemos aprimorar elementos nativos com a API de elementos personalizados facilmente por meio de classes ES6, com tão pouco código que parece ridículo construir tudo isso sozinho em uma estrutura de terceiros. Coincidentemente, a equipe de engenharia do Github publicou um artigo sobre como eles abandonaram completamente o jQuery e o que eles agora usam: JavaScript nativo e código pequeno e enxuto que está aprimorando progressivamente sua plataforma. Menos código, melhor capacidade de manutenção e mais estabilidade.

Notícias

  • O Chrome 70 agora está em beta, trazendo a detecção de forma como um teste de origem que nos permite realizar leitura de código QR, detecção de rosto e reconhecimento de texto em imagens. A API de autenticação da Web também recebeu algumas atualizações e o suporte à política de referrerpolicy foi adicionado aos elementos <script> . Esta versão também irá descontinuar Custom Elements v0, HTML Imports e Shadow DOM v0.
  • Finalmente, com o Firefox 62, a Mozilla envia ::selection em vez de :-moz-selection . Eles também implementaram flat() e flatMap() para arrays JavaScript e os desenvolvedores obtiveram um novo Shape Path Editor.
  • O Chrome 69 está fora e nos traz CSS Scroll Snap Points, a propriedade CSS viewport-fit para telas recortadas como a do iPhone X e a API Web Locks, que permite que scripts executados em uma guia ou trabalhador adquiram de forma assíncrona um bloqueio, segure enquanto o trabalho é executado e, em seguida, solte-o. A atualização também vem com suporte a gradiente cônico CSS, toggleAttribute() (que é semelhante ao método classList.toggle() , mas para atributos) e flat() e flatMap() para arrays. Infelizmente, esta versão mudou a forma como o navegador exibe a URL e parece que as pessoas consideram um bug de segurança. Vamos ver como isso vai evoluir.
  • Com o Firefox 62 suportando fontes da web variáveis, finalmente temos suporte em todos os principais navegadores e podemos usá-lo amplamente agora para melhorar o desempenho, ser mais criativo com tipografia e reduzir drasticamente o tráfego de dados.
  • Manuel Rego Casasnovas escreveu sobre as mudanças recentes no CSS Grid Layout em percentagens e altura indefinida no navegador Chrome.
  • Qualquer um que não seja um especialista teria dificuldade em explicar como o rastreamento na internet realmente funciona. É por isso que o Firefox agora altera suas configurações padrão e impõe o bloqueio de rastreamento em seu navegador por padrão.
  • O PHP7.3 está chegando em breve com a nova sintaxe Heredoc e Nowdoc, vírgulas à direita em chamadas de função, is_countable() , array_key_first() , array_key_last() e aprimoramentos de hash de senha Argon2.
Mais depois do salto! Continue lendo abaixo ↓

Em geral

  • O “The 'Developer Experience' Bait-and-Switch” de Alex Russell é uma ótima peça que explica os ambientes tóxicos que atualmente construímos para a web e por que o JavaScript pode ser comparado ao CO2 - ambos são necessários em pequenas porções, mas se houver muito disso, colocará todo o ecossistema (a web) em risco. Um artigo pensativo que eu recomendo a todos aqui para ler, compartilhar e lembrar.
  • À medida que Alexa, Cortana, Siri e até bots de bate-papo de suporte ao cliente se tornam a norma, temos que começar a considerar não apenas a aparência do nosso conteúdo, mas também como ele pode soar. Podemos – e devemos – usar HTML e ARIA para tornar nosso conteúdo estruturado, sensato e, o mais importante, significativo.

Desempenho na Web

  • O próximo PostgreSQL 11 tem algumas melhorias de desempenho interessantes. Dimitri Fontaine compartilha a diferença que eles podem fazer.
  • Ben Schwarz compartilha novas abordagens para carga preguiçosa nativa para a web que podem se tornar realidade em breve.

Segurança

  • Nightwatch Cybersecurity publicou uma vulnerabilidade de segurança no Android que expõe informações sobre o dispositivo do usuário a todos os aplicativos executados nele. Isso parece incluir o nome da rede WiFi, BSSID, endereços IP locais, informações do servidor DNS e o endereço MAC – em suma, muitas informações privadas que permitem que as pessoas rastreiem dispositivos Android individuais. Infelizmente, todas as versões do sistema operacional Android, incluindo bifurcações (exceto para Android P/9, onde uma correção foi fornecida) parecem ser afetadas sem planos para corrigir versões mais antigas.

CSS

  • Chen Hui Jing explica como personalizar botões de opção sem comprometer sua acessibilidade.
  • CSS Shapes já tem bastante história. Trazidos para a web mais cedo por uma iniciativa da equipe da Adobe Web, os fornecedores de navegadores removeram as implementações em breve novamente e agora estão voltando lentamente com especificações e implementações iteradas e aprimoradas. Rachel Andrew compartilha como implementar formas CSS.
  • Sara Soueidan escreveu as razões pelas quais ela mudou de definir as cores CSS como HEX ou RGB para HSL e quais são os benefícios.
  • Com o crescimento da web, surgem novos recursos para acomodar melhor seus novos fatores de forma e casos de uso. Um recurso que me deixa empolgado é a propriedade color-adjust , proposta no CSS Color Module Level 4. É um reconhecimento de que a web continuará aparecendo em dispositivos com telas menos que estelares.
Harmonias de cores
Criar harmonias de cores torna-se fácil com o HSL. (Crédito da imagem)

HTML e SVG

  • Stefan Judis leu o que a documentação do Mozilla tem a dizer sobre elementos de input e descobriu algumas coisas interessantes que podem ser muito úteis para seu próximo projeto.

JavaScript

  • Nolan Lawson compara as diferentes maneiras de usar temporizadores em JavaScript e quando usá-los.
  • ky é um pequeno e elegante cliente HTTP baseado na API Fetch do navegador.
  • Ankur Anand escreveu um artigo sobre o terrível custo de desempenho de solicitações CORS em aplicativos de página única.
  • Adrian Roselli compartilha como podemos construir listas de links no final de uma página para estilos de impressão.
  • Babel 7 está fora. É mais rápido, tem mais opções e suporta JSX Fragments e TypeScript.
  • O redimensionamento automático de <textarea> s é uma maneira muito útil de melhorar a experiência do usuário para as pessoas que escrevem conteúdo para seu site ou serviço. Eu escrevi um post no blog sobre como redimensionar automaticamente elementos de formulário com uma classe ECMAScript 6 curta.

Acessibilidade

  • Ethan Marcotte reflete sobre o que significa acessibilidade e percebe que não se trata de tornar um site compatível com alguma tecnologia assistiva ou software, mas de torná-lo utilizável para todos que desejam acessá-lo, independentemente da tecnologia. Essa é uma grande diferença porque sua abordagem inclui pessoas que têm dificuldades para ler um site, embora usem o mesmo navegador e o mesmo laptop que você. Talvez eles estejam sob luz solar intensa, tenham dificuldades com textos pequenos ou se distraiam com cores brilhantes ou elementos animados.
  • Eric Bailey enfatiza a importância de testar manualmente a acessibilidade.
  • Scott O'Hara compartilha uma navegação breadcrumb usando aria-label para fornecer um nome acessível e aria-current para indicar o link ativo no momento.

Vida de trabalho

  • Ryan Singer contempla a dificuldade de planejar um projeto com 'trabalho imaginário' e por que é tão importante testar primeiro o quão difícil será integrar algo antes de planejá-lo no roteiro.
Trabalho Real x Trabalho Imaginário
Todos nós já estivemos lá antes: imaginar uma solução em sua cabeça e implementá-la são duas coisas completamente diferentes. (Crédito da imagem)

Indo além…

  • Adoro o conceito de rabiscar e, embora não o faça regularmente, sempre me fascina. Doodle Addicts é uma plataforma que coleta doodles de pessoas de todo o mundo. Uma bela galeria para se inspirar.
  • Jonny Brooks-Bartlett escreveu um artigo interessante sobre por que tantos cientistas de dados estão deixando seus empregos. O trabalho pode parecer bastante interessante e uma boa aposta nos dias de hoje, mas muitas vezes as expectativas não correspondem à realidade e as decisões políticas e éticas são extremamente difíceis.
  • Marco Lambertini explica como a tecnologia pode nos ajudar a salvar o planeta, mas mais do que tudo precisamos aprender a valorizar a natureza e seus recursos.
  • Uma discussão interessante foi levantada esta semana por um colaborador Open Source muito conhecido que tentou alterar a licença de um de seus projetos para impedir que empresas que apoiam a instituição US ICE usassem seu software. A mudança foi rapidamente revertida depois que foi revelado que não era legalmente aplicável. No entanto, todo o tópico (que surge com mais frequência ultimamente) mostra que mais e mais pessoas pensam sobre o impacto de seu trabalho. Eles não querem que seja usado para o mal, mas para o bem. E embora a ideia de fonte aberta e não restrita seja desejável, é apenas se as pessoas a usarem para apoiar os direitos humanos e melhorar vidas. Estou curioso sobre novas soluções que possam garantir isso; talvez veremos mais termos de serviço para projetos de código aberto em breve (o que seria legalmente vinculativo, mas pode impedir que projetos de código aberto gratuitos os usem).