Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Formação engenheiro frontend

Finalizei a formação engenheito front-end e recebi o feedback, sobre meus pontos negativos eu gostaria de saber como faço da forma correta. Abaixo vou deixar alguns deles, e se puderem me ajudar ficarei grato.

  • Como exibir um imagem parcial em telas menores?
  • Caso a API esteja fora do ar, como faço pra pegar o erro e dar o feedback ao usuário?
3 respostas
solução!

Fala aí Davi, beleza? Vamos la.

Para trabalhar com diferentes imagens, você pode seguir duas práticas:

  1. Utilizando div ao invés de img, dai na div você seta as imagens como background, isso pode ser feito utilizando o background-image, depois você usa as media queries para ir trocando o tamanho ou a própria imagem em si.
  2. Partindo da ideia que sua imagem está no tamanho maior, se ela for renderiza em escala menor, isso não será um problema, o problema seria você mostrar uma imagem menor numa escala maior.
  3. Isso também pode ser feito diretamente no HTML, utilizando o atributo srcset, com ele é possível informar diferentes imagens para diferentes tamanhos de tela.

Espero ter ajudado

Boa noite, Davi! Como vai?

Vou responder suas perguntas por partes.

Como exibir um imagem parcial em telas menores?

Para isso vc teria que trabalhar com a imagem como sendo o fundo de um elemento. Primeiro, definir uma div que receberia a imagem como fundo:

<div class="team-logo"></div>

Em seguida o CSS:

.team-logo {
    background: url(../imagens/requite.jpeg) no-repeat;
    background-position: center;
    height: 50px;
    width: 100%;
    margin: 1em 0;
}

@media(min-width: 650px) {

    .team-logo {
        position: absolute;
        left: 0;
        top: 0;
        width: 40%;
        height: 200px;
        background-size: contain
    }
}

Caso a API esteja fora do ar, como faço pra pegar o erro e dar o feedback ao usuário?

Uma forma possível de resolver isso seria utilizar o catch() da Promise retornada pela Fetch API:

fetch(`http://localhost:8080/usuarios`, requestInfo)
     .then(response =>  {
          // manipula a resposta ...
     })
     .catch(erro =>  {
          // manipula o erro enviando uma mensagem para o usuário ...
     });

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

muito obrigado pelo esclarecimento, ajudou a tirar minhas duvidas, fico feliz. Obrigado mais uma vez