Привет всем! Как для вас проходит Хактоберфест в этом году? Лично мне пока это очень нравится. Наступила вторая неделя октября, а это значит, что пришло время моего второго запроса на включение (PR) из четырех, необходимых для выполнения задачи. На этой неделе я решил пойти дальше и внести свой вклад в кодовую базу проекта, а не сосредотачиваться исключительно на документации, как я это делал на первой неделе.

Итог первой недели

В своем первом пиаре Хактоберфеста я работал над улучшением проектной документации. Будучи новичком, я хотел облегчить процесс с помощью небольших, выполнимых задач. Однако на второй неделе я решил заняться чем-то более техническим: внести свой вклад в проект GitExplorer.

Обзор проекта: GitExplorer

GitExplorer — это веб-приложение, которое упрощает поиск и исследование лучших репозиториев GitHub. Он позволяет пользователям фильтровать репозитории по языкам программирования, темам и другим критериям сортировки. Хотя пользовательский интерфейс все еще находится в стадии разработки, проект предлагает участникам, особенно новичкам, ценную возможность обучения. Многие проблемы в репозитории помечены как «хорошая первая проблема», что делает его отличным местом для начала.

В качестве своего вклада я решил реализовать функцию навигации, которая улучшает взаимодействие с пользователем при просмотре репозиториев.

Выявление проблемы

Изначально в проекте была кнопка перехода на следующую страницу репозиториев, но в нем отсутствовала полноценная система пагинации. Пользователи не могли легко перемещаться между страницами вперед и назад или переходить на определенную страницу, что создавало проблемы с удобством использования. Я заметил это ограничение и попросил сопровождающего проекта передать проблему мне.

Во время моей работы над проектом один аспект, который выделялся (и не в хорошем смысле), заключался в том, как была структурирована кодовая база. Вся логика проекта была записана в один файл script.js, который по мере роста проекта могло стать затруднительным в обслуживании. Хотя я не хотел вносить серьезные изменения в этот PR, поскольку он сосредоточен только на кнопках нумерации страниц, я планирую предложить рефакторинг структуры кода в будущем выпуске.

На самом деле, до этого был другой разработчик, который создал кнопку для перехода на следующую страницу, но это не очень хорошо для пользователей, когда они хотят перемещаться вперед и назад, а также по конкретной странице. По этой причине я прокомментировал, чтобы попросить сопровождающего поручить мне эту проблему.
В то время, когда я работал над этим проектом, есть одна вещь, которая мне в нем не понравилась. Именно так мейнтейнер структурирует свою базу кода, поскольку он записывает каждую логику только в один файл script.js. Однако я не хочу сильно исправлять эту проблему, потому что она запрашивает только кнопки нумерации страниц. Позже я создам новую задачу с просьбой реструктурировать базу кода.

Новая функция: улучшенная нумерация страниц

Существующий функционал имел только одну кнопку для перехода между страницами, при этом на каждой странице отображалось 10 репозиториев. Моей целью было реализовать более удобную для пользователя систему нумерации страниц с кнопками «Предыдущий», «Следующий» и пронумерованными страницами. Это позволит пользователям напрямую переходить на интересующую их страницу, что сделает навигацию более плавной.

Выполнение

Ограничения API GitHub:

При реализации нумерации страниц я столкнулся с ограничением API GitHub, которое ограничивает результаты до 1000 элементов. Если поиск дает более 1000 репозиториев, попытка выйти за пределы этого предела приводит к ошибке и возврату неопределенных данных. Учитывая, что дизайн отображает 10 репозиториев на странице, я ограничил количество страниц до 100, чтобы избежать этой проблемы.

Изменения кода:

• Я представил новый раздел

  в script.js для нумерации страниц. Это позволило мне добавить несколько стилей CSS, чтобы улучшить внешний вид кнопок и удобство использования.

• Основная логика нумерации страниц была инкапсулирована в две новые функции:

  • createButton()
  • рендеринг разбивки() Эти функции динамически генерировали кнопки пагинации на основе доступных страниц и применяли стили для отключения кнопки текущей страницы, предотвращая случайное повторное нажатие пользователями на нее. Я также добавил к кнопкам эффекты при наведении, чтобы они выглядели более изысканно.

Улучшения CSS:

Для дизайна нумерации страниц я позаботился о том, чтобы кнопка текущей страницы была отключена и ей был присвоен другой стиль, чтобы указать ее состояние. Другие кнопки страниц получили эффекты наведения для повышения интерактивности и удобства пользователей.

Заключение

На этом завершается мой вклад во вторую неделю Хактоберфеста. Сейчас я ищу еще один репозиторий, в который можно внести свой вклад на следующей неделе. В идеале мне хотелось бы найти проект посложнее, чтобы я мог продолжать работать над собой и постепенно совершенствовать свои навыки.

Спасибо, что прочитали, и я с нетерпением жду возможности рассказать больше о моем путешествии на Хактоберфест!