Async / Await?

Este post es una transcripci贸n para estudiar de este v铆deode Fireship 馃敟馃敟馃敟

C贸mo funciona el event loop?

Tanto el browser como NodeJS corren siempre un hilo de proceso.

En una vuelta van a correr todo el c贸digo sincr贸nico. Pueden haber eventos asincr贸nicos que se correran luego como macrotareas y micro tareas.

Las macro tareas se ejecutan al comienzo del pr贸ximo ciclo del hilo. Las microtareas (p.e. promesas) se ejecutan antes de que el ciclo presente termine.

Promesas

fetch: es un API del navegador que ‘pide’ a una direcci贸n y nos deja ver cu谩l es la respuesta (como una promesa).

const url = 'https://jsonplaceholder.typicode.com/todos/1'
const promesa = fetch(url)

Promesa no va a tener el valor de la respuesta hasta que no sea resuelta (es asincr贸nica) por lo que tenemos que ponerla en cola (queue, o esperar a que se resuelva)

const promesa = fetch(url);
promesa.then( res => res.json() );
// mapear a json tambien es una promesa porque puede
// tomar mucho tiempo

Una caracteristica de esta promesas encadenadas (primero el fetch, luego el json, luego otra cosa) es que se pueden ‘desencadenar’

promesa.
聽 then( res => res.json() ).
聽 then( user => console.log('馃榾', user.title ) )

Por ejemplo,聽 atrapar un error durante la resoluci贸n de las promesas es una promesa especial聽llamada catch

promesa.
聽 then( res => res.json() ).
聽 then( user => console.log('馃榾', user.title ) ).
  catch(err => console.error('馃槹',err))

Non-Blocking code

Imagina esto:

const Bloqueadora = () => {
  let i =0;
  while(i<1000000000) i++;
  return 'ya termin茅 de entorpecer tu hilo de proceso'
}

Esta tarea frenar谩 el hilo de proceso hasta que culmine de contar. Como es algo que nos va a retrasar, podemos hacerla una promesa, y que retorne luego en el futuro

const Bloqueadora = () => {
  return new Promise((resolve, reject) => {
    let i =0;
    while(i<1000000000) i++;
    return 'ya termin茅 de entorpecer tu hilo de proceso'
  })
}

Pero hacerlo de esta forma est谩 metiendo a la promesa en el ciclo principal. Lo que necesitamos que est茅 en el ciclo es la resoluci贸n聽 de la promesa.

