Nova página inicial do TypeScript - Gustavo Kennedy Renkel

Foi anunciado o lançamento da nova página do TypeScript.

Em agosto passado, foi implementado um re-design e re-arquitetura de toda a presença digital do TypeScript. Os objetivos eram fornecer novas bases para documentar o TypeScript, reorganizar a arquitetura de informações e ter um design coeso. A transição para o novo site visando a evolução sobre a revolução com todos os URIs anteriores ainda contabilizada porque “URIs legais não mudam“, e a maioria das decisões sobre como descrever TypeScript permanecendo razoavelmente consistente com a linguagem durante a última década.

Bem-vindo ao novo Site do TypeScript

Os objetivos da página inicial é introduzir o TypeScript e, em seguida, explicar a proposta de valor do uso do idioma. Esse objetivo não mudou, mas entender como os novos usuários se sentiam sobre a antiga página inicial, por isso, foram feitas uma série de testes de usuários que resultou em um conjunto de conclusões:

  • Não houve uma chamada óbvia para a ação no topo do site;
  • Você não podia digitalizar o texto, porque era tudo o mesmo peso visual;
  • Foi utilizado muito texto conceitual;
  • Não havia exemplos suficientes de código no site;
  • As pessoas não ligam nosso uso de cores ao seu significado pretendido;
  • O rodapé de todo o local era uma distração;
  • As pessoas não conectaram que o TypeScript alimentava a maioria das ferramentas JavaScript;
  • Havia partes do local onde as pessoas sentiam que sabiam o suficiente para tomar uma decisão, mas não sabiam para onde ir a seguir.

Muitas dessas mudanças exigiriam uma exploração substancial do design, mas que um olhar para a chamada à ação, para a manchete poderia ser aplicada ao design existente e, em seguida, migrar para o novo site.

Foram feitos testes de A/B para ver se havia preferência por novos usuários na página inicial, mas os resultados subiram mais ou menos 50/50. Isso levou a um projeto onde uma única chamada para a ação na manchete – mas em vez de levá-lo a qualquer um dos sites, fornecendo um espaço explicando ambas as opções potenciais:

Enquanto esse trabalho estava em andamento, foram criados quatro conceitos diferentes de design com diferentes estéticas de design e abordagens para quanta densidade de informação precisava.

Alguns dos destaques no novo design da página inicial:

  • Reduzindo a quantidade do texto na página. Cada seção agora tem informações-chave em negrito. Isso torna a página digitalizável, e o contraste adicionou uma pitada de cor ao próximo passo.
  • Limitando a paleta de cores ao azul do logotipo TypeScript (uma mudança de tonalidade do amarelo de JavaScript) e tons de branco e preto.
  • Criando um ponto de partida no meio do caminho, se você acha que sabe o suficiente sobre o TypeScript, provavelmente há 3 lugares que você deseja ir: para a documentação, o playground para experimentar no seu navegador ou aprender a executá-lo em seu computador.
  • Substituindo o conteúdo do rodapé por ponto de partida no final da página por os mesmos links, mas projeto ajustado para caber no rodapé, removendo links de distração para iniciantes.
  • A cópia começa focada em torno da experiência do desenvolvedor em usar o TypeScript e, em seguida, transições para lhe dar uma compreensão adicional de que tipo de primitivos estão no TypeScript e como eles se convertem em JavaScript

Uma das seções de destaque é a abordagem para mostrar a migração de uma única função JavaScript para uma função TypeScript. O código começa com pouca ferramenta inline e um corpo de função incorreto (ele levanta uma exceção devido a um erro de digitação) onde é mostrado que apenas adicionar ao topo levanta erros úteis instantaneamente. Se você tiver o JavaScript ativado, isso será alternado à medida que você rola, para que ele troque as novas amostras de código com anotações contextuais.// @ts-check

Como todas as amostras de código na nova página inicial, foi utilizado a biblioteca Shiki Twoslash para fornecer informações apoiadas por compiladores dentro de cada amostra de código.

Assim como na página inicial anterior, a versão revisada da página inicial do TypeScript passa por auditorias regulares de acessibilidade, funciona com JavaScript desativado e pode ser navegada inteiramente pelo teclado.

Para enviar bugs e feedback, acesse o site TypeScript- Site repo.

Fonte: Publicado por Orta Therox.