DEV Community: Ismael López

Add a README.md to your GitHub profile.

Ismael López — Wed, 22 Jul 2020 01:14:40 +0000

Are you want to add a short description to your GitHub profile? Are you know this feature? Here I explain you how to do it. I learned this feature when I was scrolling on Twitter and this is the result.

I show you how to implement it step by step, I hope that this will be useful for you.

Create a repository

This is a secret feature, you do not tell anyone :)

First step, create a GitHub repository with the same name of your username.

Import or create a local repository

When you create a repository you can do one of this options.

Create a local repository, we will do this.

Or import a local repository, I know it, only is a file.

Create a mardown file

You must create a Markdown file named README.md with content like this.

Final result

Here you can see the final result.

Thanks, for more content you can follow me on my social media. See you.

Fundaments of Dart programming lenguaje

Ismael López — Sat, 02 May 2020 18:52:01 +0000

En este post te mostrare ejemplos de las características del lenguaje, para que nos familiarizaremos con ello y sus conceptos básicos propios del lenguaje de programación.

Colecciones

Las colecciones son objetos de tipo estructuras de datos que almacenan diversos elementos, existen 2 tipos de colecciones, las listas y los sets.

En Dart los arreglos son Objetos ordenados de tipo List los cuales almacenan con un índice a cada uno de los elementos, mientras que los sets son colecciones que contiene valores únicos (no se pueden repetir) no ordenados (no se pueden recuperar mediante índices).

Una lista permitirá agregar los elementos que se deseen, mientras que un set no permitirá volver a agregar un valor ya existente, pero tampoco mandará un error.

Declaración e inicialización

La forma de inicializar una coleccion se muestra en el siguiente ejemplo:

main(List<String> arguments) {

    // COLECCIONES List
    List colors; // inicializar una lista en null
    colors= ['Black', 'Red']; // asignar elementos

    // COLECCIONES Set    
    Set cities; // Inicializar un set en null    
    cities= Set.from(['Guadalajara','Puebla','Monterrey']); // Asignar elementos
}

Ejemplos de uso

Generalmente lo usaremos para almacenar los datos que obtengamos de una base de datos y posteriormente mostrarlos en tablas o en inputs de tipo option list, al final el uso que le demos depende de nuestras necesidades que nos convenga usar más en su debido momento.

Se pueden usar para enviar una lista de elementos donde si nos interesa mantener el orden en que se van agregando podemos usar una colección List y si lo que nos interesa es que no se repitan podemos usar una colección Set.

main(List<String> arguments) {

    // COLECCIONES List
    List colors; // inicializar una lista en null
    colors= ['Black', 'Red']; // asignar elementos
    colors.add('Pink'); // agregar un elemento
    print(colors);

    colors.removeLast(); // remover el último elemento
    print(colors);

    List<String> otherColors = ['Blue','Green']; // Inicializar una lista con tipo de dato String
    colors.addAll(otherColors ); // agrega todos los elementos de una lista
    print(colors);

    colors.removeAt(2); // Remueve un elemento indicándole el indice del elemento
    print(colors );

    // COLECCIONES Set    
    Set cities; // Inicializar un set en null    
    cities= Set.from(['Guadalajara','Puebla','Monterrey']); // Asignar elementos
    print(cities);

    cities.add('Yucatán'); // Agregar un elemento
    print(cities);

    cities.remove('Puebla'); // Remover un elemento indicando el nombre
    print(cities)
}

Diferencias entre ellas

Entre las diferencias tenemos que en una colección Set jamás se van a repetir los elementos y al tratar de agregarlo no nos arroja ningún error, en cambio una lista si nos permite agregar elementos repetidos ya que la forma de diferenciarlos es mediante su índice que como sabemos en programación inicia en 0.

Layouts Ideas with CSS Grid

Ismael López — Sat, 25 Apr 2020 19:55:48 +0000

In this post I share you a three types of galeries that you can build with CSS Grid and use for your personal projects. CSS Grid is super powerfull for layout design, I hope that this cause you inpiration and motivation to learn more in deep about this world of creativity with CSS, lets go.

Original publication in Spanish

Photo Gallery

Contact

Cards

If you liked the content and want to learn more about web development, I invite you to subscribe to my YouTube channel and follow me on my social networks. See you, see you next time.

Visual Studio Code Plugins to be More Productive

Ismael López — Sat, 18 Apr 2020 15:51:14 +0000

Una forma de optimizar tu productividad es medir todo lo que hagas, tomar el tiempo que te toma hacer cada una de las tareas y que mejor forma hacerlo todo desde un mismo sitio para evitar distraerte. Dicho esto te quiero compartir las extensiones de VSCode que utilizo para mejorar mi productividad y enfocarme en lo que de verdad importa.

Kanban

Repository

Este plugin nos permite tener un tablero Kanban de toda la vida para colocar cada una de las tareas en cuatro seciones normalmente, como son To do, In progress, Testing y Done. Además de que podemos usar Markdown que como sabemos tiene muchas características que lo hacen muy versatil a la hora de crear contenido. Kanban te crea un tablero por proyecto así no tendras que mezclar todo tipo de tareas y enfocarte solo en el proyecto que estás desarrollando.

