Clipboard Landing Page built with Tailwind

Community feedback

• 

  P

  Luciano Lima•1,290

  @LucianoDLimaPosted 8 months ago

  Muito bom como sempre, Daniel! Fico feliz quando você posta algum projeto pois é difícil ver gente que está aprendendo se importar com um bom HTML semântico.

  Ai vai um feedback e algumas opiniões pessoais que você pode ou não concordar:

  Antes, minha opinião no Tailwind: Eu amo tailwind, uso quase sempre, mas eu sinto que ele não é uma boa jogada em ser usado com um projeto vanilla? Tailwind se encaixa perfeitamente quando usamos algum framework como React, Vue, Angular ou outros visto que eles funcionam como componentes, mas quando você está aplicando diretamente dentro do HTML, isso acaba ficando confuso e difícil de fazer uma manutenção futura. Apenas minha opinião, mas eu manteria usando css ou sass/scss até você começar a aprender React (creio ser o framework que você falou querer aprender), ai você vai ver como tailwind combina perfeitamente.

  • Ok, de volta pro feedback. Cuidado com a descrição do atributo "alt", é importante que ele tenha uma boa descrição da imagem, e jamais adicione palavras como "imagem", "ícone" ou semelhantes, pois o próprio screen reader vai fazer isso. Por exemplo, a primeira imagem do computador um screen reader leria como "Image computer. Image". Como pode ver, o screen reader fala "image" duas vezes, pois ele sempre vai falar qual o elemento que ele está selecionado, saca? Então evite usar essas palavras, e claro, adicione uma descrição que faça sentido para a imagem, como por exemplo: <img alt="A Mac computer screen with a green checkmark." /> ou você pode ir mais longe e descrever o background da tela do computador também, mas não deixe muito grande
  • Sabe essas imagens pequenas que ficam acima de Snippets, Blacklist, Preview? Como são meramente decorativas, você pode adicionar um alt simples, mas também adicione o atributo aria-hidden="true", isso impede que essas imagens sejam lidas por screen readers, visto que não são importantes para o entedimento.
  • Cuidado com essas cores, os parágrafos são quase branco, mesma cor do plano de fundo. É importante você sempre checar o contraste do foreground com o background. Nesse caso você estava apenas seguindo o design então é um problema do design, não seu
  • Adiciona uma descrição para os links do footer que levam para as redes sociais (facebook, twitter, insta). Sem uma descrição um usuário que utiliza alguma ferramenta assistiva não vai saber pra onde esse link o leva, e pode nem saber que já saiu e está em uma outra tela, gerando confusão grande. Pra resolver você pode fazer assim: <a href="O link aqui" target="blank" aria-label="Visit our facebook page." />. Aqui ele descreve exatamente o que esse link quer passar para o usuário, onde ele está falando para visitar a página do face.
  • Pra deixar ainda mais semântico, muitos desses itens poderiam estar em uma lista ao invés de divs. Por exemplo: Os itens Quick Search, iCloud Sync e Complete History poderiam fazer parte de uma <ul> list, o Create blacklists, Plain text snippets e Sneak preview também, as logos das empresas, e as redes sociais no footer também

  É isso, ficou muito bom, creio não ter muito o que falar pois você segue bem as diretrizes e semântica

  Marked as helpful

  1

  ---

  

  Daniel 🛸•44,310

  @danielmrz-devPosted 8 months ago

  @LucianoDLima

  Obrigado por mais um feedback detalhado, Luciano!

  Sobre o Tailwind, eu concordo com seu ponto de vista, mas eu ando usando na maior parte dos projetos simplesmente pra aprender sobre ele, pois sei que os frameworks como o React usam, então é mais pela prática do que qualquer outra coisa.

  Sobre acessibilidade, vou fazer as alterações, acabei esquecendo de revisar esse aspecto antes de postar.

  Você me recomendou no último projeto organizar os arquivos numa pasta "src" separada e nesse projeto consegui aplicar. Não sei se ficou como deveria, mas definitivamente me ajudou a organizar melhor! Valeu!

  0

  

  P

  Luciano Lima•1,290

  @LucianoDLimaPosted 8 months ago

  @danielmrz-dev Opa, ficou bem melhor sim a organização!

  Só uma coisa que passou batido e nem reparei, você nunca deve incluir a pasta node_modules nos seus projetos, isso é algo que deve ficar apenas na sua máquina e em nenhum lugar do seu repositório. Você vê os dois arquivos de configuração chamados package.json e package-lock.json? Então, eles que são reponsáveis por fazer o repo baixar os módulos necessários caso alguém clone ou de fork no seu repositório para modificar algo.

  Pra corrigir você vai precisar só apagar a pasta node_modules, ai não sei se notou mas você tem um arquivo chamado .gitignore, ele serve para ignorar tudo que estiver nele, assim você não da push no que estiver nele por engano, então só adicionar node_modules nele

  Marked as helpful

  1
• 

  Saul Gabriel Aranguren•320

  @saularangurenPosted 8 months ago

  Greetings Daniel, excellent work, I love your code, however, certain parts of it can be improved, in addition to the organization of the folders, remember that all folders that contain application files must go inside the src folder, including assets Of course it is worth mentioning that it depends on the developer, you can create the src or assets folder, and remember that the public folder goes in the main directory, the app icon should go inside it, happy coding

  1

  ---

  

  Daniel 🛸•44,310

  @danielmrz-devPosted 8 months ago

  @saularanguren Thanks

  0