Lista de leitura de desenvolvimento da Web nº 144: erros de CSP, depuração de JS e teste de falha

Toda semana é uma semana de aprendizado e esta semana me lembrei que as unidades de viewport não são boas de usar. Além disso, escolher o código de status HTTP correto pode ser difícil e pode nem ser suportado pela versão do Apache em execução no seu servidor. Também aprendi como o log de erros de JavaScript pode ser estendido para que você possa finalmente obter relatórios úteis e fáceis de ler.

Como se isso não bastasse, aprendi muito sobre acessibilidade e aprimoramento progressivo novamente e descobri um slidedeck sobre como você pode ignorar o CSP e por que os navegadores podem renderizar elementos com limites conhecidos e limitações de layout incrivelmente mais rápido do que desconhecido. Você está pronto? Agora é sua vez de aprender tudo isso também.

Leitura adicional no SmashingMag:

• Erros de design de aplicativos para iPhone: visuais exagerados
• Conto de um aplicativo top-10, parte 1: ideia e design
• Como ter sucesso com seu aplicativo móvel
• Os blocos de construção dos aplicativos da Web progressivos

Genérico

• Esses lindos fluxogramas ajudarão você a decidir com qual código de status HTTP adequado seu aplicativo deve responder.

Ferramentas e fluxos de trabalho

• WebPageTest é uma ótima ferramenta para testar seu site quanto a problemas de desempenho. No entanto, a ferramenta pode fazer muito mais do que você imagina. Você pode simular um único ponto de falha (por exemplo, um tempo limite de biblioteca de terceiros) com ele, logins de script para páginas autenticadas pelo usuário e integrá-lo ao seu CI ou executar sua própria instância. Dean Hume coletou alguns desses truques em seu artigo.
  

Segurança

• A Política de Segurança de Conteúdo [CSP] tem ótimos recursos, mas também traz seus próprios problemas e riscos. Michele Spagnuolo e Lukas Weichselbaum apresentam os problemas mais comuns, erros de implementação, alguns desvios e como tornar o CSP ótimo novamente em seu deck de slides.
  

Desempenho na Web

• O PerfTool do pessoal do devbridge é um ótimo pacote npm para exibir estatísticas sobre suas páginas da web, incluindo pontuação do Google PageSpeed ​​Insights, contagem de recursos, recomendações sobre como corrigir problemas de desempenho, erros de HTML e muito mais em uma página da web personalizada.

HTML e SVG

• Às vezes, os designers simplificam demais um formulário removendo os rótulos. O problema é que o mínimo nem sempre significa que é simples – o que certamente é o caso dos rótulos. Os rótulos, na verdade, são uma parte essencial do design de formulários fáceis de usar.

Acessibilidade

• Heydon Pickering está escrevendo um livro sobre “Padrões de Design Inclusivos” e você pode pré-encomendá-lo agora. Já consegui obter alguns insights e estou bastante impressionado com os diferentes ângulos de semântica, aprimoramento progressivo e acessibilidade no livro e posso recomendá-lo se você estiver interessado nesses tópicos.
• Heather Migliorisi escreveu um enorme compêndio sobre a criação de SVGs acessíveis que você definitivamente deveria ler se usar arquivos SVG em seus projetos (e quem não usa?).

JavaScript

• Daniel Reis publicou alguns truques práticos de console que ajudam você a depurar seus aplicativos com muito mais facilidade. E se você quiser ir mais longe, o logerr é uma biblioteca experimental auxiliar de erros que pode fornecer muitos insights.

CSS/Sass

• A composição do layout CSS costuma ser bastante lenta em navegadores devido ao comportamento desconhecido dos elementos. Agora, se você tem um elemento que, por exemplo, tem um overflow: hidden já definido e é opaco, você pode ajudar o navegador a renderizar muito mais rápido fornecendo uma informação de contenção CSS. Uma otimização semelhante ao will-change e provavelmente apenas uma coisa temporária que esperamos não precisar usar por muito tempo ou nada.
• Se você estiver usando vw ou outras unidades de viewport para dimensionamento de elementos, sempre tenha em mente que os elementos do tamanho da unidade de viewport não podem ser ampliados pelo usuário. Você pode tentar por conta própria com esta demonstração. Uma alternativa pode ser usar calc(1em + 0.25vw) ou cálculos semelhantes que não dependam inteiramente das unidades de viewport e, portanto, são escaláveis.
• O Firefox 49 chega na próxima semana e com ele, cores alphatransparent-hex de ⁶ ⁄ ₈ dígitos serão suportadas e, portanto, você deve verificar seus sites se tiver algum desses valores por acidente, pois eles serão avaliados de repente!

E com isso, vou fechar para esta semana. Se você gosta do que escrevo a cada semana, por favor, me apoie com uma doação ou compartilhe este recurso com outras pessoas. Você pode saber mais sobre os custos do projeto aqui. Está disponível via e-mail, RSS e online.