DEV Community: Angel Taborda

Crea y publica tu blog GRATIS en 10 min con Astro y Netlify

Angel Taborda — Sun, 29 Aug 2021 20:32:44 +0000

Sin duda, la mejor manera de documentar lo que hacemos y aprendemos es mediante un Blog. Puede parecer tedioso el tener que redactar un artículo, pero es una valiosa herramienta de respaldo y consolidación de nuestros conocimientos.

Si alguna vez te ha pasado por la mente empezar tu propio blog, hazlo!. No solo ayudarás a otros sino también a ti mismo.

Al tener que pensar y estructurar tus ideas para plasmarlas en un artículo, llegarás a entender mejor lo que quieres explicar y tendrás una base de conocimientos propia a la cual acudir cuando lo necesites.

Plataformas para hospedar tu blog hay muchas!, yo por ejemplo uso DEV.to para el mío. Pero si eres desarrollador, lo más común es que quieras picártelo tu mismo 🤣 y en este artículo te mostraré cómo hacerlo con Astro.

Astro es una herramienta para construir sitios web estáticos usando tu framework de JavaScript favorito (React, Vue, Svelte, etc.) pero enviando al navegador sólo HTML y tu código JavaScript solo cuando sea necesario. Esto hará que tu sitio sea increíblemente rápido!. 🚀 Te recomiendo que lo mires con más detalle en su sitio web.

En lo que nos centraremos ahora es en crear y desplegar nuestro blog siguiendo unos pocos pasos:

Crear el proyecto
Subir repositorio
Desplegar blog
Publicar nuevo artículo

Y qué mejor manera de hacerlo que usando al chico nuevo del barrio (Astro). Así que vamos manos a la obra:

Crear el proyecto

Lo primero que vamos a hacer es crear la carpeta del proyecto, yo la llamaré my-astro-blog. Luego inicializaremos el proyecto usando la plantilla Blog.

mkdir my-astro-blog
cd my-astro-blog
npm init astro
❯  Blog

Luego instalaremos las dependencias, inicializaremos el repositorio de git y por último lanzaremos el proyecto para ver qué tenemos como resultado.

npm install 
git init && git add -A && git commit -m "Initial commit" 
npm start

Al navegar a http://localhost:3000/ deberíamos ver algo como esto:

Ya tenemos nuestro blog! Ahora vamos a publicarlo.

Subir repositorio

En mi caso, subiré este repositorio local a uno remoto en Gitlab.

Para subirlo simplemente tengo que hacer lo siguiente desde la terminal:

git remote add origin git@gitlab.com:io-digital-repos/my-astro-blog.git
git push -u origin main

Ahora que ya tengo mi proyecto en Gitlab, lo publicare usando Netlify.

Desplegar blog

Usaré Netlify para hospedar mi blog, así que tengo que irme a "Sites => New Site from Git", seguir los pasos en el wizard y esperar que termine la compilación.

Cuando termine se generará una URL con la que podemos acceder a nuestro nuevo blog, en mi caso la URL que auto-generó fue esta: https://awesome-varahamihira-a33564.netlify.app

NOTA: para asociar tu propio dominio simplemente debes ir a la sección "Domain" del sitio y seguir los pasos indicados.

Publicar nuevo artículo

Lo que nos falta es ver cómo publicamos nuevos post en nuestro blog. Para ello vamos a abrir nuestro proyecto de Astro con nuestro editor de código favorito, en mi caso es Visual Studio Code.

Como vemos nuestro proyecto contiene archivos .astro, los cuales no son reconocidos por VSC. Pero no pasa nada, esto lo solucionamos buscando la extensión "Astro":

Una vez instalada todo se verá mejor 😋 pero no quiero entrar en los detalles de la programación con Astro, puedes encontrar toda la documentación aquí y leerla tranquilamente.

Ahora mismo centraremos la atención en la carpeta "pages/posts"

En esa carpeta es donde crearemos los nuevos artículos de nuestro blog usando Markdown 👍 un formato muy conocido y querido por muchos 😃

Crearé una nueva entrada llamada hello-world.md y subiré los cambios a mi repositorio.

