Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
73
Comments
27

Vander Santos

@vandermsSão Paulo, Brazil1,820 points

Sometimes I develop software.

Latest solutions

  • Angular | Tailwind

    #angular#tailwind-css

    Vander Santos•1,820
    Submitted 5 months ago

    0 comments
  • Svelte + Tailwind


    Vander Santos•1,820
    Submitted over 1 year ago

    0 comments
  • HTML + CSS


    Vander Santos•1,820
    Submitted over 1 year ago

    0 comments
  • Svelte + Tailwind


    Vander Santos•1,820
    Submitted over 1 year ago

    1 comment
  • Svelte + Tailwind

    #svelte#tailwind-css#typescript

    Vander Santos•1,820
    Submitted over 1 year ago

    0 comments
  • Learning Svelte

    #svelte#tailwind-css#typescript

    Vander Santos•1,820
    Submitted over 1 year ago

    1 comment
View more solutions

Latest comments

  • P
    Coder-Liz•610
    @Coder-Liz
    Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    Next time I will use SCSS on this project to make the code cleaner.

    What challenges did you encounter, and how did you overcome them?

    The challenge I encountered on this project was the positioning of the quotation image because at first I do left: 50% but it looks different from the design so I try using pixel unit. However I am not really sure if this is the efficient way.

    What specific areas of your project would you like help with?

    I am hoping to get some tips on how to make my codes cleaner.

    testimonials-grid-section using CSS grid

    1
    Vander Santos•1,820
    @vanderms
    Posted 5 months ago

    Your solution is great! Congratulations!

    Using 'p' for quotations is not a bad choice, 'p' has semantic value and is definitely better than a div. However, the pattern figure > blockquote + figcaption is better for quotations. See the example below from HTML Spec:

    <figure>
     <blockquote>
      <p>The truth may be puzzling. It may take some work to grapple with.
      It may be counterintuitive. It may contradict deeply held
      prejudices. It may not be consonant with what we desperately want to
      be true. But our preferences do not determine what's true. We have a
      method, and that method helps us to reach not absolute truth, only
      asymptotic approaches to the truth — never there, just closer
      and closer, always finding vast new oceans of undiscovered
      possibilities. Cleverly designed experiments are the key.</p>
     </blockquote>
     <figcaption>Carl Sagan, in "<cite>Wonder and Skepticism</cite>", from
     the <cite>Skeptical Inquirer</cite> Volume 19, Issue 1 (January-February
     1995)</figcaption>
    </figure>
    

    https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element

    Marked as helpful
  • Adriano•42,890
    @AdrianoEscarabote
    Submitted 7 months ago

    Conference ticket generator w/ (Next + Tailwind) 👨‍💻

    #jest#next#storybook#tailwind-css#accessibility
    3
    Vander Santos•1,820
    @vanderms
    Posted 7 months ago

    Bom trabalho, Adriano! Ficou legal, como sempre!

    Um único detalhe. Quando eu arrasto um arquivo sobre o componente do "upload avatar", o navegador, ao invés de carregar o arquivo ele abre o arquivo na mesma página (a URL fica o caminho para o arquivo no meu computador)(Testei com Firefox e Chrome no Windows).

    Normalmente, quando eu preciso implementar um componente do tipo, eu costumo deixar o input:file, não o label, ocupando toda a área que o usuário pode clicar, porque assim a funcionalidade de drag and drop é preservada.

    A título de exemplo, dá uma olhada como foi implementado algo do tipo no USWDS (sistema de design do governo norte-americano, que é uma referência em usabilidade e acessibilidade) https://designsystem.digital.gov/components/file-input/

    Marked as helpful
  • Adriano•42,890
    @AdrianoEscarabote
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of successfully completing my first Svelte project. Next time, I would approach the project with a clearer plan and design in mind to avoid some of the backtracking and refactoring that I had to do in this project. I also plan to spend more time exploring advanced features of Svelte to create more complex and polished projects in the future.

    What challenges did you encounter, and how did you overcome them?

    In my first project using Svelte, I encountered some challenges with the syntax and the reactive nature of Svelte components. To overcome them, I spent time reading the documentation, watching tutorials, and experimenting with small code snippets.

    Blog preview card w/ (Svelte + Tailwind + Typescript) 👨‍💻

    #svelte#tailwind-css#typescript#vite
    1
    Vander Santos•1,820
    @vanderms
    Posted over 1 year ago

    Opa, Adriano! Aprendendo Svelte também? Isso me lembra que eu preciso voltar a estudar. Ficou legal a sua solução!

  • Adriano•42,890
    @AdrianoEscarabote
    Submitted over 2 years ago

    Interactive pricing component w/ (React + Styled Components) 👨‍💻

    #accessibility#parcel#styled-components#react
    1
    Vander Santos•1,820
    @vanderms
    Posted over 2 years ago

    Parabéns pela sua solução, Adriano! O seu aplicativo ficou muito legal.

    Quanto a sua pergunta sobre a organização dos arquivos, o fato é que React não é opinativo sobre isso, então o desenvolvedor tem muita liberdade sobre como organizar os arquivos. Eu, particularmente, gostei da forma que você organizou e achei superlegível.

    A parte isso, o principal problema na sua solução é que quando a gente trabalha com React - e outros frameworks e bibliotecas do mesmo tipo - a gente não pode manipular diretamente o DOM. Eu me refiro ao uso de getElementById, target.style.backgroundSize e innerText na sua função handleChangeInput.

    Há várias razões para não se fazer isso e isso pode trazer várias dores de cabeça. Por exemplo, se a aplicação fosse maior e, por alguma razão, houvesse um repaint do seu component <Pricing/> todos os dados inseridos pelo usuário seriam perdidos (isso ocorreria porque os dados alterados pelo innerText não estariam sincronizados com os dados do virtual DOM do React).

    O uso de id também é altamente NÃO recomendável, uma vez que isso prejudica a reusabilidade dos componentes. Por exemplo, se você tentasse reutilizar o component <Pricing/> em outro lugar do aplicativo, a página ficaria com duplicidade de ids.

    Sobre o tema, de um modo geral, em React, o gerenciamento de estado e a sincronização do estado da aplicação com a interface devem ser realizados com hooks - geralmente useState e, em menor grau, useReducer, associados, ou não, a useContext.

    Por fim, um detalhe menor: há uma forma mais prática de usar React.Fragment, isto é, ao invés de importar o Fragment e usar <Fragment>...</Fragment>, você poderia ter usado simplesmente <>..... vide https://pt-br.reactjs.org/docs/fragments.html#short-syntax

    Marked as helpful
  • Adriano•42,890
    @AdrianoEscarabote
    Submitted over 2 years ago

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

    #accessibility#fetch#webpack#sass/scss
    3
    Vander Santos•1,820
    @vanderms
    Posted over 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
  • Lucas 👾•104,160
    @correlucas
    Submitted almost 3 years ago

    Huddle LP w/ Curved Sections (Vanilla CSS + Custom Logo)

    6
    Vander Santos•1,820
    @vanderms
    Posted almost 3 years ago

    E ai Lucas! Parabéns pela sua solução. Ficou excelente!

    Quanto a estrutura do HTML e o problema com as landmarks, eu acredito que você fez algumas opções pouco usuais.

    Mas antes, uma breve explicação: existem basicamente duas estruturas tipicas para uma pagina:

    <nav>...</nav> <main>...</main> <footer>...</footer>
    <header>...</header> <main>....</main> <footer>...</footer>

    A escolha entre a primeira e a segunda depende de se você considera ou não a parte de cima da página como um cabeçalho (banner landmark) ou como uma simples barra de navegação (nav landmark). Mas geralmentes ambas escolhas justificáveis e são válidas.

    Então, por escolha pouco usual, eu me refiro ao fato de vc aparentemente ter colocado a barra de navegação dentro de <main>. Difícil considerar ela como parte do conteúdo principal.

    Por outro lado, você colocou algumas seções fora de <main>. Dá para fazer isso? Sim, mas uma <section> precisa ter o atributo aria-label ou aria-labelledby para ser considerada uma landmark. Como você não usou nenhum desses atributos o validator apontou o erro.

    Mas pra mim o principal problema é que se você não considera tais seções como parte do conteúdo principal, você deveria ter usado <aside> e não <section>.

    Resumindo, existem diferentes formas de você resolver esses problemas: .e.g. adicionando aria-label ou aria-labbeledby as sections, colocando elas dentro de main, substituindo elas por aside.

    Espero que as dicas tenham ajudado e continue sendo uma inspiração para toda a comunidade.

    Marked as helpful
View more comments

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub