<h2 id="introdução"><a href="#introdu%C3%A7%C3%A3o" class="anchor">Introdução</a></h2>
<p>Fala pessoal, eu recentemente comecei uma <a href="https://www.youtube.com/watch?v=1dNNL95BsJE&#x26;list=PLlAbYrWSYTiOviR_zL01FMa-kWEMDIjeO">série de vídeos com dicas bem rápidas</a> lá no meu canal do YouTube, mas como eu também gosto de texto e também quero facilitar a busca seja pelo Google ou pelo YouTube, vou portar os vídeos para cá também. Espero que dê certo =)</p>
<h2 id="vídeo"><a href="#v%C3%ADdeo" class="anchor">Vídeo</a></h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/ZJpeMczm-s0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h2 id="blocos-bonitos"><a href="#blocos-bonitos" class="anchor">Blocos bonitos</a></h2>
<p><img src="/assets/img/raycast-untitled-2-.png" alt="Trecho de código numa interface atraente"></p>
<p>É possível que já tenha visto uma imagem bonita assim em um slide de uma apresentação ou num Tweet né? Existem alguns serviços que fazem isso e os que mais indico são:</p>
<ul>
<li><a href="https://ray.so/">Ray.so</a></li>
<li><a href="https://carbon.now.sh/">Carbon.sh</a></li>
</ul>
<h2 id="conclusão"><a href="#conclus%C3%A3o" class="anchor">Conclusão</a></h2>
<p>E aí, gostou da dica? Se curtiu, não deixa de se inscrever lá no <a href="https://www.youtube.com/WillianJustenCursos/">canal do YouTube</a> para essa e mais outras dicas.</p>


Já viu blocos de código bonitos no Twitter e sempre quis fazer? Chegou sua vez!

Criando imagens bonitas de código

## Introdução



Fala pessoal, eu recentemente comecei uma [série de vídeos com dicas bem rápidas](https://www.youtube.com/watch?v=1dNNL95BsJE&list=PLlAbYrWSYTiOviR_zL01FMa-kWEMDIjeO) lá no meu canal do YouTube, mas como eu também gosto de texto e também quero facilitar a busca seja pelo Google ou pelo YouTube, vou portar os vídeos para cá também. Espero que dê certo =)



## Vídeo



<iframe width="560" height="315" src="https://www.youtube.com/embed/eOMnHsVm6vE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>



## Utilizando o poder do Intl.NumberFormat()



Antigamente para fazer esse tipo de formatação nós precisávamos fazer algum método próprio ou cair em soluções como o [currency.js](https://currency.js.org/). Mas agora graças ao [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) nós conseguimos fazer isso de forma simples, somente utilizando o JS puro.

Vamos ver abaixo alguns exemplos na prática:

```javascript
// Digamos que a gente tenha o seguinte número
const money = 1234567.89;

// Para converter em Real ( retorna => R$ 1.234.567,89 )
console.log(new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(money));

// Para converter em Euros ( retorna => 1.234.567,89 € )
console.log(new Intl.NumberFormat('de-De', { style: 'currency', currency: 'EUR' }).format(money));

// Para converter em Yenes ( retorna => ￥1,234,567 )
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(money));
```



## Conclusão



E aí, gostou da dica? Se curtiu, não deixa de se inscrever lá no [canal do YouTube](https://www.youtube.com/WillianJustenCursos/) para essa e mais outras dicas.

Evite usar bibliotecas externas para coisas simples como formatar números em dinheiro.

Formatando número em dinheiro com JS puro

## Introdução

Fala pessoal, eu recentemente comecei uma [série de vídeos com dicas bem rápidas](https://www.youtube.com/watch?v=1dNNL95BsJE&list=PLlAbYrWSYTiOviR_zL01FMa-kWEMDIjeO) lá no meu canal do YouTube, mas como eu também gosto de texto e também quero facilitar a busca seja pelo Google ou pelo YouTube, vou portar os vídeos para cá também. Espero que dê certo =)

## Vídeo

<iframe width="560" height="315" src="https://www.youtube.com/embed/lRIgpW9MiVI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## Método mágico

Dentro da React Testing Library existe um método chamado [screen.logTestingPlaygroundURL()](https://testing-library.com/docs/queries/about/#screenlogtestingplaygroundurl) que ao rodar seu teste, ele gera uma url, onde você pode inspecionar o seu código e descobrir as melhores queries, além de ver tudo que está renderizado, podendo inclusive descobrir se existe algum bug ou algo inesperado. Super útil né?

## Conclusão

E aí, gostou da dica? Se curtiu, não deixa de se inscrever lá no [canal do YouTube](https://www.youtube.com/WillianJustenCursos/) para essa e mais outras dicas.



Como um método tão simples pode te ajudar a acelerar os seus testes e também descobrir erros escondidos.

Willian JustenSoftware Engineer

Introdução

Vídeo

Blocos bonitos

Conclusão