Esto disparará automáticamente la compilación en Netlify y si accedo nuevamente a la URL de mi blog, podré ver mi nuevo post publicado, recién salido del horno. 🥖

¿Y ahora qué?

Ahora solo es cuestión de personalizar tu blog para darle tu estilo personal y de crear tus propios artículos.

¡A por ello!

Fuentes

Getting Started 🚀 Astro Documentation

Automatización Cognitiva con UiPath y Azure

Angel Taborda — Sun, 29 Aug 2021 20:11:16 +0000

Pongámonos en contexto

En los últimos años venimos escuchando mucho sobre RPA, aunque es cierto que existía desde hace mucho tiempo atrás, la aparición de nuevas herramientas que permiten interactuar con todo tipo de aplicaciones de manera más sencilla fue lo que llevó a esta tecnología a un siguiente nivel y a considerarla cómo una tecnología en sí, hasta el punto de ser parte importante en la transformación digital.

Desde entonces muchas tareas rutinarias han podido ser automatizadas y se ha podido ver el gran beneficio de la implementación de esta tecnología en industrias y empresas de todos los tamaños y tipos, ahorrando significativamente los costos y empleando el tiempo de los recursos de manera que aporten más valor a la compañía.

Sin embargo rápidamente notamos ciertas limitaciones a la hora de automatizar nuestros procesos. Una de estas limitaciones es la posibilidad de interpretar de manera fácil y correcta documentos con datos desestructurados. Esta limitación conllevaba a que, al intentar superar esta barrera, nuestros procesos se volvieran más complejos y muy poco estables.

Es entonces cuando empezamos a ver aparecer el término automatización cognitiva o RCA (Robotic Cognitive Automation). Esta nueva clase de automatización de procesos combina el RPA, donde tenemos reglas bien definidas que realizan tareas simples, con la inteligencia artificial.

Este nuevo tipo de automatización se ha hecho posible gracias a proveedores como Microsoft quienes nos ofrecen una plataforma con la que podemos integrarnos de manera muy sencilla con toda clase de servicios cognitivos, por ejemplo tenemos:

Servicios de decisión

Con estos podemos realizar identificación temprana de posibles anomalías, detectar contenido potencialmente ofensivo o no deseado, etc.

Servicios de lenguaje

El mas común es el NLP (Natural Language Processing) que incorpora reconocimiento del lenguaje natural, análisis de texto que detecta opiniones, frases claves y entidades con nombres, o hasta detectar y traducir a más de 90 idiomas.

Servicios de visión por computadora

Con ellos podemos analizar contenido de imágenes y vídeos, detectar e identificar personas en imágenes o extraer textos y tablas de documentos.

Y es en este último tipo de servicio en el que nos centraremos hoy y haremos un ejemplo práctico de cómo integrar UiPath con Microsoft Azure utilizando el servicio de visión por computadora para extraer información de facturas sin haber hecho ningún entrenamiento previo ni haber indicado de alguna manera dónde está la información que queremos extraer.

Manos a la obra

En resumen

Como hemos visto, si queremos llevar nuestras automatizaciones a un siguiente nivel, la automatización cognitiva es prácticamente necesaria porque de esta manera dotamos cada vez más a nuestros robots de más autonomía, lo cual permite a los usuarios enfocarse en tareas aún más necesarias para la compañía y seguir aportando valor a la misma.

Además gracias a grandes proveedores de servicios tecnológicos como Microsoft contamos con los Servicios Cognitivos de Azure para integrarlos en nuestros RPA de manera muy sencilla.

Por último no olvidemos que gracias a la economía de escala estos servicios están al alcance de todos los bolsillos, lo que nos impulsa a usarlos cada vez más. Por eso podríamos decir que quién no lo usa es porque no quiere…La pregunta es, ¿Lo estás haciendo ya?

JavaScript Tips & Tricks #1 (undefined)

Angel Taborda — Sun, 29 Aug 2021 20:04:41 +0000

undefined

En JavaScript existen 7 tipos built-in, a saber:

null
undefined
boolean
number
string
object
symbol

Ahora mismo nos centraremos en undefined.

Comencemos por comentar una mala idea xD... Desafortunadamente, a diferencia del tipo null por ejemplo, undefined resulta ser un identificador. ¿Qué quiere decir esto?, pues que podemos hacer locuras como esta:

