Foundation Layer at @platzi - Microsoft MVP - Lead at Developer Circles from Facebook, I teach React & Svelte

📰 Artículos más recientes

¿Hoy que aprenderás?

🎙️ Hablemos de todo y también de nada, ciencia, tecnología y desarrollo web.

Podcast: Error 418

Oscar Barajas Tavares


### ¿Quién soy?

Mexicano, originario de Torreón Coahuila, actualmente viviendo en Colombia, trabajo como Foundation Layer en Platzi, empresa dedicada a la educación online, padre del Bebeloper y un apasionado de la enseñanza en línea.

Soy líder de comunidades, participando fuertemente en la comunidad de Facebook Developer Circles Bogotá. Soy un apasionado por las tecnologías particularmente por React y hoy en día descubriendo y evangelizando sobre Svelte.dev.

### Especialidades
JavaScript, Svelte, React, Node, GitHub.

### Trayectoria

Desarrollador FrontEnd con más de 16 años de experiencia, creando mi primera página web en el 2001, Actualmente Foundation Layer en Platzi.com, Soy uno de los líderes de la comunidad de “Facebook Developers Circles” en Bogotá, Colombia, Nombrado Microsoft Most Valuable Professional en el 2021 y mejor conocido como [@gndx](https://instagram.com/gndx) en redes sociales.

Actualmente tengo 17 Cursos donde enseño todo lo relacionado con JavaScript en Platzi.com.

### Proyectos recientes

Me apasiona escribir y crear contenido sobre ReactJS en [arepa.dev](https://arepa.dev) y en este blog donde escribo de JavaScript y las conferencias que imparto.

### Mi Historia



Sé que para muchos será algo extraño este adiós, Pero he pasado por la mayoría de los frameworks y librerías de **JavaScript**, entre ellas Svelte, todo el 2020 me dedique a evangelizarlo, hablar muy bien de sus ventajas y como aprovecharlo al máximo, crear videos impartir charlas en la comunidad crear tres [cursos en Platzi](https://platzi.com/teachers/gndx) y tener varios proyectos en producción con Svelte.

**Adiós Svelte...**

No es el adiós que todo creen simplemente le he dicho adiós como la tecnología que utilizaba para este blog "**[gndx.dev](https://gndx.dev)**" he tomado la decisión de migrar a otra plataforma con la finalidad de aprender. También la decisión fue acompañada del anuncio de deprecar "[Sapper](https://www.youtube.com/watch?v=vHHLLJA0b70&t=24060s)" quien junto a Svelte lograban crear sorprendes sitios estáticos y si, mi blog gndx.dev en su momento fue creado con esta tecnología.
 
Me gusto lo aprendido, me gusto crear el blog e integrar mis herramientas, aprender a crear cada pieza necesaria y lograr desplegarlo junto a una serie de artículos y secciones importantes en este sitio. Pero ahora toma otro sentido y vamos a enfocarlo en crear mejor contenido, enfocarlo a mi contenido en directo y una serie de proyectos que tengo en mente, necesitaba tener un sitio estable, que me permitiera enfocarme en escribir y compartir amigablemente el contenido creado.
 
**Hola, Hugo!**

Como uno de mis objetivos personales para este año 2021, es aprender un nuevo lenguaje de programación, el cual me permita seguir creciendo como profesional y lograr mejorar mis habilidades como desarrollador, durante el 2020 me enfoque en aprender, practicar y crear proyectos con Python, me siento cómodo y sé que puedo iniciar un proyecto o líneas de código con este lenguaje de programación.

En la mira estaban dos grandes, Rust o Go, La decisión fue fácil pues en parte necesitaba encontrar una forma de migrar mi blog a una plataforma estable y se unió con la necesidad de aprendizaje, cuando encontré el proyecto [gohugo.io](https://gohugo.io) el cual es un framework para crear sitios web estáticos, utilizando la arquitectura **JAMStack** y escrito en GO.

Cuestión de investigar, probar y lanzarme al ruedo con esta tecnología que me permitirá aprender GO (*Jugando más con el Framework*) crear mi blog y continuar cumpliendo con dos de mis principales metas de este año, Aprender un nuevo lenguaje de programación y escribir más.


Por que le dije adios a Svelve, el framework prometedor que permite crear sorprentes aplicaciones web.

Adios Svelte, Hola Hugo.


### Quiero aprender Svelte, ¿por dónde empiezo?
Es una de las principales preguntas que me suelen hacer en mis directos, por mensajes en Discord y hasta en mensajes privados.

![enter image description here](https://arepa.s3.amazonaws.com/alguien-dijo-svelte.jpg)

La respuesta es muy fácil, si tienes tiempo trabajando con algún otro framework o librería o té has apasionado tanto por JavaScript, ya estás listo para empezar con **Svelte**.

Svelte es un Framework de JavaScript pensado para construir interfaces de usuario, muy similar a React, Angular o Vue, pero con notables características que lo hacen destacar, entre ellas su cambio de paradigma, ya que se ejecuta en tiempo de compilación y no utilizar el concepto de Virtual DOM.

#### Primeros pasos
El mejor lugar para aprender una tecnología, librería, framework o lo que desees aprender es su **documentación** o sitio oficial, este te guiara por el camino para entender cada particularidad y como han resuelto los problemas a los que se enfrentaron para dar la solución o proponer nuevas alternativas para crear sorprendes interfaces web.  

Quítate el miedo de leer la documentación, esta será tu mejor herramienta de trabajo, No esperas a que esté en tu idioma, o encontrar el contenido en español, si aún no dominas el inglés, usa el traductor de Google, pero siempre ten en mente que la única fuente de la verdad es la documentación.

#### El otro camino... 
Una vez que pasaste por la documentación, entendiste que particulares son importantes y como puedes sacar mayor provecho de lo aprendido, mi siguiente recomendación es **leer el código fuente**, esta práctica te permitirá entender cada fase esencial del proyecto, como es que resuelve los problemas e iniciar a colaborar aportando líneas de código que mejoren el proyecto.

#### ¿Por qué Svelte podría ser el mejor framework de JavaScript?
Este video lo realicé a inicios del 2020 donde te cuento las principales particularidades de Svelte y lograr sacarle el mayor provecho y entender el porqué sera mejor framework.

{{< youtube YyF_9Tg0DcE >}}

#### Cursos
Si lo que deseas es aprender con un proyecto, ir tocando las principales características y llevando a cabo tu aprendizaje con ejemplos, mientras construyes un proyecto genial.

Tengo tres cursos en [Platzi](https://platzi.com/teachers/gndx/) donde creamos diferentes proyectos entre ellos pugstagram una red social para pugs creada en su totalidad con Svelte y desplegada en producción, mezclando varias tecnologías.

 - [Curso de
   Svelte](https://platzi.com/cursos/svelte/?utm_source=platzi_teacher&utm_medium=teacher_referral&utm_campaign=542)
 - [Curso de
   Sapper](https://platzi.com/cursos/sapper/?utm_source=platzi_teacher&utm_medium=teacher_referral&utm_campaign=542)
 - [Curso de Desarrollo Web con
   Svelte](https://platzi.com/cursos/svelte-sapper-practico/?utm_source=platzi_teacher&utm_medium=teacher_referral&utm_campaign=542)

Ahora estás listo para aprender **Svelte** y poner en práctica tu conocimiento con proyectos.


Quiero aprender Svelte, ¿por dónde empiezo? Svelte es el framework de JavaScript para construir interfaces de usuario.

¿Alguien dijo Svelte?


Basado en mi experiencia y resumido en 10 puntos, te explico lo que necesitas saber para conseguir tu primer empleo como programador.

<iframe src="https://www.youtube.com/embed/J4WMkPVqsRc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


Que necesitas saber para conseguir tu primer empleo como programador.

¡Como conseguir tu primer empleo como programador!


#### Curso de Webpack 2021

Webpack es un module bundler o empaquetador de módulos para JavaScript. En el curso dominarás el uso de loaders y plugins e integrar la herramienta que permitirán tener un entorno de desarrollo o producción óptimo para trabajar tu desarrollo web. Aprenderás a optimizar tus proyectos con compresión y minificación de CSS, JavaScript, Configurar y preparar todos los cursos para enviar a producción tu proyecto.

#### Proyecto

Durante el curso desarrollamos una tienda en línea, preparamos cada elemento para optimizar las imágenes utilizadas, implementar el uso de preprocesadores, minificar nuestras imágenes, integrar los principales plug-ins de Webpack para optimizar JavaScript y preparar el proyecto para desplegarlo en producción en Netlify.

Toma el curso ahora: [https://platzi.com/webpack](https://platzi.com/cursos/webpack/?utm_source=platzi_teacher&utm_medium=teacher_referral&utm_campaign=542)


Aprende Webpack desde cero, prepara tu desarrollo web para hacerlo más ágil, rápido y optimizado.

Curso de Webpack 5


#### Iniciando...

Hoy se cumple un año desde que inicie en el mundo de los streamings y creación de contenido en YouTube/Twitch, A lo largo de todo este tiempo he invertido en tener la mejor calidad en cuanto a la creación de contenido, es por eso que he invertido bastante en adquirir cada una de las piezas que conforman mi setup para seguir creando contenido con mayor calidad.

Te dejo un breve resumen de algunos eventos importantes y la evolución del setup final.

#### Marzo 2020
Mi primera transmisión por YouTube sin esperar nada, se fue dando y la verdad me termino gustando bastante.
Como puedes apreciar casi no tenía ningún aditamento para transmitir, una cámara y un micrófono sencillo, esos fueron mis inicios.

![enter image description here](https://arepa.s3.amazonaws.com/gndx-mi-setup-2020.jpg)

#### Junio 2020
Logramos obtener el Partner en Twitch lo cual nos permitió verificar la cuenta y crear el Team para la comunidad de creadores en Español #EStreamerCoders. 

![enter image description here](https://arepa.s3.amazonaws.com/gndx-twitch-partner.jpg)

#### Agosto 2020
Para este entonces mi esposa @[anabelisam_](https://twitter.com/anabelisam_) se inició en los Streamings, creando contenido de management y backend.

![enter image description here](https://arepa.s3.amazonaws.com/gndx-setup-ana-belisa.jpg)

#### Septiembre 2020
Ya con un espacio más organizado, con aditamentos para crear contenido, ya contaba con mejor calidad en luz, audio y video. Tuve la oportunidad de ser uno de los streamers de la Platzi CONF 2020, poniendo en práctica mi conocimiento y mis herramientas que había creado para streamers. Aquí el Bebeloper ya era parte del Staff.

![enter image description here](https://arepa.s3.amazonaws.com/gndx-mi-setup-bebeloper.jpg)

#### Noviembre 2020
Ahora tenía un programa en Platzi, donde entrevistaba a profesores y profesionales de la industria del desarrollo de software, en esta ocasión me toco ser el host y streamer para la comunidad de Microsoft en Platzi.

![enter image description here](https://arepa.s3.amazonaws.com/gndx-setup-microsoft.jpg)

#### Enero 2021
Luego de una pausa por vacaciones y una mudanza, estrenando un nuevo espacio de trabajo, una habitación para el estudio dedicado a la creación de contenido. 

![enter image description here](https://arepa.s3.amazonaws.com/gndx-setup-new-home.jpg)

#### Marzo 2021
Finalmente hemos completado la versión 1.0.0 del estudio en la nueva casa ubicada en Sopó Cundinamarca, conectando la naturaleza y la tecnología.

![enter image description here](https://arepa.s3.amazonaws.com/gndx-setup-2021.jpg)

Acá puedes ver mi video de YouTube donde muestro a detalle cada elemento de este espacio de trabajo, diversión y creación de contenido. 

<iframe src="https://www.youtube.com/embed/9XZTUPos4I0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Si quieres adquirir el equipo que tengo te dejo las principales caracteristicas y sus respectivos enlaces a Amazon donde adquiri estos productos.

**PC**
 - CPU: AMD Ryzen™ 5 3600X 6 nucleos 4.4GHz  https://amzn.to/2PnA9pi=
 - GPU: NVIDIA GeForce GTX 1660 Super 6GB https://amzn.to/317aJP0
 - PLACA:  Gigabyte AM4 B450M DS3H https://amzn.to/395Q9mJ
 - CAJA: iCUE 220T RGB https://amzn.to/399R31E
 - RAM: 32GB SPECTRIX D60G RGB DDR4 3200 2x16GB https://amzn.to/3tFrg9c
 - REFIGERACIÓN:  CoolerMaster MLW-D24M https://amzn.to/3d23WvC
 - FUENTE: XPG Core Reactor 80 Plus Gold Modular https://amzn.to/316TKN5
 - SSD: XPG SPECTRIX S40G RGB PCIE GEN3X4 M.2 2280 - 256GB https://amzn.to/3f6vEKr

**Streaming:**
 - Shure MV7 https://amzn.to/3f6xZFi
 - Micro: HyperX QuadCast https://amzn.to/394QVQO
 - Canon EOS M200 https://amzn.to/2Qx13vp
 - Logitech C922 Pro Stream 1080p X2 https://amzn.to/3tDN5Gi
 - Elgato Cam Link 4K : https://amzn.to/3cWXaax
 - Elgato Stream Deck: https://amzn.to/3vU4T1Y

**Iluminación**:
 - Elgato Key Light: https://amzn.to/319hIHy
 - Philips Hue https://amzn.to/3d23jCg

**Extras**:
 - Echo Show 5: https://amzn.to/3rhkwN3
 - Keychron K6 65% Wireless Mechanical Keyboard: https://amzn.to/3vTJhT2
 - Razer Mamba: https://amzn.to/3cceJV1
 - LG 29" Ultrawide: https://amzn.to/397AKCq

Espero te sirvan las referencias a los productos y equipos que utilizo para las transmisiones y seguiremos creando contenido para llevar la tecnología a más personas. 


Un breve recorrido por el primer año creando contenido educativo, y la evolución de mi espacio utilizo para livestreams, grabar, editar, jugar y trabajar.

Mi primer año creando contenido educativo


Este mes se lanzó mi curso de Webpack 5 en Platzi donde te explico a detalle las ventajas de utilizar esta herramienta para preparar nuestros proyectos creados con JavaScript. El proyecto es totalmente vanilla JavaScript, creamos un portafolio donde mostramos la informacion principal, aprendemos a optimizar nuestro proyecto y desplegarlo a producción. En este video te cuento los primeros pasos que debes de seguir para iniciarte en Webpack antes de tomar mi curso. 

<iframe src="https://www.youtube.com/embed/Qkjib58zKWA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


Webpack es un module bundler, o en simples palabras Una librería que nos permite gestionar todos los recursos de un proyecto

Primeros pasos con Webpack 5


Deno un runtime Multiplataforma basado en el motor V8 de Chrome e implementa TypeScript como lenguaje por defecto. Deno utiliza la misma arquitectura de Node (even driven, asincronía etc.). En el siguiente video entramos un poco a detalle sobre la caracteristicas incorporadas y las ventajas que tendria frente a NodeJS.

<iframe src="https://www.youtube.com/embed/-lFVt7oKrfk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


Deno un runtime Multiplataforma basado en el motor V8 de Chrome e implementa TypeScript como lenguaje por defecto

¿Qué es Deno?


Hace tiempo realicé un video explicando como puedes retarte y trabajar con proyectos profesionales que te ayudaran a crear portafolio, poner en práctica tus habilidades de frontend o backend, así como también trabajar en equipo o salir de tu zona de confort. La mayoría de los proyectos incluyen una descripción o material de apoyo que te permitirá entender mejor el reto a realizar. 

**10 Retos para desarrolladores Web**

<iframe src="https://www.youtube.com/embed/6M6pkfyr-qE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Participar en el reto: [https://github.com/gndx/gndx-challenges](https://github.com/gndx/gndx-challenges).


Quieres retarte y trabajar con grandes proyectos, te dejo mis recomendaciones de retos que te ayudaran a mejorar tu portafolio.

Retos para desarrolladores Web


Actualmente tengo más de 18 cursos en la plataforma de educación online [Platzi](https://platzi.com/teachers/gndx) donde enseño **JavaScript**, el uso de la terminal es muy importante en mis cursos cuando estamos trabajando con NodeJS o JavaScript con algún Framework o Librería. 

Una de las preguntas que más me hacen es cual es mi configuración de mi terminal/consola/bash/promt, A la cual siempre respondía que era un tema personalizado creado basándome en los temas por defecto que incluye [Oh My Zsh](https://ohmyz.sh/).

No es hasta ahora que prepare el tema, lo optimice y adapte para que todos puedan instalarlo en sus configuraciones de **Oh My Zsh**.

###  Vista Previa de gndx-zsh-theme

![gndx zsh theme](https://raw.githubusercontent.com/gndx/gndx-zsh-theme/master/screenshot.png)


###  Instalación

1. En tu terminal escribe lo siguiente: `git clone https://github.com/gndx/gndx-zsh-theme/ $ZSH_CUSTOM/themes/gndx-zsh-theme`

2. Abre tu configuración de: `.zshrc`

3. Cambia el valor de `ZSH_THEME` por *`gndx-zsh-theme/gndx`*

Más información: [Oh-My-Zsh External themes](https://github.com/ohmyzsh/ohmyzsh/wiki/External-themes)

###  Extras
Actualmente utilizo los plugins [zsh-autosuggestions](https://github.com/zsh-users/zsh-autosuggestions) y [zsh-syntax-highlighting](https://github.com/zsh-users/zsh-syntax-highlighting) que me permiten tener una mejor experiencia utilizando los comandos.

Fuente recomendada: [FiraCode](https://github.com/tonsky/FiraCode)

###  Contribuir
Si alguien quiere agregar o mejorar algo, te invito a colaborar directamente en este repositorio: [gndx-zsh-theme](https://github.com/gndx/gndx-zsh-theme)

###  Licencia
gndx-zsh-theme se lanza bajo la [MIT License](https://opensource.org/licenses/MIT).


Tema personalizado para ZSH inspirado en la configuración que utilizo en mis cursos de JavaScript en Platzi.

Tema personalizado para ZSH


Te cuento mi experiencia como Frontend Developer aprendiendo TypeScript que ventajas y desventajas, cuál fue el reto de aprender y como he logrado implementar TS en mis proyectos.

<iframe src="https://www.youtube.com/embed/xmswIw1idgA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


Te cuento mi experiencia como Frontend Developer aprendiendo TypeScript que ventajas y desventajas

TypeScript VS. JavaScript


Muchas veces me han preguntado, **¿Vale la pena aprender Node.js?** Me preocupa un poco que los desarrolladores que están iniciando en **JavaScript**, no tengan claro lo que es Node.js y lo ven como otra tecnología para aprender y les abruma saber que tienen que aprenderlo. En este video te explico lo que debes de saber para empezar con **Node.js**. 

<iframe src="https://www.youtube.com/embed/B6MZkrUZtMQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


Recientemente me preguntaron que opinaba de aprender Node.js, la importancia que tiene y como empezar, te dejo este video donde te cuento mi punto de vista y como puedes iniciar tu aprendizaje.

¿Vale la pena aprender Node.js?


Soy un apasionado por la educación, enseñar siempre ha sido un gusto para mí, te dejo la lista de los cursos que tengo actualmente en Platzi. Si, Quieres ver todos mis curso visita mi perfil en [Platzi](https://platzi.com/teachers/gndx/).


Soy tu profesor en Platzi, donde tengo cursos acerca de JavaScript, Webpack, React, Svelte entre otros.

¿Quieres aprender JavaScript?


#### S01E01
Error 418 un podcast que debió existir desde el 2017, pero hoy luego de 4 largos años estamos comenzando con el primer episodio, donde te cuento mis inicios y quien es Oscar Barajas, mejor conocido como @gndx. 

<iframe
  src="https://open.spotify.com/embed-podcast/episode/5cbFfBC07B77BVjTmbVfSA"
  width="100%"
  height="232"
  frameBorder="0"
  title="Hola Mundo, Conociendo a Oscar Barajas."
  allowtransparency="true"
  allow="encrypted-media" 
/>


El primer episodio, donde te cuento mis inicios y quien es Oscar Barajas, mejor conocido como @gndx

Hola Mundo, Conociendo a Oscar Barajas.


#### S01E02
Formar parte de una comunidad siempre te va a dejar grandes beneficios, como puedes aprovechar al máximo tu comunidad o crear una comunidad que impacte personas, creciendo juntos profesionalmente.

<iframe
  src="https://open.spotify.com/embed-podcast/episode/6ZbzB5v5n7vmCmw0mDq9rk"
  width="100%"
  height="232"
  frameBorder="0"
  title="Hablemos de comunidades y crear contenido"
  allowtransparency="true"
  allow="encrypted-media" 
/>


El segundo episodio, crear comunidades y crear contenido, mi experiencia a lo largo de los años.

Hablemos de comunidades y crear contenido


#### S01E03
Muchas veces no le damos la importancia a nuestra salud física y mental, hasta que llega el síndrome de desgaste profesional o mejor conocido como burnout, un estado de agotamiento mental, emocional y físico que se presenta como resultado de exigencias agobiantes, estrés crónico y resultado de la pandemia que estamos viviendo. 

<iframe
  src="https://open.spotify.com/embed-podcast/episode/3M1k80shjCaFAaSMMNKQl7"
  width="100%"
  height="232"
  frameBorder="0"
  title="Consejos para convertirte en un programador saludable"
  allowtransparency="true"
  allow="encrypted-media" 
/>


Muchas veces no le damos la importancia a nuestra salud física y mental, hasta que llega el síndrome de desgaste profesional o mejor conocido como burnout.