A formatação de números no lado do cliente é uma tarefa importante, especialmente quando o senhor considera a quantidade de uso de APIs brutas que estão em jogo atualmente. O que também é importante é garantir que esses números sejam significativos para os usuários, independentemente de onde estejam no mundo, especialmente se o senhor for um site de comércio eletrônico.
Escrever código de internacionalização pode ser um pesadelo, mas, felizmente, o JavaScript nos fornece Intl.NumberFormatuma API para internacionalizar números como moedas e muito mais. Vamos dar uma olhada!
Alguns exemplos de Intl.NumberFormat incluem:
new Intl.NumberFormat().format(12345)
// 12,345
new Intl.NumberFormat('en-US', { maximumSignificantDigits: 4}).format(1.2345678)
// 1.235 (Notice the rounding)
new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'GBP' }).format(9002.20)
// £9,002.20
new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(9002.20)
// 9.002,20 €
new Intl.NumberFormat().formatToParts(12345.678)
/*
[
{ "type":"integer", "value":"12" },
{ "type":"group", "value":"," },
{ "type":"integer", "value":"345" },
{ "type":"decimal", "value":"." },
{ "type":"fraction", "value":"678" }
]
*/
Não se preocupe em escrever suas próprias funções de formatação de números no lado do cliente se os números que deseja apresentar forem formatos padrão – aproveite as incríveis APIs que o navegador oferece!
Gradientes CSS
Com CSS border-radiusNo artigo anterior, mostrei aos senhores como o CSS pode preencher a lacuna entre o design e o desenvolvimento, adicionando cantos arredondados aos elementos. Os gradientes CSS são outra etapa nessa direção. Agora que os gradientes CSS são compatíveis com o Internet Explorer 8+, Firefox, Safari e Chrome…
Criação de efeitos de paralaxe de rolagem com CSS
Introdução Há muito tempo, os sites com o chamado efeito “parallax” são muito populares… Caso o senhor não tenha ouvido falar desse efeito, ele basicamente inclui diferentes camadas de imagens que se movem em diferentes direções ou com diferentes velocidades. Isso leva a uma…
Demonstrações favoritas do CodePen IV de Chris Coyier
O senhor sabia que pode triplicar o coração das coisas no CodePen? Temos esse pequeno recurso não tão oculto desde sempre. O senhor pode clicar no botão de coração em qualquer Pen (ou Projeto, Coleção ou Publicação) no CodePen para mostrar ao criador um pouco de amor, mas pode clicar nele novamente…