function foo() {
    var undefined = 2;
    console.log(undefined); // 2
}

foo();

Esto no podríamos hacerlo por ejemplo con null, ya que es una palabra reservada y no puede ser tratada como una variable.

Operador void

Mientras que undefined es un identificador built-in que contiene el valor undefined por defecto, otra manera de obtener este valor es con el operador void.

La expresión void __ , "vacía" cualquier valor, de manera que el resultado de la expresión es siempre el valor undefined. Esta expresión no modifica el valor existente solo asegura que ningún valor sea retornado de la expresión.

var a = 42;

console.log( void a, a ); // undefined 42

Por convención, la manera más común de representar el valor undefined es usando la expresión void 0. Cabe destacar que no hay diferencia práctica entre void 0, void 1 o undefined.

Resumen

undefined es un identificador que contiene el valor undefined.
El operador void es otra manera de obtener el valor undefined y la manera más usada de obtenerlo es usando la expresión void 0.

Fuentes

You Don't Know JS: Types & Grammar escrito por Kyle Simpson

¿Qué es this?

Angel Taborda — Sun, 29 Aug 2021 17:25:36 +0000

Seguramente no es la primera vez que ves esta pregunta. Quizás te la han hecho en alguna entrevista de trabajo o en un curso de JavaScript.

Lo cierto es que pocos saben lo que realmente es this en JavaScript. La razón más común es por el concepto que tenemos de esa palabra en lenguajes como C#, y que nos hace pensar erróneamente que debe referirse a lo mismo.

Normalmente hasta que no nos topamos con un funcionamiento “extraño” en nuestro código, no nos detenemos a pensar en si sabemos lo que realmente es. De hecho lo primero que hacemos es echarle la culpa a JavaScript y no a nuestra falta de interés por saber lo que está pasando.

Si te sentiste identificado o simplemente quieres saber de un modo sencillo lo que es this, sigue leyendo.

¿Qué NO es this?

NO es una referencia a sí mismo. Esta quizás es la respuesta más común que escuchamos, decir que this es una referencia a la función en la que se encuentra.

NO es una referencia al lexical scope de la función. Tampoco es una referencia al scope que definimos al momento de escribir nuestro código. (Más sobre lexical scope en un próximo post).

...entonces ¿Qué es this?

Es un binding que se hace cuando una función es invocada, y a lo que realmente hace referencia this dependerá completamente del lugar en dónde se ha llamado (call-site) dicha función, no el lugar en donde se ha declarado.

Pero, ¿cómo funciona? si es un binding, ¿se puede cambiar? Veamos ahora qué 4 reglas se aplican para determinar que es this.

Default Binding

Esta es la que se aplica cuando ninguna otra regla pueda hacerlo. El siguiente ejemplo lo ilustra:

function foo() {
    console.log(this.a);
}

var a = 2;

foo(); // 2

En este caso this.a hace referencia a la variable global a que hemos declarado. Como la llamada a la función foo() es una llamada común y ninguna de las otras reglas que veremos más adelante es aplicable, la regla por defecto es la ganadora.

Implicit Binding

La siguiente regla aplicaría cuando el lugar en donde se hace la llamada tiene un objeto como contexto, por ejemplo:

function foo() {
    console.log(this.a);
}

var obj = {
    a: 2,
    foo: foo
};

obj.foo(); // 2

Como obj es this para foo(), this.a sería sinónimo de obj.a

Cabe destacar que solo el nivel más alto de la cadena de referencias a una propiedad es la que se tomaría en cuenta, es decir:

function foo() {
    console.log(this.a);
}

var obj2 = {
    a: 42,
    foo: foo
};

var obj1 = {
    a: 2,
    obj2: obj2
};

obj1.obj2.foo(); // 42

Una de las cosas que pueden frustrarnos a veces es la pérdida de este binding implícito, lo que usualmente significa que se aplicaría la regla por defecto y this acabaría siendo el global object o undefined, depende de si usamos strict mode o no, por ejemplo:

function foo() {
    console.log(this.a);
}

var obj = {
    a: 2,
    foo: foo
};

var bar = obj.foo; // alias con referencia a la función

