javascriptecuador / web Goto Github PK
View Code? Open in Web Editor NEWPágina web de la comunidad de JavaScript Ecuador
Home Page: https://javascript.ec
License: MIT License
Página web de la comunidad de JavaScript Ecuador
Home Page: https://javascript.ec
License: MIT License
Agregar una tabla de contenidos con Markdown que redireccione a cada uno de los temas en CONTRIBUTING.md.
Esto facilitara el seguimiento de la guia para contribuir.
Tarea a realizar: Agregar responsive a sección ¿Cómo ayudar?
Descripción: Se agregó responsive en la sección ¿Cómo ayudar?
¿Por qué se realizara?
Para pantallas pequeñas las descripciones de las cajas se deformaban
Recomendaciones:
En el siguiente link puedes el prototipo en Figma para ver los colores y tamaños de cada item
https://www.figma.com/file/w2VP8mKwNivTOGqsdvGMVe/Prototipo-Web-Ecuador.js?node-id=0%3A1
Cualquier inquietud puedes comentarla aquí o escribir en el chat de la comunidad en Telegram
Crear componente tarjeta, para la seccion ciudades en la pagina Home.
En el siguiente link puedes el prototipo en figma para ver los colores y tamanios de cada item.
https://www.figma.com/file/w2VP8mKwNivTOGqsdvGMVe/Prototipo-Web-Ecuador.js?node-id=0%3A1
Cualquier inquietud puedes comentarla aqui o escribir en el chat de la comuniad en telegram
La carpeta static serviria para poner todos los assets del sitio los cuales seran reconocidos por gatsby por defecto lo que mejora el rendimiento.
Tarea a realizar
Se necesita que el link Eventos en el header apunte hacia la sección 'Eventos' de home.
¿Por qué se realizará?
El motivo de realizar este cambio se debe a una reestructuración del sitio a SPA (Single Page Application).
Por esta razón la página 'Eventos' se mantiene inactiva hasta una próxima implementación.
Recomendaciones
Para desarrollar esta tarea:
src\components\events-section\Events.js
añadir al tag <section>
un id.src\components\header\header.js
y cambiar:<Link ... to="/eventos" ... >
// --------------------------
<Link ... to="#eventos" ... >
En el siguiente link puedes el prototipo en Figma para ver los colores y tamaños de cada item
https://www.figma.com/file/w2VP8mKwNivTOGqsdvGMVe/Prototipo-Web-Ecuador.js?node-id=0%3A1
Cualquier inquietud puedes comentarla aquí o escribir en el chat de la comunidad en Telegram
Crear un componente slider de fotos el cual estara ubicado en la seccion Comunidad en la pagina Home.
En el siguiente link esta el prototipo en figma para ver los colores y tamanios de cada item.
https://www.figma.com/file/w2VP8mKwNivTOGqsdvGMVe/Prototipo-Web-Ecuador.js?node-id=0%3A1
Cualquier inquietud puedes comentarla aqui o escribir en el chat de la comuniad en telegram
Tarea a realizar
En página Home, en la sección Comunidad actualmente hay tres botones:
La mejora a realizar consiste en cambiar la presentación colorista de los mismos. Tanto los estilos base como los estilos en hover
de cada botón.
¿Por qué se realizará?
El color amarillo no permite visualizar con claridad el titulo de cada botón. En pantallas con brillo alto o intensidad muy fuerte no se visualizará con claridad.
Recomendaciones
Actualmente los botones se ven así.
La sugerencia consiste en aplicar colores más oscuros en los estilos base del botón y mantener el color sólido del titulo en hover
.
Para aplicar esta mejora del código css en src\components\UI\button\button.module.css
. Se deben reescribir los estilos predeterminados del core css.
.button--secondary {
color: #f7e018;
background-color: transparent;
border-color: #f7e018;
}
.button--secondary:hover {
color: #737373;
background-color: #f7e018;
border-color: #f7e018;
}
Deseamos seguir una convencion estandar como ConventionalCommits al momento de escribir mensajes de commit en este repositorio; sobre todo para cuando se este trabajando localmennte en el codigo.
Para eso tenemos pensado usar un linter llamado commitlint, el cual nos ayudara en nuestro objetivo.
Como parte de este issue se podria automatizar las validaciones de este linter usando hooks de git mediante husky.
En esta tarea se debe configurar commit lint y automatizar con un git hook en pre-commit. Si es posible, crear una guia rapida de como instalarlo y configurarlo, sino se podria abrir un nuevo issue para la tarea de esta guia.
Cualquier inquietud comentala aqui o pregunta en el canal deTelegram
Tarea a realizar
Es necesario darle un margin fijo a todo el content del sitio para que este un poco mas parecido al protitipo en figma, tomando en cuenta lso tamanios del vieport responsive.
¿Por qué se realizará?
Tener un mejor estilo o disenio.
Recomendaciones
Este estilo se lo podria dar al layout component.
Ver el disenio en figma https://www.figma.com/file/w2VP8mKwNivTOGqsdvGMVe/Prototipo-Web-Ecuador.js?node-id=1226%3A17289
En esta tarea es necesario crear la seccion Head justo debajo del componente navbar en el Home que se solicita en #2
En el siguiente link esta el prototipo en figma para ver los colores y tamanios de cada item.
https://www.figma.com/file/w2VP8mKwNivTOGqsdvGMVe/Prototipo-Web-Ecuador.js?node-id=0%3A1
Cualquier inquietud puedes comentarla aqui o escribir en el chat de la comuniad en telegram
Es necesarios seguir una pauta al redactar un pullrequest
y asi mantener una guia de estilos.
Si tienes alguna pregunta, comentala aqui o escribenos al canal de Telegram de la comunidad
Al escribir un blog y añadir la numeración no se muestra los números como debería mostrarse solo el texto
Este es el código en Markdown:
---
title: Deploy de un sitio de Gatsby en Netlify
date: "2020-10-05"
updated: "2020-10-05"
description: Como realizar el deploy de un sitio construido con Gatsby a Netlify
---
Esta es la guía base para realizar el deploy de una página construida con el framework Gatsby,
en este caso se realizará el deploy de la página de la comunidad de JavaScript Ecuador.
Una vez tenemos el sitio alojado en un repositorio de GitHub tenemos que conectarlo con la plataforma
[Netlify](https://www.netlify.com/).
1. Añadir el repostiorio desde GitHub
![](https://cdn.netlify.com/3803d207cbf97389f0d37ab7ee65580ee52c217f/a6a2f/img/blog/new_site_button.png)
2. Conectar el repositorio
Hacer clic en el botón que lleva a la pantalla donde Netlify se conecta al repositorio de GitHub.
![](https://cdn.netlify.com/6cc161f3ced8f060296bc8aeacd7fb39e5159274/743e1/img/blog/create_link_repo.png)
Seria necerario que despues de hacer el fork y clonar el repositorio, agregar una guia que explique como configurar y desplegar el proyecto gatsby localmente.
Si tienes alguna duda o necesitas guia, comentalo por aqui en los comentarios o escribenos al canal de telegram de la comunidad.
Crear el footer de la pagina Home.
En el siguiente link puedes el prototipo en figma para ver los colores y tamanios de cada item.
https://www.figma.com/file/w2VP8mKwNivTOGqsdvGMVe/Prototipo-Web-Ecuador.js?node-id=0%3A1
Cualquier inquietud puedes comentarla aqui o escribir en el chat de la comuniad en telegram
Se puede agregar una guía parecida a esta pero resumida
Aquí se puede ver prototipo completo con más detalle.
Si tienes dudas puedes consultarlo en el canal de Telegram de JavaScript Ecuador
Describe el bug/error
Al reducir el zoom del navegar a menos del 80% la última tarjeta de ciudades no se presenta del mismo tamaño que el resto
Para reproducirlo
Pasos para reproducir el comportamiento:
Comportamiento esperado
Que la última tarjeta se mantenga del mismo tamaño que el resto
Desktop:
Tarea a realizar
Agregar props al componente Card para que permita modificar el tamaño de la tarjeta y la imagen
¿Por qué se realizará?
Para ajustar la sección al diseño
Recomendaciones
Cambiar el componente Card y agregar una prop mediante la cual se controle la altura pero que por default use la altura que tiene ahorita para no dañar la otra sección.
Tarea a realizar
Se necesita que el link Comunidad en el header apunte hacia la sección 'Como ayudar' de home.
Además debe cambiar de nombre a '¿Cómo Ayudar?'.
¿Por qué se realizará?
El motivo de realizar este cambio se debe a una reestructuración del sitio a SPA (Single Page Application).
Recomendaciones
Para desarrollar esta tarea:
src\components\community-hero-section\community-hero-section.js
<div className="community-hero-section">
a un tag <section>
<section>
un id.src\components\header\header.js
y cambiar:<Link ... to="/comunidad" ... >COMUNIDAD
// --------------------------
<Link ... to="#como-ayudar" ... >¿COMO AYUDAR?
En el siguiente link puedes el prototipo en Figma para ver los colores y tamaños de cada item
https://www.figma.com/file/w2VP8mKwNivTOGqsdvGMVe/Prototipo-Web-Ecuador.js?node-id=0%3A1
Cualquier inquietud puedes comentarla aquí o escribir en el chat de la comunidad en Telegram
Crear la seccion y componente subscribe en la pagina Home.
En el siguiente link puedes el prototipo en figma para ver los colores y tamanios de cada item.
https://www.figma.com/file/w2VP8mKwNivTOGqsdvGMVe/Prototipo-Web-Ecuador.js?node-id=0%3A1
Cualquier inquietud puedes comentarla aqui o escribir en el chat de la comuniad en telegram
Es importante siempre hacer un git pull
para verificar si hay nuevos cambios en el repo.
En el archivo CONTRIBUTING.md en la guia de como contribuir, falta una guia que explique como actualizar los forks realizados al repo original.
En esta tarea es necesario escribir una pequeña guia que explique como hacerlo.
Cualquier inquietud puedes comentarla aqui o escribir en el chat de la comuniad en telegram
Describe el bug/error
No se esta resaltando del menu que esta activo o de la pagina actual.
Para reproducirlo
Pasos para reproducir el comportamiento:
Comportamiento esperado
El menu seleccionado deberia resaltarse en amarillo.
En esta tarea debemos crear el componente Navbar y agregarlo en el Homepage del sitio
En el siguiente link esta el prototipo en figma para ver los colores y tamanios de cada item.
https://www.figma.com/file/w2VP8mKwNivTOGqsdvGMVe/Prototipo-Web-Ecuador.js?node-id=0%3A1
Cualquier inquietud puedes comentarla aqui o escribir en el chat de la comuniad en telegram
Tarea a realizar
Se necesita que el link Ciudades en el header apunte hacia la sección 'Ciudades' de home.
¿Por qué se realizará?
El motivo de realizar este cambio se debe a una reestructuración del sitio a SPA (Single Page Application).
Por esta razón la página 'Ciudades' se mantiene inactiva hasta una próxima implementación.
Recomendaciones
Para desarrollar esta tarea:
src\components\cities-section\cities-section.js
añadir al tag <section>
un id.src\components\header\header.js
y cambiar:<Link ... to="/ciudades" ... >
// --------------------------
<Link ... to="#ciudades" ... >
Describe el bug/error
Las redirecciones de algunos enlaces en la nueva tabla de contenidos de CONTRIBUTING.md no esta funcionando. Yo mismo tome ese issue el cual era el issue 62 y me doy cuenta del error ahora. Funciona en el preview de Visual Studio Code pero no funciona en GitHub.
Para reproducirlo
Pasos para reproducir el comportamiento:
Comportamiento esperado
La tabla de contenidos debe redireccionar a cada uno de los temas en CONTRIBUTING.md.
Desktop (por favor completa la siguiente información):
Información adicional
El problema esta en que se a escapado un guion medio luego del numeral: * Segundo Pull Request
Debería estar así: * Segundo Pull Request
Al principio del desarrollo del sitio se planteó usar TailwindCSS por la "velocidad de prototipado", pero la mayoría de los estilos del sitio se están construyendo con CSS puro, por esta razón y otras mencionadas en #41 se ha decidido usar CSS puro en vez de TailwindCSS.
Para lo cual se va a ir migrando los componentes que están con TailwindCSS. Además se plantea usar módulos de CSS y un linter para usar la convención BEM
Cualquier inquietud puedes comentarla aquí o escribir en el chat de la comunidad en Telegram
Como referencia se puede tener #40
Se puede ver más sobre el prototipo en Figma en esta direccción https://www.figma.com/file/w2VP8mKwNivTOGqsdvGMVe/Prototipo-Web-Ecuador.js?node-id=0%3A1
Cualquier duda se la puede consultar por el chat de Telegram
Esto no forma parte del desarrollo del sitio web, pero formara parte del proyecto ya que es algo importante para la comunidad.
Tareas a realizar
Crear y probar cuenta gratuita en bitwarden para el manejo y cifrado de archivos al momento de compartir credenciales.
Objetivo
Probar sus ventajas y en un futuro decidir si debemos pasar a un plan de pago.
Tarea a realizar
Se necesitan mover las secciones 'Como Ayudar' y 'Contribuidores' de la página Comunidad a la página Home.
¿Por qué se realizará?
El motivo de realizar este cambio se debe a un reestructuración del sitio a SPA (Single Page Application).
Por esta razón la página 'Comunidad' desaparece y su contenido se fusiona en Home (a excepción de la sección 'Mantenedores').
Recomendaciones
Para desarrollar esta tarea:
src\pages\comunidad.js
<CommunityHeroSection/>
y <Contributors />
a Index.js
en src\pages\index.js
(Colocar los componentes despues de <EventsSection />
)Tenemos que publicar la página con Netlify y si es posible también eliminar el anterior repo para que no haya confusión
Añadir un archivo escrito en Markdown que muestra las instrucciones detallas de como contribuir en la página de JavaScript Ecuador
Cada proyecto open source tiene un archivo README.md en el que se especifica informacion sobre el repositorio, comunidad, etc. El README es lo primero que veran quienes visiten el repositorio.
Para esta tarea es necesario conocer Markdown y debes crear un archivo README.md
escrito en formato Markdown que muestre lo siguiente:
Javascript Ecuador
Se intenta tener algo simple, elegante y facil de leer un ejemplo lo podrias ver aqui o muchas mas en este repositorio awesome-readme
El sitio se desarrolla en Gatsby y usando Tailwindcss para los estilos.
Cualquier inquietud puedes preguntar aqui en un comentario o en nuestro canal de Telegram.
Aquí se puede ver prototipo completo con más detalle.
Si tienes dudas puedes consultarlo en el canal de Telegram de JavaScript Ecuador
Crear seccion y componente Blog en la pagina Home.
Este issue tiene varias tareas implicitas por lo que varias personas pueden trabajar en el, solo menciona en los comentarios en que parte deseas trabajar y se te asignara.
mdx
de gatsby.articulo o post
dentro de este componente redireccionara a la pagina detalle de cada post.leer mas
redireccionara a la pagina principal del blog, que se construye en #10En el siguiente link puedes el prototipo en figma para ver los colores y tamanios de cada item.
https://www.figma.com/file/w2VP8mKwNivTOGqsdvGMVe/Prototipo-Web-Ecuador.js?node-id=1226%3A17289
Cualquier inquietud puedes comentarla aqui o escribir en el chat de la comunidad en telegram
Gracias al pull #27 de @cesardlinx ya existe el slider, faltan algunos componentes para terminar la sección de comunidad de la página principal.
Para tener un standar al momento de rectar un issue solicitando nuevas caracteristicas seria bueno crear un issue-template para tener una pauta de que informacion detallar.
Dejo una guia para hacerlo -> Configurar template Features Request
Si tienes alguna pregunta, comentala aqui o escribelo en el canal de Telegram de la Comunidad
Crear blog para el sitio, este tendrá las siguientes funciones las cuales después se pueden dividir en varias tareas incluyendo el diseño de ciertos componentes:
En el siguiente link puedes el prototipo en Figma para ver los colores y tamaños de cada item
https://www.figma.com/file/w2VP8mKwNivTOGqsdvGMVe/Prototipo-Web-Ecuador.js?node-id=0%3A1
Cualquier inquietud puedes comentarla aquí o escribir en el chat de la comunidad en Telegram
Para mostrar los contribuidores en el README se está utilizando la convención all-contrubitors es posible que se pueda reutilizar algo de la especificación en esta sección.
En el siguiente link puedes el prototipo en Figma para ver los colores y tamaños de cada item
https://www.figma.com/file/w2VP8mKwNivTOGqsdvGMVe/Prototipo-Web-Ecuador.js?node-id=0%3A1
Cualquier inquietud puedes comentarla aquí o escribir en el chat de la comunidad en Telegram
Describe el bug/error
Se debe mejorar la presentación del slider de Comunidad. Actualmente por diferencia de tamaños en las imágenes del slider, no se está visualizando correctamente el componente. Pero se debe añadir una pequeña separación entre el contenedor de imágenes y la barra de slides.
Para reproducirlo
Pasos para reproducir el comportamiento:
Comportamiento esperado
De acuerdo con el prototipo en Figma, existe un pequeño espacio entre el contenedor de slides y la barra de slides.
Capturas de Pantalla
Este es el comportamiento actual del slider.
Desktop:
Información adicional
Para resolver este bug, debes arreglar este estilo en src\components\community-section\photo-slider\photo-slider.css
.slick-dots li {
border-radius: 10em;
width: 11.36%;
height: 15.65px; /* esta regla presenta conflictos. */
margin: 0 0.4em;
}
Hola a todos la página de a poco se va convirtiendo en realidad gracias a todos los contribuidores, nos gustaría saber si se prefiere trabajar con CSS Vanilla o TailwindCSS, ya que actualmente Gatsby está configurado con TailwindCSS pero la mayoría de componentes usan CSS normal.
La pregunta es, si les gustaría usar:
Para tener un standar al momento de rectar un issue reportando un bug/error, seria bueno crear un issue-template para tener una pauta de que informacion detallar.
Dejo una guia para hacerlo -> Configurar template Features Request
Si tienes alguna pregunta, comentala aqui o escribelo en el canal de Telegram de la Comunidad
Tarea a realizar
Agregar la redireccion del siguiente url documento cuentas Javascript Ecuador
https://docs.google.com/spreadsheets/d/1nKXGaYJVTd8JTNIkTnz5wwg-z5QmxT95RAN_b69yog4/edit?usp=sharing
al menu CUENTAS .
¿Por qué se realizará?
Mostrar de forma transparente y actualizada el uso de las donaciones recibidas.
Recomendaciones
Aunque existe una pagina para el menu CUENTAS, no es muy necesaria una pagina para solo redirigir a este documento, en este caso ya no se deberia mostrar la pagina 'https://javascript.ec/cuentas' y solo mostrar en una nueva pestania el documento a redirigir.
Diseño en figma
https://www.figma.com/file/w2VP8mKwNivTOGqsdvGMVe/Prototipo-Web-Ecuador.js?node-id=1226%3A17289
Crear componente y funcionalidad carrusel de tarjetas(se piden en #5 ) esto esta en la seccion Ciudades de la pagina Home.
En el siguiente link puedes el prototipo en figma para ver los colores y tamanios de cada item.
https://www.figma.com/file/w2VP8mKwNivTOGqsdvGMVe/Prototipo-Web-Ecuador.js?node-id=0%3A1
Cualquier inquietud puedes comentarla aqui o escribir en el chat de la comuniad en telegram
Tarea a realizar
Redireccionar a los enllaces respectivos cada icono que se encuentra en la seccion 'Descripcion de la comunidad' en el home.
¿Por qué se realizará?
Redireccionar a los enlaces correctos.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.