Integrar Toogl con Kanban

Una carácterística que me fascina de este plugin es que te permite integrarlo con Toggl que te permite hacer Time Tracking de la tarea que estás haciendo y así ir viendo en que se te va el tiempo y si eres freelancer esto te permite estimar cuanto tiempo te lleva terminar un desarrollo o si cobras en horas puedes estimar el valor de tu tiempo.

Project Manager

Repository

Otro de los plugins que no pueden faltar en tu editor de código es Project Manager y si crees que es lo que estás pensando no, no es un jefe virtual :) es un gestor de proyectos que te permite de forma rápida cambiar entre proyectos ya sea que sean del trabajo o porque no un side project, nunca se sabe. Capaz que creas el próximo unicornio tecnologico, pero mejor que sea una cucaracha tecnologica esos resisten de todo, crisis económicas, guerras y aún así siguen en pie 😁

Bookmarks

Repository

Entre tanto código y proyectos tipo código espagueti, se complica demasiado moverte entre una función y otra. Es por eso que te recomiendo encarecidamente que instales este plugin Bookmarks te permite crear marcadores como si de un libro se tratase, así si necesitas volver de forma agil solo tienes que buscar entre tús marcadores y listo en un dos por tres estamos en el lugar que nos llevo tiempo encontrar. Con este superpoder serás como Flash y ya no más un Batman gordo.

WakaTime Repository Code Time Repository

¿Sabes que código escribes más? Pues yo tampoco lo sabría y es precisamente lo que hacen estos dos plugins. Por un lado Wakatime tiene muchisimas integraciones con distintos editores de código, ¡sí! incluso con NetBeans increible ¿no te parece?, pero si necesitas algo más minimalista seguro que te encantara Code Time.

GistPad

Repository

Necesitas acceder a esas recetas que te creaste para hacer un carousel o esa sentencia que siempre guardas porque es dificil recordar, pues GistPad es tú solución accede a tus Gists desde tú editor de código incluso puedes crear nuevas si quieres guardar algo rápido y compartilo de inmediato. Herramienta múy práctica sin duda.

Settings Sync

Repository

Se infecto tú máquina con un ramsomware y es necesario formatear, que joda cuando te pasa esto verdad, además de tener que volver a buscar los plugins que con tanto esmero te costo buscar ufff. Y creen que tengo una solución pues si con Settings Sync puedes respaldar tus plugins subiendo el archivo de configuración y sincronizandolo con tú máquina y cualquier otra máquina, porque de que me sirve que solo sea en la mía si la del trabajo es la que uso más y quiero tener lo mismo. No importa si instalas un nuevo plugin tu decides si actualizas tus plugins, todo a tú disposición con un solo clic.

Bueno, hasta aquí hemos llegado con estás grandiosas recomendaciones. Comentame cuales herramientas usas en VSCode para mejorar tu productividad, seguro que hay un super poder que desconocemos 🦸‍♂️

Customize titleBar in VS Code

Ismael López — Tue, 07 Apr 2020 11:20:51 +0000

To open your user and workspace settings, use the following VS Code menu command:

On Windows/Linux - File > Preferences > Settings
On macOS - Code > Preferences > Settings

You can also open the Settings editor from the Command Palette (Ctrl+Shift+P) with Preferences: Open Settings or use the keyboard shortcut (Ctrl+,).

Go to "Appearance" and clic on Edit in settings.json". Add the next settings.

{
    "workbench.colorCustomizations": {
        "titleBar.activeBackground": "#ff2c70",
        "titleBar.inactiveBackground": "#ff2c70cc",
        "titleBar.activeForeground": "#fff",
        "titleBar.inactiveForeground": "#fff000cc"
    } 
}

Thats all, you have customized your editor on VS Code.

How to Use npm and Publish a Package?

Ismael López — Sat, 04 Apr 2020 21:18:26 +0000

npm (node package manager) es el registro de software más grande del mundo. Los desarrolladores de código abierto de todos los continentes usan npm para compartir y tomar prestados paquetes, y muchas organizaciones también usan npm para administrar el desarrollo privado.

Iniciar un proyecto

Antes de crear un proyecto nuevo lo correcto es tener las últimas versiones de node y npm actualizadas con el fin de evitar conflictos por bugs o errores, además así evitamos fallos de seguridad que pudieran haber dentro de nuestras aplicaciones.

node -v 
npm -v 
npm install -g npm@latest

Para iniciar un proyecto de node podemos hacer con el asistente o indicarle si a todo y que este se cree con los valores por defecto.

npm init
npm init -y

Para no establecer algunos valores cada que nos los pida el asistente de proyecto npm podemos establecer valores globales dentro en la configuración.

npm set init.author.email "ismael@mail.com" 
npm set init.author.name "Ismael López" 
npm set init.license "MIT"

Instalación de dependencias

