Bonjour à tous ! Comment se passe le Hacktoberfest pour vous cette année ? Personnellement, je l’apprécie vraiment jusqu’à présent. Nous sommes maintenant entrés dans la deuxième semaine d'octobre, ce qui signifie qu'il est temps de faire ma deuxième pull request (PR) sur les quatre nécessaires pour relever le défi. Cette semaine, j'ai décidé d'aller un peu plus loin en contribuant à la base de code d'un projet plutôt que de me concentrer uniquement sur la documentation, comme je l'ai fait lors de la semaine 1.

Récapitulatif de la semaine 1

Lors de mon premier PR du Hacktoberfest, j'ai travaillé sur l'amélioration de la documentation du projet. En tant que débutant, je voulais me lancer dans le processus avec des tâches plus petites et gérables. Cependant, pour cette deuxième semaine, j'ai décidé de m'attaquer à quelque chose de plus technique : contribuer au projet GitExplorer.

Présentation du projet : GitExplorer

GitExplorer est une application Web qui simplifie la découverte et l'exploration des principaux référentiels GitHub. Il permet aux utilisateurs de filtrer les référentiels en fonction des langages de programmation, des sujets et d'autres critères de tri. Bien que l'interface utilisateur soit encore en cours de développement, le projet offre une précieuse opportunité d'apprentissage aux contributeurs, en particulier aux débutants. De nombreux numéros du référentiel sont étiquetés comme « bon premier numéro », ce qui en fait un excellent point de départ.

Pour ma contribution, j'ai choisi d'implémenter une fonctionnalité de navigation qui améliore l'expérience utilisateur lors de la navigation dans les référentiels.

Identifier le problème

Le projet disposait initialement d'un bouton pour accéder à la page suivante des référentiels, mais il lui manquait un système de pagination complet. Les utilisateurs ne pouvaient pas facilement naviguer entre les pages ou accéder à une page spécifique, ce qui posait des problèmes de convivialité. J'ai remarqué cette limitation et j'ai demandé au responsable du projet de m'attribuer le problème.

Pendant mon temps de travail sur le projet, un aspect qui s'est démarqué (et pas dans le bon sens) était la façon dont la base de code était structurée. Le projet avait toute la logique écrite dans un seul fichier script.js, ce qui pourrait devenir difficile à maintenir à mesure que le projet se développe. Même si je ne voulais pas apporter de changements majeurs à ce PR (puisqu'il se concentrait uniquement sur les boutons de pagination), je prévois de suggérer de refactoriser la structure du code dans un prochain numéro.

En fait, avant cela, un autre développeur a créé un bouton permettant d'accéder à la page suivante, mais ce n'est pas bon pour l'expérience utilisateur lorsqu'il souhaite naviguer d'avant en arrière, ainsi que sur une page spécifique. Pour cette raison, j'ai commenté pour demander au responsable de m'attribuer ce problème.
À l’époque où je travaillais sur ce projet, il y a une chose que je n’aimais pas. C'est la façon dont le responsable structure sa base de code car il écrivait chaque logique dans un seul fichier script.js. Cependant, je ne veux pas avoir beaucoup de solutions à ce problème car il ne demande que des boutons de pagination. Je créerai un nouveau problème demandant de restructurer la base de code plus tard.

Nouvelle fonctionnalité : pagination améliorée

La fonctionnalité existante n'avait qu'un seul bouton pour naviguer entre les pages, avec 10 référentiels affichés par page. Mon objectif était de mettre en œuvre un système de pagination plus convivial avec des boutons « Précédent », « Suivant » et des pages numérotées. Cela permettrait aux utilisateurs d'accéder directement à la page qui les intéresse, rendant ainsi l'expérience de navigation plus fluide.

Mise en œuvre

Contraintes de l'API GitHub :

Lors de l'implémentation de la pagination, j'ai rencontré une limitation avec l'API de GitHub, qui limite les résultats à 1 000 éléments. Si une recherche génère plus de 1 000 référentiels, toute tentative de navigation au-delà de cette limite entraîne une erreur et renvoie des données non définies. Étant donné que la conception affiche 10 référentiels par page, j'ai limité le nombre de pages à 100 pour éviter de rencontrer ce problème.

Modifications de code :

• J'ai introduit une nouvelle section

  dans script.js pour la pagination. Cela m'a permis d'ajouter des styles CSS pour améliorer l'esthétique des boutons et l'expérience utilisateur.

• La logique de base de la pagination a été encapsulée dans deux nouvelles fonctions :

  • créerBouton()
  • renderPagination() Ces fonctions généraient dynamiquement les boutons de pagination en fonction des pages disponibles et appliquaient des styles pour désactiver le bouton de la page actuelle, empêchant ainsi les utilisateurs de cliquer à nouveau dessus accidentellement. J'ai également ajouté des effets de survol aux boutons pour un look plus soigné.

Améliorations CSS :

Pour la conception de la pagination, je me suis assuré que le bouton de la page actuelle est désactivé et stylé différemment pour indiquer son état. D'autres boutons de page ont reçu des effets de survol pour améliorer l'interactivité et l'expérience utilisateur.

Conclusion

Cela termine ma contribution pour la semaine 2 du Hacktoberfest. Je suis maintenant à la recherche d'un autre référentiel auquel contribuer la semaine prochaine. Idéalement, j’aimerais trouver un projet un peu plus stimulant, pour pouvoir continuer à me dépasser et améliorer progressivement mes compétences.

Merci d'avoir lu et j'ai hâte de partager davantage sur mon parcours Hacktoberfest !