DEV Community: Iuri Silva

Dicas de design para melhorar suas aplicações frontend

Iuri Silva — Mon, 04 Mar 2024 15:05:01 +0000

Hierarquia

A hierarquia ajuda na definição do grau de importância. Quando um elemento de design possui várias informações, é importante dar mais peso para o que é mais importante.

Proximidade

Neste princípio temos a base de que informações similares devem estar próximas, ou seja, manter o conteúdo principal próximo das informações secundárias. Fica claro que esses itens pertencem a um grupo e não a outro mais distante.

Alinhamento

Ao inserir informações em um layout precisamos ter em mente que mantê-las organizadas é fundamental para a compreensão do usuário, e o alinhamento ajuda muito nisso.

Cores

Um dos princípios mais importantes é o tom da cor. Ela também é responsável por transmitir emoções, simbolismos e identificar elementos. A paleta de cores precisa ser cuidadosamente escolhida, para transmitir a ideia da marca, sua atmosfera e atrair o público.

Repetição

O princípio da repetição visa fortalecer o padrão visual, ou seja, o alinhamento, o contraste e a proximidade devem ser iguais nas artes seguintes. Assim você seguirá mantendo a consistência da marca.

Contraste

O contraste é o responsável por dar relevância visual ao que deve ser atrativo. Um exemplo é você colocar uma imagem com letras em branco por cima, se na imagem tiver cores claras não teremos contraste, ou seja, não há uma diferenciação de cores.

Espaçamento

Deixar espaços em branco é tão importante quanto todo o resto. Uma determinada quantidade de texto, por exemplo, precisa de espaço para respirar, para que o leitor não se canse ao lê-lo.

Como estruturar os elementos de uma aplicação com os padrões F e Z

Iuri Silva — Mon, 04 Mar 2024 15:04:57 +0000

Existem dois formatos que podemos utilizar quando estruturamos os elementos de uma aplicação. Os formatos que iremos abordar são baseados nos movimentos dos nossos olhos e podem ser aplicados dentro do contexto da cultura ocidental (leitura da esquerda para direita). Essas diretrizes acabam por definir quais são os pontos mais nobres de um conteúdo, ou seja, aqueles que devem conter as informações mais importantes.

Padrões “F”

Os padrões “F” se aplicam a páginas tradicionais com muitos textos, como artigos ou postagens em blogs.

Um leitor escaneia o lado esquerdo da página, procurando por palavras-chave interessantes em cabeçalhos alinhados à esquerda ou frases de tópicos iniciais, depois para em um ponto e segue lendo em linha à direita, parando quando encontra algo interessante.

O resultado se parece com um “F” (ou “E,” ou algo com ainda mais barras horizontais; mas o termo “F” pegou).

Como você pode utilizar isso? Use negrito, itálico, cores ou sublinhado com moderação para destacar informações cruciais. Isso ajuda a guiar os olhos dos leitores para os pontos-chave.

Padrões “Z”

Os padrões “Z” se aplicam a outros tipos de páginas, como anúncios ou sites, em que as informações não são necessariamente apresentadas em parágrafos em bloco.

O olho de um leitor primeiro escaneia a parte superior da página, onde é possível encontrar informações importantes, depois dispara para o canto oposto na diagonal e faz a mesma coisa na parte inferior da página.

Por isso é quase um padrão universal que os sites sigam esse comportamento, colocando as informações mais importantes nos cantos e orientando outras informações importantes nas barras superior e inferior.

Conclusão

É importante entender como os seus usuários fazem a leitura das informações antes de adotar um padrão. Considere também uma mistura dos padrões mencionados no artigo para chegar a uma solução ideal. Uma boa hierarquia visual irá diminuir o processo cognitivo dos usuários e destacar os pontos mais importantes para que concluam suas tarefas de uma forma mais eficaz.

Padronizando nomenclatura de classes utilizando o CSS Pattern BEM

Iuri Silva — Wed, 07 Feb 2024 20:42:56 +0000

A metodologia Bloco (Block), Elemento (Element), Modificador (Modifier) (BEM) é o nome popular de um CSS Pattern ou convenção de classes que tem como objetivo ajudar os desenvolvedores a entender melhor a relação de nomenclatura de classes.

O nome de uma classe utilizando a metodologia BEM é dividida em três partes:

[block]__[element]--[modifier]