Cuando instalamos dependencias se nos crea una carpeta llamada node_modules esta carpeta es importante para que tu proyecto funcione, pero no debe incluirse en tu repositorio. Para omitirlo se crea un archivo .gitignore y dentro le indicamos el directorio node_modules/

node_modules/

Para instalar dependencias debemos tener en cuenta si van a ser dependencias del proyecto, dependencias de desarrollo o son dependencias opcionales.

npm install moment  --save // instalacion como dependencia del proyecto
npm i moment -S // metodo corto de instalacion como dependencia del proyecto
npm install date-fns --save-dev // intalacion como dependencia de desarrollo
npm i date-fns -D // metodo corto de instalacion como dependencia de desarrollo
npm install eslint -O // instala una dependencia de forma opcional
npm install -g nodemon // instala una dependencia de forma global
npm fund // este comando permite ver que paquetes buscan formas de fincanciar su trabajo
npm install react --dry-run // simula la instalacion y nos retorna todo lo que se instalaria
npm install webpack -f // el flag -f forza la instalacion independientemente de que ocurran errores
npm install json-server@0.15.0 // instala una version en especifico del paquete

Actualizar paquetes

Revisar que paquetes disponen de nuevas versiones

npm outdate

Para ver un ouput mas detallado

npm outdate --dd

Actualizar los paquetes que no estan en la ultima version

npm update

Actualizar un paquete especifico

npm install json-server@latest

Eliminar paquetes

Eliminar un paquete de node_modules y del archivo package.json

npm uninstall json-server

Desinstalar un paquete de todo node_modules pero no del archivo package.json

npm uninstall webpack --no-save

Package lock y uso de los simbolos ^ y ~

El archivo package.lock nos sirve como control de versiones de los paquetes que hemos instalado, pero es opcional mantenerlo dentro de tu repositorio.
A la hora de establecer versiones debemos tener en cuenta si las modificacione que realizaste son un cambio mayor(major), cambio menor(minor) o el cambio fue solo un parche(patch)

Dentro de la configuracion del package.json en cada dependencia existen dos simbolos que nos permiten controlar como vamos a recibir esas actualizaciones hacia nuestro proyecto.
^
Si mantenemos el caret dentro de la configuracion de nuestro package.json estamos garantizando que cuando realizemos una actualizacion o tengamos un cambio que tengamos que realizar, va hacer una actualizacion de los cambios menores y de los parches o bug fixes.
~
Establece que vamos a recibir actualizaciones o cambios solamente de los parches o bug fixes.

Solución de problemas

Uno de los problemas que llegan a suceder cuando estamos trabajando entre branchs con otros desarrolladores, es que nuestros archivos almacenados en un módulo no estén correctamente instalados o tengamos una versión anterior para esto vamos a ejecutar un comando que nos va a dar la seguridad de que estamos limpiando la caché que pueda existir y que nos este causando conflictos.

npm cache clean --force

para verificar que se haya eliminado ejecutamos...

npm cache verify

Una herramienta que puedes utilizar para eliminar carpetas con el mismo comando en cualquier sistema operativo donde la instales es rimraf.

sudo npm install -g rimraf

y el comando para eliminar una carpeta con está librería es...

rimraf node_modules

Seguridad

Para verificar si no existe alguna vulnerabilidad o conflicto en alguna de las librerías de nuestro proyecto ejecutamos el siguente comando.

npm audit

Para resolver los conflictos encontrados podemos usar los siguientes comandos.

npm audit --json //nos da un detalle de las vulnerabilidades
npm update eslint-utils --depth 2 // intenta actualizar librerías de segundo nivel que nos den conflictos con eslint-utils
npm audit fix //nos garantiza que los detalles del conflicto sean resueltos

Como recomendación puedes utilizar Snyk, está herramienta te permite verificar y estart al día de los conflictos de tu proyecto.

Crear un paquete

Creamos una función

const names = [
    'ismael',
    'andres',
    'liz',
    'ricardo',
    'eibar',
    'carlos',
    'laura'
]
const randomNames = () => {
    const name = names[Math.floor(Math.random() * name.length )];
    console.log(name)
}
module.exports = { randomNames }

Creamos la configuración de bin para asegurarnos que es un paquete instalable global.js

#! /usr/bin/env node
let random = require('../src/index')
random.randomNames();

Agregamos la configuración de bin al packages.json

"bin": {
    "random-names": "./bin/global.js"
  },
  "preferGlobal": true

Para probar nuestro paquete, creamos una referencia de forma global de nuestro paquete, tenemos que estar en la carpeta del proyecto.

sudo npm link
sudo npm i -g /home/balach/npm/random-values

Publicar el paquete en npmjs.com

Para publicar un paquete primero debemos registrarnos en la páginal npmjs.com. Una vez lo tengas creado vamos a ejecutar los siguientes comandos.
Crear el usuario de npm que nos pedira las credenciales que acabamos de registrar en la página.

npm adduser

Publicar el paquete es el paso final para mandarlo a los servidores de npm.

npm publish

