Skip to content

Instantly share code, notes, and snippets.

View khriztianmoreno's full-sized avatar
👨‍💻
Frontend Developer

Khriztian Moreno khriztianmoreno

👨‍💻
Frontend Developer
View GitHub Profile

Destructuring es quizá una de las mas grandes características agregadas a ES6 (2015) y ampliamente utilizada hoy en día, por lo que comprender que es y poder leerlo fácilmente en el código se convierte en algo necesario en tu día a día.

¿Qué significa destructuring?

Es una expresión que te permite extraer o “destructurar” datos desde estructuras de datos como arreglos, objetos, mapas y sets y crear nuevas variables con ese dato en particular.

Te permite extraer propiedades de un objeto, items de un arreglo de una manera “sencilla” y de una sola vez.

Pensemos en una estructura de datos común y una tarea repetitiva

@khriztianmoreno
khriztianmoreno / README.md
Created December 16, 2020 14:18
Solucionando conflictos en git

Es posible que se realicen cambios en las dos ramas que generen conflictos a la hora de integrarlas (p.e. si se crea un archivo con el mismo nombre en las dos ramas o si se cambia la misma línea de un archivo). En este caso es necesario solucionar los conflictos a la hora de hacer el git merge.

Por ejemplo, suponiendo que en master se creó un archivo llamado prueba.txt con un texto Hola desde master y en mi-rama se creo otro archivo con el mismo nombre pero el texto Hola desde mi-rama, al hacer el git merge veríamos lo siguiente en la consola:

$ git checkout master
$ git merge mi-rama
Auto-merging prueba.txt
CONFLICT (add/add): Merge conflict in prueba.txt
Automatic merge failed; fix conflicts and then commit the result.
@khriztianmoreno
khriztianmoreno / croosy-widget.md
Last active May 5, 2020 20:44
Add croosy-widget to site

Croosy Widget

Para incluir el widget de croosy a tu sitio web debes agregar:

  • Estilos
<link href="//croosy-widget.netlify.app/static/css/widget.css" rel="stylesheet">
@khriztianmoreno
khriztianmoreno / headlessCMS.md
Last active January 28, 2020 03:23
Headless CMS y el desarrollo web moderno

Headless CMS: aprenda qué, por qué y cómo

  1. What is a Headless CMS? - ¿Qué es un CMS sin cabeza?
  2. What Does “Headless” CMS Mean Anyway? - ¿Qué quiere decir CMS "sin cabeza"?
  3. Why Use Headless CMS? - ¿Por qué usar CMS sin cabeza?
  4. Headless Architecture: How Headless CMS Works - Arquitectura headless: cómo funciona el CMS sin cabeza
  5. When to Use Headless CMS - Cuándo usar CMS sin cabeza
  6. Headless CMS Examples: Actual Usage in the Wild - Ejemplos de CMS sin cabeza: uso real en la naturaleza
  7. Headless CMS is the Future of Content - CMS sin cabeza es el futuro del contenido
@khriztianmoreno
khriztianmoreno / community-impact.md
Last active January 20, 2020 23:00
Comunity Impact

Comunity Impact

Hi, My Name is Cristian Moreno and I am Javascript developer at @Mattersupply, I organize the MedellinJS meetup the biggest JavaScript user group in Colombia and Avanet the oldest community in the city of Medellin, with more than 10 years. Here is my community impact in Web Technologies.

Community Organizer 👨🏼‍💻❤️👩🏻‍💻

1. MedellinJS (Organizer - Community Meetup)

Date: 11-2012 Since November of 2012, Julian Duque and many others started the Javascript Meetup and from the beginning, I was totally convinced about giving all to try to give a piece of my knowledge to the community!

@khriztianmoreno
khriztianmoreno / index.js
Last active November 20, 2019 22:57
Run JavaScript in the terminal from a gist with npx
#!/usr/bin/env node
const figlet = require('figlet');
const inquirer = require('inquirer');
const colors = require('colors/safe');
const COLORS = [
'black',
'red',
'green',
'yellow',
@khriztianmoreno
khriztianmoreno / talk.md
Last active November 19, 2019 00:29
npx Package Runner

NPX

You can’t be everywhere at once. Neither can node packages. But with a utility called npx — included in npm v5.2 and later — you can interact and run with node modules even if they’re not downloaded locally. The same is true for gists and remote branches of GitHub. As long as npm installed, your work can be wherever you are.

Overview

In this course we are going to be talking about a little utility called npx. If you have npm version 5.2 or above, then you already have npx installed on your machine. It enables you to play around with node packages in a way that wasn’t really easy before.

Have you ever wanted to run a locally installed node_module, but you didn’t really want to jump through hoops to do so? Or how about playing around with a package from the npm registry, but you don’t really want to install it globally yet? Well, npx is the tool for those things. You can even play around with experimental GitHub branches with npx, and so much more.

I find myself using npx all the time. It’s one of

Mongo Local Setup

Typical Mongo Service Route

mongodb://localhost:27017/pet-library

Installing mongo

@khriztianmoreno
khriztianmoreno / 1-hello-world.js
Last active June 21, 2019 04:09
Nodeschool.io - learnyounode
console.log("HELLO WORLD");
@khriztianmoreno
khriztianmoreno / react-router.md
Last active July 18, 2022 15:45
Enrutando en React (React Router v4)

Hoy veremos una librería que para crear rutas en nuestra aplicación. Esta librería es react-router-dom.

Hoy nos enfocaremos en la parte web de esta librería, que actualmente se encuentra en la versión ^6. Para estas nuevas versiones, react-router cambia un poco su filosofía, haciendo diferenciación entre el enrutamiento estático que usaban anteriormente y el enrutamiento dinámico actual.

¿Qué es enrutamiento estático?

Este es el enrutamiento más común, si alguna vez hemos trabajado con rutas en algún otro lenguaje de programación o con algún otro framework, seguramente lo habremos hecho usando enrutamiento estático.

En este, las rutas son definidas al momento en que nuestra aplicación es inicializada. Es decir, antes que nuestra aplicación se renderice.