Name: clarke-fc-github-card-gavimena
Owner: Adalab
Description: clarke-fc-github-card-gavimena created by GitHub Classroom
Created: 2018-04-17 16:57:14.0
Updated: 2018-05-03 10:21:17.0
Pushed: 2018-05-03 10:21:15.0
Homepage: https://adalab.github.io/clarke-fc-github-card-gavimena
Size: 86
Language: JavaScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
clarke-fc-github-card-gavimena created by GitHub Classroom
Ya somos unas cuantas en Adalab, ¿no sería genial tener un pequeño directorio donde buscarnos? Pues nos lo vamos a hacer, claro que sí!
Tiraremos de la API de GitHub para conseguir la url a la que debemos pedir la lista de miembros de la organización Adalab, con esos datos crearemos un select con los nombres de usuario. Al seleccionar uno de ellos, pediremos sus datos y los mostraremos en una pequeña card.
Un esquema del funcionamiento
Qué acciones necesitaremos realizar y pasos concretos para realizarlas
Qué acciones son de ejecución obligatoria y cuales responderán a eventos
Esta vez no os daremos la dirección, tendréis que buscarla en la documentación de la API de GitHubç
La prioridad 1 es que funcione
La prioridad 2 es acercarse lo más posible al aspecto propuesto en el prototipo
El dato de “Miembro desde hace X años/meses” ES OPCIONAL. Si ya has terminado todo se trata de indicar cuánto tiempo lleva dicho usuario siendo miembro de Github
Necesitarás instalar Node.js y Gulp para trabajar con este Starter Kit, luego:
$ npm install
$ gulp
Solo una vez al principio en cada ordenador que utilicemos:
- Instalamos node
- Instalamos el comando de gulp de forma global para poder usarlo desde cualquier carpeta usando
npm install --global gulp-cli
Cada vez que descarguemos o clonemos un repo:
npm install
para instalar los paquetes necesarios para convertir Sass a CSS, minificarlo, etc.Cada vez que estemos trabajando con nuestro código:
- Desde nuestra terminal, ejecutamos el comando
gulp
para que realice la tarea por defecto, que en el caso delgulpfile.js
que tenemos en adalab-web-starter-kit estará pendiente de nuestros archivos Sass, html y JavaScript y los compilará, minificará y/o recargará el servidor cada vez que hagamos un cambio
lp
Lanza un webserver con BrowserSync y varios watchers estarán pendientes de los archivos SCSS/JS/HTML para recargar el navegador cuando se necesite.
lp deploy
Genera los CSS y JS minimizados y sin sourcemaps, listos para subir a producción.
Nuestro gulpfile.js usa un JSON de configuración con las rutas de los archivos a generar/vigilar.
La estructura de carpetas tiene esta pinta:
ss
mages
s
css
- core
- layout
- components
- pages
Viene incluído el paquete gulp-combine-mq que agrupa todas las medaqueries al final del documento css.
En el JSON de configuración especificamos los archivos JS que utilizamos y en el orden que deben procesarse.
Echas de menos que el kit haga algo en concreto? Pidelo sin problema a través de los Issues o si te animas a mejorarlo mándanos un PR :)