Cuando realizemos cambios al proyecto debemos indicarle a npm que tipo de cambio hemos hecho para que actialize nuestra versión y pueda volver a publicar los cambios.

npm version patch
npm version minor
npm version major

Genial, has aprendido ha configurar tu archivo package.json, gestionar tus dependencias, descargar versiones específicas de librerías y publicar tus propias librerías para NPM.

Si quieres aprender más acerca de desarrollo web suscribete a mi canal estoy subiendo contenido cada semana, espero que te sirva el contenido que estoy creando, gracias por leerme. Nos vemos hasta la proxima. 😀

How to create your own Git Server

Ismael López — Sat, 28 Mar 2020 23:53:13 +0000

Usar un control de versiones es muy importante en el mundo del desarrollo, independientemente de si tu empresa es una consultoria de software o si solo tiene un departamento de desarrollo interno es crucial tenerlo. Una de las problematicas a las que me enfrente fué implementar un servidor propio que permitiera tener el control de accesos y permisos de forma interna en la empresa ya que hacerse de un servicio tipo GitHub o GitLab no está dentro de sus políticas por x razón de tener control de todo, me parece algo exagerado pero en lo personal me sirvio para profundizar más en como funciona en core de git en un entorno productivo. Ya no me enrrollo más y aqí te comparto los pasos a seguir para crear tu propio servidor git.

Configuración e instalación de git

Antes de comenzar quisiera aclarar que la instalación se hizo en un servidor virtualizado con CentOS 8, dicho esto lo primero que vamos hacer es actualizar el sistema e instalar algunas librerías estándar.

yum update -y && yum upgrade -y
yum -y install nano

Instalar Git y habilitar Git Shell

yum install -y git
echo "/bin/git-shell" >> /etc/shells

Para controlar los accesos y los permisos utilize la herramienta Gitolite que si quieres saber más al final tienes los enlaces a la documentación oficial.

A continuación se muestra un esquema de configuración de Gitolite con Git en el Servidor.

Crear un usuario para Gitolite

Vamos a crear el usuario que nos va servir para clonar los repositorios a las distintas máquinas de nuestros usuarios finales.

adduser git
passwd git

Crear llave publica SSH y copiarla al usuario git

Vamos a generar las llaves ssh para realizar la autenticación por clave pública y no por password

ssh-keygen
cp .ssh/id_rsa.pub sk.pub

Ahora vamos a copiarla al directorio de usuario git.

cp sk.pub /home/git

Puedes verificar que se haya copiado correctamente.

ls /home/git/

Corre el siguiente comando para actualizar el Bash.

source .bash_profile

Perfecto hasta aquí ya tendriamos listo el servidor git ahora hace falta la instalación de la configuración de la herramienta Gitolite.

Instalar Gitolite

Iniciamos sesión con usuario git.

su - git

Creeamos un directorio bin.

mkdir ~/bin

Ahora, clonemos la última versión de gitolite.

git clone git://github.com/sitaramc/gitolite

Crea el símbolo de gitolite al directorio bin.

gitolite/install -ln ~/bin

Finalmente, corre el siguiente comando para instalar Gitolite con la llave SSH publica.

gitolite setup -pk sk.pub

Probar Gitolite

Ahora, vamos a verificar que Gitolite está trabajando de forma correcta, cambiémonos a la cuenta con la que creamos la clave ssh.

git clone git@192.168.1.150:gitolite-admin

Verifica el contenido del repositorio gitolite-admin.

ls gitolite-admin/

Con esto hemos terminado de verificar que Gitolite funciona correctamente.

Crear nuestro primer repositorio

Vamos a crear primero una carpeta con el nombre del repositorio y extensión .git dentro de directorio /home/git/repositories

mkdir /home/git/repositories/mi-repositorio.git
cd /home/git/repositories/mi-repositorio.git 
git init --bare --shared=group

Ahora cambiamos el propietario del repositorio para que sea el usuario git.

chown -R git /home/git/repositories/mi-repositorio.git

Creación de llave ssh del lado del cliente.

Tenemos que crear la llave ssh publica que nos va permitir clonar los proyectos a los distintos usuarios, para ello ejecutamos el siguiente comando dentro de la máquina local donde va trabajar el usuario.

ssh-keygen -t rsa

Ahora obten las llaves públicas de cada usuario ya sea por correo electrónico, USB, cualquier método que desees. Copia el contenido de la llave pública id_rsa.pub a un nuevo fichero con el nombre del usuario y extensión .pub por ejemplo ismael.pub.

usersPubKey='contents_of_your_public_key_file'

Dentro del directorio donde clonamos el proyecto deber crear el archivo con la llave publica ssh del usuario que quieres añadir en este caso el ejemplo es ismael.pub

echo $usersPubKey > /home/intercomm/gitolite-admin/keydir/ismael.pub

Cambia el nombre de cada archivo recibido al nombre del usuario, agregue un ".pub" al final, cópielo en keydir/ en el repositorio de gitolite-admin que clonó.

git add keydir
git commit
git push

