Grüße an alle! Wie läuft das Hacktoberfest dieses Jahr für dich? Persönlich macht es mir bisher wirklich Spaß. Wir sind jetzt in der zweiten Oktoberwoche angekommen, was bedeutet, dass es Zeit für meine zweite Pull-Anfrage (PR) von vier ist, die zum Abschließen der Herausforderung erforderlich ist. Diese Woche habe ich beschlossen, mich noch ein wenig weiterzuentwickeln, indem ich zur Codebasis eines Projekts beitrug, anstatt mich nur auf die Dokumentation zu konzentrieren, wie ich es in Woche 1 getan habe.

Rückblick auf Woche 1

In meiner ersten PR des Hacktoberfests habe ich an der Verbesserung der Projektdokumentation gearbeitet. Als Anfänger wollte ich mir den Einstieg in den Prozess mit kleineren, überschaubaren Aufgaben erleichtern. Für diese zweite Woche habe ich mich jedoch entschieden, etwas Technischeres zu übernehmen: einen Beitrag zum GitExplorer-Projekt zu leisten.

Projektübersicht: GitExplorer

GitExplorer ist eine Webanwendung, die die Entdeckung und Erkundung der wichtigsten GitHub-Repositories vereinfacht. Es ermöglicht Benutzern, Repositories nach Programmiersprachen, Themen und anderen Sortierkriterien zu filtern. Während sich die Benutzeroberfläche noch in der Entwicklung befindet, bietet das Projekt eine wertvolle Lernmöglichkeit für Mitwirkende, insbesondere für Anfänger. Viele der Ausgaben im Repository sind als „gute erste Ausgabe“ gekennzeichnet, was es zu einem guten Ausgangspunkt macht.

Für meinen Beitrag habe ich mich für die Implementierung einer Navigationsfunktion entschieden, die das Benutzererlebnis beim Durchsuchen von Repositorys verbessert.

Identifizieren des Problems

Das Projekt verfügte ursprünglich über eine Schaltfläche zum Navigieren zur nächsten Seite der Repositorys, es fehlte jedoch ein vollständiges Paginierungssystem. Benutzer konnten nicht einfach zwischen den Seiten hin und her navigieren oder zu einer bestimmten Seite springen, was zu Problemen bei der Benutzerfreundlichkeit führte. Ich habe diese Einschränkung bemerkt und den Projektbetreuer gebeten, mir das Problem zuzuweisen.

Während meiner Arbeit an dem Projekt fiel ein Aspekt auf (und zwar nicht im positiven Sinne), nämlich die Art und Weise, wie die Codebasis strukturiert war. Die gesamte Logik des Projekts war in einer einzigen script.js-Datei geschrieben, was mit zunehmendem Projektwachstum schwierig zu verwalten sein könnte. Obwohl ich in dieser PR keine größeren Änderungen vornehmen wollte – da sie sich nur auf die Paginierungsschaltflächen konzentrierte – habe ich vor, in einer zukünftigen Ausgabe eine Umgestaltung der Codestruktur vorzuschlagen.

Tatsächlich gab es davor einen anderen Entwickler, der eine Schaltfläche erstellt hat, die zur nächsten Seite navigiert, aber das ist nicht gut für die Benutzererfahrung, wenn sie vor und zurück sowie zu einer bestimmten Seite navigieren möchten. Aus diesem Grund habe ich den Betreuer gebeten, dieses Problem für mich zuzuweisen.
Als ich an diesem Projekt arbeitete, gab es eine Sache, die mir daran nicht gefiel. Dies ist die Art und Weise, wie der Betreuer seine Codebasis strukturiert, da er jede Logik in nur eine script.js-Datei schreibt. Allerdings möchte ich dieses Problem nicht umfassend beheben, da nur nach Paginierungsschaltflächen gefragt wird. Ich werde später eine neue Ausgabe erstellen und darum bitten, die Codebasis neu zu strukturieren.

Neue Funktion: Verbesserte Paginierung

Die vorhandene Funktionalität verfügte nur über eine Schaltfläche zum Navigieren zwischen Seiten, wobei pro Seite 10 Repositorys angezeigt wurden. Mein Ziel war es, ein benutzerfreundlicheres Paginierungssystem mit „Zurück“, „Weiter“ und nummerierten Seitenschaltflächen zu implementieren. Dies würde es Benutzern ermöglichen, direkt zu der Seite zu springen, die sie interessiert, was die Navigation reibungsloser gestaltet.

Durchführung

GitHub API-Einschränkungen:

Beim Implementieren der Paginierung bin ich auf eine Einschränkung der GitHub-API gestoßen, die die Ergebnisse auf 1.000 Elemente beschränkt. Wenn eine Suche mehr als 1.000 Repositorys ergibt, führt der Versuch, über diese Grenze hinaus zu navigieren, zu einem Fehler, der undefinierte Daten zurückgibt. Da das Design 10 Repositorys pro Seite anzeigt, habe ich die Anzahl der Seiten auf 100 begrenzt, um dieses Problem zu vermeiden.

Codeänderungen:

• Ich habe einen neuen

  -Abschnitt in script.js für die Paginierung eingeführt. Dadurch konnte ich einige CSS-Stile hinzufügen, um die Ästhetik der Schaltflächen und das Benutzererlebnis zu verbessern.

• Die Kernlogik für die Paginierung wurde in zwei neue Funktionen gekapselt:

  • createButton()
  • renderPagination() Diese Funktionen generierten die Paginierungsschaltflächen dynamisch basierend auf den verfügbaren Seiten und angewendeten Stilen, um die Schaltfläche für die aktuelle Seite zu deaktivieren und zu verhindern, dass Benutzer versehentlich erneut darauf klicken. Ich habe den Schaltflächen auch Hover-Effekte hinzugefügt, um ein eleganteres Aussehen zu erzielen.

CSS-Verbesserungen:

Für das Paginierungsdesign habe ich dafür gesorgt, dass die Schaltfläche für die aktuelle Seite deaktiviert und anders gestaltet ist, um ihren Status anzuzeigen. Andere Seitenschaltflächen erhielten Hover-Effekte, um die Interaktivität und das Benutzererlebnis zu verbessern.

Abschluss

Damit ist mein Beitrag für Woche 2 des Hacktoberfests abgeschlossen. Ich bin jetzt auf der Suche nach einem weiteren Repository, zu dem ich nächste Woche beitragen kann. Idealerweise würde ich gerne ein Projekt finden, das etwas anspruchsvoller ist, damit ich mich weiter anstrengen und meine Fähigkeiten schrittweise verbessern kann.

Danke fürs Lesen und ich freue mich darauf, mehr über meine Hacktoberfest-Reise zu erzählen!