Atualização Mensal de Desenvolvimento Web 11⁄2018: Design Just-In-Time e Fallbacks de Fonte Variável

Quanto o design afeta a percepção de nossos produtos e dos usuários que interagem com eles? Para mim, está ficando mais claro que o design faz toda a diferença e que unificar os designs a um modelo padrão como o Google Material Design Kit não funciona bem. Ao usá-lo, você obterá um design decente que funciona do ponto de vista técnico, é claro. Mas você não criará uma experiência única com isso, uma experiência que dure ou que alcance as pessoas em um nível pessoal.

Agora pense em quais sites você visita e se gosta de estar lá, lendo ou até mesmo contribuindo com conteúdo para o serviço. Na minha opinião, isso é algo que o Instagram consegue fazer muito bem. Um bom design se adapta ao propósito da sua empresa e se ajusta ao que os visitantes esperam, fazendo com que eles se sintam confortáveis ​​onde estão e permitindo que eles se conectem com o produto. As soluções padrão, no entanto, podem ser agradáveis ​​e convenientes, mas sempre terão aquela sensação anônima que impede que as pessoas realmente se importem com seu produto. Está em nossas mãos moldar uma experiência melhor.

Notícias

• Sim, o Firefox 63 está aqui, mas o que ele traz? Suporte a Web Components, incluindo elementos personalizados com extensões internas e Shadow DOM. o suporte de consulta de mídia prefers-reduced-motion também está disponível agora, as Ferramentas do Desenvolvedor obtiveram um editor de fontes para facilitar o jogo com a tipografia da Web, e o inspetor de acessibilidade é ativado por padrão. O elemento img agora suporta o atributo decoding que pode obter valores sync , async ou auto para indicar o tempo de decodificação preferido para o navegador. O Flexbox também recebeu algumas melhorias, agora suportando propriedades gap ( row-gap , column-gap ). E por último, mas não menos importante, a API de recursos de mídia, a API de área de transferência Async e a interface SecurityPolicyViolationEvent que nos permite enviar violações de CSP também foram adicionadas. Nossa, que lançamento!
• O React 16.6 foi lançado - isso não parece uma grande notícia, não é? Bem, esta pequena atualização traz React.lazy() , um método que você pode usar para fazer divisão de código envolvendo uma importação dinâmica em uma chamada para React.lazy() . Um grande passo para um melhor desempenho. Há também algumas outras novidades úteis na atualização.
• O último Safari Tech Preview 68 traz suporte para <input type="color"> e altera o comportamento padrão dos links que têm target="_blank" para obter o rel="noopener" como atributo implícito. Ele também inclui a nova consulta de mídia prefers-color-scheme que permite aos desenvolvedores adaptar sites às configurações de modo claro ou escuro do macOS.
• A partir de agora, o PageSpeed ​​Insights, provavelmente ainda a ferramenta de análise de desempenho mais usada pelo Google, agora é alimentado pelo projeto Lighthouse, que muitos de vocês já usaram adicionalmente. Uma boa iteração de sua ferramenta que a torna muito mais precisa do que antes.
  

Em geral

• Explore os caminhos de aprendizado estruturados para descobrir tudo o que você precisa saber sobre a criação para a Web moderna. web.dev é o novo recurso da equipe do Google Web para desenvolvedores.
• Não importa como você se sente sobre o Apple Maps (acho que a maioria de nós já experimentou momentos de frustração com ele), mas essa comparação sobre os dados de mapas que eles usaram até agora e os dados que eles coletam atualmente para seus mapas renovados é fascinante. Tenho certeza de que o aumento do nível de detalhes ajudará muitas pessoas ao redor do mundo. Imagine como os arquitetos paisagistas poderiam fazer uso disso ou como os socorristas poderiam lucrar com esse nível de detalhe após um terremoto, por exemplo.

HTML e SVG

