Clean Code no meu portfólio

• Apresentação

Vi o prêmio, olhei para o meu pc bom, que é um pentium e 8gb, faltando uma placa mãe e olhei para o projeto que estou trabalhando para portfólio e para vender e pensei: é minha hora de brilhar.

Sou um Front-End Júnior que nunca conseguiu a primeira vaga e tento vender site por aí, que por sinal é mais fácil ficar rico com jogo do tigre que conseguir a primeira vaga. E tinha uma ideia antiga de comercializar um cardápio digital.

• Projeto

Agora vou dizer como o Clean Code está me ajudando, pra mim algo que tento colocar em todo projeto é escalabilidade, no sentido de poder ir aumentando o código sem trazer confusão, também no sentido de não ficar colocando comentário em cada sessão para ir separando.

Agora que entendeu o requisito, eu buscava criar um site com a mesma funcionalidade de um site tipo de pizzaria, de colocar o prato principal e adicionais, que ficasse guardado tudo em um "carrinho" e depois o usuário clicava em comprar e iria o pedido pro whatsApp do responsável.

Dai tudo bem, e o complicado chega na hora de vender e personalizar para cada estabelecimento, que tem seu estilo próprio.

• Começo

Na minha inocência achava que não sairia tão grande o código que caberia tudo em um arquivo index.html, que pra mim ficaria mais Clean Code e abriria a possibilidade de enviar o arquivo pelo whatsapp e mostraria de um outro jeito o projeto.

E a falta de imagens eu iria resolver hospendando no Google Drive. Comecei com o projeto bem raiz, a tríade html, css e javascript de um jeito mais minimalista possível, fazendo classes pra diminuir código, antes de escrever algo em javascript já tava ficando imenso o código.

Depois achei por bem dividir em index.html e os outros arquivos dentro de uma pasta src. Chega outra hora boa do Clean Code de usar o

<link rel="stylesheet" href="src/styles/reset.css">

que já sabia, mas por vezes esquecia mas foi lembrada no Bootcamp Potência Tech Ifood - Desenvolvimento de Jogos.

• Adições

E além de Clean Code tem que ser bonito e detalhista, e fui adicionar uma pasta para o favicon, a pasta de imagens, e uma pasta que ficou muito querida, a pasta de cursor, onde o padrão é um sanduíche fechado e quando clica ele se abre.

Outra adição que fez deixar mais didático o código, foi implementar o bootstrap 5.3. Chegou uma hora que eu queria colocar algo como modais, padronização de botões e tantas classes já, dificultava as coisas. Então o que o bootstrap já tinha e eu tinha criado classes como w-100 eu apaguei e usei só bootstrap.

• Hackeando o Ifood

Eu entrei no servidor na hora que eles foram receber o pedido... não, calma, não fiz isso. Eu tenho que dizer que foi inspirado no site, mas ficou quase um clone.

Um ajuste que fiz, foi tirar o campo pesquisar e colocar um form-select, porque pensando em atender vários restaurantes ia ser confuso. E o que achava ruim no site deles, eu melhorei no meu, coloquei mais interatividade com vídeos, e aquele tudo branco deles, deixei algumas abas mais cinzentas.

Usei o modo mobile first, e melhorou bastante o Clean Code. Costume codar vendo numa tela 360 x 640 que é um padrão em massa aqui, e olhando na menor tela do inspecionar do Google Chrome que é o jioPhone 2 com 240 x 320 está ótimo, e não quebra.

No site original tem algumas falhas de responsividades. E por isso fui deixando de seguir tamanhos que estava seguindo. Na imagem está até o final da página, estou trabalhando nos destaques e fome de precinho pra depois completar todas as sessões. O que já fiz tem de html já tem mais de 800 linhas.

• Automações

Uma dica pra quem tá começando, o serviço de classe css que falei mais cedo, usar algo similar no javascript para preencher o mesmo texto em vários locais do site. Esse Clean Code vai ajudar tanto, quando for fazer um site pra outro restaurante, só mudar o texto dentro do array uma vez e pronto.

Essa mudança vai deixar tão menos trabalhosa a leitura do html. E outra coisa que quando pegarem seu código vão ler tão fácil, é a padronização de elementos, não precisa ser igual tal pessoa coda, claro, se tiver trabalhando siga as regras do trabalho.

<div id="example" class="w-100 p-3 my-1"></div>

Eu sempre gosto de deixar o id mais próximo da div, pra mim fica mais fácil quando procurar tal nome, esse exemplo quis deixar para ter uma ideia de quando ler meu código e não tiver junto da div, já procura em outra div.

E aqui olhando meu código acabei de achar um comentário, não quer dizer que não tô usando o Clean Code, era uma observação pra usar algo no futuro. E veja assim, se for ajudar mais que atrapalhar, pode usar o comentário.

Aproveitando automações, quero deixar a dica de usar variavéis em css, outra dica é que vários elementos do meu site tem user-select: none, então juntei tudo separando por vírgula e lancei. Estava sendo colocada por classe bootstrap, só que era tanto elemento, que podia deixar passar algum.

Outra dica, é ter muita atenção no css com o @media , se possível deixe por último, e em sequência pensando em mobile first, primeiro orientation e depois pode ir aumentando os width. E a última é deixar os nomes no javascript mais informativos possível.

Valeu, obrigado por quem leu, eu tô indo que tô com sono. E não desanime por achar difícil programação, desanime se quiser continuar sendo pobre. Eu lascado de pobreza, e ainda tô programando com meu celeron e 2gb. E deixo uma frase pra refletir do poderosíssimo ninja "O trabalho duro ganha do talento, sempre que o talento não trabalha duro."