Para entender melhor essa metodologia temos que saber o que quer dizer o Block, Element, Modifier — esses três pilares são as bases dessa metodologia e também são as categorias nas quais vamos dividir nossos elementos.

O que é Bloco?

Blocos podem ser definidos como componentes que são maiores e/ou reutilizáveis na sua aplicação. Pense nesses elementos como sendo o pai, uma vez que os Elementos e os Modificadores estarão dentro deles. Por exemplo: menu, cabeçalho, card, rodapé, etc…

O que é Elemento?

Elementos são filhos dos Blocos. Vale ressaltar que um Elemento só pode ter apenas um pai. Por exemplo: item do menu, título do card, redes sociais do rodapé, etc…

Elementos têm uma regra específica de escrita, sendo uma classe CSS composta de Nome do Bloco + dois underlines + nome do Elemento:

.[Bloco]__[Elemento].

Por exemplo, se você tem um Bloco .card, um Elemento dele pode ser .carditem ou .cardlink.

Dentro das regras de escrita de BEM, esses dois underlines representam um Elemento. Perceba que isso não viola as regras de nomenclatura de CSS, ao mesmo tempo em que deixa claríssimo do quê se trata, pois é de conhecimento geral que __ é um Elemento de BEM.

O que é Modificador?

Modificadores representam os diferentes estados ou estilos que um Elemento ou Bloco podem ter. Por exemplo: escondido, visivel, tem fundo, tem borda, borda redonda, etc…

Sua regra de escrita é uma classe composta pelo nome de um Bloco ou Modificador + dois hífens + o nome do Modificador:

[Bloco]__[Elemento]--[Modificador].

Seguindo o exemplo, poderia haver um modificador para o card .card__link--hover para um versão escura;

Exemplo prático de BEM

Agora que o Bloco, Elemento e Modificador foram explicadas e suas convenções de escrita apresentadas, irei apresentar um exemplo para melhor compreensão.

Seguindo o mesmo exemplo de um menu, vamos ter o seguinte código HTML:

<ul class="menu">
  <li class="menu__item">
    <a href="#" class="menu__link">Item 1</a>
  </li>

  <li class="menu__item">
    <a href="#" class="menu__link menu__link--disabled">Item 2</a>
  </li>

  <li class="menu__item">
    <a href="#" class="menu__link">Item 3</a>
  </li>
</ul>

Nosso CSS ficará assim:

.menu {
}

.menu__item {
}

.menu__link {
}

.menu__link--disabled {
}

Vantagens de utilizar BEM

Vamos ver agora alguns benefícios que a utilização que uma metodologia como BEM pode trazer aos projetos e aos desenvolvedores.

1 - Reutilização de classes pré-existentes

Antes mesmo de criar um novo estilo para um bloco, podemos facilmente verificar quais os modificadores já existem no projeto. Caso já exista um que te atenda, não será necessário criar outro o que contribui para evitar CSS legado ou desconhecido.

2 - Melhor entendimento no HTML

Ao ler o código HTML, já é possível entender rapidamente qual elemento depende de qual, e replicar isso de maneira fácil nas outras partes do projeto.

3 - Comunicação do time

Os componentes serão nomeados de forma que facilite a comunicação entre os desenvolvedores e outros membros do time.

4 - Manutenção no código

A utilização do BEM contribui para que os desenvolvedores tenham menos receio de fazer mudanças no código por não saberem o quanto aquilo pode afetar outros módulos.

Dependências de produção vs. de desenvolvimento

Iuri Silva — Mon, 05 Feb 2024 15:14:00 +0000

Em projetos Node.js, é fundamental distinguir entre dois tipos de dependências: "dependencies" e "devDependencies". Essas propriedades desempenham um papel crucial ao listar as dependências que seu projeto requer, seja para operar em ambiente de produção ou no
contexto de desenvolvimento.

Dependências de produção

São aquelas dependências que precisam estar em produção para que seu projeto funcione. Por exemplo, o framework Tailwind CSS se enquadra nessa categoria. Para instalar um pacote de produção, basta utilizar o seguinte comando no seu terminal:

npm install <pacote> --save

Ao executar este comando, o pacote é automaticamente registrado no arquivo package.json, na seção de "dependencies" (a partir do npm 5 em diante; anteriormente, você precisava especificar manualmente com a opção --save).

"dependencies": { "pacote": "^0.1.1" }

