Para alguien que está intentando entrar en el desarrollo de software, no importa dónde busques — LinkedIn, tableros de asesoramiento profesional, tutoriales de YouTube — los consejos siempre son los mismos: necesitas un portafolio. freeCodeCamp conoce este consejo, y hacen que sea obligatorio crear uno para terminar su Certificación de "Diseño Web Responsivo".
El portafolio debe ser un documento con vida. Terminas un proyecto, agregas ese proyecto a tu portafolio para enseñárselo al mundo. Añades cosas constantemente, demostrando tu trayectoria de crecimiento personal. Se lo das a potenciales reclutadores y gestores de contratación para añadir dimensión a tú resume.
De los cinco proyectos para conseguir esa certificación, he puesto sin lugar a dudas la mayor parte del trabajo en mi portafolio. Si iba a ser mi primera impresión digital, quería asegurarme de que fuera la mejor que pudiera hacer.
El método de facto para completar proyectos en freeCodeCamp es usar codepen.io. La versión gratis te deja hacer código en panel HTML, CSS y JavaScript, y ver los cambios según los escribes en la ventana. Puedes abrir la página en ventana completa, lo que elimina los paneles HTML, CSS y JavaScript, pero deja un cartel negro en la parte superior. La URL es un "hash", algo como https://codepen.io/cam-barts/full/ZPWpqo, lo que no es memorable, no da ninguna indicación sobre contenido de la dirección, y en mi opinión no impresiona en un resume.
Además, a no ser que pagues por una afiliación con CodePen, no puedes cambiarlo.
Al mismo tiempo que estaba terminando mi proyecto, las estrellas se alinearon y descubrí dos tecnologías que ayudarían a mi portafolio a sobresalir: GitHub Pages y Google Lighthouse.
Github Pages te permite alojar una página web directamente desde un repositorio GitHub. Te ofrece un URL github.io bastante profesional que despertó mi interés para ponerlo en un resume. También me permite controlar por completo lo que mis usuarios pudieran ver cuando ellos naveguen a la página, y no tendría que lidiar con alojamiento propio o pagar por algún otro servicio de alojamiento.
Escuché sobre Google Lighthouse en el Podcast de CodeNewbie con Frances Coronel. Google Lighthouse inspecciona tu página web directamente desde Chrome DevTools en cinco áreas: Rendimiento, Aplicación Web Progresiva, Accesibilidad, Mejores Prácticas y SEO. SEO, u Optimización de Motor de Búsqueda, ayuda a que tu página suba a lo alto de los motores de búsqueda como Google, lo que ayuda a que te encuentren. También, ahora que iba a alojar mi página en Pages, quería asumir la responsabilidad del rendimiento de mi página, y para hacerlo de manera eficiente necesitaba un punto de referencia.
Mi meta al escribir este artículo es ayudarte a crear un sitio de portafolio que se vea profesional y que sea rápido sin costo alguno para tí. Quiero que estés orgulloso en publicarlo en LinkedIn y enlistarlo como el primero en tú resume. Eso por eso que vamos a utilizar GitHub Pages y Google Lighthouse.
Antes de ir más lejos, he hecho algunas suposiciones. La primera es que tienes una cuenta GitHub. Si no tienes una ya, crear una es fácil. La segunda es que tienes un conocimiento básico de git. Si eres nuevo, hay muchos artículos excelentes sobre como dar el primer paso. Este artículo presupone que hayas completado tu portafolio en CodePen. Finalmente, deberías tener Google Chrome instalado.
Este artículo sigue mi portafolio personal. Puedes encontrar el pen aquí, el código aquí y el producto final está en cam-barts.github.io.
Primeros pasos
Montar tu página con GitHub Pages es bastante directo. La versión corta es:
- Crea un Repositorio siguiendo la convención de denominación [Usuario de GitHub].github.io
- Clonar localmente
- Crear los archivos index.html, style.css, script.js dentro del repositorio.
- Añadir código a esos archivos
- Commit y push a GitHub
- ¡Listo!
Creas un repositorio con un título que siga la convención [Tu Usuario de GitHub].github.io. Aquí está el mío: cam-barts.github.io. Cualquier código que subas con push a ese repositorio se mostrará cuando navegues a esa página.
¿Así que, cuando hayas clonado el repositorio localmente, exactamente qué le pones?
Deberías empezar con estos tres archivos, un archivo index.html, un archivo style.css y un archivo script.js. En el editor que más te guste (yo uso Atom), deberías empezar con el siguiente fragmento de código en tu index.html:
Aquí hay bastantes cosas con las que quizás no estés familiarizado si solo has estado trabajando con codepen.io.
El atributo dir en la etiqueta HTML indica que el documento debería ser leído de derecha a izquierda (Left To Right ). Eso simplemente se asegura de que cuando tu página se muestre, todos los elementos estén justificados a la izquierda, que es como normalmente se lee.
Las etiquetas meta en el head indican los metadatos de la página, lo que ayuda a los motores de búsqueda como a Google a indexar tu página.
Llegados a este punto, deberías rellenar las etiquetas de meta y title. Atento a que el contenido de la etiqueta meta keywords debe estar separado por comas, y debe incluir términos que quieras que la gente use para encontrar tu portafolio en Google.
El siguiente paso es copiar la sección HTML de tu portafolio pen en la sección de body de tu fragmento. Una vez completado, si has vinculado cualquier CSS o JS externos en la configuración de tu pen, como Bootstrap o Font Awesome, tienes que vincularlos en tu index.html.
Crea más etiquetas link para CSS y etiquetas script para JavaScript y añade los vínculos que estén en la configuración a los atributos href y src, respectivamente. Para asegurarte de que tus estilos y scripts se muestren, asegúrate de ponerlos antes de las etiquetas de cierre de link y script del fragmento. Por ejemplo, vincular Boostrap a JQuery se vería así:
Luego, tienes que añadir tu propio CSS a tu style.css, y si tienes algún JavaScript, añade ese a tu script.js.
Después de eso, estás listo para hacer un commit a todo tu trabajo y subirlo a GitHub con push. ¡Inmediatamente después de hacer eso, puedes navegar a [Tu Usuario GitHub].github.io y echarle un vistazo a tu página!
Optimizar la página de tu portafolio
¡Enhorabuena por publicar tu portafolio!
Los siguientes pasos implican optimizar tu página. Para ello, vamos a usar Google Lighthouse. Es mejor hacer esto en una ventana Privada de Navegador para que cualquier cache o extensión de Chrome que puedas tener no afecte al resultado. Cuando navegues por tu página, abre las Herramientas de Desarrollador Chrome (Ctrl + Shift+ i) y haz clic en la pestaña de Audits.
Las Aplicaciones Progresivas Web están fuera del alcance de este tutorial, pero hacer todas las inspecciones no hace daño. Cuando las ejecutes, deberías tener una página que se parece a esta:
Lo mejor de estos informes es que te da “Oportunidades” para mejorar tus puntuaciones.
En la sección de rendimiento, te dice que uses formatos de archivo de próxima generación como WebP frente a imágenes .PNG tradicionales, y sugiere cargar las imágenes con lazy loading.
En la sección de SEO, sugiere mejoras SEO como añadir una etiqueta meta de descripción y usar tamaños de font legibles. No solo nos da sugerencias, vincula a artículos con ejemplos prácticos y cosas que cambiar en tu código para optimizar esas áreas.
A mí, me llevó solo una hora para subir la puntuación de mi página a 90 y tantos para Rendimiento, Accesibilidad, Mejores Prácticas y SEO. Puedes ver todos los cambios que hice aquí.
Llendo más lejos
Tú decides los siguientes pasos para tu página. Podrías vincularlo a Google Analytics para ver cuantas visitas está teniendo tu portafolio. Podrías añadir secciones para tus premios y para mostrar tus certificaciones de freeCodeCamp según las vayas consiguiendo. ¡La evolución de tu página está completamente en tus manos!
Traducido del artículo de Cam Barts - Boost your Developer Portfolio with GitHub Pages and Lighthouse