• Andrea Giammarchi escreveu uma biblioteca polyfill para Custom Elements que nos permite estender elementos embutidos no Safari. Isso é super legal, pois nos permite estender elementos nativos com nossos próprios recursos personalizados - algo que já funciona no Chrome e no Firefox, e agora também há esse pequeno polyfill para outros navegadores.
• Os elementos personalizados ainda são muito novos e o suporte ao navegador varia. É por isso que este projeto html-parsed-element é útil, pois fornece uma classe de elemento personalizado base com um método parsedCallback confiável.

JavaScript

• Leonardo Maldonado compilou uma coleção de conceitos JavaScript que são muito úteis para os desenvolvedores. A lista inclui vídeos e artigos para que você possa escolher sua maneira preferida de aprender.
• Quando um vídeo não funciona mais em um site e você está usando Service Workers, o problema pode ser a solicitação Range. Phil Nash depurou esse problema estranho em sua página e explica como você pode fazer também.

IU/UX

• Como construir uma paleta de cores? Steve Schoger da RefactoringUI compartilha uma ótima abordagem que atende às necessidades da vida real.
• O artigo de Matthew Strom “Design Just-in-time” menciona uma solução para minimizar a desconexão entre o design do produto e a engenharia do produto. Trata-se de adotar o método Just-in-time para o design. Algo com o qual minha equipe atual estava muito empolgada e estou feliz em tentar.
• HolaBrief parece promissor. É uma ferramenta que melhora a forma como criamos briefings de design, mantendo todos na mesma página durante o processo.
• Modelos mentais são explicações de como vemos o mundo. Teresa Man escreveu sobre como podemos aplicar modelos mentais ao design de produtos e por que isso é importante.
• Shelby Rogers compartilha como podemos construir melhores páginas de erro 404.

Ferramentas

• O gerador de paleta de cores Palx permite inserir um valor hexadecimal básico e gerar uma paleta de cores completa com base nele.

Segurança

• Esta ferramenta Python elegante é um ótimo utilitário de detecção de XSS.
• Svetlin Nakov escreveu um livro sobre Criptografia Prática para Desenvolvedores que está disponível gratuitamente. Se você sempre quis entender ou saber mais sobre como as chaves privadas/públicas, hashing, cifras ou assinaturas funcionam, este é um ótimo lugar para começar.
• O Facebook alegou que revelaria quem paga por anúncios políticos. Agora a VICE pesquisou esse novo recurso e se apresentou como cada um dos atuais 100 senadores dos EUA para veicular anúncios 'pagos por eles'. Bastante assustador ver como uma falha de segurança que dá aos usuários mais poder conforme pretendido pode mudar a política mundial.

Privacidade

• Não gosto de links para artigos pagos e restritos, mas este me fez pensar e você não precisa da história completa para me seguir. Quando a Tesla anunciou que aumentaria a produção do modelo 3 para ²⁴ ⁄ ₇ , muitas pessoas queriam verificar isso, e uma empresa que ganha dinheiro fornecendo dados de geolocalização capturou dados de localização de smartphones dos trabalhadores nas fábricas da Tesla para confirmar se isso pode ser verdade. Outra história triste de como é fácil rastrear alguém sem consentimento, mesmo que isso seja mais um caso de vigilância em massa do que rastreamento individual.

Desempenho na Web

• Addy Osmani compartilha um estudo de caso de desempenho da Netflix para melhorar o tempo de interação do serviço de streaming. Isso inclui a mudança de React e outras bibliotecas para JavaScript simples, pré-busca de HTML, CSS e (React) JavaScript e o uso de React.js no lado do servidor. Muito interessante ver tantas abordagens não convencionais e seus benefícios. Mas lembre-se de que o que funciona para os outros não precisa ser a abordagem perfeita para o seu projeto, então tome isso mais como inspiração do que copiá-lo cegamente.
• Harry Roberts explica todos os detalhes importantes sobre CSS e desempenho de rede. Uma coleção abrangente que também fornece algumas dicas muito interessantes para quando você tem scripts async em seu código.
• Adoro o pequeno aplicativo ImageOptim para otimizar em lote minhas imagens para distribuição na web. Mas agora existe um aplicativo da web impressionante chamado “Squoosh” que permite otimizar imagens perfeitamente em seu navegador da web e, como bônus, você também pode redimensionar a imagem e escolher qual compactação usar, incluindo mozJPEG e WebP. Feito pela equipe do Google Chrome.

