Meu primeiro bug em meu novo emprego! [Como encontrei um bug que desformatava o layout de blog]
Primeiramente pessoal, eu gostaria de falar que recentemente eu consegui minha primeira oportunidade como desenvolvedor web júnior.
Foram 535 dias (1 ano 5 meses e 20 dias) do primeiro dia (15/04/2022) que comecei estudar programação até o meu primeiro dia de trabalho (02/10/2023). Tudo isso estudando em torno de 10 horas por semana e tendo uma rotina muito (muito mesmo) apertada.
Logo mais trago um post contanto minha história de forma mais detalhada mostrando o exato passo a passo do que eu estudei e quais minhas dicas para quem está procurando sua primeira oportunidade.
Mas, indo ao ponto do post...
Meu primeiro bug em meu novo emprego
Recentemente recebi um job para fazer que era uma correção de um layout que estava "quebrado". Se tratava de uma página de um blog. O slide/carrossel onde ficava os últimos posts passando em loop infinito apresentava um erro (uma quebra no layout) em um determinado post.
Esse erro deixava o subtítulo do post com tamanho desconfigurado, e o botão "Leia Mais" (que direciona para o link do post) sem funcionamento. Aparentemente era algo de CSS.
Resolvi ir dar uma olhada no devtools e logo vi que algo estranho estava acontecendo. Observe o elemento span esta com uma formatação estranha.
Observe que, dentro da tag span tem um atributo de estilo. Porém, o mesmo não é corretamente fechado com as aspas duplas. Estranhamente possui um fechamento de parágrafo e um elemento de âncora/link dentro das aspas que seria o estilo do elemento span.
Resumindo, estava tudo desconfigurado e havia algum erro além do CSS, como inicialmente havia pensado.
O que haveria de ser, então?
Não sei muito sobre back-end. Porém, por um momento imaginei que o conteúdo poderia estar sendo carregado de uma forma incorreta. O site utiliza WordPress.
Tenho aprendido sobre PHP com o intuito de me tornar um profissional mais completo, visto que na empresa se utiliza muito do PHP ainda mais por conta do próprio WP.
Então, decidi ir dar uma olhada no código do blog em questão.
O site também utiliza o plugin construtor Elementor. Na página do blog, que é feita em elementor, tinha apenas um shortcode.
Toda aquela parte que estava com erro era carregada por esse shortcode. Daí, fui 'caçar' onde estava esse shortcode, porém não o encontrava. Pedi ajuda a uma colega de trabalho que de forma muito ágil e prestativa me ajudou a encontrá-lo.
Nisso, começou uma luta para entender o que exatamente o código PHP/WP estava fazendo.
O shortcode dedo-duro
Neste shortcode em questão parecia estar tudo certo. Mas, bem na última linha, ele invoca outro shortcode.
Ok, vamos agora neste outro shortcode para entendê-lo também.
Neste segundo shortcode, ele basicamente é composto por HTML e alguns trechos com código PHP. A função do PHP neste caso é apenas "colocar a carne (conteúdo do post) no esqueleto (estrutura HTML)".
Por exemplo, este é o exato código que estava no trecho que ocasionava erro e quebrava todo o layout.
<div class="py-3">
<h2><?= $post_blog->post_title ?></h2>
<p>
<?= mb_strimwidth($post_blog->post_content, 0, 130, '...') ?>
</p>
<a href="<?= $post_blog->guid ?>" target="_blank" class="btn-carousel-post">Leia mais</a>
</div>
Este $post_blog nada mais é do que um objeto com algumas propriedades e métodos referente ao post.
Veja que no elemento parágrafo foi utilizado a função mb_strimwidth. Essa função serve para truncar o texto — neste caso em 130 carateres. E encerra a string com os "..." indicando que possui mais texto. Resumidamente, fazer isso proporciona 3 benefícios:
- Torna o texto sempre do mesmo tamanho, formando um padrão visual dos posts.
- Limita o conteúdo. Caso contrário seria trazido todo o texto do post o que daria centenas de linhas.
- Dá uma prévia do conteúdo para o usuário, gerando interesse em ler mais.
Até aí tudo bem! Parecia estar tudo certo. Porém, só parecia...
Encontrando o erro
Fui ver o porque somente 1 post estava ocasionando o erro. Se a função estivesse errada teria que estar dando problema nos outros posts também. Mas, *descobri que não necessariamente.
Entrei no painel do wordpress, fui ao post, abri o conteúdo... tudo normal. Até que por curiosidade, eu fui ver o como estava sendo gerado o HTML do texto.
Veja só:
Parece familiar esses spans?
Acontece que, a cada quebra de linha o wordpress está gerando esse elemento span.
E coincidentemente, naquele post em questão, a 'truncagem' (de 130 caracteres) do texto caia em cima do elemento span que não havia sido fechado. E como o PHP é um pré processador de HTML, como você pode imaginar, tava bugando todo resto que vinha após esse código.
A "gambiarra" e a solução proposta
A gambiarra que me refiro, na realidade não é bem uma gambiarra. Foi um ajuste simples, porém eficaz apenas para atender (e resolver) o problema apresentado pelo cliente.
O que fiz foi editar o texto do post retirando o span. Assim quando a função fosse truncar o texto, não iria mais cair nessa tag em aberto e o layout iria estar normalizado.
Problema corrigido, agora eu poderia pensar numa solução melhor para este problema não ocorrer novamente e eliminar de vez o erro em questão.
A solução foi utilizar a função strip_tags do PHP para retirar as tags (elementos HTML) do texto. Assim será garantido que somente virá texto do conteúdo do post em si e nada além disso.
Conclusão
Fique bem feliz por ter encontrado esse problema. É verdade que é algo bem simples, mas considerando que estou iniciando minha carreira agora e que não tenho tanto conhecimento em PHP, fiquei contente em poder ter encontrado o erro e resolucionado o problema.
Além disso, oportunidades assim me ajudarão a aprender na prática muitas coisas novas e me desenvolver como profissional!!
E você, como resolveria este problema? Tem alguma sugestão melhor?
Estou sempre disposto a ouvir opiniões diferentes e sugestões construtivas.
Forte abraço a todos e um bom descanso neste feriado!!