Oi gente, como vão? Espero que bem!

Meu nome é Gabriel Kyomen e essa é minha primeira postagem aqui. Se você gostar do conteúdo, peço que leia o último tópico com atenção! Agora vamos ao conteúdo real

Bugs. Bugs por toda a parte

Se você já colocou a mão na massa alguma vez para desenvolver, com certeza já se deparou com um bug. Um comportamento diferente daquilo que esperamos, e que raramente sabemos a causa.

Pequena curiosidade rápida

Não se sabe ao certo a origem do termo "bug" - inseto em inglês -, porém acredita-se que seja por um relato de Grace Hopper, programadora da Marinha dos EUA, que escreveu em seu diário de bordo que um inseto preso nos contatos do computador Mark II estava causando problemas no seu funcionamento, e aí a expressão "Encontrei um bug!"

A arte do debugging

Bom, acontece que desenvolvedores passam a maior parte de seus dias fazendo manutenção de código, o que inclui encontrar e corrigir bugs, etapa que chamamos de debug.

Com o avanço das ferramentas que usamos para trabalhar, como o VSCode, por exemplo, foram desenvolvidas várias aplicações com esse objetivo, os famosos debuggers

Porém, se tem uma coisa que nós desenvolvedores somos bons, é em achar um jeito "preguiçoso" de fazer algo, e com debugging isso não seria diferente. Seja em JS, Java, C ou qualquer outra linguagem, existe um método capaz de imprimir algo na tela, incluindo opcionalmente o valor de alguma variável.

Falando em JS, que atualmente é com o que eu trabalho, isso abre margem para aqueles famosos console.log("chegou até aqui") hehe. Claro que não é o ideal, mas vai poupar alguns minutos de configuração do ambiente para identificar aquele erro bobo no qual você escreveu um witdh no lugar de width (não finja que nunca fez isso).

Mas como fazer isso em CSS?

Infelizmente, esses métodos só estão disponíveis em linguagens de programação, e quando se trata de desenvolvimento web, duas das três principais não se encaixam nesse conceito, já que o HTML é uma linguagem de marcação, e o CSS é uma linguagem de estilização.

Claro, o HTML é quase imune a problemas, já que apenas diz a estrutura das coisas, e praticamente todo seu comportamento pode ser alterado pelo CSS, e é justamente esse CSS que acaba sendo a "pedra no sapato" de muitos desenvolvedores web, sejam iniciantes ou experientes.

Somando a "falta de paciência" com a dificuldade de identificar um elemento com problemas, muitos apelam para as bordas, tentando decobrir quem está causando aquele espaço gigante na página, ou então quem está ultrapassando os limites do elemento pai, com um código como esse:

* {
    border: 1px solid red;
}

Em diversas situações, isso vai ser suficiente, porém existe um problema: As bordas ocupam espaço, empurrando elementos, o que pode piorar a visualização e dificultar a identificação do bug. É aí que entram duas técnicas parecidas, mas sem esse problema:

Técnica 1: outlines - as bordas sem tamanho

Essa técnica consiste em mudar ligeiramente a propriedade usada para um outline, que tem a mesma visualização da borda, mas sem ocupar espaço, mantendo tudo no lugar original. Alterando o código acima, teríamos algo assim:

* {
    outline: 1px solid red;
}

Outra vantagem é que, se um elemento teve sua borda declarada, ela poderia ser trocada pelo primeiro código, quebrando ainda mais o estilo, enquanto esse manteria a borda original e adicionaria outra linha, já que o outline é desenhado por fora das bordas.

Técnica 2: backgrounds com alpha somados

Essa outra técnica envolve uma outra propriedade, dessa vez bem conhecida, a background-color, porém, com uma opacidade menor de 1. O motivo é que, quando temos um background com opacidade menor do que 1, conseguimos ver o que está no fundo, e aí as cores se misturam. Se as cores são iguais, o efeito causado é de que quanto mais pra "cima" um elemento estiver, mais escura sua cor de fundo será.

O código ficaria assim:

* {
    background: rgba(100, 0, 0, 0.1);
}

E aqui o resultado:

Conclusão

Mesmo quando se trata de ferramentas "preguiçosas" para debug, existem umas melhores do que outras, e conhecê-las sempre é uma boa ideia, principalmente quando não temos o tempo para configurar ou a necessidade por uma ferramenta mais poderosa para identificar bugs.

Caso queiram aprender formas mais sofisticadas, recomendo assistirem esse vídeo do Kevin Powell, um dos meus criadores de conteúdo de CSS favoritos. Inclusive, o tópico desse post foi completamente inspirado em um dos conteúdos dele. O vídeo está em inglês, mas infelizmente não conheço outra fonte que tenha falado desse assunto em inglês.

Se quiserem ver o exemplo que criei para esse artigo, é só clicar aqui pra acessar o codepen

Sobre o autor

Esse é aquele tópico que comentei sobre lerem com atenção caso tenham gostado do conteúdo. Basicamente queria me apresentar melhor, mas sem atrapalhar o ponto principal do post hehe.

Como comentei, meu nome é Gabriel Kyomen. Acho que como todos aqui, adoro acompanhar o canal do Filipe, e atualmente trabalho como Fullstack com NextJS pra web, Expo pra apps e NodeJS com express pra APIs. Também sou estudante de Ciência da Computação na UFSCar.

Decidi entrar para a plataforma com intuito principal de praticar minha escrita e criação de conteúdo, já que fiz um workshop na faculdade uma vez e me interessei bastante por isso depois de ler diversos feedbacks positivos que me motivaram a ensinar aquilo que pratico no meu dia a dia.

Por isso, queria pedir para darem feedbacks aqui nas respostas. Dependendo de como for, penso em escrever alguns posts que juntos virem uma "série", seja pra me acompanhar em jornadas de aprendizado, ou seja para ensinar algo que já tenho consolidado na mente mesmo.

Se quiserem aumentar o network de vocês, sintam-se à vontade para conectarem comigo no meu Linkedin ou no meu Github!

Se você leu até aqui, de verdade, muito obrigado! Até mais.