Heim > Web-Frontend > js-Tutorial > Hauptteil

Hacktoberfest-Woche tiefer in Code-Beiträge eintauchen

Patricia Arquette
Freigeben: 2024-10-12 08:38:01
Original
656 Leute haben es durchsucht

Hacktoberfest Week Diving Deeper into Code Contributions

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 etwas weiter voranzutreiben, 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 bemerkte diese Einschränkung und bat den Projektbetreuer, 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 an 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 zuvor 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 bestehende 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 macht.

Durchführung

GitHub API-Einschränkungen:

Bei der Implementierung 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 ein neues

    eingeführt. Abschnitt in script.js für die Paginierung. 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.

結論

我對 Hacktoberfest 第二週的貢獻就到此結束了。我現在正在尋找下周可以貢獻的另一個存儲庫。理想情況下,我希望找到一個更具挑戰性的項目,這樣我就可以繼續鞭策自己並逐步提高我的技能。

感謝您的閱讀,我期待分享更多有關我的 Hacktoberfest 之旅的資訊!

Das obige ist der detaillierte Inhalt vonHacktoberfest-Woche tiefer in Code-Beiträge eintauchen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!