const Bloqueadora = () => {
  return Promise.resolve().then( x => {
  let i =0;
  while(i<1000000000) i++;
  return 'ya termin茅 de entorpecer tu hilo de proceso'
})

Async / await y la magia de ES6 馃敭馃敭馃敭

async y await son una forma de hacer m谩s bonita la sintaxis de promesas, sobre todo cuando hay promesas encadenadas:

promiseHell.png

para evitar esto se pueden crear funciones que retornen promesas as铆:

const getFruta = async (name) => {
  const fruta = {
  pineapple: '馃崓',
  peach: '馃崙',
  strawberry: '馃崜'
  }
  await delay(1000)
  return fruta[name];
}

const hasJugo = async () => {
  const a = await getFruta('pineapple');
  const b = await getFruta('peach');
  return [a, b];
}

Pero esto introduce otro problema, que ahora hasJugo est谩 creando dos promesas consecutivas, en vez de ser paralelas. Para hacer promesas concurrentes no hay magia :(:

const hasJugo = async () => {
  const a = getFruta('pineapple');
  const b = getFruta('peach');
  return Promise.all([a, b]);
}

Ese Promise.all hace que todas las promesas se realicen de manera concurrente.

Normas de buena educaci贸n

Es de buena educaci贸n que toda la promesa tenga manejo de posibles errores:

const hasJugo = async () => {
try{
  const a = getFruta('pineapple');
  const b = getFruta('peach');

  throw 'la fruta estaba rancia!!!'

  return Promise.all([a, b]);
} catch(err){
    console.error(鈽,err)
    //y aca se puede o lanzar un error 贸
    //retornar un mensaje
    //return 'el cliente no se va a dar cuenta'
    //throw 'sabe a 馃挬'
    //return: no modifica la l贸gica del programa
    //throw: el programa tendr谩 que hacer un catch
  }
}

Tips de cierre:

hacer await dentro de un map, o cualquiera de esas higher order functions no espera a la resoluci贸n de la promesa, la deja ejecutando concurrentemente.

Si se quiere que un loop espere a la resoluci贸n de cada promesa antes de continuar con la siguiente se debe hacer un ciclo for:

const fruits = ['peach', 'pineapple', 'strawberry']
const getPromesa = async () => {
  for(const f of fruits){
    const emoji = await getFruta(f);
    console.log(emoji)
  }
}

si se quiere que la cosa sea concurrente, se puede usar el map (que dije que no se usaba)

const fruits = ['peach', 'pineapple', 'strawberry']

const promesas = fruits.map(v=>getFruta(v));
const forFrutas= async () => {
  for await (const fruta of fruits){
  console.log(fruta)
  }
}

o se pueden ejecutar ciertas partes del programa a que esperen la resoluci贸n de una promesa sin bloquear as铆:

const inspection = async () ={
  if(await getFruit('peach') === '馃崙'){
    console.log('tiene forma de pompis')
  }
}

#TodayILearned React and external components interaction in codepen.

TL;DR: React is not that bad.

I started learning React a month ago and completed the freecodecamp React section. IDKW but had this feeling that I won’t get too far in case I needed to develop a form on my own, let alone an application. So I decided to deepen a little further into the React parallel universe.

I come from a vanilla background (plain html, js and css… maybe a little bootstrap). I decided to take that route with the intention of mastering the basics and to grow my knowledge from there. The thing is besides HTML, CSS and JS are two humongous beasts to conquer, and that the more that I studied them, the less I felt I was able to accomplish.

Enters React.

React gave me the impression to be more a lego set than a beast. It felt more like a set of pieces to build purple lizards, winged houses and underwater motorcycles.

Compared with other technologies like JS the react learning curve seems sorter and shallow. I’m super humble when saying this because I know that my knowledge is really (really really) finite, and I know I might change my opinion in the future 1.

My point here is I don’t remember the last time I was this excited and committed that I studied 6 hours a day something and started filling my notebooks with sketches and findings.

One particular step I found to be hard was to use React in my favourite prototype platform: Codepen. And it was actually not that difficult, to to came to this realization is. So lets get to the recipe, shall we?

First you’ll need to add the JS external references:

Second, and this is the tricky part, you’ll need to add a CSS reference for the semantic-ui components. Normally when you import a component via npm, it comes with its style sheet, but in codepen you’ll need to do that part manually:

And the one last part of the trick is that I needed to create this quick references for each component I needed to use

 

Post-it! css colors via custom properties via javascript

So today i was finnishing up one of my FCC projects (the random quote machine generator) and I thought this idea where each quote would be writen in a post-it note.

After a couple of weeks procastinating I finally came up with a solution for wich I needed the hex representation of each post-it color:

Post it Super Sticky Lined Notes Miami Collection 4 x 6 ...

Then I duckduckgogled for a tool and came up with a free color picker tool wich I find handy since it depends a lot on you having to use the Win + Shift + S screen capture trick. This tool allows for a quick way to get each color hex representation:

With everything setted up, I created my css constants (custom properties) for each collection:

:root{
--miami-blue : #71CAC4;
--miami-green : #E1E646;
--miami-red : #F3778F;
--miami-pink : #F49EBB;
--miami-orange : #FBAD4B;
}

I’m starting to think all this idea might be a bit overkill, because then I needed to do an array in JS with the names of each collor, so I could pick one at random:

const _background = ['--miami-blue',
'--miami-green',
'--miami-red',
'--miami-pink',
'--miami-orange'];

let background = _background[Math.floor(Math.random()*_background.length)];

Only to then be able to asign it to something:

 var colorValue = styles.getPropertyValue(background);

I’m starting to think this is too much hassle, and that maybe just creating a color array in JS and call it a day…

CSS + JS D铆a 1

Si no puedes hacer un curso a la vez, mejor intenta hacer dos cursos a la vez.

box-shadow inset: se proyecta la sombra hacia adentro del elemento, como si el bot贸n fuera una depresi贸n.

Transition: los argumentos son all (?), el tipo de transici贸n y el tiempo de transici贸n. El tiempo tiene que ponerse en unidades de tiempo con una ‘s’ al final o la cosa no funciona.

Document.querySelectorAll puede:

  • Encontrar un div con una clase.
  • Encontrar un boton con la misma clase que el div
  • Pero si le preguntas que encuentre todos los elementos de la clase, s贸lo va a retornar el div. El bot贸n se le olvida en el camino.

Tengo una teor铆a:

  • o no se le puede adjuntar un evento de transitionend a un bot贸n,
  • o no s茅 c贸mo hacerlo

Abrir una empresa en Per煤.

Un amigo y yo contratamos un gestor para abrir una empresa en el Per煤. La idea del gestor vino porque los dos trabajamos y no tenemos mucho chance de hacer diligencias, y bueno, porque somos venezolanos malacostumbrados a los gestores.

De lo que he entendido, no hace falta que nadie te ayude, y buscando en internet hay bastante informaci贸n En teor铆a los pasos son

  1. B煤squeda y reserva de nombre聽
  2. Elaboraci贸n del Acto Constitutivo (Minuta)
  3. Abono de capital y bienes
  4. Elaboraci贸n de Escritura P煤blica
  5. Inscripci贸n en Registros P煤blicos
  6. Inscripci贸n al RUC para Persona Jur铆dica

Pero en la pr谩ctica, hay un par de cosas que no te explican.

1) Necesitas PTP, carnet de extranjer铆a o un socio peruano

Sin esto, est谩s muerto en el agua. Sin embargo, cuando vayas a hacer el acta constitutiva puedes poner alg煤n amigo peruano, y asignarle un porcentaje bajo de participaci贸n, o puedes sacarlo luego de que termines todo el registro.

2) La reserva de nombre la puedes hacer desde tu casa.

