Advice Generator App w/ (HTML + SASS + JS + API) 👨‍💻

Community feedback

• 

  P

  Vander Santos•1,750

  @vandermsPosted almost 2 years ago

  Adorei sua solução! Parabéns!

  Sobre babel e webpack, eu achei interessante que você tenha optado por configurar você mesmo a integração dessas duas tecnologias no projeto e imagino que deve ter sido uma experiência incrível como fonte de aprendizado.

  Contudo, talvez seja importante observar que mesmo em projetos vanilla (sem uso de frameworks) o usual seria usar uma solução pronta que já vem com transpiladores, builders, preprocessadores CSS e outras funcionalidades "out of the box", como Parcel ou Vite.

  Outro ponto é que, embora webpack ainda seja um bundler bastante popular, nos últimos anos ele tem sido visto, não sem alguma polêmica, como um tanto ultrapassado. Recentemente, por exemplo, nextjs construiu um bundler chamado turbopack com Rust que é supostamente 700 vezes mais rápido que Webpack.

  O que eu particularmente não gosto do Webpack é que qualquer coisa que você precisa adicionar ao projeto é um saco para configurar. Por exemplo, se eu quiser adicionar postcss a um projeto com webpack vou perder de uma a duas horas pesquisando como fazer isso e mais duas horas tentando entender o que deu de errado :).

  Enfim, mais uma vez parabéns. Continue o excelente trabalho!

  Marked as helpful

  2

  ---

  

  Adriano•38,120

  @AdrianoEscarabotePosted almost 2 years ago

  @vanderms Obrigado Vander!

  Sim, foi bem legal e diferente fazer um projeto com o babel e o webpack, confesso que eu achei ele bem demorado kkkkk é interessante saber que existem outras opções e possivelmente melhores que ele.

  Eu ainda sou novo nesses termos de bundler, mas valeu demais por compartilhar o seu conhecimento!

  você é brabo!

  1
• 

  Julio Cinquina•270

  @JulioCinquinaPosted almost 2 years ago

  Parabéns pela solução, Adriano! 🎉

  Ainda quero fazer esse desafio e aprender a usar o Babel e o Webpack.

  Algumas sugestões para melhorar a acessibilidade:

  1 - Usar uma borda transparente no botão (border: 1px solid transparent) em vez de removê-la totalmente com border: none. Essa borda transparente aparece quando o sistema está no modo de alto contraste, deixando o botão mais visível.

  2 - Indicar que o botão está em foco para usuários que navegam com o teclado. Aqui, bastaria remover o outline: none. Assim, o próprio navegador adiciona um contorno ao focar no botão com a tecla Tab. Nos meus testes, isso não alterou o visual do botão. Esse contorno pode ser personalizado através da pseudoclasse focus-visible.

  E é bastante comum aplicar os estilos de :hover à pseudoclasse :focus, o que também ajuda a indicar o foco no botão ao navegar com o teclado.

  Um artigo sobre essa questão da borda e do contorno (focus ring): Use transparent borders and outlines to assist with high contrast mode (Andy Bell)

  3 - Fazer com que o novo conselho seja lido para usuários de leitores de tela. No momento, usando um leitor de tela, o novo texto não é lido automaticamente depois de apertar o botão; o usuário precisa "navegar para trás" para perceber que o texto mudou.

  Um jeito fácil de fazer isso é colocando o atributo aria-live="polite" no elemento que contém o texto do conselho. Assim, o novo texto é lido automaticamente depois de carregar.

  Porém, testando esse método, vi que tanto o TalkBack no Android quanto o VoiceOver no iOS leem o novo texto com a voz do idioma do sistema (português, no meu caso) em vez de no idioma da página, então a pronúncia fica estranha. Um jeito de resolver isso é voltar a focar no texto após ele ser atualizado. Este vídeo mostra como fazer isso: Managing Focus - A11ycasts #22

  Achei uma boa ideia você ter colocado uma animação mais demorada para simular um carregamento do texto, já que a API tem um cachê de dois segundos.

  O usuário ainda pode sair clicando várias vezes no botão, o que resulta em várias requisições por segundo (veja a aba "Rede" nas DevTools).

  Se quiser implementar um mecanismo no front-end para prevenir um "spam" de requisições, você pode desativar o botão após o clique e só reativá-lo depois do tempo do seu setTimeout() (adicionando e removendo o atributo "disabled"):

  button.addEventListener("click", () => {
    // ...
    button.setAttribute("disabled", "");
  
    setTimeout(async () => {
      await loadAdvice();
      button.removeAttribute("disabled");
    }, 960);
  });
  

  Parabéns mais uma vez pela solução! Espero ter ajudado!

  Marked as helpful

  1

  ---

  

  Adriano•38,120

  @AdrianoEscarabotePosted almost 2 years ago

  @JulioCinquina Nossa muito obrigado Julio, ajudou muito mano!

  vou anotar e ler todos os links que você mandou S2

  0
• 

  hernannadotti•560

  @hernannadottiPosted almost 2 years ago

  Hi @AdrianoEscarabote awesome work! Mianly the flip square animation!! But something weird with the initial load of advices, in the first second the app show us one and quickly change to no another... Can you see it ? Thanks!

  Marked as helpful

  1

  ---

  

  Adriano•38,120

  @AdrianoEscarabotePosted almost 2 years ago

  @hernannadotti yea! I had noticed that but I forgot to fix it hahah

  this is happening due to the fact that I put the defer attribute in the js file, and as i imported my css in it, and used webpack to compile everything when the page loads first it renders the HTML, and then the CSS and the js!

  Thanks for remembering!

  0

  

  hernannadotti•560

  @hernannadottiPosted almost 2 years ago

  @AdrianoEscarabote awrsome. You welcome

  0