DEV Community: Kevin Gracia Orejuela

¿Por qué la programación es divertida?

Kevin Gracia Orejuela — Wed, 21 Sep 2022 14:02:56 +0000

En la vida siempre estamos buscando diversión, sentirnos bien, contentos con las cosas que hacemos, aunque a medida que pasan los años, algunos en los cuáles me incluyo parcialmente vamos perdiendo el interés en hacer lo que nos divierte y empezamos a ver las cosas desde otro punto de vista, hoy vamos a recordar que satisfacciones nos trae la programación:

1) La satisfacción de hacer cosas
Así como un niño se deleita haciendo un pastel de lodo, así el adulto disfruta construyendo cosas aunque difieran un tanto del lodo, de modo que deseamos estar en actividad constante, de movernos continuamente, creo que quedarnos en un solo lugar sin poder mover una pestaña va en contra de nuestra naturaleza como seres humanos siempre estamos en movimiento no solo nuestro cuerpo visible como las extremidades(brazos, pies) sino también lo que no se ve como la sangre siempre está en circulación, hacer cosas y más aún si sirven para un propósito con recompensa nos llenará de alegría.

2) Placer de hacer cosas útiles para los demás
Todos anhelamos que otras personas usen lo que hemos creados y que claro está les sea de utilidad, nos agrada sentirnos que estamos sirviendo de aporte para algo más grande que podemos cambiar la vida de una persona, de la sociedad o del mundo entero, y a esto puede ayudarnos la programación podemos crear aplicaciones o sistemas que sean de gran utilidad, nuestro código puede llegar a hacer usado por miles, millones o billones de personas.

3) La fascinación de crear objetos complejos
Lograr reunir distintos esfuerzos, conocimientos, habilidades, investigaciones de otras personas en una sola suma, crea algo complejo que en un muchas ocasiones nos ha costado muchas horas de pensamiento profundo, de encontrar la pieza faltante en el rompecabezas de nuestro código, ocasiones de ponernos la bata de científicos y empezar a examinar objetivamente cada parte de nuestro trabajo para finalmente entregar algo a simple vista sencillo pero internamente complejo.

4) La satisfacción del aprendizaje continuo
La programación y el mundo IT en general tiene una naturaleza no repetitiva. Siempre hay un problema nuevo que resolver, lo cual abre nuestra curiosidad hacía nuevas fronteras, haciendo que una vez resuelto siempre se aprenda algo nuevo en ocasiones algo práctico, otras algo teórico y a veces ambos.

Para finalizar quiero expresar que en lo personal que programar es semejante a cualquier otro arte como, pintar, dibujar, cantar, y otras actividades más. Cada persona tendrá su forma de expresar el arte y en código se vuelve igual tiene esa flexibilidad de permitirnos hacer lo que deseamos, como un lienzo en blanco listo para empezar a pintar con nuestros óleos o como el barro listo para ser moldeado y darle la forma que deseamos.

React manejo de estado con objetos

Kevin Gracia Orejuela — Thu, 15 Sep 2022 16:17:39 +0000

El manejo de estados en React es muy flexible pues permite manejar cualquier tipo de valor de Javascript pero no solo los de uso frecuente como son strings, booleans, numbers los cuales son inmutables es decir no se cambian en sentido profundo lo que se hace es una nueva representación para reemplazar un valor

const [name, setName] = useState("Kevin");

const [number, setNumber] = useState(7);

const [adult, setAdult] = useState(false);

Pero en ocasiones podemos tener más 5 estados que hacen referencia a una misma cosa en este caso puede ser persona y puede llegar a tener más atributos por lo tanto podemos manejarlo como un objeto, así se podría ver de una forma más sencilla que el ejemplo anterior multiplicado por 5 de modo que se puede quedar así


const [persona, setPersona] = useState({name: "", number: null, adult: null});

Manejo más simple

import { useState } from 'react';

export default function Form() {
  const [person, setPerson] = useState({
    firstName: 'Barbara',
    lastName: 'Hepworth',
    email: 'bhepworth@sculpture.com'
  });

  function handleChange(e) {
    setPerson({
      ...person,
      [e.target.name]: e.target.value
    });
  }

  return (
    <>
      <label>
        First name:
        <input
          name="firstName"
          value={person.firstName}
          onChange={handleChange}
        />
      </label>
      <label>
        Last name:
        <input
          name="lastName"
          value={person.lastName}
          onChange={handleChange}
        />
      </label>
      <label>
        Email:
        <input
          name="email"
          value={person.email}
          onChange={handleChange}
        />
      </label>
      <p>
        {person.firstName}{' '}
        {person.lastName}{' '}
        ({person.email})
      </p>
    </>
  );
}

Referencias para profundizar:

https://beta.reactjs.org/learn/updating-objects-in-state

https://blog.logrocket.com/using-react-usestate-object/

https://daveceddia.com/usestate-hook-examples/

Tips Componente Text de React Native

Kevin Gracia Orejuela — Thu, 15 Sep 2022 16:14:48 +0000

Una de las particularidades de React Native a diferencia de React en la Web es el uso de exclusivo de la etiqueta o componente predeterminado para el tratamiento de textos, pero este en ocasiones genera ciertas particularidades.

Empecemos con el primer ejemplo de antemano avisando también que por defecto el manejo de estilos en cuanto posicionamiento en React Native se usa Flexbox y uso posición natural es columnas en lugar de filas(rows) como en la web

El ejemplo es el siguiente: se tiene un contenedor donde se agrupan distintas propiedades de texto
así luce el código



<View style={styles.avatarTextContainer}>
          <Text fontWeight={'bold'} fontSize={'subheading'}>
            {fullName}
          </Text>

          <Text
            testID="repositoryDescription"
            style={styles.textDescription}
            color="textSecondary"
          >
            {description}
          </Text>

          <View style={styles.languageContainer}>
            <Text color={'textWhite'}>{language}</Text>
          </View>
        </View>

Los estilos



const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    padding: 5,
  },
  avatarContainer: {
    flexDirection: 'row',
  },
  avatarTextContainer: {
    justifyContent: 'space-between',
    marginLeft: 15,
  },
  languageContainer: {
    backgroundColor: theme.colors.primary,
    padding: 4,
    borderRadius: 2,
  },
  textDescription: {
    flexShrink: 1,
  },
  counterContainer: { justifyContent: 'center', alignItems: 'center' },
  footerItemContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginTop: 10,
  },
});

Así luce la vista

El detalle es que el atributo de lenguaje de programación que está de azul debería lucir como un botón y no ocupar toda la fila disponible, aunque se puede ajustar el tamaño del mismo en su sección de estilos llamado "languageContainer" usando width y height otra opción es usar la propiedad "align-self": "flex-start" de modo que ahora lucirá así:

Ahora observemos otro inconveniente con el texto de la descripción cuando este es muy largo, empiezan a desbordarse de la pantalla, aquí el comportamiento esperando es que pase a la siguiente línea pero luce así:

Esto lo podemos solucionar desde el contenedor principal del texto "avatarTextContainer" usando la propiedad de estilo "flexShrink": 1 para que el los hijos se logren encoger adecuadamente con lo que hora luce así:

Código Final



import { Image, StyleSheet, View } from 'react-native';
import React from 'react';
import Text from './Text';
import theme from '../theme';

const RepositoryItem = ({ repository }) => {
  const {
    id,
    fullName,
    description,
    language,
    forksCount,
    stargazersCount,
    ratingAverage,
    reviewCount,
    ownerAvatarUrl,
    url,
  } = repository;

  const counterKsuffix = (amount) => {
    return amount >= 1000
      ? `${Math.round(amount / 100) / 10}k`
      : String(amount);
  };
  return (
    <View style={styles.container}>
      <View style={styles.avatarContainer}>
        <Image style={styles.avatarImg} source={{ uri: ownerAvatarUrl }} />
        <View style={styles.avatarTextContainer}>
          <Text fontWeight={'bold'} fontSize={'subheading'}>
            {fullName}
          </Text>

          <Text
            testID="repositoryDescription"
            style={styles.textDescription}
            color="textSecondary"
          >
            {description}
          </Text>

          <View style={styles.languageContainer}>
            <Text color={'textWhite'}>{language}</Text>
          </View>
        </View>
      </View>
      <View style={styles.footerItemContainer}>
        <View style={styles.counterContainer}>
          <Text fontWeight={'bold'}>{counterKsuffix(forksCount)}</Text>
          <Text>Forks</Text>
        </View>
        <View style={styles.counterContainer}>
          <Text fontWeight={'bold'}>{counterKsuffix(stargazersCount)}</Text>
          <Text>Stars</Text>
        </View>
        <View style={styles.counterContainer}>
          <Text fontWeight={'bold'}>{counterKsuffix(ratingAverage)}</Text>
          <Text>Rating</Text>
        </View>
        <View style={styles.counterContainer}>
          <Text fontWeight={'bold'}>{counterKsuffix(reviewCount)}</Text>
          <Text>Reviews</Text>
        </View>
      </View>
    </View>
  );
};

