Sentarme junto a pacientes en cuidados paliativos en Altamonte Springs, Florida, en sus últimos momentos cambió profundamente mi perspectiva sobre la vida cuando tenía 23 años. Durante mi entrenamiento, hicimos un ejercicio en el que escribimos nuestras listas de deseos y las compartimos en voz alta. A medida que avanzábamos por la habitación, me di cuenta de que, ya sea que tengas 25 o 95 años, todos tenemos sueños que anhelamos cumplir antes de que se acabe nuestro tiempo.

Mi lista de deseos de 2017, cuando era voluntario en Hospice of the Comforter en Altamonte Springs, Florida.

En esos espacios tranquilos sosteniendo las manos de los moribundos, presencié el despertar de esperanzas olvidadas y arrepentimientos sobre caminos no tomados. Quedó claro lo precioso que es cada momento y cuán crucial es vivir de manera deliberada.

Después de preguntar a amigos y desconocidos qué quieren hacer antes de morir, me sorprendió la diversidad y profundidad de sus respuestas. Algunos querían enamorarse❤️, otros presenciar un glaciar🧊. Muchos deseaban reconectar con su familia distanciada, visitar un lugar exótico o participar en un deporte extremo. Sus respuestas estaban llenas de significado y pasión.

Viajé por todos los continentes, con mi teléfono en mano, recolectando estas historias. Desde las costas de Alaska hasta Nueva Zelanda y en el camino. Documenté a personas compartiendo cuidadosamente sus objetivos de vida definitivos. Jóvenes y viejos, ricos y pobres, todos tenemos sueños que llevamos.

Esta experiencia me mostró el poder de reflexionar profundamente sobre la pregunta: ¿Qué es lo que más importa? Une nuestra humanidad compartida. Todos queremos amar, crear, conectar, explorar y dejar una marca positiva en este mundo.

Foto de Megan Bucknall en Unsplash

Creé el proyecto de código abierto Before I Die Code para inspirar a otros a identificar su propósito. Es un lugar para compartir tus sueños junto con tu primera contribución al código abierto. Porque la vida no está destinada a vivirse pasivamente, sino a vivirse con intención. Descubramos nuestras metas más significativas... antes de morir.

Me emociona compartir Before I Die Code, un proyecto de código abierto que ayuda a los desarrolladores a contribuir al código abierto mientras reflexionan sobre sus metas y sueños de vida.

➡️ BEFORE I DIE GitHub Repo

La idea detrás de Before I Die Code es simple pero poderosa: los desarrolladores comparten una imagen y un texto que describe lo que quieren lograr en la vida antes de morir.

• Reflexionar profundamente sobre tus objetivos, sueños y elementos de tu lista de deseos

• Identificar lo que más te importa y el legado que deseas dejar

• Compartir abiertamente tus aspiraciones con el mundo

• Conectar de manera más profunda con otros desarrolladores a través de sueños compartidos

• ¡Hacer tu primera contribución al código abierto de una manera personal y significativa!

Before I Die, Code está diseñado intencionalmente para ser amigable para principiantes. Lo construí para proporcionar una entrada fácil a aquellos que buscan comenzar en el código abierto.

• Pautas de contribución paso a paso para guiarte en la realización de tu primera solicitud de extracción (pull request).

• Comentarios claros y detallados en el código que explican la configuración del servidor de desarrollo de React, la edición del archivo Contributors.json, la adición de imágenes y la edición del archivo CONTRIBUTORS.md.

• Una comunidad acogedora y solidaria de entusiastas del código abierto.

Es el espacio perfecto para aprender el flujo de trabajo de las solicitudes de extracción, mejorar tus habilidades de programación, conectarte con otros y definir tu propósito de vida.

Contribuir es sencillo:

1. Haz un fork del repositorio en GitHub

2. Sigue las pautas de contribución para añadir tu objetivo "Antes de Morir", incluyendo una imagen y un texto de descripción.

3. Abre una solicitud de extracción para enviar tu contribución.

4. Comentarios adicionales, reportes de errores 🪲 y nuevas ideas 💡 son bienvenidos.

El proyecto Before I Die Code está construido con React, JavaScript, HTML, and CSS, y actualmente está implementado en Vercel. Sin embargo, la tecnología cambiará con la implementación, ya que tengo planeado postular este proyecto de código abierto para que sea destacado en la página d exploración de GitHub. Para ello, el proyecto deberá utilizar páginas de GitHub.

Se me ocurrió esta idea mientras aprendía a contribuir de manera independiente en proyectos de código abierto. Los principales repositorios recomendados para principiantes consisten en actualizar el archivo markdown con su información de GitHub, lo cual es útil para entender el flujo de trabajo de cómo contribuir y completar una solicitud de extracción. Sin embargo, yo quería ver un proyecto que demostrara dónde los nuevos colaboradores tuvieran que reflexionar por sí mismos sobre lo que es importante para ellos y compartir ese aspecto. Compartir esto públicamente hará que las personas sientan más significado y apego para continuar desarrollando la base de código, la pila tecnológica y la expansión de cómo este proyecto puede evolucionar y crecer con el tiempo.