Creo que esto no lo sabe el gestor que nos est谩 ayudando. Para lo de la reserva necesitas pagar 20 soles en el registro publico donde vayas a buscar la reserva. La direcci贸n para el registro es ac谩

3) La minuta la tiene que hacer un abogado (?)

Imagino que si yo hubiera ido a la notar铆a ellos me ofrec铆an el servicio. La verdad no estoy muy seguro, pero s铆 estoy seguro de que un abogado me cobr贸 (~100$) por hacer eso de la minuta. Por si acaso, voy a poner una copia de mi minuta ac谩. El documento que est谩 al final es el abono de capital y bienes.

Si no tienes una cuenta o si no tienes dinero, simplemente no abonas capital, si no que abonas bienes. Esto lo llevas a una notar铆a. El costo de la notar铆a var铆a, pero va a ser algo cercano a 100$ en Per煤. Ese d铆a tienen que ir todos los socios, y sus conyugues, as铆 que pila con esto. Mi socia/conyugue tiene un horario de trabajo restrictivo y le fue muy dif铆cil cuadrar para ir.

2) Tienes que sacar tu permiso para firmar contratos otra vez

Lo tienes que sacar cuando vayas a llevar la minuta a la notar铆a porque ah铆 vas a firmar.

4) No hace falta un gerente peruano si eres venezolano

Lo que s铆 hace falta es que al menos un socio sea peruano. Tener una empresa en Per煤 no te da derecho a carnet de extranjer铆a ni modifica de ninguna manera tu condici贸n migratoria.