export default RepositoryItem;

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    padding: 5,
  },
  avatarContainer: {
    flexDirection: 'row',
  },
  avatarImg: { height: 80, width: 80, borderRadius: 7 },
  avatarTextContainer: {
    justifyContent: 'space-between',
    flexShrink: 1,
    marginLeft: 15,
  },
  languageContainer: {
    alignSelf: 'flex-start',
    backgroundColor: theme.colors.primary,
    padding: 4,
    borderRadius: 2,
  },
  textDescription: {
    flexShrink: 1,
  },
  counterContainer: { justifyContent: 'center', alignItems: 'center' },
  footerItemContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginTop: 10,
  },
});

Lecciones del libro "Almanack of Naval Ravikant"

Kevin Gracia Orejuela — Thu, 15 Sep 2022 16:11:43 +0000

Descubrí cierto día este libro escuchando un podcast, acá dejo las lecciones que me parecen más importantes y aplicables en mi vida:

Quiero empezar con esta frase del mismo:

Creo que los humanos deberíamos aspirar a tener conocimientos sobre ciertas cosas y a que nos pagaran por ello.

Construye una gran reputación

Es bien conocida la frase "una vez que saben que eres el mejor en hacer un trabajo eres al primero al que llaman" hacerte confiable en cualquier aspecto de la vida tanto profesional, personal es un plus que te ayudará a abrirte camino, y sobre todo como lo dice el mismo Naval:

El juicio (especialmente el juicio demostrado, con una alta responsabilidad y un claro historial) es fundamental.

Tomar decisiones acertadas marca la diferencia, ser consistente en tus principios y convicciones juegan un papel importante en el mundo sobre todo en el de los negocios.

También me recuerda mucho a una escena de la serie "Suits" donde Harvey Specter dice la frase "La primera impresión cuenta, si empiezas en la última fila no llegarás al frente
"La primera impresión cuenta, sí empiezas en la última fila no llegarás al frente"

Gestión del tiempo

Primero fijarse un precio por hora altísimo quizá y no habla de la media o lo que se suele pagar en ciertos países o aún el que puedas tener en tu actual empleo, si no realmente elevado algo así como $5000 por hora y es acertado con eso empezarás a valorar aún más el tiempo, y podrás medir tus esfuerzos, por tanto, entran en juego cosas como la subcontratación algo que en ocasiones no lo vemos muy claro pues queremos hacer nosotros mismos todas las tareas del hogar cuando incluso podemos delegar y sacarles beneficio multiplicas invirtiendo mejor nuestro tiempo.

Para profundizar mucho mejor este punto recomiendo leer el libro de Tim Ferris "La semana laboral de 4 horas" donde encontraras ejemplos claros e incluso extremos de como los "nuevos ricos" subcontratan hasta asistentes personales para enviarles mensajes a sus esposas y hacer las tareas habituales como pagar facturas, cocinar, etc

Gana con tu mente, no con tu tiempo

Mientras hagas lo que quieres, no estás perdiendo el tiempo. Pero si no pasas tu tiempo haciendo lo que quieres, y no estás ganando en otro sentido o al menos aprendiendo, ¿qué demonios estás haciendo?

Entender los juegos

Juegos de suma cero: donde las ganancias de un jugador son las pérdidas de otro - claro está que los debemos evitar un ejemplo es el estatus es un juego de suma 0 solo una distracción donde empezamos a gastar de forma irracional en cosas que no necesitamos

Juegos de suma positiva: donde si un jugador gana todos los demás también, un ejemplo es la creación de riqueza

Juega a resolver problemas y gana dinero por efecto secundario, hacer cosas que disfrutes y te den energía, aquí dice que si otros compiten contra el van a perder porque ellos trabajarán duro mientras el solo juega y puede hacer 16 horas al día todos lo días en cambio lo que trabajan no.

Nadie en el mundo te va a ganar siendo tu.

3 tipos de suerte

La ciega: cosas que ocurren y que están fuera de nuestro control.
La derivada de la persistencia: la que da el trabajo duro, perseverancia
La sensible: es decir la que se da porque tu estás listo para que te encuentre es decir si eres un profesional muy bueno en tu campo eres tu a quien acudirán.

Juega a largo plazo

Si no te ves trabajando con alguien de por vida, no trabajes ni un solo día con esa persona, optimizar el largo plazo vs el corto plazo siempre jugara a nuestro favor

Aprendizaje perpetuo

"Si eres una máquina de aprendizaje perpetuo, nunca se te agotarán las opciones para hacer dinero", en este punto creo que está muy claro el nunca para de aprender es importante para la producción de nuevas ideas, tener los inputs adecuadas genera los outputs correctos, este conocimiento también nos ayudará a entender mejor el mundo que nos rodea y detectar las oportunidades donde otras personas no ven nada.

Primero, lo sabes. Luego, lo entiendes. Luego, puedes explicarlo. Luego, puedes sentirlo. Finalmente, lo eres.

Entiende siempre las bases.

El conocimiento específico no se puede enseñar pero si aprender. Si se enseñan no son lo suficientemente valiosas para que la sociedad te pago por eso y puedas hacerte rico.

La verdad es que no leo para mejorar. Leo por curiosidad e interés. El mejor libro es el que devorarás.

Felicidad como una habilidad

Al verla como una habilidad nos damos toda la responsabilidad a nosotros mismo de decir que hacer con ella y como construirla, de modo que empezaremos a trabajar en ella y hacer los esfuerzos necesarias.
Es como desarrollar tus músculos o perder peso.

Dinero como una habilidad

Utiliza tu criterio para averiguar en qué tipo de entornos puedes prosperar y, a continuación, crea uno de esos entornos a tu alrededor para que, estadísticamente, tengas posibilidades de triunfar.
Algo así como el skill stacking de lo que habla Scott Adams en su libro "Como fracasar en todo y aún así triunfar", es muy difícil estar en el 2% de una sola cosa pero es mucho menos estar en el 20% de varías cosas

Salud la base de todo

Física.
Mental.
Esperitual.

Cuídalas son tu mayor tesoro, sin eso no te podrías levantar de la cama todos los días.
Cuanto más duro sea tu entrenamiento, más fácil será tu día.

Notas finales

¿Y si esta vida es el paraíso que se nos prometió, y lo estamos desperdiciando?

Todos los beneficios en la vida provienen del interés compuesto, ya sea en el dinero, las relaciones, el amor, la salud, las actividades o los hábitos

Pruébalo todo, pruébalo por ti mismo, sé escéptico, quédate con lo que te es útil y descarta lo que no.

Porque al final no puedo enseñarte nada, solo puedo inspirarte y quizás darte unos consejos que quizá puedas recordar

Podcast Kaizen:
Parte 1
Parte 2

Hilo de "Como hacerse rico sin depender de la suerte"

Libro:
Libro Alamanack of Naval Ravikant

Promesas en Javascript para React y TypeScript

Kevin Gracia Orejuela — Thu, 15 Sep 2022 16:09:08 +0000

Para empezar a hablar sobre promesas debemos conocer el concepto de asincronismo como ya lo sabemos es realizar acciones o tareas sin esperar que un proceso anterior se realice, algo así como en segundo plano para ejemplificar más fácil este concepto, entonces que es una promesa como dice el significado mismo de la palabra algo que esperamos que se cumpla en un futuro próximo aunque también puede no cumplirse y fallar.

Primero empecemos con un ejemplo de la vida cotidiana imaginemos que vamos a comprar comida 🍔 una hamburguesa está bien, llegamos al mostrador pedimos la hamburguesa, pagamos, nos dan un ticket con el cual debemos esperar y quedaremos pendiente, mientras nos preparan la hamburguesa tomamos el celular quizá escribimos un mensaje o revisamos las redes sociales esperando, una vez esta lista, nos llaman, entregamos el ticket y recibimos lo que esperamos a cambio nuestra comida, un simple caso de éxito sin embargo también puede fallar puede que nos llamen y nos digan que las hamburguesas se terminaron, entonces ambos escenarios son posibles en esa simplicidad se basan las promesas aunque en javascript no es tan sencillo pero ya lo veremos a continuación