También debemos de darle permisos al usuario creado modificando el archivo gitolite.conf que se encuentra en el directorio /home/username/gitolite-admin/conf/gitolite.conf

@admin = git ismael
@engineers = ricardo eibar liz ismael
@productmanagers = gilberto, rodrigo

repo gitolite-admin
    RW+ = @admin

repo testing
    RW+ = @all

repo links
    RW+ master = ismael
    RW+ develop@engineers
    R develop@productmanagers

Por último debes confirmar los cambios hechos al repositorio con el usuario que tenga privilegios, en nuestro caso ya sea con el usuario git o ismael.

git add -A 
git commit -m “message to commit”
git push origin

Verificar el acceso al repositorio creado

Una vez creado el repositorio y agregado los permisos a la configuración de Gitolite vamos a clonar el proyecto en nuestra máquina.

git clone git@myserver.com:links

Si todo está correcto se creará la carpeta con los archivos en el directorio donde le indicaste.

Agregar ramas al repositorio

Cuando creamos el proyecto también es necesario añadir las ramas(branchs) que necesitemos para para organizar nuestro flujo de trabajo en nuestro caso solo crearemos dos ramas la rama develop y testing.

git branch desarrollo
git checkout desarrollo
git branch --set-upstream-to=origin/master develop 
git push origin desarrollo

git branch pruebas
git checkout pruebas
git branch --set-upstream-to=origin/desarrollo testing
git push origin pruebas

WorkFlow

Hemos terminado de configurarlo todo pero ahora te toca decidir con tu equipo que forma de trabajo va a usar, aquí te dejo una propuesta que puedes usar, es una metodología llamada Workflow.

Propuesta de flujo de trabajo con Git

Llegamos al final de este post, sin duda ha sido bastante largo este tutorial y aún nos queda mucho por aprender. Te quiero invitar a mi canal de YouTube donde comparto videotutoriales del grandioso mundo de la programación.

Referencias

https://gitolite.com/gitolite/install.html
https://git-scm.com/book/en/v1/Git-on-the-Server-Gitolite
https://nvie.com/posts/a-successful-git-branching-model/

Begining Guide to Use Tailwind CSS

Ismael López — Sat, 21 Mar 2020 19:28:38 +0000

Instalación y configuración del proyecto

Iniciamos un nuevo proyecto npm e instalamos las líbrerias que vamos a utilizar.

mkdir tailwind-css-project
cd tailwind-css-project
npm init -y
npm i tailwindcss autoprefixer postcss-cli

Creamos los archivos de configuración de tailwind css.

npx tailwindcss init

Creamos un archivo para las configuraciones de post css.

touch postcss.config.js

Abrimos el proyecto con Visual Studio Code (VS Code).

code .

Puedes utilizar la siguiente extensión para tu editor de código que te ayudara al escribir las clases de tailwind css.

Extensión recomendada para VS Code.
Tailwind CSS IntelliSense

Configuramos en archivo postcss.config.js

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer')
  ]
}

Vamos a crear el archivo base de tailwind que hará que funcione agregue los componentes que necesita para funcionar. A este archivo lo llamaremos css/tailwind-base.css

@tailwind base;

@tailwind components;

@tailwind utilities;

Ahora creamos un nuestro archivo index.html en una carpeta que nombraremos public, entonces la ruta serías public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Ahora vamos a crear el archivo de salida style.css que importamos en el index.html, para ello creamos un comando en la sección de scripts del package.json

"build": "postcss css/tailwind-base.css -o public/css/style.css"

Para finalizar en la terminal ejecutamos el siguiente comando que construirá el archivo de styles.css.

npm run build

Aquí me surgio un problema y es que no me permitía la ejecución del script y tuve que ejecutar el siguiente comando en mi configuración de node.

npm config set ignore-scripts false

Si alguien tiene el mismo problema espero le sirva. Continuemos.

Principios de Tailwind

Responsive Design
Mobile First
Utility First

Colores

Los elementos a los que se les puede cambiar el color son:

Fondo
Texto
Bordes
Placeholder

Actualmente tenemos un archivo de configuración vacío pero ahora queremos agregar la configuración que tailwind tiene por defecto para ello vamos a ejecutar el siguiente comando que nos creará dicho archivo.

npx tailwindcss init tailwind.config.full.js --full

Ahora aprendamos a usarlo. Vamos al archivo index.html y en la etiqueta h1 le agregamos las siguientes clases.

  <h1 class="bg-yellow-500 text-white">Hello world</h1>
  <input class="border-2 border-blue-500 placeholder-green-500" type="text" placeholder="Ingresa texto">

Como pueder ver todas estás clases existen gracias a que agregamos la configuración anterior de tailwind.

Dimensiones y espacios

Tailwind tiene un sistema configurable de espacios y tamaños, regresando a nuestro archivo de configuración tailwind.config.js aquí hau un atributo llamado spacing.
Como dato 1rem equivale a 16px;