5) no hace falta tener una visa de inversionista ni 25000$

Con un socio peruano, as铆 sea con 1% de las acciones es suficiente.

Espero que esto aclare algunas dudas. Si todav铆a no est谩s muy claro de qu茅 hacer, deja una pregunta en los comentarios.

Suerte!

 

 

Apagar backlight VELOCIFIRE TKL78

TL;DR: Fn + 鈫 o 鈫

teclado

No s茅 decir exactamente qu茅 tienen los teclados mec谩nicos. El primero que vi fue un Das de cherrys rojos sin el layout de las teclas que un amigo se compr贸 hace unos 10 a帽os, y fue una mezcla entre amor a primera vista y 驴qu茅 le pas贸 a mi pana que boto 100$ en esta mierda que ni teclas tiene?

En lo personal, he pasado de un Reddragon de switch azules al que le instal茅 switches negros, a un Velocifire de switchs marrones en un periodo de unos 5 a帽os… Supongo que en total he gastado unos 80$ en total.

Recientemente un amigo me pregunt贸 porqu茅 gastaba dinero en eso. La verdad en el momento no supe responder. Mi trabajo consiste entre otras cosas en redactar manuales, informes, correos y programo como hobby. Paso unas 8 horas al d铆a en frente de mi computadora, as铆 que de verdad mi intensi贸n es mi experiencia de uso del computador sea lo mejor posible, y tengo una buena PC, una silla horrible que pienso cambiar, y ya le estoy echando el ojo a otro monitor.

El teclado es una herramienta. Es ch茅vere tener buenas herramientas, pero no es indispensable para mi trabajo.

Este teclado tiene como una textura rara en las teclas que no me gusta mucho. La tecla baila cuando la tocas, y esto era algo que no ten铆an ni las teclas azules del Reddragon, ni los switches negros que compre luego.

Estoy en mi primera semana de uso, as铆 que no me hago juicios… Todav铆a.

Cosas del d铆a 3 de javascript30:

Hoy es el d铆a 7, pero me salt茅 trabajar el d铆a 4 馃槮 que era domingo, y el d铆a 5 y 6 estuve programando una landing page

  • El d铆a 3 aprend铆:
  • Document.documentElement es todo el HTML
    document.documentelement.style es todo el css. Pero todo, desgranado. (loguealo para que veas)
  • desde JS puedes cambiar cualquier propiedad del css con document.documentelement.style.setproperty xD
  • en document.documentelement.style.setproperty no se van a ver las variables de CSS porque ah锟 ya est锟 todo procesado.
  • cuando voy a inicializar algo que puede tener valor undefined, puedo hacer or a la inicializaci锟絥 const subfix = this.dataset.sizing || ” ;
  • data-sizing puede ser utilizado para poner unidades a variables de los inputs (como px o deg)
  • Poner name a un input que va a controlar una variable de CSS puede ayudar al vincularlos en JS

Todo eso estuvo metido en un v锟絛eo de 13 minutos.

JS30 d铆a 2

Voy por el d铆a 5 y no he publicado los otros d铆as as铆 que…
Cosas que aprend铆 con el proyecto del reloj:

  • no est谩 mal utilizar clases que no necesariamente est茅n definidas en los estilos. Es para poder acceder a ese elemento desde JS30
  • se pueden temporizar eventos setInterval(setAngles, 1000);
  • las comillas “ son s煤per importantes (`rotate(${degSeconds}deg)`)
  • Se puede apagar una propiedad de estilo de un elemento hand.style.transition = ‘none’;
  • Se puede volver a encender la propiedad asignandole ” secundero.style.transition=”;

#javascript30 d铆a 1

Quiero hacer uno de esos #100DaysOfCode y pens茅 comenzar con algo m谩s peque帽o como el #javascript30.