El inicio de este proyecto se lo debo al usuario de GitHub Arash quien compartió y construyó una Galería de Medios con Tema de React que utilicé como punto de partida para construir la primera versión de Before I Die Code. Hice esto porque no pude encontrar la galería de fotos exacta que quería para este proyecto sin instalar bibliotecas adicionales de React, y en la fase inicial de este proyecto, intenté limitar el uso de bibliotecas por cuestiones de tamaño y para comprender mejor las capacidades de CSS y React JSX por sí mismas. Arash hizo un excelente trabajo construyendo una Galería de Medios que pude entender cómo operar y personalizar para este proyecto.

La mayoría de mi investigación y las adiciones de bloques de código específicos provinieron del uso de Perplexity.ai, un motor de búsqueda impulsado por inteligencia artificial y una herramienta de descubrimiento de información. Por ejemplo, esto me llevó a configurar y utilizar el bloque de código en mi componente MasonryLayout.jsx (ubicado en src/Components/MasonryLayout/MasonryLayout.jsx del proyecto) para aleatorizar las imágenes de los colaboradores cada vez que un usuario vea o actualice la página web.

// import styles of this component
import styles from "./MasonryLayout.module.css";

// import other react pkg to use
import Masonry from "react-masonry-css";

// import other component to use
import MasonryBox from "./MasonryBox/MasonryBox";

import useIPInfo from "../../hooks/useIPInfo";

// Import a function utils to shuffle an array
import { shuffleArray } from "../../utils/shuffle";

// MasonryLayout Component
const MasonryLayout = ({ users }) => {
  const breakpointColumnsObj = {
    default: 3,
    1100: 2,
    700: 1,
  };

  const ipObj = useIPInfo();

  // Shuffle the users array
  let shuffledUsers = users
  shuffleArray(shuffledUsers)

  return (
    <Masonry
      breakpointCols={breakpointColumnsObj}
      className={styles["masonry-grid"]}
      columnClassName={styles["masonry-grid_column"]}
    >
      {shuffledUsers.map((item) => (
        <MasonryBox
          key={item.id}
          wallSrc={item.image}
          userProf={item.avatar}
          userName={item.name}
          userLocation={item.location}
          githubUrl={item.GitHub}
          userText={item.text}
          ipObj={ipObj}
        />
      ))}
    </Masonry>
  );
};

export default MasonryLayout;

• Importé los estilos, la biblioteca React Masonry y el componente MasonryBox que necesitaba para mi componente MasonryLayout. También definí la función del componente MasonryLayout.

• Dentro de mi componente, especifico puntos de interrupción para el diseño de columnas en diferentes tamaños de pantalla en un objeto breakpointColumnsObj. Mezclo aleatoriamente el array de imágenes para que los elementos se muestren en un orden variado.

• Hago un mapeo sobre el array de imágenes mezclado para renderizar componentes individuales de MasonryBox para cada imagen que se pasa. El componente MasonryLayout devuelve el propio diseño de cuadrícula de Masonry.

• Al devolver el diseño, pasé las columnas de puntos de interrupción que definí, las clases de estilo y los componentes MasonryBox mapeados. Esto renderiza una cuadrícula de mosaico de imágenes receptiva que muestra los elementos de imagen mezclados en componentes Masonry Box.

La ayuda adicional y los recursos provinieron de estudiar otros proyectos de código abierto y los repositorios de desarrolladores. Por ejemplo, mientras buscaba en GitHub, encontré al desarrollador de frontend, desarrollador de código abierto y escritor técnico Victor Eke. De los muchos proyectos de código abierto en los que ha colaborado y creado, utilicé su repositorio Portfolio Ideas para obtener ideas sobre la estructura de la documentación y, además, leí su artículo de blog “How my open source project got 1000 stars on GitHub in 4 months” sobre lo que hizo para superar las 1,000 estrellas en su proyecto de código abierto. También estudié uno de los repositorios first-contributions repositories más populares (que tiene más de 37,000 estrellas) por la excelente estructura de la documentación. Y por último, para añadir más interés visual a la documentación que se encuentra en todo el Before I Die Code, utilicé el proyecto de código abierto Animated Fluent Emojis creado por Tarikul Islam Anik.

El proyecto está construido con el framework React y estructurado con un directorio público (public) y un directorio de código fuente (src). La estructura de carpetas de este proyecto se abrió en mi Visual Studio Code.

Estructura de archivos de Before I Die Code

• public/img/avatar — se creó una carpeta de imágenes para almacenar las fotos de GitHub de los colaboradores.

• public/img/bid_image — se creó una carpeta de imágenes para almacenar la imagen de "Before I Die" de los colaboradores. La imagen representa lo que un colaborador quiere hacer antes de morir.

• public/img/dummy-image — se creó una carpeta de imágenes para almacenar las nueve imágenes principales que se muestran en la parte superior del sitio web para que todos los usuarios las vean.