El por qué de las promesas? el código asíncrono tiene su forma de manejarse y debido a que pueden surgir eventos innesperados como (fallos de red) hay la necesidad de manejar errores por lo tanto usar solo callbacks o devoluciones de llamada puede ser muy complejo, las promesas tratan de solucionar este tema

Qué es una promesa en JavaScript es un objeto que devolverá un valor en el futuro

Crear

Quizá estemos desarrollando una API de lado del backend que se va a utilizar luego por lo que podemos crear una función que retorne una promesa y se pueda consumir de lado del front o en algún servicio en específico y asegurar un mejor manejo del flujo de los datos y los errores

Por lo tanto existen tres estados posibles en la creación de una promesa:

Éxito - resolver -> resolve(value)
Fracaso - rechazar -> reject (error)
Pendiente (pending)

Consumir

Quizá estemos desarrollando una aplicación en el Fronted y tenemos que consumir APIs que retornan promesas, un ejemplo es la api de Fetch aunque puede ser cualquiera, entonces debemos conocer como estas funcionan para hacer el uso correctamente

Entonces para el consumo de una promesa existen los siguiente métodos conocidos como manejadores

.then() -> si la promesa se resuelve con éxito
.catch() -> si la promesa falla
.finally() -> si la promesa ha sido ejecutada sea éxito o falla

Y bueno antes de entrar al código con todo este preámbulo lo más importante es saber para que las vas a usar en tu día a día programando en javascript y son dos usos esenciales, van de la mano pero puede que un día estemos de un lado pero al siguiente estemos del otro en sí es como back y front

Sintaxis
Para su creación se utiliza new Promise, recibe una función ejecutora que tiene dos callbacks resolve y reject

new Promise( function (resolve, reject) { ... } ) ;

Creación

const promiseExample = new Promise( (resolve, reject) => {

     if (condition) {
       resolve("data ...");
    } else {
       reject( "error");
    }

});

Consumo

promiseExample.then( (data) => { ... } )
                            .catch( (err) => { ... } )

Ejemplo real

Tenemos un objeto que contiene información de autos de lujo vamos a crear una función que nos permita buscar estos autos por su id y retornar una promesa para us uso posterior

const autos = {

   buggati: {
     nombre: 'Veyron'
     marca: 'Buggati'
   },

   camaro:{
     nombre: 'Camaro',
    marca: 'Chevrolet'
   },

  mustang:{
     nombre: 'Mustang',
     marca: 'Ford'
   }

}

export const buscarAuto = ( id ) => {

  const auto = autos[id];

  return new Promise( (resolve, reject) =>{
    if(auto){
       resolve(auto);

    } else {
      reject(`No existe un auto con el ${id}`);
     }

});


}

Ahora vamos a usar la promesa quizá en otro archivo, en el que podemos importar la función

const autoId1= 'buggati';

buscarAuto ( autoId1 )
.then( auto => { 
  console.log(`El auto ${auto.nombre} existe`);
}
.catch ( err => { 
    alert(err);
})

Encadenamiento de promesas

En ocasiones al consumir una promesa esta devuelve otra promesa y así puede pasar hasta n veces, por lo que nos vemos obligados a usar varios manjeadores .then() para poder obtener el resultado esperado un ejemplo es al usar el mecanismos fetch

En este ejemplo hacemos solicitud a una api y primero obtenemos el archivo json con los datos luego en estos datos obtenemos el que deseamos

fetch('api/encadenamiento-promesas/pokemon.json')
.then( response => response.json() )
.then( pokemon => console.log(pokemon.name) )

Y así podemos seguir encadenando promesas de acuerdo al requerimiento, en un próximo artículo veremos como solucionar esto con async/ await

Finalmente un ejemplo dentro de React y TypeScript y usando un método de las promesas all

En este caso se hacen varias peticiones a una API de Peliculas y se necesita crear un hook personalizado que combine useEffect y useState

Primero tenemos la creación de la instancia de axios para el consumo de la api

const movieDB = axios.create({
   baseURL: 'https://api.themoviedb.org/3/movie',
   params: {
    api_key: 'xxxxxxx',
    language: 'es-ES',
}


});

export default movieDB

Luego en la creación de hook importamos las interfaces de las movies y creamos una interface para el Estado que tendran los diferentes tipos de peliculas a consumir

import {Movie, MovieDBMoviesResponse} from '../interfaces/movieInterface';

interface MoviesState {
  nowPlaying: Movie[];
  popular: Movie[];
  topRated: Movie[];
  upcoming: Movie[];
}

Con esta interfaz creada podemos tipar las respuestas que tendrán el hook useState en las movies y el valor inicial

  const [moviesState, setMoviesState] = useState<MoviesState>({
    nowPlaying: [],
    popular: [],
    topRated: [],
    upcoming: [],
  });

Ahora se creará una función para obtener el resultado de la consulta a los distintos enpoints usando la instancia de axios creada colocando los tipos correspondiente y pasando la ruta para cada una, luego agrupamos las promesas de cada petición y usamos el Promise.all para obtener los resultados y setear el estado

  const getMovies = async () => {
    const nowPlayingPromie = movieDB.get<MovieDBMoviesResponse>('/now_playing');
    const popularPromise = movieDB.get<MovieDBMoviesResponse>('/popular');
    const topRatedPromise = movieDB.get<MovieDBMoviesResponse>('/top_rated');
    const upcomingPromise = movieDB.get<MovieDBMoviesResponse>('/upcoming');

    const resps = await Promise.all([
      nowPlayingPromie,
      popularPromise,
      topRatedPromise,
      upcomingPromise,
    ]);
    setMoviesState({
      nowPlaying: resps[0].data.results,
      popular: resps[1].data.results,
      topRated: resps[2].data.results,
      upcoming: resps[3].data.results,
    });

    setIsLoading(false);
  };

Llamamos la función getMovies con ayuda del hook useEffect

  useEffect(() => {
    getMovies();
  }, []);

y finalmente retornamos el un objeto con todos los resultados obtenidos en el movieState de los distintos arreglos de la peticiones realizadas a la API con ayuda del parámetro rest

  return {
    ...moviesState,
    isLoading,
  };

Código completo

import {useEffect, useState} from 'react';
import movieDB from '../api/movieDB';
import {Movie, MovieDBMoviesResponse} from '../interfaces/movieInterface';

interface MoviesState {
  nowPlaying: Movie[];
  popular: Movie[];
  topRated: Movie[];
  upcoming: Movie[];
}

export const useMovies = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [moviesState, setMoviesState] = useState<MoviesState>({
    nowPlaying: [],
    popular: [],
    topRated: [],
    upcoming: [],
  });

  const getMovies = async () => {
    const nowPlayingPromise = movieDB.get<MovieDBMoviesResponse>('/now_playing');
    const popularPromise = movieDB.get<MovieDBMoviesResponse>('/popular');
    const topRatedPromise = movieDB.get<MovieDBMoviesResponse>('/top_rated');
    const upcomingPromise = movieDB.get<MovieDBMoviesResponse>('/upcoming');

    const resps = await Promise.all([
      nowPlayingPromise,
      popularPromise,
      topRatedPromise,
      upcomingPromise,
    ]);
    setMoviesState({
      nowPlaying: resps[0].data.results,
      popular: resps[1].data.results,
      topRated: resps[2].data.results,
      upcoming: resps[3].data.results,
    });

    setIsLoading(false);
  };

  useEffect(() => {
    getMovies();
  }, []);

  return {
    ...moviesState,
    isLoading,
  };
};

Consejos Dev: Como mejorar el proceso de aprendizaje en programación

Kevin Gracia Orejuela — Tue, 21 Sep 2021 04:28:24 +0000

En este post busco dar a ustedes y recordarme a mi mismo ciertos consejos que me han servido el proceso de aprendizaje puede que a ti también te sean útiles o puede que no pues cada uno tiene su propia forma de aprender en cuestión de técnicas unas resultan más efectivas para unos que para otros y la velocidad también varía y otros factores, todos estos consejos los he recopilado de diferentes lugares como blogs, publicaciones de twitter, experiencia propia y demás en fin empecemos:

Revísalo de nuevo

Esta premisa sirve en varios escenarios, al principio creía que debería entender todo en la primera lectura o con el primer ejemplo que se me presente, pero resulta que no en ocasiones hay conceptos y cosas que pueden ser un tanto difíciles de entender aunque esto es subjetivo dependiendo de cada persona pero indistintamente de ser considerado fácil o difícil lo importante es entender, la comprensión es más importante que la finalización así que no debemos apresurarnos, quizás invertir un par de minutos u horas más puede resultar más beneficiosas al largo plazo que saltar el capítulo e ir con otro al cuál arrastraremos un vacío de conocimiento.
La repetición es algo beneficioso y siempre que sea necesaria hay que hacerlo sin remordimientos.