spacing: {
      px: '1px',
      '0': '0',
      '1': '0.25rem',
      '2': '0.5rem',
      '3': '0.75rem',
      '4': '1rem',
      '5': '1.25rem',
      '6': '1.5rem',
      '8': '2rem',
      '10': '2.5rem',
      '12': '3rem',
      '16': '4rem',
      '20': '5rem',
      '24': '6rem',
      '32': '8rem',
      '40': '10rem',
      '48': '12rem',
      '56': '14rem',
      '64': '16rem',
    },

Estas propiedades pueden controlar las dimensiones o espacios.

Height
Width
Margin
Padding

Veamos como modificar estás propiedades.

<h1 class=" h-16 w-32 bg-yellow-500 text-white">Hello world</h1>

Tailwind también nos permite usar porcentajes y estos los maneja en fracciones.

<h1 class=" h-16 w-1/2 bg-yellow-500 text-white">Hello world</h1>

Ahora veamos como modificariamos las propiedades de margin y padding.

  <h1 class=" h-32 w-1/5  pt-8 pl-4 ml-8 mt-16 mb-16 bg-yellow-500 text-white">Hello world</h1>

También podemos cambiar las propiedades respecto al eje x, y. Esto nos permite agregar en ambos lados la misma cantidad de unidades.

<h1 class=" h-32 w-1/5 my-8 bg-yellow-500 text-white">Hello world</h1>

<!-- mx-auto nos permite centrarlo-->
<h1 class=" h-32 w-1/5 my-8 mx-auto bg-yellow-500 text-white">Hello world</h1>

Para el padding podemos aplicarlo en nuestro input de la siguiente manera.

<input class="py-1 px-4 border-2 border-blue-500 placeholder-green-500" type="text" placeholder="Ingresa texto">

Recursos

Aqui te dejo los enlaces de la documentación oficial para que la repases más a fondo y otros recursos donde hay mucha más información donde puedas seguir aprendiendo y buscando inspiración.

https://tailwindcss.com/docs
https://github.com/aniftyco/awesome-tailwindcss
https://refactoringui.com/book

Introduction Guide to Callbacks, Promises and Async/Await

Ismael López — Sat, 14 Mar 2020 18:20:15 +0000

Esta es una guía de encontrarás conceptos básicos de asincronismo en JavaScript que nos permitirán tener aplicaciones mantenibles con código simple y fácil de leer como si de una receta de cocina se tratara, verás ejemplos prácticos. También puedes ver la lista de reproducción dedicada a estos temas en el canal de YouTube.

Callbacks

Es una función "X" que se usa como argumento de otra función "Y". Cuando se llama a "Y", está ejecuta "X".

Para conseguirlo, usualmente lo que se pasa a "Y" es el puntero de "X". Veamos como funciona.

Ejemplo

Normalmente el ejemplo más sencillo de representar un callback es usando la función setTimeout(function, time, arg?) que los que hace es recibir una función a la cual se le conoce como callback, como segundo parámetro recibe el tiempo en mili segundos, opcional mente puede o no recibir argumentos.

setTimeout(function() {
  console.log('Hello world')
}, 2000)

Si aún no queda claro vamos a ver más ejemplos y así lo vemos más a profundidad.

Supongamos que tenemos una función calculate y necesita dos argumentos y adicionalmente va recibir una function que sera el callback que me devolvera.

function calculate(n1, n2, operation) {
  return operation(n1, n2);
}

La funcion operation podria ser una función llamada add que lo que va hacer es solo sumar los dos argumentos recibidos y nos devolverá el resultado.

function add(n1, n2) {
  return n1 + n2;
}

Entonces a la hora de ejecutar nuestra función calculate lo que va hacer es pasar el puntero de estos dos argumentos a la function add que nos devolverá la suma de estos dos valores, independientemente de si hayamos hecho otras acciones antes.

const result = calculate(2, 9, add);
console.log(result); // 11

Ventajas

Simple: son conceptual mente simples. Pasas una función que quieras que se ejecute después.
Universal: corren donde sea. No requiere de un transpilador.

Desventajas

Flujo poco intuitivo: requieren que te muevas dentro del código para comprender el flujo del mismo.

Consejo: Uso de callbacks
Muchas de las funciones del core de Node.js están basadas en callbacks, no obstante, a partir de la versión de ECMASCRIPT 6 (ES6) se ha simplificado el código con el uso de las promises. Usa los callbacks lo menos posible para mantener un código limpio.

Ejemplo practico callbacks

const booksDb = [
  {
    id: 1,
    title: 'Clean Code'
  },
  {
    id: 2,
    title: 'The pragmatic programmer'
  },
  {
    id: 3,
    title: 'Web Development with Node.js'
  }
];

function getBookById(id, callback) {
  // dentro de booksDb va a buscar el objeto que tenga como book.id el mismo que le paso como parámetro id
  const book = booksDb.find(book => book.id === id);
  if (!book) {
    const error = new Error();
    error.message = 'Book not found!'
    // el primer paŕametro de un callback siempre es un error
    return callback(error)
  }

  callback(null, book);
}

// Ejecutemos la función
getBookById(2, (err, book) => {
  if (err) {
    return console.log(err.message);
  }

  return console.log(book);
})