• src/Components — Personalicé el CSS y JSX para cada componente que se menciona en la lista: BrickLayout, ContainerCard, Elements, Header, MasoaryLayout y Nav. Utilicé React, una biblioteca de JavaScript, para construir interfaces de usuario. Me permite dividir la interfaz de usuario en componentes pequeños y reutilizables. React utiliza un DOM virtual y un algoritmo de actualización eficiente para hacer que las actualizaciones sean más rápidas y eficientes. Me gusta que React siga un enfoque de programación declarativa. Como desarrollador, esto me permite centrarme en cómo debe verse la interfaz de usuario en lugar de las instrucciones paso a paso para lograr ese aspecto.

• src/Jsons/Contributors.json — Necesitaba crear una forma sencilla para que los colaboradores agregaran su información en una plantilla JSON predefinida. Estos datos JSON representan un array de objetos, donde cada objeto contiene información sobre el identificador de una persona, las URL de las imágenes, el nombre, la ubicación, el perfil de GitHub y el texto que describe lo que quieren hacer antes de morir. Los datos proporcionan

• Los archivos restantes dentro del proyecto React dentro del directorio src solo tuvieron cambios menores que hice.

• CODE_OF_CONDUCT.md — Necesitaba crear la primera versión del código de conducta que todos los proyectos exitosos de código abierto tienen. En este caso, mi código de conducta se basa en la estructura de Mozilla para hacer cumplir el código de conducta.

• CONTRIBUTION-GUIDELINES.md — Necesitaba crear instrucciones para explicar a los nuevos colaboradores cómo realizar los pasos y el flujo de trabajo correctos para agregar su información a este proyecto de código abierto. Para ello, tuve que aprender soluciones rápidas para incluir videos en mi archivo markdown para ayudar con mi explicación de los pasos y asegurarme de que los colaboradores se sientan capacitados para seguir contribuyendo después de su primera solicitud de extracción.

• CONTRIBUTORS.md — Todos los proyectos exitosos de código abierto promueven y muestran aprecio a todas las personas que han colaborado en sus proyectos. Ese es el propósito de este archivo. Muestra las imágenes de los colaboradores y los enlaces a sus perfiles de GitHub.

• README.md — Necesitaba asegurarme de que mi archivo README estuviera bien organizado al declarar el propósito de este proyecto, para quién proporciona valor y ayudar a presentar a los nuevos colaboradores de manera organizada y cómo contribuir al proyecto. Como se mencionó antes, mis archivos Markdown utilizan películas animadas para ayudar con la documentación creativa de este proyecto.

• ROADMAP.md — Por último, agregué una hoja de ruta de las direcciones potenciales para este proyecto. Esta es la primera versión de una lista de ideas que vinieron a mi mente, y espero que la comunidad de código abierto la amplíe, la perfeccione y la refina para crear problemas abiertos y trabajar en nuevas características, y continuar el crecimiento de este proyecto.

Esto encaja perfectamente en las ideas actuales que he descrito en la ROADMAP.md de este proyecto y cómo este proyecto puede seguir creciendo con la comunidad. Las personas pueden aportar sus habilidades existentes y aplicar nuevas habilidades para mejorar aún más este proyecto. La tecnología cambiará constantemente, pero el deseo humano de lograr momentos significativos en la vida antes de morir siempre existirá. Mi primer objetivo es que 100 personas contribuyan al proyecto compartiendo sus contribuciones de "Before I Die". Al leer la hoja de ruta, encontrarás muchas ideas para mejorar el proyecto con nuevas pilas tecnológicas, incorporar IA o API adicionales, adaptar el proyecto para la capacidad de respuesta según el tamaño de pantalla, mejorar la interfaz de usuario, usar Python para analizar lo que las personas quieren hacer antes de morir y seguir haciendo de este proyecto el principal proyecto de código abierto al que los nuevos desarrolladores pueden contribuir para aprender y desarrollar el flujo de trabajo para contribuir a proyectos de código abierto.

Hoja de ruta actual de ROADMAP.MD para Before I Die Code a partir del 17 de agosto de 2023

Tus contribuciones aportan perspectivas diversas que hacen que el proyecto sea realmente espectacular. ¡Me encantaría que compartieras tus sueños más salvajes!

Más allá del proyecto, contribuir a Before I Die Code te conecta con la apasionada comunidad de código abierto. Aprendamos juntos, colaboremos en el código y realicemos contribuciones significativas de código abierto, tanto para el software como para nuestras vidas.

¡Por favor, comparte tus pensamientos y comentarios! Echa un vistazo al proyecto, marca ⭐️ el repositorio en GitHub y realiza tu primera solicitud de extracción hoy mismo. Gracias por tomarte el tiempo para leer mi artículo.

1. BeforeIDieAchievements 🌟

2. README.md 📚

3. CONTRIBUTION-GUIDELINES.md 🤝

4. ROADMAP.md 🗺️

• MEDIUM 📝

• LINKEDIN 💼

• GITHUB 🐙

• YOUTUBE 🎥

• Sitio Web 🌐