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

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!

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!

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!