La vida es larga, pasar unos días mas luchando con un concepto no es nada en el contexto de tu vida

Ten paciencia no corras por los resultados

Aprender una cosa a la vez

Muchas veces nos sentimos abrumados por tantas cosas que existen y debemos aprender, pero en ocasiones no necesitamos ni la mitad de todas esas cosas para resolver un problema en específico por tanto elije un concepto pequeño y que sea útil en tu problema, resuelve de una forma, luego piensa diversas formas de aplicarlo, celebra y repite, de esta forma tendrás aprendizaje real

Lo básico nunca cambia

Ignorancia selectiva

Va de la mano con el consejo anterior pero hay que tratar lo más posible de evitar pensar o tratar de aprender acerca de otras tecnologías u otros temas que te interesen y estarás ansioso de aprender pero ve con calma y trata únicamente de enfocarte en temas que te sean útiles en el presente

Toma notas

Todos olvidamos cosas con frecuencia, ten todo un sistema de notas con una aplicación o libreta, coloca soluciones recurrentes y todo lo que consideres importantes o que se puede perder, incluso tu equipo puede llegar a agradecerloToma muchas notas durante todo el día mientras estudies un curso, veas un tutorial, practiques, hagas proyectos, hazlo constantemente y de conceptos claves y pregúntese:
¿Cómo aprendes?
¿Cómo resuelves?
¿Qué te funciona?
¿Qué NO te funciona?

Leer código de otros desarrolladores

Es una práctica que te va a ayudar de varias formas, te permite ver como esa persona abordó el problema y como lo resolvió, también puedes ver buenas prácticas que se emplearon, sirve más si estamos en equipos donde hay personas de todos los niveles sobre todo de niveles más altos que los nuestros.
Pero no lo trate como literatura; piense en ello como una lección y un desafío pregúntese:
¿Cómo lo habría escrito yo este bloque de código?
¿Qué aprendí?
¿Cómo mejoría este código?
Responsa estas preguntas en una libreta o en algún lugar donde suela tomar notas de forma habitual

Nuevos caminos. nuevas ideas,

Diviértete y juega

Piensa en cuando hacemos una actividad de ocio como ver una película, jugar en la consola al fifa, como salir de paseo o cualquier actividad que te resulta placentera, no piensas en "vamos que esto acabe pronto" si no que tratas de disfrutar el proceso al máximo y en ocasiones no quieres que acabe

Muy a menudo cuando empezamos a estudiar algún tema, nos inscribimos en un curso, revisamos un concepto o cualquier cosa relacionada al aprendizaje estamos más interesados en comprender rápido que nos presionamos tanto y nos olvidamos de disfrutar del proceso

El mejor tipo de aprendizaje es cuando se disfruta lo que se está haciendo, entonces de este modo tu cerebro captará todo de forma fácil y lo recordará por más tiempo es por tal motivo que las personas les va tan bien es por que están felices de aprender algo.

En este punto el consejo fundamental dejar de pensar en "terminar" el tema que estas estudiando y más en lo divertido e interesante de descubrir y conocer algo nuevo. De esta forma llegarás más lejos y eso te llenará de satisfacción, luego cuando mires hacia atrás lo harás felizmente y cuando mires hacia adelante querrás más viajes de aprendizaje

Practicar y Practicar

Finalmente el truco es que no hay truco, debes practicar y practicar sin parar en ocasiones puede resultar difícil ponerse al ritmo con la práctica pero debes tratar en posible de hacerlo, usa páginas como codewars o leetcode o hacer proyectos, en definitiva sin sentarse a codear no verás resultados.

Si esta pensando en que solo con ver videos de YouTube, puede aprender y retener cosas, entonces estará viviendo en el paraíso de los tontos. Necesita esfuerzo, tomar notas y poner el práctica lo antes posible

La programación es una habilidad que se adquiere con la práctica y el ejemplo más que con los libros - Alan Turing

Finalmente una lista de consejos breves

No te compares con otros
Revise los conceptos básicos
Ayuda a otros desarrolladores
No intentes aprender todo a la vez
Seguimiento de tu aprendizaje
Reconoce y trabaja en tus debilidades
Asume tareas desafiantes
Si te esperas a ser el mejor, ya vas tarde
Busca ser suficientemente bueno, y entra a aprender de los mejores

"Cuando empiezas a estudiar un campo, parece que tienes que memorizar un trillón de cosas, pero no, lo que necesitas es identificar los principios básicos -generalmente tres o doce- que gobiernan el campo. El millón de cosas que pensó que tenía que memorizar son varias combinaciones de los principios básicos - Succeeding, Jhon Reed

Desestructuración en JavaScript y React-Native

Kevin Gracia Orejuela — Mon, 20 Sep 2021 03:56:58 +0000

La palabra desestructuración proviene del verbo desestructurar y se define algo así como quitar una estructura definida y en su uso en el lenguaje javascript es más o menos eso, pero se puede decir que es extraer una propiedad de un objeto aunque también se usa en arreglos, en general en programación siempre manipulamos con estructuras de datos y esta característica ayuda muchísimo.

Esta característica fue introducida en ES6 y su uso en JavaScript en la actualidad es amplio está por todos lados en frameworks como React, Angular, Vue y en casi cualquier proyecto desde el más pequeño al más grande te podrás encontrar con esta práctica.

Ejemplos en arreglos

Tradicionalmente para acceder a los elementos de un arreglo se usa la posición la que se encuentran

let frutas = ['banana', 'manzana', 'pera'];
let banana = frutas[0];
let manzana = frutas[1];
let pera = frutas[2];

Claro esto funciona pero es una sintaxis demasiado larga y la podemos simplificar de la siguiente forma

let frutas = ['banana', 'manzana', 'pera'];
let [banana, manzana, pera] = frutas; 

console.log(banana, manzana, pera); // Resultado: 'banana', 'manzana', 'pera'

De esta forma accedemos de forma implícita a los elementos del arreglo y asignamos directamente sus elementos a las variables que deseamos.
Podemos incluso saltar algunos elementos usando la , (coma)

let frutas = ['banana', 'manzana', 'pera'];
let [banana,,] = frutas;

Otro uso de la coma se complementa con el uso del parámetros rest

let frutas = ['banana', 'manzana', 'pera'];
let [banana,..rest] = frutas; 
console.log(rest) // Resultado ['manzana', 'pera']

También se puede combinar su uso con funciones como split, imaginemos que tenemos que separar un nombre que viene en un solo string

let [nombre, apellido] = "Kevin Gracia".split(' ');
console.log(nombre); // Kevin
console.log(apellido);  // Gracia

Ejemplos en objetos

Los objetos en javascript son estructuras de lo más común en Javascript y siempre se trata con ellos ya que son devueltos como respuesta desde algún servicio como una API o una Base de Datos

Suponiendo que tenemos un objeto persona