Quando você instala um pacote usando o comando "npm install pacote", ele é configurado como uma dependência de produção por padrão.

Dependências de desenvolvimento

As dependências de desenvolvimento consistem em pacotes que não precisam ser incluídos na produção do seu projeto. Esses módulos são utilizados exclusivamente durante o processo de desenvolvimento, auxiliando em tarefas como testes, pré-processamento, webpack ou Babel.

Para adicionar uma dependência de desenvolvimento ao arquivo package.json, você pode simplesmente utilizar a flag "-D" ou "--save-dev," como exemplificado abaixo:

npm install <pacote> --save-dev

Ao utilizar essa flag, o pacote é registrado no arquivo package.json sob a seção de "devDependencies."

"devDependencies": { "pacote": "~0.1.1" }

Este procedimento torna claro que o pacote é destinado apenas para uso em ambiente de desenvolvimento, proporcionando uma gestão limpa e eficaz das dependências do projeto.

Informações adicionais

O conteúdo anterior representa a parte fundamental e essencial de um arquivo package.json, mas está longe de abranger todas as possibilidades que você pode explorar. Existem diversas outras opções e informações adicionais que podem ser valiosas ao escrever e configurar o seu package.json, bem como inúmeros detalhes úteis que podem se tornar relevantes no futuro.

Na prática, os comandos mencionados acima adicionam duas novas propriedades ao arquivo package.json, cada uma contendo um objeto distinto: "dependencies" e "devDependencies". Essas propriedades são usadas para listar as dependências de produção e de desenvolvimento de seu projeto, respectivamente.

Além disso, é possível especificar a versão de um pacote durante a instalação. Após o nome do pacote, basta adicionar "@versao-desejada" para instalar uma versão específica.

Também é viável instalar dependências de forma global em seu sistema, o que pode ser feito incluindo a opção "-g" ou "--global" ao instalar uma dependência através do terminal.

Dentro dessas duas estruturas, um padrão é seguido, que consiste em um par de "nome" e "versão" para cada pacote. Se você observar com atenção, notará que um deles utiliza o prefixo "^" e o outro usa o prefixo "~".

O caractere "^" (circunflexo) é usado para especificar uma versão de dependência que permitirá atualizações automáticas para versões futuras compatíveis. Por exemplo, se você definir uma dependência como "^1.2.3", isso indica que o npm (ou o gerenciador de pacotes que estiver utilizando) permitirá atualizações automáticas para qualquer versão igual ou superior a 1.2.3, mas menor do que 2.0.0. Essa abordagem é útil para garantir que você receba correções de bugs e pequenas atualizações, sem o risco de introdução de atualizações que possam causar incompatibilidades significativas.

Já o caractere "~" (til) é empregado para permitir atualizações automáticas para versões futuras de revisão compatíveis. Por exemplo, se você definir uma dependência como "~1.2.3", isso significa que o npm possibilitará atualizações automáticas para qualquer versão igual ou superior a 1.2.3, mas menor do que 1.3.0. Essa abordagem é valiosa quando você deseja receber apenas correções de bugs e atualizações de revisão, sem estar sujeito a atualizações que possam trazer novos recursos ou mudanças substanciais.

Grid de 8 pontos uma técnica que torna seu projeto escalável

Iuri Silva — Mon, 05 Feb 2024 15:03:37 +0000

Se você é um designer ou desenvolvedor, talvez já tenha ouvido o termo sistema de grid. Neste artigo, discutirei sobre o uso dos sistemas de grid de 8 pontos. Porque o espaçamento com 8 pontos ajuda o designer e o desenvolvedor a manter um projeto consistente e escalável.

O que é Grid de 8 pontos

O grid de 8 pontos é uma técnica que tem sido amplamente utilizada no mundo do design e da programação nos últimos anos. O grid de 8 pontos é quando usamos múltiplos de 8 para definir tanto o espaçamento, quanto o tamanho dos elementos da página em que estamos construindo.

A utilização de números como 8 para dimensionar e espaçar elementos torna o dimensionamento para uma ampla variedade de dispositivos. Além disso, a maioria dos tamanhos de tela populares é divisível por 8, o que facilita o ajuste. O princípio do grid de 8 pontos é usar múltiplos de 8 para layout, dimensões, preenchimento e margem dos elementos.

Grid de 8 pontos na prática

