aceleradora-TW / aceleradora-TW/descarte-certo

[Melhoria] Remover os warnings

Ouverte
#157 0 commentaires 0 réactions 3 personnes assignées Réclamée par @estevandh Voir sur GitHub
Front-End
Langage dominant
JavaScript
Étoiles
15
Forks
6
Métriques de merge des PR
Aucune PR mergée en 30 j

Description

- **IMPORTANTE**: após a implementação desse card, deve se adicionar ao passo de desenvolvimento e QA a monitoração de novos warnings. Ou seja, durante o desenvolvimento dos futuros cards, os pares devem sempre analisar se sua implementação criou um novo warning, se sim, o par deve resolver os warnings produzidos. E ja em QA, não publicar em produção implementações que contem novos warnings

## Descrição
Atualmente temos uma série de warnings na nossa aplicação frontend que precisam ser removidos.

Quando inicializamos a aplicação pelo terminal conseguimos ver todos eles:
![Screen Shot 2021-06-12 at 06 04 42](https://user-images.githubusercontent.com/359991/121771418-a36ddc00-cb45-11eb-9177-317222e97974.png)

E no navegador, inspecionando também conseguimos ver outros que não aparecem no terminal:
![Screen Shot 2021-06-12 at 06 08 13](https://user-images.githubusercontent.com/359991/121771429-bb456000-cb45-11eb-97c6-31fe57759c52.png)

A ideia por trás dessa tarefa é ensinar como manter o projeto limpo de erros e warnings seguindo as boas práticas do framework (react).

## Nota técnica
- Para desenvolver essa card será necessário entender a mensagem de warning:
1) Saber aonde se encontra o warning
2) Entender a sugestão de conserto dada pela warning

Exemplo:
Essa é uma mensagem de warning que aparece no terminal:
![Screen Shot 2021-06-12 at 06 23 02](https://user-images.githubusercontent.com/359991/121771593-aa491e80-cb46-11eb-954e-06a0e669b56b.png)

ONDE "**./src/components/NavBar/index.js**" é o caminho para encontrar o **ARQUIVO**
E "**Line 10:36:**" diz a **LINHA** onde se encontra o warning, no caso, é a linha 10
E "**img elements must have an alt prop, either with meaningful text, or an empty string for decorative images**" diz qual a solução que pode ser feita para solucionar o problema.

- Nesse caso a mensagem de solução explica que o elemento **IMG** deve ter uma propriedade "alt", essa propriedade geralmente recebe uma descrição breve da imagem **alt="Logotipo 5marias"**
- Resolução: ```Logo 5marias```
- Então, agora aprendemos que todas as imagens criadas com a tag devem ter por obrigação uma propriedade "alt".
- O impacto dessa solução está na acessibilidade, assim, tornamos nossa aplicação mais amigável para pessoas que utilizam leitores de tela.

## Critério de aceitação

- [ ] Não devem aparecer warnings no terminal
- [ ] Não devem aparecer warnings no navegador
- [ ] E também não devem aparecer mensagens de "console.log" no navegador

## Como testar

- [ ] Acessar a página das 5marias em ambiente QA
- [ ] Abrir o inspecionar, na aba "**Console**"
- [ ] Verificar que nenhuma mensagem de warning ou console.log seja exibida

Guide de contribution

Aucun guide de contribution indexé pour ce dépôt

Évaluation

Cette issue n'a pas encore été évaluée.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.