Las cosas que he aprendido nuevas en el d铆a uno son:

  • HTML5 tiene un tipo de dato custom data- que se utiliza para guardar datos que pueden requerirse por javascript. En los v铆deos de wes bos utiliza el tipo de dato custom data-key.
  • document.querySelector te deja selecciona un elemento del DOM. Se trae todo el elemento como est谩 escrito en el DOM ej. <audiodata-key=”76″src=”sounds/tink.wav”></audio>
  • addEventListener Puedo escuchar a cosas que haga el usuario, pero tambi茅n puedo escuchar otros eventos como cuando una transici贸n termina.
  • Puedo escribir c贸digo en la consola del navegador xD
  • Cuando no entiendo qu茅 significa this, puedo hacer console.log(this)

Cosas que no entend铆:

  • en `audio[data-key=”${e.keyCode}”]` porqu茅 usa los “?

Eso de los “ resulta que es un tipo de string que permite dos cosas:

  1. hacer string multi l铆neas
  2. hacer strings que permiten evaluar funciones, o poner nombres de variables adentro.

D铆a 1 listo. Estoy bajando el v铆deo del D铆a 2 por si acaso.

Git: “already up to date” pero no…

Aprender rompiendo puede resultar en que pasas mucho tiempo reparando las partes rotas.

El problema: mi compa帽ero y yo creamos ramas diferentes de un repositorio, (jugamos a hacer commits, push y a cambiarnos de ramas y seguimos desarrollando cada qui茅n por su cuenta) y cuando necesitamos integrar de nuevo nuestras ramas al repo principal nos encontramos con este mensajito: “already up to date”.

Pero no, los archivos de los tres repositorios son diferentes y de alguna manera los repositorios est谩n al d铆a.

Una b煤squeda en google arroja muchos resultados, y en particular este de stackoverflow parece prometedor聽la cuesti贸n es que despu茅s de leerlo, todav铆a no entiendo ni el problema, ni la soluci贸n.

Luego de dos d铆a de flagelarme acud铆 a los hechiceros de FccCaracas, donde me recomendaron el siguiente procedimiento:

git checkout master && git reset HEAD --hard && git clean -dfx && git pull origin master

Esta primera l铆nea te ubica en la rama m谩ster, y hace ese reset. De todo lo que le铆, aprend铆 que reset –hard y rebase no son comandos tan comunes, as铆 que hay que estar bastante seguros de si es necesario utilizarlos.

Git Clean -dfx limpia los archivos que no son necesarios del repositorio (ac谩 me vol茅 las DLL y la base de datos de la aplicaci贸n que luego tuve que buscar otra vez). Y el 煤ltimo git pull origin master es para sincronizar el master local con los cambios del master en origin.

Ac谩 me queda la duda de s铆 luego de ese 煤ltimo pull deb铆 sincronizar mi master con el de origin 馃槮

git checkout Feature1 && git pull origin master

git checkout feature1 hace que se active mi repositorio, y al hacer el pull de master me traigo los posibles cambios que est茅n all谩. Ac谩 hay que ir a la herramienta de merge (en mi caso es Visual Studio) y solucionar los conflictos a mano. Luego los cambios se fijan con un commit

git add . && git commit -m "arreglar diferencias entre Feature1 y master" && git push -u origin Feature1

El 煤ltimo push lleva la rama Feature1 al origen. Hasta ac谩 todo bien. Luego con la herramienta de VSTS realic茅 un pull request de Feature1 y master et voila.

Tuve que repetir el mismo proceso con la rama Feature2 de mi amigo.

Post-mortem

Me hubiera gustado pedir ayuda a un amigo que me explicara lo b谩sico para no estar inventando. Aprend铆 m谩s da帽ando, pero tambi茅n invert铆 much铆simo tiempo.

Tambi茅n me hubiera gustado comenzar con un proyecto de una persona: mi repo y el de mi amigo estaban configurados diferente (el m铆o no hac铆a tracking del repo origin/feature) por lo que solucionar los dos problemas tom贸 dos soluciones diferentes.

Y bueno, ya vi que si tengo un par de horas trancado, mejor llamar a un amigo.