let persona  = {
firstname: "Kevin",
lastname: "Gracia"

Antes de ES6 para acceder al objeto y asignar su valor en variables se usaba la notación de punto (.)

let firstname = persona.firstname;
let lastname: persona.lastname;

Nuevamente se puede simplificar esta asignación con la desestructuración de la siguiente forma

let {firstname, lastname} = persona;

Y listo ya podemos usar las variables con los valores de las propiedades dentro del objeto persona

También podemos realizar una reasignación de la propiedad en una variable es una práctica muy común

Su sintaxis sería la siguiente

let {propiedad1: variable1, propiedad2: variable2} = objeto;

let {firstname: fname, lastname: lname} = persona;

Un error común es tratar de acceder a una propiedad que no existe por lo cual dará como respuesta "undefined"

let {firstname, midname, lastname} = persona;
console.log(midname) // Respuesta undefined

Se puede acceder a una propiedad anidada dentro de un objeto

const user = { 
        'name': 'Kevin',
        'address': 'Parada 12',
        'age': 22,
        'department':{
            'name': 'Develop',
            'Shift': 'Morning',
            'address': {
                'city': 'Quito',
                'street': '12th October',
                'zip': 1234
            }
        }
}

const { department: { address } } = user;

Ejemplos en funciones al recibir como parámetro

En lugar de recibir el objeto completo y luego desestructurar dentro de la función podemos recibir la propiedad lista para su uso

const cars = [
  { model: 'Camaro' },
  { model: 'Cayenne' }
];

const models = cars.map(
  function({ model }) {
    return model;
  }
);

models; // => ['Camaro', 'Cayenne']

Otro uso posible es dentro del bucle for ... of donde podemos iterar en las propiedades del objeto

const heroes = [
  { name: 'Batman' },
  { name: 'Joker' }
];

for (const { name } of heroes) {
  console.log(name); // Respuesta 'Batman', 'Joker'
}

Y con método Object.entires para obtener las clave 7 valores del objeto

let user = {
  name: "Kevin",
  age: 2
};


for (let [key, value] of Object.entries(user)) {
  alert(`${key}:${value}`); // name:Kevin, then age:22
}

function calculateArea({ width, height }) {
  console.log('Area is ' + width * height);
}

calculateArea({ width: 5, height: 6 }); 
// -> Area is 30

Ejemplo de uso en React Native donde se extrae el año de la ventana del dispositivo y y se la asigna a una nueva variable para después ser usada

const {width: windowWidth} = Dimensions.get('window');

Incluso esta técnica es recomendada en la guía de estilos de airbnb de javascript de la siguiente forma donde tomo el mismo ejemplo

// mal
function processInput(input) {
  // then a miracle occurs
  return [left, right, top, bottom];
}

// el que llama necesita pensar en el orden de la data de retorno
const [left, __, top] = processInput(input);

// bien
function processInput(input) {
  // then a miracle occurs
  return { left, right, top, bottom };
}

// el que llama elige solo la data que necesita
const { left, top } = processInput(input);

¿Por qué? Puedes agregar nuevas propiedades en el tiempo o cambiar el orden de las cosas sin afectar la forma en que se llama.

Para concluir esta guía un ejemplo de React Native donde se usa la técnica de múltiples formas

import React from 'react';
import {ActivityIndicator, Dimensions, View} from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import Carousel from 'react-native-snap-carousel';
import {MoviePoster} from '../components/MoviePoster';
import {useMovies} from '../hooks/useMovies';

export const HomeScreen = () => {
  const {peliculasEnCine, isLoading} = useMovies(); // trae las variables de los hooks internos del hook use Movies
  const {top} = useSafeAreaInsets();

  const {width: windowWidth} = Dimensions.get('window'); //desestructuracion y renombrarlo

  if (isLoading) {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <ActivityIndicator color="red" size={100} />
      </View>
    );
  }

  return (
    <View style={{marginTop: top + 20}}>
      <View style={{height: 440}}>
        <Carousel
          data={peliculasEnCine}
          renderItem={({item}: any) => <MoviePoster movie={item} />}
          sliderWidth={windowWidth}
          itemWidth={300}
        />
      </View>
    </View>
  );
};

En este caso el Hook personalizado "useMovies" retorna un objeto con dos propiedades como lo indica la buena práctica mencionada anteriormente

import {useEffect, useState} from 'react';
import movieDB from '../api/movieDB';
import {Movie, MovieDBNowPlaying} from '../interfaces/movieInterface';

export const useMovies = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [peliculasEnCine, setPeliculasEnCine] = useState<Movie[]>([]);

  const getMovies = async () => {
    const resp = await movieDB.get<MovieDBNowPlaying>('/now_playing');
    const peliculas = resp.data.results;
    setPeliculasEnCine(peliculas);

    setIsLoading(false);
  };

  useEffect(() => {
    //now_playing
    getMovies();
  }, []);

  return {
    peliculasEnCine,
    isLoading,
  };
};

Como hemos visto a lo largo de este post la desestructuración es una propiedad muy usada y que se debe tener muy en cuenta al usar React

Referencias
Guía de estilos Javascript Airbnb

Método Map para JavaScript y React

Kevin Gracia Orejuela — Sat, 11 Sep 2021 21:17:11 +0000

El método map transforma los elementos del array uno por uno aplicándoles una función en base al elemento y a su posición, dicha función es programada por nosotros de acuerdo a la necesidad es decir podemos usar condicionales, y distintas herramientas que la programación nos permita ejecutar siempre y cuando se ejecuten de forma síncrona

Cuando se usa el método map, la función que podemos llamar función transformadora toma un argumento requerido y dos opcionales:

El valor actual del elemento - requerido
El índice del elemento - opcional
Toda la matriz - opcional

.map( function callback( element, index, arr) {

});

Map vs ForEach

const numbers = [1,2,3];

El método 'map' devuelve un nuevo arreglo, aplicando una operación en cada uno de los elementos, pero no modifica el arreglo original

const doubleNumbers = numbers.map( n => n * 2 ) ;
// doubleNumbers = [2,4,6]
// numbers = [1,2,3]

El método forEach en cambio no devuelve ningún valor, directamente como lo hace map y si operamos sobre el modificamos los valores del arreglo original

const doubleNumbers = numbers.forEach( n => n * 2 ) ;
// doubleNumbers = undefined;

numbers.forEach((item, index) => {
    array[index] = item * 2; // ahora si mutamos el array original.
}); 
//  numbers = [2,4,6]

Gracias a @lukeshiru por la aclaración en este punto

Cosas que no podemos hacer con 'map'

No podemos ejecutar una función asíncrona dentro de map y esperar un resultado
async - await 🚫

🚫

const doubleNumbers = numbers.map( async function (n) { 
const res = await fetch(`api/double/${n}`);
.....
})

🚫

Avancemos con más ejemplos del uso de map

Ejemplo Práctico 1

Escribir una función que de reciba un arreglo con los planetas: Earth, Saturn, Pluto, Jupiter y devuelva [5,6,5,7]

let foo () = () => {
let planets = [ 'Earth', 'Saturn', 'Pluto', 'Jupiter'];

return planets.map( planet => planet.length)

}

En este caso hemos usado la función map para retornar un nuevo array con la cantidad de caracteres de cada uno de los planetas

Ejemplo Práctico 2

Cuantos años pasaron desde el año actual a cada uno de los años en una lista parece un trabando lengua pero en ocasiones tenemos este tipo de requerimientos donde tenemos que iterar elementos y queremos aplicar la misma acción a cada uno, la solución habitual es usar un for de toda la vida, pero javascript nos provee métodos más eficientes, limpios que se derivan de la programación funcional a continuación el ejemplo

const since = [2000, 2001, 2010, 2020];


const yearPassed = [];
for (let i = 0 ; i < since.length ; i++){
   const sinceYear = since[i];
    yearPassed.push( 2021 - sinceYear );
}

En esta ocasión nos vemos obligados a recorrer el arreglo con for, e introducir los nuevos elementos con el método 'push' en nuevo arreglo creado también previamente generando así varias lineas de código, cuando pudimos resolver el problema incluso en una sola linea con el método 'map'

const yearPassed = since.map( year => 2021 - year ) ;

Ejemplo Práctico 3

En este ejemplo tenemos un arreglo de objetos con información de autos y deseamos aplicar un descuento a los que tenga un precio menor a 15.000

const cars = [ 
{ id: 'PSS-123', model: 'Mustang', price: 30000},
{ id: 'CHS-345', model: 'Camaro', price: 14500},
{ id: 'ABS-567', model: 'Aveo', price: 9000},
];


const carsDiscount = cars.map( function(car) { 

 if( car.price < 15000 ) 
return { 
...car,
price: car.price *0.9 
}

})

De esta forma evaluamos la condición y luego en el retornamos un nuevo objeto donde copiamos las propiedades el objeto en original en este caso carro, pero sobrescribimos su propiedad 'price'

También puede que se nos solicite extraer todo los id de los carros para lo que podemos usar map nuevamente

const idCars = cars.map( car => car.id);

Podemos optimizar este código desarmado el arreglo para extraer lo que necesitamos con la desestructuración la propiedad debido a que estamos repitiendo la variable car entonces el código se ve así

const idCars = cars.map( ( { id } ) => id );

entonces con la ayuda de las llaves hemos extraído unicamente id y es lo que estamos retornando en el nuevo arreglo

Map en React

El uso común de la función 'map' en React es para iterar elementos del DOM, por ejemplos representar una lista de elementos, en este caso una lista usuarios y tomar sus nombres

export default function App() {

  const data = [
    { id: 1, name: "John Doe" },
    { id: 2, name: "Victor Wayne" },
    { id: 3, name: "Jane Doe" },
  ];

  return (
    <div className="App">
           {data.map((user) => (
        <div className="user" key={user.id}>{user.name}</div>
      ))}
    </div>
  );
}

Esta código de React retorna elementos del DOM con el atributo name de los usuarios, la propiedad id es tomada por el atributo especial de react "key" que es usado para tener referencia del elemento que se esta iterando y saber si los elementos han cambiado, se han agregado o se han eliminado