Todo bien hasta aquí, pero como podemos ver cada que yo tenga que pasar un callback a mi función tengo que controlar los errores haciendo validaciones, lo cuál le agrega más complejidad e incluso llegaremos a caer en el callback hell y nuestras aplicaciones resultaran muy difíciles de mantener.

Callback Hell

Cuando se hace un uso masivo de los callbacks podemos caer muy fácil en el callback hell, veamos que es esto, que problemática nos trae.

// vamos a agregar una propiedad authorId
const booksDb = [
  {
    id: 1,
    title: 'Clean Code',
    authorId: 1
  },
  {
    id: 2,
    title: 'The pragmatic programmer',
    authorId: 2
  },
  {
    id: 3,
    title: 'Web Development with Node.js',
    authorId: 3
  }
];

// y creamos también otra nueva base de datos en memoria
const authorsDb = [
  {
    id: 1,
    name: 'Robert C. Martin'
  },
  {
    id: 2,
    name: 'Steve Forest'
  }
];

function getBookById(id, callback) {
  const book = booksDb.find(book => book.id === id);
  if (!book) {
    const error = new Error();
    error.message = 'Book not found!'
    return callback(error)
  }

  callback(null, book);
}

// vamos a crear una función que se encargue de buscar el autor
function getAuthorById(id, callback) {
  const author = authorsDb.find(author => author.id === id);
  if (!author) {
    const error = new Error();
    error.message = 'Author not found!'
    return callback(error)
  }

  callback(null, author);
}
// ¿Dónde ocurre el callback hell?
getBookById(2, (err, book) => {
  if (err) {
    return console.log(err.message);
  }
  console.log(book);

  // una vez que ya conseguí un book vamos a conseguir el author con el authorId
  getAuthorById(book.authorId, (error, message) => {
    // estar validando errores se vuelve tedioso
    if(error) {
      return console.log(error.message)
    }

    // si encontro el author muestralo
    console.log(`This book ${book.title} was written by ${author.name}`);
  });
});

Como vemos se incrementa la complejidad entre más vamos anidando el llamado a otras funciones, pero veamos como resolver esto con ayuda de las promesas.

Promises

Las promesas son una forma de manejar la sincronía en javascript que surgío a partir de la versión de ES6 pero ¿Qué son en realidad?

Promesa: Es un objeto que representa la terminación o el fracaso eventual de una operación asíncrona.

Esencialmente, una promesa es un objeto devuelto al cual se adjuntan funciones callback, en lugar de pasar callbacks a una función.

Todo surge a partir de un objeto primitivo Promise que recibe como constructor un callback.

const promise = new Promise(callback);

Esté constructor tiene que corresponder a una función de este tipo.

function executor(resolve, reject) {
  //si funciona
  resolve();

  // si falló
  reject();
}

Recuerda cuando se le pasa son argumentos, cuando se reciben son parámetros. Y ¿Quién le pasa estos argumentos a está función?, pues el constructor automáticamente lo hace por nosotros y nos provee de estas dos funciones. Estos nombres pueden ser lo que les plazca pero por convención se suelen llamar resolve y reject para referirse a ellos.

Entonces el uso sería de esta forma.

const promise = new Promise(executor);

Una vez que creemos nuestro objeto promise y le hallamos pasado nuestra función de callback, inmediatamente este objeto va disponer de tres métodos (promise.then().catch().finally()).

Estos métodos son bastante útiles por ejemplo en el then va a venir la data siempre y cuando el método resolve() se haya invocado.

En el catch va a venir el error o el mensaje que hayamos puesto en el reject() siempre y cuando haya ocurrido un error.

Y el método finally siempre se va ejecutar no importa si haya ocurrido un error o no.

Ventajas

Fácilmente enlazable: se pueden enlazar fácilmente para manejar flujos asíncronos complejos sin tener que recurrir a más anidaciones como se requiere en callbacks.
Poderoso: proporciona una capacidad excepcional para componer operaciones asíncronas complejas.

Desventajas

Excepciones que desaparecen: Se debe declarar catch() para manejar errorres en lugar del tradicional try/catch.

Consejo: Promesas
Usa promesas en vez de callbacks para mantener el standard, ten cuidado en caer en el promise hell por la excesiva anidación.

Ejemplo practico promises

const booksDb = [
  {
    id: 1,
    title: 'Clean Code',
    authorId: 1
  },
  {
    id: 2,
    title: 'The pragmatic programmer',
    authorId: 2
  },
  {
    id: 3,
    title: 'Web Development with Node.js',
    authorId: 3
  }
];

const authorsDb = [
  {
    id: 1,
    name: 'Robert C. Martin'
  },
  {
    id: 2,
    name: 'Steve Forest'
  }
];

// refactorizemos la función a promesa
function getBookById(id) {
  return new Promise ((resolve, reject) => {
    const book = booksDb.find(book => book.id === id);
    if (!book) {
      const error = new Error();
      error.message = 'Book not found!';
      reject(error);
    }

    resolve(book);
  });
}