CSS

• Oliver Schondorfer mostra como podemos servir uma fonte variável para navegadores modernos enquanto fornecemos uma fonte da web de reserva para navegadores mais antigos. Isso é especialmente interessante, pois Oliver se aprofunda na otimização da fonte de fallback e ajustá-la via CSS para corresponder à fonte variável o mais próximo possível, caso ocorra uma troca de fonte durante o carregamento da página.
• Andy Clarke mostra o que é necessário para reprojetar um produto e um site para oferecer suporte aos modos claro e escuro que foram introduzidos em vários sistemas operacionais recentemente e em breve serão suportados por meio de consultas de mídia por vários navegadores.
• Embora background-clip não seja super novo, não tem sido muito útil devido à falta de suporte ao navegador. Mas, como mostra o Sime Vidas, o CSS Background Clip agora é amplamente suportado, nos dando grandes oportunidades para aprimorar o estilo do texto em nossos sites.

Vida de trabalho

• Stig Brautaset escreveu sobre por que ele quase não conseguiu entrar em seu trabalho como operador de sonar submarino devido a uma regra de contratação boba e como ele tirou o melhor proveito da situação e conseguiu. Uma lição valiosa que mostra que você não deve se ater muito a diretrizes e regras quando se trata de contratar pessoas, mas confie em seu instinto e ouça suas histórias.
• Em “Pessoas, não robôs: trazendo a humanidade de volta ao suporte ao cliente”, Kristin Aardsma compartilha por que é importante repensar como o suporte ao cliente funciona.
• Marcus Wermuth reflete sobre por que se tornar um gerente não é uma promoção, mas uma mudança de carreira.

Indo além…

• Neil Stevenson sobre Steve Jobs, criatividade e morte e porque esta é uma boa história para a vida. Embora copiar Steve Jobs provavelmente não seja uma boa ideia, Neil fornece alguns ângulos diferentes sobre como podemos querer trabalhar, o que fazer com nossas vidas e por que o propósito é importante para muitos de nós.
• Ryan Broderick reflete sobre o que fizemos ao inventar a internet. Ele conclui que todo esse radicalismo no mundo, essas estranhas visões políticas são todas devidas à invenção das mídias sociais, software de bate-papo e a (não tão sub) cultura de promover e abraçar todas as coisas ruins que acontecem em nossa sociedade. Lembre-se do 4chan, Reddit e serviços semelhantes, mas também do Facebook e outros? Eles contribuem e abraçam não apenas boas ideias, mas muitas vezes estúpidas ou até prejudiciais. “Foi assim que radicalizamos o mundo” é uma história triste de ler, mas bem escrita e com muitos pensamentos inspiradores sobre como moldamos a sociedade através da tecnologia.
• Sinto muito, este é outro link sobre o consumo de energia do Bitcoin, mas mostra que a mineração de Bitcoin por si só pode elevar as temperaturas globais acima do limite crítico (2°C) até 2033. É hora de abandonar esse tipo ineficiente de criptomoeda. Agora.
• O deserto é algo especial. E nosso planeta tem cada vez menos, como este artigo descreve. O mapa revela que muito poucos países têm muito deserto nos dias de hoje, dando a animais e espécies raras um lugar para viver, dando aos humanos uma maneira de explorar a natureza, relaxar e se aventurar.
• Definitivamente, vivemos em tempos emocionantes, mas fico triste quando leio que nos últimos quarenta anos, a população de animais selvagens diminuiu 60%. Essa é uma escala muito grande, e se isso continuar, o mundo será outro lugar quando eu for velho. Sim, quando eu for velho, muitos animais que conheci e vi na natureza não existirão mais até então, e a próxima geração de humanos não poderá vê-los a não ser em um museu. Não está totalmente claro quais são as razões, mas a mudança climática pode ser uma coisa, e a expansão cada vez maior de humanos em áreas de vida selvagem provavelmente também contribui muito para isso.