Ejemplo Práctico 4

En este ejemplo se usa map de dos formas para operar sobre elementos de un arreglo y para renderizar la lista resultando en DOM - El requermiento es tomar una lista de informacion sobre images, poner su nombre con la primera letra en mayuculas y luego colocar en una sola linea de texto su ancho y largo

export default function App() {

  const stringifyImageSizes = (imageSizes) => {
    return imageSizes.map((a) => {
      const capitalizedName = a.name[0].toUpperCase() + a.name.slice(1);
      return `${capitalizedName} image - ${a.width} x ${a.height}`;
    });
  }

  const imageSizes = [
    { name: "horizontal", width: 600, height: 380 },
    { name: "vertical", width: 400, height: 650 },
    { name: "thumbnail", width: 300, height: 300 },
  ];

  const normalizedImageStrings = stringifyImageSizes(imageSizes);

  return (
    <div className="images">
      {normalizedImageStrings.map((s) => (
        <div className="image-type">{s}</div>
      ))}
    </div>
  );
}

Finalmente concluiremos con dos ejemplo en TypeScript aplicando varias conceptos de este lenguaje y demostrando que el método 'map' funciona de la misma forma pues sigue siendo javascript bajo el capo, de esta forma tenemos el siguiente requerimiento: Crear una función para marcar como Completo toda una lista de 'cosas por hacer' la tarea por hacer tiene la siguiente estructura

type Todo = Readonly<{
  id: number
  text: string
  done: boolean
}>

Para marcarla completo deberíamos cambiar la propiedad 'done' a true, para lo cual podríamos crear otro tipo CompletedTodo copiando todas las propiedades anteriores y definiendo 'done': true pero estaríamos repitiendo código innecesariamente debido a que TypeScript provee una funcionalidad llamada 'intersección de tipos' usando el operador '&' entonces el tipado a crear, quedaria de la siguiente forma:

// Sobreescribir la propiedad donde en el Todo
type CompletedTodo = Todo & {
  readonly done: true
}

Con este tipado obligamos a que mientras escribamos la función a realizar la propiedad done cumpla tanto con todo lo de type 'Todo' así como que la propiedad done: true y si por ejemplo colocamos done: false TypeScript avisará inmediatamente del error

Y luego crearíamos la función necesaria para marcar todos como completos usando el tipado necesario, así como el recorrido por los 'todos' que están en el arreglo usando la función 'map' copiando las propiedades de los otros 'todo' con '...todo' y finalmente se cambian la propiedad 'done' a true

function completeAll(
  todos: readonly Todo[]
): CompletedTodo[] {
  return todos.map(todo => ({
    ...todo,
    done: true
  }))
}

Por último un ejemplo donde se usa React + Typescript y le método Map para crear una tarjetas de tareas usando también estilos de Bootstrap

              {tasks.map((t: ITask, i: number) => (
                <div key={i} className="card card-body mt-2">
                  <h2 style={{ textDecoration: t.done ? "line-through" : "" }}>
                    {t.name}
                  </h2>
                  <div>
                    <button
                      onClick={() => toggleDoneTask(i)}
                      className="btn btn-secondary"
                    >
                      {t.done ? "✓" : "✗"}
                    </button>
                    <button
                      onClick={() => removeTask(i)}
                      className="btn btn-danger"
                    >
                      🗑
                    </button>
                  </div>
                </div>
              ))}

De esta forma observamos como el uso de 'map' puede evolucionar desde iterar solo elementos como números a componentes del DOM y usando un tipado de estricto de TypeScript para crear aplicaciones más robustas y terminar vistas mejorar estructuradas

Para crear este post me he basado en distintas fuentes a las cuales agradezco a sus autores

React Doc Oficial
Chibicode
Fazt Code TypeScript
La Cocina del Código Youtube

Count characters in your string JS-Codewars [ES]

Kevin Gracia Orejuela — Fri, 03 Sep 2021 13:52:26 +0000

El enunciado del ejercicio dice:

La idea principal es contar todos los caracteres que aparecen en una cadena. Si tiene una cadena como aba, entonces el resultado debería ser {'a': 2, 'b': 1}.

¿Qué pasa si la cadena está vacía? Entonces el resultado debería ser un objeto literal vacío, {}.

Entonces tenemos definidas las posibles entradas:
cadena de caracteres como "aba"

Y las salidas:
un objeto como {'a':2, 'b':1}

Pensando en la entrada para poder hacer el conteo deberíamos poder recorrerla por lo cual si es un string podríamos convertirla en un array aquí tenemos varias opciones una usar el "operador spread" o "split" para usar todos lo métodos que javascript nos provee para recorrer o iterar pueden ser "map" o "forEach" bien hemos avanzado ya podemos recorrer los caracteres ahora pensemos en la salida debe ser un objeto por lo cual podemos declarar un objeto vacío donde introduciremos los caracteres y el conteo como hacemos esto? dentro de la iteración colocamos dentro del objeto el carácter y luego preguntamos si este ya existe o es nuevo y en base a este pregunta decidimos si inicializar en contador en 1 o sumamos +1 de nuevo esto lo podemos hacer de dos formas usando un "operador ternario" o el "operador cortocircuito".

A continuación el ejercicio

function count (string){

let obj = {} ;
let arr = [...string] ;

arr.map(item => {
obj[item] = obj[item] + 1 || 1 ;
})

return obj;


}

Segunda opción de solución - usando las alternativas planteadas

function count (string){
const obj = {};

string.split('').forEach( item =>{

obj[item] = obj[item] ? obj[item] + 1 : 1 ;

});

return obj;

}

Operador CortoCircuito

Kevin Gracia Orejuela — Thu, 02 Sep 2021 03:08:16 +0000

En el camino del aprendizaje de cualquier lenguaje de programación te encuentras con ciertas cosas que para unos son obvias y para otros no tanto en este post voy a compartir ciertos tips interesantes que puede servir también en otros lenguajes.

Adicional te quiero recordar que los trucos son interesantes y divertidos pero de nada sirve si no se aplican.

Empezemos

Evaluación de corto-circuito

Este concepto se describe así mismo pero de que forma?, partiendo que en JavaScript y en los lenguajes de programación los operadores lógicos (&& || !) se evaluan de izquierda a derecha en el caso del OR ( || ) si el primer valor es verdadero se provoca un corto-circuito y ni si quiera evalua la segunda expresion.
Observemos ejemplos

let a
let b = null;
let c = undefined;
let d = 4;
let e = 'five';

let f = a || b || c || d || e;

console.log(f);

Cual seria el resultado el valor de f?

Claro 4 porque es el primer valor que no es falso podría ser e = 'five' pero este valor no se alcanza a evaluar por el cortocircuito provocado

Otro ejemplo ya aplicado en algo muy común es en nodejs cuando se usa para conectarse a una base datos

Forma Larga

let dbHost;
if(process.env.DB_HOST){
  dbHost = process.env.DB_HOST;
} else {
 dbHost = 'localhost'
}

Este fragmento de código es para usar colocar el valor del host a usarse, y se resume de la siguiente forma: si existe usa una variable de entorno 'DB_HOST' caso contrario usa 'localhost' se entiende fácilmente pero ahora veamos la versión abreviada

Forma Corta

let dbHost = process.env.DB_HOST || 'localhost' ;

Debugging lo que realmente debes saber

Kevin Gracia Orejuela — Sun, 20 Jun 2021 02:50:39 +0000

"Debuggear" como decimos coloquialmente usando la palabra de origen inglés, al proceso de depurar que sería la traducción adecuada.

Y sencillamente para mi:

"El Debuggeo es todo "

Sea que este empezando y su nivel sea junior 👶🏻 o tenga mucha experiencia nivel senior 👴🏼 , siempre se verá enfrentado a depurar errores tanto si está en el área de programación (aquí + 😂), base de datos, infraestructura, soporte, redes, etc.

Estos errores no solo vendrán de algo que usted mismo haya realizado, puede ser de un proceso anterior que intervenga con el que usted está realizando actualmente, código innecesario, configuraciones, versiones y muchas causas más, el punto aquí es que siempre debemos darle solución, para eso estamos💪🏼

Y la pregunta clave es ¿ Cómo depuramos ? Pueden existir técnicas, herramientas, consejos, todos estos básicos y también avanzados de como hacerlo pero puede que en ocasiones se nos pasen por alto o estamos contra el tiempo y queremos solucionarlo cuanto antes 🏃‍♂️.

