Rumah > hujung hadapan web > tutorial js > Minggu Hacktoberfest Menyelam Lebih Dalam kepada Sumbangan Kod

Minggu Hacktoberfest Menyelam Lebih Dalam kepada Sumbangan Kod

Patricia Arquette
Lepaskan: 2024-10-12 08:38:01
asal
741 orang telah melayarinya

Hacktoberfest Week Diving Deeper into Code Contributions

Salam, semua! Bagaimanakah perkembangan Hacktoberfest untuk anda tahun ini? Secara peribadi, saya sangat menikmatinya setakat ini. Kami kini telah memasuki minggu kedua bulan Oktober, yang bermaksud sudah tiba masanya untuk permintaan tarik kedua (PR) saya daripada empat yang diperlukan untuk menyelesaikan cabaran. Minggu ini, saya memutuskan untuk meningkatkan diri saya lebih jauh dengan menyumbang kepada pangkalan kod projek dan bukannya menumpukan pada dokumentasi semata-mata, seperti yang saya lakukan pada Minggu 1.

Rekap Minggu 1

Dalam PR pertama Hacktoberfest saya, saya berusaha untuk menambah baik dokumentasi projek. Sebagai seorang pemula, saya ingin memudahkan proses dengan tugas yang lebih kecil dan boleh diurus. Walau bagaimanapun, untuk minggu kedua ini, saya memutuskan untuk mengambil sesuatu yang lebih teknikal: menyumbang kepada projek GitExplorer.

Gambaran Keseluruhan Projek: GitExplorer

GitExplorer ialah aplikasi web yang memudahkan penemuan dan penerokaan repositori GitHub teratas. Ia membolehkan pengguna menapis repositori berdasarkan bahasa pengaturcaraan, topik dan kriteria pengisihan lain. Walaupun UI masih dalam pembangunan, projek ini menawarkan peluang pembelajaran yang berharga untuk penyumbang, terutamanya pemula. Banyak isu dalam repositori ditandakan sebagai "isu pertama yang bagus", menjadikannya tempat yang bagus untuk bermula.

Untuk sumbangan saya, saya memilih untuk melaksanakan ciri navigasi yang meningkatkan pengalaman pengguna semasa menyemak imbas repositori.

Mengenalpasti Masalah

Projek pada mulanya mempunyai butang untuk menavigasi ke halaman seterusnya repositori, tetapi ia tidak mempunyai sistem penomboran penuh. Pengguna tidak dapat menavigasi ke sana ke mari dengan mudah antara halaman atau melompat ke halaman tertentu, yang menimbulkan isu kebolehgunaan. Saya menyedari pengehadan ini dan meminta penyelenggara projek untuk menyerahkan isu tersebut kepada saya.

Semasa saya mengusahakan projek itu, satu aspek yang menonjol (dan tidak dengan cara yang baik) ialah cara pangkalan kod distrukturkan. Projek ini mempunyai semua logik yang ditulis ke dalam satu fail script.js, yang boleh menjadi sukar untuk diselenggara apabila projek itu berkembang. Walaupun saya tidak mahu membuat perubahan besar dalam PR ini—memandangkan ia hanya memfokuskan pada butang penomboran—saya bercadang untuk mencadangkan pemfaktoran semula struktur kod dalam keluaran akan datang.

Sebenarnya, sebelum itu ada pembangun lain yang mencipta butang yang menavigasi ke halaman seterusnya, tetapi ia tidak bagus untuk pengalaman Pengguna apabila mereka ingin menavigasi ke sana ke mari, serta halaman tertentu. Atas sebab ini, saya mengulas untuk meminta penyelenggara memberikan isu ini untuk saya.
Semasa saya menjalankan projek ini, ada satu perkara yang saya tidak suka mengenainya. Ia adalah cara penyelenggara menyusun asas kodnya semasa dia menulis setiap logik ke dalam hanya 1 fail script.js. Walau bagaimanapun, saya tidak mahu mempunyai banyak pembetulan dalam isu ini kerana ia hanya meminta butang penomboran. Saya akan mencipta isu baharu yang meminta untuk menstruktur semula pangkalan kod kemudian.

Ciri Baharu: Penomboran Dipertingkat

Fungsi sedia ada hanya mempunyai satu butang untuk menavigasi antara halaman, dengan 10 repositori dipaparkan setiap halaman. Matlamat saya adalah untuk melaksanakan sistem penomboran yang lebih mesra pengguna dengan butang halaman "Sebelumnya," "Seterusnya," dan bernombor. Ini akan membolehkan pengguna melompat terus ke halaman yang mereka minati, menjadikan pengalaman navigasi lebih lancar.

Perlaksanaan

Kekangan API GitHub:

Semasa melaksanakan penomboran, saya menghadapi had dengan API GitHub, yang mengehadkan hasil kepada 1,000 item. Jika carian menghasilkan lebih daripada 1,000 repositori, percubaan untuk menavigasi melebihi had ini mengakibatkan ralat, mengembalikan data yang tidak ditentukan. Memandangkan reka bentuk memaparkan 10 repositori setiap halaman, saya mengehadkan bilangan halaman pada 100 untuk mengelak daripada terkena isu ini.

Perubahan Kod:

  • Saya memperkenalkan

    bahagian dalam script.js untuk penomboran. Ini membolehkan saya menambah beberapa gaya CSS untuk meningkatkan estetika butang dan pengalaman pengguna.

  • Logik teras untuk penomboran terkandung dalam dua fungsi baharu:

    • createButton()
    • renderPagination() Fungsi ini menjana butang penomboran secara dinamik berdasarkan halaman yang tersedia dan gaya yang digunakan untuk melumpuhkan butang halaman semasa, menghalang pengguna daripada mengklik semula secara tidak sengaja. Saya turut menambah kesan tuding pada butang untuk rupa yang lebih berkilau.

Penambahbaikan CSS:

Untuk reka bentuk penomboran, saya memastikan butang halaman semasa dilumpuhkan dan digayakan secara berbeza untuk menunjukkan keadaannya. Butang halaman lain menerima kesan tuding untuk meningkatkan interaktiviti dan meningkatkan pengalaman pengguna.

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!

Atas ialah kandungan terperinci Minggu Hacktoberfest Menyelam Lebih Dalam kepada Sumbangan Kod. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan