Async / Await?

Este post es una transcripción para estudiar de este vídeo de 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�n 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�deo 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.