Si bien la depuración es un proceso técnico que puede requerir de estrategias y herramientas en la mayoría de casos influye también nuestra personalidad, estos problemas son como cualquier otros en el mundo real y a continuación detallaré las cosas que considero importante para realizar el "debuggeo"

Para empezar: la ACTITUD lo es todo

Cuando estamos depurando errores nuestra actitud importa y mucho. Manejar errores e intentar descubrir porque suceden y no lograrlo en principio puede resultar frustrante pero cuando por fin logramos solucionarlo la satisfacción es enorme, y deberíamos empezar por aquí con una firme creencia en que vamos a tener éxito

Teniendo una mala actitud 🙁 podemos caer en el pensamiento de: "No puedo entender como esto funciona, es muy difícil o complicado, intentaré soluciones aleatoriamente👾" Y empezamos realizando las siguientes acciones:

Realizar cambios aleatoriamente en el código.
Intentar probar cosas que encontramos en publicaciones de blogs / stackoverflow sin entender que hacen realmente.

Puede que de esta forma lleguemos a la solución pero a menudo los errores solucionado de esta manera puede volver a aparecer y tardaremos mucho más tiempo.

En su lugar una buena actitud 😄 y pensar: "Solo necesito saber lo básico de este tema y usar la lógica 🧩 , la computación se trata de lógica" . Esta afirmación se siente y funciona bien al menos para mí.

Por lo tanto debemos adoptar una mentalidad de crecimiento y estar dispuesto a aprender cosas nuevas y superar los retos a los que nos vemos enfrentados, casi nunca te pedirán algo imposible o fuera de tu alcance, más bien se desea verte utilizando tu maravilloso talento al máximo y desarrollando las habilidades que necesites para conseguir tus objetivos.

Recuerda: los errores pasan por una razón lógica, los lenguajes de programación, frameworks, herramientas, etc han sido probadas y es casi imposible que tengan errores, entonces revisa lo que tu haz hecho

Siguiente paso: Confia en ti

Antes podías pensar: Tal vez esto sea muy difícil.

Ahora piensa: Bien he arreglado muchos errores difíciles antes.

Conoce tus herramientas

A diario trabajamos con muchas herramientas dependiendo del área o stack de tecnologías que usemos siempre van a variar, empezando por ejemplo desde el sistema operativo, puedes usar Windows, Mac o Linux (cualquier distro), si haces desarrollo web cualquier navegador, editores de código, sistemas gestores de bases de datos, clientes rest, consolas, debuggers tools, etc ⚙️🔩🛠️🧰.
Por ejemplo si usas una herramienta de debug del lenguaje de programación en tu editor de código, deberías aprender a usar los breakpoints, las funciones de editar, parar, continua y demás.

En este punto mi consejo es trata de usar la que use tu equipo en primera instancia debido a que si surge un problema tendrás a quien recurrir después podrás elegir alguna otra interesante que viste por ahí.

Luego úsalas adecuadamente y explóralas puedes tomar un curso muy corto o ver un video si deseas para ver si puedes aprender algún truco, pero mejor aún con tu curiosidad 🤔 en la misma herramienta ver las opciones que ofrece y descubrir alguna que te parezca interesante o te resulte muy útil.
Una vez hecho esto ganarás seguridad que conoces lo que estas usando y eso es importante.

Empezando con el bug

Hasta ahora no había tocado el tema del error 🐞 como tal pues considero que lo indicado anteriormente tenia mayor relevancia antes de llegar a este tema.
A menudo los errores se muestran con códigos y una breve descripción de dos o tres palabras que puede variar de acuerdo a la herramienta que estemos usando por ejemplo:

-> Hacemos una solicitud http
-> 500 internal server error

Aquí la respuesta no es suficiente para resolverlo así que nuestro trabajo es obtener más información de alguna manera, entonces tenemos un error muy genérico por lo tanto vamos a buscar limitar mas el campo de acción, aquí lo que podemos hacer es construir una versión mas especifica acerca de lo que esta pasando:

Solicitud http a /users/create con un nombre largo

-> llamada a func createUser
-> llamada func validateUsername
-> insertar usuario en la base de datos
-> error desde la base de datos porque el nombre de usuario es muy largo

Hasta este momento, no hemos realizado ningún cambio para corregir el error, pero con esta información 📜 es más fácil averiguar qué hacer en este caso.

Adicional a diagramar el proceso de forma especifica, debemos tener en claras cuales van a hacer las entradas y salidas si es que el caso lo requiere.

Revisar tus suposiciones

En ocasiones asumimos cosas y después de un tiempo nos damos cuenta que no son ciertas ⁉️ por ejemplo dices: el nombre del archivo debería estar bien no creo que ese sea el problema luego de una hora te das cuenta que estaba mal.
Es difícil saber de antemano cual de las suposiciones que has hecho son incorrectas por lo tanto deberías empezar a revisarlas una a una, aquí podrías hacer una lista anotarlas y marcarlas luego de su revisión ✅

Toma un descanso

Investigar errores requiere de mucha concentración y dedicación, puede que vayas por la segunda pagina de Google algo que rara vez suele pasar, que sea la séptima búsqueda que haces y estés realmente agobiado, entonces ya estas cansando se sabe que cuando uno esta agotado no hace las cosas bien por lo tanto puedes probar darte un respiro y hacer alguna actividad como:

Salir a caminar 🚶🏻
Llamar a un amigo 📞
Comer algo liguero 🥐
Tomar una ducha 🚿
Tomar una siesta 😴
Observar por la ventana 🌄

Cualquier actividad que distraiga y limpie tu mente, luego de esto tendrás mas energía y muy probablemente obtengas la respuesta a lo que estabas tratando de depurar

Saber donde recurrir

Podemos estar tan atascados que no sepamos que hacer, en este punto me refiero a personas y sitios, si trabajamos en un equipo preguntar a la persona correcta podría ser clave para solucionar nuestro problema o si somos independientes buscar en el sitio indicado por ejemplo la documentación oficial es muy conveniente esto ultimo puede que suene obvio pero en ocasiones lo olvidamos y empezamos a "googlear" a lo loco 🤪

Siempre se aprende

Es normal que mientras estamos depurando en ocasiones nos desanímenos pues puede que ya no estemos creando cosas nuevas y pueda resultar aburrido, podemos pasar varios días depurando y sentir que no estamos aprendiendo nada porque no lo completamos pero mientras ocurre este proceso si que estamos aprendiendo y mucho a lo cual también podemos dar seguimiento con una lista de cada cosa que intentamos podemos documentar por que no funciono y cuando este resultado también escribir detalladamente la solución que fue la adecuada ✍🏻.

Finalmente esta es mi opinión con respecto a la depuración de errores y lo he hecho a modo muy general tratando de quitar posiblemente todo lo técnico que hay detrás también creo que estas recomendaciones se pueden aplicar para cualquier área o temática sobre todo tecnológica

El sociólogo Benjamin Barber dijo una vez:

«Yo no divido el mundo entre débiles y fuertes, ni entre éxitos y fracasos...

Yo divido el mundo entre los que aprenden y los que no»

Si te gusto este post compártelo 💌 !

Glosario básico DevOps [ES]

Kevin Gracia Orejuela — Tue, 12 Jan 2021 20:48:20 +0000

El mundo del DevOps tiene una gran cantidad de herramientas y términos que se deberían conocer si se está interesado en adentrarse en él y aplicar esta filosofía sea en sus nuevos proyectos o empresa, este es un post por el que puedes empezar.

A continuación definiré varias términos importantes

GIT 🌱

Es la herramienta usada para llevar el control de versiones de un repositorio de código, cuenta con distintas funcionalidades para cumplir el objetivo de gestionar de forma eficiente y fácil estos proyectos, tales como ver el historial de cambios que se han realizado, regresar a un punto específico en estos cambios si es necesario, crear copias separadas (ramas) donde se pueden generar cambios sin estropear el proyecto principal de esta forma se puede trabajar de forma colaborativa donde cada desarrollador puede realizar su cambio(commit) subirlo(push) luego unirlo(merge) con los cambios de los demás , también permite llevar a este versionamiento a un repositorio remoto donde existen distintos proveedores como Github, Gitlab, BitBucket cada uno con sus distintas características

Microservicios 🎛️

Es una de las distintos patrones de arquitectura de software que existen en la actualidad donde el sistema completo es un conjunto de pequeñas piezas de software en este caso llamados servicios con objetivos y funcionalidades diferentes, estas piezas de software son aplicaciones que pueden estar escritas en lenguaje de programación diferentes la una de la otra y son independientes pero tienen comunicación con el resto del conjunto, el objetivo es que estos servicios sean de un tamaño reducido lo cual permita su portabilidad y escalabilidad, llegando a replicarse en distintos entornos o servidores con facilidad, es aquí donde aparece el conecpto de contenerización(será explicado más adelante) donde cada microservicio/aplicación se vuelve un contenedor