var a = 'global!!'; // propiedad 'a' en objeto global

bar(); // 'global!!'

Puede parecer que bar es una referencia a obj.foo pero en realidad es una referencia a foo en sí mismo, además recordemos que lo que importa es el lugar en donde se llama y bar() es una llamada común sin decoración por lo que la regla por defecto aplicaría.

Otro escenario muy común donde ocurre esto es cuando pasamos una función como callback:

function foo() {
    console.log(this.a);
}

function doFoo(fn) {
    // 'fn' otra referencia a foo

    fn(); // <-- call-site
}

var obj = {
    a: 2,
    foo: foo
};

var a = 'global!!'; // propiedad 'a' en objeto global

doFoo(obj.foo); // 'global!!'

Lo mismo ocurre si usamos una función built-in en JavaScript:

function foo() {
    console.log(this.a);
}

var obj = {
    a: 2,
    foo: foo
};

var a = 'global!!'; // propiedad 'a' en objeto global

setTimeout(obj.foo, 100); // 'global!!'

Veamos ahora cómo “solucionar” este problema con la siguiente regla.

Explicit Binding

En la regla anterior creamos una propiedad en un objeto y le asignamos una referencia a una función para que se enlazara this al objeto de manera indirecta.

Pero, y si queremos forzar a una función a que use un objeto en particular para this, sin tener que crear una propiedad con la referencia a la función dentro del objeto en cuestión?

¿Te suenan los métodos call o apply?

Todas las funciones tienen estos métodos disponibles, a través de su [[Prototype]], los cuales son muy útiles para lograr este cometido.

¿Cómo funcionan? Ambos reciben, como primer parámetro, el objeto que deben usar como this, y luego invocan la función. Cómo estamos indicando directamente lo que queremos que sea this, lo llamamos binding explícito.

function foo() {
    console.log(this.a);
}

var obj = {
    a: 2
};

foo.call(obj); // 2

Desafortunadamente, el explicit binding sigue sin ofrecernos una solución al problema planteado anteriormente.

Veamos una variación de este patrón que sí puede darnos una salida y que se introdujo como una utilidad built-in en JavaScript a partir de ES5.

Estamos hablando de Function.prototype.bind, y se usa de la siguiente manera:

Hard Binding

function foo(something) {
    console.log(this.a, something);
    return this.a + something;
}

var obj = {
    a: 2
};

var bar = foo.bind(obj);

var b = bar(3); // 2 3
console.log(b); // 5

bind(...) retorna una nueva función que está forzada a llamar a la función original usando el contexto de this que le hemos especificado.

new Binding

La cuarta y última regla se aplica cuando una función es invocada usando new (constructor call).

Esto es lo que pasa cuando usamos new frente a una función:

Un objeto nuevo se crea de la nada.

El objeto nuevo se establece como this para la llamada de esa función.

A menos que la función retorne su propio objeto, la llamada retornará automáticamente el nuevo objeto creado.

function foo(a) {
    this.a = a;
}

var bar = new foo(2);
console.log(bar.a); // 2

Bonus: Lexical this

Este tipo de binding es posible a partir de ES6 y se aplica al usar arrow-functions.

En este caso se usa el lexical scope como this, es decir se tomara del contexto que encierre la llamada a la función.

function foo() {
    return (a) => {
        console.log(this.a);
    };
}

var obj1 = {
    a: 2
};

var obj2 = {
    a: 3
};

var bar = foo.call(obj1);
bar.call(obj2); // 2

Este tipo de binding ignora todas las reglas previamente mencionadas y no puede ser sobrescrito.

Resumen

Hemos visto que this es un binding y que para determinarlo durante la ejecución de una función es necesario encontrar el call-site de esa función.

Una vez examinado, 4 reglas pueden aplicar en el siguiente orden:

¿Se llamo usando new? Entonces se usa el objeto nuevo que se creo.
¿Se llamo con call o apply o bind? Entonces se usa el objeto especificado.
¿Se llamo bajo el contexto de un objeto? Entonces se usa ese objeto.
¿Ninguna de las anteriores? undefinded en strict mode, sino el objeto global.

Fuentes

MDN
You Don't Know JS: this & Object Prototypes escrito por Kyle Simpson