Saudações a todos! Como está o Hacktoberfest para você este ano? Pessoalmente, estou gostando muito até agora. Entramos agora na segunda semana de outubro, o que significa que é hora do meu segundo pull request (PR) dos quatro necessários para completar o desafio. Esta semana, decidi me esforçar um pouco mais, contribuindo com a base de código de um projeto, em vez de focar apenas na documentação, como fiz na semana 1.

Recapitulação da semana 1

Em meu primeiro PR do Hacktoberfest, trabalhei na melhoria da documentação do projeto. Como iniciante, eu queria facilitar o processo com tarefas menores e gerenciáveis. Porém, para esta segunda semana, decidi assumir algo mais técnico: contribuir para o projeto GitExplorer.

Visão geral do projeto: GitExplorer

GitExplorer é um aplicativo da web que simplifica a descoberta e exploração dos principais repositórios GitHub. Ele permite aos usuários filtrar repositórios com base em linguagens de programação, tópicos e outros critérios de classificação. Embora a UI ainda esteja em desenvolvimento, o projeto oferece uma valiosa oportunidade de aprendizado para colaboradores, especialmente iniciantes. Muitos dos problemas no repositório são marcados como "bom primeiro problema", tornando-o um ótimo lugar para começar.

Para minha contribuição, optei por implementar um recurso de navegação que aprimora a experiência do usuário ao navegar nos repositórios.

Identificando o problema

O projeto inicialmente tinha um botão para navegar para a próxima página dos repositórios, mas faltava um sistema de paginação completo. Os usuários não conseguiam navegar facilmente entre as páginas ou pular para uma página específica, o que representava problemas de usabilidade. Percebi essa limitação e solicitei ao mantenedor do projeto que me atribuísse o problema.

Durante meu tempo trabalhando no projeto, um aspecto que se destacou (e não no bom sentido) foi a forma como a base de código foi estruturada. O projeto tinha toda a lógica escrita em um único arquivo script.js, o que pode se tornar difícil de manter à medida que o projeto cresce. Embora eu não quisesse fazer grandes mudanças neste PR - já que ele se concentrava apenas nos botões de paginação - pretendo sugerir a refatoração da estrutura do código em uma edição futura.

Na verdade, antes disso existe outro desenvolvedor que criou um botão que navega para a próxima página, mas não é bom para a experiência do usuário quando ele deseja navegar para frente e para trás, bem como para uma página específica. Por esse motivo, comentei para pedir ao mantenedor que atribuísse esse problema para mim.
Na época em que estava trabalhando neste projeto, há uma coisa que não gostei nele. É a maneira como o mantenedor estruturou sua base de código enquanto escrevia cada lógica em apenas 1 arquivo script.js. No entanto, não quero resolver esse problema porque ele só pede botões de paginação. Criarei um novo problema solicitando a reestruturação da base de código posteriormente.

Novo recurso: paginação aprimorada

A funcionalidade existente tinha apenas um botão para navegar entre as páginas, com 10 repositórios exibidos por página. Meu objetivo era implementar um sistema de paginação mais amigável com botões de página “Anterior”, “Próximo” e numerados. Isso permitiria que os usuários acessassem diretamente a página de seu interesse, tornando a experiência de navegação mais tranquila.

Implementação

Restrições da API do GitHub:

Ao implementar a paginação, encontrei uma limitação na API do GitHub, que restringe os resultados a 1.000 itens. Se uma pesquisa gerar mais de 1.000 repositórios, a tentativa de navegar além desse limite resultará em erro, retornando dados indefinidos. Dado que o design exibe 10 repositórios por página, limitei o número de páginas em 100 para evitar esse problema.

Alterações de código:

• Introduzi uma nova seção

  em script.js para paginação. Isso me permitiu adicionar alguns estilos CSS para melhorar a estética dos botões e a experiência do usuário.

• A lógica central da paginação foi encapsulada em duas novas funções:

  • createButton()
  • renderPaginação() Essas funções geraram dinamicamente os botões de paginação com base nas páginas disponíveis e aplicaram estilos para desabilitar o botão da página atual, evitando que os usuários clicassem novamente nele acidentalmente. Também adicionei efeitos de foco aos botões para uma aparência mais refinada.

Melhorias de CSS:

Para o design da paginação, certifiquei-me de que o botão da página atual esteja desabilitado e com estilo diferente para indicar seu estado. Outros botões de página receberam efeitos de foco para aumentar a interatividade e melhorar a experiência do usuário.

Conclusão

Isso encerra minha contribuição para a Semana 2 do Hacktoberfest. Agora estou procurando outro repositório para contribuir na próxima semana. Idealmente, gostaria de encontrar um projeto que seja um pouco mais desafiador, para que eu possa continuar me esforçando e melhorando minhas habilidades progressivamente.

Obrigado pela leitura e estou ansioso para compartilhar mais sobre minha jornada no Hacktoberfest!