Por ejemplo: Aplicación de voto electrónico

Cliente-web-voting(React Js) -> Collect Votes (RedisDB) -> Consume Votes (Java)
-> Storage(PostgresDB) -> Print Results(NodeJS)

En este ejemplo vemos que cada servicio puede estar elaborado con un lenguaje o tecnología diferente y se comunican entre sí

Docker 🐳

Es una tecnología que permite el desarrollo y manejo de contenedores de aplicaciones, los contenedores Docker NO son máquinas virtuales aunque su razón de ser es parecida distribuir y optimizar recursos es aquí donde Docker lo hace mejor que las VM reduciendo espacios y recursos innecesarios dejando únicamente el proceso que necesita ejecutar la aplicación y empaquetándolo para su posterior transporte a cualquier entorno que ejecute este software así cada contenedor se vuelve un proceso aislado de los demás pero que corre sobre el mismo sistema operativo. Al ser un software completo consta de una arquitectura con diversos compenentes como un CLI (permite la ejecución de comandos) - Rest API - Daemon/Server , y distintas funcionalidades como personalizar estos contenedores que para su creación se basan en imágenes de software existentes.
Vale la pena señalar que Docker no es la primera ni la única herramienta que cumple con este propósito, basta con una pequeña búsqueda y podrás conocer alternativas, pero si es la más utilizada al momento de este post

Docker-compose ⛲

Es una herramienta de Docker que permite agrupar la configuración de distintos contenedores que pueden pertenecen a un mismo proyecto o sistema, si leíste los dos conceptos anteriores tendrás claro el propósito de compose, la forma en la que se usa esta herramientas es escribiendo en un archivo de extensión .yml a modo de texto plano todo lo que se desea que configurar en los servicios como: puertos, comandos, variables de entorno, redes, y un largo etc(dependiendo del contenedor y objetivo)

Generalmente este archivo es nombrado "docker-compose.yml"

Ejemplo: crear un contenedor de Aula Virtual (Moodle) y lo comunica con una BD(MySQL) y se enlaza a un proxy de Nginx
Revisa más detalles en mi repo: https://github.com/kevingo710/ngninx-moodle-wp

version: '3'

services:
    dbapp:
        image: mysql:5
        restart: always
        volumes:
            - db-volume:/var/lib/mysql
        env_file:
            - moodle_variables.env
        deploy:
            replicas: 1
            restart_policy:
                condition: any
    moodleapp:
        image: jhardison/moodle:latest
        links:
            - dbapp:DB
        depends_on:
            - dbapp
        restart: always
        volumes:
            - moodleapp-data:/var/moodledata
        expose:
            - 80
            - 443
        environment:
            - VIRTUAL_HOST=moodle.dinasaccarola.tk
            - LETSENCRYPT_HOST=moodle.dinasaccarola.tk
            - LETSENCRYPT_EMAIL=example.email.tic@mail.com
        env_file:
            - moodle_variables.env
        deploy:
            replicas: 1
            restart_policy:
                condition: any

volumes:
    db-volume:
    moodleapp-data:

networks:
  default:
    external:
     name: nginx-proxy

Aquí se definen los servicios se establecen los nombres, se estables comandos y puertos asi como una red configuración de volúmenes para persistencia de los datos y variables de entornos

YAML 📑

En el ejemplo anterior se trabajo con esta extensión, a continuación la explicación del mismo, este es un formato de texto plano que pretende ser entendible por humanos y es ampliamente usando para configuración en diversos software uno de ellos es Docker, también Kubernetes y herramientas de CI/CD como Jenkins, Gitlab CI/CD, CircleCI, TraviCI y más...

Existen tres reglas básicas en yml y lo comparemos con json

Identación - solo 2 o 4 espacios

Formato - pares clave-valor

Manejo de Listas - colleciones

Existen muchas otras reglas de yml y estas tiene especificaciones de acuerdo al software en que se está empleado este formato lo cual podrás revisar en su documentación de acuerdo con tu necesidad

Como saber si esta correcta la sintaxis ?

Muchos de los software que lo emplean tienen integrados linters donde se puede probar que no existan errores pero acá te dejo tres alternativas

Editor online YAML linter http://yamllint.com

CLI https://yamllint.readthedocs.io/en/stable/

VSCode extensión https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml

Kubernetes ☸️

Es una solución que permite la orquestación de contenedores, si bien con Docker podemos manejar contenedores relativamente fácil que sucede si no solo manejamos 1 o 2 contenedores si no un número que ya no podemos representar con los dedos de las manos como 100 o 1000 es aquí donde se usa esta tecnología que cuenta con la infraestructura y herramientas necesarias para cumplir estas tareas que pueden llegar a ser complejas y críticas dentro de la organización pues una aplicación que requiera un número alto de contenedores de por sí tiene un gran número de usuarios. Brevemente la funcionalidad de k8s es crear una arquitectura de cluster que permite agrupar estos contenedores en pods(servidores) y crear replicas para asegurar la escalabilidad

Serverless Computing ⛳

Es un paradigma computacional el cual se caracteriza por no manejar infraestructura de servidor para desplegar una aplicación o servicio, lo único necesario es el código, tienen su origen en el paradigma de programación funcional donde una única entrada en este caso el código tiene una única salida siendo esta la aplicación o servicio en funcionamiento, su uso y popularidad empezó junto con la computación en la nube debido a que los proveedores empezaron a crear estos servicios teniendo cada uno de ellos todo un catálogo AWS Amplify/Lambda, Azure Functions , etc.

Su enfoque esta orientado a desarrollos rápidos y dar facilidad de uso a los programadores pues aprender herramientas y conceptos para administrar infraestructura tiene su curva de aprendizaje y complejidad para la cual no todos tienen las ganas o el tiempo suficiente y se puede optar por esta opción

Continous Integration ♻️

En un entorno de desarrollo el código esta un repositorio centralizado donde constantemente se están haciendo cambios, aplicando la filosofía DevOps la integración continúa consiste en probar esos cambios automáticamente para depurar posibles errores existentes en el código y que no lleguen a producción, es decir si todo está correcto en los cambios de código y pasa todos los test establecidos se combina y continúa el ciclo caso contrario se rechaza para una revisión

Continous Delivery 🪂

Siguiendo el ciclo si se pasa la fase de integración, sigue la fase de entrega o distribución donde se obtiene también de forma automática un producto final o base de código en otros casos artefacto dependiendo esto del proyecto que está listo para implementarse en cualquier entorno de producción, en esta fase también se puede hacer pruebas automatizadas, esta sería la fase previa al despliegue que también esta considerado en el ciclo como Continous Deployment

Infrastructure as Code 📜

Consiste en realizar la creación y configuración de infraestructura(hardware como máquinas virtuales, disco, redes y demás) mediante código legible y entendible para los humanos con el fin de automatizar y documentar estos procesos ya que al ser código también se lo puede versionar y llevar a un repositorio, su uso esta orientada a entornos Cloud y algunos proveedores tienen su propias soluciones como: AWS-CloudFormation, Google Cloud-Deployment Manager, aunque existen otras soluciones compatibles también con distintos proveedores así como Terraform

En resumen usted podrá mediante código en su máquina local crear y aprovisionar infraestructura en la nube, sin tener que pasar por los paneles de administración del proveedores(que cambian constante) haciendo click en las distintas opciones que en ocasiones olvidarás

Terraform ♈

Es una de las opciones de herramientas para manejar Infraestructura como código que permite gestionar distintos proveedores Cloud puede ser al mismo tiempo, o permite manejar nuestra propia infraestructura, tiene su propia sintaxis muy parecido al lenguaje humano, la extensión de sus archivos es .tf, tiene su CLI para ejecutar sus propios comandos que mostrarán la salida, por tanto con terraform podemos crear y destruir infraestructura en la nube en cuestión de minutos o segundos

Immutable Infrastructure 🏛️

Es una forma de crear infraestructura de tal manera que no se modifique luego de la implementación y si esto es necesario se creará nueva infraestructura basándose en los mismos principios pero con las nuevas características, la computación en la nube ha permitido extender esta práctica debido a los recursos casi ilimitados siendo esta una de las limitaciones de esta metodología, también la infraestructura como código al nivel de automatización colabora en el uso de esta práctica en el proceso de despliegue que acorde a su estrategia hará uso de la misma