Utilizar o grid de 8 pontos em espaçamentos nos projetos é tão simples quanto parece. Simplesmente vai fazer com que a distância de um elemento para o outro seja múltipla de 8.

Geralmente usamos uma certa distância para espaçamento entre elementos que fazem parte do mesmo conteúdo e o dobro desse espaçamento para separar novos conteúdos. Veja no exemplo abaixo:

Conclusão

O grid de 8 pontos é uma técnica poderosa que pode ajudar designers e desenvolvedores a criar projetos consistentes e organizados. Utilizando grid de 8 pontos, é fácil manter a consistência no design, garantir que os elementos estejam equilibrados entre sí. Em resumo, a utilização do grid de 8 pontos é essencial para qualquer projeto de design ou desenvolvimento que exija organização e harmonia.

Como conseguir seu primeiro freela como desenvolvedor frontend

Iuri Silva — Mon, 05 Feb 2024 03:46:19 +0000

Sem sombra de dúvidas é a pergunta que mais recebo dos meus seguidores no meu Instagram. Até porque quem não quer ser empreendedor e ter seu próprio negócio, né?

Mas existe um muro entre seu serviço e os clientes, e ter só o portfólio e GitHub não é o bastante para atravessar esse muro (e você já sabe muito bem disso).

Depois de ter as habilidades necessárias para criar sites como desenvolvedor frontend é preciso ganhar visibilidade na web.

"Okay Iuri, mas como conseguir isso?"

LinkedIn!

Essa rede social é um baú de ouro para quem quer visibilidade e conseguir oportunidades na área. Além que futuramente você terá que ter uma conta no LinkedIn (mesmo empregado) pois, essa rede social é muito utilizada para comunicação entre a equipe (além das calls).

Comece criado um bom perfil no LinkedIn para chamar a atenção de recrutadores/clientes, isso é, adicione:

Uma boa foto (se tiver uma participando de evento melhor ainda);
Título da sua área;
Descrição falando sobre você e sua área;
Suas experiências profissional;
Formação acadêmica;
Recomendações;

Depois de adicionar todas as informações no seu LinkedIn, faça networks!

Essa sem dúvida foi a ação que me levou a receber propostas de freelas e empregos. Fazer network com outros desenvolvedores vai te dar mais experiência e criar um ciclo de amizade. Dependendo da amizade a pessoa pode recomendar você para alguma empresa ou proposta de freela que ela recebeu mas por algum motivo não quer fazê-lo.

Participar de fóruns e grupos relacionados a desenvolvimento é outra ótima oportunidade para fazer networking no LinkedIn.

Visibilidade

Okay, tudo que te falei até aqui são coisas "óbvias" e que independente de qual área o usuário atue, ele tem que seguir esses passos para ter um bom perfil.

O que irá te fazer ter visibilidade é a auto divulgação.

Sabe aquele projeto que você fez assistindo vídeo de algum canal no YouTube? Poste no LinkedIn!

Mas não apenas poste só com um título "Projeto feito com HTML e CSS", crie uma boa descrição.

Aqui vai uns tópicos bom para citar na descrição da postagem do projeto:

O motivo de ter feito o projeto;
Quais linguagens você utilizou;
Fale um pouco sobre o que é o projeto;
Em que ele te ajudou (qual experiência ele te deu);
Coloque o link do projeto rodando em alguma plataforma (recomendo a Vercel);
Link do projeto no GitHub em um repositório público;
Marque o @ do dono do vídeo que você utilizou para estudar (se ele te responder vai aumentar o alcance da postagem);
Coloque na descrição que você está disponível para freelas;
Peça feedbacks (super importante);

Por fim, levante discussões interessantes sobre o projeto na descrição da postagem com a comunidade de desenvolvedores.

Ajude outras pessoas

Não poste só projetos, e muito menos poste um a cada dia.

Você pode fazer isso postando curiosidades, fazendo perguntas, comentando nas postagem de outras pessoas, levantando discussões interessantes sobre o mundo da tecnologia.

A produção de conteúdo faz a sua rede engajar audiência, aumentar conexões e construir uma verdadeira network por adquirir conhecimentos.

E aí, gostou da postagem? Me manda um feedback para melhorar cada vez mais! 😁

Esse projeto é open source, então basta adicionar uma nova feature e abrir um pull-request. Dessa maneira você irá contribuir com a comunidade.