¡Saludos a todos! ¿Cómo te va el Hacktoberfest este año? Personalmente, lo estoy disfrutando mucho hasta ahora. Ahora hemos entrado en la segunda semana de octubre, lo que significa que es hora de realizar mi segunda solicitud de extracción (PR) de las cuatro necesarias para completar el desafío. Esta semana, decidí esforzarme un poco más y contribuir al código base de un proyecto en lugar de centrarme únicamente en la documentación, como hice en la Semana 1.

Resumen de la semana 1

En mi primer PR de Hacktoberfest, trabajé para mejorar la documentación del proyecto. Como principiante, quería iniciarme en el proceso con tareas más pequeñas y manejables. Sin embargo, para esta segunda semana, decidí abordar algo más técnico: contribuir al proyecto GitExplorer.

Descripción general del proyecto: GitExplorer

GitExplorer es una aplicación web que simplifica el descubrimiento y la exploración de los principales repositorios de GitHub. Permite a los usuarios filtrar repositorios según lenguajes de programación, temas y otros criterios de clasificación. Si bien la interfaz de usuario aún está en desarrollo, el proyecto ofrece una valiosa oportunidad de aprendizaje para los contribuyentes, especialmente los principiantes. Muchos de los números del repositorio están etiquetados como "buen primer número", lo que lo convierte en un excelente lugar para comenzar.

Para mi contribución, elegí implementar una función de navegación que mejora la experiencia del usuario al explorar repositorios.

Identificar el problema

El proyecto inicialmente tenía un botón para navegar a la siguiente página de repositorios, pero carecía de un sistema de paginación completo. Los usuarios no podían navegar fácilmente entre páginas o saltar a una página específica, lo que planteaba problemas de usabilidad. Noté esta limitación y solicité al responsable del proyecto que me asignara el problema.

Durante el tiempo que trabajé en el proyecto, un aspecto que se destacó (y no en el buen sentido) fue la forma en que estaba estructurado el código base. El proyecto tenía toda la lógica escrita en un único archivo script.js, lo que podría resultar difícil de mantener a medida que el proyecto crezca. Si bien no quería hacer cambios importantes en este PR, ya que se centró solo en los botones de paginación, planeo sugerir refactorizar la estructura del código en una edición futura.

En realidad, antes de eso, hubo otro desarrollador que creó un botón que navega a la página siguiente, pero no es bueno para la experiencia del usuario cuando quiere navegar hacia adelante y hacia atrás, ni tampoco a una página específica. Por este motivo, comenté para pedirle al mantenedor que me asignara este problema.
Cuando estuve trabajando en este proyecto, hay una cosa que no me gustó. Es la forma en que el mantenedor estructura su código base mientras escribía cada lógica en un solo archivo script.js. Sin embargo, no quiero solucionar mucho este problema porque solo solicita botones de paginación. Crearé un nuevo problema solicitando reestructurar la base del código más adelante.

Nueva característica: paginación mejorada

La funcionalidad existente tenía solo un botón para navegar entre páginas, con 10 repositorios mostrados por página. Mi objetivo era implementar un sistema de paginación más fácil de usar con botones de página "Anterior", "Siguiente" y numerados. Esto permitiría a los usuarios ir directamente a la página que les interesa, lo que facilitaría la experiencia de navegación.

Implementación

Restricciones de la API de GitHub:

Al implementar la paginación, encontré una limitación con la API de GitHub, que restringe los resultados a 1000 elementos. Si una búsqueda arroja más de 1000 repositorios, intentar navegar más allá de este límite genera un error y devuelve datos indefinidos. Dado que el diseño muestra 10 repositorios por página, limité el número de páginas a 100 para evitar este problema.

Cambios de código:

• Introduje una nueva sección

  en script.js para paginación. Esto me permitió agregar algunos estilos CSS para mejorar la estética del botón y la experiencia del usuario.

• La lógica central de la paginación se encapsuló en dos nuevas funciones:

  • crearBotón()
  • renderPaginación() Estas funciones generaron dinámicamente los botones de paginación según las páginas disponibles y aplicaron estilos para deshabilitar el botón de la página actual, evitando que los usuarios vuelvan a hacer clic en él accidentalmente. También agregué efectos de desplazamiento a los botones para una apariencia más refinada.

Mejoras de CSS:

Para el diseño de la paginación, me aseguré de que el botón de la página actual esté deshabilitado y tenga un estilo diferente para indicar su estado. Otros botones de página recibieron efectos de desplazamiento para mejorar la interactividad y la experiencia del usuario.

Conclusión

Esto concluye mi contribución para la Semana 2 del Hacktoberfest. Ahora estoy buscando otro repositorio al que contribuir la próxima semana. Idealmente, me gustaría encontrar un proyecto que sea un poco más desafiante, para poder seguir esforzándome y mejorar mis habilidades progresivamente.

¡Gracias por leer y espero poder compartir más sobre mi viaje al Hacktoberfest!