function getAuthorById(id) {
  return new Promise(() => {
    const author = authorsDb.find(author => author.id === id);
    if (!author) {
      const error = new Error();
      error.message = 'Author not found!';
      reject(error);
    }

    resolve(author);
  });
}

// Ejecutamos las promesas
getBookById(1).then(book => {
  return getAuthorById(book.id);
}).then(author => {
  console.log(author);
}).catch(error => {
  console.log(error.message)
});

Y este sería el uso de las promesas vamos a ver ahora como simplificar esto todavía más usando *async/awai*t.

Async/Await

Async: cuando se llama a una función async esta devuelve un elemento Promise. Cuando la función async devuelve un valor, Promise se resolverá con el valor devuelto. Si la función async genera una excepción o algún valor, Promise se rechazará con el valor generado.

Await: la expresión await provoca que la ejecución de una función async sea pausada hasta que una Promise sea terminada o rechazada, y regresa a la ejecución de la función async después del término. Al regreso de la ejecución, el valor de la expresión await es la regresada por una Promise terminada.

Consejo: async / await
Cuando utilizas async y await tienes un código mucho más limpio y sobre todo un mejor control de las excepciones. De ser posible, siempre utiliza async y await.

Ejemplo practico async / await

// al usar *async* en las funciones automáticamente devuelve una promesa
async function getBookById(id) {
    const book = booksDb.find(book => book.id === id);
    if (!book) {
      const error = new Error();
      error.message = 'Book not found!';
      throw error;
    }

    return book;
}

async function getAuthorById(id) {
    const author = authorsDb.find(author => author.id === id);
    if (!author) {
      const error = new Error();
      error.message = 'Author not found!';
      throw error;
    }

    return author;
}

// await va permitir que se resuelva cada promesa
async function main() {
  try {
    const book = await getBookById(1);
    const author = await getAuthorById(book.authorId);
    console.log(`This books ${book.title} was written by ${author.name}`);
  } catch (exception) {
    console.log(exception.message);
  } 
}

// ejecutamos el llamado a las funciones
main();

Generamos el mismo resultado que con los callbacks y lo hicimos con mucho menos líneas de código, además es mucho más claro y tenemos más control de los errores.

Esto ha sido todo acerca de los async / await espero que te haya servido si quieres aprender más puedes ver vídeos de mi canal de YouTube

Vue.js and The Start Wars API

Ismael López — Sun, 08 Mar 2020 22:26:06 +0000

La forma más fácil de trabajar con una API y tu sitio de JAMStack es directamente accediendo desde JavaScript. En este ejemplo, simplemente harás una petición HTTP al recurso y este se desplegara en pantalla. Vamos a ver como consumir la API de Start Wars con ayuda de Vue.js

Primeros pasos

Vamos a crear el template HTML que donde vamos a desplegar el contenido.

<div id="app">
   <h1>Star Wars Films</h1>
   <table> 
      <thead>
         <tr>
            <th>Título</th>            
            <th>Director</th>
            <th>Productor</th>
            <th>Fecha de lanzamiento</th>
         </tr>
      </thead>
      <tbody>              
         <tr v-for="film in films">         
            <td>Attack of the Clones</td>            
            <td>George Lucas</td>
            <td>Rick McCallum</td>
            <td>2002-05-16</td>
         </tr> 
      </tbody>
   </table>    
</div>

Request HTTP

Para realizar la petición podriamos apoyarnos de axios pero en realidad no hace falta, vamos a usar fetch la API nativa del navegador que nos viene bien para hacer peticiones simples.


const app = new Vue({
    el:'#app',
    data: {
        films:[]
    },
    created() {
        fetch('https://swapi.co/api/films')
        .then(res => res.json())
        .then(res => {
            this.films = res.results;
        });
    }
});

Render Response

Perfecto, ya que tenemos los datos con la directiva v-for vamos a iterar cada elemento dentro de la vista, puedes revisar la API y ver que nodos tenemos a nuestra disposición o bien puedes examinar en consola la respuesta.

<div id="app">
   <h1>Star Wars Films</h1>
   <table> 
      <thead>
         <tr>
            <th>Title</th>            
            <th>Director</th>
            <th>Producer</th>
            <th>Release date</th>
         </tr>
      </thead>
      <tbody>              
         <tr v-for="film in films">         
            <td>{{ film.title }}</td>            
            <td>{{ film.director}}</td>
            <td>{{ film.producer}} </td>
            <td>{{ film.release_date}} </td>            
         </tr> 
      </tbody>
   </table>    
</div>

De esta forma podemos traer datos a nuestras vistas de diferentes APIs.

My 404 Page

Ismael López — Thu, 05 Mar 2020 05:47:03 +0000

Hey, de nuevo compartiendoles un pequeño proyecto de como cree una página de error 404 muy cool :), espero les sirva. Saludos.

Materialize page

Ismael López — Wed, 04 Mar 2020 05:14:04 +0000

Hey que tal este template de un blog, espero a alguien le sirva