Skip to content
OverviewSolutions
13
Comments
7

Julio Cinquina

@JulioCinquinaSão Paulo, Brazil270 points

Hi! I am a professional translator from São Paulo, Brazil 🇧🇷. I have always been into technology, and in January 2022 I decided to take up coding seriously after learning some Python for personal projects and using AutoHotkey in translation-related projects.

I’m currently learning...

HTML, CSS and JavaScript.

Latest solutions

View more solutions

Latest comments

  • Julio Cinquina•270
    @JulioCinquina

    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
  • Julio Cinquina•270
    @JulioCinquina

    Parabéns pela solução, Adriano! Sua versão personalizada ficou incrível!

    Achei bem legal, fiquei com vontade de fazer um modo escuro para algum desafio daqui do site.

    Vou deixar duas sugestões para melhorar a acessibilidade da página:

    • Dar um outline para o botão na pseudoclasse :focus-visible. Assim, ao navegar com a tecla Tab, vai aparecer um contorno em volta do botão quando o foco estiver sobre ele.
    • Vi que você colocou um aria-label descritivo no botão, o que é ótimo, agora só precisa atualizá-lo ao alternar entre os modos. Você pode fazer isso com o método setAttribute() do elemento:
    const button = document.getElementById('iconTheme');
button.setAttribute('aria-label', 'activate light mode');
// ou...
button.setAttribute('aria-label', 'activate dark mode');

    Se quiser ir ainda mais além, você pode colocar uma transição entre os modos para a mudança entre claro e escuro não ser tão brusca.

    Dei uma pesquisada e parece que os degradês não são "transicionáveis" pela propriedade transition, então você teria que fazer uma pequena gambiarra com um pseudoelemento e a opacidade. Dá uma olhada neste CodePen do Chris Coyier: Transitioning Gradients (fonte: artigo Transitioning Gradients, Chris Coyier [CSS-Tricks]).

    Espero que as sugestões sejam úteis. Parabéns mais uma vez e keep coding! 💻

    Marked as helpful
  • Julio Cinquina•270
    @JulioCinquina

    Hey, Nwali! Congratulations on your solution!

    It looks pretty much identical to the design. Nice job!

    Here are my suggestions:

    • Use the <a> element instead of <button>. A "Learn More" button is usually a link that takes the user to a different page. In general, the <button> element is used for actions that are implemented via JavaScript, such as adding a product to the cart in an online store. You can learn more about this in this article: A Complete Guide to Links and Buttons by Chris Coyier.
    • Give ARIA labels to the buttons to improve accessibility. Screen reader users can navigate the page from link to link. Because of that, link text should be descriptive and make sense without the surrounding context. You can read more about this and see examples in this guide: ARIA8: Using aria-label for link purpose by W3C Web Accessibility Initiative. Here's an example:
    <h2>Sedans</h2>
<a href="#" aria-label="Learn more about sedans">Learn More</a>
<!-- ... -​->
<h2>SUVs</h2>
<a href="#" aria-label="Learn more about SUVs">Learn More</a>
<!-- ... -​->
<h2>Luxury</h2>
<a href="#" aria-label="Learn more about luxury cars">Learn More</a>

    I hope this helps! Keep coding! 💻

    Marked as helpful
  • Julio Cinquina•270
    @JulioCinquina

    Hi, Arush! Congratulations on your solution!

    Your card looks a bit narrow in the desktop layout because you have given width: 40% to its .content class. I believe this was meant for the mobile layout. To make it wider in the desktop layout, you can overwrite that declaration in your media query. For example:

    @media screen and (min-width: 1100px) {
    .content {
        width: min(57.5rem, 90%);
        grid-template-columns: repeat(3, 1fr);
    }
/* ... */
}

    width: min(57.5rem, 90%) means that the element will have a width of 57.5rem OR 90% of the parent element, whichever is smaller. So, if the user has set a bigger font size, the card will have, at most, a width of 90% of the screen (in this case, since the <main> element occupies the entire viewport).

    Since the paragraphs in each column have very similar lengths, making the card wider will make them have the same number of lines unless the user has set a bigger font size. In that case, they could have different numbers of lines, and the buttons wouldn't be aligned with each other.

    To improve that, you could organize the content of each column with Flexbox and then give your buttons a margin-block-start: auto. This will push the button to the bottom of the column, so, if the paragraphs had different numbers of lines, all the buttons would be aligned at the bottom.

    If you want, you can take a look at my solution of this challenge to have an idea of how I approached it.

    Also, take a look at Frontend Mentor's report about your solution, as it contains useful advice too.

    I hope this helps! Keep coding! 💻

    Marked as helpful
  • Julio Cinquina•270
    @JulioCinquina

    Bem-vindo ao Frontend Mentor, Lucas!

    Sua solução ficou bastante parecida com o design. Parabéns! 🎉

    Aqui vão algumas dicas:

    O Frontend Mentor gera a captura de tela da página da solução no Firefox com uma largura de 1440 px. Para conferir se sua solução coincide com o design, você pode entrar no "Modo de design responsivo" (Ctrl + Shift + M), colocá-lo na resolução 1440 x 900, fazer a captura de tela clicando no ícone de câmera e compará-la com aquela que vem com os arquivos do desafio (design/desktop-design.jpg). Para o design mobile, use a largura de 375 px.

    Hoje, a maioria das pessoas acessa a internet por dispositivos móveis. Por isso, tornou-se comum o design mobile-first (focado em dispositivos móveis). Na prática, isso significa — entre outras coisas — fazer a página para dispositivos móveis primeiro e, depois, usar media queries para adaptá-la para desktops (com min-width em vez de max-width).

    Para seguir as melhores práticas de acessibilidade, temos que definir os pontos de referência (landmarks) da página. Aqui, todo o conteúdo exceto o rodapé poderia estar dentro das tags <main> e </main>. Para o rodapé, podemos usar <footer class="attribution">(...)</footer> em vez de uma <div>.

    Espero ter ajudado!

    ———

    Welcome to Frontend Mentor, Lucas!

    Your solution looks very similar to the design. Congratulations! 🎉

    Here are some tips:

    Frontend Mentor generates the screenshot of the solution page in Firefox at a 1440 px width. To check if your solution matches the design, you can enter "Responsive design mode" (Ctrl + Shift + M), put it in 1440 x 900 resolution, take a screenshot by clicking the camera icon and compare it to the one found in the challenge files (design/desktop-design.jpg). For the mobile design, use a width of 375 px.

    Today, most people are browsing the web through mobile devices. Because of that, the mobile-first design approach became common. In practice, this means — among other things — making the page for mobile devices first, and then using media queries to adapt it to desktops (using min-width instead of max-width).

    To follow the best practices of accessibility, we have to define the landmarks of the page. Here, all content except the footer could be inside the <main> and </main> tags. For the footer, we could use <footer class="attribution">(...)</footer> instead of a <div>.

    I hope this helps!

    Marked as helpful
  • Julio Cinquina•270
    @JulioCinquina

    Hey, @SauravJalui!

    Congratulations on completing the challenge, your solution looks exactly like the design!

    To improve your semantic markup, I would suggest using the <button> element for the "Add to Cart" button.

    A guideline that you can follow is to use a link to let the user go to a different page or to another part of the same page. If the button would trigger an action (adding a product to the cart, in this case), then use the <button> element.

    You can read more about it in this guide: A Complete Guide to Links and Buttons (Chris Coyier, CSS-Tricks).

    I hope this helps!

    Marked as helpful
View more comments