
## Introdução

Uma tradição que eu perdurei por muitos anos, mas acabei não fazendo em 2022, é falar um pouco sobre como foi meu ano. Eu sempre gostei de fazer isso, pois me ajuda a refletir sobre o que aconteceu e também a planejar o que eu quero para o próximo ano.

Se quiser ver minha evolução ao longo de tantos anos, ficam aqui os posts anteriores:

- [Meu ano de 2015](https://willianjusten.com.br/meu-ano-de-2015/)
- [Meu ano de 2016](https://willianjusten.com.br/meu-ano-de-2016/)
- [Meu ano de 2017](https://willianjusten.com.br/meu-ano-de-2017/)
- [Meu ano de 2018](https://willianjusten.com.br/meu-ano-de-2018/)
- [Meu ano de 2019](https://willianjusten.com.br/meu-ano-de-2019/)
- [Meu ano de 2020](https://willianjusten.com.br/meu-ano-de-2020/)
- [Meu ano de 2021](https://willianjusten.com.br/meu-ano-de-2020/)

E outra tradição que sempre faço, é falar sobre música em todos os posts, então seguem algumas bandas que ouvi bastante no ano:

- [Post Malone - Austin](https://open.spotify.com/album/1F9LY06gadScF4g3g3BrDC?si=t0tBCVupSfi49SH3CSKWMg), não é surpresa que eu escuto bastante, mas como ele lançou album novo, eu escutei ainda mais.
- [Trilha sonora do Spider-Man - Across the Spider-Verse](https://open.spotify.com/album/4ocB97o3gdrIYyIwYSSwVy?si=hqDjBTkkQY6vjoKC1MQw8Q)
- [Stromae](https://open.spotify.com/artist/5j4HeCoUlzhfWtjAfM1acR?si=CDQclAX9Qu64SSmLOoxW0Q) - como vai ver, eu estive na França, então escutei bastante Stromae, que é um cantor belga, mas que canta em francês.

## Blog

Esse ano eu escrevi um pouquinho mais, absolutamente nada técnico, mas bom, a galera hoje em dia nem lê mais nada técnico mesmo né? Então, eu escrevi sobre:

- [Valorize suas conquistas](https://willianjusten.com.br/valorize-suas-conquistas)
- [Feito é melhor que perfeito](https://willianjusten.com.br/feito-e-melhor-que-perfeito)
- [Está tudo bem não fazer nada](https://willianjusten.com.br/esta-tudo-bem-nao-fazer-nada)
- [Mude!](https://willianjusten.com.br/mude)
- [Burnout dura mais que você imagina!](https://willianjusten.com.br/burnout-e-o-tempo)

Foram posts bem pessoais e mais introspectivos, mas fiquei feliz que as pessoas chegaram a ler e gostaram. Até liberei novamente para ter comentários e tiveram alguns =)

## Canal do YouTube

Eu não postei absolutamente **nenhum vídeo** em 2023, meu ano foi cheio e eu também não tive muita vontade de gravar nada. Confesso que eu sempre gostei mais de escrever do que gravar, além de ter que ficar postando com frequência sempre foi um desafio para mim. Parabéns para galera que consegue, porque não é nada fácil.

Então minhas estátiscas do YouTube ficaram assim:

![Seu canal teve 423.560 visualizações nos últimos 365 dias](/assets/img/youtube-2023.png)

Aí uma métrica para quem tem interesse em ganhos, um canal sem absolutamente nenhum vídeo publicado no ano, mas com cerca de 423k views faz em torno de 586 dólares. Não é muito, mas também não é nada mal para um canal que não tem nada novo.

## Trabalho

Eu continuei trabalhando na [Appcues](https://appcues.com/mobile) e fui promovido para Staff Engineer, o que foi bem legal. Também cheguei a ganhar um prêmio um pouco antes sobre "Take pride in your work".

![Prêmio de Take pride in your work](/assets/img/premio.jpeg)

Apesar de ter sido inesperado ganhar o prêmio, fiquei bem feliz em ser reconhecido, pois eu realmente amo bastante o produto em que trabalho (Mobile) e me orgulho bastante do que construimos. Quando eu entrei, não existia esse produto e eu ajudei a criar do zero, posso falar "quando eu cheguei era tudo mato" =P

## Ida para França e acidente!

Eu sempre fui apaixonado por Francês, não sei explicar o porquê, mas sempre gostei muito e queria melhorar meus aprendizados na língua. Para isso eu resolvi pesquisar onde poderia fazer um intercâmbio e daí que defini Lyon como destino.

O objetivo era ficar 3 meses, mas acabei ficando 2 meses e meio, acabei sofrendo um acidente no segundo dia que estava lá. Eu fui morar num studio que tinha um mezanino e durante a noite, eu meio que esqueci as escadas e também escorreguei nos degraus e caí de uma altura de quase 3 metros. Nessa queda, eu acabei deslocando meu ombro, pensei que daria para colocar no lugar de forma fácil, mas não deu. Lá fui eu às 5h da manhã no hospital, sem blusa porque não conseguia colocar e num frio de 3 graus.

No hospital eu descobri que iria precisar fazer uma cirurgia para fazer a redução, que é o processo de colocar no lugar, pois estava bastante grave. Tomei anestesia e horas depois acordei assim.

![Eu no hospital](/assets/img/ombro.jpeg)

É engraçado que apesar dessa queda e de ter que ficar imobilizado por 3 semanas, eu consegui me virar sozinho e foram dias ótimos. Era só engraçado que eu tinha que explicar sempre o que havia acontecido. Acho que nunca decorei o verbo "tomber" (cair) tão bem.

## Chamonix

Apesar do acidente, eu consegui fazer algumas coisas bem legais, como ir para Chamonix, que é uma cidade que fica no pé do Mont Blanc, a montanha mais alta da Europa. Eu sou **apaixonado** por montanhas, então foi um sonho realizado.

![Chamonix](/assets/img/chamonix.jpg)

Tirei algumas fotinhas por lá, se quiser ver mais, estão no meu [Unsplash](https://unsplash.com/collections/lXqD_F-DDVw/my-adventures-in-chamonix).

## Retorno ao Brasil

Como falei, eu ia ficar um tempo a mais, porém resolvi retornar antes para fazer uma surpresa a minha mãe no dia do aniversário dela. Ela quase teve um infarto quando eu cheguei, mas foi bem bonitinho e divertido. Eu até postaria o vídeo que fiz dela, mas ela me mataria, então não vou postar.

## Frontinsampa, SP e apartamento

No meio do ano eu fui para SP para o Frontinsampa, deu para me divertir bastante e ver uma galera que eu não via há muito tempo. Dei uns rolês com o [Mario Soutinho](https://www.youtube.com/@DevSoutinho) também.

Mas minha ida a SP tinha um objetivo maior, que era ver apartamentos para comprar. Eu sou de uma cidade no interior do RJ chamada Petrópolis, é uma cidade bem bonitinha e calma, só que calma até demais. Eu queria um pouco mais de coisas para fazer e também estar próximo de mais gente que eu conheço.

Foi um processo bem cansativo, mas no final deu tudo certo. Eu comprei um apartamento que gostei bastante e que fica próximo de tudo que eu preciso. Ainda não me mudei, mas estou bem ansioso para isso. Inventei de contratar arquiteta para fazer uma reforma para deixar com minha cara e aí está no processo. Dica, reforma custa muito mais do que você imagina, então se for fazer, se prepare para gastar mais do que você imagina....

## Seattle e LA

![Panorâmica de Seattle](/assets/img/seattle.jpg)

Essa viagem foi uma loucura, mas que deu muito certo. Um dia estava conversando com meu amigo Ramon Medeiros, que é tão fã de The Last of Us quanto eu, que seria maneiro ir para Seattle ver as locações do segundo jogo, que ficaram muito perfeitas. Ele super topou a ideia e nisso eu comecei a pesquisar os preços. Voo para Seattle era absurdamente caro, então resolvi ver para LA, que era bem mais barato e de lá ir para Seattle.

Foi assim que aproveitamos tanto Seattle quanto LA. Em Seattle eu ainda pude ver um dos meus melhores amigos, que é o Marcus Silva que mora em Vancouver e foi de carro para me encontrar.

Seattle é uma cidade incrível, gostei de cada detalhezinho e foi ainda mais incrível que fizemos várias montagens entre fotos do jogo e os lugares de verdade. Sempre achei esses vídeos comparativos mó legais e dessa vez era eu fazendo! Ainda tive oportunidade de assistir um jogo de futebol americano do Seattle Seahawks e nossa, que experiência incrível, o estádio é gigantesco! Até mesmo quem não conhece as regras, consegue se divertir bastante.

Você pode ver mais das minhas fotos de Seattle no meu [Unsplash](https://unsplash.com/collections/-TIivX5Mug8/my-adventures-in-seattle).

Depois de Seattle, ainda aproveitamos 3 dias em LA, eu gostei da cidade e claro que o ponto mais alto para mim foi a ida em Venice Beach. Mas também teve a ida na Universal Studios para o Parque do Mario! Quem me conhece sabe que eu não sou grande fã de parques, mas esse foi diferente e bem divertido. Te falar que queria ter passado até mais tempo lá para ver todas as coisas com mais detalhes.

Além disso, pude assistir uma premiere no Teatro Chinês, meu Deus, que cinema meus amigos, que cinema! Eu nunca tinha visto um cinema tão grande e tão bonito, foi uma experiência incrível.

Você pode ver mais das minhas fotos de LA no meu [Unsplash](https://unsplash.com/collections/50RZQWP5DSo/my-adventures-in-la).

## Desafios e exaustão

Agora no último trimestre do ano, tive desafios bem grandes na Appcues, que me drenaram bastante energia. No final tudo deu certo e conseguimos entregar tudo que precisávamos, mas foi bem cansativo. Acabou que agora resolvi tirar umas férias e retorno só dia 8 de Janeiro, espero que esse tempo ajude a recarregar as energias.

## E o ano que vem?

Todo ano eu traço alguns objetivos, esses ficam só para mim, mas espero que eu consiga realizar boa parte deles.

E vocês? Tiveram um bom 2023? O que aconteceu de mais legal para vocês? Me contem nos comentários!


Meu ano de 2023


## Introdução

Olá pessoal, hoje eu quero escrever algo bastante pessoal aqui, que é sobre o burnout (esgotamento mental) que eu tive em meados de 2021 e tudo que veio com ele depois disso também. Inclusive, para quem me segue e lê os posts aqui, notou que o ano inteiro de 2022 eu simplesmente não escrevi nada. Eu fiz um post [sobre o meu 2021](https://willianjusten.com.br/meu-ano-de-2021) e sumi. Inclusive quebrei a "corrente" que eu fazia de escrever sobre o meu ano todos os anos.

Eu não escrevi nada pois eu estava em um processo de recuperação e te falar que mesmo mais de 1 ano depois, eu ainda não estou 100%. E é sobre isso que eu quero falar hoje.

Enquanto vou escrevendo, vou ouvindo esse excelente álbum do [Lowswimmer](https://open.spotify.com/album/1lmmfQayZ9x0mVbLn2Fn53?si=aj_uI4X1R7m3C1XTCPceNg), é um artista incrível, que fez parcerias com artistas que gosto muito, como a banda Novo Amor, que eu inclusive recomendei no [post anterior](https://willianjusten.com.br/mude).

## O que é burnout?

Antes de falar sobre o meu caso, eu quero falar um pouco sobre o que é o burnout. O burnout é um esgotamento mental, que pode ser causado por diversos fatores, como excesso de trabalho, excesso de estudo, excesso de responsabilidades, etc.

O burnout é algo que vai se acumulando, e quando você percebe, você já está nele. E é muito difícil sair dele, pois você precisa mudar a sua rotina, mudar a sua forma de pensar, mudar a sua forma de agir e o mais importante de tudo:

> Ter empatia com você mesmo.

Eu não vou falar muito sobre o que é o burnout, pois existem diversos artigos e vídeos sobre isso, mas eu quero falar sobre como foi o meu caso.

## O que aconteceu comigo?

Para explicar o meu caso, eu preciso explicar um pouco da minha personalidade, não vou aprofundar em traumas nem nada, porque aí esse post seria um livro. Mas explicando de forma simplificada, eu sou uma pessoa que se cobra demais em qualquer aspecto, além disso, eu me preocupo demais com o que os outros vão pensar/achar de mim. Com toda essa cobrança e ansiedade, é claro que eu acabo sendo uma pequena bomba relógio prestes a explodir.

Em 2021 nós ainda estávamos na pandemia e apesar de eu já trabalhar remoto há muitos anos, eu também fui afetado, só que de formas um pouco diferentes. A primeira é claro, o confinamento não é legal para ninguém, uma coisa é você ficar em casa porque gosta, outra é você ser __obrigado__ a ficar em casa, pois é perigoso ir a rua.

Eu também enfrento depressão e a forma que eu melhor lido são com viagens, é onde eu consigo (nem sempre) esvaziar um pouco a cabeça das pressões e preocupações que eu mesmo coloco em mim. E em 2021 eu não pude viajar, isso me afetou terrivelmente, pois eu não tinha mais uma válvula de escape. Sei que é super "white people problems" isso, mas foi a forma que aprendi, tanto que eu praticamento não tenho luxos, exatamente para poder viajar mais.

Além disso, eu tinha acabado meu curso de [React Avançado](https://reactavancado.com.br) que foi massivo e consequentemente bastante cansativo. Tinham dias que eu acordava super cedo para gravar e parava só 1-2h da manhã. Pouco tempo depois do curso, eu fui trabalhar numa empresa e bom, como uma pessoa que se cobra demais, não seria diferente. O processo de entrar numa empresa nova causa ansiedade e é normal, são pessoas novas, cultura nova, processos novos, etc. E eu estava lá, tentando me adaptar a tudo isso, enquanto ainda estava com a cabeça cheia de preocupações e pressões que eu mesmo colocava em mim.

Consegue ver que eu já estava no processo da "bomba explodir"? Só que normalmente a gente não vê isso, a gente só acha que tá um pouco cansado, mas que é okay, que só dormir um pouco melhor e vai ficar tudo bem. E é aí que a gente se engana, nesse momento você já tá vivendo o burnout e não sabe.

## O burnout vem antes do "burnout"

Eu não sei se existe um nome para isso, mas eu chamo de "pré-burnout", é quando você já está no processo de burnout, mas ainda não chegou "lá". E é nesse momento que você precisa parar e pensar sobre o que está acontecendo, pois se você não fizer isso, você vai chegar no burnout e aí sim, vai ser difícil sair dele. E é exatamente isso que aconteceu comigo. Eu estava no processo de burnout, mas não parei para pensar sobre isso, eu só continuei, continuei, continuei, até que eu não aguentei mais.

> No primeiro momento que você sentir que está mal, pare e pense sobre isso! Não deixe para depois, pois depois pode ser tarde demais.

## O momento do burnout

Meu burnout veio num dia que eu acordei e comecei a sentir um aperto forte no peito e falta de ar, exatamente porque eu precisava trabalhar e apresentar "sei lá o quê". Apesar de todo o apoio das pessoas da empresa, ter tido conversas com o CTO e o CEO sobre o que estava acontecendo, eles ofereceram para eu ficar umas semanas parado descansando. Eu não conseguia mais, eu não conseguia mais trabalhar, eu não conseguia mais fazer nada, eu só queria ficar deitado na cama e não fazer nada.

Praticamente nas mesmas semanas eu tive o término do meu noivado, que foi outra coisa que eu na época não esperava, apesar de hoje conseguir ver vários e vários sinais, mas é claro, ninguém espera isso, ainda mais num momento já tão debilitado.

## Momento de aceitação e recuperação

Logo após tudo isso, as fronteiras começaram a abrir e eu resolvi de última hora ir para Vancouver ajudar um amigo na mudança dele e como ele precisava fazer 14 dias de quarentena, eu também passei 15 dias em NY. Foi uma viagem incrível, eu ainda não estava 100%, estava me recuperando, mas foi uma viagem que me ajudou bastante. Eu consegui esvaziar a cabeça, consegui pensar sobre tudo que estava acontecendo e consegui aceitar tudo que estava acontecendo.

Quando voltei da viagem, também resolvi que iria dar uma pausa em toda criação de conteúdo e fiz um post bem rapidinho nas minhas redes sobre isso:

![Um post no LinkedIn dizendo: "Hoje avisei meus alunos que irei parar indefinidamente de criar conteúdos. Apesar de eu gostar muito, estava me gerando uma ansiedade muito grande que não me fazia bem.](/assets/img/parada.png)

Eu entendi que precisava dar um tempo em tudo que eu me cobrava e que me gerava ansiedade, e isso incluía a criação de conteúdo. Eu não sabia quando eu voltaria (e se voltaria), mas eu sabia que precisava de um tempo para mim.

## Entrada na Appcues

Como eu não podia/queria ficar simplesmente sem fazer nada, já que o ócio também me gera ansiedade, eu resolvi aplicar para algumas vagas para "dev normal", pois eu não queria trabalhar com liderança naquele momento e muito menos com coisas relacionadas a conteúdo. Eu queria ser só um dev normal, que trabalha, recebe seu salário e descansa no tempo livre. E foi exatamente isso que eu fiz, apliquei para algumas vagas, passei em praticamente tudo que tentei (é...o mercado ainda tava "fácil"), e acabei entrando na [Appcues](https://www.appcues.com/), uma empresa incrível, com pessoas incríveis e que me ajudaram muito nesse processo de recuperação (mesmo sem elas saberem).

Eu entrei na Appcues como Senior Frontend Engineer, e foi uma das melhores decisões que eu tomei. Eu consegui me recuperar, consegui me sentir bem novamente, consegui me sentir útil novamente. Pouco tempo depois eu acabei sendo "promovido" para Tech Lead no meu time e mais recentemente eu fui promovido para Staff Engineer, continuando na path de IC (Individual Contributor), que é mais ligada a parte técnica que gestão.

## Retorno a criação de conteúdo e feedbacks

No início desse eu "ensaiei" um retorno, escrevendo sobre [valorize suas conquistas](https://willianjusten.com.br/valorize-suas-conquistas), onde comentava sobre minha ida a terapia, mas apesar do bom feedback do pessoal, ainda me sentia muito nervoso/ansioso em escrever, não é algo racional, mas é algo que eu sentia. Então eu resolvi esperar mais um pouco, até que eu me sentisse mais confortável em escrever novamente.

Foi assim que eu voltei a escrever outros posts em Julho e Agosto, todos mais "filosóficos", falando sobre [feito é melhor que perfeito](https://willianjusten.com.br/feito-e-melhor-que-perfeito), [estar tudo bem não fazer nada](https://willianjusten.com.br/esta-tudo-bem-nao-fazer-nada) e [mude, mas comece devagar](https://willianjusten.com.br/mude).

Não teve nenhum post técnico, mas para mim foram posts bem importantes, inclusive quando estive no Frontin Sampa, algumas pessoas vieram falar comigo sobre esses posts e como eles ajudaram elas. E isso é muito importante para mim, pois escrevo essas coisas muito para mim, mas saber que eu ajudei alguém no processo, me deixa muito feliz.

## Regravação do React Avançado

Recentemente eu resolvi regravar alguns pedaços do meu curso de [React Avançado](https://reactavancado.com.br), pois muita coisa mudou e muitos alunos pediam ajuda. Já consegui regravar cerca de 6h, contemplando a criação do boilerplate e também todo o setup do Strapi na v4.

E aí fiz alguns posts nas redes sociais e a galera comentando feliz que eu estava retornando me deixou bastante feliz. Eu não sei se vou voltar a gravar cursos e muita coisa nova, mas aos pouquinhos vamos vendo, posso dizer que o pior já passou do burnout, mas não foi fácil, já são quase 2 anos e eu diria que ainda não estou 100%.

## Conclusão

Eu não sei se esse post vai ajudar alguém, mas eu precisava escrever sobre isso, pois é algo que eu ainda estou passando e que eu ainda estou me recuperando (quase lá). Também é uma forma de agradecimento para as várias mensagens que recebi de pessoas dizendo que estavam com saudades dos meus conteúdos =)




A gente pensa que aparece do nada e depois vai melhorar rápido e não é bem assim.

Burnout dura mais que você imagina!


## Introdução

Continuando a sequência de posts para se pensar, vamos com mais um. Fiquei muito feliz com a repercurssão do meu post anterior sobre [Está tudo bem não fazer nada](https://willianjusten.com.br/esta-tudo-bem-nao-fazer-nada), então acho que alguns de vocês também gosta desse tipo de conteúdo.

Eu tenho consumido bastante poesia e conteúdos filosóficos ultimamente, então acho que isso tem me ajudado a refletir mais sobre a vida e sobre o que eu quero dela. E acho que isso é muito importante, pois muitas vezes estamos tão focados em fazer as coisas que esquecemos de pensar sobre elas.

Enquanto vou escrevendo esse post, vou ouvindo [esse album da Novo Amor](https://open.spotify.com/album/4s3XMtTEkRyaKTMR8HVGLz?si=h6D4Xw9-SHu9vN43WQgFHA) que nossa, é uma delícia de ouvir, é um album totalmente instrumental, apesar de eu amar a voz dele também, esse album é super relaxante.

## Poema de inspiração

Toda a ideia desse post veio depois dessa **maravilhosa** interpretação do Abujamra de um poema do Edson Marques, vale demais assitir.

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

## Rotina

Sempre que a gente fala sobre mudança, a primeira coisa que vem na cabeça é mudar de emprego, de cidade, de país, de relacionamento, etc. Mas acho que a mudança mais importante que podemos fazer é a mudança de rotina.

Você pode vir e falar:

> Ah, Willian, mas eu só funciono com rotina, sem rotina eu não sou ninguém.

Ter uma rotina nos ajuda a não gastar tanta energia para saber o que fazer, mas a rotina também nos deixa preso em um ciclo vicioso, que nos faz fazer as coisas sem pensar. E isso é muito perigoso, pois quando você faz as coisas sem pensar, você não sabe o porquê está fazendo aquilo, e quando você não sabe o porquê, você não sabe se aquilo é bom ou ruim para você.

**Atenção**, não estou dizendo para ligar o modo "foda-se" e sair fazendo tudo que der na telha. Estou dizendo para você pensar sobre o que você faz, sobre o que você quer fazer, sobre o que você quer ser. É super útil ter sim algumas tarefas mais delimitadas no seu dia-a-dia, mas ainda mais importante é estar **adaptável** a mudanças, isso evita frustrações se algo for diferente do seu plano tão bem arquitetado.

Por favor não confunda mudar rotina com "ser desorganizado", pois são coisas totalmente diferentes. Você pode ter uma rotina, mas estar aberto a mudanças, a novas experiências, a novos aprendizados. E isso é muito importante, pois é isso que vai te fazer crescer como pessoa.

Tem uma música da Fresno chamada [Essa coisa (Acorda - Trabalha - Repete - Mantém)](https://open.spotify.com/track/2IlMh7ELuEi4ptCB2dtwHb?si=3fcbb8a538a34320) que fala o seguinte:

> Acorda, trabalha, repete, mantém
>
> Deixa para viver depois
>
> Até o que eu amo, não mais me entretém

E é esse tipo de rotina que eu estou dizendo para você fugir. Não deixe para viver depois, viva agora, faça as coisas agora, não deixe para depois, pois depois pode ser tarde demais.

## Comece devagar

Usando esse pedaço do poema:

> Mude
>
> Mas comece devagar,
>
> porque a direção é mais importante
>
> que a velocidade.

Acho que a maior dificuldade que temos quando queremos mudar algo é achar que temos que mudar tudo de uma vez. E isso é um erro, pois quando você tenta mudar tudo de uma vez, você acaba não mudando nada.

A mudança é um processo, é algo que vai acontecendo aos poucos, e você tem que estar aberto a isso. Não adianta você querer mudar tudo de uma vez, pois você vai acabar se frustrando e voltando para o seu estado anterior. Então comece devagar, mude uma coisa de cada vez, e vá se adaptando a isso. E quando você menos perceber, você já mudou bastante coisa.

## Um paralelo com a programação

> Achou que não ia ter nada de programação no post? Achou errado, otário! haha

Esse post também é um convite para você aprender uma nova linguagem, um novo framework, um novo paradigma, por que não uma outra área (front fazendo back, back fazendo front)? Isso vai te ajudar a expandir a sua visão, a pensar maior nos projetos, a entender melhor como processos funcionam e entender mais do produto que você trabalha.

Os melhores devs que já trabalhei eram aqueles que tinham uma visão mais ampla, que entendiam mais do negócio, que entendiam mais do produto, que entendiam mais de outras áreas. E isso é muito importante, pois quando você entende mais do negócio, você consegue propor soluções melhores, você consegue propor soluções que vão ajudar o negócio a crescer.

## Saia da casinha de "Dev"

Mude também nos hobbies, nas conversas, nas interações, como programadores, costumamos ficar focados e centrados somente em programação.

> Nosso hobby? Programar.
>
> Nossas conversas? Algo de programação.
>
> Amigos? Quase sempre só da área.

Mudar um pouco isso vai tornar a própria programação mais prazerosa, pois quando só fazemos a mesma coisa 24h por dia, uma hora cansa também, por mais que se ame.

## Conclusão

Espero que esse post tenha te ajudado a refletir um pouco sobre a sua vida, sobre o que você quer dela, sobre o que você quer ser. E se você quiser conversar sobre isso, fala aí nos comentários, um tempo atrás eu havia removido a seção pois a galera quase não participava, mas resolvi voltar e tenho visto vários relatos super legais, aliás, minha mãe adora ler!


Mude, mas comece devagar, porque a direção é mais importante que a velocidade.

Mude!


## Introdução

Quase não escrevo mais no blog e quando resolvo escrever, não é algo técnico, mas é isso, o blog é meu né, escrevo o que gosto e no momento gosto dessas reflexões. Vai ser um post super rapidinho, mais para te fazer esse lembrete que você não precisa estar a 220v o tempo todo.

Esse post foi motivado após uma conversa com minha mãe, como estou em SP e ela em Petrópolis, a gente sempre manda mensagem de bom dia (não, ela não me manda Gifs de velho), e ela estava reclamando que já era praticamente meio-dia e ela não tinha feito nada. Mas assim, é um Domingo, por que essa pressão de ter que fazer algo?

Bom, vamos lá, enquanto eu escrevo vou ouvindo o novo album do [Post Malone](https://open.spotify.com/album/1F9LY06gadScF4g3g3BrDC?si=EQzh8ovARuqH4Oz0Ezmm5A), Postinho para os íntimos hahaha.

## A cobrança da produtividade

Você já se pegou igual minha mãe falando?

> Nossa, num fiz nada hoje.

Bom, isso acontece direto comigo, até mesmo nos dias que eu faço coisa para caramba! Mas isso acontece porque sempre queremos mais e mais, tem até um pouco a ver sobre não valorizarmos tanto nossas conquistas, igual [falo nesse post](https://willianjusten.com.br/valorize-suas-conquistas).

Durante a pandemia, todos nós tivemos que ficar em casa e isso fez um caos na cabeça de muita gente, galera sempre querendo estar fazendo algo, seja vendo live, estudando, maratonando 122383 séries, trabalhando mais do que deveria, o importante era "não ficar parado".

Com o término da pandemia muitas pessoas melhoraram, mas outros continuam nessa espiral de cobranças e bom, tem os outros que sempre se cobraram, mesmo antes da pandemia, me incluo nesse grupo.

## Dolce far niente

Tem um filme bacaninha chamado "Comer, rezar e amar" que tem um trecho que acho super legal:

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

Ele fala sobre o "Dolce far niente" que significa "a arte de não fazer nada". O Spaguetti critica como o povo americano vive a vida, sempre buscando razões e coisas para fazer o tempo todo, sem necessariamente só simplesmente aproveitar o simples ato de "fazer nada".

Acho que é nisso que também pecamos, as vezes é bom a gente simplesmente aproveitar o fato de não estar fazendo nada e sentir esse momento presente. As vezes ficar na cama mais tempo, só relaxando, tomar um café/chá enquanto se concentra exatamente no que está bebendo, sentir a brisa entrando pela janela, ouvir o barulho da rua. Afinal:

> Está tudo bem não fazer nada

## Conclusão

Confesso que maioria dos meus posts eu escrevo para mim, mas espero que seja útil para você que estiver lendo, que é raro nos dias de hoje!

E fica aqui o lembrete, não se cobre/puna se você tiver um diazinho mais lento, esse é só um sinal do seu corpo pedindo para você descansar e você merece!


Vivemos numa corrida sem fim e isso é cansativo! Dê seu tempo!

Está tudo bem não fazer nada

## Introdução

Nossa, como é bom voltar a escrever depois de tanto tempo! Eu havia escrito bem no início do ano sobre [valorizar suas conquistas](https://willianjusten.com.br/valorize-suas-conquistas), mas até então, nada novo por mais um longo período. Confesso que ainda estou com dificuldades para ter energia para criar conteúdo, tem momentos que me empolgo, mas logo me canso, mas vamos ver se agora vou voltando aos pouquinhos.

Continuando a tradição, eu vou escrevendo enquanto ouço a trilha sonora do último [Spider-man](https://open.spotify.com/album/0rqRGFgE4o8kf6VM18jakx?si=1YXwXIMFQSWYmrVsIWFtAA), o filme além de ser maravilhoso, ainda possui uma trilha sonora de respeito.

## Paralisia da perfeição

Se você leu o título, com certeza já ouviu a frase:

> Feito é melhor que perfeito.

Mas o porquê dessa frase e como isso assombra tanto os programadores, principalmente os iniciantes?

Antes de começarmos um projeto, queremos fazer do melhor jeito, nas melhores técnicas de programação, na mais alta perfeição e acabamos esquecendo do mais importante, que é **lançar o projeto**. Você pode escrever milhares e milhares de linhas, mas se você não lançar, ninguém nunca vai saber sobre sua criação.

O grande problema é que **nada é perfeito**, consequentemente o seu projeto também não será. Só que a paralisia da perfeição imobiliza, gera pânico e induz à certeza de que, não sendo capazes do perfeito, não somos então capazes. Consegue ver o problemão nisso? Além de você não lançar nunca, acaba desanimando e se sentindo incapaz, quando na realidade, você só definiu uma meta que era impossível desde o início.

Não estou dizendo para você lançar as coisas de qualquer jeito porque o *"Willian Justen falou que podia.",* estou dizendo para você definir melhor suas metas e expectativas, tendo elas mais pautadas na realidade e não se desmotivar nos primeiros erros/problemas.

## Vantagens e perigos de querer o perfeito

Nem só de coisas ruins tem nessa busca, querer o perfeito tem suas vantagens também. Te obriga a fazer o seu melhor, consequentemente você evolui bastante e acaba tendo resultados incríveis. Eu, como uma pessoa que se considera perfeccionista, não estaria na posição que estou hoje se eu não tivesse essa "exigência além dos limites". Ao mesmo tempo, posso dizer que esse comportamento me trouxe vários problemas/traumas que só bastante terapia para ajudar. 

### Equilíbrio é tudo

Tendo isso em mente, o mais importante é o equilíbrio, saber quando é importante "dar aquele tapa no código" ou quando é melhor lançar e ir iterando e melhorando com o tempo e feedback. Tem também algumas coisas muito importantes para toda pessoa que produz algo, seja conteúdo, código, design.

### O ego é o mau de tudo

Tem um livro muito legal que está na minha cabeceira há alguns anos chamado [Psycho-Cybernetics](https://www.amazon.com.br/Psycho-Cybernetics-Updated-Expanded-Maxwell-Maltz/dp/0399176136), que fala de váaaarias coisas, mas uma delas que mais "clareou" minha mente foi exatamente sobre como o ego é o maior inimigo que possuímos.

Já parou para pensar que você se preocupa demais em deixar sua criação (código, post, vídeo, etc) se preocupando no que os **outros vão achar**? Isso é o ego falando mais alto. Ah, mas você pode falar:

> Ah não Will, nada a ver, nem me preocupo com os outros.

Tem certeza? Quando você posta algo que criou, fica olhando se teve comentários, likes e atualizando o twitter o tempo todo? Se sim, sinto em lhe dizer, você liga para os outros sim. O mesmo vale para quando você faz um código que você considera "lindo" mas recebe mil comentários no code review e fica "puto" com fulano.

Como resolver isso? Tentando se preocupar menos com a opinião dos outros e/ou fazendo estratégias para que essas opiniões se transformem em aprendizado.

## Aprenda em público

Esse é um conceito que já tem um tempinho, mas lembro que começou a ser mais difundido e falado depois desse [excelente post](https://www.swyx.io/learn-in-public). E eu não poderia concordar mais com isso!

Para quem não sabe, a existência desse blog é mais um exemplo de aprender em público. Eu estava começando na área de programação e resolvi criar um blog para falar sobre as coisas que eu andava estudando, a partir do meu blog eu consegui oportunidades, conheci muita gente legal e aprendi ainda mais.

Quando você aprende em público, você aprende duas vezes. A primeira quando você realmente está conhecendo sobre o assunto e a segunda vez quando você está explicando para o outro, essa segunda vez eu diria que é até mais efetiva, pois ensinar algo nada mais é que solidificar seu conhecimento e sintetizar de uma forma que outra pessoa também possa entender o que você entendeu.

E como fazer isso? Você pode escrever num blog, gravar um vídeo, fazer live, comentar em posts/vídeos de outras pessoas perguntando e/ou adicionando coisas.

## Lance rápido, falhe rápido e aprenda

Por mais que uma ideia seja super legal e genial para você, pode ser que ela não seja tão legal assim para os outros, melhor saber disso logo de início do que depois de 2 anos trabalhando. 

Portanto, pense no "mínimo" que você considera para o projeto e lance assim mesmo, o famoso MVP (Minimun Viable Product - Produto Mínimo Viável). Nesse momento é que você vai conseguir obter mais feedback e lembre-se: **se dispa do seu ego e aprenda com os outros**. 

Um exemplo atual ~~não tão bom assim~~, o lançamento do Threads pela Meta. Os caras lançaram o projeto sem busca, sem hashtag, sem feed direito, sem uma porrada de coisas, mas botaram o mínimo já para dar um start e falar "hey, agora estamos nesse mercado também". Claro que não podemos nos comparar a uma empresa bilionária já com uma base de usuários gigante, mas é só um exemplo de como até os grandes começam de algo "porcaria" e é isso. Se você demorar muito para lançar sua ideia, outra pessoa pode lançar primeiro.

## Conclusão

Espero que esse post tenha lhe trazido algumas ideias/reflexões, eu resolvi escrever depois de ter lançado meu [portfólio de fotografia](https://photos.willianjusten.com.br/) e que lancei [opensource](https://github.com/willianjusten/photos-portfolio), se você olhar o projeto, vai ver que tem um monte de coisas bagunçada e que poderia ser melhorada, mas eu já procrastinei tanto para simplesmente começar, que eu defini a regra de "lanço e depois vou melhorando" e bom, pensando dessa maneira, finalmente saiu.

Também tenho começado a estudar Game Development e no início estava muito travado pensando "quais as melhores práticas de código?", "será que assim é ruim?", "o que será que vão falar do meu código?". E decidi que vou simplesmente começar do básico, copiar joguinhos simples e ir aprendendo, bom ou não, o importante é eu ir pegando os conceitos, depois vou procurar gente boa na área e pegar dicas para melhorar.

Se você faz os mesmos questionamentos que eu quando está estudando programação, dou a mesma dica, evita se preocupar demais, só segue o fluxo e vai aprendendo.

Já se sentiu tão travado que não conseguiu entregar algo? Talvez esse post seja útil.

Feito é melhor que perfeito


## Introdução

Nossa, quanto tempo que não apareço por aqui! Meu último post foi no ano **retrasado** falando exatamente como tinha sido [o meu ano de 2021](https://willianjusten.com.br/meu-ano-de-2021) e quebrei essa sequência não escrevendo sobre **ano de 2022**. E bom, não será hoje também que irei falar do meu 2022, mas posso dizer que foi um ano necessário para mim, que me trouxe muitas reflexões e que me fez valorizar muito mais as coisas que eu conquistei, sejam elas materiais ou não, inclusive é muito disso que quero falar hoje nesse post.

Já aviso que o post é sobre minha experiência pessoal e que não é um post de autoajuda/coach/o que você achar que seja, mas sim só um post de reflexão, que talvez possa te trazer algum valor. Inclusive, se você está passando por alguma dificuldade, recomendo fortemente que procure um profissional assim como eu.

Mas antes de começar, vamos ao que estou ouvindo enquanto escrevo esse post, como faço desde o meu primeiro post. A trilha de hoje é o album [An evening with Silk Song](https://open.spotify.com/track/3WTWh2WDk4j8GUCGj4xfOd?si=ade6e0366b0d4a47) que é um projeto do Bruno Mars com o Anderson.Paak, vale a pena ouvir demais, me foi indicado recentemente e curti bastante.

## Por que escrever sobre isso?

A ideia desse post nasceu depois da minha primeira consulta com meu psicanalista semana passada. Foi uma conversa tão bacana, que me deu um ânimo legal de escrever que eu não tinha há muito tempo. Como era a primeira consulta, meio que existe aquele protocolo de explicar um pouco a razão de estar ali e conforme a conversa vai, você vai dando mais contextos, explicando mais sobre sua vida.

## Minha trajetória (pode pular se quiser)

Não vou escrever muito, até porque daria um livro e não um post, mas só para dar um contexto para você que está lendo. Eu venho de uma origem bastante humilde, filho único de mãe solteira e que trabalhava como empregada doméstica para nos sustentar, chegamos a morar de favor por algumas vezes e ela fez o que podia e o que não podia para me dar uma boa educação (sim, ela é minha heroína e sempre será).

Fiz 4 anos de Química Industrial na Uff em Niterói e como não era de lá, também morei de favor num quarto que era tão pequeno que eu dormia encolhido porque o comprimento do quarto era menor que eu. Prestes a terminar a faculdade, eu tive uma enorme crise de pânico e de angústia, pois eu não me via mais naquela área, mas eu não podia desistir, pois já tinha sofrido tanto para chegar até ali. No final eu não aguentei, tranquei a faculdade, voltei para minha cidade natal e resolvi que iria estudar aquilo que eu realmente achava que era meu propósito, que era a programação. As vezes continuar algo só pelo "que já sofreu" não vale a pena, às vezes é melhor parar e seguir em frente e agradeço pela coragem que eu tive naquela época.

Na época que eu voltei para minha cidade, eu botei na cabeça que iria buscar qualquer trabalho que fosse "próximo" de computação, tanto porque eu precisava da grana para poder sustentar eu e minha mãe, mas também porque eu queria aprender mais de programação. E foi aí que eu fui virar professor de cursinho de informática, dando aula para criança, adolescente, idosos e ouvindo gritos de um patrão extremamente problemático. De lá, continuei estudando por fora, depois troquei por uma vaga de estagiário por R$ 300 numa agência de publicidade, que obviamente não iria dar para pagar minhas contas, mas eu fui mesmo assim e logo no segundo mês na cara e na coragem eu chamei o dono da agência e falei que se ele não me contratasse eu iria embora porque não tinha condições. Como eu tinha feito um trabalho mais do que o esperado, muito pela ajuda do que hoje virou meu melhor amigo [Guilherme Louro](https://twitter.com/guilhermelouro), ele me contratou e esse foi o meu início como um programador de verdade.

Depois de lá eu passei por alguns lugares bem legais, incluindo a [globo.com](https://www.globo.com/), que era um sonho incrível para mim. Nessa época eu já tinha esse mesmo blog e escrevia bastante, cheguei a palestrar e também contribuir com opensource, poderíamos dizer que eu já estava realizado, mas sempre tinha algo que me incomodava. Eu cheguei a sair da Globo para uma agência multinacional, mas lá eu tive um burnout por trabalho extremo e também porque precisei participar de reuniões em inglês e o desespero/ansiedade bateram muito forte já que eu achava meu inglês muito fraco.

Eu larguei essa agência, juntei todas as minhas economias e criei um curso sobre JS com TDD na época e com esse dinheiro, eu de novo fui na cara e na coragem morar na Irlanda para aprender o bendito inglês. Quando cheguei lá, descobri que meu inglês nem era tão ruim assim, o problema era a enorme cobrança que eu botava em mim. Claro que eu não falava fluentemente, mas já conseguia me comunicar e advinha! É isso que importa!

Depois de lá, eu voltei para o Brasil, mas já trabalhando no Core Team da [Toptal](https://www.toptal.com/), minha vida melhorou demais nesse tempo todo, tanto financeiramente quanto profissionalmente. Fiz várias outras coisas, fiquei na Toptal por quase 4 anos, passei um ano trabalhando só para mim num curso e hoje estou na [Appcues](https://www.appcues.com/).

Enfim, escrevi até mais do que eu queria dessa parte, mas isso tudo foi para mostrar que apesar de ter feito e conquistado tanta coisa, eu ainda sofro com esse problema de focar mais no negativo do que no positivo. E isso me faz perder muitas oportunidades de ser feliz.

## Enxergue com melhores olhos

A razão de eu resolver procurar um psicanalista (terapia) é que eu sou uma pessoa muito ansiosa e que enfrenta depressão, isso prejudica muito minha vida e minha visão em relação as coisas. Eu sempre tive uma visão muito negativa das coisas, me cobrando muito, me comparando com outras pessoas e me sentindo muito mal por não conseguir fazer as coisas que eu queria **(na perfeição que eu gostaria)**.

Ao falar disso na terapia, ele me pediu para falar um momento bastante recente que eu tivesse tido esse tipo de sentimento e eu falei para ele sobre minha viagem de 32 dias ao Japão. Era um sonho visitar o Japão, eu passei meses planejando e acabei indo no final do ano passado, mas eu tive um gosto meio "agridoce". Por mais que eu tenha curtido a experiência, tiveram dias que eu passei mal, outros que nem tive vontade de sair. E isso me deixou mal, com pensamentos como: "tanta gente queria estar no meu lugar, mas eu não estou aproveitando". E foi nessa conversa que ele me disse algo que me fez refletir bastante.

> Você ficou mais de 1 mês lá. Em casa, quantas vezes você não passa mal por alguma comida ruim? Quantas vezes você não fica sem vontade de fazer nada? Pois então, por que seria diferente no Japão? Quando você começou a falar da viagem, disse "a primeira semana foi incrível" e só. Mas as partes "ruins" você falou bastante. Mas e essa primeira semana? Por que você não falou mais sobre ela? Por que você não valorizou mais o que você conquistou?

Sei que esse é um exemplo bem **white people problems**, mas ele me deu um click para um monte de coisas da minha vida e tenho certeza que muitas pessoas acabam realmente focando mais na parte ruim ao invés de valorizar as partes boas.

## Tenha suas metas, mas valorize a jornada

Eu acredito que todo mundo tem que ter metas, mas eu acredito que muitas vezes as pessoas se esquecem de valorizar a jornada. Acho que a jornada é tão importante quanto a meta, pois é a jornada que te faz crescer, que te faz aprender, que te faz se tornar uma pessoa melhor.

Por mais longe que você esteja da sua meta, saiba que hoje você está mais perto do que ontem e amanhã estará mais perto que hoje. É uma frase clichê do caramba, mas é isso. Se cobre, mas também seja gentil com você mesmo, tente saber a hora que é para ir na cara e na coragem e a hora que é para se dar um tempo e descansar.

## Amplie sua visão

Ali acima eu falo para ter metas, mas é importante também saber que metas te ajudam a se guiar, mas não te definem, é sempre bom ter uma visão mais ampla do que você quer para a sua vida. Porque se você só se focar em uma meta, das duas uma, ou você vai conseguir e vai ficar sem saber o que fazer da vida depois, ou você não vai conseguir e vai se sentir um fracasso.

E quando eu digo para ter uma visão do que quer da vida, não é para você começar a ter uma crise existencial agora, mas é para você ter uma ideia de onde você quer chegar. Por exemplo, você pode ser uma pessoa que quer formar uma família ou pode ser uma pessoa que quer viajar o mundo sozinha e tudo também pode mudar no meio do caminho, não tem problema nenhum. Esteja aberto para as mudanças e para as oportunidades que a vida te traz.

## Conclusão

Eu sei que esse post ficou bem longo, mas eu queria muito escrever sobre isso, sempre tratei meu blog como um "cantinho para eu revisitar" e, esse com certeza vai ser um texto que eu vou querer ler quando estiver me sentindo mal. Talvez você possa ser mais um a ler esse texto comigo algumas vezes. E se você chegou até aqui, obrigado por ler até o final, espero que tenha gostado e que tenha te ajudado de alguma forma.

Eu adicionei uma seção para comentários logo ali abaixo, então se você quiser deixar algum relato seu ou qualquer palavra para mim e/ou outras pessoas que passem por aqui, fique a vontade.


O poder que valorizar nossas conquistas tem sobre nós.

Valorize suas conquistas

## Introdução

Como eu faço todo ano, este post aqui serve para revisitar um pouco de como foi meu ano e até mesmo para analisar minha evolução, de acordo com os anos anteriores. Esses posts de retrospectiva tem sempre um teor muito pessoal porém, o desse ano tem mais do que nunca. Então, se você só se interessa por partes mais "técnicas", veja só a primeira parte dos números do blog/youtube e depois, pode sair. Se você quiser comparar também, seguem aqui os posts dos outros anos:

* [Meu ano de 2015](https://willianjusten.com.br/meu-ano-de-2015/)
* [Meu ano de 2016](https://willianjusten.com.br/meu-ano-de-2016/)
* [Meu ano de 2017](https://willianjusten.com.br/meu-ano-de-2017/)
* [Meu ano de 2018](https://willianjusten.com.br/meu-ano-de-2018/)
* [Meu ano de 2019](https://willianjusten.com.br/meu-ano-de-2019/)
* [Meu ano de 2020](https://willianjusten.com.br/meu-ano-de-2020/)

Sobre músicas, é curioso que eu não consigo lembrar de quase nada muito marcante que ouvi. Como disse logo no subtítulo, esse ano foi bem tumultuado para mim. Então, ficam aqui algumas coisas que me lembro:

* [The Weeknd](https://open.spotify.com/artist/1Xyo4u8uXC1ZmMpatF05PJ?si=oNpWDQaWRWCpbq08t7T85A): ouvi bastante, ainda mais a partir de Outubro quando decidi ir para NY
* [Post Malone](https://open.spotify.com/artist/246dkjvS1zLTtiykXe5h60?si=Zc9SDVX_QfuVPPaiilqIVg): outro que ouvi muito, principalmente no Canadá com meu amigo Marcus
* [Low Hum](https://open.spotify.com/artist/7AfmYGPRYiNkwKfV8LrqLd?si=tel88LurTiCBWRLtUywqxg): um som meio depressivo e experimental, que foi a vibe do meu ano.

Bom, sem mais delongas, vamos ao meu ano. Eu confesso que precisei até que me forçar a lembrar das coisas, porque, sério, esse foi um ano esquecível e, o que lembro, preferia esquecer também.

## Blog

Esse ano eu não fiz muitas coisas aqui pelo blog, mas eu [migrei do Gatsby para o NextJS](https://willianjusten.com.br/migrei-meu-blog-do-gatsby-para-o-nextjs), o que deixou o site com uma performance tão boa quanto mas principalmente, melhorou minha [developer experience](https://willianjusten.com.br/gatsby-e-nextjs-performance-e-developer-experience), já que o tempo do build diminuiu muito e até mesmo converter certas coisas.

Apesar dessa migração, eu escrevi pouco e, novamente, as métricas do blog caíram. Notei que a tendência de consumo tem sido muito mais para vídeos mesmo, o que é uma pena, já que eu gosto muito de escrever, além de achar mais prático. Mas não importa, eu continuarei escrevendo nesse blog, mesmo que só eu leia!

Segue abaixo o gráfico do Google Analytics desse ano:

![Grafico do Google indicando uma queda de quase 30% de usuarios](/assets/img/users-blog-2021.png)

Como podemos ver, a queda foi brutal! Talvez também seja a hora de mudar um pouco o formato do meu blog e dos meus conteúdos. Estou usando esse final do ano para pensar os próximos passos, tenho que confessar que não ando lá muito animado, mas vamos que vamos, né.

## Canal do YouTube

Eu tinha uma meta humilde de alcançar os 15k inscritos e agora estou com pouco mais de 19k, [ajude a pegar os 20k aí](https://www.youtube.com/WillianJustenCursos/?sub_confirmation=1). Portanto, posso dizer que a meta foi cumprida, mas num geral, também não foi um ano tão bom em relação ao anterior já que o crescimento foi menor, como podemos ver pelo gráfico abaixo, onde a linha azul representa os números desse ano e a linha roxa, o ano passado.

![Grafico indicando que 2020 o crescimento foi maior que 2021](/assets/img/youtube-2021.png)

Diria que o grande problema que impactou o crescimento foi a falta de consistência nas postagens. Para crescer no YouTube, é muito importante que você movimente a rede pelo menos 1x por semana e, bom... meu [último vídeo](https://youtu.be/FaVz3ULk1N8) foi em Setembro. Antes, também não tinha nenhuma consistência, tendo posts seguidos numa semana e depois, semanas sem nada.

## Finalização do curso React Avançado

Em 2020 eu comecei a empreitada do [curso de React Avançado](https://reactavancado.com.br/), que foi definitivamente o maior curso que já fiz na vida. E o curso foi tão ambicioso e grande que, além de metade de 2020, eu ainda fiquei os 5 primeiros meses de 2021 trabalhando nele sem parar.

Tenho muito orgulho do que eu consegui nesse curso. Além de ter trabalhado muito com o [Guilherme Louro](https://github.com/guilouro) na criação do curso e ter o [Marcos Oliveira](https://twitter.com/vmaarcosp) no design do projeto, ainda tiveram participações em alguns espaços, como ajuda do [Gabriel Ramos](https://gabrieluizramos.com.br/) e também do [Adeonir Kohl](https://twitter.com/adeonir), que é um aluno dos meus cursos.

Mesmo antes de ter finalizado o curso, vários alunos já vinham relatando que haviam conseguido boas posições no mercado de trabalho, seja indo para uma nova empresa ou até mesmo, recebendo promoção. E para mim, esse é o maior objetivo que um educador deve ter: ver o sucesso dos seus alunos.

Mas, é aquilo, com grandes poderes vem grandes responsabilidades. Para fazer um curso tão grande e completo, foram incontáveis noites gravando/editando/codando. Os últimos dois meses eu já estava tão exausto que eu simplesmente queria acabar tudo. Assim que eu finalizei o curso, precisei ficar uns 20 dias fora, porque o corpo já não estava aguentando.

## Volta rápida ao trabalho

Como disse ali, eu estava exausto demais com o curso, me dei alguns dias de descanso, mas pouco depois, fui chamado para trabalhar numa empresa com um desafio bastante grande. De início eu não queria ir, exatamente porque eu estava muito cansado e a depressão também estava batendo muito. Mas fui convencido que seria uma boa, até mesmo para me ajudar na depressão e resolvi entrar.

Uma das minhas primeiras atribuições foi buscar profissionais para poder trabalhar no projeto. E para isso, eu sozinho desenvolvi todo o processo seletivo, desde a divulgação, triagem dos currículos, entrevistas iniciais, revisões de código e futura integração ao time. Cheguei até a [gravar um vídeo com algumas dicas sobre processo seletivo](https://youtu.be/njwAbZrO-LQ). 

Só por esse processo, você já deve imaginar o quão cansativo foi, mas não teve somente isso. Ao mesmo tempo, eu estava ajudando em toda a nova arquitetura do projeto, estudando sobre as próprias regras de negócio e trabalhando nas decisões estratégicas também. E, é claro que, por estar fazendo tantas coisas e já estando cansado de antes, o corpo simplesmente não aguentou e com isso veio o burnout. Eu preferi me desligar da empresa então, já que continuar ali só iria prejudicar meu quadro, que já estava realmente muito ruim.

## Mini viagem e prêmio

Já faço terapia há alguns anos e, durante as sessões, no momento que eu estava muito ruim pelo burnout do trabalho e pela falta de liberdade devido a pandemia, meu psicólogo me recomendou fazer uma viagem curta, nem que fosse para qualquer lugar aqui perto, só para eu poder não tocar em computador e tentar relembrar minhas viagens.

Pensando nisso,resolvi ir para Arraial do Cabo e arredores por 3 semanas. Acabou que passei uma semana e meia em Arraial, 3 dias em Cabo Frio e voltei para casa mais cedo, muito porque a previsão deu que iria só chover (e choveu mesmo) e por problemas pessoais. Eu nunca tinha ido em Arraial e posso dizer que tudo que falam de lá é verdade. É um lugar absurdamente bonito, com uma das águas mais bonitas que já vi no mundo todo. Abaixo vão duas fotos que gostei bastante de lá, mas se quiser, tem [várias outras fotos no meu Unsplash](https://unsplash.com/collections/b03DqownXhY/regi%C3%A3o-dos-lagos---rj).

![Foto de drone das ondas da praia, uma agua bem azul e areia clara](/assets/img/willian-justen-de-vasconcellos-fm0czakepsq-unsplash.jpg)

![Foto de uma ilha num tempo bem sombrio de chuva](/assets/img/willian-justen-de-vasconcellos-gnkzxu7kp6u-unsplash.jpg)

Ainda lá mesmo em Cabo Frio, teve um evento do GitHub chamado Nova, que é feito somente para os [GitHub Stars](https://stars.github.com/). Nesse evento, mostraram tudo que estão fazendo de novo e que pretendem apresentar no evento grande e aberto, o [GitHub Universe](https://githubuniverse.com/). Funciona muito como uma preparação para esse evento e, no final, eles também fazem umas premiações.

Numa dessas premiações eu acabei sendo escolhido como **Top Teacher 2021**! Foi algo bem inesperado para mim, já que tem gente absurdamente boa nesse grupo e, só por fazer parte dele, eu já me sentia premiado. 

![Foto de um trofeu de gato dourado escrito Top Teacher 2021](/assets/img/github-award.jpeg)

Gostaria inclusive de agradecer a todos os meus alunos que estejam lendo esse post, pois esse prêmio é de vocês também.

## Término de noivado e decisão de viajar

Logo que voltei da minha mini-viagem tive um outro baque, que foi o término do meu noivado. Ele já vinha sendo muito prejudicado desde o início da pandemia e acabou não funcionando mais. Algumas semanas antes desse ocorrido, meu amigo [Marcus Silva](https://www.instagram.com/mvfsilva/) estava para se mudar para Vancouver e tinha me convidado para ir lá. Eu disse que num daria, já que minha ex não queria ir para o Canadá de jeito nenhum (não me pergunte,eu não sei o motivo até hoje). Então, pouco depois do término, mandei a seguinte mensagem para o meu amigo:

![Eu perguntando se o convite para Vancouver ainda estava de pe e ele dizendo que sim](/assets/img/mensagem-marcus.png)

E foi assim que, em algumas semanas, eu estava preparando mala e indo viajar para NY e Vancouver. Como o Marcus ainda estava para se mudar, arrumar as coisas e ainda iria ter que fazer 14 dias de quarentena porque tomou CoronaVac, eu resolvi dar uma parada em NY, que também era uma cidade que eu sempre fui interessado de visitar.

## Viagem para NY

Eu devo escrever um post separado com várias das dicas e coisas que eu aprendi da cidade e que acho que poderão ser super úteis. Mas aqui é só para dar um resuminho de como foi a viagem e o que eu achei dela.

Primeiro eu tenho que falar do meu host do Airbnb. Ele é um Egípcio muito legal, mas parecia que estava sempre ligado no 220v. No primeiro dia que eu cheguei, ele já foi super receptivo comigo e inclusive, perguntou se eu queria jantar com ele porque já era bem tarde. E foi assim até o final da minha viagem. Ele chegou a passear comigo para alguns cantos e tivemos várias noites conversando sobre os significados da vida, propósitos e tudo mais. Apesar de no finalzinho eu já estar ficando um pouco ansioso por ele ser tão agitado, num geral ele foi uma pessoa incrível, que posso dizer que apareceu no meu caminho num momento extremamente oportuno.

Sobre a cidade de NY, eu acho que não teria muitas palavras para descrever. É uma cidade rica em tudo que é tipo de coisas, seja na culinária, na diversidade cultural, na riqueza mesmo, uns prédios absurdos e gente gastando dinheiro como se num houvesse o amanhã! E o transporte em NY? É a coisa mais fácil e ao mesmo tempo mais completa que já vi! Na Europa o sistema de transporte é muito bom, em NY eles conseguiram deixar no mesmo nível ou até melhor!

Eu fiquei 16 dias em NY, andei cerca de **16km por dia**, vi praticamente tudo que estava na minha lista principal de coisas (+150 lugares/atividades) e posso dizer seguramente que num vi/fiz nem 5% do que a cidade tem para oferecer. Foi muito bom que a cidade tinha tanto para ver e fazer, pois ela manteve minha cabeça ocupada quase que 100% do tempo, para num ficar pensando no que não deveria. Então, se você tá precisando desligar sua cabeça e só aproveitar o agora, vá para NY.

Lá eu comprei uma câmera nova e também comecei a treinar um tipo de fotografia que eu nem sabia que iria gostar tanto, que é Street Photography. Eu tirei mais de **10 mil fotos** de tudo que é tipo de coisa e de muitas pessoas! Pessoas andando na rua, comendo, lendo, bebendo café, pensando na vida, usando celular, rindo, chorando, enfrentando vento, chuva, vento e chuva ao mesmo tempo, enfim, foi uma ótima experiência também. Se quiser ver algumas das fotos, [tem nos highlights do meu IG](https://www.instagram.com/will_justen/) e também pretendo colocar no meu [Unsplash](https://unsplash.com/@willianjusten) assim que eu parar para editar.

## Assistir a NBA de perto

Para quem me conhece e até quem não me conhece, mas me segue no twitter e afins, eu sou vidrado em basquete! Eu gosto muito mesmo, de assistir os jogos do meu time e dos outros times, pelo simples fato de amar o esporte. Então, como todo fã, antes mesmo de ir para NY, a primeira coisa que eu fiz foi ver quais jogos que teriam quando eu estivesse lá. E para minha super felicidade, o meu time do coração, que é o Golden State Warriors, iria jogar contra o Brooklyn Nets! Antes que me chame de modinha, torço desde quando o time não ganhava nem de peso morto, então ver meu time de anos atrás ganhando tudo foi demais! Aí tiveram os 2 anos passados bem ruins e esse ano tá com tudo de novo, eu precisava ver de perto.

Em resumo, eu fiz meu amigo [Davidson](https://twitter.com/davidsonfellipe) e sua esposa [Juliana](https://www.instagram.com/julianamaltablog/) comparem ingresso para ir assistir comigo. E ainda de forma super aleatória, o [Fernando](https://twitter.com/FernandoCruz_21) disse que estaria em NY na mesma época e ele, como ex-jogador de basquete, nem precisei insistir muito para aceitar e ir também. O jogo foi um sonho do início ao fim, meu time ganhou bonito, mas mesmo que tivesse perdido de lavada, teria sido incrível igual.

## Vancouver e um irmão "mais novo"

Como falei, a ideia toda da viagem, na real, era visitar o Marcus. Portanto, logo após sair de NY eu fui para Vancouver. A primeira coisa que eu quero dizer é que eu até sou bom com mapas e sabia sim que ficava na outra costa e talz, mas orra, num sabia que eram fucking 8h de voo!

Cheguei em Vancouver já tinha passado de meia-noite e quero parabenizar o aeroporto/translado de lá. Tem um trem super simples e mega limpo que funciona até 1-2h da manhã que tu pega e te deixa no centro de Vancouver em menos de 30min. Isso deixou hiper mega fácil de chegar na casa do Marcus. Mas meus elogios ao sistema de transporte de Vancouver param por aí infelizmente. Talvez por eu estar tão acostumado com o sujo porém excelente sistema de metrô de NY, eu esperava um pouco mais de Vancouver. Lá existem 3 linhas de metrô, mas que não são necessariamente conectadas e consequentemente, não são muito fáceis de entender e muito menos do Google Maps escolher a melhor rota. Em resumo, se você quiser ir no eixo aeroporto/downtown vai ser super fácil/rápido, mas se você quiser/precisar desviar mesmo que de leve, vai ter que andar ou pegar ônibus, mas okay.

E por que eu disse ali irmão mais novo? Bom, o Marcus tem praticamente a mesma idade que eu, mas eu estava honestamente tratando ele quase como um irmão mais novo, talvez por eu ter tido um pouco mais de experiência em morar fora e em país frio. Tentei ajudá-lo com coisas básicas, como comprar roupas confortáveis para o frio, até da importancia ter um umidificador de ar para quando se liga o aquecedor em casa. Já peço até desculpas publicamente ao Marcus por ter sido chato nessas coisas, mas sei que além do que agradeceu, ainda vai me agradecer mais depois por isso hahaha

Enfim, nós passamos 15 dias em Vancouver nos divertindo para caramba, seja instalando o sistema de aquecedor no apartamento, ou o Marcus me acordando aos gritos de manhã falando que estava nevando, depois de ficarmos até 3h da manhã acordados, esperando a fucking neve e nada. Eu ainda tive a oportunidade de conhecer pessoalmente dois alunos na viagem, que foram o [Zizo Ribeiro](https://www.instagram.com/zizoribeiro/) e o [Gustavo Cardoso](https://twitter.com/gustavocardoso). 

Não vou me estender muito aqui, até porque também farei um post específico de Vancouver. O que tenho a dizer é que também é uma cidade incrível, mas que definitivamente se tornou ainda melhor pela presença do meu amigo, irmão, Marcus, que foi o motivador da viagem, inclusive. Obrigado por escutar minhas lamentações e me animar na viagem.

## Volta e Covid

Bom, a última coisinha do ano, para brindar com chave de ouro esse ano que definitivamente não foi dos melhores, eu acabei contraindo Covid e estou desde então isolado dentro de casa, devo passar meu Natal assim, mas espero que o Ano Novo eu já esteja recuperado.

## E o ano que vem?

Bom, se tem uma coisa que esse ano me ensinou é não criar muitos planos, porque senão eu posso me frustrar para caralho. Além disso, viajar mais um pouco e vamos ver, as vezes um emprego novo ou morar num lugar novo? Espero que no final do ano que vem, eu esteja aqui escrevendo como foi um ano de renovação e maravilhoso para mim. Um abraço e vejo vocês ano que vem.


Ano passado já foi complicado para mim, mas esse ano foi ainda mais.

Meu ano de 2021

## Introdução

Fala pessoal, faz um bom tempo que não escrevo no blog e um dos motivos é que eu estava viajando em NY e Vancouver, se quiser ver umas fotinhas de lá, [só me seguir no IG](https://www.instagram.com/will_justen/). 

Esse post eu planejava fazer até como um vídeo, mas infelizmente eu acabei contraindo Covid assim que cheguei no Brasil, então estou isolado num cômodo só da casa, ou seja, sem um microfone decente para gravar. E como estou entediado, vou fazer em post agora e depois qualquer coisa eu faço em vídeo se vocês quiserem.

Nesse post eu serei bem detalhista e farei bem passo-a-passo, já que muita gente pode não estar ambientada com o conceito de Canvas e quero também fazer algo onde qualquer iniciante consiga acompanhar. Minha dica é que você vá fazendo junto comigo, garanto que será uma experiência divertida e interessante.

E claro, para continuar com a tradição das músicas nos posts, eu estou ouvindo [Post Malone](https://open.spotify.com/artist/246dkjvS1zLTtiykXe5h60?si=jKgOAYKlTmmYLihN1iebMQ), que andei ouvindo bastante na viagem.

## Como é a chuva do Matrix e Demo

Antes de começarmos o projeto, precisamos falar sobre o que é né? Bom, se você nunca viu Matrix <del>pode se retirar</del>, eles basicamente brincam com a ideia de que o mundo em que vivemos nada mais é que um código de computador. Em alguns momentos do filme, eles mostram esses "códigos", que muito depois foi descoberto que [eram receitas de Sushi](https://nerdist.com/article/the-matrix-code-sushi-recipe/) usando hiragana, katakana, kanjis e alguns outros símbolos. Esses símbolos por sua vez vão caindo pela tela, fazendo o famoso efeito da "chuva do Matrix". 

Se você nunca viu esse efeito, [segue a demo do projeto](https://labs.willianjusten.com.br/matrix-rain).

## Inicializando o projeto

Nesse projeto não utilizaremos React, Next, SVG, nada nada, será um bom e velho `index.html` e um pouquinho de JavaScript. Então segue abaixo o esqueleto base:

```html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Matrix Rain</title>
</head>
<body>

</body>
</html>
```

### Entendendo o Canvas API

O [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) é basicamente uma maneira de conseguirmos desenhar na tela utilizando o JavaScript. Para isso, precisamos criar esse elemento no nosso html para então manipular com o JS, adicionaremos dentro do `body` a seguinte linha:

```html
<canvas id="matrix"></canvas>
```

Tendo esse elemento, nós precisamos prepará-lo para começar a desenhar. Essa "preparação" consiste em buscar o elemento do Canvas e definir em qual contexto iremos desenhar, que pode ser desde o `2d` que o nome já diz, desenhar em 2 dimensões ou até o `webgl`, que já expande para experimentos em 3d bem interessantes também. Como nosso propósito é simplesmente descer as letrinhas na tela, iremos utilizar o `2d`. Essa definição de contexto se faz com o comando [getContext](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext).

Nosso código inicial ficará da seguinte forma então:

```html
<script>
  // Pegando o elemento do Canvas
  const c = document.getElementById("matrix");

  // Definindo o seu contexto
  const ctx = c.getContext("2d");
</script>
```

### Pintando algo na tela

Como falei, quero fazer esse tutorial bem devagar, sem simplesmente tacar as coisas para ter o projeto pronto. Então, primeiro vamos aprender a pintar na tela utilizando o Canvas. 

O primeiro comando mais simples para pintar no Canvas é utilizar o [fillRect](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillRect), que pelo nome já dá para entender que permite desenhar retângulos. Então se escrevermos algo como:

```js
// fillRect(eixoX, eixoY, largura, altura)
ctx.fillRect(0, 0, 100, 100)
```

Nós teremos um quadrado de 100x100 no canto superior da tela! 

![Pequeno quadrado preto na tela](/assets/img/small-square.png)

E se quisermos pintar o canvas inteirinho? Podemos fazer o seguinte código:

```js
ctx.fillRect(0, 0, c.width, c.height);
```

Note que `c` é o nosso elemento do canvas definido logo acima, então estaremos pegando sua largura e altura para pintar o retângulo, mas se você reparar, preencheu apenas um pedaço da tela! 

![Um retangulo preto na tela](/assets/img/all-canvas-without-size.png)

### Definindo o canvas para o tamanho todo da tela

No nosso exemplo, nós queremos que o desenho cubra toda a tela, não apenas um pequeno pedaço como vimos acima. Se você inspecionar o seu elemento de canvas, verá que ele por padrão tem um tamanho especificado pelo browser, no Chrome é 300x150. Para torná-lo do tamanho total da página, basta editar os atributos do canvas:

```js
// definindo o canvas com tamanho máximo da tela
c.height = window.innerHeight;
c.width = window.innerWidth;
```

Agora o seu canvas já se comporta com o tamanho todo da tela e se você tiver pintado o retângulo todo de preto, a tela deve estar "quase" toda preta, mas ainda ficaram umas bordas!

![Tela quase toda preta mas com bordas brancas](/assets/img/fullscreen-canvas.png)

### Resetando margins e paddings

Essas margens brancas que estamos vendo nada mais são que definições padrões do browser. Para removê-las, nós precisamos fazer uma coisa que chamamos de `Reset CSS`, onde removemos de qualquer elemento `*` as margins e paddings. Além disso também vou definir o `display: block` do nosso canvas, assim ele não correrá risco de vazar a tela e criar scrolls laterais. Vou então colocar o seguinte trecho no nosso `index.html` acima do body:

```html
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  canvas {
    display: block;
  }
</style>
```

E agora, pode reparar que a tela ficou completamente ocupada pelo canvas.



![Tela completamente preta](/assets/img/with-reset.png)

### Escrevendo no Canvas

Beleza, nós já aprendemos como criar o canvas, pintar ele e inclusive colocar do tamanho máximo da tela, mas agora nós precisamos também aprender como escrever textos no Canvas, já que teremos vários símbolos caindo. Para isso, nós primeiro definimos um tipo de fonte e então usamos o comando de [fillText ou strokeText](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text). Vamos fazer um exemplo simples:

```js
// definindo o tamanho e tipo de fonte
ctx.font = `60px arial`;

// definindo o texto a ser escrito e posição x, y
ctx.fillText("Matrix Rain", 0, 60);
```

Com isso, você ter visto o texto "Matrix Rain" escrito bem grande começando na pontinha da tela. Se você não viu e está tudo preto, é porque tanto o retângulo desenhado quanto o texto estão em preto, remova o retângulo que criamos por um momento e veja o texto. 

![Matrix rain escrito em preto na tela](/assets/img/matrix-rain-black-text.png)

Mas note uma coisa! Eu não comecei na posição `0,0`, mas sim na posição `0,60`, isso acontece pois se eu iniciar o eixo Y como `0`, o texto iria ficar para cima e sequer apareceria na tela, então eu preciso mover o mesmo tamanho da fonte, para que o texto de fato apareça na tela, lembre-se desse detalhe, é fundamental.

### Colorindo as formas e textos

Como você notou nas coisas que fizemos até agora, tudo é sempre preto, mas nossa letra é verdinha e o fundo que é preto, para mudar as cores, temos outra propriedade chamada [fillStyle/strokeStyle](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors).

Se colocarmos o seguinte trecho:

```js
ctx.fillStyle = "#0F0";
ctx.font = `60px arial`;
ctx.fillText("Matrix Rain", 0, 60);
```

Nós iremos ver nosso texto finalmente em verde na tela! 

![Matrix rain texto escrito em verde](/assets/img/matrix-rain-green-text.png)



Agora você já sabe o suficiente para poder criar o nosso projetinho! **Fim da introdução**, vamos para diversão!

### Pegando os símbolos do Matrix

Para utilizar os mesmos símbolos do Matrix, eu encontrei esse [post](https://scifi.stackexchange.com/questions/137575/is-there-a-list-of-the-symbols-shown-in-the-matrixthe-symbols-rain-how-many) já indicando todos os símbolos. Com isso em mãos, eu criei um array:

```js
const letters = ["日","ﾊ","ﾐ","ﾋ","ｰ","ｳ","ｼ","ﾅ","ﾓ","ﾆ","ｻ","ﾜ","ﾂ","ｵ","ﾘ","ｱ","ﾎ","ﾃ","ﾏ","ｹ","ﾒ","ｴ","ｶ","ｷ","ﾑ","ﾕ","ﾗ","ｾ","ﾈ","ｽ","ﾀ","ﾇ","ﾍ",":","・",".","=","*","+","-","<",">","¦","｜","ﾘ"];
```

### Definindo as colunas para imprimir as letras

Para posicionarmos corretamente as letras, nós precisamos dividir o espaço total da tela pelo tamanho das letras. 

Além disso, eu também irei criar um array chamado `drops` que vai servir exatamente para podermos ir variando as posições no eixo y, já que o eixo x nunca vai mudar para a gota, ela sempre vai cair na mesma linha vertical. Para isso, criei o seguinte código:

```js
const fontSize = 18

// definindo quantas colunas serão necessárias pelo tamanho da tela e fonte
const columns = c.width / fontSize;

// criando um array para cada gota, sempre iniciando na posição do y=1
const drops = new Array(Math.floor(columns)).fill(1);
```

### Escrevendo toda a primeira linha

Juntando os pedacinhos que já fizemos e removendo as coisas que estávamos só aprendendo, teremos o código assim:

```js
// Pegando o elemento do Canvas
const c = document.getElementById("matrix");

// Definindo o seu contexto
const ctx = c.getContext("2d");

// definindo o canvas com tamanho máximo da tela
c.height = window.innerHeight;
c.width = window.innerWidth;

// letras do Matrix Rain
// ver mais em: https://bit.ly/3yFJoU3
const letters = ["日","ﾊ","ﾐ","ﾋ","ｰ","ｳ","ｼ","ﾅ","ﾓ","ﾆ","ｻ","ﾜ","ﾂ","ｵ","ﾘ","ｱ","ﾎ","ﾃ","ﾏ","ｹ","ﾒ","ｴ","ｶ","ｷ","ﾑ","ﾕ","ﾗ","ｾ","ﾈ","ｽ","ﾀ","ﾇ","ﾍ",":","・",".","=","*","+","-","<",">","¦","｜","ﾘ"];

const fontSize = 18;

// definindo quantas colunas serão necessárias pelo tamanho da tela e fonte
const columns = c.width / fontSize;

// criando um array para cada gota, sempre iniciando na posição do y=1
const drops = new Array(Math.floor(columns)).fill(1);
```

Só com o código acima não teremos absolutamente nada pintado na tela ainda. Para isso, iremos criar uma função `draw`, onde primeiro eu irei pintar nosso fundo de tela e também irei preencher a nossa primeira linha com as letras do Matrix.

```js
function draw() {
  // preenchendo a tela toda de preto com opacidade
  // esse truque da opacidade será útil para o efeito 
  // das letras sumindo aos poucos
  // como teremos muitos quadros sobre quadros
  // o preto que no início é quase transparente ficará bem opaco
  ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
  ctx.fillRect(0, 0, c.width, c.height);

  // definindo a cor e estilo da fonte
  ctx.fillStyle = "#0F0";
  ctx.font = `${fontSize}px arial`;

  for (let i = 0; i < drops.length; i++) {
    // pegando uma letra randomicamente no nosso array
    const text = letters[Math.floor(Math.random() * letters.length)];

    // escrevendo na tela
    ctx.fillText(text, i * fontSize, drops[i] * fontSize);
  }
}

// chamando a função criada
draw()
```

Repare que eu fiz um loop iniciando com `i=0`, isso significa que nossa primeira letra será impressa na posição `ctx.fillText(text, 0, 18)`, afinal de contas `0 * 18 === 0` e como todos os items dentro de `drops` tem o valor iniciado como `1`, `drops[0] = 1 * 18 === 18`.

Se você continuar iterando de cabeça, fazendo `i=1,2,3,por aí vai`, verá que eu estarei sempre movendo as letras no eixo x até preencher toda a primeira linha.



![Tela com primeira linha impressa](/assets/img/first-line-matrix.png)

### Animando quadro a quadro

Até agora sempre estávamos criando imagens estáticas, mas nosso projeto necessita de uma animação para fazer as gotas caírem. Para isso, irei alterar nossa função `draw` acrescentando alguns detalhes.

A primeira delas é utilizar o método de [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame). Esse método recebe uma callback que diz ao browser para realizar a animação antes do próximo repaint. Ou seja, ele vai ficar chamando o método numa animação quadro a quadro, que é exatamente o que nós queremos. Eu vou aplicar isso dentro da própria função de `draw` e utilizar o `requestAnimationFrame` para chamar a `draw`, criando assim uma [função recursiva](https://www.geeksforgeeks.org/recursive-functions/), que é uma função que chama ela mesma, causando o loop da nossa animação.

```js
function draw() {
  // preenchendo a tela toda de preto com opacidade
  // esse truque da opacidade será útil para o efeito 
  // das letras sumindo aos poucos
  ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
  ctx.fillRect(0, 0, c.width, c.height);

  // definindo a cor e estilo da fonte
  ctx.fillStyle = "#0F0";
  ctx.font = `${fontSize}px arial`;

  for (let i = 0; i < drops.length; i++) {
    // pegando uma letra randomicamente no nosso array
    const text = letters[Math.floor(Math.random() * letters.length)];

    // escrevendo na tela
    ctx.fillText(text, i * fontSize, drops[i] * fontSize);
  }

  // chamada recursiva para animar quadro a quadro
  window.requestAnimationFrame(draw);
}

// chamando a função criada
draw()
```

Ao fazer isso, você vai ver que a primeira linha vai ficar se redesenhando, com as letras umas em cima das outras. 

![Letras se sobrepondo](/assets/img/overlap-letters.gif)

Isso está ocorrendo pois eu não estou mudando as letras no eixo y, para isso, lá nosso `for`, eu vou adicionar ao final, um contador para o `drops[i]`, assim ele vai crescer conforme o loop e fará as letras descerem.

```js
function draw() {
  // preenchendo a tela toda de preto com opacidade
  // esse truque da opacidade será útil para o efeito 
  // das letras sumindo aos poucos
  ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
  ctx.fillRect(0, 0, c.width, c.height);

  // definindo a cor e estilo da fonte
  ctx.fillStyle = "#0F0";
  ctx.font = `${fontSize}px arial`;

  for (let i = 0; i < drops.length; i++) {
    // pegando uma letra randomicamente no nosso array
    const text = letters[Math.floor(Math.random() * letters.length)];

    // escrevendo na tela
    ctx.fillText(text, i * fontSize, drops[i] * fontSize);

    // movendo as gotas no eixo y
    drops[i]++;
  }

  // chamada recursiva para animar quadro a quadro
  window.requestAnimationFrame(draw);
}

// chamando a função criada
draw()
```

Com isso feito, as letras já descem certinhas, mas depois de chegarem ao fim, elas simplesmente não retornam e aí é como se a chuva tivesse "acabado". 

![Chuva uma unica vez](/assets/img/rain-without-loop.gif)

Para fazer com que as gotas fiquem caindo infinitamente, o que eu farei é sempre que elas chegarem no ponto final da tela (altura máxima) que elas resetem para posição inicial. Para isso, no nosso `for` loop colocarei o seguinte:

```js
if (drops[i] * fontSize > c.height) {
  drops[i] = 0;
}
```

Ao fazer isso, temos um loop certinho, onde a gota começa do topo e vai caindo. Mas ainda não está legal, já que a chuva fica sempre sincronizada e sem graça. 



![](/assets/img/rain-uniform-loop.gif)

Para tornar as gotas mais randomicas, eu vou adicionar mais uma regra nesse `if`, só dizendo que além da questão da altura, também quero que respeite uma comparação com um número randômico qualquer:

```js
if (drops[i] * fontSize > c.height && Math.random() > 0.95) {
  drops[i] = 0;
}
```

Eu cheguei nesse `0.95` testando para ver como as gotas caíam, se o número era abaixo de `0.5` significa que pelo 50% das gotas de chuva iriam respeitar a regra e com isso ainda parecia algo muito "sincronizado", então botei um número bem grande, fazendo com que se tornasse algo realmente bem variado.

![Chuva da Matrix](/assets/img/final-rain.gif)

E pronto! Sua chuva da Matrix está feitinha! Segue o código inteiro:

```js
// Pegando o elemento do Canvas
const c = document.getElementById("matrix");

// Definindo o seu contexto
const ctx = c.getContext("2d");

// definindo o canvas com tamanho máximo da tela
c.height = window.innerHeight;
c.width = window.innerWidth;

// letras do Matrix Rain
// ver mais em: https://bit.ly/3yFJoU3
const letters = ["日","ﾊ","ﾐ","ﾋ","ｰ","ｳ","ｼ","ﾅ","ﾓ","ﾆ","ｻ","ﾜ","ﾂ","ｵ","ﾘ","ｱ","ﾎ","ﾃ","ﾏ","ｹ","ﾒ","ｴ","ｶ","ｷ","ﾑ","ﾕ","ﾗ","ｾ","ﾈ","ｽ","ﾀ","ﾇ","ﾍ",":","・",".","=","*","+","-","<",">","¦","｜","ﾘ"];

const fontSize = 18;

// definindo quantas colunas serão necessárias pelo tamanho da tela e fonte
const columns = c.width / fontSize;

// criando um array para cada gota, sempre iniciando na posição do y=1
const drops = new Array(Math.floor(columns)).fill(1);

function draw() {
  // preenchendo a tela toda de preto com opacidade
  // esse truque da opacidade será útil para o efeito 
  // das letras sumindo aos poucos
  ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
  ctx.fillRect(0, 0, c.width, c.height);

  // definindo a cor e estilo da fonte
  ctx.fillStyle = "#0F0";
  ctx.font = `${fontSize}px arial`;

  for (let i = 0; i < drops.length; i++) {
    // pegando uma letra randomicamente no nosso array
    const text = letters[Math.floor(Math.random() * letters.length)];

    // escrevendo na tela
    ctx.fillText(text, i * fontSize, drops[i] * fontSize);

    // resetando a posição da gota ao chegar no fim
    if (drops[i] * fontSize > c.height && Math.random() > 0.95) {
      drops[i] = 0;
    }

    // movendo as gotas no eixo y
    drops[i]++;
  }

  // chamada recursiva para animar quadro a quadro
  window.requestAnimationFrame(draw);
}

// chamando a função criada
draw()
```

Se quiser ver o codigo pelo [meu GitHub](https://github.com/willianjusten/labs/blob/main/matrix-rain/index.html).

## Conclusão

Espero que tenha gostado do post e tenha feito o passo-a-passo junto comigo. Pode parecer bobeira, mas tivemos vários conceitos super interessantes nesse exemplo! Desde desenhar no canvas, entender coordenadas do plano cartesiano, animações quadro-a-quadro e até uma leve rebuscada de funções recursivas!


Aprenda como criar esse efeito em poucas linhas manipulando o Canvas

Criando o efeito da chuva do Matrix com JavaScript puro

## Introdução

Fala povo, continuando com posts sobre [NextJS](https://willianjusten.com.br/series#nextjs), o de hoje é para ensinar como eu fiz para utilizar um CMS super simples para o meu blog, continuando com o mesmo workflow simples de criar um arquivo Markdown, dar push para o GitHub e pronto, post no ar!

Enquanto eu vou escrevendo esse post, vou ouvindo o album [Transatlanticism - Death Cab for Cutie](https://open.spotify.com/album/4jQW2mhMH3TxtAOol3Djuf?si=tCh29sjbToudu7sUnWGLLw&dl_branch=1), que é bem calminho e legal.

## Netlify CMS

Mas o que é esse tal de Netlify CMS? Bom, como você talvez já saiba, a sigla `CMS` significa `Content Management System` ou de forma prática para entender, aquele admin maroto para editar coisas (no nosso caso, posts de um blog).

E o [Netlify CMS](https://www.netlifycms.org/) no caso é um CMS open source criado pelo pessoal da Netlify com o intuito de fazer esse controle de conteúdo mas sem precisar de um servidor, banco de dados e outras coisas mais. Ele foi feito para funcionar em cima do que nós programadores já usamos, que é o Git! =)

O legal é que ele é simples de configurar e já te dá interfaces bem simples para poder utilizar. Seguem abaixo alguns screenshots da interface:

* Interface mostrando a lista de posts
  ![Interface mostrando a lista de posts](/assets/img/netlify-cms-interface.png)
* Interface do workflow com rascunhos, em review, ready
  ![Interface do workflow com rascunhos, em review](/assets/img/netlify-workflow.png)
* Interface da criação de post com campos customizados
  ![Interface da criação de post com campos customizados](/assets/img/netlify-post.png)

## Curti esse bagulho, como faço?

Então, como o nome já diz, ele foi feito mais pensado na plataforma do [Netlify](https://www.netlify.com/), mas isso não impede de usar na [Vercel](https://vercel.com/). E o mais legal é que ele é agnóstico ao framework/lib/linguagem que você vai usar para criar os posts, para você ter noção, eu venho usando esse CMS no meu blog desde quando ele era feito em Jekyll (Ruby), depois passei para o Gatsby e agora NextJS e continua funcionando perfeitamente, lindo não?

### Configurando os arquivos

Para fazer funcionar no NextJS em específico, você precisa criar uma pasta `admin` ou `cms`, o que desejar na url lá na pasta `public`. Por exemplo, se você criou uma pasta `admin`, o acesso vai ser `suaurl.com.br/admin`.

Lá dentro você precisa colocar 2 arquivos muito importantes, o primeiro é o `index.html` que é basicamente o que vai inicializar o CMS. Abaixo vou deixar o snippet do arquivo, mas sempre recomendo pegar a última versão [na documentação oficial](https://www.netlifycms.org/docs/add-to-your-site/).

```html
<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Content Manager</title>
  <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
</head>
<body>
  
  <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
</body>
</html>
```

Depois você precisa do arquivo `config.yml`, ele quem vai ser responsável por definir qual backend você vai usar (seja GitHub, Gitlab, Bitbucket, etc) e também vai servir para definir onde subir as imagens e até campos customizados que caso você queira criar, um arquivo básico e usando o GitHub ficaria assim:

```yaml
backend:
  name: github
  repo: willianjusten/willianjusten.com.br
  base_url: https://willianjusten.com.br/
  auth_endpoint: api/auth/ # Essa rota vai ser muito importante mais para frente

media_folder: public/assets/img
public_folder: /assets/img

publish_mode: editorial_workflow # Isso permite ter aquele workflow com drafts e tudo

slug:
  encoding: 'ascii'
  clean_accents: true

collections:
  - name: posts 
    label: posts 
    folder: posts # A pasta onde ficarão os posts
    create: true # Permite criar um post novo
    slug: '{{slug}}' # Estrutura do nome arquivo, exemplo: title.md
    fields: # Os campos do seu frontmatter
      - { label: 'Layout', name: 'layout', widget: 'hidden', default: 'post' }
      - {
          label: 'Date',
          name: 'date',
          widget: 'datetime',
          format: 'YYYY-MM-DD hh:mm:ss'
        }
      - { label: 'Post Image', name: 'image', widget: 'image', required: false }
      - { label: 'Title', name: 'title', widget: 'string' }
      - { label: 'Description', name: 'description', widget: 'string' }

      - { label: 'Body', name: 'body', widget: 'markdown' }
      
```

Lembrando que essas configurações todas e explicações mais detalhadas você encontra [na documentação oficial](https://www.netlifycms.org/docs/add-to-your-site/). Depois disso configurado, vamos precisar começar a parte "diferenciada" que é configurar a parte de autenticação para você conseguir de fato logar no CMS e criar as coisas.

### Configurando os arquivos da Autenticação

Essa aqui que era a parte "tricky" para funcionar na Vercel. Na Netlify bastava configurar o OAuth do GitHub e conectar na Netlify e fim, mas na Vercel/NextJS é necessário fazer isso e mais um detalhezinho. Mas fique tranquilo, estou aqui para ajudar!

A primeira coisa que você precisa fazer é instalar o pacote [@openlab/vercel-netlify-cms-github](https://www.npmjs.com/package/@openlab/vercel-netlify-cms-github), ele que vai ajudar nessa parte da autenticação para funcionar.

Depois de instalado, você vai precisar criar uma pasta `api` dentro de `src/pages`. E nessa pasta, também iremos criar dois arquivos. 

Primeiro crie um arquivo `auth.js` com o seguinte conteúdo:

```js
export { auth as default } from '@openlab/vercel-netlify-cms-github'
```

E o outro arquivo será o `callback.js` com o conteúdo:

```js
export { callback as default } from '@openlab/vercel-netlify-cms-github'
```

E aí lembra do arquivo `config.yml` que criamos? Se certifica que você está com o `auth_endpoint: api/auth/` definido, ele é necessário exatamente para essa autenticação.

### Gerando as chaves no GitHub

Com tudo configurado, agora é só criar uma aplicação dentro do GitHub para poder controlar a autenticação. Para isso vá até [https://github.com/settings/developers](https://github.com/settings/developers) e clique na opção `New OAuth App`. Nas configs faça:

- Em `Homapage URL` coloque a do seu site
- Em `Authorization callback URL` coloque exatamente a rota que criamos `https://seusite/api/callback`
- Após isso você receber 2 chaves que são `client_id` e `client_secret`

Agora com essas chaves, vá lá no painel da Vercel, entre no seu projeto e vá em `Settings > Environment Variables` e crie as duas chaves como:

- `OAUTH_CLIENT_ID` que é o `client_id` da sua aplicação do GitHub
- `OAUTH_CLIENT_SECRET` que é o `client_secret` da sua aplicação do GitHub

Feito isso, só fazer um novo deploy e tentar acessar seu `https://seusite/admin`, ele vai mostrar uma tela para autenticar com o GitHub, só logar e prontinho!

## Conclusão

Espero que tenham curtido o post e que seja útil para vocês! Se estiver usando, manda um salve lá no [Twitter](https://twitter.com/Willian_justen).

Como utilizar um CMS super simples como criar Pull Requests no GitHub

Usando Netlify CMS com NextJS, Vercel e GitHub

## Introdução

Fala pessoal, continuando com os [posts sobre NextJS](https://willianjusten.com.br/series#nextjs), o de hoje será outro bem rápido, mas muito eficaz. 

Enquanto vou escrevendo esse post vou ouvindo uma das bandas que deu origem ao Grunge, nope não é Nirvana e muito menos Pearl Jam, mas sim [Mudhoney](https://open.spotify.com/artist/7LuYiSXiWs86rwWJjEEgB9?si=_J0qSuo_SDOaqiChRCcTQw&dl_branch=1).

## Vidrado em performance

Eu sou vidrado em performance, então quando fui migrar do Gatsby para o NextJS eu queria deixar o site tão rápido ou até mais rápido que antes. E como o NextJS é muito mais fácil de editar/customizar as coisas, pensei, por que não tentar substituir o React pelo Preact que é quase a mesma coisa, só que menor?

Bastou uma simples busca pelo Google/GitHub da vida que encontrei esse exemplo do [Lee Robinson](https://github.com/leerob/leerob.io/blob/main/next.config.js#L18-L30) que inclusive hoje trabalha na Vercel, testei e super funciona! Segue o snippet abaixo que deve ser adicionado no `next.config.js`

```js
module.exports = {
  webpack: (config, { dev, isServer }) => {
    // Replace React with Preact only in client production build
    if (!dev && !isServer) {
      Object.assign(config.resolve.alias, {
        react: 'preact/compat',
        'react-dom/test-utils': 'preact/test-utils',
        'react-dom': 'preact/compat'
      })
    }

    return config
  }
}
```

Depois de adicionar isso, também precisamos lembrar de instalar as dependências necessárias:

```bash
yarn add preact preact-render-to-string
```

E aí é só rodar o `yarn build && yarn start` e você verá tudo funcionando!

Vale lembrar que o **Preact não é 100% igual ao React**, então é **muito importante** que você veja [as diferenças](https://preactjs.com/guide/v8/differences-to-react/) e também teste tudo dentro do seu site para ter certeza que não tem nada quebrando.

## Mas e muda muito?

Como o Preact é menor que o React, a mudança vai ser principalmente no tamanho do bundle e geração. Vou deixar aqui embaixo as imagens usando React padrão e depois com o Preact na comparação do meu blog.

### Utilizando React padrão

![Resultado do build com React, durando 24s e a app com 112Kb](/assets/img/blog-react.png)

### Utilizando Preact

![Resultado do build com React, durando 9s e a app com 73Kb](/assets/img/blog-preact.png)

Como você pode notar, eu tive uma diminuição considerável em todas as páginas de cerca ~40kB. Pode não parecer grandes coisas, mas para mim é um ganho enorme!

## Conclusão

Como falei, foi um post super super rápido e prático, mas que funciona super bem e ajuda a limar aqueles kB extras do seu site! Se você está afim de ver mais posts como esse, fica atento nos [posts sobre NextJS](https://willianjusten.com.br/series#nextjs) que eu tenho feito.


Diminua ainda mais o bundle do seu projeto NextJS usando o Preact

Usando o Preact no NextJS para mais performance

## Introdução

Continuando com os [posts sobre NextJS](https://willianjusten.com.br/series#nextjs), o de hoje vai ser super rápido, mas vivem me perguntando. Como fazer para colocar os trechos de código no blog para ficarem bonitinhos com a sintaxe colorida. Vocês vão ver que é molezinha!

Enquanto eu escrevo esse post, vou ouvindo outra banda que gosto demais que é [Alice in Chains](https://open.spotify.com/artist/64tNsm6TnZe2zpcMVMOoHL?si=F1VYqFDsR6e7-6xHf2uRDg&dl_branch=1), esse post vai ser tão pequeno, que se depender não vai dar para ouvir nem uma música completa.

## Instalando e configurando

Para poder ter os blocos de código bonitos vamos usar um **Syntax Highlighter** chamado [PrismJS](https://prismjs.com/), que é super simples de usar e funciona para praticamente todas as linguagens.

Para isso você primeiro vai ter que instalar o pacote e também para nos facilitar, também vamos instalar um plugin do babel para facilitar a carregar só as linguagens que desejamos:

```bash
yarn add prismjs babel-plugin-prismjs
```

Depois de instalado, podemos configurar o pacote no nosso `.babelrc`, algo como por exemplo:

```json
{
  "plugins": [
    ["prismjs", {
        "languages": ["javascript", "css", "markup"],
        "plugins": ["line-numbers"],
        "theme": "twilight",
        "css": true
    }]
  ]
}
```

Para mais detalhes e configurações, vale olhar o [repositório oficial](https://github.com/mAAdhaTTah/babel-plugin-prismjs).

## Fazendo funcionar

Depois de instalado o Prism e o plugin do babel, basta ir na página/componente de Post para configurar. É muito importante que você configure **somente** na página do Post para que você não carregue coisas desnecessárias em páginas que não forem utilizar o highlighter.

Para configurar, é só importar e mandar carregar:

```jsx
import { useEffect } from 'react'
import Prism from 'prismjs'

useEffect(() => {
  Prism.highlightAll()
}, [post]) // note que eu atualizo sempre que o post muda já que meu layout é fixo
```

E aí sempre que for escrever um bloco de código, só lembrar de usar a sintaxe padrão do markdown que é usar 3 vezes o símbolo de crase seguido da linguagem que vai escrever e fechando com as mesmas 3 crases:

```markdown

` ` `js

` ` `

```

## Conclusão

Como falei, foi um post super super rápido e prático, mas que funciona super bem. Aí vai caber a você usar um tema padrão e/ou editar suas próprias cores, assim como que plugins quiser usar também, mas a estrutura será sempre a mesma. Se você curtiu esse post, fica atento nos [posts sobre NextJS](https://willianjusten.com.br/series#nextjs) que eu tenho feito.

Aprenda a usar um syntax highlighter para mostrar trechos de código mais bonitos no seu blog

Como mostrar trechos de código num blog com NextJS

## Introdução

Fala povo, tem um tempinho eu [migrei meu blog do Gatsby para o NextJS](https://willianjusten.com.br/migrei-meu-blog-do-gatsby-para-o-nextjs) e inclusive falei que iria fazer vários pequenos posts com dicas sobre alguns dos detalhes dessa migração e até mesmo como fazer certas coisas no NextJS. Acabei não tendo tempo, mas agora estou aqui! Vou começar com uma coisinha bem simples, mas que teve um diferencial com a versão mais nova do NextJS.

Enquanto vou escrevendo esse post vou ouvindo uma das minhas bandas favoritas de todas em um dos meus albuns favoritos, que é [Freak Show - Silverchair](https://open.spotify.com/album/511p6iaCuK8Sr0BYdpcfkq?si=e9lY9trvQJyJ5fhhdAO8WQ&dl_branch=1)

## Novo componente de Script

Uma coisa que eu gosto muito do NextJS é que eles estão sempre se atualizando e tentando melhorar ainda mais a performance das aplicações. Como é o slogan deles `Let’s make the Web. Faster.`

Na versão 11 eles lançaram o [Componente de Script](https://nextjs.org/docs/basic-features/script) que permite com que você tenha uma granularidade melhor no carregamento de scripts third-parties, o que como nós sabemos, pode afetar demais a performance dependendo do tamanho do arquivo e se ele é carregado junto com todo o resto ou se é carregado depois.

Com esse novo componente, nós temos 3 formas de carregamento:

- `beforeInteractive`: Para scripts críticos que precisam ser baixados e executados antes mesmo da página ser interativa. Normalmente scripts que são fundamentais para o funcionamento da página. Esses scripts são adicionados no server side.

- `afterInteractive` (padrão): Para scripts que podem ser baixados e executados após o carregamento da página. Coisas como tag managers e o próprio analytics. Esses scripts são adicionados já no client-side e rodam depois do hydrate.

- `lazyOnload`: Para scripts que podem carregar quando o carregamento das partes fundamentais já tiver finalizado e não tiver mais nenhuma ação acontecendo. Normalmente para scripts de redes sociais, chats, elementos que não vão estar aparecendo na primeira dobra da página.

## Configurando o Analytics e usando o Script

Agora que já conhecemos o componente de Script, podemos configurar o nosso Analytics para carregar no modo `afterInteractive`. Eu costumo criar um componente `Analytics` para ficar mais fácil de editar/adicionar:

```jsx
import Script from 'next/script'
import { GA_TRACKING_ID } from 'lib/gtag'

const Analytics = () => (
  <>
    <Script
      strategy="afterInteractive"
      src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
    />
    <Script
      strategy="afterInteractive"
      dangerouslySetInnerHTML={{
        __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${GA_TRACKING_ID}', {
              page_path: window.location.pathname,
            });
          `
      }}
    />
  </>
)

export default Analytics
```

Note que o `afterInteractive` é o comportamento padrão, mas eu costumo deixar bem explícito, até para que mesmo quem não conheça o `Script` saiba o que vai acontecer.

Outro detalhe é que eu tenho um arquivo `lib/gtag` que fica responsável pelos métodos e variáveis, que é assim:

```jsx
export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID

// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
export const pageview = (url) => {
  window.gtag('config', GA_TRACKING_ID, {
    page_path: url,
  })
}

// https://developers.google.com/analytics/devguides/collection/gtagjs/events
export const event = ({ action, category, label, value }) => {
  window.gtag('event', action, {
    event_category: category,
    event_label: label,
    value: value,
  })
}
``` 

Note que para tudo funcionar precisamos criar uma variável `NEXT_PUBLIC_GA_ID` no nosso `.env.production` para que o mesmo funcione. Se quiser testar em local, basta criar um arquivo `.env.local`.

## Colocando para funcionar e enviando pageview

Só com os arquivos acima ainda não vai funcionar, pois precisamos adicionar esse componente na nossa `_app` e também precisamos enviar as `pageviews` sempre que tiver um acesso na página. Para isso, vamos precisar adicionar alguns detalhes, segue abaixo um arquivo `_app` só com os trechos necessários:

```jsx
import { useEffect } from 'react'
import { useRouter } from 'next/router'

import * as gtag from 'lib/gtag'
import Analytics from 'components/Analytics'

function App({ Component, pageProps }) {
  const router = useRouter()

  useEffect(() => {
    const handleRouteChange = url => {
      gtag.pageview(url)
    }
    router.events.on('routeChangeComplete', handleRouteChange)
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
    }
  }, [router.events])

  return (
    <>
      <Component {...pageProps} />
      <Analytics />
    </>
  )
}

export default App

```

Se você notar, na primeira parte nós temos:

```jsx
const router = useRouter()

useEffect(() => {
  const handleRouteChange = url => {
    gtag.pageview(url)
  }
  router.events.on('routeChangeComplete', handleRouteChange)
  return () => {
    router.events.off('routeChangeComplete', handleRouteChange)
  }
}, [router.events])
```

Essa parte é a responsável por a cada mudança de rota enviar o `gtag.pageview` daquela url.

E para termos o `gtag` funcionando no escopo global, nós adicionamos o componente de `Analytics` bem ao final da `_app`:

```jsx
return (
  <>
    <Component {...pageProps} />
    <Analytics />
  </>
)
```

Com esses passos, aí sim toda pageview já será enviada ao Google Analytics de forma prática e sem impactar tanto a performance! =D

## Conclusão

Espero que tenha curtido esse post, ele já estava na minha lista de posts e tudo, mas semana passada mesmo teve um PR [no repositório oficial do NextJS](https://github.com/vercel/next.js/pull/27674) exatamente sobre isso, então achei bacana trazer para cá por agora e depois vou continuar com alguns outros posts do NextJS também, então fica ligado!

Como configurar corretamente o Google Analytics no NextJS com o next/Script

Como configurar o Google Analytics no NextJS em 2021

## Introdução

Fala povo, recentemente eu voltei ao mercado de trabalho para trabalhar numa startup chamada [Zapt](https://zapt.com.br/) e consequentemente precisei configurar o Git da minha máquina para não usar somente o meu email pessoal, mas também o da empresa, principalmente porque lá utilizam o [GitLab](https://gitlab.com/) ao invés do GitHub, então ele é mais chatinho para reconhecer os emails e chaves SSH. 

É bem simples de configurar, mas percebi que muita gente não sabe como fazer da mesma maneira que eu faço, então resolvi escrever esse post rapidinho para ensinar. Lembrando que os processos descritos abaixo funcionam no Linux, Mac e Windows com WSL, no Windows puro algumas outras configuração seriam necessárias, mas não irei abordar aqui.

Enquanto eu vou escrevendo esse post vou ouvindo [Pitty](https://open.spotify.com/artist/2dmQ0vMD3THLMcz7DsvfaT?si=19mAEx4OQWeiYbx0duNobw&dl_branch=1), isso mesmo, aquela rockeira baiana que era bem famosa nos 2000, como já disse, escuto de tudo xD

## Por que configurar o Git e como fazer?

Antes mesmo de começar a falar de SSH e etc, a gente precisa falar a razão de configurar o Git num é mesmo? Bom, quando nós criamos um commit, ao ver no log, ele fica numa estrutura similar a essa:

```bash
commit 82a24142b6df8049787760c82d29728f8fb0eee5 (HEAD -> master, origin/master, origin/HEAD)
Author: Willian Justen de Vasconcellos <willianjustenqui@gmail.com>
Date:   Sun Sep 5 23:31:04 2021 -0300

    Remove dangerously to use Script
```

Se você notar, tem uma parte separada especificamente para o `Author`. Se você não configurar, o Git vai pegar o que tiver de informação no computador e na maioria das vezes ele não vai colocar direito nem o nome e muito menos o email.

Para configurar uma conta única e global é super simples, basta digitar:

```bash
git config user.name --global "Willian Justen de Vasconcellos"
git config user.email --global "willianjustenqui@gmail.com"
```

Mas e se precisar mudar para o email da empresa no projeto X? A forma não automatizada é **dentro do projeto** definir manualmente:

```bash
git config user.name "Willian Justen de Vasconcellos"
git config user.email "will.justen@zapt.com.br"
```

E aí talvez você pergunte:

> Mas e se tiverem vários projetos da empresa, preciso fazer isso em cada projeto?

A resposta antes desse post seria que sim, você precisa definir manualmente. Mas como vocês sabem, programador é bicho preguiçoso e sempre vai querer automatizar as coisas e bom, é o que faremos xD

## Configurando diferentes emails

Quando o Git vai assinar um commit ele primeiro procura as informações dentro da pasta `.git` dentro do projeto e caso não tenha nada definido localmente, ele procura pela configuração global que fica num arquivo chamado `.gitconfig` na pasta raiz do usuário.

E é aqui que iremos fazer uma jogada para o Git ler o que nós queremos que ele leia. Eu costumo ter uma estrutura de pastas da seguinte forma:

```bash
~/Development
   /github # meus projetos pessoais
   /zapt # projetos da zapt
```

Como é um padrão bem simples, fica fácil de falar para o Git o seguinte:

- Se estiver na pasta `github` use meu email pessoal
- Se estiver na pasta `zapt` use o email da empresa

E aí para definir isso, eu crio 2 arquivos:

- `.gitconfig-github`
- `.gitconfig-zapt`

E os conteúdos ficam:

```yaml
# .gitconfig-github

[user]
  email = willianjustenqui@gmail.com
```

E no outro:

```yaml
# .gitconfig-zapt

[user]
  email = will.justen@zapt.com.br
```

Lembrando que aqui estou mostrando só o email, mas outras configurações como aliases específicos para cada conta e qualquer outra coisa, você consegue separar tranquilamente nesses arquivos.

Mas só fazendo isso, ainda não vai funcionar, nós precisamos informar ao Git quando é parar ler um ou outro, para isso nós editaremos o `.gitconfig` original para ficar assim:

```yaml
[user]
  name = Willian Justen de Vasconcellos
[init]
  defaultBranch = main

[includeIf "gitdir:~/Development/github/"]
  path = .gitconfig-github
[includeIf "gitdir:~/Development/zapt/"]
  path = .gitconfig-zapt
```

Note que eu tenho coisas globais ainda, como meu nome e o branch inicial quando criar. Mas utilizo um `includeIf` exatamente para quando cair numa opção ou outra, ele adicionar meus dados específicos. Só de fazer isso, se eu criar um commit na Zapt, já ficaria com o commit assim:

```bash
commit e07164f972a15bbf7c681970a5cf547db966867d (origin/fix/update-map-use-lat-long, fix/update-map-use-lat-long)
Author: Willian Justen de Vasconcellos <will.justen@zapt.com.br>
Date:   Thu Aug 26 12:16:44 2021 -0300

    Fix Map position to use flat lat and long
```

Como podem ver, o email já fica certinho o da empresa e não o meu pessoal.

## Configurando duas chaves SSH

Agora vamos a segunda parte que é ainda mais importante, afinal de contas, se as chaves não estiverem bem configuradas, você não consegue nem fazer push para o repositório.

Primeiro de tudo, você precisa criar chaves SSH separadas, até para facilitar nessa separação, para isso, é só rodar:


```bash
ssh-keygen -t rsa -C "email@pessoal.com" -f "id_rsa_pessoal"
ssh-keygen -t rsa -C "email@trabalho.com" -f "id_rsa_trabalho"
```

Ao fazer isso, ele vai criar duas chaves separadas na pasta `~/.ssh`, depois basta adicionar na sua máquina usando:

```bash
ssh-add ~/.ssh/id_rsa_pessoal
ssh-add ~/.ssh/id_rsa_trabalho
```

Depois disso precisamos configurar o ssh para também entender quando usar uma chave ou outra. Para isso vamos criar um arquivo `config` dentro da pasta `.ssh`:

```bash
cd ~/.ssh
touch config
code config # você pode usar vi, vim, nano, enfim, editor favorito
```

Lá dentro do arquivo é só editar:

```yaml
# Conta pessoal como default
Host github.com
   HostName github.com
   User git
   IdentityFile ~/.ssh/id_rsa_pessoal
   
# Conta do trabalho
Host github.com-trabalho  
   HostName github.com
   User git
   IdentityFile ~/.ssh/id_rsa_trabalho
```

Ali está como `github`, mas para o `gitlab` é só mudar no `Host` e `Hostname`, você inclusive pode ter diferentes configs de diferentes repositórios remotos no mesmo arquivo.

E aí, sempre que for clonar um repositório, se ele for de trabalho, basta editar na url para ficar de acordo com a estrutura acima:

```bash
git clone git@github.com-trabalho:seu_user/repo_name.git
```

Prontinho, agora sua máquina está configurada para trabalhar com duas contas do Git e assim você não fica misturando usuários e chaves entre coisas pessoais e empresa!

## Conclusão

Espero que este post tenha sido útil e lembrando que qualquer dúvida e/ou sugestão é só me mandar um [tweet](https://twitter.com/Willian_justen).

Aprenda como configurar uma conta pessoal e uma conta da empresa no Git, incluindo chaves SSH e emails.

Configurando 2 contas de Git no mesmo computador

## Introdução

Fala povo, recentemente eu [fiz um vídeo](https://youtu.be/9Rp39orl1DM) falando sobre minhas impressões do Macbook Air M1 e no vídeo mesmo eu havia comentado que iria fazer um post falando um pouquinho sobre como configurar as coisas e tudo mais, então aqui estou.

Enquanto escrevo esse post, vou ouvindo uma banda chamada [The American Dollar](https://open.spotify.com/artist/5r4OqYJL7JrtZlffx7FJlb?si=8PYvbk6GRHiAbn3qGHbagw&dl_branch=1) que é um Post-rock bem calmo e bom para ouvir trabalhando e/ou relaxando, super recomendo.

### O que roda no M1?

Como a arquitetura do M1 é diferente, no início muita coisa não tinha suporte, o que já está bem diferente de agora (pouco mais de 1 ano depois de lançado), mas se você ainda tiver dúvida se algo roda ou não, existe um site bem legal que indica o suporte de tudo, se chama [isapplesiliconready.com](https://isapplesiliconready.com/). Lá você pode pesquisar se determinada aplicação vai rodar ou não. É até bom para decidir na hora da compra, vai que você necessita de uma aplicação bem específica e ela ainda não roda.

### Xcode - command line tools

Por mais que você nem vá programar no Xcode ou coisas mobile é super importante instalar o xcode / command line tools no Mac, pois várias outras ferramentas utilizam de alguns pacotes dali de dentro. Para instalar, basta rodar no terminal:

```bash
xcode-select --install
```

### Rosetta 2

Com essa mudança de arquitetura, assim como aconteceu dos Powerbook para Intel, a Apple lançou o Rosetta 2, que é uma espécie de emulador do x86 para o Arm. Então caso algo não rode nativamente, você vai precisar ter o Rosetta para te ajudar. Para instalar é bem simples, basta abrir o terminal e digitar:

```bash
/usr/sbin/softwareupdate --install-rosetta --agree-to-license
```

### Homebrew

Outra ferramenta quase que obrigatória no Mac para quem programa é o [Homebrew](https://brew.sh/), que é um Package Manager, permitindo instalar vários outros programas diretamente do terminal, para quem vem do Linux, já está acostumado com ferramentas como `apt get`, `yum`, `pacman`, o funcionamento é bem similar.

Para instalar, só rodar no terminal:

```bash
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

### iTerm2

Depois de instalar as 3 partes mais fundamentais para o funcionamento das outras aplicações no Mac, agora vamos aos programas. Lembrando que são escolhas minhas e não necessariamente você precisa instalar no seu Mac, mas eu aconselho fortemente.

A primeira ferramenta não poderia deixar de ser um terminal melhorado e na minha opinião, não existe melhor terminal no Mac que o iTerm, ele está aí há tantos anos e continua sempre adicionando pequenas melhorias.

Como já temos o brew instalado, basta rodar:

```bash
brew install --cask iterm2
```

#### Configurando o iTerm2 com Rosetta 2

Após isso, já teremos um terminal melhorado e também vamos poder configurar para ter 2 terminais separados, um para rodar as coisas necessárias com o Rosetta e outro para rodar as coisas normais. Para fazer isso é bem simples, abra o finder e vá em `Applications`, procure pelo `iTerm`, clique com botão direito e escolha a opção de `duplicar`. 

![Imagem do finder do Mac com varias aplicacoes, incluindo o iTerm](/assets/img/iterm-finder.png)

Ao duplicar, mude o nome da aplicação para algo como `iTerm-Rosetta` ou qualquer outra coisa que te facilite a identificar qual é qual. 

Depois disso, clique com o botão direito no app novo e escolha a opção `get info` para abrir a seguinte tela:

![Tela com informacoes do iTerm e uma opcao de abrir usando o Rosetta marcado](/assets/img/iterm-rosetta.png)

Note que a opção de `Open using Rosetta` precisa estar marcada para poder funcionar de fato. Uma outra coisa que eu fiz foi mudar o ícone para me facilitar a entender qual é qual ainda mais rápido. Para isso eu baixei um ícone [nesse repositório](https://github.com/dhanishgajjar/terminal-icons) e com o arquivo em mãos é só arrastar a imagem para cima do ícone ali no header que ele automaticamente já vai trocar.

E prontinho, com essa configuração se existir qualquer programa que você precisar usar e ainda não for compativel com Arm você vai conseguir rodar usando o Rosetta.

### Zsh / Oh my Zsh

Continuando com as configurações do terminal, vamos instalar agora o Oh my Zsh para deixar o terminal turbinado. Gosto também de usar o Oh my Zsh pois é o mesmo que utilizo no Windows/WSL, então fica tudo muito igual e não me confundo com alias/autocomplete nem nada.

Para instalar, é só rodar:

```bash
sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"
```

Depois disso, eu costumo configurar alguns plugins, novamente, isso não é obrigatório, mas se quiser usar minhas indicações =)

#### Syntax highlighting

Esse plugin serve para o terminal identificar os comandos e colorir facilitando a leitura de tudo. Para isso, rode primeiro:

```bash
# Aqui é a pasta onde devem estar seus plugins
cd $HOME/.oh-my-zsh/plugins

# clone o repositório
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git

# adicione o plugin no seu arquivo de configuração
echo "source ${(q-)PWD}/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh" >> ${ZDOTDIR:-$HOME}/.zshrc
```

Para garantir que o plugin vai funcionar, você também deve adicionar na lista de plugins no arquivo `.zshrc`, procure pela linha de plugins e adicione:

```bash
plugins=(
  zsh-syntax-highlighting
)
```

#### Autosuggestions

Esse plugin é perfeito para quem esquece sempre como se escreve aquele comando X, que já usou mil vezes, mas ainda assim esquece. O terminal vai auto completar as coisas baseado no seu histórico, o que é super útil. Para instalar, basta rodar:

```bash
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
```

E depois, assim como no plugin acima, precisa editar o arquivo `.zshrc`:

```bash
plugins=( 
  zsh-autosuggestions
)
```

### NVM

Para quem trabalha com frontend, uma outra ferramenta indispensável é o `nvm` que permite instalar diferentes versões do Node sem dificuldades. E aqui já tem um **detalhe importante**, se você tentar instalar via Homebrew, ele vai ficar demorando infinitos e não vai funcionar. Para evitar esse problema, vamos instalar com o comando dado por eles no repositório oficial:

```bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
```

Depois de instalado, vamos adicionar as seguintes linhas ao **final** do `.zshrc`:

```bash
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
```

### VsCode

Com tudo instalado, falta só nosso querido editor né? Eu utilizo o VsCode, para instalar via Homebrew é só rodar:

```bash
brew install --cask visual-studio-code
```

E se você quiser usar as mesmas extensões que eu utilizo, tenho um [pacote](https://marketplace.visualstudio.com/items?itemName=willianjusten.reactavancado-extension-pack) que criei para o curso [React Avançado](https://reactavancado.com.br/).

### Conclusão

Bom, das partes essenciais para desenvolvimento web, essas são as ferramentas mais importantes. É claro que existem milhares de outros Apps por aí, mas eu confesso que gosto de partir do simples e necessário e conforme eu vou precisando, aí instalo mais coisas. Se tiver alguma coisa que você acha que faltou ou precisa falar, manda [um tweet para mim](https://twitter.com/Willian_justen).

Alguns passos dicas de como configurar o seu Macbook M1 para desenvolver na web.

Configurando o Macbook M1 para Desenvolvimento Web


## Introdução

Fala pessoal! No [post passado](https://willianjusten.com.br/migrei-meu-blog-do-gatsby-para-o-nextjs) eu falei da migração desse blog do Gatsby para o NextJS e disse a razão disso, que basicamente foi "Porque eu quis". Mas nessa migração, pude notar vários detalhes interessantes, estes relacionados a performance e uma coisa não muito falada ainda (mas que vai crescer muito), que é a Developer Experience ou Experiência para desenvolver falando em linguas tupiniquis.

Então chega de enrolar, bota para tocar a [banda Red](https://open.spotify.com/artist/01crEa9G3pNpXZ5m7wuHOk?si=UldtaNAuTe6MwLVKhBe1lg&dl_branch=1) e vem comigo!

## Performance

Ao você entrar nesse post hoje, você deve ter notado como carregou super rápido ~~assim espero né, senão deu ruim~~. Mas antes do blog ser em NextJS, ele já era super rápido com o Gatsby também. Como meu blog é gerado inteiramente estático, a diferença entre um ou outro nesse ponto acaba sendo bem mínima mesmo. Conforme você vai ver nas imagens abaixo. Os valores foram calculados pela [Vercel Analytics](https://vercel.com/analytics) que é uma ferramenta mais confiável que analisa a performance baseada nos seus usuários..

Segue aqui as notas do meu blog usando o **Gatsby**:

![Indica Nota 99 - 1.64 FCP e 1.74 LCP](/assets/img/gatsby-perf.png)

Agora segue a nota do blog atual com **NextJS:**

![Nota 100: 1.48 FCP e 1.49 LCP](/assets/img/next-perf.png)

Como dá para notar, eles praticamente tem a mesma performance, com o NextJS ganhando por muito pouquinho. Mas já me aconteceu o contrário em outros casos, onde o Gatsby era pouco melhor, ou seja, nesse ponto, os 2 são bons demais e você terá uma performance ótima de qualquer forma!

Eu ainda preciso e quero fazer algumas otimizações no blog com o NextJS, como por exemplo, usar o componente de `Image` diretamente nas imagens dos posts. É bem simples, meio que só editar no parser do Markdown, possivelmente farei isso essa semana. E outras coisinhas eu também vou analisando e melhorando, inclusive, se você achar algum bug/brecha para melhoria, me manda mensagem!

## Processo de Build

É aqui que o negócio já começa a mudar e **não é pouco não!** Uma coisa que sempre me chateou quando mudei do Jekyll para o Gatsby, é que meu build que antes tomava apenas alguns segundos, agora levava vários minutos. Mas pelo Gatsby ter tantas outras vantagens, eu acabava aceitando esse trade-off, mas quanto mais posts eu ia escrevendo, mais e mais pesado ele ia se tornando.

Para efeitos comparativos, eu utilizei a mesma máquina para gerar os builds.

```sh
# Minha configuração

Ryzen 9 3950x - 16 cores - 4.7Ghz
64Gb ram DDR5 3200mHZ
ssd m1 nvme 1Tb - 3500Mb/s leitura | 2300Mb/s escrita
Windows 11 WSL2
```

E quanto as informações de conteúdo, eu tenho cerca 190 páginas somando posts e páginas normais. Vamos aos builds!

Ignorem o formato do log do build e se atentem ao **tempo de build**. Segue primeiro o do Gatsby:

![Tempo de build: 98.23s](/assets/img/gatsby-build.jpeg)

E agora o build do NextJS com exatamente o mesmo conteúdo e mesmo layout.

![Tempo de build 3.93s](/assets/img/next-build.jpeg)

Sim! É isso mesmo que você está vendo, enquanto no Gatsby demorou `98.23s`, no NextJS durou apenas `3.93s`. Enquanto num eu posso ir pegar um cafézinho, no outro eu mal consigo piscar e tá pronto! Já pensou quantos cafés estou deixando de tomar agora? Meu estômago agradece!

Mas talvez você venha e fale:

> Ah Willian, mas seu PC é da Nasa, quero ver na Vercel/Netlify

Pois então, segue aqui o tempo de build, consegue adivinhar qual é qual?

![Um dos builds teve 3min e outro teve 58s](/assets/img/build-vercel.png)

Pois é, o NextJS é muito mais rápido no build, tanto localmente numa boa máquina (até nas ruinzinhas) quanto no servidor final. E isso pode parecer bobeira, mas se somar o tempo que perde com builds, você já poderia estar programando outra coisa.

## Developer Experience

E confesso que eu fiz esse post todo só para poder falar dessa parte aqui, que é onde realmente me fez querer migrar do Gatsby para o NextJS. A equipe por trás do NextJS está sempre preocupada em evoluir o projeto de forma bastante constante, em pequeno período de tempo tivemos:

- [NextJS 10](https://nextjs.org/blog/next-10) - primeira major version depois de um tempo, trouxe componente de Imagem, Analytics, rotas internacionalizadas. **Nenhuma breaking change**
- [NextJS 10.1](https://nextjs.org/blog/next-10-1) - veio pouco depois da v10 e já trouxe muitas melhorias em performance, refresh 3x mais rápido em dev, instalação mais rápida e mais. **Nenhuma breaking change**
- [NextJS 10.2](https://nextjs.org/blog/next-10-2) - builds ainda mais rápidos, otimização automática de fontes e mais. **Nenhuma breaking change**
- [NextJS 11](https://nextjs.org/blog/next-11) - outra major version, incluindo mais melhorias na análise de código, com linter próprio, novo componente de script, melhorias em e imagem e mais. **Nenhuma breaking change**

E agora vamos falar do Gatsby:

- [Gatsby v2 para v3](https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/) - demorou mais de 1 ano para fazer uma grande atualização. **Uma página gigante de breaking changes e mil mudancinhas para fazer**.

Acho que só pelo que escrevi ali, já deu para entender minha grande reclamação né? Por mais que o Gatsby seja legal e que a v3 tenha trazido boas melhorias, demoraram demais para isso e consequentemente criaram várias breaking changes. Isso prejudica demais a experiência do desenvolvedor.

### Modelo de Plugins x Genérico

Aqui tá um outro ponto que pode levar a uma boa discussão. O Gatsby funciona todo em cima dos seus **plugins** e por um outro lado, isso é muito bom, pois ele tem uma "marketplace" com plugin para tudo. Precisa de um plugin para trabalhar com GraphCMS? Ele tem. Gerar sitemap? Tem plugin também. Isso auxilia bastante se você precisa desenvolver algo super rápido. Mas você acaba ficando muito refém desses plugins/estruturas e o Gatsby fica considerado como `configuration over code`, onde você coda menos e configura mais.

Eu confesso que desde a época do Wordpress, nunca fui muito fã de estruturas inteiramente de plugins, porque você fica dependente que os plugins atualizem conforme a plataforma atualiza e nem sempre é assim e você acaba ficando prejudicado. Outro grande problema, é que você acaba sem saber o que está acontecendo direito, é muita "mágica", o que só dificulta ainda mais se precisar customizar algo.

Por um outro lado, no NextJS, ele não tem quase nada muito "pronto", então muitos detalhes você precisa fazer a sua implementação. Então você fica mais no `code over configuration`, ou seja, você acaba codando mais ao invés de ficar configurando coisinhas.

E se você parar pensar, tudo que é mais coisa de "configurar" do que codar, as pessoas tem dificuldades e problemas (alô Webpack?). O Gatsby tem uma boa documentação, o que ajuda bastante, mas se for comparar, eu ainda voto pelo NextJS, por ter uma API mais simples e fácil para começar. Mas, novamente, isso é algo **muito opinativo**.

## Conclusão

Como minha mãe sempre diz:

> O que seria do azul se todo mundo só gostasse do verde?

Como você pode ver pelo post, hoje eu sou "team NextJS", mas isso num impede de mudar no futuro também. Minha preocupação é que essa galera se dedique cada vez mais na experiência do desenvolvedor, para que a gente consiga entregar cada vez mais rápido e melhor.

E você? O que acha dessas duas ferramentas? Compartilha esse post entre seus amigos e levante essa discussão sobre Developer Experience, é bem legal!


Uma breve comparação entre os frameworks e a experiência de desenvolvimento.

Gatsby e NextJS: Performance e Developer Experience


## Introdução

Fala pessoal! Alguns dias atrás eu resolvi migrar meu blog do [GatsbyJS](https://www.gatsbyjs.com/) para o [NextJS](https://nextjs.org/) e postei até no meu Twitter, alguns posts [sobre isso](https://twitter.com/Willian_justen/status/1411029194566418433), [aqui](https://twitter.com/Willian_justen/status/1411091307884421123) e [aqui também](https://twitter.com/Willian_justen/status/1411097667434856449).

No [post passado](https://willianjusten.com.br/como-ter-um-blog-ajuda-a-conseguir-oportunidades) muita gente gostou da minha recomendação do Sleeping Pandora, então hoje a recomendação é da banda [Novo Amor](https://open.spotify.com/artist/0rZp7G3gIH6WkyeXbrZnGi?si=ZZOUd6ovThOUZ1iCuwSOOw&dl_branch=1), que apesar de ter um nome bem brasileiro, é de um cara do País de Gales, a voz dele é incrível e as melodias são ótimas.

Nesse post eu vou falar um pouquinho desse processo, algumas das razões e pequenos detalhes. Minha ideia é fazer uma série inteira com vários pequenos detalhes separados em posts pequenos, até para facilitar nas buscas quando alguém estiver precisando. Então nesse post daqui, eu vou só dar uma "pincelada" em algumas das coisas, pois entrarei mais a fundo realmente em posts individuais. Se você tem interesse no assunto, num deixa me [seguir no Twitter](https://twitter.com/Willian_justen) ou assinar o [feed do blog](https://willianjusten.com.br/feed.xml) no seu [agregador de conteúdo favorito](https://willianjusten.com.br/usando-um-agregador-de-conteudo).

## A pergunta que não quer calar

Lá no Twitter algumas pessoas responderam o Tweet, outros chegaram até a mandar a DM fazendo sempre a mesma pergunta:

> Mas por que você vai trocar? Não gosta mais do Gatsby? O Next é bem melhor?

E bom, a primeira resposta que eu dou para essa é bem simples:

> Mudei porque deu vontade!

Isso mesmo, não tinha uma enorme razão para mudar, o blog já tinha uma boa performance, tudo estava funcionando direitinho, num tinha nada me agoniando nem nada.

## Mudança é oportunidade para aprendizado

Eu gosto de inventar essas mudanças, pois é sempre uma boa oportunidade para estudar algo diferente e testar. Eu já trabalho há anos com Next e Gatsby, mas nunca precisei migrar de um para o outro e queria ver como era. Nesse processo posso garantir que aprendi vários detalhezinhos.

Aliás, foi a primeira vez que eu codei com a ajuda do [GitHub Copilot](https://copilot.github.com/) que inclusive [gravei esse vídeo sobre](https://www.youtube.com/watch?v=EGiXsfyBST8) e posso dizer, estou surpreso! Tiveram vários momentos que ele sugeriu coisas super úteis!

## Meu processo

Eu demorei em torno de 2-3 dias e foi bastante divertido! Eu usei bastante a [técnica do Pomodoro](https://willianjusten.com.br/tecnicas-de-aprendizado) junto com o site/app [Pomofocus.io](https://pomofocus.io/).

Lá eu meio que fui definindo as tarefas que precisava fazer e ia iniciando os ciclos de 25min, fluiu super bem!

## Sobre Gatsby e Next

Como todos sabemos, tanto o Gatsby quanto o Next são feitos com React. A grande diferença é que o Gatsby é orientado a plugins, enquanto o Next é mais livre e agnóstico, deixando você criar as soluções como você quiser.

A vantagem do Gatsby é que ele tem um [ecossistema enorme de plugins](https://www.gatsbyjs.com/plugins/), então, tudo que você precisa, tem um plugin que alguém já fez, o que acelera bastante o processo de desenvolvimento. Mas isso também pode se tornar um vilão, pois a estrutura é bem própria do Gatsby, então você precisa conhecer como as coisas funcionam para começar a usar.

O Next, por outro lado, tenta ser o mais próximo possível do Javascript/React puro, então, todas as pequenas diferenças que ele tem, são em formas de funções e não arquivos de configuração. Outra grande vantagem do Next ao meu ver, é que ele permite diferentes tipos de desenvolvimento, seja um estático (SSG), um estático incremental (ISR) ou até mesmo server side rendering (SSR), o que te deixa bastante livre na hora de desenvolver.

Se você não sabe nada sobre essas siglas, recomendo fortemente [esse vídeo](https://www.youtube.com/watch?v=X3W-YFe2_io).

## Minhas impressões da migração

O meu objetivo dessa primeira mudança, foi permanecer com o mesmo visual e mudar só "a parte debaixo do capô". Dessa forma, por ambos serem React, eu consegui quase que exportar os componentes diretamente sem problemas, não posso dizer o mesmo das outras coisas, mas num geral, foi até que tranquilo, as "dificuldades" foram mais pelo meu blog ter muito conteúdo e já ter aí seus 6 aninhos de idade.

Eu pretendo escrever em posts separados alguns dos detalhes mais interessantes/importantes, mas aqui eu vou passar por alto algumas das coisas que você deve se preocupar/atentar.

### Arquivos estáticos e build

As mudanças são:

- Do `static` (Gatstby) para `public` (Next)
- O Gatsby faz o build para `public` (então lembre-se de remover do `.gitignore`)
- O Next cria uma pasta `.next` (esse você adiciona)

### Os componentes "cascas"

No Gatsby você tem um arquivo [html.js](https://github.com/willianjusten/gatsby-course/blob/master/src/html.js) que é a casca mais interna das páginas, onde você pode colocar algumas informações que você quer que persista em todas as páginas, coisas como tema (light/dark), algumas tags de verificação/etc.

Já no Next você possui 2 arquivos, que são:

- `pages/_document` - esse é o arquivo mais externo de todos e roda **somente** no build e/ou server side, ele serve mais para extendermos o html em si, adicionando tags de verificação, meta tags comuns a todas as páginas e mais. Você pode ler [mais aqui](https://nextjs.org/docs/advanced-features/custom-document).
- `pages/_app` - esse arquivo encapsula todas as páginas, mas ele roda no server e no client. É mais escolhido para persistirmos layouts, temas, estilos, etc.

### Links

Na hora da conversão dos componentes, esse foi um passo fundamental, apesar de bobo, se você não trocar, vai quebrar tudo xD

```js
// Gatsby

import { Link } from 'gatsby'

export default function Page() {
  return <Link to="/">meu link</Link>
}

// Next

import Link from 'next/link'

export default function Page() {
  return (
    <Link href="/">
      <a>meu link</a>
    </Link>
  )
}
```

Como você pode ver, no Gatsby, o próprio `Link` já se comporta como um `a` e recebe a url através do `to`. No Next, você precisa criar um `Link` e passar um `a` dentro dele (isso é muito importante!) e o `href` ao invés de ficar no `a`, ele fica no `Link`.

### Styled Components

No Gatsby para trabalhar com `styled-components` você tem advinha o quê? Isso mesmo, um plugin! Já no Next, para fazer funcionar, você precisa de 2 detalhes:

#### Configurar o Babel

Você precisa instalar o `babel-styled-components` e também configurar o `.babelrc` com:

```json
{
  "presets": ["next/babel"],
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "ssr": true,
        "displayName": true
      }
    ]
  ],
  "env": {
    "test": {
      "plugins": [
        [
          "babel-plugin-styled-components",
          {
            "ssr": false,
            "displayName": false
          }
        ]
      ]
    }
  }
}
```

E depois disso, você precisa também alterar o `_document` para gerar os estilos no server.

```jsx
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        )
      }
    } finally {
      sheet.seal()
    }
  }

  render() {
    return (
      <Html lang="pt-BR">
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}
```

Se você não fizer essas duas etapas, o blog pode "piscar" começando sem estilo e ganhando os estilos, o que não é legal.

### Criação de páginas/posts

No Gatsby, toda a criação é gerenciada através do arquivo [gatsby-node](https://github.com/willianjusten/gatsby-course/blob/master/gatsby-node.js#L39-L110), onde você vai trabalhar com uma source de dados, que pode ser desde um conjunto de markdown, até uma API de algum CMS. Mas é importante se atentar que aqui a interface de conexão vai ser sempre em GraphQL no final.

Já no Next, a criação das páginas é feita diretamente na pasta `pages` e vai caber a você definir a estrutura dessas páginas/slugs. Exemplo, para os posts do blog, eu criei um arquivo `[slug].js` que entende que terão várias páginas dinâmicas, onde a url será aquele `slug`. Isso para mim é bem mais fácil de achar e claro de como funciona. Outra questão é que você pode usar diferentes coisas para diferentes páginas sem problemas. Quer gerar as páginas de posts através de markdown? Vai lá. Quer criar páginas de outros assuntos usando GraphQL no mesmo projeto? Pode também. Enfim, você é livre para trabalhar como desejar.

Em um outro post vou mostrar detalhadamente como se faz tanto com markdown quanto com uma API.

### Componente de Imagem

O grande trunfo que o Gatsby tinha para mim, era o componente de `gatsby-image` que fazia tratamentos, lazy-loadings, blur, etc. O NextJS na época que eu criei o blog sequer tinha um componente para trabalhar com imagens, mas desde a v10 eles criaram um componente e evoluíram super rápido!

Você pode ver a [documentação do componente](https://nextjs.org/docs/api-reference/next/image), mas um exemplo simples de uso:

```jsx
import Image from 'next/image'

export default function Home() {
  return (
    <Image
      src="/image.png"
      alt="A text explaining the image"
      width={500}
      height={500}
    />
  )
}
```

Como pode ver, é bem simples e direto. Tendo algumas propriedades legais para passar como `placeholder="blur"`, `layout="responsive"` e outras coisas mais.

### Componente de SEO

Enquanto o Gatsby utiliza o `react-helmet`, dentro do Next você pode simplesmente criar suas tags diretamente ou então utilizar o `next-seo`. Um exemplo bem simples é:

```jsx
// src/components/seo.js

import Head from 'next/head'
import config from '../config'

export default function SEO({ description, title }) {
  const siteTitle = config.title

  return (
    <Head>
      <title>{`${title} | ${siteTitle}`}</title>
      <meta name="description" content={description} />
      <meta property="og:type" content="website" />
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
      <meta property="og:site_name" content={siteTitle} />
      <meta property="twitter:card" content="summary" />
      <meta property="twitter:creator" content={config.social.twitter} />
      <meta property="twitter:title" content={title} />
      <meta property="twitter:description" content={description} />
    </Head>
  )
}
```

## Conclusão

Enfim, esses foram alguns dos detalhes que eu fui mexendo para migrar e vou fazer uns posts in-depth sobre o assunto, mas se você já se interessou em conhecer o Next. Eu tenho 2 cursos que você pode dar uma olhada:

- [React Avançado](https://reactavancado.com.br) - esse é um curso bem extenso, onde eu crio um Ecommerce de jogos do zero usando tudo que o NextJS tem a oferecer, além de testes, GraphQL, backend com Strapi e mais uma pá de coisas.
- [NextJS na Prática](https://nextjs.willianjusten.com.br/) - esse é um curso mais rápido e direto nas funcionalidades do NextJS para criar uma espécie de blog, só que para viagens.

E se você quiser mais sobre as diferenças de performance, benchmarks e etc. Fica atento para o próximo post, onde falarei mais desse assunto!


Um pouco da razão da mudança, coisas que fiz e minhas impressões.

Migrei meu blog do Gatsby para o NextJS

## Introdução

Fala pessoal, o post de hoje é patrocinado pela [Hashnode](https://hashnode.com/?source=willian), mas não saia daí! Não é um mero post para te vender algo, muito pelo contrário, o intuito desse post é te dar ideias e te ajudar a conseguir um emprego e/ou melhores oportunidades.

Seguindo a tradição dos meus posts, enquanto eu escrevo, vou ouvindo uma banda chamada [Sleeping Pandora](https://open.spotify.com/artist/4PqIQknvBTor383DY4zJXb?si=KvYkbtb2SFqNsPHS0dz4hA&dl_branch=1), eles tocam um instrumental meio psicodélico, ótimo para estudar, ler, relaxar, super recomendo!

E como vai funcionar esse post? Eu vou falar um pouco sobre nossa área, como que certas coisas funcionam e também como ter um blog pode te ajudar a se destacar numa busca por um emprego. E no final vou te dar uma dica para que você possa começar a fazer isso ainda hoje sem gastar tempo, para você parar de dar desculpas e procrastinar. Vamos lá?

## Então você quer arrumar um emprego?

Se você está começando ou até mesmo está na área, deve saber que nosso mercado de TI está super aquecido e as vagas estão aparecendo em todos os cantos, certo? Mas isso não quer dizer que estão contratando "qualquer um", junto com o crescimento do mercado, as demandas por gente mais qualificada também aumentaram. Pensando nisso, muitas empresas tem processos seletivos enormes que envolvem milhares de coisas como:

* Entrevista com RH
* Projeto de código para fazer no seu tempo
* Conversa com Devs da empresa
* Live coding
* e mais...

Ufa, parece muita coisa e é mesmo! Mas e se eu te falar que algumas dessas etapas você pode acelerar e as vezes até mesmo cortar? 

> Fala sério Willian, como é que vou pular etapas? Isso é maior mentira sua.  — Você

Eu sei que pode parecer mentira ou exagero, mas não é. O simples fato de você possuir um blog pode sim te ajudar a acelerar algumas das etapas. **Não estou dizendo que você vai pular tudo e vão te contratar na hora**, mas ter um blog ajuda bastante. E quer um grande exemplo disso? Euzinho, isso mesmo, o simples fato de eu ter um blog me ajudou em processos desde quando eu comecei a trabalhar na área e até hoje me ajuda demais em várias coisas.

Inclusive, os dois últimos prêmios que recebi, que foram o [GitHub Stars](https://stars.github.com/profiles/willianjusten/) e o [Microsoft MVP](https://mvp.microsoft.com/pt-br/PublicProfile/5004209?fullName=Willian%20%20Justen%20de%20Vasconcellos), eu ganhei exatamente pelos meus trabalhos com a comunidade e muito desse trabalho foi o blog, que alimento há mais de 6 anos.

## Ganhando visibilidade

Quando você escreve um blog, as pessoas começam a ler e começam a compartilhar entre os amigos. Querendo ou não, se você escrever bem e as pessoas gostarem do seu conteúdo, o seu nome acaba sendo espalhado. A ideia não é **ser famosinho**, eu por exemplo, nunca escrevi pensando em ser "estrelinha", o objetivo aqui é ser conhecido por ajudar os outros, por demonstrar conhecimento em determinada área e claro, aumentar minha **rede de amigos**.

Quanto mais pessoas te conhecem e mais pessoas você conhece, **mais oportunidades** aparecem. E esse era o objetivo inicial não? Viu só, não é mágica, é só lógica.

## Aprendendo em público

Pode não parecer, mas quando a gente tem um blog, a gente aprende muito e nós botamos isso em prática o tempo todo, seja falando sobre o que aprendemos, seja escrevendo os passos para caso vá precisar no futuro.

Eu pensava que isso era uma coisa mais minha, mas depois eu fui ver que na realidade, isso é mais comum do que eu imaginava. Existe inclusive o termo `Learn in Public` que é exatamente isso, aprender em público. Existem alguns posts super interessantes que falam sobre o assunto que eu recomendo:

* [Post Learn In Public - Swyx](https://www.swyx.io/learn-in-public/)
* [Talk Learn In Public - Swyx](https://www.youtube.com/watch?v=znNxtSbuBjI)
* [Learn in Public, It’s Great - Ali Abdal](https://aliabdaal.com/friendzone/learn-in-public-it-s-great-268305/)

## Seu portfólio vivo

Unindo ao tópico acima, toda vez que você escreve que está fazendo/aprendendo algo, automaticamente aquilo vira seu portfólio para demonstrar suas habilidades em X ou Y. E aí como eu falei sobre `acelerar/pular etapas` é aqui que esses posts entram. Digamos que a empresa esteja contratando pessoas para trabalhar com React e você tem diversos artigos sobre React no Blog, já mostra que você ao menos já teve contato.

Dependendo do nível dos seus posts e interação com a sua comunidade, muitas vezes a etapa de fazer o projeto é pulada, afinal de contas, a empresa já consegue analisar um pouco do seu conhecimento e código ali. Como eu falei, **ter um blog não garante vaga nenhuma**, mas pode sim ajudar a cortar essa etapa, que muitas vezes toma muito tempo e é chata. E aí fica mais para discussões de código mais alto nível, conversas com RH e talvez algum live coding para confirmar seu conhecimento.

## Importância do conteúdo ser seu!

Espero já ter te convencido que vale a pena ter um blog, mas antes de já falar do blog em si, eu preciso falar de outra coisa tão ou mais importante quanto, que é sobre ser dono do seu conteúdo. Como assim? Talvez você já deve ter visto uma imagem assim no Medium:

![Imagem do Paywall do Medium dizendo que parar ler, precisa criar conta](/assets/img/medium.jpeg)

Essa é uma prática chamada `Paywall`, onde só permite ler quem criar conta/pagar. **Isso é um absurdo!** O nosso objetivo é que o conteúdo seja livre para todos, não faz sentido criar esse tipo de bloqueio. Eu já escrevi falando mais detalhadamente [sobre isso aqui](https://willianjusten.com.br/diga-nao-ao-medium-tenha-sua-propria-plataforma/). Então, por mais que o Medium pareça uma alternativa rápida, ele não é uma plataforma legal e eu sou completamente contrário ao que eles fazem.

## Começando hoje mesmo com Hashnode


[![Hashnode - Everything you need to start blogging as a developer](/assets/img/hashnode.jpg)](https://hashnode.com/?source=willian)

Nem sempre a gente quer criar um blog do zero, ou até mesmo tem muita gente que não sabe codar, mas ao invés de usar plataformas abomináveis como o Medium, eu venho aqui falar da [Hashnode](https://hashnode.com/?source=willian).

Eles são uma plataforma de blog super simples de usar e com várias funcionalidades **MUITO LEGAIS!** E não, não tô falando por ser patrocinado, quem me conhece sabe que eu só indico coisas das quais eu realmente gosto/acho legal. A primeira grande vantagem de usar a Hashnode é que você basicamente só vai precisar se preocupar em escrever o conteúdo, num vai ter preocupações com design/gatsby/next/jekyll/whatever, então se você é daqueles que sempre diz que não faz porque é difícil, **chega de desculpas!**

Agora algumas outras vantagens que eu não conhecia da Hashnode e fui descobrindo e que nossa, achei ótimas!

#### Você pode usar seu próprio domínio

Quando você tem o seu próprio domínio, as pessoas falam "O post do fulano", "O blog do fulano". Mas quando você não tem, vira "O post do Medium" e isso dilui demais sua marca. Podendo ter seu próprio nome, isso marca muito mais. Eu tenho uma amiga que se chama [Luisa Bezerra](https://luisarbezerra.com/) e o blog dela é lá na Hashnode. Hoje ela mora na Espanha e tudo, muito chique.

#### Sem Paywall, sem propaganda, nada

Tudo que você quer é que a pessoa acesse seu post e leia. Esse negócio de ter bloqueio ou até mesmo aquelas propagandas pulando na tela são horríveis!

#### Customização

Uma coisa que eu gostei bastante na [Hashnode](https://hashnode.com/?source=willian) em relação ao Dev.to é que aqui você consegue editar o visual todo do seu blog, mudando sua logo, cores, posições. Além disso, você também consegue integrar diferentes ferramentas e até criar Widgets customizados que desejar.

#### Importar / Replicar

Se você já tiver um blog e pensar "Ah, eu já tenho um blog, nem me é útil isso daí", na realidade o Hashnode pode ser muito útil! Você pode importar seus posts do seu blog via RSS, por exemplo e com isso aumentar seu alcance pela própria rede do Hashnode, tendo assim o canonical no seu blog e uma outra fonte no Hashnode. E você pode fazer isso com um simples clique em botões. Inclusive, se você tiver posts lá naquela rede porcaria ~~Medium~~, você pode importar também e se livrar de lá!

Inclusive, eu vou começar a [migrar meus posts](https://willianjusten.hashnode.dev/), se quiser assinar a newsletter por lá, também vai poder!

#### Newsletter integrada

Dentro da Hashnode você pode habilitar a opção de ter uma newsletter, assim as pessoas podem assinar e receber aviso toda vez que um post novo for lançado, o que vai ajudar a ter leitores recorrentes, o que é muito importante para marcar sua presença.

#### Muito mais e comparativos

Eles tem muitas outras coisas, então fica até mais fácil você ver esses excelentes comparativos que eles mesmos dão:

- [Hashnode vs Medium](https://hashnode.com/vs/medium)
- [Hashnode vs Dev.to](https://hashnode.com/vs/devto)
- [Hashnode vs Wordpress](https://hashnode.com/vs/wordpress)

## Conclusão

Espero que vocês tenham entendido e visto as grandes vantagens de se criar um blog. E se vocês pensarem "Ah, mas eu não sei escrever", perca esse medo e simplesmente comece! Pense que o seu aprendizado pode ajudar muitos outros a aprender também. Os posts não precisam ser enormes, inovadores e mega complexos, o importante é você estar aprendendo e ajudando os outros, enquanto você também cresce a sua presença digital.

E se você nem sabe por onde começar, já começa [criando sua conta na Hashnode](https://hashnode.com/?source=willian) e brincando com o painel, quando você menos perceber, estará publicando seu primeiro post!


Se você está procurando um emprego ou melhores oportunidades, ter um blog pode ajudar muito!

Como ter um Blog ajuda a conseguir melhores oportunidades


## Introdução

Fala pessoal, ontem eu lancei um vídeo no meu [canal do YouTube](https://www.youtube.com/watch?v=KBJiXB48lrE) dando algumas dicas que considero essenciais para que tenhamos um bom convívio em aplicativos de mensagens como o Slack, Discord, etc.

Como é um assunto muito importante, eu resolvi trazer essas dicas aqui para o blog também, para que mais pessoas leiam e passem a seguir essas dicas. Então vamos lá!

## Dica 1: Utilize threads

Se o chat disponibilizar `threads`, utilize a mesma, crie uma mensagem e coloque o resto das mensagens dentro dela para evitar poluir.

Para quem não sabe, thread é uma maneira de criar mensagens dentro de uma mensagem em específico, isso é super útil pois organiza um contexto inteiro num ponto só.

## Dica 2: Use a busca

Antes de mandar qualquer mensagem, use a busca, possivelmente alguém já teve a mesma dúvida e você pode conseguir sua solução mais rápido ainda.

## Dica 3: Evite postar blocos grandes de código

Evite postar blocos grandes de código diretamente no chat, avise do erro/problema e então dentro da thread você coloca o código ou disponibiliza um link para um gist ou algo parecido, assim vai evitar a poluição do chat e mais possivelmente irá conseguir ajuda.

## Dica 4: Evite mandar mensagens separadas

Evite mandar um "olá boa tarde" no chat separado e depois em outra mensagem escrever, se quiser ser cordial, bote na mesma msg, lembre-se da regra 1 de não poluir.

Uma coisa muito chata em chats é quando você recebe 99 notificações que na realidade poderia ser 1 mensagem só.

## Dica 5: Ao enviar DM, seja educado mas seja direto

Ao mandar DM, mande diretamente qual seu problema, evite mandar um "Oi, tá por aí?", a graça dos chats é ser assíncrono, pode ser que a pessoa esteja ou não, mas quando ela puder, ela responde.

## Dica 6: Dê o máximo de contexto

Sempre que tiver um problema, dê o máximo de contexto possível. Diga quais os passos para quebrar, que sistema está usando, browser, se possível, deixe um repositório para que possamos testar localmente.

## Dica 7: Não só diga resolvido, mas diga como

Se alguém resolveu seu problema, agradeça e `avise`, é importante saber que foi resolvido e ainda mais importante, `como` foi resolvido.

## Dica 8: Evite repetir a mesma mensagem

A sua mensagem está salva no chat, assim que alguém ver, pode tentar te ajudar e responder. Evite ficar colocando a mesma mensagem em diferentes canais e também ficar repetindo a mesma pergunta em intervalos muito curtos, isso além de poluir o chat, pode te dar uma imagem de "pessoa incômoda" e que não espera.

## Dica 9: São pessoas do outro lado

Essa é a dica **mais importante de todas**. Lembre-se que existem pessoas reais do outro lado, seja educado e respeite as regras de conduta do chat. Uma comunidade saudável é uma comunidade que se ajuda mais.

# Conclusão

Espero que tenham gostado das dicas e passem a fazer o mesmo nos ambientes de vocês, certeza que vai ser bem efetivo e terão resultados melhores.

E se você quiser participar de uma comunidade super legal, saudável e que se ajuda bastante, entra no [Slack dos meus alunos](https://bit.ly/slack-will), eu estou sempre por lá também e é bem legal.


10 dicas para você tirar o melhor do Slack, Discord, etc.

Como usar e se comportar melhor em chats

## 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/VWuTUd0dRCM" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## Utilizando tudo que o Strapi tem a oferecer

Quando eu vou montar um backend de qualquer coisa com o Strapi, eu tento pensar em cada pedaço e ver o que posso reaproveitar, o que será único e o que vai ser repetido. Baseado nisso, eu consigo definir se vai ser `Single Type`, `Component`, `Collection Type`.

Exemplo, para partes únicas de um site, como um `Menu` eu costumo criar como um `Single Type`, afinal de contas, todas as páginas vão possuir o mesmo componente, então nem faz sentido ficar adicionando/removendo nas collections.

Agora para estruturas que podem ou não se repetir em diferentes páginas eu costumo criar como `Component`, assim eu tenho a estrutura de dados e posso reutilizar nos seus devidos lugares.

E para as páginas em si, eu gosto bastante de utilizar o `Dynamic Zone`, que permite uma área onde você pode adicionar diferentes tipos de componentes, assim a sua página se torna super genérica, podendo ir desde uma Home, até a página de about, baseado em quais componentes você for utilizar.

No vídeo acima você consegue ver mais desses pensamentos em prática.

## 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.

Nessa aula eu mostro como penso e monto o backend de um site institucional simples.

Criando toda a estrutura de um site usando o Strapi CMS

## 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/Ed6ym3TthsE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## Nem todo mundo tem tela 4k gigante

Quando for gravar seus vídeos com código, lembre-se que você pode estar enxergando lindo na sua tela, mas tem muita gente que acessa por celular e as vezes um celular bem fraquinho, com uma tela pequena. 

Pensando nisso, quando for gravar, tente seguir alguns desses passos:

- Utilize fontes bem grandes
- Se preocupe com um bom contraste para que dê para ler sem forçar
- Remova qualquer coisa que ocupe espaço em tela e não seja útil

## Evite distrações!

Quando você está ensinando algo, o que você menos quer é que o aluno perca a atenção e fique olhando outras coisas, ao invés do principal, que é sua aula.

Existem alunos com TDAH, outros que são simplesmente curiosos, então faça o seguinte:

- Esconda sua barra de tarefas (dock)
- Esconda qualquer notificação 
- Feche janelas desnecessárias
- Evite ficar trocando muito rápido entre janelas/abas


## Conclusão

Pode ter certeza que só de fazer esses pequenos ajustes, os alunos irão conseguir prestar muito mais atenção, além de aprender muito mais com isso. 

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.

São muitos anos gravando aulas, então aqui compartilho algumas coisas que descobri.

Como configuro meu editor e desktop para gravar 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/uE_-V8Ipb-Q" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## Máscara!

Bom, a ideia dessas dicas rápidas vai do código a qualquer outra coisa. Um aluno me perguntou como eu fazia para ter minha imagem redonda nos meus vídeos, então porque não ensinar isso?

Bom, eu utilizo o [OBS Studio](https://obsproject.com/), que além de ser um projeto opensource, ele funciona em qualquer Sistema Operacional, o que facilitou minha vida, já que eu uso muito Mac OS e Windows.

Para fazer esse círculo, a única coisa que você precisa fazer é adicionar um filtro de máscara e utilizar uma máscara [como essa aqui](https://github.com/willianjusten/willianjusten.com.br/blob/b64731bae5466f63f9c7a7d34d607ee812ce3006/static/assets/img/mask.png), onde ela basicamente remove tudo que é preto, deixa só a bolinha redonda.

## 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 utilizar filtro e máscara para ter seu vídeo mais legal

Como deixar a imagem da webcam redonda no OBS

## 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/2bqMX2in9AY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## Utilizando o poder do `as` polymorphic

Dentro do Styled Components existe um método muito bacana, que é a [polymorphic prop](https://styled-components.com/docs/api#as-polymorphic-prop), que serve para criar um componente e determinar que ele se comporte `como (as)` a tag que você desejar.

Isso é muito legal, pois permite que criemos diferentes estilos, mas sem perder a semântica das tags e não fiquemos reféns a usar `div` em tudo.

No vídeo acima eu mostro como utilizar o `attr` junto ao `as` exatamente para determinar estilos visuais e também que tipo de tag deve ser.

## Exemplo de código

Ao trabalhar com styled components, normalmente nós temos um tema que tem as cores e tamanhos, um exemplo seria:

```javascript
const theme = {
  colors: {
    white: '#eee',
    black: '#111',
    gray: '#333',
    lightGray: 'CCC'
  },
  sizes: {
    xsmall: '1rem',
    small: '1.2rem',
    medium: '1.6rem',
    large: '2.4rem',
    xlarge: '3.2rem',
    xxlarge: '4.0rem'
  }
}
```

Se você estiver utilizando TypeScript, nós também devemos determinar os types disponíveis para o componente, por exemplo:

```typescript
export type HeadingProps = {
  color?: keyof typeof theme.colors
  size?: keyof typeof theme.sizes
  fontWeight?: 100 | 400 | 700
  level?: 1 | 2 | 3 | 4 | 5 | 6
}
```

E aí baseado nisso, podemos criar nosso componente, tendo valores default e também podendo receber esses valores passados:

```typescript
export const Heading = styled('h1').attrs<HeadingProps>(({ level }) => ({
  as: `h${level}`
}))<HeadingProps>`
  ${({
    color = 'white',
    size: 'medium',
    fontWeight: 700
  }) => css`
    font-size: ${theme.sizes[size]};
    color: ${theme.colors[color]};
    font-weight: ${fontWeight};
  `}
`
```

Note que nós utilizamos um `level` exatamente para poder determinar qual vai ser a tag semântica e aí fazemos um concatenação da string no `as`  para ter nosso `h${level}` que pode ir de 1 a 6.

Com o componente pronto, você pode usar da seguinte maneira:

```javascript
<Heading>Esse é o h1 padrão branco, size medium e negrito</Heading>
<Heading level={2} size="xxlarge" color="gray">Esse é um h2 bem grande e cinza</Heading>
```

Como você pode ver, esse foi um exemplo bem rápido e simples, mas você pode criar toda uma estrutura para seus Headings, textos e etc. É essa maneira que bibliotecas maiores como o Material Design utilizam.

## 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.

Utilizando o poder do polymorphic no styled-components

Criando componente de Tipografia com styled-components

## 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/H5XBjyoU1E0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## Utilizando com SVG puro ou componentes React/Vue

O [projeto oficial](https://tholman.com/github-corners/) é chamado de GitHub Corners e disponibiliza um código em SVG bem simples que você consegue colocar em qualquer site de forma simples.

Mas se você quiser, também pode utilizar este [componente em React](https://projects.skratchdot.com/react-github-corner/) ou este [componente em Vue](https://gluons.github.io/vue-gh-corners/).

## 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.

Já pensou como o pessoal sempre usa aquele ícone bonitinho no canto? Agora vai saber!

Adicionando ícone de GitHub nos projetos opensource

## 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/SOgN69e9-Uc" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## Apresentando o Japanese Words

Atualmente eu estou estudando japonês e pensando nisso, eu resolvi fazer um projetinho para me ajudar no vocabulário e pronúncia. Tem um site chamado [mainichi](https://mainichi.me/) que tem uma extensão com várias palavras, então parti dali. Como pode notar, meu card é uma cópia descarada deles xD

Mas para o projeto ficar mais interessante e diferente, resolvi aplicar a Web Speech API para fazer o browser falar as palavras.

## Web Speech API

Você pode ver o projeto inteiro no [repositório oficial](https://github.com/willianjusten/japanese-words), mas vou me ater somente as partes que utilizei da Web Speech, que é bastante simples.

Os passos são:

- Primeiro pegamos as vozes disponíveis no device/browser usando o método [SpeechSynthesis.getVoices()](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/getVoices)

```javascript
const voices = window.speechSynthesis?.getVoices()
```

- Depois nós filtramos essa lista para encontrar a voz que tenha a pronúncia da língua desejada, no nosso caso, o japonês.

```javascript
const jpVoice = voices?.find((voice) => /ja-JP/.test(voice.lang))
```

- Com as vozes, nós definimos o [Utterance](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance), que seriam as configurações da leitura.

```javascript
const utterance = new SpeechSynthesisUtterance()


utterance.text = word // word é a palavra que desejamos pronunciar
utterance.lang = 'ja-JP' // língua a pronunciar
utterance.voice = voice // voz defina acima
utterance.rate = 0.8 // velocidade de fala
```

- Já com a voz determinada e as configurações de voz, agora é só usar o método para falar, que é o [speechSynthesis.speak](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/speak)

```javascript
window.speechSynthesis.speak(utterance)
```

## 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.

Nesse post eu vou mostrar como utilizei a Web Speech API para meu projeto Japanese Words.

Fazendo o browser falar por você - Web Speech API

## 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/1Y8h-R-uymM" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## Utilizando o poder do ...Spread

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 [Lodash](https://lodash.com/docs/4.17.15#merge). Mas agora graças ao [Spread Operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) nós conseguimos fazer isso de forma simples, somente utilizando o JS puro.

Vamos ver abaixo alguns exemplos na prática:

```javascript
const arrayOne = [1, 2, 3, 4]
const arrayTwo = [5, 6, 7, 8]

// juntando os arrays
const newArray = [...arrayOne, ...arrayTwo] // [1, 2, 3, 4, 5, 6, 7, 8]

// funciona com objetos também!
const props = { id: '1', name: 'Willian' }
const moreProps = { age: 30, height: 178 }

const newObj = { ...props, ...moreProps } // { id: '1', name: 'Willian', age: 30, height: 178 }

// E você também consegue sobrepôr valores
const defaultProps = { id: '1', name: 'Willian' }
const newProps = { id: '3', age: 30 }

// Chaves iguais são sobreescritas pelo último objeto passado
const propsObj = { ...defaultProps, ...newProps } // { id: '3', name: 'Willian', age: 30 }

```

## 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 fazer merge de objetos e arrays.

Juntando arrays e objetos com Spread syntax no JavaScript

## 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/2EAs2BH3Y_4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## Utilizando o poder do Intl.DateTimeFormat()

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 [moment.js](https://momentjs.com/). Mas agora graças ao [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) 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 a seguinte data
const today = new Date(); // Thu Feb 18 2021 12:55:04 GMT-0300 (Brasilia Standard Time)

// Para converter no formato mais simples do Brasil => 18/02/2021
console.log(new Intl.DateTimeFormat('pt-BR').format(date));

// Para converter em => 18 de fev. de 2021
console.log(new Intl.DateTimeFormat('pt-BR', { day: 'numeric', month: 'short', year: 'numeric'} ).format(today));

// Para converter com mês completo => 18 de fevereiro de 2021
console.log(new Intl.DateTimeFormat('pt-BR', { day: 'numeric', month: 'long', year: 'numeric'} ).format(today));

// Para converter em inglês => February 18, 2021
console.log(new Intl.DateTimeFormat('en-US', { day: 'numeric', month: 'long', year: 'numeric'} ).format(today));

// Convertendo horas com timeZone => 12:55 AM GMT+9
console.log(new Intl.DateTimeFormat('en-US', { hour: 'numeric', minute: 'numeric', timeZone: 'Asia/Tokyo', timeZoneName: 'short'} ).format(today));
```

## 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.


Nem sempre precisamos de bibliotecas enormes para resolver um problema simples.

Formatando datas 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/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/ZJpeMczm-s0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## Blocos bonitos

![Trecho de código numa interface atraente](/assets/img/raycast-untitled-2-.png)

É 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:

- [Ray.so](https://ray.so/)
- [Carbon.sh](https://carbon.now.sh/)

## 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.

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/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.

Debugando e agilizando testes na React Testing Library

## Introdução

Como todo ano eu faço, esse post aqui serve para eu revisitar um pouco de como foi meu ano e até mesmo para analisar minha evolução de acordo com os anos anteriores. Se você quiser comparar também, seguem aqui os posts dos outros anos:

* [Meu ano de 2015](https://willianjusten.com.br/meu-ano-de-2015/)
* [Meu ano de 2016](https://willianjusten.com.br/meu-ano-de-2016/)
* [Meu ano de 2017](https://willianjusten.com.br/meu-ano-de-2017/)
* [Meu ano de 2018](https://willianjusten.com.br/meu-ano-de-2018/)
* [Meu ano de 2019](https://willianjusten.com.br/meu-ano-de-2019/)

Esse ano eu ouvi bastante coisa como sempre, mas foram bem diferentes, então vão aqui algumas coisas:

* [Billie Eilish](https://open.spotify.com/artist/6qqNVTkY8uBg9cP3Jd7DAH?si=IJBr0T1AQeKmC3gcWbao-g) - pois é, também fui pego por essa onda, mas te falar, ela manda bem.
* [Trilha sonora de Doom](https://open.spotify.com/album/0KQyC28P9808r0oKKNgHvp?si=T_hkqZt3SDKWwKznjTFKVw) - esse ano teve lançamento do Doom Eternal e como um bom fã, ouvi a trilha sem parar!
* [Perturbator](https://open.spotify.com/artist/244uLu9lkdw39BJwlul3k8?si=2XLjGzzqSLey24opxGy_gA) - perfeito para trabalhar focadão com synthwave pesadão a la Cyberpunk

Mas, vamos ao que interessa e falar sobre as coisas que me aconteceram esse ano. Eu não vou falar por ordem de importância nem nada, então recomendo que leia tudo se estiver realmente intereressado xD

## Blog

Ano passado eu tive um movimento maior no meu blog principalmente pois criei um visual novo e também fiz uma conversão do Jekyll para o Gatsby. Já esse ano, apesar de ter escrito alguns posts, eu percebi que a demanda tem crescido mais na parte de vídeos, por isso eu foquei um pouco mais no YouTube também.

### Algumas métricas do blog

Como faço todo ano e gosto de comparar e analisar os dados, seguem alguns dados desse ano de 2020.

## Usuários do ano

![Lista indicando que tive uma queda de 10% de usuários no ano de 2020 em relação a 2019](/assets/img/acessos-2020.png)

Como pode ver, é a primeira vez que eu tenho uma queda de acessos no blog e foi uma queda bastante expressiva, mais de 10%! Mas isso é tudo pelo fato de eu ter postado menos e também as pessoas estarem mais focadas em conteúdos de vídeo como falei mais acima.

Apesar dessa queda, ainda tenho uma conversão muito legal de vendas em cursos, então meu blog é ainda essencial para mim, o SEO dele me ajuda bastante.

## O ano do vídeo! Canal no YouTube

As pessoas tem consumido muito mais vídeo, é impressionante a diferença! É curioso para mim, pois eu confesso que ainda prefiro texto, mas precisamos seguir o mercado né? xD

E, nesse exato momento, tomei um enorme susto com a diferença de vídeos que eu publiquei entre o ano passado e esse ano. Ano passado eu postei **8 vídeos** e esse ano eu postei **120 vídeos**, como você pode ver no gráfico abaixo! 

![Gráfico mostrando comparação entre videos de 2019 para 2020.](/assets/img/videos-publicados.png)

Mas esses números tem uma razão para serem tão maiores também. Eu criei séries maiores diretamente para o YouTube. Como:

* [Criando um ambiente de Desenvolvimento no Windows](https://www.youtube.com/playlist?list=PLlAbYrWSYTiOpefWtd6uvwgKT1R-94Zfd) - essa série eu fiz especificamente para mim, para não esquecer os passos para ter o WSL configurado no meu PC novo e nossa, muita gente usa hoje em dia!
* [Mini-curso de TypeScript](https://www.youtube.com/playlist?list=PLlAbYrWSYTiPanrzauGa7vMuve7_vnXG_) - outra série que foi um enorme sucesso, muita gente passou a ver o TS com melhores olhos depois desses vídeos, então fico feliz.
* [Curso Git e Github para iniciantes](https://www.youtube.com/playlist?list=PLlAbYrWSYTiPA2iEiQ2PF_A9j__C4hi0A) - esse foi o único conteúdo não inédito, mas que eu resolvi subir no YouTube para que mais pessoas tivessem acesso rápido (fora da Udemy)

### Mais interação e diferentes formatos

Eu não entendo nada nada de vídeo, nem editar eu sei, então eu vou aprendendo e testando as coisas. Eu ganhei uma [Elgato Key Light](https://www.elgato.com/en/gaming/key-light) do GitHub e com isso, resolvi gravar vídeos num formato onde eu apareço mais, não sou muito de aparecer, mas notei que as pessoas gostam e simpatizam mais, isso fez crescer bastante o número de inscritos.

Meus últimos vídeos tiveram um bom número de views (para o meu humilde canal), então devo continuar com essa linha:

* [Monitores, produtividade e minha preferência](https://www.youtube.com/watch?v=3yBOg0Hhmtw)
* [Comunicação Assertiva](https://www.youtube.com/watch?v=wRoE7MFvTAU)
* [Será que sou bom o suficiente?](https://www.youtube.com/watch?v=2g181ibXzEM)

### Lives

Outra coisa que eu fiz mais esse ano foram **lives** e nossa, que retorno legal! Todos os dias que eu fiz live, eu fiquei muito mais tempo que o proposto, pelo simples fato de que estava gostoso e eu nem via o tempo passar!

Se eu não sei gravar vídeos, para lives eu sou ainda pior! Me perco no chat o tempo todo, sem contar que não sei usar os programas legais que o pessoal usa, então acabo usando o [Streamyard](https://streamyard.com/) que pelo menos simplifica um pouco as coisas. Aliás, aceito ajudas nesse tópico!

Minha [última live](https://www.youtube.com/watch?v=wEK5X7TpK1E) ainda teve a participação do grande [Felipe Fialho](https://www.felipefialho.com/) e durou **mais de 2 horas** e foi demais! Espero fazer mais coisas assim no ano que vem.

## Saída da Toptal, depressão e saúde...

Eu saí da Toptal no dia 1 de Abril e quando avisei ao pessoal, a maioria pensou que era brincadeira de Primeiro de Abril, mas nem era, foi só uma engraçada coincidência. Mas por que vários pensaram que era zoeira? Tirando a questão do dia, eu já estava na empresa há quase 4 anos e sempre elogiei a empresa, não parecia que eu iria sair tão cedo, mas tudo muda né.

Ano passado eu havia mudado para um outro time, saindo das páginas públicas para trabalhar mais na plataforma em si e outro projeto. Foi bastante legal essa transição, mas depois de um tempo eu confesso que estava ficando um pouco desanimado. Junto a isso, veio a pandemia e vários dos meus planos foram por água abaixo.

Para quem me conhece, eu nunca tive vergonha de admitir que tenho depressão e uma das formas que eu trabalho com ela, são através das viagens, onde são meus momentos de descompressão. O problema é que nessa pandemia, ninguém pôde viajar e isso me deixou bem triste, além de alguns outros problemas de saúde que apareceram. 

Eu também estava com casamento marcado, mas minha namorada foi demitida da Latam (ela é comissária de voo), o que nos obrigou a adiar também, enfim, todas essas coisas foram bem pesadas.

Por causa disso tudo, eu resolvi sair da Toptal e focar em coisas que me fizessem mais feliz, mas que eu também pudesse "controlar" um pouco melhor. 

## Curso de React Avançado

Eu fiz um post falando da [história por trás do curso](https://willianjusten.com.br/a-historia-por-tras-do-meu-curso-de-react-avancado/), ele é o meu maior projeto de todos até hoje. Criar um curso de ponta a ponta, ensinando com detalhes um projeto real.

Nesse exato momento, ele já tem mais de **46 horas** e mais de **1900 alunos**! O curso já era grande quando eu imaginei ele, mas se tornou ainda mais gigantesco. Tudo pois eu estou tentando fazer nos mínimos detalhes, ensinando não só React, mas tem muita coisa de CSS, testes, Next, teorias, enfim, acho que os próprios alunos podem falar melhor do que eu.

Espero ter terminado tudo no primeiro trimestre do ano que vem, mas já posso dizer que essa foi definitivamente uma das minhas maiores conquistas do ano e da vida até hoje. Estou praticamente um ano inteiro vivendo só desse curso e ainda pretendo continuar ano que vem dessa maneira. 

Tive muito medo de largar a Toptal com um salário em dólar, ainda mais nessa última enorme alta. Mas posso dizer agora que foi a decisão mais acertada que eu tive do ano.

## GitHub Stars

Uma coisa que me pegou de surpresa (MUITA SURPRESA) foi eu ter sido escolhido como um [GitHub Star](https://stars.github.com/profiles/willianjusten/). Para quem não sabe, esse é um programa do GitHub para reconhecer pessoas que inspiram e educam nas comunidades de desenvolvimento.

Eu falo sobre o [programa nesse vídeo](https://www.youtube.com/watch?v=3qlmKllROI8), mas num resumo, o programa permite um contato direto com os times do GitHub, tanto para ver as coisas novas que estão por vir, como para discutir as features, necessidades e divulgar conhecimento. Na minha opinião, o programa está muito a frente de outros programas do gênero. O cuidado que eles andam tendo com os detalhes tem sido incrível!

Eles também me mandaram duas caixas **enormes**! [Uma cheia de Swags](https://www.youtube.com/watch?v=QjjWI51dPKc) (camisas, adesivos, bottoms) e [uma com vários equipamentos](https://www.youtube.com/watch?v=vVp8atME0n8) para melhorar nas gravações, com direito a Webcam 4k e uma Key Light! 

## Mudança e qualidade de vida

Agora no final do ano eu resolvi me mudar de apartamento, eu nunca me incomodei de ter meu computador no quarto e nem que ele era pouco iluminado, mas nessa pandemia, eu senti o quanto isso me afetava!

Não ver muito da luz do Sol durante o trabalho me deixava extremamente cansado e de péssimo humor. A outra coisa é que eu quase não sentia que estava mudando entre trabalho e descanso, afinal de contas, era tudo no mesmo quarto. Pensando nisso, eu resolvi mudar de apartamento e aos pouquinhos eu vou organizando as coisas. 

Agora tenho um quarto separado para ser só meu escritório e ele é bastante iluminado, assim como o meu quarto, então espero que isso me ajude no humor e qualidade de vida. Abaixo segue foto de como está o escritório hoje, ainda falta o apoio de pé (que no momento é uma caixa qualquer) e também o apoio para o PC (calma, não fique desesperado que ele está no chão!).

![Uma mesa de escritório com 2 monitores, um microfone, alguns bonequinhos, mouse e teclado sem fioe um computador no chão abaixo da mesa.](/assets/img/office.jpeg)

## Descanso e PS5

Como falei um pouco acima, poder viver dos meus cursos me permite cuidar um pouco mais da minha saúde e controlar meu trabalho. Pensando nisso, eu resolvi me dar umas férias e desde o dia 15/12 eu parei de codar/gravar e só vou voltar no dia 05/01. 

Nesse meio tempo, eu estou descansando bastante, jogando meu PS5, PC e várias vezes simplesmente não fazendo nada, ainda tenho dificuldades de "ficar parado", mas é importante dar esse descanso para o corpo, senão ele num aguenta e depois cobra...

## E o ano que vem?

Bom, acho que a primeira coisa que todo mundo deseja é que venha logo essa vacina e as mortes diminuam. Eu confesso que desisti de ver notícias, pois me deixava ainda mais ansioso e triste com a situação. Então tomara que isso acabe o mais breve possível!

E o resto dos planos é: acabar o curso de React Avançado, atualizar o conteúdo do curso de JS com TDD, continuar lançando mais conteúdos no YouTube que não sejam só técnicos e por fim, **viajar**! 

E você? Já pensou sobre o seu ano? Conseguiu achar coisas boas dentro de tantas confusões nesse ano calamitoso? E os planos para o ano que vem?

Espero que tenha gostado do post e qualquer coisa, comenta lá no [meu Twitter](https://twitter.com/Willian_justen).

Um ano complicado, mas com boas vitórias também.

Meu ano de 2020

## Introdução

Fala meu povo lindo!! Happy Halloween! Resolvi fazer uma surpresa bem legal para vocês hoje!

Vamos deixar de enrolação e vamos logo para o assunto. Hoje você pode ter a chance de ganhar 1 entre 10 cursos do [React Avançado](https://reactavancado.com.br/)! Isso mesmo, **nada de sorteio**, descobriu, ganhou!

E você deve estar se perguntando:

> Uai, mas como eu faço então?

Bom, aí que está, só de acessar essa página **você já está participando!** Agora cabe a você, descobrir o resto das etapas =D

Boa sorte a todos!

## E acabou!

Meus parabéns para os alunos espertos que conseguiram! E para quem não conseguiu, agora vou explicar!

Primeiro de tudo, bastava abrir o console do navegador e teria o seguinte:

```js
//// Happy Halloween
console.log('🎃🎃🎃 Happy Halloween 🎃🎃🎃')
console.log('Quer ganhar um curso na faixa??')
console.log(
  'Qual foi minha fantasia de Halloween do ano passado? Acerte e vá para https://${fantasia}Halloween.willianjusten.com.br"'
)
```

Minha fantasia do ano passado, assim como está no meu avatar, foi do `Harry Potter` ou só `Harry` mesmo. Então você podia digitar as seguintes urls:

- [harryhalloween.willianjusten.com.br](https://harryhalloween.willianjusten.com.br/)
- [harrypotterhalloween.willianjusten.com.br](https://harrypotterhalloween.willianjusten.com.br/)

Ou se você quisesse ser ainda mais "zoeiro", podia responder um `seilá` e ficaria:

- [seilahalloween.willianjusten.com.br](https://seilahalloween.willianjusten.com.br/)

E também funcionava!

E depois disso, tinha um joguinho bem divertido onde você precisava acertar `60` ou mais Frankensteins para poder ganhar e o cupom iria aparecer no terminal novamente.

## Era difícil demais acertar 60, não vale!!!

Aí é que tá, a ideia era que vocês hackeassem o jogo, não importa como, o objetivo era ganhar. E bom, diante disso, posso dizer que tive alunos muito muito criativos! Alguns dos truques foram:

- Diminuir a velocidade de animação do CSS
- Aumentar o tamanho dos bonecos para não ter como errar
- Mudar o valor do `score` direto no console
- Criar função para clickar nos elementos do Frakenstein
- E até o mais simples, digitar a variável do cupom cifrado no terminal

Você fez diferente? Manda lá [no meu twitter](https://twitter.com/Willian_justen) o que você fez!

![Ilustração de um castelo e tumbas com um Happy Halloween escrito embaixo, em um fundo roxo.](/assets/img/halloween.jpg)


Tenha a chance de ganhar 1 curso de React Avançado de graça!

Happy Halloween! Caça ao tesouro!

## Introdução

Fala pessoal, mantendo a ideia de ter vídeo, mas também ter post escrito, hoje eu vou falar sobre um vídeo que fiz recentemente que é o [Mostrando últimos posts e vídeos no Github Profile](https://youtu.be/tGYyamj4gTA).

O Github lançou essa atualização deve ter aí, por volta de 1 mês, mas ainda tem muita gente que não sabe como fazer e outros que gostariam de fazer um "algo a mais", como, por exemplo, mostrar os últimos posts escritos e coisas do gênero, então vamos aprender como faz isso.

## Versão em vídeo

Para quem quiser assistir a versão em vídeo desse post, segue aí:

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

## Sobre o Github Profile

O Github Profile, é aquela caixa de informações que aparece no perfil de algum usuário no Github, abaixo segue um print de como é o meu [perfil no Github](https://github.com/willianjusten).

![Foto da interface do Github com minha foto a esquerda e uma lista de informações a direita.](/assets/img/github-profile.png)

Existem de diferentes formas, algumas super criativas, outras mais simples, segue abaixo uma lista de alguns:

* [@sindresorhus](https://github.com/sindresorhus)
* [@ABSphreak](https://github.com/ABSphreak)
* [@AVS1508](https://github.com/AVS1508)
* [@afc163](https://github.com/afc163)

E se você quiser mais ideias, tem essa [lista cheia de inspirações](https://github.com/coderjojo/creative-profile-readme).

## Criando o repositório e configurando

Para poder criar esse perfil especial, basta que você crie um repositório com o mesmo nome do seu usuário, o meu por exemplo é [willianjusten/willianjusten](https://github.com/willianjusten/willianjusten), e no momento que você estiver criando o repositório, irá aparecer parecido com a imagem abaixo:

![Uma mensagem dizendo que você encontrou um segredo, que o repositório é um perfil especial.](/assets/img/github-profile-2.png)

Agora com o repositório criado, basta montar um arquivo `README.md` com as informações que você desejar, no meu caso, de início ficou:

```md
### <img src="https://media.giphy.com/media/hvRJCLFzcasrR4ia7z/giphy.gif" width="30px"> Hello, I'm Willian!

💻 Software Engineer and Instructor at [Willian Justen Cursos](https://willianjusten.com.br/cursos) <br>
🏡 Brazilian, Based in Petrópolis, RJ - but most of the time traveling around the world 🌎

### You can find me on

📺 [Youtube](https://www.youtube.com/WillianJustenCursos/?sub_confirmation=1) <br>
🐦 [Twitter](https://twitter.com/Willian_justen) <br>
📷 [Unsplash](https://unsplash.com/@willianjusten) <br>
⚛️ [My site](https://willianjusten.com.br) <br>

```

## Criando a Github Action

Com o `README.md` feito acima, nós já teríamos algumas informações para o nosso profile, mas eu queria ir um pouco além e colocar uma lista com meus últimos posts aqui do blog e também os últimos vídeos lá do [meu YouTube](https://www.youtube.com/WillianJustenCursos/?sub_confirmation=1).

Para fazer isso, eu utilizei essa [Github Action](https://github.com/gautamkrishnar/blog-post-workflow), que busca dados baseados em feed RSS. Na documentação ele explica o passo-a-passo e mais alguns detalhes, e no meu ficou assim:

```yml
name: Latest blog post workflow
on:
  push:
  schedule:
    # Runs every hour
    - cron: "0 * * * *"

jobs:
  update-readme-with-blog:
    name: Update this repo's README with latest blog posts
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: gautamkrishnar/blog-post-workflow@master
        with:
          comment_tag_name: BLOG
          feed_list: "https://willianjusten.com.br/feed.xml"

      - uses: gautamkrishnar/blog-post-workflow@master
        with:
          comment_tag_name: YOUTUBE
          feed_list: "https://www.youtube.com/feeds/videos.xml?channel_id=UCa12brLWzCqnxN0KOyjfmJQ"
```

Ali no `on` eu digo que quero que a action rode em todo `push` e também programo para rodar de hora em hora.

Depois eu defino as 2 `steps` do meu `job` principal, cada uma irá pegar as informações de um local. É importante notar, que eu utilizei o `comment_tag_name`, pois eu vou precisar desses nomes para a próxima etapa.

Ali na parte de blog, basta que você passe um link de feed válido, o meu no caso é o [feed.xml](https://willianjusten.com.br/feed.xml). E para o Youtube, é só passar modificando para o id do seu canal.

Com essa configuração feita, nós só precisamos editar o `README.md` para que a action saiba onde inserir os links:

```md
### 📕 Latest Blog Posts




### 📺 Latest Videos on YouTube



```

Repare que eu utilizo a regra de passar `COMMENT_TAG:START` e `COMMENT_TAG:END`, essa `comment_tag` é exatamente a que definimos lá na nossa action.

Depois disso, basta subir no Github e a action irá rodar para você e buscar as informações! =D

## Conclusão

Espero que tenham gostado dessa dica, é bem simples, mas vai permitir que você "sobressaia" com seu Github, sem contar que vai ajudar a divulgar alguns dos seus links de uma forma bem simples! =D

Como utilizar o Github Actions para manter seu profile atualizado e bonito.

Mostrando últimos posts e vídeos no Github Profile

## Introdução

Fala pessoal, mantendo a ideia de ter vídeo, mas também ter post escrito, hoje eu vou falar sobre um vídeo que fiz recentemente que é o [Mantendo projeto atualizado com Dependabot e Github Actions](https://youtu.be/zV9yZZzZGpU).

A ideia desse vídeo/post veio de um pedido de um aluno lá [no Slack dos cursos](https://willianjusten-cursos.slack.com/archives/C016MQE9CAD/p1596728688141600). Ele estava perguntando como fazer para manter o [boilerplate criado no curso React Avançado](https://github.com/React-Avancado/boilerplate) todo atualizado.

Mas vamos lá, enquanto eu escrevo esse post, eu vou ouvindo uma playlist chamada [Alone Again](https://open.spotify.com/playlist/37i9dQZF1DWX83CujKHHOn?si=GqJt0lTZSGywtV0G6VCt6A), que tem umas músicas calmas, eu confesso que estou de péssimo humor hoje, então talvez isso me acalme.

## Versão em vídeo

Para quem quiser assistir a versão em vídeo desse post, segue aí:

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

## Sobre o Dependabot

O primeiro carinha que vamos mexer é o [Dependabot](https://dependabot.com/). Para quem não conhece, esse bot nasceu fora do Github como uma forma de indicar pacotes que poderiam apresentar falhas de segurança e o mesmo enviava um Pull Request com as devidas correções para que pudessem ser revisadas.

O bot começou a ser tão utilizado e funcionar tão bem, que a Microsoft/Github decidiu comprar para que o bot passasse a ser totalmente free e mais fácilmente integrado ao sistema, o que foi um grande ganho para nós desenvolvedores =)

## Configurando o Dependabot

Nós vamos utilizar o [Dependabot](https://dependabot.com/) então para que ele não somente busque os patches de segurança, mas também busque por atualizações das nossas dependências. E esse processo é bem simples e pode ser feito de duas maneiras:

### Utilizando via UI

Para usar via UI, você precisa se [cadastrar](https://app.dependabot.com/auth/sign-up) no site e logo após se cadastrar, você vai ver uma tela similar a essa:

![Uma tela branca com um texto ao centro dizendo que ainda não adicionou nenhum repositório e um botão azul abaixo pedindo para adicionar.](/assets/img/dependabot-ui-1.png)

Basta então clicar para adicionar os repositórios e você irá ver uma lista com todos os repositórios que você tiver, similar a imagem:

![Uma lista com vários repositórios a serem adicionados.](/assets/img/dependabot-ui-2.png)

Basta selecionar os repositórios que desejar. Aconselho a escolher somente os que você realmente irá manter, caso contrário, você irá receber milhares de mensagens e pode acabar deixando de lado, o que não é o objetivo, não é mesmo?

Logo depois de adicionado, o seu projeto estará numa lista e você pode clicar na engrenagem para definir as informações desejadas, como na imagem abaixo:

![Uma tela de configuração permitindo definir quando atualizar, diretório a buscar e outras informações.](/assets/img/dependabot-ui-4.png)

Você ali pode definir quando atualizar (diariamente, semanalmente, mensalmente e até live). Eu recomendo o diariamente, que já é mais do que suficiente.

### Via dependabot.yml

Como o Github agora já funciona com o Dependabot nativamente, você pode criar um arquivo de configuração e salvá-lo dentro da pasta `.github` dentro do seu repositório.

Você pode ver [a documentação](https://docs.github.com/en/github/administering-a-repository/configuration-options-for-dependency-updates) sobre como criar o arquivo e abaixo segue o exemplo para a mesma configuração que eu fiz na UI:

```yml
version: 2
updates:
- package-ecosystem: npm
  directory: "/"
  schedule:
    interval: daily
  open-pull-requests-limit: 10
```

## Sobre o Github Actions

Vimos agora que o Dependabot irá enviar Pull Requests sempre com as atualizações, mas isso não garante que a atualização vai funcionar com o nosso código. Para isso, nós vamos utilizar o [Github Actions](https://docs.github.com/en/actions), que nos permite criar um fluxo de ações que devem ocorrer a partir de determinada ação.

No nosso caso, nós queremos rodar nosso `lint`, `tests` e `build` para garantir que tudo continua funcionando, mesmo com a nova atualização.

### Configurando o Github Actions

Para configurar, o processo é bem similar ao `dependabot.yml`, nós também teremos um arquivo `yml` com algumas configurações bem definidas.

A [documentação do Github Actions](https://docs.github.com/en/actions/reference/workflow-syntax-for-github-actions) é super completa e bem detalhada, então recomendo vocês darem uma olhadinha com carinho.

No caso do boilerplate, eu criei um arquivo em [.github/worflows/ci.yml](https://github.com/React-Avancado/boilerplate/blob/master/.github/workflows/ci.yml) com a seguinte configuração:

```yml
name: ci
on: [pull_request]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repository
        uses: actions/checkout@v2

      - name: Setup Node
        uses: actions/setup-node@v1
        with:
          node-version: 14.x

      - name: Install dependencies
        run: yarn install

      - name: Linting
        run: yarn lint

      - name: Test
        run: yarn test

      - name: Build
        run: yarn build
```

Nele eu defino que vai rodar sempre que um `pull request` for aberto, a máquina usada será uma simples do Ubuntu e a versão do Node será `14.x`.

Os comandos abaixo **são específicos** para o meu boilerplate e eles vem do meu [package.json](https://github.com/React-Avancado/boilerplate/blob/master/package.json), então você pode escolher os comandos e ordem que você desejar para o seu projeto.

## Conclusão

Após essas duas configurações, sempre que alguma atualização aparecer para aquela sua dependência, você irá receber um PR com a atualização e automaticamente o Github também vai rodar o conjunto de comandos para você, caso algo esteja errado, ele vai te indicar, assim, você vai ter segurança em atualizar ou não alguma coisa.

Espero que você tenha curtido essa dica, e se você puder se [inscrever lá no canal do YouTube](https://www.youtube.com/WillianJustenCursos/?sub_confirmation=1), ajuda demais também!

Atualizar dependências é algo bem chato e demorado, mas não precisa ser.

Mantendo seu projeto atualizado com Dependabot e Github Actions

## Introdução

Fala pessoal, o post de hoje é para falar de um assunto bem importante e que causa muitas dúvidas como: "Quando será que eu devo usar Gatsby ou Next ou Create React App?". Mas antes mesmo dessa dúvida, é importante saber as diferenças e também entender as suas necessidades, só assim a gente consegue realmente escolher o que for melhor para nossa aplicação.

Esse post será baseado em um dos vídeos que eu fiz para o meu curso [React Avançado](https://reactavancado.com.br/), no curso nós utilizamos o NextJS e por isso eu resolvi falar sobre os funcionamentos lá.

## Vídeo 

Se quiser optar por assistir a versão em vídeo, segue o vídeo abaixo:

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

## O que é um framework web?

O framework web é um sistema opinativo onde já são definidas as estruturas e ferramentas do projeto. Essas definições podem ir desde somente a estrutura de pastas, até mesmo a ferramenta que irá compilar o projeto.

## Por que usar um framework web?

Acho que já sabendo o que é, fica fácil saber o porquê de usar né? É muito mais fácil de seguir padrões já pré-determinados do que criar um completamente do zero. Sem contar que você já sai programando de fato a sua solução, ao invés de ter que pensar na parte ferramental de tudo.

## Mas, cuidado!

É uma maravilha já ter tudo prontinho para já botar a mão na massa, mas isso pode causar uma enorme dor de cabeça a longo prazo se você não souber exatamente o que usar e ir só pelo **hype** de ferramenta X ou Y.

Vou dar um exemplo que vi esses dias de um aluno perguntando:

> Galera que manja do next, eu consigo pegar um projeto já pronto em html, css e js, e passar ele para o nextjs?

E obviamente, eu perguntei, mas por que de usar o Next? E a resposta foi:

> A empresa quer umas mudanças e vai passar os projetos para o react e next para o SEO kkk

Um dos maiores erros de muitas pessoas/empresas é achar que se botar o Gatsby/Next vai ter um SEO melhor. Mas isso não é verdade e sabe por quê? Bem simples, tanto o Gatsby quanto o Next (usando SSG) vão gerar estáticos, que é exatamente "html/css/js" lá do início!

> Ou seja, você vai reescrever tudo e, no fim, trocar o famoso 6 por meia duzia.

É por isso que antes mesmo de escolher uma tecnologia/framework, é importante saber o que você precisa e o que você já tem. 

Pense assim, se você já tem uma equipe inteira proficiente em Angular, não tem razão nenhuma para trocar por React, só porque React tem "mais hype".

## Sobre o NextJS

O [NextJS](https://nextjs.org/) é um framework já "velho de guerra", mas que tem ganhado cada vez mais tração graças aos maravilhosos últimos updates deles, que aliás, não param de acontecer.

No momento que escrevo esse post, eles lançaram a [versão 9.5](https://nextjs.org/blog/next-9-5), que está absurdamente interessante, trazendo conceitos cada mais interessantes na parte do que eles chamam de "next-gen static".

E para quem não sabe, o NextJS fica embaixo do guarda-chuva da [Vercel](https://vercel.com/), antiga Zeit, que tem como fundador o [Guillermo Rauch](https://twitter.com/rauchg), que é o criador do [Socket.io](https://socket.io/) e bom, mais outras mil coisas que você usa ou já deve ter ouvido falar.

E quais seriam as características do NextJS? Bom, vou listar apenas algumas delas:

- Renderização no servidor (Server Side Rendering - SSR)
- Geração de estáticos (Static Site Generation - SSG)
- CSS-in-JS (Styled-jsx, Styled Components, Emotion, etc)
- Zero Configuration (rotas, hot reloading, code splitting…)
- Completamente extensível (controle completo do Babel/Webpack, plugins, etc)
- Otimizado para produção

E isso aí, é só a pontinha do iceberg, existem muito mais coisas e eu aconselho fortemente você dar uma olhada no site do [nextjs.org](https://nextjs.org/)

### E quais as diferenças entre Next, Gatsby e Create React App?

Para poder comparar, antes mesmo nós precisamos falar sobre os **diferentes tipos de aplicações**, que são:

- Sites estáticos (HTML/CSS/JS - SSG)
- Client Side Rendering (Single Page Application - SPA)
- Server Side Rendering (SSR)

Abaixo eu vou mostrar com umas animações fantásticas um pouco do processo de cada um.

## Como funciona um site estático (SSG - Static Site Generation)

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

Em um site estático (ou gerado estaticamente), o fluxo é bem simples:

Caso seja um site gerado estáticamente (seja usando Gatsby/Next), nós iremos fazer as requisições para uma API (ou até um conjunto de Markdown), vamos pegar esses dados e "colar" com os arquivos de template/componentes e iremos gerar a partir dali os arquivos de HTML, CSS e JS.

A partir daí, nós subimos esses arquivos em um servidor (que pode inclusive ser uma CDN) e não haverá nenhum processo mais ocorrendo no lado do servidor mais. Toda vez que um usuário requisitar uma página, nós vamos pegar o conteúdo daquela página e vamos entregar, como os arquivos foram gerados estaticamente, nenhuma chamada extra será feita e a página já vai ter incluso o HTML total da página, isso inclui as meta-tags e tudo mais.

### Vantagens

- Uso quase nulo do servidor
- Pode ser servido numa CDN (melhor cache)
- Melhor performance entre todos
- Flexibilidade para usar qualquer servidor
- Ótimo SEO

### Desvantagens

- Tempo de build pode ser muito alto
- Dificuldade para escalar em aplicações grandes
- Dificuldade para realizar atualizações constantes

### Quando usar um site estático?

- Site simples sem muita interação do usuário
- Se você é a única pessoa que publica conteúdo
- Se o conteúdo muda pouco
- Se o site é simples, sem tantas páginas
- Quando a performance é extremamente importante

**Exemplos**: Landing Page, Blogs, Portfólios

### Ferramentas que criam estáticos:

- Gatsby
- Next SSG
- Jekyll
- Hugo
- Hexo
- Procure por Jamstack / Static Generator e se surpreenda!

## Como funciona o Client Side Rendering (SPA)

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

Quando o Angular/React/Ember e outros estouraram, foi exatamente por causa dessa nova forma de trabalhar com a renderização. Antes nós estávamos acostumados em chamar estáticos ou realizar as ações todas sempre no lado do servidor, mas vieram esses frameworks e mostraram que a gente poderia fazer tudo (ou quase tudo) do lado do cliente, permitindo assim interações mais bonitas, transições de páginas elegantes e tudo mais, que naquela época não era tão simples.

O custo dessa forma, é que como tudo é gerado no lado do cliente, o markup inicial que recebemos do servidor é limitado, não tendo o conteúdo ali de fato, mas tags que serão preenchidas pelo framework depois. Então, o grande problema é que bots/scrappers acabam tendo dificuldades de pegar o conteúdo e por isso, essa forma não tem um SEO tão bom.

Como é o fluxo nessa forma?

Você primeiro cria todo o seu site seja utilizando o [Create React App](https://github.com/facebook/create-react-app) ou qualquer outra estrutura parecida. E na etapa de build, é gerado normalmente um arquivo como `app.js`, que vai ser o coração da sua aplicação.

No momento que o usuário abre o seu site, ele irá baixar o esqueleto da aplicação (HTML sem conteúdo), o mesmo terá as chamadas para o seu `app.js` e outras coisas necessárias. Assim que esses arquivos carregarem, o `app.js` fará as chamadas para API e com o retorno dos dados, irá preencher o site com as informações.

Depois disso, as próximas mudanças de rotas serão mais rápidas, já que o JS principal já foi baixado na primeira interação. Esse roteamento também será feito no lado do cliente e não no lado do servidor, o que vai permitir transições mais suaves.

### Vantagens

- Permite páginas ricas em interações sem recarregar 
- Site rápido após o load inicial
- Ótimo para aplicações web
- Possui diversas bibliotecas

### Desvantagens

- Load inicial pode ser muito grande
- Performance imprevisível
- Dificuldades no SEO
- A maioria do conteúdo não é indexado

### Quando usar o SPA?

- Quando não tem tanta necessidade de indexar informações no Google
- Quando o usuário faz muitas interações na página e não quero refreshes
- Quando as informações vão ser diferentes para cada usuário (autenticação, por exemplo)

**Exemplos**: Twitter Web, Facebook Web, Spotify Web

### Ferramentas que criam SPA:

- Create React App e similares
- Angular
- Vue
- Next/Gatsby (ambos permitem ter um funcionamento interno como SPA, mas não é o foco)

## Como funciona o Server Side Rendering (SSR)

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

O *Server Side Rendering* apesar de parecer ser o "termo mais novo" por aqui, ele é na realidade, o mais comum e mais usado, afinal, tudo que é feito em PHP, Ruby, Python é feito no lado do servidor.

O fluxo aqui é bem simples, o usuário entra no seu site, isso faz uma requisição no seu servidor, ele faz as chamadas necessárias, cria os arquivos e então entrega para o usuário. Com isso, o usuário já recebe o HTML todo já renderizado, com todo o conteúdo, meta-tags e etc, já não precisando fazer mais nenhuma chamada no lado do cliente. 

### Vantagens

- Ótimo em SEO
- Meta tags com previews mais adequados 
- Melhor performance para o usuário (o conteúdo vai ser visto mais rápido)
- Código compartilhado com o backend em Node
- Menor processamento no lado do usuário

### Desvantagens

- TTFB (Time to first byte) maior, o servidor vai preparar todo o conteúdo para entregar
- HTML maior
- Reload completo nas mudanças de rota

### Quando utilizar Server Side Rendering?

- Quando tem necessidades de um SPA, mas precisa de um loading mais rápido
- Quando o conteúdo muda frequentemente
- Quando trabalha com um número muito grande de páginas
- Quando precisa de uma boa indexação no Google

**Exemplos**: Ecommerce, Sites de Notícias

### Ferramentas que criam SSR:

- NextJS
- NuxtJS (Next mas em Vue xD)
- Razzle
- Svelte com Sapper
- Angular Universal

## Okay, mas qual eu uso então?

Como vocês viram, o Next tem a vantagem de ter o SSR, que é algo que nem o Create React App e nem o Gatsby tem, mas além disso, ele também pode gerar estáticos. E aí como escolher entre eles, já que o Next faz de tudo?

Aqui vai mais uma opinião pessoal, eu costumo utilizar o Next para projetos bem simples e rápidos e/ou que serão tão grandes que o tempo de build de um estático poderia me atrapalhar/incomodar.

E eu costumo utilizar o Gatsby para soluções como Blogs ou sites com um número não tão grande de páginas, mas que trabalhe com muitas imagens, já que para mim, o `gatsby-image` é imbatível, ele otimiza tudo de um jeito bem fácil.

E para áreas autenticadas, administrações ou aplicações web, já utilizo o SPA, já que não precisarei me preocupar com o SEO e a fluidez e o número de interações feitas nessas páginas costumam ser muito grandes, onde um tratamento de estados entre rotas é feito muito melhor com um SPA.

## Conclusão

Espero que tenham gostado desse post, apesar de eu ter feito um vídeo sobre o assunto, eu confesso que prefiro textos para ler/estudar e sei que tem muitas pessoas que são assim como eu xD

E ~~momento jabá~~, se você gostou do assunto e tem interesse em saber ainda mais coisas sobre, recomendo fazer meu [curso de React Avançado](https://reactavancado.com.br/), onde vamos trabalhar bastante com o Next e os conceitos de SSG e SSR.

Antes de escolher um deles, é importante saber as diferenças e suas necessidades.

NextJS, Gatsby ou Create React App? Entendendo os conceitos de SSR, SSG e SPA.


## Introdução

Fala pessoal, o post de hoje vai ser bem simples, mas eu achei super legal de fazer. Tem uns 3 anos que [migrei para o VS Code](https://willianjusten.com.br/migrei-para-o-vscode-e-estou-feliz/) vindo do Sublime e posso dizer que cada dia estou mais feliz com ele.

É um editor super completo e funcional e cada dia eu descubro um plugin novo legal! Hoje eu uso quase sempre os mesmos plugins e gosto bastante, para sincronizar os plugins entre meus computadores, eu sempre usei o [Settings Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync) que cumpre muito bem o seu papel, mas ele gera um gist feinho, eu queria algo mais legal e é por isso que eu aprendi a criar um pacote de extensões e agora vou mostrar para vocês como é fácil!

Enquanto isso, vamos ouvindo uma banda de rock instrumental vindo diretamente da Irlanda do Norte, que se chama [And so I watch you from afar](https://open.spotify.com/artist/7qKMNwlACMZOUdMG3acwst?si=WGQVbOOwT7CJcIWD3s6Tlw).

## De onde surgiu a ideia

Como a maioria de vocês deve saber eu finalmente lancei o módulo 1 do meu curso de [React Avançado](https://reactavancado.com.br/?blog_post=1), e como é um curso bastante vivo e participativo, um aluno pediu as extensões que eu usava.

![Petrus: @willianjustenqui Você se importaria em listar os plugins que você usa no VSCode para trabalhar com a stack usada no curso? Willian: Opa, eu tenho um gist, mas deixa eu atualizar. Eu na realidade uso bem pouca coisa...    Willian: https://gist.github.com/willianjusten/5d469f31516cda667dba94fa0948f1c3 Esse é o Gist mas verdade, é mó feio, deixa eu fazer uma lista bonitinha. Willian: Tive uma ideia melhor, vou fazer um pack instalável via Marketplace, daqui +ou- 2h eu lanço tá:  Petrus: Esse professor é outro nível! Muito obrigado!](/assets/img/extension-1.png)

E foi assim que eu tive essa ideia legal. Se você já quiser ver o pacote de extensões, o [link está aqui](https://marketplace.visualstudio.com/items?itemName=willianjusten.reactavancado-extension-pack), lá eu descrevo plugin a plugin.

Mas chega de papo furado, vamos ao que interessa.

## Inicializando a estrutura do projeto

O VS Code tem na [documentação explicando](https://code.visualstudio.com/blogs/2017/03/07/extension-pack-roundup) mais ou menos como fazer e eu segui basicamente os passos de lá, com umas pequenas diferenças.

Ele recomenda usar o [Yeoman](https://yeoman.io/) para iniciar a estrutura, então primeiro de tudo, você precisa instalar na sua máquina.

```bash
$ npm install -g yo generator-code
```

E então é só iniciar:

```bash
yo code
```

E você vai ver uma tela similar a esta:

![Uma tela dizendo bem vindo ao gerador de extensões do vs code e perguntando qual tipo eu desejo criar.](/assets/img/extension-2.png)

E aí nós escolhemos a opção `New Extension Pack`. Depois ele pergunta se deseja importar as extensões que já possui no VS Code, eu escolhi como não, pois como uso algumas extensões do lado local e outras do lado do WSL, no meu caso o gerador fica confuso.

Vão ter mais algumas perguntas e no final ele vai ter criado tudo que é necessário para você.

![Perguntas como qual o nome, identificador e descrição do pacote.](/assets/img/extension-3.png)

## Configurando e instalando localmente

A primeira coisa a fazer, é editar o seu `package.json` na chave `extensionPack` para adicionar os plugins desejados. E como saber o nome dos plugins? É só ir na aba de plugins, pesquisar pelo plugin desejado e ao clicar nele, na parte superior, ele possui o `identifier` dele, segue um exemplo:

![Imagem do plugin com seu identifier circulado em vermelho](/assets/img/inkedextension-4_li.jpg)

No meu caso, depois de adicionar todas as extensões, ficou assim:

```json
"extensionPack": [
    "editorconfig.editorconfig",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "formulahendry.auto-rename-tag",
    "mrmlnc.vscode-duplicate",
    "patbenatar.advanced-new-file",
    "waderyan.gitblame",
    "ms-vsliveshare.vsliveshare",
    "apollographql.vscode-apollo",
    "jpoissonnier.vscode-styled-components",
    "xabikos.javascriptsnippets",
    "andys8.jest-snippets",
    "skyran.js-jsx-snippets",
    "pulkitgangwar.nextjs-snippets",
    "zhuangtongfa.material-theme",
    "ms-vscode.vscode-typescript-next",
    "VisualStudioExptTeam.vscodeintellicode"
  ]
```

Depois disso, nós precisamos editar alguns detalhes para aparecer na Marketplace, que seriam:

```json
  "publisher": "willianjusten",
  "icon": "logo.png",
  "galleryBanner": {
    "color": "#030518",
    "theme": "dark"
  },
  "keywords": [
    "react",
    "typescript",
    "next",
    "styled-components",
    "graphql",
    "apollo"
  ],
  "repository": {
    "url": "https://github.com/React-Avancado/reactavancado-extension-pack"
  },
  "homepage": "https://github.com/React-Avancado/reactavancado-extension-pack",
  "bugs": {
    "url": "https://github.com/React-Avancado/reactavancado-extension-pack/issues"
  },
```

O `publisher` que é basicamente o seu identificador para o VS Code (nós vamos falar disso já já), o `icon` só para ficar bonitinho, o `galleryBanner` serve para na Marketplace o header ficar com a cor do seu plugin e bom, os outros são o que nome já diz, repositório, lugar para issues e palavras chave.

## Gerando o pacote e instalando

Depois de adicionar todas essas coisas, nós precisamos instalar a dependência que vai empacotar a nossa extensão, que é o `vsce`. Para isso:

```bash
npm install -g vsce
```

Agora para gerar o pacote, basta digitar:

```bash
vsce package
```

E ele vai gerar um pacote da seguinte forma `identifier-do-pacote-x.x.x.vsix`, onde o `x.x.x` é a `version` definida lá no `package.json`.

Para testar localmente, basta que você aperte ctrl+shift+p (ou cmd+shift+p) e escolha a opção `Install from VSIX`:

![Menu mostrando a opção Install from VSIX](/assets/img/extension-5.png)

Escolha o local onde seu pacote foi criado e mande instalar, ele vai demorar um pouquinho dependendo da quantidade de plugins que você tiver instalado e logo após, você poderá ver o seu pacote na lista de plugins instalados. Olha como fica bonitinho:

![Interface do VS Code com o pacote de extensões instalado](/assets/img/extension-6.png)

Bem legal né? Agora vamos aprender a colocar na Marketplace!

## Publicando o pacote na Marketplace

Já foi muito legal criar nosso pacote né, mas ainda mais legal é lançar isso online para que outras pessoas possam também instalar e usar!

Lembra que eu falei que iríamos conversar sobre o `publisher`, então chegou a hora. Primeiro de tudo, para poder publicar na Marketplace oficial, você precisa criar uma conta na [Visual Studio Team Service](https://visualstudio.microsoft.com/team-services/). Logo após criar a conta, você precisa criar um `Access Token` que vai permitir você publicar.

Para isso, lá no seu profile, vá no canto superior direito e escolha a opção `Security` no menu. E aí na página, escolha a opção `Personal Access Tokens` e então crie seu token, com um identifier adequado e um tempo de expiração de acordo.

Logo após criar seu token, você pode conectar na sua máquina e publicar sua extensão, rodando o comando:

```bash
vsce publish -p <token>
```

Feito isso, só aguardar um tempo até que a Marketplace consiga fazer as checagens e pronto! Seu pacote já estará online!

![Interface da Marketplace mostrando o pacote](/assets/img/extension-7.png)

E aí você pode instalar seja pelo botão de `Install` ali no site ou pesquisando dentro do próprio VS Code (esse pode demorar a indexar, então digite o identifier inteiro para achar).

## Conclusão

Espero que tenham gostado do post e agora criem seus próprios e/ou outras extensões também. O processo vai ser muito similar ao que fizemos.

E, momento de jabá, se você se interessou pelo curso e quer um desconto na faixa, [aproveite esse cupom](https://www.udemy.com/course/react-avancado/?couponCode=2C411EA38BFBEE2145C1), mas fica ligado, ele só vai até o final do mês! Então aproveite o preço mais barato possível agora!


Um jeito ainda mais fácil de compartilhar seus plugins com os outros.

Como criar e publicar um pacote de extensões do VSCode


## Introdução

Fala pessoal, há algum tempo eu venho falando sobre um novo curso que eu estava preparando junto com meu amigo [Guilherme Louro](https://twitter.com/guilhermelouro) e design do [Marcos Oliveira](https://twitter.com/vmaarcosp).

E hoje nós estamos finalmente lançando o **módulo 1** do curso! E como assim só o módulo 1? Bom, a ideia é que seja um curso mais vivo, com mais participação dos alunos e também um curso bem maior do que os outros.

No [site do curso](https://reactavancado.com.br/) nós falamos sobre todos os módulos e eu também [gravei um vídeo](https://youtu.be/zrx9kTHU-8Y) explicando ainda mais sobre todos os detalhes. Aproveita e vai lá no [site do curso](https://reactavancado.com.br/) que tem descontão!

Se você estiver interessado na criação do curso e os altos rolês que aconteceram, segue comigo aqui embaixo. Enquanto lê, aconselho a ouvir o novo [album do Tycho](https://open.spotify.com/album/3uqx22ScaYQujWq2lBvXuQ?si=CMvxg3p-SQqADx4ffbPw_Q), é um som chillwave perfeito para relaxar, programar e tudo mais que puder imaginar, eu sou apaixonado demais pela sonoridade!

## Prelúdio do curso

A ideia de criar esse curso vem desde quando criei o curso de GatsbyJS, ou seja, por volta de Agosto/Setembro de 2019 eu já estava pensando e querendo fazer esse curso.

No curso de Gatsby, eu ensinei a fazer um blog como o meu e a colocar ele em produção. Desde então tiveram muiiiitos novos blogs surgindo por aí, alguns sem quase nenhuma modificação, outros completamente diferentes. Mas o mais importante, o povo estava feliz de **estar colocando algo em produção**

## Um curso mais próximo do real

Assim como todo mundo, eu também consumo vários cursos e livros, em todos os cantos possíveis. E uma das coisas que sempre me frustrou foi ver cursos interessantes, mas que sempre me davam a sensação de terem "acabado pela metade" ou não serem parecidos com os cenários reais.

Muitos não ensinam com **testes**, outros não ensinam como criar o **código para produção**, outros não ensinam como fazer o **deploy** de fato. E, com isso, por mais que fossem cursos muito bons, acabavam criando essa sensação de "falta alguma coisa".

Foi aí que eu pensei em fazer um curso que fosse realmente de ponta a ponta. Desde a escolha das ferramentas, onde aprendemos para que serve e o porquê de escolhermos, até criação do código para produção, com boas práticas, testes e tudo mais que fosse necessário. E por fim, o deploy também, porque nada mais frustrante do que criar algo e não saber como colocar isso para que os outros vejam.

## Primeiras ideias, desistências e problemas

Quando eu resolvi criar esse curso, a primeira coisa que eu tinha em mente, é que eu não queria fazer ele sozinho. Eu queria fazer com mais alguém, para que tivessem mais discussões e que por mais que fosse um "time pequeno", ele se aproximaria de coisas reais, como diferentes cabeças/pensamentos. E foi por isso, que desde o início eu chamei o Guilherme para trabalhar comigo. Nós já fizemos muita coisa juntos, ele já me ensinou para caramba e era uma oportunidade para discutir mais.

A primeira ideia era um "Cartola da NBA", onde as pessoas iriam poder apostar nos times de acordo com as partidas e teriam os rankings e etc. Mas como é uma algo sazonal (tem meses sem jogos) e também não tem tanta gente que conhece/entende o funcionamento das partidas/playoffs, a gente acabou desistindo dessa ideia. Depois tiveram outras ideias aqui e ali, mas nada muito sólido infelizmente.

Foi aí que eu tive que fazer uma viagem pela Toptal para a Espanha e consequentemente as ideias do curso foram pausadas. Logo depois eu já engatei numa viagem para Itália/Suiça com objetivo de fotografar e só retornei ao Brasil no final do ano. Por causa disso, sequer discutimos e o projeto ficou engavetado por um tempo.

## Saída da Toptal

Durante os meses de Janeiro e Fevereiro eu estava em alguns projetos da Toptal, mas estava bastante desanimado, não eram projetos que eu estava muito feliz e eu queria criar meus cursos, meus posts para o blog.

Conversei com meu gestor dizendo que estava desanimado e já querendo sair mesmo, ele disse para me acalmar, pensar melhor e me ofereceu um outro time/projeto para eu participar. Fiquei o mês inteiro de Março nesse novo projeto, que tinha um prazo absurdo, mas com ajuda de todo o time, nós conseguimos entregar exatamente no prazo, foi bom ter essa sensação de dever cumprido, mas ao mesmo tempo eu já não queria mesmo trabalhar para ninguém, pelo menos por um tempo. Foi aí que no dia 1 de Abril, eu saí da Toptal (e nem era de mentira!).

## Foco total e novo integrante!

Assim que eu saí da Toptal, eu decidi que iria voltar a criar mais coisas, mais conteúdo e sim, eu iria fazer um curso legal!

Uma das primeiras coisas que eu fiz, foi "renascer" o meu [canal do YouTube](https://www.youtube.com/WillianJustenCursos) para começar a testar novos estilos de vídeo e conteúdo. Passei a conversar muito mais no [Slack dos Alunos](https://bit.ly/slack-will) e até brincava sobre a Toptal estar atrapalhando o meu trabalho. Fiz até aposta com aluno (Alô Bruno Melo, tá pago?)

E, claro, eu comecei a repensar no curso e a ideia de fazer um Ecommerce de jogos veio quase que na hora! Faz pouco tempo eu comprei um PC e passei a usar a Epic Games (que apesar de bonita é horrível) e também a Steam (que apesar de funcional é feia que dói).

Eu conversei com o Guilherme e ele topou a ideia, apesar de nós dois não gostarmos muito de fazer ecommerce, é um projeto muito procurado e **bastante real**. Começamos pensando no que poderia ter, imaginar umas telas e então, do nada, o [Marcos Oliveira](https://twitter.com/vmaarcosp) mandou a seguinte mensagem no twitter:

![Marcos falando: Opa! Fala Willian beleza? Cara, acompanho seu trabalho há algum tempo e você com certeza é uma das pessoas que me inspira como dev, obrigado por todo o material que você produz, de verdade, é sensacional! Hoje entrei no teu blog pra me atualizar com os últimos posts que você fez e me veio uma ideia! Se eu pudesse de alguma forma retribuir tudo que aprendi nesses anos que te acompanho. Pensei de repente, se você me autorizasse obviamente, fazer um redesign do seu blog, uma logo bacana + ui bem clean. Isso obviamente se você achar legal, se você estiver contente com o blog hoje, não teria pq um redesign, mas ofereci mesmo como uma forma de retribuir tudo que aprendi contigo. Willian respondendo: Opa, pow, fico muito agradecido pela proposta e acho foda demais! Mas se num for pedir mt, mas já pedindo. O meu blog eu mudei tem tipo 1 ano, acho que pode durar mais, até pq não sei se vou ter tempo de mexer nele. Mas eu to iniciando a ideia de um curso, que é para ensinar como criar um ecommerce com ReactJS, Next, Strapi, testes e outras coisas mais. Se tu me ajudasse na ideia do layout dessa parada, ajudaria muita coisa. E bom, não seria de graça tb, vamos conversar para vc dar seu valor](/assets/img/conversa-twitter.png)

O cara me mandou uma mensagem as **2 horas da manhã**, não teve jeito, tive que chamar para participar da ideia e ele topou!!!

## Criação de um branding e conversas

No momento que o Marcos entrou no time, eu me empolguei, pois o curso estava cada vez mais se materializando e seria ainda mais real do que eu sequer imaginava! Afinal de contas, agora teríamos um layout feito por quem entende de design, já que eu e o Guilherme até brincamos aqui e ali, mas enquanto eu não sei desenhar nada, o outro é daltônico ahhaha

O Marcos começou a fazer as mágicas dele lá, enquanto eu e o Guilherme fomos pensando na estrutura do código e definindo features e outras coisas mais. Quando ele nos mostrou a logo, foi paixão a primeira vista.

![4 imagens, a superior esquerda mostrando a logo (um controle curvilineo com a palavra won ao lado. A superior direita: mesma imagem do controle, agora explicando que é uma mistura da letra W com um controle. Imagem inferior esquerda: a tipografia utilizada na logo Nixmat. Imagem inferior direita: a paleta de cores, envolvendo 4 cores.](/assets/img/branding.png)

## Ansiedade mais de 8000 e mudança na estrutura

![Veggeta do Dragonball Z destruindo seu óculos e dizendo que é mais de 8000](/assets/img/more-8000.jpg)

Eu estava extremamente ansioso e já queria logo falar para os alunos do projeto! E fui logo dizer as boas novas no Slack, mas ao fazer isso, eu acabei criando uma cadeia de ansiedade nos outros também!

Mas o curso estava só começando a criação, faltava (ainda falta) coisa para caramba! E então eu fiquei pensando, o que eu faço agora? Não posso simplesmente dizer que só vou lançar daqui 5-6 meses, pessoal vai ficar triste/desacreditado.

Foi daí que eu conversei de novo com o Guilherme e tivemos essa ideia de lançar o curso mesmo em andamento. Assim nós poderíamos ir criando o conteúdo, ao mesmo tempo que o pessoal vai consumindo. Confesso que preciso controlar minha ansiedade quase que todos os dias, e os próximos meses serem intensos, mas vamos que vamos.

## Mais crises de ansiedade e inseguranças

Já tem tempo que eu crio cursos, mas esse é o primeiro curso que eu faço com um escopo tão grande e com essa duração bem maior (lançando por módulos a cada mês e tudo).

E por causa disso, já me bateram diversas crises. Fico direto me perguntando se vocês vão gostar, se num vai ser simples demais e vocês vão reclamar, se vai dar tudo certo, se eu vou cumprir todos os prazos direitinho.

Direto eu me confidencio com alguns amigos que me apoiam e falam para eu ficar calmo, mas essas sensações de me [sentir um impostor](https://willianjusten.com.br/sou-bom-o-suficiente/) sempre aparecem.

Noite passada eu me senti péssimo por ter tido esse atraso de 1 dia da Udemy e era 4h da manhã e eu estava no suporte reclamando com eles (parece que deu certo né?).

Enfim, por essas várias coisas, eu considero esse como um dos cursos mais importantes para mim até hoje e eu espero que ele seja bastante legal e importante para todos vocês também.

## Agradecimentos

Eu gostaria de agradecer ao apoio de todos, desde quando eu comentei sobre o desejo de fazer esse curso, vários vieram me incentivar e dizer o quanto gostam do meu conteúdo e o quanto confiam no sucesso desse novo curso.

Cada retweet, mensagem, like, inscrito em algum canto, já é uma mensagem para continuar me encorajando a criar conteúdo, que é o que mais gosto de fazer, então fica aqui, meu muito obrigado!


As primeiras ideias do curso, desistências, saída da Toptal e reinicio de tudo!

A história por trás do meu curso de React Avançado

## Introdução

Faaala pessoal, o post de hoje é também um vídeo, ultimamente tenho trabalhado mais com vídeos, tentando crescer o [humilde canal no YouTube](https://www.youtube.com/WillianJustenCursos/?sub_confirmation=1), inclusive, se puder ajudar, se inscreve lá xD

O post de hoje é para falar sobre o [Strapi](https://strapi.io/), que é um Headless CMS bem legal que eu vou utilizar no meu futuro curso chamado [React Avançado](https://reactavancado.com.br/). Vieram muitas dúvidas sobre o que era o Strapi e como ele funcionava, então no vídeo eu explico um pouco de tudo.

## Video

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

## O que é um Headless CMS?

Primeiro precisamos saber o que é um CMS né? Um CMS (sigla para *Content Management System* — Sistema de Gerenciamento de conteúdo), é um software responsável por gerenciar o conteúdo, ou seja, permitir a criação, edição e organização de um determinado conteúdo.

Eles são fundamentais, por permitirem que pessoas não técnicas, consigam adicionar o conteúdo desejado, sem precisar mexer em nenhuma linha de código. O mais famoso de todos os CMS que existem por aí, é definitivamente o [Wordpress](https://br.wordpress.org/).

![Um fluxograma mostrando o cms tradicional a esquerda e o headless cms a direita. Explicações sobre no texto abaixo.](/assets/img/traditional-vs-headless-cms.png)

Mas como você pode ver no fluxo ali acima, em um CMS tradicional, que é o caso do Wordpress e muitos outros, você tem basicamente tudo junto (conteúdo, banco de dados e também a parte do frontend), tendo já um compilado final de tudo, que é entregue para o cliente.

Enquanto no Headless CMS (tradução literal de sem cabeça), a parte do frontend não é acoplada ao CMS, mas sim uma API, que poderá alimentar diferentes tipos de código e consequentemente dão bem mais liberdade para os desenvolvedores.

Eu vi em um tweet uma citação bem legal:

> Um CMS Tradicional é como o livro que você compra em uma livraria. Quer acessar o conteúdo? Você pega o livro e lê ele, e esta é a única forma. Um Headless CMS é como comprar um eBook. Você lê ele no Amazon Kindle, ou você usa o aplicativo do Kindle no PC, Mac, smartphone ou Tablet.

Ou seja, apesar do modelo de CMS tradicional ser extremamente utilizado até nos dias de hoje, essa estrutura engessada dele acaba travando certos tipos de desenvolvimento e foi por isso que o modelo de Headless CMS foi criado e está crescendo tanto.

## Strapi 3.0

Eu conheci o Strapi quando ele estava saindo da versão 2 para a versão alfa do 3, me parecia um CMS bem promissor, mas era cheio de problemas também. Com o tempo eles foram melhorando e as últimas versões beta já estavam bem legais.

Recentemente eles receberam um [investimento de 10 milhões de dólares](https://strapi.io/blog/announcing-strapi-10m-series-a-funding) e aí finalmente lançaram a [versão estável 3.0 do projeto](https://strapi.io/blog/strapi-stable-community-edition), com direito a um belo redesign da logo e do site.

Com todo esse investimento e essa versão lançada, a minha opinião é que o CMS agora tem tudo para crescer e ser cada vez mais utilizado, assim como o Gatsby e o NextJS também estão crescendo muito.

## Vantagens do Strapi

Diferentes de outros Headless CMS como o [Contentful](https://www.contentful.com/) e o [DatoCMS](https://www.datocms.com/), onde todos os dados ficam na nuvem deles e você paga uma mensalidade por isso. O Strapi é completamente **opensource** e **self hosted**, ou seja, você controla o código e também os dados.

Na minha opinião, só essas duas coisas, já o tornam muito melhor e mais confiável. Afinal de contas, eu posso estender o código conforme eu quiser e eu quem decido onde quero que meus dados sejam hospedados, assim como controlar toda a sua estrutura de dados. Isso sem pagar por nenhum serviço externo (com exceção da hospedagem é claro).

A outra grande vantagem para mim é que ele funciona tanto com Rest API quanto com o GraphQL, podendo mudar de uma para a outra com apenas alguns cliques!

## Como instalar e usar

Para iniciar um projeto com o Strapi, basta que você digite:

```bash
npx create-strapi-app my-project
```

Ele vai te fazer algumas perguntas, como, por exemplo, qual tipo de banco de dados você vai querer usar (SQLite, MySQL, PostgreSQL ou MongoDB), o que mostra ainda mais a flexibilidade do projeto.

Após instalado, a estrutura dele é bem simples, além dele possuir uma [documentação](https://strapi.io/documentation/v3.x/getting-started/quick-start.html) bem completa para te auxiliar em cada detalhe.

Ele trabalha com 3 estruturas de dados bem importantes que são:

- `Collection Types`: a estrutura de dados base, normalmente utilizado para criarmos tabelas de produtos, usuários, jogos, enfim, o que for necessário para seu projeto.
- `Single Types`: são usados para partes específicas e singulares da sua aplicação, pense nos dados/estrutura da sua Home ou então no footer do projeto. Não faz sentido criarmos uma tabela para um footer, que sabemos que será um só não é mesmo? xD
- `Components`: são feitos para estruturas reutilizáveis, similar ao single types, mas que podemos agregar as collections. Pense, por exemplo, na estrutura de uma galeria, ela é igual para todos os cantos, mas pode ser usada na Home, mas também em outras páginas.

Você pode criar todos esses dados seja pelo próprio CMS ou também através [dos comandos da CLI](https://strapi.io/documentation/v3.x/cli/CLI.html). E, é claro, você também pode fazer na mão, basta seguir a estrutura que eles utilizam ou então estender e customizar a API do Strapi.

## Conclusão

Bom pessoal, espero que tenham gostado do post/vídeo e que algumas das principais perguntas tenham sido solucionadas. E se você quiser aprender muito mais, muito em breve estarei lançando meu novo curso de [React Avançado](https://reactavancado.com.br/) onde o módulo 2 será inteiramente focado no Strapi.

Se vocês tiverem quaisquer dúvidas relacionadas ao Strapi só mandar aí nos comentários. E se tiverem dúvidas em relação ao curso, eu fiz uma [live no YouTube](https://www.youtube.com/watch?v=PNu4ifGq3mU) onde respondi muitas perguntas, muitas mesmo! 

O que é um Headless CMS, quais as vantagens do Strapi e como ele funciona.

Introdução ao Strapi - Headless CMS


## Introdução

Fala pessoal, uffa, consegui um tempo para escrever esse post, até para explicar algumas coisas e acho que vai ser mais fácil também.

Eu estou organizando certas coisas para um curso novo que estou fazendo e olhando os reviews, eu notei a grande disparidade entre homens/mulheres nos meus cursos. Todos nós sabemos dessa questão na área, mas confesso que fiquei bem impactado ao notar nos números.

Nos últimos meses eu tive contato com várias alunas, algumas delas inclusive já lançaram até seus blogs:

- [Ilda Neta](https://ildaneta.netlify.app/)
- [Luisa Bezerra](https://www.luisabezerra.com.br/)
- [Ana Beatriz](https://anabneri.com.br/)

E ontem teve um [tweet da Mikaeri Ohana](https://twitter.com/mikaeriohana/status/1265438450997702656) que sei lá, me deixou muito feliz e eu resolvi fazer uma coisa maluca xD

Eu resolvi [doar meus cursos para todas as mulheres](https://twitter.com/Willian_justen/status/1265444818743853057). Sim, eu pedi para que se fosse mulher e quisesse fazer qualquer curso meu, era só me mandar uma mensagem pedindo.

## Chuva de mensagens e histórias

Eu não imaginei que teriam **tantas** mensagens, já era quase 11h da noite quando eu falei! Mas eu me enganei, em questão de minutos foram aparecendo mulheres de todos os cantos, algumas carinhas conhecidas, outras que nunca tinha visto, pessoas que estão começando na área ou que até mesmo nem são da área mas que almejam trocar num futuro.

Algumas eram bem diretas e já mandavam só um "vi seu tweet, como faz?", outras até se abriram e contaram suas histórias de vida, achei fantástico! Eu fiz questão de conversar uma a uma, e claro que com isso, eu fui dormir quase as 3h da manhã de tantas mensagens!

## Acordei e mais mensagens!

Como fui dormir tarde, acordei ainda tarde e quando fui ver meu twitter, já tinham mais de **600 mensagens**! Eu não tinha planejado isso, não fiz bot para responder, além do mais eu queria sim responder uma a uma.

Sem zoeira, até eu começar a escrever esse post, eu respondi mais de **500 mensagens** e o número de mensagens novas não parava!

## Mais de R$ 25.000 doados em cursos!

Isso mesmo que você leu, no momento que eu comecei a escrever esse post, foram mais de **1000 cursos resgatados** e se botar na ponta do lápis, dá por aí.

E sendo sincero, não me arrependo nem um pouquinho, para mim, foi uma das ações mais legais que eu já fiz, desde quando comecei com meus cursos há 4 anos ou mais.

## Mas infelizmente, tem espertinhos...

Com as novas políticas da Udemy, eu só consigo criar 3 cupons por mês, então eu criei um cupom genérico para que todas as mulheres pudessem usar e estava indo extremamente bem, mas infelizmente, alguns homens começaram a aparecer pegando os cursos...

De início, eu fiquei extremamente puto, confesso que a vontade era sair explanando o nome de todos. Mas isso poderia causar ainda mais confusão e até problemas futuros para mim.

Então, devido a isso, tive que desligar o cupom. Peço desculpa as mulheres que não conseguiram pegar os cursos, infelizmente a ação de alguns, acabam estragando as coisas. Mas de qualquer forma, eu estou extremamente feliz pela movimentação e pelo alcance, foram muitas mulheres!

## Ajude você também!

Minha ideia foi de coração, mas confesso que desorganizada e mal estruturada, mas se num fosse assim, também nem aconteceria hahaha

Eu fiz minha parte, mas você que está lendo, pode fazer sua parte também! Doe um curso (seja curso meu ou não!), um livro, ajude as mulheres a sua volta! Seja sua amiga da faculdade, colega de trabalho, uma mulher que você conhece e quer entrar na área, enfim, só ajude! Te garanto que você vai ficar muito feliz, assim como eu estou hoje!


Nossa área é predominante masculina, mas não precisa ser assim. Como um pequeno gesto pode ajudar.

Mulheres na tecnologia


## Introdução

Fala pessoal! Tive uma conversa com meus alunos no [Slack dos alunos](https://bit.ly/slack-will), onde fiz a seguinte pergunta:

![Fala pessoal, para o próximo curso, o que vocês preferem? TypeScript ou só JS mesmo? Typescript ganhou com 63 votos contra 13.](/assets/img/slack-question.png)

E como podem ver, a maioria votou pelo TypeScript, apesar de ter alguns que votaram para ser somente em JS, alguns desses, falando nos comentários sobre desconhecerem o TypeScript ou alguns certos preconceitos.

Pensando nisso, resolvi criar esse mini-curso para poder falar mais um pouco do TS e até tentar desmistificar certas coisas. Só que dessa vez, eu resolvi fazer diferente, ao invés de postar logo tudo de uma vez, eu vou postar **vídeos diários**, as vezes até mais de um, para ir ensinando alguns desses conceitos.

O mini-curso será postado no [meu canal do YouTube](https://www.youtube.com/WillianJustenCursos/?sub_confirmation=1), e se você não está inscrito lá, aproveita e se inscreve logo, para receber as notificações de quando os vídeos forem lançados, como eu disse, serão vários, então não perde =)

## Playlist dos vídeos

Conforme eu for lançando os vídeos, eu vou atualizando esse post, para facilitar que vocês encontrem no blog depois.

Então, lá vai o primeiro vídeo!

### 01. Introdução ao TypeScript

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

### 02. Mitos e Verdades

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

### 03. Instalando o compilador e escrevendo primeiro código

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

### 04. Criando e configurando o TSConfig

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

### 05. Types

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

### 06. Type Inference

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

### 07. Type Aliases e Union

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

### 08. Type Aliases e Intersection

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

### 09. Classes

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

### 10. Interfaces

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

### 11. Type Alias vs. Interfaces

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

### 12. Generics

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

### 13. Type Utilities

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

### 14. Decorators

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

## Conclusão

Espero que curtam os vídeos, nosso momento agora é de ficar em casa e estudar o máximo que pudermos =)


Aprenda o que é TypeScript, como funciona, por que usar e muito mais!

Mini Curso gratuito de TypeScript

## Introdução

Fala pessoal! Continuando as nossas [Dicas de CSS](https://willianjusten.com.br/series/#dicas-de-css), hoje vamos aprender a fazer animação bem legal ao fazer um hover num card. Mas essa animação pode ser feita também em um botão, ícone ou qualquer coisa que tenha uma caixa/borda ao redor.

Para essa animação nós usaremos os pseudo-seletores `:after` e `:before` e um pouquinho da mágica do `scale`.

Você pode ver todo o [código da demo aqui](https://github.com/willianjusten/labs/blob/gh-pages/card-hover-animation/index.html) e pode ver [a demo rodando aqui](https://labs.willianjusten.com.br/card-hover-animation/).

## Vídeo

<iframe width="560" height="315" src="https://www.youtube.com/embed/FV4MlZPZ2SE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## Conclusão

Novamente foi um post/vídeo bastante simples, mas que espero que seja útil para vocês irem aprendendo esses pequenos detalhes. Peço novamente que se puderem, compartilhem com seus amigos e não deixem de se [inscrever no canal do YouTube](https://www.youtube.com/WillianJustenCursos?sub_confirmation=1), eu estou começando ainda, então é muito importante que vocês me ajudem nesse início!


Aprenda a fazer uma animação bem legal utilizar os pseudo-seletores :after e :before

Criando uma animacao de Card com Hover

## Introdução

Fala pessoal, o post de hoje é na realidade uma tradução/adaptação [desse excelente post do Kent C. Dodds](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library), que é o criador da [React Testing Library](https://testing-library.com/).

Há pouco tempo eu fiz um [vídeo/post](https://willianjusten.com.br/criando-um-react-custom-hook-com-testes/) ensinando a criar um custom hook do zero com testes e utilizei essa biblioteca, que para mim é a melhor para o ecossistema React atual.

Bom, vamos lá, enquanto escrevo esse post, vou ouvindo um cara chamado [Malaki](https://open.spotify.com/artist/6DWp3hFGq7c3nyQ3AT7RDF?si=BEE2nTzYTC6jOyNO7mCYhw), um irlandês natural de Dublin (cidade que tenho no coração) que canta um hip-hop misturado com um R&B e outras coisas mais, é um som bom, pode conferir.

## Notas

Cada erro foi organizado pelo seguinte nível de importância:

- `baixa`: é mais da opinião do Kent e você pode ignorar se quiser e não vai ter nenhum problema.
- `média`: você pode começar a ver bugs, perder confiança nos testes ou fazendo trabalho que nem precisa.
- `alta`: definitivamente veja isso. Muito provavelmente você está perdendo confiança dos testes e provavelmente terá testes problemáticos.

### Usar `wrapper` como nome da variável no retorno da função `render`

> Importância: baixa

```javascript
// ❌
const wrapper = render(<Example prop="1" />)
wrapper.rerender(<Example prop="2" />)

// ✅
const {rerender} = render(<Example prop="1" />)
rerender(<Example prop="2" />)
```

O nome `wrapper` é uma coisa velha que vem do `enzyme` e não precisamos disso aqui. O valor do retorno de `render` não está "encapsulando" nada. É simplesmente um conjunto de utilitários (que graças a dica mais abaixo) na maioria das vezes você nem vai precisar mesmo.

**Dica: use destructure do que você precisa do `render` ou então chame de `view`**

### Usar `cleanup`

> Importância: média

```javascript
// ❌
import {render, screen, fireEvent, cleanup} from '@testing-library/react'

afterEach(cleanup)

// ✅
import {render, screen, fireEvent} from '@testing-library/react'
```

Já tem um bom tempo que o `cleanup` acontece automaticamente (suportado pela maioria dos frameworks de teste) e você não precisa se preocupar com isso. Você pode ver [mais aqui](https://testing-library.com/docs/react-testing-library/api#cleanup).

 **Dica: não use `cleanup`**

### Não estar usando `screen`

> Importância: média

```javascript
// ❌
const {getByRole} = render(<Example />)
const errorMessageNode = getByRole('alert')

// ✅
render(<Example />)
const errorMessageNode = screen.getByRole('alert')
```

O `screen` foi adicionado na [versão 6.11.0](https://github.com/testing-library/dom-testing-library/releases/tag/v6.11.0). Ele vem do mesmo import que você pega o `render`:

```javascript
import {render, screen} from '@testing-library/react'
```

O benefício de usar o `screen` é que você não precisa ficar atualizando a chamada do destructuring do `render` para cada query que você precisar. Além disso, basta digitar `screen` e deixar a mágica do autocomplete fazer o resto para você.

A única exceção para isso é se você estiver definindo um `container` ou `baseElement`, o que muito provavelmente você nem deveria estar fazendo.

Você também pode usar `screen.debug` ao invés de `debug`.

**Dica: use `screen` para queries e debug**

### Usar a asserção errada

> Importância: alta

```javascript
const button = screen.getByRole('button', {name: /disabled button/i})

// ❌
expect(button.disabled).toBe(true)
// error message:
//  expect(received).toBe(expected) // Object.is equality
//
//  Expected: true
//  Received: false

// ✅
expect(button).toBeDisabled()
// error message:
//   Received element is not disabled:
//     <button />
```

A asserção `toBeDisabled` vem do [jest-dom](https://github.com/testing-library/jest-dom). É extremamente recomendável usar o `jest-dom` pois ele dá mensagens de erro muito mais claras.

> Dica do Willian: sempre ao escrever um teste, faça a pergunta a você e que resposta você esperaria receber. Quanto mais explicada é a resposta, mais fácil de você entender o problema e corrigir, se você receber só um "esperava `false` e veio `true`" as vezes não vai te ajudar.

### Encapsular tudo no `act` de forma desnecessária

> Importância: média

```javascript
// ❌
act(() => {
  render(<Example />)
})

const input = screen.getByRole('textbox', {name: /choose a fruit/i})
act(() => {
  fireEvent.keyDown(input, {key: 'ArrowDown'})
})

// ✅
render(<Example />)
const input = screen.getByRole('textbox', {name: /choose a fruit/i})
fireEvent.keyDown(input, {key: 'ArrowDown'})
```

Algo bem comum é ver as pessoas usando o `act` em tudo, exatamente para evitar aqueles warnings enormes do React. Mas o `render` e o `fireEvent`, por exemplo, já são encapsulados no `act`, então não faz necessidade encapsular novamente.

E na maioria das vezes, se você está vendo os warnings do `act`, não deve ser só silenciado, mas está provavelmente lhe avisando que algo inesperado está acontecendo no seu teste. Você pode entender mais [sobre isso nesse post](https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning).

**Dica: aprenda quando o `act` é necessário e evite encapsular em tudo desnecessariamente**

### Usar queries erradas

> Importância: alta

```javascript
// ❌
// assumindo que você tem este DOM para trabalhar:
// <label>Username</label><input data-testid="username" />
screen.getByTestId('username')

// ✅
// mude o DOM para ser acessível ao associar a label e definindo seu tipo
// <label for="username">Username</label><input id="username" type="text" />
screen.getByRole('textbox', {name: /username/i})
```

Na documentação, existe [uma página sobre qual query usar](https://testing-library.com/docs/guide-which-query), exatamente para que você tente utilizar a que mais faz sentido com o seu teste, para garantir mais confiança.  

### Usar `container` para buscar elementos

Uma sub-seção para "Usar queries erradas" eu quero falar sobre usar query no `container` diretamente.

```javascript
// ❌
const {container} = render(<Example />)
const button = container.querySelector('.btn-primary')
expect(button).toHaveTextContent(/click me/i)

// ✅
render(<Example />)
screen.getByRole('button', {name: /click me/i})
```

Nós queremos garantir que os usuários possam interagir com sua UI e se você usa o `querySelector` nós perdemos muito dessa confiança, o teste fica mais difícil de ler e vai quebrar mais frequentemente. Isso vai de mãos dadas para a próxima seção:

### Não buscar pelo texto

Continuando sobre "Usar queries erradas", quero falar o porquê eu recomendo que você busque pelo *texto atual* (no caso que tiver localização, recomendo usar a linguagem padrão), ao invés de testar IDs ou outros mecanismos.

```javascript
// ❌
screen.getByTestId('submit-button')

// ✅
screen.getByRole('button', {name: /submit/i})
```

Se você não buscar pelo texto de verdade, você vai ter um trabalho extra para garantir que os textos estão sendo aplicados corretamente. A maior reclamação que eu ouço sobre isso é que dessa forma, os editores acabam quebrando os testes. Minha refutação sobre isso é que se o editor muda "Username" para "Email", essa é uma mudança que eu definitivamente vou querer saber (pois provavelmente precisarei mudar na minha implementação). Outra coisa, é que se esse tipo de situação quebra alguma coisa, corrigir esse problema não vai tomar praticamente nenhum tempo, vai ser fácil de achar e corrigir.

Então o custo de fazer dessa forma é muito baixo e o benefício é que você garante que seus textos estão sendo aplicados corretamente e seus testes são mais fáceis de escrever e ler.

Devo mencionar que nem todo mundo concorda comigo, sinta-se a vontade para ler mais [nessa thread no twitter](https://twitter.com/kentcdodds/status/1203179007644012544).

### Não usar `*ByRole` na maior parte do tempo

Nas versões mais recentes, as queries do `*ByRole` foram seriamente melhoradas (graças ao trabalho do [Sebastian Silbermann](https://twitter.com/sebsilbermann)) e agora são a abordagem número um para buscar o componente. Seguem alguns dos meus recursos favoritos.

A opção `name` permite você buscar elementos pelo seu [nome acessível](https://www.w3.org/TR/accname-1.1/), que é o que é lido pelos leitores de tela e funciona até quando o elemento tem seu texto separado em diferentes elementos. Por exemplo:

```javascript
// assumindo que você a seguinte estrutura de DOM para trabalhar
// <button><span>Hello</span> <span>World</span></button>

screen.getByText(/hello world/i)
// ❌ falha com o seguinte erro:
// Unable to find an element with the text: /hello world/i. This could be
// because the text is broken up by multiple elements. In this case, you can
// provide a function for your text matcher to make your matcher more flexible.

screen.getByRole('button', {name: /hello world/i})
// ✅ funciona!
```

Uma das razões para as pessoas não usarem o `*ByRole` é porque elas não estão familiares com os papéis implícitos nos elementos. [Aqui vai uma lista dos papéis na MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles). Outro dos meus recursos favoritos do `*ByRole` é que se você não for capaz de encontrar um elemento com o papel especificado. Além de mostrar no log todo o DOM, que é o normal que você recebe ao usar o `get*` ou `find*`, ele também vai mostrar todos os papéis que você pode buscar!

```javascript
// assumindo que temos essa estrutura de DOM para trabalhar
// <button><span>Hello</span> <span>World</span></button>
screen.getByRole('blah')
```

Isso irá falhar com a seguinte mensagem de erro:

```javascript
TestingLibraryElementError: Unable to find an accessible element with the role "blah"
Here are the accessible roles:
  document:
  Name "":
  <body />
  --------------------------------------------------
  button:
  Name "Hello World":
  <button />
  --------------------------------------------------
<body>
  <div>
    <button>
      <span>
        Hello
      </span>
      <span>
        World
      </span>
    </button>
  </div>
</body>
```

Repare que nem precisamos adicionar `role=button` ao nosso `button`, afinal ele já possui esse papel. É um papel implícito, o que nos leva ao próximo tópico...

### Adicionar `aria-`, `role` e outros atributos incorretamente

> Importância: alta

```javascript
// ❌
render(<button role="button">Click me</button>)

// ✅
render(<button>Click me</button>)
```

Tacando atributos de acessibilidade de qualquer maneira não é somente desnecessário (como o caso acima), como também pode confundir os leitores de tela e os usuários. Os atributos de acessibilidade devem ser utilizados onde realmente precisam, nos casos onde a semântica do HTML não satisfaz o caso de uso (como quando você está criando um elemento não nativo e quer fazê-lo nativo, como um [autocomplete](https://github.com/downshift-js/downshift)).

Se é isso que você está construindo, certifique-se de usar uma biblioteca existente que faça isso de forma acessível ou siga as práticas do WAI-ARIA. Eles geralmente têm [ótimos exemplos](https://www.w3.org/TR/wai-aria-practices/examples/accordion/accordion.html).

**Dica: evite adicionar atributos desnecessários ou incorretos**

### Não usar o `@testing-library/user-event`

> Importância: média

```javascript
// ❌
fireEvent.change(input, {target: {value: 'hello world'}})


// ✅
await userEvent.type(input, 'hello world')
```

O [@testing-library/user-event](https://github.com/testing-library/user-event) é um pacote criado em cima do `fireEvent`, mas ele fornece vários métodos que se assemelham mais às interações do usuário. No exemplo acima, o `fireEvent.change` vai simplesmente disparar um evento de `change` no input. No entanto, o `type` da chamada vai ativar para os eventos de `keyDown`, `keyPress` e `keyUp`, o que é muito mais próximo da interação real de um usuário. Isso pode ser útil para trabalhar com bibiliotecas que talvez não possuam um `listener` para o evento de `change`.

Ainda estamos trabalhando no `@testing-library/user-event` para garantir que ele entrega o que promete: disparar todos os mesmos eventos que um usuário irá fazer em uma específica ação. Não acho que estamos lá ainda e por isso não está dentro da `@testing-library/dom` (mas é possível que estará no futuro). Entretanto, estou confiante o suficiente para recomendar que você dê uma olhada e utilize nos seus testes ao invés do `fireEvent`.

**Dica: use o @testing-library/user-event no lugar do fireEvent sempre que possível.**

### Usar `query*` variantes para tudo exceto checar a não-existência

> Importância: alta

```javascript
// ❌
expect(screen.queryByRole('alert')).toBeInTheDocument()

// ✅
expect(screen.getByRole('alert')).toBeInTheDocument()
expect(screen.queryByRole('alert')).not.toBeInTheDocument()
```

A única razão pela qual a variante da consulta `query*` é exposta é para você ter uma função que você pode chamar, que não gere um erro se nenhum elemento for encontrado para corresponder à consulta (ela retornará `null` se nenhum elemento for encontrado). A única razão pela qual isso é útil é verificar se um elemento não é renderizado na página.

**Dica: só use `query*` variantes para fazer asserções de quando um elemento não deve ser encontrado.**

### Usar o `waitFor` para buscar elementos que podem ser buscados com `find*`

> Importância: alta

```javascript
// ❌
const submitButton = await waitFor(() =>
  screen.getByRole('button', {name: /submit/i}),
)

// ✅
const submitButton = await screen.findByRole('button', {name: /submit/i})
```

Essas duas pequenas partes de código são basicamente equivalentes (`find*` usa o `waitFor` embaixo dos panos), mas o segundo é mais simples e a mensagem de erro que você vai encontrar será melhor.

**Dica: use `find*` sempre que você quiser buscar por algo que talvez não esteja disponível logo de início.**

### Passar uma callback vazia para o `waitFor`

> Importância: alta

```javascript
// ❌
await waitFor(() => {})
expect(window.fetch).toHaveBeenCalledWith('foo')
expect(window.fetch).toHaveBeenCalledTimes(1)

// ✅
await waitFor(() => expect(window.fetch).toHaveBeenCalledWith('foo'))
expect(window.fetch).toHaveBeenCalledTimes(1)
```

O propósito do `waitFor` é permitir que você espera para que alguma coisa específica aconteça. Se você passar uma callback vazia, pode até funcionar, muitas vezes você só precisa de "mais um tick no event loop". Mas fazendo isso, você estará criando um teste frágil que pode facilmente falhar se você refatorar sua lógica assíncrona.

**Dica: espere pela específica asserção dentro do `waitFor`**

### Ter múltiplas asserções para uma mesma `waitFor` callback

> Importância: baixa

```javascript
// ❌
await waitFor(() => {
  expect(window.fetch).toHaveBeenCalledWith('foo')
  expect(window.fetch).toHaveBeenCalledTimes(1)
})

// ✅
await waitFor(() => expect(window.fetch).toHaveBeenCalledWith('foo'))
expect(window.fetch).toHaveBeenCalledTimes(1)
```

Digamos que, no exemplo acima, `window.fetch` foi chamado duas vezes. Portanto, a chamada `waitFor` falhará, no entanto, teremos que aguardar o tempo limite antes de vermos a falha no teste. Ao colocar uma única asserção, podemos esperar que a interface do usuário se estabilize no estado em que queremos verificar e também falhar mais rápido se uma das asserções acabar falhando.

**Dica: use uma asserção por callback**

### Gerando efeitos colaterais com `waitFor`

```javascript
// ❌
await waitFor(() => {
  fireEvent.keyDown(input, {key: 'ArrowDown'})
  expect(screen.getAllByRole('listitem')).toHaveLength(3)
})

// ✅
fireEvent.keyDown(input, {key: 'ArrowDown'})
await waitFor(() => {
  expect(screen.getAllByRole('listitem')).toHaveLength(3)
})
```

O `waitFor` foi feito para coisas onde você não tem determinado o tempo entre uma ação que você fez e a asserção criada. Por esse motivo, o retorno de chamada pode ser chamado (ou verificado quanto a erros) um número não determinístico de vezes e frequência (é chamado tanto em um intervalo quanto em quando há mutações no DOM). Portanto, isso significa que seu efeito colateral pode ser executado várias vezes!

Isso também significa que você não pode usar asserções de `snapshot` com o `waitFor`. Se você deseja usar um `snapshot`, primeiro aguarde uma asserção específica e, em seguida, você pode criar seu `snapshot`.

**Dica: coloque os efeitos colaterais fora da callback do `waitFor` e reserve a callback somente para asserções.**

### Não usar os plugins do ESlint para a Testing Library

> Importância: média

Se você quiser evitar todos esses erros comuns, então esse plugins oficiais irão ajudar muito:

- [eslint-plugin-testing-library](https://github.com/testing-library/eslint-plugin-testing-library)
- [eslint-plugin-jest-dom](https://github.com/testing-library/eslint-plugin-jest-dom)


## Conclusão

A grande razão para eu ter traduzido esse artigo, é porque ele é espetacular e quanto mais gente ver, melhor. Eu posso afirmar que aprendi muita coisa no post e inclusive cometia alguns dos erros!


Aprenda com os erros dos outros e melhore seu código também.

Erros comuns com o React Testing Library


## Introdução

_Deixando claro que esse não é um post patrocinado e eu não ganho nada por isso. É somente para divulgar esse belo trabalho do Zeno Rocha._

Já tem um certo tempo que eu resolvi migrar para o Windows/Linux e utilizar um desktop ao invés do meu Macbook Pro. Inclusive fiz [um curso sobre ambiente de Desenvolvimento no Windows](https://www.youtube.com/watch?v=YcR8pKvjx44&list=PLlAbYrWSYTiOpefWtd6uvwgKT1R-94Zfd) e falei um pouquinho sobre isso [nest post](https://willianjusten.com.br/novo-curso-criando-um-ambiente-de-desenvolvimento-no-windows/).

E uma coisa chata que acontece quando você está migrando, é que precisa configurar tudo de novo e isso inclui os temas, as vezes nem lembramos que cores usávamos. Além disso, cada lugar fica de uma cor diferente, o que causa até um certo atrito.

Sem mais delongas, vamos lá, enquanto escrevo esse post vou ouvindo uma [cantora australiana incrível](https://open.spotify.com/artist/355SqtHY4qKt2wIXrWku0c?si=6im3rYbcS7GJR0EfavE9ZA).

## Conhecendo o Dracula

O [Dracula Theme](https://draculatheme.com/) foi criado pelo [Zeno Rocha](https://zenorocha.com/) em 2013 quando ele teve o seu laptop roubado e ele precisou reconfigurar tudo.

Desde então, esse é um dos temas mais utilizados de todos, tem mais de **12 mil stars no Github** e o tema foi portado para mais de **100 aplicações**! Indo desde o Sublime Text, VS Code, até mesmo o Telegram!

## Dracula PRO

Mesmo depois de todo esse sucesso, o Zeno achou que ainda faltavam coisas que poderiam ser melhoradas e aplicadas, com um tratamento mais **premium**. E foi assim que nasceu o [Dracula PRO](https://draculatheme.com/pro/).

Para o Dracula PRO, ele fez um estudo mais profundo na teoria de cores, para escolher cores que tivessem um bom contraste (inclusive testado pela WCAG 1.0 level AA spec) e que permitissem ter uma melhor legibilidade.

Além disso, ele escolheu 4 fontes que funcionassem perfeitamente com o tema e que dessem suporte a ligatures, você pode ver no vídeo abaixo o que é:

<video autoplay muted loop style="display: block; margin: 20px auto; max-width: 80%">
  <source src="https://draculatheme.com/static/video/ligatures.mp4" type="video/mp4">
</video>

Além disso, ainda o pacote vem com um ebook sobre produtividade, um screencast sobre produtividade usando o Alfred, wallpapers e outras coisinhas mais.

E claro, com a vantagem que você poderá ter todas as suas aplicações utilizando o mesmo sistema de cores, diminuindo muito a fricção ao mudar de janela.

## Conclusão

Se você estava procurando uma solução para ter um tema unificado nas suas diversas aplicações, dá uma olhada no [Dracula PRO](https://draculatheme.com/pro/), certeza que vai se impressionar com a qualidade.


Deixe seu editor, terminal e muito mais com seu tema favorito.

Um tema para todos os lugares: Dracula PRO


## Introdução

Fala pessoal! Continuando as nossas [Dicas de CSS](https://willianjusten.com.br/series/#dicas-de-css), hoje vamos aprender a fazer uma micro interação bem legal ao criar um tooltip.

E para criar nossa interação, nós vamos utilizar o `clip-path`, se você nunca utilizou, não se preocupe, no vídeo vamos aprender. Fica aqui também, [um post completo](https://willianjusten.com.br/mask-e-clip-com-css-e-svg/) explicando como utilizar o `clip-path` com CSS e também SVG.

Você pode ver todo o [código da demo aqui](https://github.com/willianjusten/labs/blob/gh-pages/tooltip-clip-path/index.html) e pode ver [a demo rodando aqui](https://labs.willianjusten.com.br/tooltip-clip-path/).

## Vídeo

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

## Conclusão

Novamente foi um post/vídeo bastante simples, mas que espero que seja útil para vocês irem aprendendo esses pequenos detalhes. Peço novamente que se puderem, compartilhem com seus amigos e não deixem de se [inscrever no canal do YouTube](https://www.youtube.com/WillianJustenCursos?sub_confirmation=1), eu estou começando ainda, então é muito importante que vocês me ajudem nesse início!


Aprenda a fazer uma micro interação bem sútil, mas que vai fazer toda a diferença no seu layout.

Criando um tooltip animado com CSS clip-path 


## Introdução

Fala pessoal, o post de hoje é sobre uma coisa bem interessante que eu não tinha a menor ideia e acabei de descobrir! Espero que também seja novidade para vocês, se num for, ~~finjam que é~~ tudo bem xD

Como hoje não tem vídeo, não posso deixar de postar uma playlist né? Para hoje, vai a [Evening Chill](https://open.spotify.com/playlist/37i9dQZF1DWZ0OzPeadl0h?si=ybpTtFbZTDO_reyTvED70Q), várias músicas bem legais e calmas.

## Atualização da barra do site

Um aluno [escreveu um tweet](https://twitter.com/brenonovelli/status/1257678890069307392) sobre um projeto que ele criou através do meu Curso de Gatsby. E eu notei que ele criou uma sidebar off-canvas no mobile que eu já estava há muito tempo para fazer no meu blog e sempre enrolava.

Aproveitei que estava com tempo livre e resolvi fazer. Se você nunca viu meu site no celular, segue abaixo um gif do antes/depois:

![Menubar antes/depois com mais e menos ícones e uma sidebar vindo da lateral](/assets/img/menubar-before-after.gif)

## Problema do iPhone X

Antes de lançar essa mudança, eu perguntei ao meu amigo [Guilherme Louro](https://github.com/guilouro) para dar uma testada e ele falou que tava muito ruim no iPhone X, pois como esse celular não tem botões de menu, mas sim uma barrinha na parte de baixo, acabava que ficava conflitando. Veja abaixo a imagem de como estava:

![Tela do iphone X mostrando uma barrinha branca logo acima da barra dos ícones](/assets/img/iphone-barra-antes.jpeg)

Antes mesmo o site já tinha problemas com isso, mas ninguém nunca havia me reportado. Foi aí que o próprio Guilherme comentou que no React Native existe uma coisa chamada [Safe Area View](https://reactnative.dev/docs/safeareaview) que é exatamente para solucionar esse problema. Só que meu site obviamente não usa native, então resolvi procurar sobre isso para web e encontrei a [documentação do webkit](https://webkit.org/blog/7929/designing-websites-for-iphone-x/) falando como fazer e funciona mesmo!

## Resolvendo o problema da área útil

Para resolver esse problema é bem fácil até. A primeira coisa que precisamos fazer é identificar essa área útil e alterar o valor da `viewport` para identificar e ocupar toda a área, isso é feito adicionando o `viewport-fit=cover` na tag que utilizamos no nosso `head`:

```html
<meta name="viewport" content="initial-scale=1, viewport-fit=cover" />
```

Depois disso, nós precisamos respeitar as chamadas `safe areas` do iphone, abaixo segue uma imagem explicando:

![Imagem do iphone indicando as variáveis de safe-area-inset para cada extremidade](/assets/img/safe-areas.png)

Cada um desses lados tem uma variável que podemos utilizar no nosso css, que são: `safe-area-inset-left`, `safe-area-inset-right`, `safe-area-inset-bottom` e `safe-area-inset-top`.

Sabendo qual variável precisamos trabalhar, é só escrever o css da seguinte forma:

```css
.menu-bar {
  padding-bottom: env(safe-area-inset-bottom);
}
```

Logo após fazer isso, o meu site já estava corrigido!

![Tela do iphone agora mostrando que as barras não colidem mais entre si](/assets/img/iphone-barra-depois.jpeg)

## Conclusão

Sei que é uma coisa bem específica e bem pequena, mas é sempre bom tratarmos nosso site da melhor forma e para todos. E eu confesso que fiquei bem feliz de descobrir uma coisa nova que resolvi escrever esse post.


Como lidar com o notch no topo e a navegação sem botões na parte inferior do iPhone num Web App.

Trabalhando com a tela útil do iPhone


## Introdução

Fala pessoal! Continuando as nossas [Dicas de CSS](https://willianjusten.com.br/series/#dicas-de-css), hoje iremos adicionar um novo amigo na parceria, que é o SVG e iremos criar uma linda animação de ondas.

Para gerar as ondas eu utilizei o site [getwaves.io](https://getwaves.io/) e você pode ver [a demo do vídeo aqui](https://labs.willianjusten.com.br/wave-svg-css-animation/) e o [código aqui](https://github.com/willianjusten/labs/blob/gh-pages/wave-svg-css-animation/index.html).

## Vídeo

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

## Conclusão

Novamente foi um post/vídeo bastante simples, mas que espero que seja útil para vocês irem aprendendo esses pequenos detalhes. Peço novamente que se puderem, compartilhem com seus amigos e não deixem de se [inscrever no canal do YouTube](https://www.youtube.com/WillianJustenCursos?sub_confirmation=1), eu estou começando ainda, então é muito importante que vocês me ajudem nesse início!


Aprenda a animar ondas feitas em SVG somente com CSS puro e cria um hero muito mais criativo e bonito.

Criando uma animação de ondas com CSS e SVG


## Introdução

Fala pessoal! Continuando as nossas [Dicas de CSS](https://willianjusten.com.br/series/#dicas-de-css), hoje iremos aprender sobre um tema extremamente importante! Os famososo **textos responsivos**!

É muito normal utilizarmos vários media-queries para poder ter o nosso texto funcionando para diferentes tipos de tela, mas nem sempre fica tão legal ou fluido. Sem contar que escrevemos muito mais código para isso.

A maneira que vamos fazer aqui, nós iremos utilizar a viewport unit `vw`, que calcula uma porcentagem da largura (`width`) da tela e vamos usar as [funções matemáticas do CSS](https://caniuse.com/#feat=css-math-functions) de `min` e `max` para podermos ter os textos em seus tamanhos corretos.

Esse post foi inspirado [nesse tweet da Una Kravets](https://twitter.com/Una/status/1254906546179526657) e espero que gostem!

Você pode ver [a demo do vídeo aqui](https://labs.willianjusten.com.br/responsive-text/) e o [código aqui](https://github.com/willianjusten/labs/blob/gh-pages/responsive-text/index.html).

## Vídeo

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

## Conclusão

Novamente foi um post/vídeo bastante simples, mas que espero que seja útil para vocês irem aprendendo esses pequenos detalhes. Peço novamente que se puderem, compartilhem com seus amigos e não deixem de se [inscrever no canal do YouTube](https://www.youtube.com/WillianJustenCursos?sub_confirmation=1), eu estou começando ainda, então é muito importante que vocês me ajudem nesse início!


Aprenda a deixar seus textos responsivos e fluidos em qualquer tela com viewport units e funções min-max do CSS.

Criando Textos Responsivos com CSS


## Introdução

Dando uma leve pausa dos [vídeos de dicas de CSS](https://willianjusten.com.br/series/#dicas-de-css), o post de hoje vai ser rapidinho, mas foi extremamente útil para mim e tenho certeza que será super útil para todos aqueles que já fizeram o meu Curso de Gatsby: Crie um Site PWA com React, GraphQL e Netlify CMS.

Ontem o Gatsby lançou essa nova feature chamada de [Experimental Page Build Optimizations for Incremental Data Changes](https://www.gatsbyjs.org/docs/page-build-optimizations-for-incremental-data-changes/), onde eles criam um cache e fazem o build somente do que é necessário, fazendo com que certos builds que demoravam **~10min** passem a demorar **~1min**!

Existem duas vantagens nisso, a primeira e mais óbvia é o ganho de tempo, já que você terá algo no ar muito mais rápido. A outra questão é que se você utiliza o [Netlify gratuito](https://www.netlify.com/pricing/) deve saber que eles deixam somente **300 minutos/mês**. Ou seja, em 30 deploys você acabaria gastando toda a quota do mês e isso não é nada legal né?

Bom, vamos deixar de papo furado e fazer logo isso funcionar né? Dá o play nessa [playlist de Eletronic Focus](https://open.spotify.com/playlist/37i9dQZF1DX0wMD4IoQ5aJ?si=-A5AVvQYQ76dRp_ZHFgzIQ) e vamos nessa!

### Passo 1 - Atualize o Gatsby para v2.20.4 ou maior

Essa nova feature veio somente na versão mais atual, então rode:

```bash
# se utilizar npm
npm install gatsby@latest

# se utilizar yarn
yarn upgrade gatsby@latest
```

### Passo 2 - Habilite o Netlify Build Plugins

Para que a gente consiga salvar o cache entre os builds é necessário utilizar um build plugin, como essa é uma feature bem nova do Netlify, é necessário que você habilite através do [seguinte link](https://app.netlify.com/enable-beta).

Para saber mais informações do Beta, só [entrar neste link](https://docs.netlify.com/configure-builds/build-plugins/).

### Passo 3 - Adicione o Gatsby Cache Netlify Build Plugin

Os builds incrementais dependem completamente do cache do Gatsby, portanto precisamos habilitar o `netlify-plugin-gatsby-cache`, que vai persistir as pastas `public` e `.cache` entre os builds.

No seu arquivo `netlify.toml` na raiz do projeto, adicione o seguinte:

```bash
[[plugins]]
  package = "netlify-plugin-gatsby-cache"
```

E instale o `netlify-plugin-gatsby-cache` no seu projeto com o comando:

```bash
npm install netlify-plugin-gatsby-cache

// ou se usar yarn
yarn add netlify-plugin-gatsby-cache
```

### Passo 4 - Adicione a flag para habilitar o Gatsby incremental builds

Atualize o comando de `build` no seu `package.json` para incluir a seguinte flag:

```json
"scripts": {
  "develop": "gatsby develop",
  "build": "GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES=true gatsby build --log-pages"
}
```

A flag `--log-pages` irá mostrar quais páginas o Gatsby fez build em cada deploy, é opcional e se você quiser, basta remover.

### Passo 5: Faça alguma mudança e veja funcionando!

Assim que você fizer todas as mudanças acima, o site já estará preparado para os builds incrementais. Na primeira vez que você subir alguma mudança, ele irá demorar o mesmo tempo que já demora atualmente, porém já guardando os arquivos no cache.

Na segunda vez que você rodar, prepare-se para um build bem mais rápido!

## Conclusão

É isso aí galera, foi um post rapidinho, mas que espero que seja útil para todos vocês, eu amo a dupla Gatsby+Netlify e eles estão cada vez mais se superando!


Tenha builds muito mais rápidos com a nova atualização do Gatsby Incremental Build.

Como habilitar builds incrementais do Gatsby no Netlify


## Introdução

Fala pessoal, continuando com os vídeos de dicas de CSS, hoje vai mais um vídeo bem simples, mas de uma técnica super famosa e utilizada em diversos sites.

Você pode ver a demo de hoje [nest link](https://labs.willianjusten.com.br/gradient-animation/) e o [código está lá no Github](https://github.com/willianjusten/labs/blob/gh-pages/gradient-animation/index.html)

## Video

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

## Conclusão

Novamente foi um post/vídeo bastante simples, mas que espero que seja útil para vocês irem aprendendo pequenos detalhes. Peço novamente que se puderem, compartilhem com seus amigos e não deixem de se [inscrever no canal do YouTube](https://www.youtube.com/WillianJustenCursos?sub_confirmation=1), eu estou começando ainda, então é muito importante que vocês me ajudem nesse início!


Aprenda a criar um background animado para os seus sites e acaba com a monotonia dos fundos estáticos.

Criando um background com gradiente animado com CSS Puro


## Introdução

Fala pessoal, continuando com os [vídeos de dicas de CSS](https://willianjusten.com.br/series/#dicas-de-css), hoje vai mais um vídeo bem simples, mas de uma técnica super famosa e utilizada em diversos sites.

Você pode ver a demo de hoje [nest link](https://labs.willianjusten.com.br/reveal-effect/) e o [código está lá no Github](https://github.com/willianjusten/labs/blob/gh-pages/reveal-effect/index.html)

## Video

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

## Conclusão

Novamente foi um post/vídeo bastante simples, mas que espero que seja útil para vocês irem aprendendo pequenos detalhes. Peço novamente que se puderem, compartilhem com seus amigos e não deixem de se [inscrever no canal do YouTube](https://www.youtube.com/WillianJustenCursos?sub_confirmation=1), eu estou começando ainda, então é muito importante que vocês me ajudem nesse início!


Como fazer um efeito de mostrar um bloco e então revelar o conteúdo por trás com CSS.

Criando uma animação de Reveal Block com CSS


## Introdução

Fala pessoal, hoje vou começar uma série de vídeos curtos ~~ou nem tanto~~, onde vou ensinar pequenas dicas de animações ou efeitos legais com CSS.

Já tenho alguns outros vídeos que o pessoal gostou bastante como:

- [Como criar um spinner loader com CSS puro e uma div](https://willianjusten.com.br/como-criar-um-spinner-loader-com-css-puro-e-uma-div/)
- [Criando um ícone menu hamburguer com CSS puro](https://willianjusten.com.br/criando-icone-menu-hamburguer-animado-com-css-puro/)
- [Criando um menu fullscreen animado com CSS puro](https://willianjusten.com.br/criando-menu-fullscreen-animado-com-css-puro/)

E por isso, eu acho que vai ser legal gravar mais coisinhas como essas. Aceito sugestões de coisas que vocês gostariam que eu ensinasse também =D

Você pode ver a demo de hoje [nest link](https://labs.willianjusten.com.br/typing-effect-css/) e o [código está lá no Github](https://github.com/willianjusten/labs/blob/gh-pages/typing-effect-css/index.html)

## Video

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

## Conclusão

Espero que vocês gostem da animação e do modelo de post/vídeo, por favor, não deixem de comentar, compartilhar e se inscrever no meu canal no YouTube, quanto mais gente assistir, mais coisas eu vou fazer.


Como fazer um efeito parecido com uma máquina de escrever digitando na tela somente só CSS.

Criando uma animação de digitação com CSS


## Introdução

Fala pessoal, semana passada eu fui convidado pelo pessoal do [Meetup Frontend SP](https://www.meetup.com/pt-BR/Frontend-Dev-SP-Meetup/) para palestrar sobre qualquer assunto e eu escolhi **Uma conversa sobre Trabalho Remoto**, que eu acho bem interessante e importante para os momentos atuais e do qual eu já tenho experiência há alguns anos.

Você pode acessar os [slides da palestra no seguinte link](https://docs.google.com/presentation/d/1Ra3g1zKOQ1_G_9lFLChjo3mm5d9TDAZpy6JCvLLaNcI/edit?usp=sharing)

## Vídeo

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

Se você quiser pode [assistir o evento inteiro](https://www.youtube.com/watch?v=l1hPaVpSKMI), que incluiu também uma palestra bem legal do Vitor Mendrone.

## Perguntas e Respostas

Como eu falei no vídeo, iria responder as perguntas que não deu tempo de responder num post e aqui estamos nós. Então vamos lá:

> Já tenho um bom portifólio no github, currículo bem feito, posts no LinkedIn e perfil em inglês também. Já dá pra aplicar pra vagas remotas e júnior ou falta algo?

Pelo que você falou, eu diria que já pode aplicar sem problemas. A única coisa que eu fiquei meio apreensivo foi quando você falou "júnior". Eu não recomendo trabalho remoto para Jr.

Acho que um ambiente alocado nos primeiros anos de carreira é essencial para se aprender mais sobre como é um desenvolvimento de software em geral, além do trabalho em equipe. E até mesmo para poder evoluir vários pontos que julgo essenciais na vida de remoto, que é a comunicação e disciplina.

Mas se você já tiver pelo menos 1-2 anos de experiência e se sentir confiante nesses aspectos, é só aplicar e ver sua adaptação, as vezes funcione super bem.

> Boa noite, ainda não possuo inglês fluente, devo mesmo assim, deixar o perfil em inglês?

Eu diria para fazer uma análise, muitos de nós temos medo com inglês e as vezes nos diminuímos muito. Você consegue se comunicar com outra pessoa (mesmo que cometa um erro aqui e ali)? Se você conseguir, já é o suficiente.

Mas também precisar ver outra questão, "Quero vagas para fora no momento?" Se você quiser trabalhar para empresas estrangeiras, o inglês é a coisa **mais importante**. Praticamente todas as empresas terão essa como a primeira etapa, já que se você não conseguir se comunicar, não será possível trabalhar ali.

> Quem é de outro ramo, dá para mudar?

Sim, é mais do que possível mudar! Eu tenho um post [falando da minha trajetória](https://willianjusten.com.br/minha-trajetoria-ate-ser-desenvolvedor/). Eu fazia Química Industrial e mudei completamente! Claro que não é uma transição super rápida ou fácil, mas é sim possível.

> O que é Síndrome do Impostor?

Eu tenho um post que se chama [Será que sou bom o suficiente?](https://willianjusten.com.br/sou-bom-o-suficiente/), que aborda exatamente sobre esse tema, vale a pena dar uma lida lá, mas respondendo de forma mais direta.

A síndrome do impostor (também conhecida como fenômeno de impostor ou síndrome de fraude) é um conceito que descreve indivíduos de alto desempenho que são marcados por uma incapacidade de internalizar suas realizações e um medo persistente de serem expostos como uma "fraude".

> As empresas aqui no Brasil pagam mais ou menos para o trabalho 100% remoto?

Isso varia de empresa para empresa, é muito difícil de afirmar qualquer coisa, mas é importante verificar bem com a empresa em qual modelo de contratação será o trabalho, visto que se for PJ (Pessoa Jurídica), o salário precisa ser maior para que você possa bancar os gastos extras que você terá e também a falta de benefícios como férias, 13 salário, INSS e outros.

## Conclusão

Espero que vocês tenham curtido a palestra, e se você quiser, eu tenho [uma série de posts sobre trabalho remoto](https://willianjusten.com.br/series/#trabalhar-no-exterior-remoto-viagens-etc) que você pode dar uma olhada, se está procurando saber mais do assunto.


Será que remoto é para todo mundo? Quais os desafios? Quais os ganhos? Por onde começar?

Talk: Uma conversa sobre Trabalho Remoto


## Introdução

Fala pessoal, o post de hoje é mais um [daqueles super simples de CSS](https://willianjusten.com.br/series/#dicas-de-css), mas que talvez vocês não conheçam.

Enquanto escrevo, vou ouvindo uma banda de metalcore muito boa chamada [Architects](https://open.spotify.com/artist/3ZztVuWxHzNpl0THurTFCv?si=Fgce72yKQvq8RqjPzUx5wQ). Se nunca ouviu e curte um som mais pesado, pode ouvir que você vai curtir.

Chega de papo furado e vamos direto ao assunto.

## O que são CSS Counters?

São propriedades do CSS que permitem gerar um conteúdo numérico para elementos, baseados na localização deles no html.

### Como assim?

Basicamente as propriedades são:

- `counter-reset`: é usada para definir ou inicializar um ou mais contadores.
- `counter-increment`: usada para especificar o valor de incremento para os contadores.
- `counter()`: é uma função usada junto com o `content` para mostrar o valor do contador.

### Tá, mas como funciona na prática?

São três passos bem simples. Vamos lá. Digamos que tenhamos o seguinte html:

```html
<div class="content">
  <h2>Escolha um nome para o counter</h2>
  <h2>Incremente o counter</h2>
  <h2>Assinale o counter no seu elemento</h2>
</div>
```

Digamos que eu queira adicionar um número para cada título, então primeiro eu preciso inicializar o nosso counter no elemento pai, que nesse caso é o `content`, para isso, farei:

```css
.content {
  counter-reset: section; // pode ser qualquer nome desejado
}
```

Depois eu preciso adicionar o incremento:

```css
h2:before {
  counter-increment: section;
}
```

O método de `counter-increment` recebe o contador e também o valor para iniciar a contagem, se nada for passado, será a partir do `1` como padrão.

E por último, basta eu inicializar a função do contador:

```css
h2:before {
  counter-increment: section;
  content: counter(section);
}
```

Aí adicionando um pouquinho de estilo, já podemos ter a nossa numeração dinâmica com CSS:

<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="QWjbvpG" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/willianjusten/pen/QWjbvpG">
  </a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### Nested Counters

Nós podemos também numerar conteúdos internos. Digamos que tenhamos a seguinte lista:

```html
<ul class="services">
  <li class="services__item">
    Design
    <ul>
      <li>Web</li>
      <li>Mobile</li>
      <li>Graphic</li>
    </ul>
  </li>
  <li class="services__item">Web Development</li>
  <li class="services__item">
    Mobile Development
    <ul>
      <li>iOS</li>
      <li>Android</li>
      <li>Windows Phone</li>
    </ul>
  </li>
</ul>
```

Para termos uma lista tendo `1` e sub-níveis como `1.1`, podemos fazer o css da seguinte forma:

```css
// Definimos o contador principal
.services {
  counter-reset: services;
}

.services__item:before {
  counter-increment: services;
  content: counter(services) '.';
}

// Definimos o contador para os sub-níveis
.services__item ul {
  counter-reset: sub-services;
}

// Nosso `content` pode ser estilizado para conter qualquer coisa, até palavras
.services__item li:before {
  counter-increment: sub-services;
  content: counter(services) '.' counter(sub-services);
}
```

Segue abaixo o exemplo pronto:

<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="ZEbGKya" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/willianjusten/pen/ZEbGKya">
  </a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### Bem legal isso daí, mas e a compatibilidade?

Pode ficar despreocupado! Isso funciona até no IE8, como você pode ver no [Can I use](https://caniuse.com/#feat=css-counters).

## Conclusão

Como disse, era um post mega simples, mas que se você não conhecia, agora já conhece! E se você já conhecia, passe adiante!


Utilizando CSS Counters


## Introdução

Fala pessoal, o post de hoje vem com vídeo, espero fazer mais alguns assim, vamos juntos na expectativa que vocês gostam. Para o assunto de hoje, eu resolvi falar sobre hooks em React, dessa vez como criar um do zero.

O vídeo ficou longo (~30min), então dá uma paradinha, vai lá pegar um café ou chá, avisa no _Whatsapp_ que vai assistir algo importante e segue junto =)

~~Como eu falo devagar, bota em 2x que melhora~~

## Video

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

### Alguns links e informações

Todo o código do projeto que fizemos, você encontrará no [repositório do Github](https://github.com/willianjusten/use-konami-code).

O [post sobre React Hooks do blog é esse](https://willianjusten.com.br/habemus-react-hooks/) e o [post sobre como converter class para hooks](https://willianjusten.com.br/convertendo-um-class-based-component-para-react-hooks/).

A biblioteca que usei para testar foi a [@testing-library/hooks](https://github.com/testing-library/react-hooks-testing-library), além disso, utilizei também o [create-react-app](https://github.com/facebook/create-react-app) para fazer a estrutura sem perder tempo.

Você pode ler mais sobre o _Konami Code_ [neste link](https://pt.wikipedia.org/wiki/C%C3%B3digo_Konami) e eu usei o [keycode.info](https://keycode.info/) para descobrir os valores certinhos de cada tecla.

## Conclusão

Espero que tenham gostado do vídeo e se gostaram, por favor, se inscrevam no [meu canal do YouTube](https://www.youtube.com/WillianJustenCursos?sub_confirmation=1), compartilhem e comentem!


Aprenda como criar um react hook de Konami Code a partir do zero com TDD.

Criando um React Custom Hook com Testes

## Introdução

Fala meu povo, espero que todos estejam bem nesses tempos de quarentena. Faz muito tempo que não escrevo, estava cheio de trabalho e outras coisas, mas agora pretendo voltar com tudo! 

Irei escrever vários posts de diferentes assuntos, o de hoje é um assunto comum, mas que ainda confunde muita gente e não só os iniciantes. Já vi muita gente "tentando na sorte" para ver se funcionava e acho que não deveria ser assim, então vamos descomplicar isso.

A ideia desse post veio porque eu fiz alguns questionários na Pluralsight, que [abriu os cursos de graça em Abril](https://www.pluralsight.com/offer/2020/free-april-month), e algumas das perguntas eram sobre isso.

Enquanto escrevo, vou ouvindo o álbum [Triumph & Disaster](https://open.spotify.com/album/5VbiQX9WB7ZDNvFOy3pY7J?si=t1I5SJAhRlycG352f4VKSg) de uma banda chamada [We Lost the Sea](https://open.spotify.com/artist/7GVByFFfFJYCzK4d8ZyL6s?si=MseOnVrwSU-BuXfYCVexzA). Um som instrumental bom demais, perfeito para escrever posts, programar e estudar!

### Antes de tudo, um resumo de seletores CSS

Eu tenho um [post sobre seletores CSS](https://willianjusten.com.br/alguns-seletores-css-importantes-para-aprender/) onde explico cada um em detalhes, mas aqui vamos falar só dos tipos que existem, que são:

* **Seletores de Tipo**: onde marcamos diretamente as tags que queremos selecionar, exemplo `p` para selecionar todo `<p>`.
* **Pseudo-elementos**: como o nome sugere, eles não são elementos em si, mas servem para selecionar parte do html relativo a outro seletor. Por exemplo, `p::first-letter`.
* **Seletores de Classe**: um dos que mais utilizamos, podemos atribuir classes para diferentes elementos e então selecionar essas classes. Exemplo: `<p class="text">` pode ser selecionado com `.text`.
* **Seletores de atributo**: selecionamos elementos com um tipo específico de atributo. Por exemplo, `input[type='number']`. Aqui estamos selecionando todos os inputs que tiverem `type=number` como atributo.
* **Pseudo-classes**: selecionamos elementos baseados em seus estados CSS. Por exemplo `:hover`, `:active`, `:checked` e outros.
* **Seletores de Id**: selecionamos um elemento pela sua Id única. Só pode existir um único elemento para cada id. Exemplo: `<h1 id="header">` seria selecionado com `#header`.
* **Estilos inline**: são estilos aplicados diretamente ao elemento, através do atributo `style`. Por exemplo, `<h1 style="font-size: 16px">`

### Os pesos de cada seletor

* **Peso mais baixo**: seletores de tipo e pseudo-elementos
* **Peso baixo**: classe, atributo e pseudo-classes
* **Peso médio**: seletores de id
* **Peso alto**: estilos inline

### Regras de estilo aplicados

**1.** Se estilos de diferentes pesos são aplicados a um mesmo elemento, o estilo que tiver o maior peso será o aplicado. Se os estilos tiverem o mesmo peso, os estilos que vierem mais abaixo, serão os aplicados. Isso é devido ao "efeito cascata" que dá exatamente o nome do CSS (Cascading Style Sheets).

```scss
// <h1 class="foo bar">

.foo {
  color: green;
}

.bar {
  color: red; // essa será a cor aplicada
}
```

**2.** Quando dois seletores de mesmo peso são aplicados a um elemento, é contado como 2x o peso. Por exemplo, elementos com duas classes aplicadas terão um peso maior do que um elemento com só uma classe.

```scss
.foo.bar {
  color: blue; // essa será a cor aplicada
}

.bar {
  color: red;
}
```

**3.** Estilos de peso maior **sempre** irão prevalecer, não importa quantos elementos você colocar. 

Exemplo com id:

```scss
#footer {
  background: red; // essa será a cor aplicada
}

div.class1.class2.class3.class4 {
  background: blue;
}
```

Exemplo com inline:

```html
#title {
  color: blue;
}


<h1 id="title" style="color:red">Eu terei a cor Vermelha</h1>
```

**4.** Uma regra para ganhar de todos, o famigerado (famoso) `!important`. Essa regra _basicamente_ ignora qualquer outra regra, até mesmo um estilo inline!

```html
#title {
  color: green;
}

h1 {
  color: blue !important;
}

<h1 id="title" style="color: red">Eu terei a cor Azul =)</h1>
```

Por favor, **~~não use~~ evite usar** !important. A única maneira de sobrepor uma regra com _important_ é adicionando ainda mais especificidade somado a outro `!important`, o que torna o código ainda mais dificil de sobreescrever e complexo durante a manutenção.

Caso tenha algum estilo sobreescrevendo o seu, dê uma olhada no nível de especificidade e suba um, seja através do `id` ou uma classe a mais. Mas evite o `!important` o máximo que puder.

**5**. O seletor universal e os combinadores **não** impactam no peso dos seletores. Os combinadores são `>`, `~` e `+`. Por exemplo, se tivermos o seguinte markup:

```html
<div id="block">
  <p class="text">Foo</p>
  <p class="text">Bar</p>
</div>
```

E tivéssemos a seguinte regra css:

```scss
#block > .text {
  color: red;
}

#block .text {
  color: green; // essa será a cor aplicada
}
```

As duas regras possuem exatamente a mesma especificidade (id + classe), portanto, a regra mais embaixo será aplicada.

### Momento do teste

Como eu falei, a ideia do post foi devido a umas perguntas disso no questionário da Pluralsight, então vou deixar aqui para vocês responderem =)

**Pergunta 1**

![Qual vai ser a cor final do background? rect fill="red" style="fill: blue; color: green" Opções: black, green, blue, red](/assets/img/css-question-1.jpeg)

**Pergunta 2**

![Qual a regra vai ter mais especificidade? 1) seletor universal * 2) div > strong 3) .footer h2 span 4) #footer](/assets/img/css-question-2.jpeg)

Se você respondeu `blue` para a pergunta 1 e `#footer` na segunda pergunta, meus parabéns! Se você errou alguma delas, tente ler de novo as regras a cima e descobrir o porquê das respostas.

### Conclusão

Espero que o post tenha sido útil e se você tiver dúvidas e/ou sugestão de assuntos, me manda também! Quero voltar a escrever mais e é sempre bom saber sobre o que escrever.

O CSS não é difícil, mas é fundamental entender suas regras para não ficar tentando as coisas na sorte.

Entendendo especificidade em CSS


## Introdução

Fala pessoal! Para começar bem o ano, nada melhor que um curso novo né? E sabe o que é melhor? É de graça!

Esse ano eu quero fazer mais conteúdos em vídeos, até para alimentar [meu canal do YouTube](https://www.youtube.com/WillianJustenCursos?sub_confirmation=1), então resolvi postar o curso nos 2 lugares:

- [Udemy](https://www.udemy.com/course/criando-um-ambiente-de-desenvolvimento-no-windows)
- [Playlist do Youtube](https://www.youtube.com/watch?v=YcR8pKvjx44&list=PLlAbYrWSYTiOpefWtd6uvwgKT1R-94Zfd)

Espero que gostem =)

## Computador novo

Recentemente eu adquiri um computador novo, que é Windows, e como eu sou usuário Mac OS por muitos e muitos anos, confesso que estava preocupado em como iria fazer para deixar tudo funcionando nessa máquina nova.

Mas apesar do medo, eu resolvi me aventurar e nossa, tá muito mais fácil do que parece. Eu consegui deixar todo o sistema funcionando perfeito para as minhas necessidades, e resolvi fazer um **curso gratuito** para que os outros também consigam.

## Mil dificuldades com terminal e windows

Eu tenho muitos alunos iniciantes e vários dos erros são problemas de paths, comandos que não existem no Windows, falta de configuração, etc.

Alguns vão se virando e acabam conseguindo fazer funcionar, mas vários outros travam e alguns acabam até desistindo de aprender.

Esse curso tem o intuito de ajudar essas pessoas a não travarem mais e estudarem o que realmente importa.

## Ementa

Enfim, vamos ao que interessa, segue abaixo a ementa:

- Atualizações e Insiders Program
- Instalando um Package Manager
- Habilitando WSL e instalando Ubuntu
- Convertendo para WSL 2
- Instalando um terminal
- Criando um usuário no Linux
- Definindo usuário padrão no WSL
- Movendo entre diretórios no terminal
- Configurando diretório padrão para o terminal
- Configurando terminal padrão no Windows
- Configurando tema para o terminal
- Criando teclas de atalho no terminal
- Instalando o Zsh e Oh My Zsh
- Listando e criando diretórios no terminal
- Editores de texto no terminal
- Editando o tema do Zsh
- Configurando plugin de auto-suggestions
- Criando chaves ssh
- Criando um Alias para comandos do terminal
- Configurando o WSL no VS Code
- Configurando o NVM e instalando o NodeJS
- Instalando o Yarn
- Rodando um projeto NodeJS

Como podem ver, são passos bem simples, todos em vídeo bem pequenos para que vocês possam usar até mesmo como vídeos de apoio para no futuro.

## Links para o curso

Os links estão ali em cima, mas caso você não tenha visto, seguem os links aqui:

- [Udemy](https://www.udemy.com/course/criando-um-ambiente-de-desenvolvimento-no-windows)
- [Playlist do Youtube](https://www.youtube.com/watch?v=YcR8pKvjx44&list=PLlAbYrWSYTiOpefWtd6uvwgKT1R-94Zfd)

## Conclusão

Espero que aproveitem bastante o curso, espalhem ele para os seus amigos que tem interesse em começar a aprender programação e ainda não utilizam Linux/MacOS. E mesmo que você já seja programador, dê uma chance, as vezes tem uma dica ou outra legal que você não sabia =)


Aprenda a ter um terminal bom, node e muito mais dentro do Windows

Novo Curso: Criando um ambiente de Desenvolvimento no Windows


## Introdução

Como todo ano eu faço, esse post aqui serve para eu revisitar um pouco de como foi meu ano e até mesmo para analisar minha evolução de acordo com os anos anteriores. Se você quiser comparar também, seguem aqui os posts dos outros anos:

- [Meu ano de 2015](https://willianjusten.com.br/meu-ano-de-2015/)
- [Meu ano de 2016](https://willianjusten.com.br/meu-ano-de-2016/)
- [Meu ano de 2017](https://willianjusten.com.br/meu-ano-de-2017/)
- [Meu ano de 2018](https://willianjusten.com.br/meu-ano-de-2018/)

Esse ano eu ouvi muiiita coisa, como sempre né? A banda mais ouvida foi [City and Colour](https://open.spotify.com/artist/74gcBzlQza1bSfob90yRhR?si=6BaUHAm2TIuE62OaG9Rtyg), também ouvi bastante o album do While she sleeps que foi o [So What?](https://open.spotify.com/album/2jd0syXer1txxASx3W2oy0?si=qkEwSe8qT_KSjIx5y66LdA). Tenho uma música favorita com minha namorada que também ouço demais, que é [Home - Edward Sharpe and The Magnetic Zeros](https://open.spotify.com/track/7w5cxTEzp1rfV3KCy0Bd5N?si=ooFjOcaSSAags5zBEg2HvA).

Enfim, se quiser ouvir tudo que eu mais ouvi, só ver [minha playlist do Spotify desse ano](https://open.spotify.com/playlist/37i9dQZF1EtkiMqKxAIioe?si=vYua-vbnTOGHH1vGVY3lqw), já vou avisando, tem **muito** City and Colour xD

Vamos ao que interessa e falar sobre as coisas que me aconteceram esse ano.

## Blog

Depois de alguns anos usando o mesmo layout, eu resolvi mudar drasticamente o blog. Apesar de eu amar o [Jekyll](https://jekyllrb.com/) e ele funcionar muito bem para mim, eu queria me aventurar em alguma coisa nova. E para isso, eu escolhi o [GatsbyJS](https://www.gatsbyjs.org/). Tiveram vários motivos para eu escolher ele, mas os principais foram:

- Usa React/GraphQL, que são tecnologias que uso no meu dia-a-dia
- Focado em performance (me preocupo demais com isso)
- Funciona bem no Netlify (que já usava no Jekyll)
- Vira um PWA com uma linha

Como tudo meu, o código está [lá no Github](https://github.com/willianjusten/willianjusten.com.br/) e você está mais do que livre para enviar correções/mudanças ou somente olhar o código xD

As grandes mudanças com o visual foram:

- Ter o dark theme por padrão, no blog passado eu passei um tempo catando dados [através do analytics events tracker](https://willianjusten.com.br/como-usar-o-google-analytics-events-tracker/) e vi que uma parcela gigante de pessoas usava o dark theme, então melhor ter como padrão
- Eu mudei também o visual padrão para ser em lista, mas depois de uns pedidos, eu implementei o modo em Grid também, assim o blog acabou sendo bastante customizável
- As páginas todas tem transições suaves e com uma barra lateral/inferior que dão até um aspecto de app para o site

Se quiser ler ainda mais sobre todas as mudanças, escolhas de stack e etc, recomendo o [post de making of](https://willianjusten.com.br/making-of-blog-novo/).

### Algumas métricas

Como eu sou o maluco das métricas, vão aqui algumas:

### Usuários no Ano

![Gráfico do analytics mostrando que tive 200.743 usuarios no ano](/assets/img/acessos-2019.png)

Tive um aumento bem pequeno (5.72%) em relação ao ano passado, mas creio que isso se deve ao número pequeno de novos posts, foi um ano bem cheio para mim, então não pude escrever com tanta frequência.

### Preferência Visual

![Uma tabela indicando que o Dark Theme e a List View são a preferência no blog, com porcentagens acima de 40%](/assets/img/tema-view-2019.png)

Aqui podemos ver que a preferência dos usuários é o Dark Theme e o List View, que é basicamente a visão padrão do blog. Para metrificar isso, eu removo a first view de um first user, visto que se ele entrar pela primeira vez, acabaria vendo o visual padrão e isso atrapalharia nas métricas, mas mesmo assim, a preferência pelo tema padrão é clara.

### Cidades que mais acessam

![Tabela de cidades que mais acessam: São Paulo, Rio de Janeiro, BH, não definido, Curitiba](/assets/img/cidades-2019.png)

Não é muita surpresa que as cidades que mais acessam meu blog sejam essas, afinal de contas, são as maiores do Brasil e com isso tem mais gente, além disso, são os grandes centros, mas nossa, São Paulo tá ganhando por muito =o

### Sistemas Operacionais e Browsers mais utilizados

![Lista dos SO mais utilizados: Windows, Linux, Android, Mac, iOS](/assets/img/so-2019.png)

Na lista de Sistemas Operacionais, o primeiro lugar e segundo lugar eu já imaginava que seria o Windows e o Linux. O interessante foi ver o Android na frente do Mac e por último o iOS.

É muito legal ver essas métricas, pois assim eu consigo ver "além da minha bolha". Por que digo isso? Bom, a maioria dos meus amigos e pessoas próximas utilizam o Mac e iOS, mas claramente dá para ver que não são a maioria.

![Lista dos Browsers mais utilizados: Chrome, Firefox, Safari, Opera, Android](/assets/img/browsers-2019.png)

Na lista dos browsers, nada muito diferente do que imaginava, com exceção do **Opera**! WTF? Pensei que esse browser tinha morrido hahaha

## Troca de time na Toptal

Desde quando entrei na Toptal, eu trabalhei principalmente nas páginas públicas da Toptal, isso basicamente envolviam as páginas normais do site e também o blog. No início desse ano nós lançamos o [novo blog da Toptal](https://www.toptal.com/blog), que eu tive o prazer de liderar o desenvolvimento. Tínhamos algumas limitações que vinham desde o backend até mesmo a grande quantidade de posts já existentes. Então precisávamos mudar tudo, porém com muita calma e análise, para não quebrar nada que já existia. Foi um trabalho bem legal, porém muito estressante, então após finalizar essa grande etapa, eu resolvi respirar novos ares e me mudei para um outro time.

No meu time atual, eu trabalho mais na parte de captação de novas clientes/empresas e o seu onboarding no portal onde elas vão criar seus jobs, entrevistar freelancers, definir pagamentos e tudo mais que envolva essa parte do freela.

Dentro dessa parte, eu trabalho bastante com React, Redux, Apollo, GraphQL, mas tem coisinhas do backend que são feitas em Ruby on Rails.

Espero que o ano que vem tenham ainda mais desafios e que eu possa aprender bastante com eles.

## Lançamento do curso de Gatsby

Logo após eu lançar meu blog usando o Gatsby, eu tive um pedido massivo para fazer um curso sobre e bom, eu já estava planejando fazer mesmo. Então, não muito depois de lançar o blog eu já comecei com a criação dos vídeos.

Eu decidi ensinar a fazer um blog igualzinho ao meu, pois assim era um projeto real e que já estava no ar, ao invés de só ensinar "foo/bar" que acho meio vazio e que não ensina tanto na real.

O curso se mostrou um sucesso e tem uma das mais altas classificações lá na Udemy, com vários reviews muito legais!

![Alguns reviews do curso de Gatsby tendo 5 estrelas e com ótimos elogios.](/assets/img/reviews-gatsby.png)

## Encontros da Toptal

Outra coisa bastante legal desse ano é que não tive só um encontro grande da Toptal, mas **dois** encontros!

### Brazil Gathering

O primeiro encontro foi de todos os brasileiros do Core Team da Toptal, e ele foi num paraíso, que é Porto de Galinhas. Passamos 1 semana trabalhando literalmente de frente para o mar, numa mansão gigante e linda! Foi muito legal pois eu pude rever algumas caras conhecidas, mas também várias pessoas novas que eu nem fazia ideia de que eram brasileiros e trabalhavam na Toptal. Pois é, a empresa é bem grande e são muitos times, é normal não conhecer a maioria das pessoas xD

![Uma foto com 5 pessoas sentadas em frente a uma casa com 2 andares e uma piscina, com uma vegetação a frente deles.](/assets/img/toptal-porto.png)

Nessa foto temos em ordem: [Bruno Facca](https://github.com/brunofacca), [Gustavo Saiani](https://twitter.com/gusaiani), [Marco Andrade](https://github.com/Marco-Andrade), eu e [Jônatas Paganini](https://github.com/jonatas)

E bom, o que falar desse paraíso?

![Uma foto de drone mostrando a orla e o mar azul de Porto de Galinhas](/assets/img/willian-justen-de-vasconcellos-a8c8_h-qthy-unsplash.jpg)

E teve dia que eu fiz questão de acordar as 4h da manhã, só para ver o Sol nascendo, apesar de estar morto de cansaço, valeu super a pena!

![Nascer do Sol ao fundo, um trecho de mar e um trecho de areia. E na frente uma vegetação e um pequeno portãozinho de madeira.](/assets/img/willian-justen-de-vasconcellos-lwnu5llnrs8-unsplash.jpg)

Se você quiser ver/baixar as fotos dessa viagem, só ir lá [nessa do collection do Unsplash](https://unsplash.com/collections/8678577/my-adventures-in-porto-de-galinhas-brazil)

### Encontro do time em Barcelona

Apenas 3 semanas depois desse encontro no Brasil, eu estava pegando um vôo para Barcelona para encontrar o meu time (e mais um time que é agregado), o que foi muito bom, já que eu só conhecia um deles pessoalmente. Foi ótimo conhecer todos e trabalhar juntos, engraçado que nós planejamos o sprint com menos coisas, pensando que seria mais "bagunça" do que trabalho, mas se mostrou o contrário, nós produzimos para caramba! Mas é claro que aproveitamos bastante também, e nossa, como pessoas do leste europeu bebem, nem tente competir, é bem possível que você teria um coma alcóolico!

![Foto com 18 pessoas em frente a um restaurante](/assets/img/encontro-barcelona.jpg)

Nessa foto num vou marcar todo mundo, porque é muita gente, mas temos pessoas da Espanha, Rep. Tcheca, Canadá, EUA, Ucrânia, Alemanha, Lituânia, Argentina, Itália e mais xD

## Viagem para Itália e Suiça

Aproveitando que eu estava na Europa, não podia deixar de ir em alguns lugarzinhos né? Pretendo escrever mais detalhadamente sobre essas viagens, até porque eu fiquei cerca de 40 dias e visitei diversos lugares, então vale um post separado com várias dicas de coisas que aprendi.

### Workshop de Fotografia nas Dolomitas

Mas foi uma viagem muito legal e especial, pois eu fiz um [workshop de fotografia](https://photography-tours.com/tours/dolomites-october-6-11-2020/) com 2 ídolos meus, que são o [Tobias Hägg / Airpixels](https://www.instagram.com/airpixels/) e a [Emma Svensson](https://www.instagram.com/emmasvenssonphoto/). Sempre fui apaixonado pelas Dolomitas e foi incrível poder fotografar ao lado deles e de outros fotógrafos fantásticos, aprendi demais!

Aqui vão algumas fotos dessa viagem:

![Foto do Tre Cime di Lavaredo, que é uma montanha com 3 picos, estava amanhecendo, porém ainda escuro e com névoa na parte inferior.](/assets/img/willian-justen-de-vasconcellos-gzly-0kpg3m-unsplash.jpg)

Esse é o Tre Cime di Lavaredo, que foi um dos pontos mais altos do workshop. Para ver e baixar em alta resolução, [acesse no Unsplash](https://unsplash.com/photos/GZLY-0kPG3M).

![Uma foto nas Dolomitas de uma cadeia de montanhas envolta em névoa, num visual bem misterioso.](/assets/img/willian-justen-de-vasconcellos-kzit2oyws-s-unsplash.jpg)

Essa foto para mim é bem especial, pois ela foi tirada no meu celular, sim, isso é foto de celular! No caso eu tenho um [Huawei P30 Pro](https://consumer.huawei.com/br/phones/p30-pro/) e essa foto ainda virou foto do dia no Unsplash! Para ver e baixar em alta resolução, [acesse no Unsplash](https://unsplash.com/photos/KZIT2OYws-s).

![Foto de drone de um lago bem azul com vários pinheiros ao redor e uma cadeia de montanhas ao fundo.](/assets/img/willian-justen-de-vasconcellos-5zzaapsfu6y-unsplash.jpg)

Na viagem eu vi diversos lagos maravilhosos, esse aí é o Lago di Misurina, para ver e baixar em alta resolução, [acesse no Unsplash](https://unsplash.com/photos/5zZAaPsfu6Y).

Se quiser ver mais fotos (ainda estou subindo outras), é só acessar [essa collection no Unsplash](https://unsplash.com/collections/8919833/my-adventures-in-dolomites).

### Um passeio pela maravilhosa e CARA Suiça

Sempre fui apaixonado pela Suiça e é tudo isso mesmo, o país é lindo demais, extremamente organizado, limpo e com as mais belas paisagens que já vi. O problema é que eu deixei quase um rim por lá, de tão absurdo de caro que é o país. Mas bom, uma vez a gente precisa se aventurar né? Seguem abaixo algumas fotos:

![Foto de montanhas nevadas ao fundo, um pequeno trecho de lago super azul e uma pessoa de costas em pé numa pedra.](/assets/img/willian-justen-de-vasconcellos-q1tvymwgwpw-unsplash.jpg)

Esse é o Oeschinensee, um maravilhoso lago de água super azul, é uma caminhada bem tranquila para ver essa maravilha e vale a pena demais! Para ver e baixar em alta resolução, [acesse no Unsplash](https://unsplash.com/photos/q1tvymWgwPw).

![Foto de um trem passando num viaduto bem alto entre montanhas.](/assets/img/willian-justen-de-vasconcellos-ubwnghh-jie-unsplash.jpg)

Imagina uma pessoa ficar esperando horas para um trem passar num viaduto famoso só para tirar uma foto. Bom, esse fui eu! Mas fotografia é isso, paciência e preparo. No final eu amei essa foto e me teletransporto para o mundo de Harry Potter sempre que vejo. Para ver e baixar em alta resolução, [acesse no Unsplash](https://unsplash.com/photos/UBWnGHh-JIE).

## Conclusão

Quando pensei em escrever esse post, eu fiquei até pensativo sobre o que escrever, pois achava que nem tinha feito muitas coisas, mas de pouquinho em pouquinho, eu vi que na realidade fiz coisa para caramba!

E você? Como foi seu ano? Tente pensar em todas as coisas que fez, não precisam ser grandes como "comprei uma casa", tenho certeza que você vai encontrar várias coisas que foram bem significativas, se quiser, compartilha aí embaixo! =D


Um ano movimentado na Toptal, blog novo, curso novo e viagens como sempre.

Meu ano de 2019


## Introdução

Olá pessoal, eu sei que esse título parece estranho demais e pode não fazer sentido mas prometo que será efetivo.

Hoje eu estou escrevendo esse post de Porto de Galinhas, que é um paraíso absurdamente lindo! Estou num encontro promovido pela empresa que trabalho, a ([Toptal](https://www.toptal.com/)), e é incrível poder escrever tendo como companhia uma vista tão linda. Abaixo deixo uma foto que tirei com meu drone:

![Uma foto aérea mostrando algumas casas na orla da praia, uma faixa de areia com alguns guarda sóis, pessoas, e uma água bem verde e cristalina do mar](/assets/img/porto-de-galinhas.jpeg)

O album recomendado e que estou ouvindo enquanto escrevo, é o [novo album da banda Tool](https://open.spotify.com/album/7acEciVtnuTzmwKptkjth5?si=P4isRw-xSuOcVS1F26rPJA), que está incrível. dê o play e volte para terminar a leitura.

Bom, já falei demais, vamos ao que importa!

## Qual é desse pato afinal?

A primeira vez que eu ouvi sobre essa técnica foi no meu livro favorito de programação, ~~se você achava que era o Clean Code, erroooou~~, que é o [The Pragmatic Programmer](https://www.amazon.com.br/Pragmatic-Programmer-Journeyman-Master/dp/020161622X), inclusive já escrevi um post com [65 dicas para ser um programador melhor](https://willianjusten.com.br/65-dicas-para-ser-um-programador-melhor/) que foram também retiradas do livro.

Esse pato tem a ver com uma técnica bem famosa que se chama [Rubber Duck Debugging](https://rubberduckdebugging.com/) que consiste em você explicar o seu processo/código para um patinho de borracha (pode ser qualquer outra coisa também).

## Como funciona?

Os computadores são máquinas muito eficazes, mas elas são "burras" e só seguem processos. E o seu código não é diferente disso, você escreve comandos que possuem um fluxo com intuito de obter um resultado desejado.

O que muitas vezes acontece é que esquecemos ou fazemos algo errado durante o processo e aparece o famoso **bug**. Nesse momento entra o desespero e a pergunta mais famosa:

> Mas o que há de errado? Estava funcionando ainda pouquinho!

Nesse momento que o seu patinho de borracha entra em ação. Você vai falar passo-a-passo em voz alta para o seu pato, o que fez e o que está acontecendo. E pronto! A mágica vai acontecer e o pato vai te ajudar a encontrar o problema!

![Uma ilustração mostrando o cérebro trabalhando mais e mais: quando você trava num código, aí pega o pato, aí explica o problema e aí o problema é resolvido.](/assets/img/rubber-duck-magic.jpg)

## Que bruxaria é essa?!

Existe [toda uma psicologia de como isso funciona](https://www.thoughtfulcode.com/rubber-duck-debugging-psychology/), mas basicamente quando você fala em voz alta (por isso a importância), o seu cérebro consegue processar melhor os detalhes e, com isso, sua atenção a detalhes/erros fica mais aguçada, consequentemente você acha os problemas mais rapidamente.

É aqui que você se pergunta:

> Tá, mas por que de um pato?

Não tem motivo, pode ser um pato, um coelho, um bicho de pelúcia, um boneco, enfim, qualquer coisa que não seja você, inclusive, se você puder falar/explicar para um amigo é ainda melhor, mas obviamente, seria chato ficar chamando atenção/atrapalhando alguém a cada 30 segundos durante o processo de encontrar o erro.

## Conclusão

Esse foi um post rápido e simples para apresentar uma técnica que a maioria já conhecia, mas continuo achando muito importante que esse tipo de técnica seja passada sempre adiante.

Muitos de nós já fazemos isso sem perceber, ou já não lembra das vezes que você chamou um amigo/colega para ajudar a corrigir um bug e só de explicar para ele o contexto, você mesmo resolveu?

Eu resolvi escrever esse post, exatamente pois quando o [Felipe Fialho estava fazendo o novo blog dele](https://www.felipefialho.com/blog/como-foi-desenvolver-meu-novo-blog-usando-o-gatsbyjs/) ele me chamou para ajudar com alguns problemas do Gatsby e por várias vezes, eram coisas bobinhas, que só de falar/mostrar, já ia se resolvendo.

Então, sempre que você puder, chame um amigo/colega ou fale com seu patinho de borracha, mas dê preferencia pelo patinho, assim estará evitando que seu amigo/colega atrapalhe-se e estará criando uma maior autonomia!


Sim, é isso mesmo, um patinho de borracha pode ajudar demais a você encontrar seus bugs.

Como um patinho me ajudou a ser um programador melhor

## Introdução

Fala pessoal, o post de hoje, é na realidade uma [tradução/adaptação de um post](https://dev.to/pagely/seo-cheat-sheet-for-devs-5h1g). Eu já escrevi [um post sobre SEO](https://willianjusten.com.br/como-melhorar-meu-seo/) antes, mas como são informações diferentes, achei válido de compartilhar aqui.

Enquanto escrevo, vou ouvindo um dos melhores lives que já ouvi na vida, que é o album [Guide me back home (Live)](https://open.spotify.com/album/4dfzMiWAbm39kNAbvgptDr?si=C14YEC2VS4-6pecYfOZb3g) do City and Colour. As músicas são lindas demais e a interação dele com o público deixa tudo ainda mais legal.

Mas bom, vamos logo ao post!

## Preparando para lançar ou migração

1. Coloque o seu domínio para renovar automaticamente. Pode parecer óbvio, mas muita gente já perdeu o domínio porque esqueceu de renovar.
2. Instale o [Google Analytics](https://analytics.google.com/analytics/web/) ou outro [similar](https://www.searchenginejournal.com/9-google-analytics-alternatives/92071/).
3. Certifique-se de seguir todas as [boas práticas com as meta tags](https://moz.com/blog/the-ultimate-guide-to-seo-meta-tags). 
4. Configure o [Search Console da Google](https://search.google.com/search-console/about?hl=pt-br) no seu site. Ele permite você saber como as pessoas estão alcançando seu site, por quais palavras na busca e até mesmo sua posição na busca.
5. Ajude o Google a entender o conteúdo do seu site usando [dados estruturados](https://developers.google.com/search/docs/guides/intro-structured-data?visit_id=1-636507697624367960-3670912478&rd=1). E teste esses dados na [própria ferramenta deles](https://search.google.com/structured-data/testing-tool/u/0/).
6. Use ferramentas para testar o seu SEO, desde o [Lighthouse](https://willianjusten.com.br/medindo-performance-do-seu-site-com-lighthouse/), até ferramentas externas como [Screaming Frog](https://www.screamingfrog.co.uk/seo-spider/) ou [Neil Patel SEO](https://neilpatel.com/br/seo-analyzer/).
7. Verifique se o seu site é amigável para mobiles, desde o visual até a performance. [53% das visitas são abandonadas se o site mobile demora mais de 3s para carregar](https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/).
8. [Revise os erros mais comuns que desenvolvedores cometem quando criam um site mobile](https://developers.google.com/search/mobile-sites/mobile-seo/common-mistakes).
9. Diga para os mecanismos de pesquisa qual URL usar. A Moz descreve que isso (criar canonical links) é a [maneira de previnir problemas causados por conteúdos iguais ou "duplicados" de aparecerem em múltiplas URLs](https://moz.com/learn/seo/canonicalization).
10. Use `https`: [desde 2015, Gary Illyes da Google diz que se as páginas forem identificadas como iguais, o sistema irá priorizar sempre o https, indicando um domínio seguro](https://www.bruceclay.com/blog/gary-illyes-interview/). 
11. Identifique suas images usando o `alt`. Os sistemas de busca não enxergam imagens sem um texto que consiga descrevê-las. Sem contar que isso é **extremamente importante para acessibilidade**.
12. Crie URLs amigáveis. Nada de urls gigantescas, com números e letras desordenadas. Isso só vai prejudicar com que as pessoas tentem acessar.
13. Se seu site possuir uma pesquisa [tente instalar o search box no seu site para que seja possível pesquisar através do Google](https://developers.google.com/search/docs/data-types/sitelinks-searchbox).
![Uma imagem mostrando o search dentro do próprio Google](https://res.cloudinary.com/practicaldev/image/fetch/s--4yXlk8jE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pagely.com/wp-content/uploads/2018/01/search-engine-box.png)
14. Numa migração, tome algum tempo para verificar todos os casos de páginas 404 e crie redirects para os seus devidos links.
15. Tenha um olhar crítico para a usabilidade. Será que seus usuários querem que o vídeo toque automaticamente? Esse menu faz sentido?
16. Use formulários de contato ao invés de só passar o seu email para evitar spams. 

## Após o site ser lançado

1. Veja quantas páginas estão sendo indexadas no Google usando **site:yourwebsite.com** na busca do Google.
2. Conforme o site for mudando e novas urls forem aparecendo, [peça ao Google para rastrear novamente seu site](https://support.google.com/webmasters/answer/6065812?hl=en).
3. Veja os erros do Google no Search Console.
![Uma imagem indicando os erros do site](https://res.cloudinary.com/practicaldev/image/fetch/s--7wV6EGFG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pagely.com/wp-content/uploads/2018/01/crawl-errors.png)
4. Atualize seu sitemap removendo URLs não canônicas e páginas 40x antes de submeter o sitemap.
5. [Escreva um markup que ajude as buscas](https://support.google.com/webmasters/answer/99170)
6. Fique sempre de olho na [velocidade do seu site](https://developers.google.com/speed/). No lançamento o site pode estar lindo e rápido, mas se não continuar checando frequentemente, a velocidade pode ser prejudicada por imagens grandes e outros conteúdos que talvez não fossem necessários.
7. Verifique por links quebrados e sempre redirecione para os corretos.
8. Verifique se os backlinks não foram perdidos com a migração do site ou o novo design. O [Ahrefs](https://ahrefs.com/) é uma boa ferramenta para descobrir isso.
9. Use sites como [Signals](https://cognitiveseo.com/signals/), [Mozcast](http://mozcast.com/) ou [Barracuda](https://barracuda.digital/panguin-seo-tool/) para ficar atento a mudanças no algoritmo de busca do Google que podem impactar seu site.

## Conclusão

O design do site é uma grande parte do SEO e essa lista pode te ajudar no lançamento ou migração do seu site. A empresa que escreveu esse post tem [estudo de caso](https://pagely.com/case-studies/bmc/) onde eles duplicaram os acessos de um cliente, então é algo que realmente funciona.

A Google atualizou recentemente o [Guia de SEO](https://support.google.com/webmasters/answer/7451184) deles, vale dar uma olhada também.

E se você tiver alguma dica, bota aí nos comentários =)


Algumas dicas que podem ajudar o seu site se destacar nas pesquisas do Google.

Lista de dicas de SEO para Devs

## Introdução

Fala pessoal, o post de hoje é sobre um assunto que eu já abordo faz um tempo, criei vários tweets uma época, mas agora reparei que nunca tinha escrito um post sobre isso. Provavelmente será um post curto e a ideia é que ele seja usado como referência em discussão.

Enquanto escrevo esse post, vou ouvindo uma banda de post-rock que eu amo demaaais, que é a [Explosions in the Sky](https://open.spotify.com/artist/1uQWmt1OhuHGRKmZ2ZcL6p?si=6Cdmq6BERceYUJSTEi9svQ). Na minha opinião, uma das melhores bandas para se ouvir enquanto se está trabalhando.

## O que a web é hoje e como deveria ser?

Existe um site bem bacaninha que trouxe esse assunto há um tempo, que foi o [alwaysonyourplatform.com](https://www.alwaysownyourplatform.com/). Basicamente, ele lembra que antes tínhamos o RSS, cada um tinha o seu próprio blog e apesar de parecer "mais difícil", todo mundo se achava.

A ideia da web é ser livre e descentralizada, mas por causa de monopólios como Facebook, Google, Medium, está tudo centralizado na mão de poucos. E o que acontece com isso? Nós perdemos a nossa liberdade! 

E essa liberdade não é só de poder fazer o que quiser com seu conteúdo, mas isso inclui até mesmo quem isso alcança. Ou vai dizer que você nunca viu ninguém mendigando para acionar o "sininho" para que o conteúdo chegasse até você? 

E o que dizer do **paywall**? Se você usa o Medium, provavelmente já deve ter visto a imagem abaixo:

![Texto cortado dizendo que para continuar lendo a história, você precisa se logar no Medium.](/assets/img/medium.jpeg)

E quais seriam as outras razões para se ter a própria plataforma ao invés de um Medium da vida?

## Razões para ter sua própria plataforma

Eu compartilharei somente algumas das razões e isso é altamente opinativo, você pode não concordar com tudo e é por isso que eu gostaria muito que você comentasse na seção de comentários, participe =D

### 1. Ownership do Projeto

Já parou para reparar que as pessoas normalmente falam "Você viu aquele post do Medium?" ao invés de falar "Você viu aquele post do fulano?". A descredibilização começa por aí. Os posts deixam de ser seus e sim do Medium, por mais que tenha sua fotinha lá e diga que você é o autor, já perdeu a relevância.

Ter um blog pessoal, marca sua presença na web, as pessoas te identificam e identificam o seu conteúdo. Por mais que o Medium tenha um alcance bem grande e você ache que está ganhando notoriedade com isso, a sua imagem é pulverizada e às vezes o retorno é até menor do que se fosse em seu próprio blog.

### 2. Medium é uma empresa!

Lembra do Blogger? MySpace? Google Plus? Inbox? Se você lembra, sabe que todos eles tem uma coisa em comum, foram descontinuados ou estão praticamente abandonados. E sabe o que aconteceu com o conteúdo lá? Morreu...

O que te garante que o Medium não vai quebrar e com isso, você vai perder tudo que tinha lá?

### 3. Personalização

Pode parecer bobeira, mas as vezes você quer um widget específico ou o código num highlight diferente e bom, lá você não terá isso. 

### 4. Aprendizado

Quando você cria seu blog pessoal, você aprende **MUITO** no processo. Você aprende a usar as ferramentas, aprende como publicar seu site, usar um domínio próprio, coisinhas de DNS. E além de todas as coisas técnicas, você também aprende um pouco de marketing, para conseguir aumentar seu alcance e atrair mais gente. E bom, todo aprendizado é útil e importante.

### 5. UI/UX confusa

Existe um post bem legal explicando [vários problemas de UI/UX](https://medium.com/@nikitonsky/medium-is-a-poor-choice-for-blogging-bb0048d19133) do Medium. Problemas como modais chatos aparecendo, banners de cookie, tooltip para qualquer texto que você seleciona a todo tempo, uma timeline desorganizada, e etc.

### 6. Aberto a colaboração

Isso mesmo, a plataforma é sua e você decide o que quiser nela! E isso inclui deixá-la opensource e receber ajuda de outras pessoas! Uma coisa que eu tenho dado bastante ênfase desde que refiz o novo layout do blog, é pedir a colaboração da galera, fazer com que as pessoas se sintam parte do meu blog, não só como leitores. Às vezes é difícil saber por onde começar a contribuir no Github, e ter um lugar onde você pode contribuir com uma revisão de texto ou até mesmo mudar estilos e parte do código, é bem legal.

Inclusive, deixo aqui agradecimento ao [Gabriel Ramos](https://github.com/gabrieluizramos) que [submeteu um PR](https://github.com/willianjusten/willianjusten.com.br/pull/112) melhorando as transições do blog.

Ao [Ademílson Tonato](https://github.com/ftonato), que está sempre revisando meus posts, sem ele, meus posts estariam cheios de erros xD

## Conclusão

Enfim, existem várias razões para você ter sua própria plataforma, seja para aprender, crescer sua imagem na web, ou até mesmo ajudar os outros e ganhar colaborações.

Não deixe que a web seja dominada por poucos! Faça com que a internet seja como ela sempre foi planejada para ser, livre e descentralizada!

```bash
(•_•)
<)    )╯Always
/    \

\(•_•)
(    (>  Own
/    \

(•_•)
<)    )>  Your Platform
/    \
```



Algumas razões para você ter sua própria plataforma ao invés de soluções como o Medium.

Diga não ao Medium: tenha sua própria plataforma

Meu roteiro, lugares que me hospedei, passeios que fiz e outras curiosidades.

Meus 15 dias no Chile

## Introdução

Fala pessoal, o post de hoje será sobre um assunto que eu gosto demais, **métricas!** Vira e mexe eu posto algumas coisinhas no meu [Twitter](https://twitter.com/Willian_justen) sobre estatísticas do blog e até mesmo em outros trabalhos, eu era vidrado em analisar dados. Sejam dados de performance, acessos e outras coisinhas mais.

Na maioria das vezes, eu faço essas métricas por curiosidade e elas não tem nenhum objetivo final. Mas essas métricas são extremamente importantes, principalmente se você tem um negócio próprio e deseja medir sua performance de vendas, atração de novos usuários e etc. Então por isso que irei falar sobre isso =)

Enquanto eu escrevo esse post vou ouvindo um músico/youtuber que encontrei por acaso no Spotify, ele faz músicas instrumentais muito boas! Se curte rock instrumental, vai no [perfil dele no Spotify](https://open.spotify.com/artist/4vnQIQmsGTMXSQy3B5ElAw?si=INHTMGSZRsSjirgq7ohA6Q).

## O que são esses eventos?

Antes de falar como usar, é melhor explicar o que são né? A explicação mais simples é:

> Evento é uma interação/atividade do usuário com elementos da página, pode ser desde a simples `view` até interações mais diretas, como o clique ou submissão de um formulário.

Alguns exemplos de interação seriam:

* View de uma página
* Clique num link de menu
* Uma busca no site
* Play num vídeo
* Download de um pdf
* Play de um podcast
* Scroll da página

Enfim, você pode mensurar qualquer tipo de interação que o usuário tenha no seu site!

## Qual a importância disso?

Se até agora você não viu a importância disso, vou dar alguns exemplos para ajudar.

### Situação 1:

> Você tem um site onde publica seus podcasts e quer saber quantas pessoas entram na página e quantas de fato botam para tocar o episódio.

### Situação 2:

> Você tem um blog e deseja saber se as pessoas fazem de fato a leitura do post. Você pode analisar a porcentagem de scroll que eles fazem na página, assim é possível ter uma métrica melhor do que só a view.

### Situação 3:

> Você tem um ecommerce online e deseja saber a porcentagem de pessoas que adicionam coisas no carrinho, mas não finalizam. Você pode adicionar um evento no botão de adicionar ao carrinho e analisar contra as vendas e assim vai ter dados melhores também.

Enfim, são **infinitas** as possibilidades de métricas que você pode criar e analisar e os ganhos são imensos!

## A estrutura dos eventos

O Google Analytics tem uma estrutura bem definida dos eventos, o que facilita demais para podermos criá-los e criar métricas em cima deles. Essa estrutura é formada por **5 dados**:

### Event Category

Esse é o nome dado para um grupo de eventos similares que você deseja rastrear. Exemplo: eu tenho uma [página de cursos](https://willianjusten.com.br/cursos/) e quero analisar o clique nos cursos. Todos os eventos ficam na categoria "cursos" então. Assim como os links de curso que tenho.

### Event Action

Como o nome já diz, essa é a ação que você está rastreando. Exemplos: play de vídeo, clique num curso, clique num link do menu, scroll de uma página.

### Event Label

Aqui é onde você especifica melhor o evento em si. Por exemplo, no caso dos meus cursos, é aqui que eu defino o nome do curso que foi clicado. Assim eu consigo através do `category` ver todos os cliques nos cursos e aqui eu consigo ver curso a curso de forma mais específica. Assim eu consigo saber qual o curso mais clicado, por exemplo.

### Event Value

Esse é um valor **numérico**, que você assinala ao evento que está rastreando. Geralmente é associado a um valor monetário. Exemplo: o valor do produto que foi adicionado ao carrinho, valor que o download de um pdf significa, etc.

### Non Interaction

Esse é o último parâmetro que você passa no evento. Como disse lá acima, evento pode ser uma interação ou atividade do usuário. Para informar se esse evento é interativo ou não, você passa esse último parâmetro, iremos entrar em mais detalhes da implementação logo abaixo.

## Implementando o Google Analytics

A primeira das coisas e mais óbvia é que você precisa criar uma conta no [Google Analytics](https://analytics.google.com/analytics/web/) e o processo, como mostrado na imagem abaixo, são basicamente 3 etapas:

![Uma imagem mostrando as 3 etapas do Google Analytics. Você primeiro passa alguns dados, vai receber um script para colocar no site e depois é só aguardar e ver os dados no site do analytics.](/assets/img/google-analytics-tracker.png)

Esse código de acompanhamento é bem famoso, e fica parecido com o abaixo:

```html

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-58087941-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'XX-XXXXXXXX-X');
</script>

```

O mais importante desse script é o seu **tracking code**, que ali está representado por `XX-XXXXXXXX-X`.

No meu caso, como eu uso o Gatsby, existe o [gatsby-plugin-google-analytics](https://www.gatsbyjs.org/docs/adding-analytics/), e aí a configuração fica:

```js

// gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        // replace "XX-XXXXXXXX-X" with your own Tracking ID
        trackingId: "XX-XXXXXXXX-X",
      },
    },
  ],
}
```

## Implementando os eventos

Como eu já disse tudo sobre a estrutura ali acima, então fica muito fácil de implementar! A sintaxe é a seguinte:

```js
ga('send', {
  hitType: 'event',
  eventCategory: [Category],
  eventAction: [Action],
  eventLabel: [Label],
  eventValue: [Value],
  nonInteractive: [True | False]
});
```

Como a ordem dos parâmetros é sempre a mesma, você pode simplificar mais e colocar só:

```js
ga('send', 'event', 'Category', 'Action', 'Label', 'Value');
```

Okay, o código é esse, mas como e onde você coloca? Vamos a alguns exemplos:

Em eventos de `click`, onde são geralmente botões, você pode fazer até inline como:

```html
<a href="/foo" onclick="ga('send', 'event', 'Category', 'click', 'Label', 'Value');">Ir para Foo</a>
```

Se for algum evento de view, você pode colocar também diretamente na página, com um script inline:

```html
<script>
ga('send', 'event', 'Category', 'View', 'Label', 'Value', nonInteractive: true);
</script>
```

E se for algum evento ligado a um scroll, por exemplo, você pode adicionar diretamente no seu script, só lembrando de verificar a existência do `window.ga`, algo como:

```js

document.addEventListener('scroll', () => {
  if typeof window.ga !== undefined {
     // sua implementação aqui e mais o evento
     ga('send', 'event', 'Category', 'Scroll', 'Label', 'Value');
  }
})
```

## Como eu faço no Gatsby/React?

Existe um plugin chamado [React GA](https://github.com/react-ga/react-ga), que já facilita com todas as configurações necessárias para mim. E aí no exemplo da minha página de cursos, basta eu fazer o seguinte código:

```jsx
const courseClickTrack = title => {
  ReactGA.event({
    category: 'cursos',
    action: 'click',
    label: `Link Curso - ${title}`
  })
}

const Course = ({ title, description, link, image }) => {
  return (
    <S.CourseLink href={link} onClick={() => courseClickTrack(title)}>
      <S.CourseWrapper>
        <Image filename={image} alt={title} />
        <S.CourseInfo>
          <S.CourseTitle>{title}</S.CourseTitle>
          <S.CourseDescription>{description}</S.CourseDescription>
        </S.CourseInfo>
      </S.CourseWrapper>
    </S.CourseLink>
  )
}
```

Repare que no `onClick` do React eu ainda passo o `title` para que assim a minha `label` tenha diferentes valores para cada curso.

E eu faço isso para outras coisas, como podem ver [nesse tweet](https://twitter.com/Willian_justen/status/1151614625768755207). Então, se quiserem ver os trackers que eu uso, só acessar o [código fonte do blog](https://github.com/willianjusten/willianjusten.com.br/).

## Conclusão, Agradecimento e chamada para Open Source

É isso pessoal, espero que esse post ajude você a conseguir criar métricas mais legais e interessantes para os seus próximos sites. E se você tiver outras sugestões, não deixe de falar ali nos comentários ou no Twitter.

E para continuar, quero fazer um agradecimento ao [Luciano Carvalho](https://github.com/lucianocarvalho) que achou links quebrados no blog e não só avisou, como fez [um Pull Request](https://github.com/willianjusten/willianjusten.com.br/pull/110) corrigindo. 

Outras pessoas avisaram coisas via Twitter também e até fizeram sugestões, fica aqui meu obrigado a todos vocês! <3

E se você está começando na área e não sabe como iniciar, está aí uma oportunidade! O meu blog inteiro é open source e você pode ajudar na revisão dos artigos, melhorias de código e até inclusão de features que você acha que seria legal ter. Não perde a oportunidade e [vai lá no Github agora](https://github.com/willianjusten/willianjusten.com.br).

Qual a importância de rastrear eventos no seu site e como fazer isso de forma simples.

Como usar o Google Analytics Events Tracker?

## Introdução

Esse é outro post super rapidinho, mas trazendo uma dica que considero bem útil.   É possível que você siga meu blog e siga vários outros também, certo? E aí, como faz para se manter atualizado? Para ver se tem post novo ou não?

A maioria vai dizer que abre o blog sempre, para num perder os posts novos. Mas convenhamos, é meio complicado ficar lembrando de abrir sempre né?

E se eu dissesse que existem apps/extensões que te ajudam nessa tarefa e te avisam assim que um post fresquinho sai, não só em um blog, mas em todos que você quiser?

## Agregadores de conteúdo

Esses apps são chamados de agregadores de conteúdo, basta você passar um site (que seja compatível com RSS, ou seja, tenha um `xml` do conteúdo) e o agregador vai adicionar aquele blog na lista e vai mostrar, os posts antigos e também avisar quando tiverem posts novos!

Um que eu utilizo e indico é o [Feedly](https://feedly.com/), dentro dele, basta digitar o título do site ou a url, e o blog sendo compatível, ele já disponibiliza a opção de adicionar, segue abaixo um screenshot disso:

![Um screenshot de um input com "Willian Justen" digitado e então abaixo uma sugestão do blog.](/assets/img/feedly-add.png)

Depois de adicionado o blog, ele irá aparecer na lateral, junto com todos os outros sites e você vai ver dentro da lista de posts, todos os posts novos que forem aparecendo. Abaixo uma foto dessa lista:

![Lista com vários blogs e vários posts](/assets/img/feedly-lista.png)

## Conclusão

Como falei, esse seria um post extremamente rápido e simples, mas espero que a dica seja útil para ti. Assim você não perde nenhum post meu! =D

Se você já usa um agregador, mas não é o feedly, coloca aí nos comentários qual é e sua experiência com ele.


Como não perder nenhum post dos seus blogs favoritos.

Usando um agregador de conteúdo


## Introdução

Fala pessoal, uma coisa que pediam muito enquanto eu estava meio parado, eram dicas e coisas com CSS. Pois então, vamos voltar a fazer mais posts para a [série de dicas de CSS](https://willianjusten.com.br/series/#dicas-de-css).

A dica de hoje é extremamente simples, mas bem interessante, nós vamos aprender a criar um efeito que é usado em vários sites famosos, que é o chamado fullpage scroll ou onepage scroll. Ele nada mais é que uma adaptação do scroll, que faz com que ao você dar scroll, ele "mova uma tela inteira de uma vez só".

Bom, enquanto escrevo esse post, eu vou ouvindo o [Unplugged MTV do Alice in Chains](https://open.spotify.com/album/5PdgIAHzwDvTZRjIGSQGtN?si=FA3a1dtIQnmRZH_c50E0Xg), na minha opinião, é um dos melhores Unplugged que já ouvi, e olha que existem muitos bons.

## Demo

Se você quiser ver logo o negócio funcionando, seguem aqui as 3 diferentes demos:

- [Vertical](https://labs.willianjusten.com.br/scroll-snap/vertical)
- [Horizontal](https://labs.willianjusten.com.br/scroll-snap/horizontal)
- [Proximity](https://labs.willianjusten.com.br/scroll-snap/proximity)

Abaixo segue um gif do exemplo vertical, para você já entender o que faremos.

![Fotos de paisagens na Austria sendo scrolladas verticalmente](/assets/scroll-snap.gif)

## Plugins famosos e sites que usam

Como disse, vários sites usam essa técnica, mas eles acabam caindo em plugins JS. Que são os casos do:

- [FullPage](https://alvarotrigo.com/fullPage/)
- [One Page Scroll](http://www.thepetedesign.com/demos/onepage_scroll_demo.html)
- [RevealJS](https://revealjs.com/#/)

E aí, eu separei alguns sites bem legais que usam:

- [BBC - Partition of India Article](https://www.bbc.co.uk/news/resources/idt-d88680d1-26f2-4863-be95-83298fd01e02)
- [One Month Off - Indonesia](https://readymag.com/repponen/20907/10/)
- [Coca Cola Annual Review](https://www.coca-colacompany.com/annual-review/2017/index.html)

E quanto ao [RevealJS](https://revealjs.com/#/), existem várias apresentações de dev por aí usando ele. Já pensou, agora você pode fazer suas apresentações usando só css simples para passar os slides! =D

## Mas e como fazer isso só com CSS?

Existe um conjunto de propriedades chamadas [CSS Scroll Snap](https://caniuse.com/#feat=css-snappoints), que já é até bem antigo, mas vem ganhando compatibilidade com os browsers aos poucos. E algumas dessas propriedades, que é o caso do [scroll-snap-type](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type) já é bastante compatível e já faz o efeito que precisamos.

A sintaxe mudou um pouco e agora está ainda mais simples de usar, então vamos ver como que faz.

### Criando o Markup

Basicamente precisamos criar um `.container` e então as `sections`, que irão ocupar toda a página e para ter as imagens, utilizaremos diferentes `backgrounds`, então a forma mais simples fica assim:

```html
<div class="container">
  <section class="one">
    <div class="description">
      <p>
        Um caminho qualquer em Bad Ausee, uma cidade na região da Estíria que
        tem pouco mais de 5 mil habitantes.
      </p>
    </div>
  </section>
  <section class="two">
    <div class="description">
      <p>
        A caminho da cidade de Hallstatt, conhecida como uma das mais bonitas do
        mundo. Para chegar lá, somente de barco ou dando uma grande volta pelo
        lago de mesmo nome.
      </p>
    </div>
  </section>
  <section class="three">
    <div class="description">
      <p>
        As margens do lago Autaussee. Esse dia fazia apenas 10 graus negativos,
        mas eu queria muito passear e explorar todos os lugares.
      </p>
    </div>
  </section>
  <section class="four">
    <div class="description">
      <p>
        Mais uma foto do mesmo barco que leva a Hallstatt, mas dessa vez do meu
        drone, amo como a reflexão ficou tão azul em contraste com as montanhas.
      </p>
    </div>
  </section>
  <section class="five">
    <div class="description">
      <p>
        Momentos antes do pôr-do-sol visto de Hallstatt. Essa cadeia de
        montanhas é realmente maravilhosa!
      </p>
    </div>
  </section>
</div>
```

Cada `section` tem uma classe específica, assim conseguimos adicionar diferentes backgrounds para cada um.

### Criando o CSS base para as sections

Antes de fazer o scroll funcionar, vamos criar os estilos para as seções ficarem fullscreen e a caixa da descrição da foto. Para ocupar a tela inteira vamos utilizar as propriedades `vw` e `vh`, que são unidades de viewport, eu falo [mais sobre elas aqui](https://willianjusten.com.br/como-criar-secoes-fullscreen-com-css/). Segue abaixo o css:

```css
section {
  background-size: cover;
  background-position: center center;
  height: 100vh;
  width: 100vh;
}

.description {
  background: rgba(0, 0, 0, 0.3);
  bottom: 1rem;
  color: white;
  font-size: 1rem;
  line-height: 1.5;
  max-width: 250px;
  padding: 2rem;
  position: absolute;
  right: 1rem;
}

.one {
  background-image: url('./img/one.jpg');
}
.two {
  background-image: url('./img/two.jpg');
}
.three {
  background-image: url('./img/three.jpg');
}
.four {
  background-image: url('./img/four.jpg');
}
.five {
  background-image: url('./img/five.jpg');
}
```

### Agora a mágica do CSS

Basicamente precisamos dizer ao nosso `.container`, que ele vai ter esse controle de scroll, utilizando a propriedade `scroll-snap-type`. Ela recebe 2 parâmetros que podem ser `scroll-snap-type: x|y|both mandatory|proximity`.

O primeiro parâmetro indica para onde será o scroll, `x` para o scroll horizontal, `y` para scroll vertical e `both` se for para os dois eixos. Já o segundo parâmetro indica como funcionará o scroll.

O `mandatory` diz que pelo simples fato de você mover um pouco o scroll, ele já irá para o próximo "slide", já o `proximity`, ele vai calcular qual está mais próximo, se você mover só um pouco ele vai voltar a centralizar o slide atual.

Então para fazer os slides mudarem de forma horizontal, usaremos da seguinte forma:

```css
.container {
  scroll-snap-type: x mandatory;
  display: flex;
}

section {
  scroll-snap-align: start;
}
```

Passando a propriedade `scroll-snap-align`, a gente diz em qual parte do slider queremos que o scroll pare e alinhe, como é uma página inteira, faz mais sentido ser no `start`, mas existem também as opções de `end` e `center`.

E pronto! Já está funcionando! Sim, só isso, não precisa de mais nadinha! Você pode ver o exemplo do [horizontal aqui](https://labs.willianjusten.com.br/scroll-snap/horizontal) e se quiser ver o [código inteiro](https://github.com/willianjusten/labs/blob/gh-pages/scroll-snap/horizontal.html).

Para o exemplo na vertical, basta trocar o eixo de `x` para `y`, ficando `scroll-snap-type: y mandatory;`. Você pode ver exemplo do [vertical aqui](https://labs.willianjusten.com.br/scroll-snap/vertical) e se quiser ver o [código inteiro](https://github.com/willianjusten/labs/blob/gh-pages/scroll-snap/vertical.html).

## Conclusão

A dica de hoje foi super rápida e simples, mas é possível que muita gente não conheça essa propriedade, então é legal passar adiante. Vou continuar postando algumas outras dicas com CSS para criar soluções que usamos no nosso dia a dia. Se vocês tem alguma coisa específica em mente, deixa aí nos comentários ou manda lá no [Twitter](https://twitter.com/Willian_justen) que eu posso estar fazendo.


Criando fullpage scroll com simples linhas de CSS.

Dica de CSS: Scroll Snap


## Introdução

Fala pessoal, faz muito tempo que não escrevo e já recebi até email de gente perguntando o que estava acontecendo e porque não tinha mais nenhum post novo! De fato, eu andei bem ocupado nos últimos tempos, principalmente pois eu estava trabalhando em certos projetos na [Toptal](https://www.toptal.com/) e também cuidando um pouco da minha saúde. E junto a isso, também tem aquela famosa preguiça né, se tivesse um título para a pessoa que mais procrastina, com toda certeza eu estaria no **top 10**.

O blog é novo, mas algumas coisas não podem mudar né, então lá vai aqui a banda que estou ouvindo enquanto escrevo esse post, o nome dela é [While She Sleeps](https://open.spotify.com/artist/38LdIuxB548zgHoEY2AN7a?si=HlQ3kLIqQX-jG5xmpcAVAA), é um pouco mais agitada, assim vou tentar não enrolar para escrever e lançar logo esse post.

Bom, a ideia nesse post é falar as tecnologias novas que usei e o porquê delas, **não pretendo ensinar como fazer nada do zero aqui** (muito possível eu crie um curso sobre isso).

## Visual e Mudanças

Bom, se você ainda se lembra do blog antigo, ele tinha um menu hamburguer que acabava escondendo alguns dos links e com isso perdiam alguns cliques. O blog iniciava claro e então você poderia escolher para mudar para o Dark Mode e a lâmpada ficava sempre no bottom, as vezes escondendo um pouco do conteúdo atrás. Eu coloquei um evento para identificar qual tema era mais utilizado (Dark ou Light) e com quase 80% o Dark mode ganhou, então, por isso eu decidi colocá-lo como padrão. Abaixo segue um screenshot do blog antigo:

![Screenshot da home antiga, tela branca e cards brancos. ](/assets/img/blog-antigo.png)

No blog novo, meu objetivo era trazer alguns links meus já para o primeiro olhar da pessoa, por isso adicionei as minhas redes sociais, onde não pude deixar de incluir o [Unsplash](https://unsplash.com/@willianjusten), que é onde boto as minhas fotos de viagem, que são uma grande paixão que tenho atualmente. Além desses links, também já deixei aparente os links para [cursos](https://willianjusten.com.br/cursos/) e [séries](https://willianjusten.com.br/series/), que são partes bastante importantes no blog para mim. Se você entrou por esse post e num viu a home, fica abaixo um screenshot dela:

![Screenshot do blog novo, com interface escura e os posts em lista.](/assets/img/blogo-novo.png)

Outra grande mudança na estrutura, foi a adição dessa barra de ações na lateral, assim fica mais fácil de usar a busca, mudar o tema e uma feature que há muito me pediam também (de ir para o topo, já que meus posts são imensos).

Já dentro dos posts, a mudança foi pouca, mais centralizada mesmo no header, antes possuía um header bem grande até chegar o post e agora eu resolvi remover isso, já que a ideia é que a pessoa já vá direto no texto. Também haviam uns bugs de altura nesse header que me incomodavam desde a primeira vez, então nada melhor que removê-los.

## Sai Jekyll entra Gatsby

Desde quando iniciei o meu blog, lá em [2015](https://willianjusten.com.br/making-of-parte-1/), eu utilizei um gerador estático, no caso o Jekyll. Ele sempre me serviu muito bem e ainda serve! Eu não mudei do Jekyll por achar ele ruim ou qualquer outra coisa, muito pelo contrário, adoro demais a simplicidade do Jekyll.

A minha mudança para o [Gatsby](https://www.gatsbyjs.org/) foi motivada somente pelo fato de ser em React e usar GraphQL, que são duas tecnologias que venho usando faz tempo e queria brincar e treinar um pouco meus conhecimentos. E como eu sempre digo:

> Não há nada melhor que usar o seu blog como cobaia para testes e aprendizados.

Posso dizer que aprendi bastante com o Gatsby e to achando uma ferramenta incrível! Não há melhor/pior entre Gatsby e Jekyll, pois eles fazem praticamente a mesma coisa. Mas uma grande diferença que notei, é que apesar do Gatsby ser mais novo, ele tem uma documentação incrível e uma comunidade melhor ainda! Todos os problemas que eu tinha, achava a solução muito rapidamente. Além dos vários plugins embutidos que facilitam demais! Eu consigo fazer um site se tornar PWA com somente uma linha!

## Styled Components

No blog anterior eu utilizava o [Stylus](http://stylus-lang.com/), numa estrutura bem simples, mas que ao mesmo tempo, era um pouco complicada de organizar e até de gerar um css inline de boa qualidade e de fácil customização.

Para o blog de agora, nem foi difícil de pensar, já que estaria trabalhando com React, minha primeira escolha foi o [styled-components](https://www.styled-components.com/), é leve e super simples de usar. Posso criar os estilos diretamente para o componente e também os estilos globais para todas as páginas.

Junto dele, eu utilizei o [styled-media-query](https://github.com/morajabi/styled-media-query) para poder criar os estilos de acordo com cada media query.

A estrutura, ficou mais ou menos assim:

```bash
├── components
│   ├── Avatar
│   │   ├── index.js
│   │   └── styled.js
│   ├── Course
│   │   ├── Image.js
│   │   ├── index.js
│   │   └── styled.js
│   ├── Layout
│   │   ├── index.js
│   │   └── styled.js
│   ├── MenuBar
│   │   ├── index.js
│   │   ├── styled.js
│   │   └── trackers.js
│   ├── MenuLinks
│   │   ├── content.js
│   │   ├── index.js
│   │   └── styled.js
...
```

Repare que tenho uma pasta específica para componentes e para cada componente eu tenho um `index.js` que é onde tem a lógica dele e tenho um `styled.js` que é onde ficam os meus estilos. Prefiro fazer assim, pois eu tenho o css separado, então sei onde editar e isso evita aqueles arquivos imensos, que unem lógica e visual.

Pegando um trecho de código para exemplificar como faço:

```js
// components/Layout/styled.js

import styled from 'styled-components'
import media from 'styled-media-query'

export const LayoutWrapper = styled.section`
  display: flex;

  ${media.lessThan('large')`
    flex-direction: column;
    padding-top: 4.125rem;
  `}
`

export const LayoutMain = styled.main`
  background: var(--background);
  min-height: 100vh;
  padding: 0 3.75rem 0 20rem;
  transition: background 0.5s, color 0.5s;
  width: 100%;

  ${media.lessThan('large')`
    padding: 0 0 3rem 0;
  `}
`
```

Nesse arquivo, eu crio e exporto minhas classes e então para utilizar, faço assim:

```jsx
// components/Layout/index.js

import * as S from './styled'

const Layout = ({ children }) => (
  <S.LayoutWrapper>
    <GlobalStyles />
    <TransitionPortal level="top">
      <Sidebar site={site.siteMetadata} />
    </TransitionPortal>
    <S.LayoutMain>{children}</S.LayoutMain>
    <TransitionPortal level="top">
      <MenuBar />
    </TransitionPortal>
  </S.LayoutWrapper>
)
```

Eu retirei alguns trechos não referentes ao `styled-components` para facilitar a leitura. Mas perceba que eu faço um import de tudo que tem em `./styled` como `S`. Assim os componentes que iniciam por `<S.` eu sei que são referentes a estilo e não a outros componentes externos.

Creio que essa é uma das melhores organizações que já achei, eu ganho em legibilidade separando os arquivos e também ganho na facilidade de identificação do que é estilo e do que não é.

## Markdown + Graphql = Remark

Uma coisa que eu não queria abrir mão era de utilizar o Markdown, para quem não conhece ~~mas deveria já conhecer~~, o [Markdown](https://daringfireball.net/projects/markdown/) é um formato de texto simples que se converte em html, ele é usado em vários lugares, inclusive quando você vai escrever aquele Pull Request lá no Github.

Ao invés de escrever tags, eu simplesmente coloco símbolos onde eu quero e muitas vezes nem isso. Como é o caso dos parágrafos, que é só pular uma linha e ele entende.

Mas como fazer isso funcionar no Gatsby? Quando eu li pela primeira vez, eu vi que ele utilizava API's como o [Contentful](https://www.contentful.com/) para alimentar o GraphQL e então poder mostrar os dados na tela. Mas foi então que eu descobri o [Gatsby Transformer Remark](https://www.gatsbyjs.org/packages/gatsby-transformer-remark/), que pega os meus posts em Markdown, faz algumas mágicas e libera os dados via GraphQL para eu poder usar no Gatsby sem problemas!

Depois de instalar o plugin e configurar no arquivo `gatsby-config.js` (que é o arquivo onde todos os plugins e configurações são feitas), bastou subir o servidor e eu podia ver todos os dados lá no `http://localhost:8000/___graphql`. Abaixo fica uma imagem de como isso fica:

![Screenshot da interface do GraphQLi, onde eu tenho uma query buscando por vários dados de todos os posts](/assets/img/gatsby-graphql-remark.png)

## Search usando o Algolia

O Search do blog anterior era um pouquinho simples, para num dizer burro mesmo. Eu basicamente tinha um JSON e percorria ele baseado na string que a pessoa digitava, além de não mostrar nenhum "preview" das coisas que poderiam ser buscadas. Com isso, muita gente acabava sem saber o que pesquisar, por onde começar e muitas vezes sequer achava o que gostaria (mesmo eu tendo posts do assunto!).

Para corrigir isso, eu resolvi utilizar o [Algolia](https://algolia.com), eles são um sistema de busca extremamente rápido e inteligente. Possibilitando buscas por sinônimos, por conteúdos dentro do texto do post, além de ter um "typo correction", ou seja, se a pessoa errar uma letra ou outra, ele vai buscar pelo termo certo.

Ele possui vários planos, e o que eu uso é o Community, que é gratuito e já me permite 50 mil operações por mês, o que é bem suficiente para o tamanho do meu blog. Além disso, ele me dá alguns dados relacionados a que tipos de buscas foram feitas, isso me ajuda a saber o que as pessoas procuram e se eu não tiver nada do assunto, posso começar a escrever! Olha só a dica. Abaixo segue um screenshot sobre essa parte dos analytics:

![Imagem mostrando o analytics do algolia](/assets/img/algolia-search.png)

Um detalhe **muito importante**, é que o plugin oficial do Algolia não trabalha com cache e partial updates, então toda vez que você faz um build, ele apaga todos os índices e refaz. Isso é péssimo, pois nós só temos 50 mil operações e oras, se eu num fiz nada novo, num faz sentido refazer. O legal é que existe um fork desse plugin que faz exatamente o que queremos, o plugin é o [gatsby-plugin-algolia-search](https://www.npmjs.com/package/gatsby-plugin-algolia-search), ele não muda em nada na configuração, somente essa parte de partial updates.

## Comentários com o Disqus

Essa parte é uma das coisas que eu fiquei muito pensativo se usava ou não. O número de comentários diminuiu bastante nos últimos tempos (vi muitos comentando o mesmo, então creio ser algo "global").

Além disso, por ser um third-party script, ele acaba carregando coisas que prejudicam de leve a performance, mesmo que várias coisas sejam async. Estou utilizando o [react-disqus-comments](https://www.npmjs.com/package/react-disqus-comments), que foi a solução mais simples e leve que achei também.

Mas, como gosto de ver a participação das pessoas, resolvi colocar os comentários novamente. Vamos ver como vai ser, qualquer coisa eu removo no futuro.

## Netlify e Netlify CMS

Se você já viu minha página de [cursos](https://willianjusten.com.br/cursos/), com toda certeza já viu meu [Mini curso de Netlify](https://www.youtube.com/watch?v=a1cIjP1bueM&list=PLlAbYrWSYTiMGMxQf9JSoZUU1rgVpGPth). Eu sou extremamente fã do serviço deles, além de ser super simples, me dá várias vantagens, uma delas é poder ter preview/deploy de diferentes branches. E foi assim que eu consegui fazer testes fora do meu local, permitindo que outras pessoas também pudessem testar, além de eu analisar a performance (sim, sou o fissurado da performance).

Junto do Netlify, tem também o Netlify CMS, que basicamente adiciona um CMS para o meu blog, sem esforço nenhum, bastando algumas linhas.

E porque usar um CMS, se eu já subo tudo para o Github e eu sei ler Markdown sem problemas?

Simples, no CMS, eu posso escrever rascunhos de forma mais fácil, deixar uma pilha de ideias lá e ir terminando conforme eu achar necessário. Além de ter um preview do que estou escrevendo e bom...Quando eu for fazer algum site para o cliente e ele pedir um CMS, eu já sei como fazer rapidinho, sem precisar de um elefante branco ~~to olhando para você Wordpress~~.

Abaixo segue alguns screenshots de como funcionam as interfaces:

### Lista de Posts no CMS

![Lista de Posts no CMS](/assets/img/cms-posts.png)

### Parte de Workflow, para definir os rascunhos, revisando e prontos para lançar

![Parte de Workflow, para definir os rascunhos, revisando e prontos para lançar](/assets/img/workflow-cms.png)

### Preview do Post

![Preview do Post](/assets/img/preview-cms.png)

Como pode ver, é uma interface super simples, mas super funcional! E o legal que dá para extender, criar seus próprios componentes e tudo!

## Extras

Bom, tiveram outras várias coisas que utilizei no blog também e que valem comentar, então seguem abaixo algumas delas:

### Transições

Para fazer essas transições, eu utilizei o [gatsby-plugin-transition-link
](https://transitionlink.tylerbarnes.ca/docs/). Ele é incrível e bastante simples! Fica abaixo um snippet de como faz funcionar:

```jsx
<AniLink cover to="/" direction="left" duration={3} bg="white">
  Home
</AniLink>
```

Basta você passar qual tipo de animação que deseja (`fade`, `swipe`, `cover`, `paintDrip`) e alguns outros parâmetros como `direction` e `duration`.

### Highlight Code

Para mostrar o código do jeito estiloso acima, eu utilizo o [PrismJS](https://prismjs.com/). E no Gatsby fica ainda mais fácil, pois existe o [gatsby-remark-prismjs](https://www.gatsbyjs.org/packages/gatsby-remark-prismjs/), que faz o parser do código que tá no Markdown e já estiliza para mim. Super simples de configurar e funciona bem fácil.

### Lazy loading e otimização de imagem

Se você reparou nas imagens do post, elas são carregadas só quando você se aproxima e além disso, para num ficar um espaço vazio e criar aqueles pulos, eu também carrego um thumb bem pequeno e com o tamanho final definido, isso ainda dá aquele efeito de blur, comum no Medium e outros sites. Outra coisa que também é feito, é que eu carrego diferentes tamanhos de imagem de acordo com a tela, melhorando muito a performance.

Para fazer todas essas otimizações, eu utilizo o **incrível** [Gatsby Image](https://using-gatsby-image.gatsbyjs.org/), que usa o Sharp por debaixo dos panos para gerar as imagens para nós.

### PWA

Para fazer meu blog virar um PWA foi muito muito fácil. Sério mesmo, não tive nem que me preocupar com o que salvar no Service Worker ou se estava cacheando certo. Para isso, eu usei 2 plugins, um para criar o manifest, que é o [gatsby-plugin-manifest](https://www.gatsbyjs.org/packages/gatsby-plugin-manifest/) e o outro para fazer a criação do Service Worker e salvar minhas páginas, que é o [gatsby-plugin-offline](https://www.gatsbyjs.org/packages/gatsby-plugin-offline/). Esses dois pacotes são oficiais do Gatsby e já até vem inclusos em alguns starters.

## Performance

Como disse no início, o Gatsby faz várias otimizações no momento do build do site. Ele minifica tudo, separa o css para ter critical inline, faz renderização assíncrona, além de fazer preload dos links, para ter uma sensação de abertura instantânea quando clicamos. Com isso, se [medirmos a performance com o Lighthouse](https://willianjusten.com.br/medindo-performance-do-seu-site-com-lighthouse/), vamos ter notas super altas. Segue abaixo o meu:

![Uma imagem mostrando notas 100 em todos os quesitos no lighthouse](/assets/img/ligthouse-perf-novo.png)

## Conclusão

Bom galera, espero que tenham curtido o visual novo e as escolhas que eu fiz. Se você acha que algo poderia ser diferente ou melhor, por favor, não deixe de compartilhar ali nos comentários ou então nas minhas redes sociais. E se você gostaria de um curso sobre o assunto, deixa nos comentários também, para eu saber o interesse =)


Coisas que usei por trás desse blog, escolhas de visual, performance e muitas outras coisas.

Making of - Criando meu Blog Novo com GatsbyJS


## Introdução

Fala pessoal, esse é mais outro post/vídeo, e como o título diz, a ideia será converter um componente para usar o novíssimo hooks. Se você é um leitor assíduo do post, já deve ter visto [meu post sobre hooks](https://willianjusten.com.br/habemus-react-hooks/), lá eu falo o que são, para que servem e outras coisas mais.

O componente escolhido para converter foi o [React-Snakke](https://github.com/diogomoretti/react-snakke/) feito pelo [Diogo Moretti](https://twitter.com/diogomoretti_).

Você pode ver o código todo nesse link do [CodeSandbox](https://codesandbox.io/s/jjyyn9n1vv) e abaixo deixarei o vídeo também.

## Vídeo

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

## Sobre o código e o refactor

Bom, eu vou pontuar as partes mais importantes do código aqui, mas eu aconselho a assistir o vídeo também, já que nele eu explico mais detalhadamente o processo. Certas partes do código serão simplificadas com `...`, mas você pode ver tudo lá no [CodeSandbox](https://codesandbox.io/s/jjyyn9n1vv).

### Transformar de Classe para Função

Bom, a primeira etapa, é transformar o componente que usava classe, para função. Já que os hooks **não funcionam** dentro de classes.

```js
// antes
export default class Snakke extends Component { ... }

// depois
export default function Snakke(props) { ... }
```

### Remover o this e usar as variáveis diretamente

Feito isso, a outra coisa é que todos os lugares que tiverem referências ao `this`, ou seja, o objeto da classe, não existem mais e você precisa usar ou direto do `props` ou a variável direta se for o caso. E variáveis dentro das funções precisam ser assinaladas como tal, usando `let` ou `const`.

```js
// antes
styles = {
  ...
  height: this.props.height,
  opacity: this.props.opacity,
  zIndex: this.props.zIndex,
  ...
}

// depois
const styles = {
  ...
  height: props.height,
  opacity: props.opacity,
  zIndex: props.zIndex,
  ...
}
```

### Substituir state pelo useState

Depois dessas duas mudanças, nós começamos a procurar locais onde tenham definições e mudanças de `state`.

E no caso do código inicial, nós tínhamos a variável `progress` que possuía um valor inicial e também recebia uma atualização através do `this.setState`

```js
state = {
  progress: 0
}

this.setState({
  progress: total
})
```

Dentro do React Hooks, para trabalhar com estados, nós temos o método [useState](https://willianjusten.com.br/habemus-react-hooks/#usando-o-hook-de-estados-usestate). E ele funciona da seguinte forma:

```js
import React, { useState } from 'react'

const [progress, setProgress] = useState(0)
```

Nós criamos um array que recebe 2 valores, o primeiro é a variável que queremos mexer com os valores dela (nosso estado) e o segundo parâmetro é o método que vai ser responsável por atualizar esse estado, no caso o `setProgress`.

O último detalhe sobre o `useState` é que ele recebe um parâmetro, que é o estado inicial da variável, no nosso caso, é o valor `0`.

### Substituir métodos lifecycle por useEffect

Dentro desse componente inicial, nós usávamos o `componentDidMount` e `componentWillUnmount`, que serviam para adicionar/remover o listener de scroll no momento que o componente era montado/desmontado.

Nos hooks, nós podemos substituir essa parte pelo `useEffect`, ficando dessa forma:

```js
// antes
componentDidMount() {
  window.addEventListener('scroll', this.setProgress)
}

componentWillUnmount() {
  window.removeEventListener('scroll', this.setProgress)
}

// depois
useEffect(() => {
  window.addEventListener('scroll', handleScroll)
  return () => {
    window.removeEventListener('scroll', handleScroll)
  }
}, [])
```

Como funciona isso? No momento que o componente renderiza na tela, o `useEffect` é chamado e com ele, o listener é adicionado. O mesmo método possui um `cleanup` que é chamado sempre quando o componente desmonta e para indicar isso, basta que você retorne uma função, que é exatamente o que fazemos, dentro do nosso `return` nós passamos o `removeListener`, assim garantimos que o listener vai ser desmontado junto do componente, sem causar problemas de memory leak/performance.

Um último detalhe do `useEffect` é que ele recebe como segundo parâmetro, um array, onde podemos indicar quais propriedades queremos ficar vigiando, para que o `useEffect` execute toda vez que essas propriedades sejam atualizadas. Se não passarmos nenhum array, o `useEffect` vai ser chamado em cada rerender, para evitar isso, já que só queremos adicionar o listener uma vez, nós passamos um array vazio `[]`, isso garante que o `useEffect` será chamado só quando for montado e o cleanup só quando desmontado.

### Substituir setState para o método criado no useState

Vimos acima que nós criamos o método `setProgress` certo? Ele vai servir para atualizar o `progress` quando desejarmos, assim como o `setState` fazia. Então, para que tenha essa mudança de estado, falta chamar esse método no seu devido lugar, passando o novo valor.

```js
// antes
...
this.setState({
  progress: total,
})

// depois
...
setProgress((window.scrollY / bodyHeight) * 100)
```

Após ter feito essas mudanças, é possível que já esteja tudo funcionando certinho. Caso não esteja, verifique se todos os `this` foram removidos e se onde estava usando `state` já está atualizado para a variável escolhida.

Viu só? Não é tão difícil fazer essa conversão não é mesmo? =D

### Antes/depois

Vamos fazer uma comparação (antes e depois) dos componentes. Abaixo segue o componente utilizando classe (antes das nossas alterações):

```jsx
import React, { Component } from 'react'

export default class Snakke extends Component {
  constructor(props) {
    super(props)
    this.setProgress = this.setProgress.bind(this)
    this.getPercentageScroll = this.getPercentageScroll.bind(this)
  }

  state = {
    progress: 0
  }

  styles = {
    position: 'fixed',
    top: '0',
    left: '0',
    width: '100%',
    height: this.props.height,
    opacity: this.props.opacity,
    zIndex: this.props.zIndex,
    filter: this.props.shadow ? `drop-shadow(0 0 .1em ${this.props.color})` : 'none',
    background: `linear-gradient(to right, ${this.props.color} var(--scroll), transparent 0)`
  }

  getPercentageScroll (scrollPos) {
    const bodyHeight = document.body.clientHeight - document.documentElement.clientHeight
    return (scrollPos / bodyHeight) * 100
  }

  setProgress () {
    let total = this.getPercentageScroll(window.scrollY)

    this.setState({
      progress: total
    })
  }

  componentDidMount () {
    window.addEventListener('scroll', this.setProgress)
  }

  componentWillUnmount () {
    window.removeEventListener('scroll', this.setProgress)
  }

  render () {
    return (
      <div className='snakke-progress' style={'--scroll': `${this.state.progress}%`, ...this.styles }></div>
    )
  }
}

Snakke.defaultProps = {
  color: '#000',
  height: '5px',
  opacity: '1',
  zIndex: '9999',
  shadow: false
}
```

Veja abaixo o componente, já com as nossas alterações, utilizando hooks:

```jsx
import React, { useState, useEffect } from 'react'

export default function Snakke(props) {
  const styles = {
    position: 'fixed',
    top: '0',
    left: '0',
    width: '100%',
    height: props.height,
    opacity: props.opacity,
    zIndex: props.zIndex,
    filter: props.shadow ? `drop-shadow(0 0 .1em ${props.color})` : 'none',
    background: `linear-gradient(to right, ${props.color} var(--scroll), transparent 0)`,
  }

  const [progress, setProgress] = useState(0)

  function handleScroll() {
    const bodyHeight = document.body.clientHeight - document.documentElement.clientHeight
    setProgress((window.scrollY / bodyHeight) * 100)
  }

  useEffect(() => {
    window.addEventListener('scroll', handleScroll)
    return () => {
      window.removeEventListener('scroll', handleScroll)
    }
  }, [])

  return <div className="snakke-progress" style={'--scroll': `${progress}%`, ...styles} />
}

Snakke.defaultProps = {
  color: '#000',
  height: '5px',
  opacity: '1',
  zIndex: '9999',
  shadow: false,
}
```

## Conclusão

A mudança não é enorme, mas dá para ver que o código foi simplificado, não precisamos mais ficar preocupados em entender de onde o `this` tá vindo e para onde tá indo, qual o seu contexto. Podemos também diminuir métodos e ~~pelo menos para mim~~, o código ficou bem melhor.

Lembrando que não é errado usar Classes para os componentes, a própria equipe do React diz [para não sairmos convertendo tudo sem necessidade](https://reactjs.org/docs/hooks-faq.html#do-i-need-to-rewrite-all-my-class-components). A ideia do post é mais para mostrar como é o funcionamento de um e outro, para que caso você pegue um código em hooks, não se sinta perdido.

Se você ficou com alguma dúvida, só falar nos comentários ou me mandar mensagem, que eu ajudo =)


Como converter um class based component para o novo React Hooks.

Convertendo um Class Based Component para React Hooks


## Introdução

Fala pessoal, o post de hoje é mais um link para o meu [Canal no Youtube](https://www.youtube.com/WillianJustenCursos?sub_confirmation=1). Eu fiz uma pequena série de vídeos exatamente com o mesmo título desse post.

Tive uma demanda na Toptal para criação de um modal com vários comportamentos e notei que eles poderiam ser desacoplados do componente e reutilizados onde quisesse. Para isso criei umas pequenas bibliotecas e vi que seria interessante mostrar para vocês o processo da criação de uma delas.

## Videos

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

Você pode também assistir a playlist inteira, diretamente no [Youtube](https://www.youtube.com/watch?v=nrNvUDPKcBk&list=PLlAbYrWSYTiPR9DhcL9-22W-E-p8LmDOJ).

Abaixo vou colocar os links e comandos utilizados no curso.

## Estrutura utilizada

Para a formatação do código e regras, eu utilizei:

- [Eslint](https://eslint.org/)
- [StandardJS](https://standardjs.com/)
- [Prettier](https://prettier.io/)

Para os testes, utilizei o [Jest](https://jestjs.io/) e na compilação/server exemplo, utilizei o [Webpack](https://webpack.js.org/)

Sei que pode parecer um monstro de coisas, mas confesso que a maioria são coisas que uso sempre, então é só um copy/paste, no final tu nem precisa se preocupar com isso.

### Instalação do Babel e suas dependências

Para poder usar features novas do JS e poder depois transpilar para funcionar em todos os browsers, eu precisei do Babel e por isso instalei a versão mais nova que é a 7, abaixo segue o comando:

```bash
yarn add --dev @babel/core@7.3.4 @babel/plugin-proposal-class-properties@7.3.4 @babel/preset-env@7.3.4 babel-loader@8.0.5
```

Depois disso, é só criar um arquivo `.babelrc` na raiz do projeto com o seguinte:

```json
{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}
```

Lembrando que você pode utilizar o `npm install` se desejar.

### Eslint + StandardJS + Prettier

O Eslint e o StandardJS são fundamentais para manter o meu código padronizado, evitando formatações erradas, variáveis não utilizadas e outras coisas mais. Para tudo funcionar, precisei instalar os seguintes pacotes:

```bash
yarn add --dev babel-eslint@10.0.1 eslint@5.15.0 eslint-config-standard@12.0.0 eslint-plugin-import@2.16.0 eslint-plugin-node@8.0.1 eslint-plugin-promise@4.0.1 eslint-plugin-standard@4.0.0
```

Depois de instalado é só criar um arquivo `.eslintrc.json` na raiz do sistema com o seguinte conteúdo:

```json
{
  "parser": "babel-eslint",
  "env": {
    "jest": true,
    "browser": true
  },
  "extends": ["standard"],
  "rules": {
    "space-before-function-paren": "off",
    "comma-dangle": "off"
  }
}
```

Repare que eu sobrescrevo duas regras que são o espaço antes da função (não curto muito esse monte de espaço, mas na real, quem usa `function` hoje em dia? xD). A outra é para usar a vírgula na última propriedade, isso facilita e muito no diff do git.

Depois do eslint+standardjs instalados, foi a vez do prettier:

```bash
yarn add --dev prettier@1.16.4
```

Se você utilizar o VSCode como eu, é só configurar o `formatOnSave` e fica lindo, aqui [como configurar](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode).

### Jest e Babel-Jest

Para rodar nossos testes, eu resolvi utilizar o Jest, que tá começando a me conquistar, apesar de eu ainda amar o Mocha+Chai. Para isso, também precisa instalar o `babel-jest` para ele entender tudo certinho e ler nosso `.babelrc`.

```bash
yarn add --dev jest@24.1.0 babel-jest@24.1.0
```

### Webpack

Para gerar a biblioteca e também a página de exemplo, eu utilizei o Webpack nas configurações mais simples, sem fazer quase nada na configuração, só instalei o necessário:

```bash
yarn add --dev webpack@4.29.6 webpack-cli@3.2.3 webpack-dev-server@3.2.1
```

A configuração ficou assim:

```js
const path = require('path')

module.exports = {
  mode: 'production',
  entry: './index.js',
  output: {
    path: path.join(__dirname, 'lib'),
    filename: 'on-leave-intent.min.js',
    libraryTarget: 'umd',
    library: 'OnLeaveIntent'
  },
  module: {
    rules: [
      {
        loader: 'babel-loader',
        test: /\.js$/,
        exclude: /node_modules/
      }
    ]
  },
  devServer: {
    contentBase: [path.join(__dirname, 'example'), path.join(__dirname, 'lib')]
  }
}
```

### Código / Pacote

Bom, eu não vou colar todo o código aqui, até porque acho que seria legal você assistir e tentar fazer também. Mas se você quiser ver já pronto, [aqui está o repositório](https://github.com/willianjusten/on-leave-intent).

Se você quiser utilizar em algum projeto, o [pacote está no npm](https://www.npmjs.com/package/on-leave-intent). E você pode instalar com:

```bash
yarn add on-leave-intent
```


Uma mini-série de vídeos no Youtube onde eu ensino a criar uma lib JS simples usando testes do zero.

Criando uma lib JS com testes do Zero

Uma das features mais interessantes do React foi finalmente lançada, o famoso Hooks! Por que é tão legal assim?

Habemus React Hooks

Na necessidade você pode ir direto para o React sem saber alguns conceitos e se complicar ainda mais. Esse post pode te ajudar nisso.

Fundamentos JavaScript antes de aprender React


## Introdução

Faaaaala pessoal, como um objetivo de escrever mais nesse ano de 2019, vou começar com um post inspirado em um outro post. O post em questão é o [Things I don't know as of 2018](https://overreacted.io/things-i-dont-know-as-of-2018/) do [Dan Abramov](https://twitter.com/dan_abramov).

Para quem não sabe, o Dan Abramov é o co-criador do Redux, Create React App, mantenedor do React e vários outros projetos. O cara trabalha no Facebook e ainda é uma grande referência para trabalhos na comunidade, ou seja, o cara é muito bom!

Só que uma coisa super normal é nós pensarmos que pessoas como ele, sabem de tudo. Mas isso não é uma verdade e ele mostrou bem disso no [post](https://overreacted.io/things-i-dont-know-as-of-2018/).

Quando eu vi o post, fiz questão de ler e retweetar, pois sei que muitas pessoas acabam se sentindo mal por não saber X ou Y. E imaginei que um post desses poderia ajudar a refletirem. E aí nesse retweet, recebi o seguinte pedido:

<blockquote class="twitter-tweet" data-lang="en"><p lang="pt" dir="ltr">Que maravilhoso isso mano. Seria legal se você e outros devs brasileiros se sentisse a vontade pra fazer um também. Ia rolar mais identificação ainda.<br>Serio ajudou muito ja esse post</p>&mdash; Rafael Camillo (@camillodev) <a href="https://twitter.com/camillodev/status/1080279481028366337?ref_src=twsrc%5Etfw">January 2, 2019</a></blockquote>

Então, aqui estou eu, é claro que eu não sou mundialmente famoso igual ao Dan, mas já fiz uma coisa ou outra e tenho vários leitores, sendo um post em português, pode agregar mais um pouco também e ajudar nessa reflexão =)

Enquanto vou escrevendo esse post, vou ouvindo uma playlist chamada [Lounge Soft House](https://open.spotify.com/user/spotify/playlist/37i9dQZF1DX82pCGH5USnM?si=I4-fbF6rTtmygTqDnj4JIg), só instrumentais calmos e relaxantes, perfeito para iniciar esse ano de 2019! E vamos logo ao que importa!

## Coisas que eu não sei

Se fosse para escrever tudo que eu não sei, o post iria ao infinito, então vou marcar algumas coisas que talvez as pessoas achem que eu sei ou que acham que é fundamental saber para ter uma carreira como a minha e na realidade nem é estritamente necessário.

### Gramática em Inglês

> Pera aí Willian, mas você trabalha numa empresa americana e fala em inglês todos os dias! Como assim não sabe gramática?

Pois é galera, eu sei me comunicar, hoje eu diria que falo até bem, mas meu aprendizado consistiu muito em prática e vivência. Se você me perguntar a diferença entre `Present Perfect` e `Present Continuous`, vou te falar que já vi isso aí, mas lembro não =p

### Edição de Vídeo

Apesar de fazer tudo na criação dos meus cursos, onde inclui edição. Eu sei somente o básico de recortar pedaços ruins, juntar com outros, adicionar umas pequenas transições e só. Aquelas vinhetas super maneiras que os gringos tem nos cursos deles, eu não sei nem por onde começar.

### Comandos Unix e Bash

Assim como o Dan, eu sei `ls`, `cd`, algumas coisinhas menos básicas como uso de `grep` para logs, mas meu conhecimento para por aí. Não espere de mim aqueles scripts super elaborados e bem feitos.

### Windows

Pode parecer bizarro, mas eu sou horrível no Windows. Não é ser hater nem nada, mas eu não uso Windows fazem anos e com isso, eu não sei mais nada do sistema. Quando alguns alunos enfrentam problemas no prompt de comando, eu sempre peço ajuda para outros alunos que usam o Windows, porque é algo bem fora do meu conhecimento. Estou até cogitando instalar uma VM para testar algumas coisas e não ficar tão ruim para dar suporte aos meus alunos.

### Expressões Regulares (Regexp)

Eu sou **péssimo** com isso! Na real, eu odeio! Sei que tem suas utilidades e salva várias vezes, mas eu simplesmente não consigo fazer entrar na minha cabeça. Graças a Deus que temos o [Regex 101](https://regex101.com/) para fazer os testes, sem essa ferramenta, eu seria um completo leigo.

### PHP

Foi a primeira linguagem web que eu tive contato, mas meu contato foram com uns códigos super gambiarrados feitos por aquele patrão que diz saber mexer em código...

Se eu precisar fazer qualquer coisa hoje nessa linguagem, eu precisaria ler tudo do zero, pois não sei uma boa prática, muito menos os frameworks, como o Laravel.

### Linguagens de baixo nível

Eu fiz C/C++ na faculdade e tive um pouco de Assembly também, mas são coisas que eu não uso no meu dia-a-dia, então eu não me lembro de praticamente nada.

### Docker

Eu sei +ou- para o que serve, já vi gente usando e só. Nunca fui além da instalação para começar aprender, mas aí nem estudei ~~que vergonha xD~~.

### Devops/Deploys, etc.

Se for um deploy de uma aplicação simples para um Netlify da vida, eu sei fácil. Mas coisas como existem na Toptal, com vários processos e automatizações, não sei nadinha. Só agradeço pelas mágicas que acontecem e fazem tudo funcionar.

### React Native/Ionic ou qualquer outra coisa mobile

A única coisa que fiz foram tutoriais, nunca fui além disso, por mais que sejam coisas interessantes e que pretendo ver mais esse ano.

### Vue.JS e Angular Novo

O famoso "Nunca vi, nem comi, só ouço falar". Exatamente, eu nunca sequer fiz um tutorial ou li sobre. No meu trabalho eu nunca tive necessidade de aprender e na vida pessoal, meus projetos sempre foram com React ou JS puro. Como o [@felipefialho\_](https://twitter.com/felipefialho_) diz e eu sigo a mesma filosofia:

<blockquote class="twitter-tweet" data-lang="en"><p lang="pt" dir="ltr">Como sempre digo, ir aprendendo conforme necessidade ou conforme surge interesse é muito melhor do que estudar milhares de coisas ao mesmo tempo.</p>&mdash; felipe.d.ts (@felipefialho_) <a href="https://twitter.com/felipefialho_/status/1080475270023393280?ref_src=twsrc%5Etfw">January 2, 2019</a></blockquote>

## Conclusão

Enfim galera, como eu disse, poderia passar o dia inteiro escrevendo sobre coisas que eu não sei, mas poderia se tornar chato também. O importante é que eu não sei várias coisas, mas sei outras também, que são suficientes para o meu cargo atual e também me permitem passar o pouco do que sei para outros.

Não há problema nenhum em não saber todos os 1298319028 frameworks JavaScript ou todos os tipos de algoritmos do mundo. O importante é você saber o necessário para o seu trabalho e claro, querer sempre melhorar e aprender coisas novas, mas tudo a seu tempo.

Não adianta querer aprender um milhão de coisas de uma vez só, no final você vai acabar se frustrando de não ter conseguido tudo que queria. Minha dica para o seu 2019 bem e feliz é que você defina um escopo pequeno de coisas pequenas e prioritárias e conforme for terminando, aí sim você pode adicionar outras coisas.

A sensação de conquista ao finalizar várias coisas pequenas é bem melhor do que a sensação de ter feito várias coisas pela metade. Um Feliz 2019 para todo mundo, muito código e vamos que vamos!


Eu faço bastante coisa, mas existem outras mil coisas que eu não sei e não tem problema nisso.

Willian JustenSoftware Engineer