Ajudando para ser ajudado!
Published: 2020-10-05 17:08:52

Olá pessoal!
<p>
Nova <a href="https://nextlevelweek.com/inscricao/3">Next Level Week</a> da Rocketseat chegando e vim compartilhar com vocês algumas dicas para que suas dúvidas sejam sanadas com mais praticidade durante o evento.
</p>
<p>
Lembrem-se, na última edição foram 110mil Devs inscritos, por mais que todo mundo busque se ajudar, existem certas atitudes que podem facilitar esse processo, assim tu fica menos tempo a espera de uma solução e quem está ajudando pode ajudar um número maior de pessoas por ter seu tempo otimizado.
</p>
<h3> — NÃO mande foto com o celular ou cole seu código direto no Discord! </h3>
<p style="text-align: justify">
Fotos normalmente dificultam a leitura do código por causa do reflexo gerado na tela e colar o código direto no Discord perde formatação, sem contar que o tema do VSCode é colorido não só para bonito(portanto, não escolha temas que também dificultem a leitura do seu código, de preferência use o tema que for indicado no início da NLW), ele tem toda uma lógica de cores por trás que ajudam a identificar possíveis erros no código, assim como também ajudar a identificar o que seria funções, variáveis, métodos, propriedades e também tem a numeração das linhas, que facilita na hora de informar o que deve ser corrigido na estruturação do código para que ele funcione adequadamente.
</p>
<p>
Hoje em dia existem diversas ferramentas extremamente práticas para prints de tela. Existe no Windows 10 o comando <strong>win+shift+s</strong> que permite selecionar a área da tela, ou você pode usar a tecla <strong>PrtSc</strong> no seu teclado, copiar no Paint e selecionar a área que quer enviar, no linux pop!OS existe o <strong>ctrl+shift+PrtSc</strong> que tem a mesma funcionalidade, para linux temos o <strong>Deepin ScreenShot</strong> que permite além de selecionar a área específica adicionar marcadores como setas ou textos ao print.
</p>
<img src="https://ik.imagekit.io/iseca49kdh/WhatsApp_Image_2020-10-05_at_08.39.58_kQi7MW05AB.jpeg">
<figcaption>print de uma função cuja variável foi declarada errada, logo não pega seu valor e automaticamente o VSCode reconhece, deixando ela borrada na linha 6 para nos informar do erro.</figcaption>
<p>
Como podem ver, na linha 7 escrevi o nome da minha variável de forma errada, imediatamente o VSCode deixou a variável cinza na linha 6, informando que há algum erro com aquela variável.
</p>
<h3> — Mande prints COMPLETOS! </h3>
<p>
Muitas vezes recebemos um erro no console e temos o costume de colar só a linha do erro, isso dificulta também entender melhor o erro, então sempre que mandar print, mande o print completo:
</p>
<img src="https://ik.imagekit.io/iseca49kdh/WhatsApp_Image_2020-10-05_at_08.27.19_mVMQKm2JK.jpeg">
<figcaption>print de uma mensagem de erro no console.</figcaption>
<p>
Percebam que o erro também informa o arquivo e da uma noção de onde ele está, então mande também o print do arquivo:
</p>
<img src="https://ik.imagekit.io/iseca49kdh/WhatsApp_Image_2020-10-05_at_08.28.09_6v26EmWTm.jpeg">
<figcaption> print da função que retornou o erro no print acima. </figcaption>

<h3><strong> — Revise seu código:</strong> </h3>
<p>
Muitas vezes ao entrar na parte de CSS ou JavaScript, o canal no Discord é metralhado por perguntas do tipo “apliquei o estilo e não apareceu no meu navegador” e 95% dos casos isso se dá por:
</p>
<ul>
<li>
Esquecer de colocar a tag link com redirecionamento para o arquivo CSS. Isso você pode conferir já ao criar o arquivo. Criou o CSS, linkou com o HTML, coloca um body { background: red } e vê, se teu navegador ficar vermelho, deu tudo certo. Aconselho a fazer o mesmo para a tag script(que vai na última linha antes de fechar o body no seu HTML), crie um alert(‘arquivo linkado’) e quando você recarregar seu navegador deve aparecer um pop-up.
</li>
<li>
Trocar seletor: Digamos que no seu HTML a tag está com id=”header”, porém ao chegar no arquivo CSS, você coloca .header { … } e a estilização não funciona. É porque o seletor CSS para id é o #, então troque o .header por #header e verifique novamente.
</li>
<li>
Erros de digitação: pegando o exemplo acima, você digita #header e não funciona, volte em seu html e verifique se é este mesmo o id da tag.
</li>
</ul>
<img src="https://ik.imagekit.io/iseca49kdh/WhatsApp_Image_2020-10-05_at_09.14.29_eAAW2lzz0.jpeg">
<figcaption>print de linhas de código mostrando onde deve ir a tag para linkar o CSS e a tag para linkar o JavaScript.</figcaption>

Ok, tudo isso feito e alguns problemas persistem?
<h3> — Vamos por partes então: </h3>
<ul>
<li>
Sobre estilização, mudou o display e seu elemento não teve a mesma atitude dele? Era para mudar de linha ou coluna e não mudou? Ou foi para dentro de outro espaço?
</li>
</ul>
<p>
NÃO mande só a print do navegador. Saber o que aconteceu ajuda a entender o problemas, porém não ajuda a solucionar o problema. O principal item que se precisa é o print do HTML para verificar se suas tags estão estruturadas de forma correta, verificar se não esqueceu de fechar uma tag, se não fechou errado dentro de outra tag. A maioria das vezes que ocorre esse erro foi por questões desse gênero.
</p>
<ul>
<li>
Sobre problemas com o JS no navegador. Foi adicionada uma funcionalidade que ao clicar em um botão deveria mudar algum estilo e no seu não está dando certo?
</li>
</ul>
<p>
Abra o console no seu navegador, clicando com o botão direito na tela, depois inspecionar e selecionando a aba console, retornará alguma possível mensagem de erro. Não consegue resolver sozinho? Manda o print do erro no console e você verá que lá também aponta o arquivo e a linha do erro, então mande print disso também.
</p>
<img src="https://ik.imagekit.io/iseca49kdh/WhatsApp_Image_2020-10-05_at_08.33.49_3jVcYFMRmt.jpeg">
<figcaption> print do console do chrome apontando um erro no JavaScript.</figcaption>
<img src="https://ik.imagekit.io/iseca49kdh/WhatsApp_Image_2020-10-05_at_08.34.40_Rg_cfvOYJQC.jpeg">
<figcaption> print do arquivo JS com o erro apontado no console do Chrome. </figcaption>
<p>
Estruture seu problema de forma a passar o maior número de informações possíveis já na sua primeira pergunta. Se o problema for no processo de instalação de uma dependência, informe seu sistema operacional, versão do node instalada:
</p>
<p>
“Olá! Estou com problemas em aplicar o CSS, mais especificamente no momento 33min da aula.”
</p>
<p>
“Olá! Não consegui instalar o nodemon, retorna o seguinte erro:(insira o print completo do erro retornado). Estou usando Linux Pop!OS, meu node está na versão 12.3 e meu npm na versão 6.41”
</p>
<h2>
Lembrem-se, quanto melhor estruturada as dúvidas de vocês, mais rápido os outros conseguirão identificar os problemas, ajudá-los a corrigir e vocês estarão prontos para seguir com o conteúdo!
</h2>