Hola chicos, he estado un poco ausente últimamente, es porque he estado trabajando en la configuración de un proyecto que estoy abordando, un sitio web de comercio electrónico personalizado.

## Antecedentes

**Mi hermana tiene un negocio local en Argentina** llamado [By Maruja](https://www.instagram.com/bymaruja/) que lleva el nombre de mi abuela. Ella **vende accesorios para mujeres como aretes, collares** y cosas por el estilo. Por el momento, **tiene una tienda de [Tienda Nube](https://www.tiendanube.com/), este proveedor** es como Shopify y otros en el sentido de que **le permite crear su propia tienda con una plantilla predefinida y hacer un poco de personalización ligera, agregue sus productos y tenga todo configurado sin contratar a un diseñador, un desarrollador o pagar por separado los costos del servidor**.

Desafortunadamente, después de un tiempo llega a un punto en que **sitios como este no cubren sus necesidades o simplemente agregan demasiado costo mensual** para que sea viable para las pequeñas empresas en condiciones económicas inciertas. Entonces, dado que mi esposa es Diseñadora Gráfica (ella ya diseñó la marca) y yo soy un Desarrollador de Software, **decidimos echarle una mano y crear una solución** que satisfaga las necesidades de su negocio mientras que nosotros tengamos un proyecto realmente agradable para mostrar en nuestros portfolios.

## Las necesidades

* **Estilo y experiencia a medida**.
* **Fácil de agregar nuevos productos y cambiar el texto y las imágenes del sitio**.
* **MercadoPago como la principal plataforma de pago** (¿qué demonios es MercadoPago?).
* **Menos de 5 dolares al mes** de mantenimiento (espera, ¿qué?) (Sin el costo del dominio).

Ahora, te estarás preguntando qué demonios está pasando, ¿no? Quédate conmigo, voy a dar las presentaciones adecuadas.

Los dos primeros son bastante normales, ¿verdad? ella quiere tener un sitio web/tienda que coincida con la marca de la empresa, que pueda personalizarse fácilmente cuando haya nuevos productos en existencia o cuando entren en juego las promociones.

### MercadoPago

[MercadoPago](https://www.mercadopago.com.ar/) es el primero que los lectores de EE. UU./UE podrían preguntarse qué demonios es esto. En América Latina, no tenemos ningún sitio web designado para [Amazon](https://www.amazon.com/) al que podamos recurrir cuando queremos comprar cosas en línea. La mayoría de las veces los vendedores no envían a América Latina, o si lo hacen, aplican tarifas gigantescas. Incluso si pasas por alto todos estos problemas, algunos países, como Argentina, tienen restricciones muy fuertes sobre los productos importados, debes pagar una multa de hasta el 50% del precio del producto y, a veces, los productos quedan varados en la aduana y pierdes tu dinero.

No se pierde toda esperanza, hay otra opción, una compañía llamada [MercadoLibre](https://www.mercadolibre.com.ar/). Básicamente tienen el monopolio de las compras en línea en muchos países latinoamericanos. Tienen oficinas en 18 países y emplean a unas 8000 personas. Esta compañía tiene su propia plataforma de pago llamada **MercadoPago que admite la mayoría de las tarjetas de crédito, transferencias directas e incluso pagos en cuotas mensuales**. Al menos en Argentina, la mayoría de las personas usan este servicio para comprar en línea, en su sitio web u otras plataformas (también debido al hecho de que el gobierno cobra una tarifa del 30% sobre los pagos realizados con sistemas de pago extranjeros).

### Por debajo de 5 dólares al mes

Puedes estar pensando, este tipo se volvió loco, finalmente sucedió. Escúchame, **para una pequeña empresa que recién está comenzando, los costos fijos pueden ser mortales**, especialmente en un país que tuvo una inflación del 54% en el último año. El costo actual es simplemente demasiado teniendo en cuenta el hecho de que las posibilidades que ofrecen estos sitios son limitadas.

## El análisis

Comencé reduciendo las opciones en función de las limitaciones que tiene el proyecto:

**MercadoPago como plataforma de pago**.

* Shopify
* Wordpress + Woocommerce
* Sitio web personalizado con integración a la API de MercadoPago

**Por debajo de 5 dolares al mes de mantenimiento**.

* Woocommerce (Tal vez)
* Sitio web personalizado con integración a la API de MercadoPago

**Estilo y experiencia a medida**.

* Wordpress + Woocommerce (tengo que aprender WordPress y es stack)
* Sitio web personalizado con integración a la API de MercadoPago

**Fácil de agregar nuevos productos y cambiar el texto y las imágenes del sitio**.

* Wordpress + Woocommerce
* Otras soluciones de comercio electrónico/CMS
* Sitio de administración personalizado

Después de mirar varias posibilidades, me pareció que mis dos opciones principales eran Wordpress + Woocommerce o crear algo personalizado.
**Mi principal problema con Wordpress fue que primero no sé nada al respecto. Me iba a llevar mucho tiempo aprender cómo construir un sitio web completamente funcional y desplegarlo de forma segura en un servidor**, tampoco estaba seguro de poder mantener los costos por debajo de los 5 dólares.

**Decidí ir a un sitio web personalizado**. Pero no todo va a ser personalizado, todavía quiero evitar tener que lidiar con la autenticación de administrador, tener un sitio de administración personalizado para mantener o tener un servidor con una base de datos para mantener.

## El tech stack

En el último año, he estado construyendo mi propio sitio web/blog con Gatsby y deployando en Netlify, así que aprendí a amar el poder del [JAMstack](https://jamstack.org/). Pensé que esto podría encajar bien con el patrón, así que comencé a evaluar opciones que cumplirían los requisitos mencionados anteriormente.

**Sitio web**

* Gatsby
* Next.js

**Capacidades de comercio electrónico / CMS**

* Sanity.io (generosa cuota gratuita)
* DatoCMS (generosa cuota gratuita)
* Prismic (generosa cuota gratuita)

**API para la integración**

* Funciones serverless de Next.js (generosa cuota gratuita)
* Funciones de Netlify (generosa cuota gratuita)

**Hosting**

* Netlify (mayormente gratis)
* Vercel/Now.sh (mayormente gratis)

**No importa el camino que tome, me dara un sitio web súper elegante y rápido, con capacidades de administración, implementado en un alojamiento de calidad con prácticamente 0 costos**.

Al final, **fueron las diferencias entre Gatsby y Next.js las que definieron la decisión, Gatsby es un generador de sitio estático**, lo que significa que el sitio se construye cuando se envía un commit al repositorio y luego se sirve como contenido estático cada vez que alguien llama a nuestra URL, esto es excelente para los costos y el rendimiento del servidor, pero se vuelve complicado cuando hay información que puede cambiar a menudo, en nuestro caso, ese cambio es el stock de nuestros productos.

Cada vez que se realiza una compra, el stock se actualiza en nuestro CMS y se debe activar una compilación en el sitio web de Gatsby para mostrar el stock correcto. **Next.js, por otro lado, es una navaja suiza, tiene generación de sitios estáticos, pero también tiene renderización del lado del servidor e incluso puede funcionar como una aplicación de normal de React**, esto significa que podemos adaptar las páginas a nuestras necesidades específicas y solo usar recursos del servidor cuando sea necesario.

Entonces, aunque Gatsby tiene algunas ventajas bastante buenas, como complementos para la carga de imágenes de manera performante y la integración con Sanity, decidí que Next.js era el más adecuado para lo que queremos construir.

El tech stack completo en el momento de escribir es:

* [Next.js](https://nextjs.org/)
* [TypeScript](https://www.typescriptlang.org/)
* [Styled Components](https://styled-components.com/)
* [Jest](https://jestjs.io/) + [Enzyme](https://enzymejs.github.io/enzyme/) para probar
* [Sanity.io](https://www.sanity.io/)
* [Vercel/Now.sh](https://vercel.com/)

Y fui por la siguiente arquitectura:

![Arquitectura](https://dev-to-uploads.s3.amazonaws.com/i/f3kqwpj038hie186ttlu.png)

Cuando un usuario accede al sitio web, los productos se renderizaran en el servidor desde Sanity y se cargarán en el sitio web.
Cuando un usuario quiere comprar algo, una función serverless se pondrá en contacto con la API de MercadoPago y generará el enlace apropiado para pagar en su plataforma.
Una vez completado el pago, el hook de la API de MercadoPago notificará a otra función serverless que actualizará el stock en Sanity.

## El equipo

He estado haciendo sesiones de programación en pares de manera semanal con un amigo que durante los últimos 6 meses ha estado tratando de cambiar las carreras de la enseñanza al desarrollo de software, es un tipo increíblemente apasionado y tiene un futuro brillante por delante, pero hemos estado luchando por encontrar ejemplos reales para trabajar. Por el lado de mi esposa, durante los últimos meses, ha estado ayudando a una amiga común, principalmente mejorando su CV como Diseñadora y dando un ojo extra a sus proyectos independientes.

Me sentí muy aliviado cuando nos ofrecieron una mano en este proyecto, ya que tenía dudas de que pudiéramos llevarlo a cabo por nosotros mismos en un tiempo razonable. Entonces nuestro equipo es:

* [Yo](https://www.patferraggi.dev/), desarrollador de software.
* [Manuel Aceituno](https://github.com/Acemanu412), desarrollador de software.
* [Sofia Toso](https://sofiatoso.com/), diseñadora visual /UX.
* [Thanh-Hông LÊ (Camille)](https://medium.com/@thanhHong0702) diseñadora de UX.

## Próximos pasos

En las próximas semanas, haremos un buen progreso en diseño e implementación. Escribiré una serie de artículos que explicarán cómo creamos la estructura del proyecto, cómo nos integramos con Sanity y MercadoPago, cargamos datos reales en nuestro sitio web, creando el carrito y el pago, y finalmente deployando. Si te gusta a dónde va esto, házmelo saber a continuación en los comentarios. Si tienes alguna sugerencia para el proyecto, soy todo oídos, hágamelo saber a continuación. Como siempre, si te gustó este artículo, comparte y subscribite a mi newsletter 😀


Let's build a custom e-commerce with the JAMstack

Creando una Aplicación de E-commerce con el JAMstack

Hola chicos, ¿cómo han estado? Ha pasado un tiempo desde que le dedicamos tiempo a la programación funcional, ¿verdad? incluso podrías haber pensado que perdí el interés y estoy aprendiendo algo nuevo, algo más genial, bueno, piénsalo de nuevo ahah.

Todavía estoy en este proceso y es largo, les digo, aprender a programar funcionalmente ha sido uno de los desafíos más difíciles que he tomado en bastante tiempo.

Hoy hablaremos de dos temas que a veces se pasan por alto al aprender programación funcional, Inmutabilidad y Recursión. Entonces, sin más preámbulos, comencemos.

***

## Inmutabilidad

Entonces, ¿qué queremos decir con inmutable? Veamos primero la definición formal:

> Un objeto inmutable es un objeto cuyo estado no puede modificarse después de su creación. Esto contrasta con un objeto mutable (objeto modificable), que se puede modificar después de crearlo.

Bien ... entonces **un objeto no puede cambiar después de ser creado**. Eso parece muy extraño, ¿verdad? Quiero decir, hacemos esto todo el tiempo, aquí hay un ejemplo:

```javascript
let john = { name: "John", age: 18 }
john.name = "Patricio"
```

Entonces, ¿qué hay exactamente de malo en esto? además del hecho de que ahora tenemos un objeto llamado `john` que en realidad se refiere a una persona diferente, el resto parece estar bien, pero ¿qué sucede cuando comienzas a pasar `john` a otras funciones?

```javascript
const newName = person => {
  person.name = "Patricio"
}

let john = { name: "John", age: 18 }
newName(john)
```

Ahora, **el usuario de la función `newName` debe tener en cuenta que el estado de `john` ha cambiado, ya no es el valor que originalmente configuró**, sino que una función lo cambió por debajo de sus pies sin que él lo supiera. Esto causa problemas muy simples pero difíciles de encontrar cuando este tipo de mutación ocurre por todo el lugar en objetos muy complejos. **Cuando comienzas a refactorizar y mover cosas, tu código ya no funciona como se esperaba porque la lógica dependía de la mutación del objeto**.

¿Cómo podemos solucionar esto? así es cómo:

```javascript
const newName = person => {
  return { ...person, name: "Patricio" }
}

let john = { name: "John", age: 18 }
const patricio = newName(john)
```

Ahora, cuando llamamos a la función `newName`, **se devuelve un nuevo objeto persona con todos los datos de `john` pero con el nombre diferente, se conserva el estado del objeto original `john`**.

En los lenguajes de programación funcionales, este comportamiento se aplica de forma predeterminada, muchos requieren una palabra clave específica para permitir la mutación en una estructura de datos o simplemente prohiben mutar un objeto por completo. Esto tiene los siguientes beneficios:

* **No es necesario mantener un seguimiento mental del estado de sus objetos**.
* No debes preocuparte por el cambio de estado cuando trabajes **en entornos *multi-threaded*, todos los subprocesos tendrán los mismos valores**.
* **Los tests se vuelven muy sencillos** ya que todo el estado que una función necesita para ser probada se pasa cuando se la llama y la prueba solo verifica el resultado.

¿Podemos hacer esto en JavaScript? Más o menos, no hay una característica de tiempo de ejecución que nos impida modificar el estado, una cosa que podemos comenzar a hacer es usar `const` tanto como podamos, esto no se aplicará a las propiedades internas de los objetos, pero es un comienzo. Si queremos profundizar en este camino, recomiendo una biblioteca de terceros como [Immutable JS](https://immutable-js.github.io/immutable-js/) o [Mori](https://github.com/swannodette/mori), con estas bibliotecas podemos tener listas, registros y otros tipos de estructuras de datos con la certeza de inmutabilidad.

## Recursión

Nuevamente, comencemos con la definición formal:

> La recursión ocurre cuando una cosa se define en términos de sí misma o de su tipo.

Espera, ¿que? 🤯

![Recursion](/recursion.gif)

En términos prácticos básicos, esto **significa que una función se llamará a sí misma hasta que finalice el proceso y pueda terminar sin problemas**. Quizás te estés preguntando, ¿por qué demonios querríamos hacer eso? Teniendo en cuenta lo que aprendimos sobre la inmutabilidad, echemos un vistazo a este ejemplo. Queremos imprimir los números del 0 al 999 en la consola:

```javascript
for (let i = 0; i < 1000; i++) {
  console.log(i)
}
```

¿Notaste el problema con esto? **no cumplimos nuestra promesa de no mutar. La variable `i` está cambiando su valor con cada vuelta de ese ciclo**. Sí, me escuchaste bien, si vamos a ser inmutables, entonces los bucles for son un negocio sucio. Podemos estar de acuerdo en que mientras el alcance mutable sea muy pequeño, deberíamos estar bien.

Pero, ¿qué sucede si trabajamos en un lenguaje de programación puramente funcional, cómo podríamos hacer eso? bueno aquí entra la recursión.

```javascript
const sumOneAndLog = sum => {
  const newSum = sum + 1
  console.log(newSum)
  if (newSum < 1000) sumOneAndLog(newSum)
}

sumOneAndLog(0)
```

Aquí definimos una función llamada `sumOneAndLog` que se define en términos de sí misma, siempre que la suma sea inferior a 1000, seguirá llamándose a sí misma y registrando el siguiente número. Este también es un caso muy común en cosas como el desarrollo de juegos, donde queremos ejecutar nuestro juego indefinidamente hasta que el juego termine, podemos calcular el estado del juego y seguir avanzando sin tener un estado global.

Una última consideración, en JavaScript, este tipo de comportamiento no está muy bien soportado. Si intenta hacer recursiones muy pesadas, probablemente explote la pila muy rápidamente, esto se debe al hecho de que los motores de JavaScript carecen de una función llamada [Optimización de llamadas de cola](https://en.wikipedia.org/wiki/Tail_call) que permite que esto se maneje sin problemas, una solución es usar algo como un [trampolín](http://raganwald.com/2013/03/28/trampolines-in-javascript.html).

***

## Conclusión

Hoy revisamos algunas características clave de la programación funcional que pueden hacer que nuestro JavaScript se ejecute mucho más seguro y sea más legible, lo que apunto con esta serie es que entiendan que no es una lucha sobre qué paradigma es mejor, son diferentes y se comportan mejor en diferentes situaciones.

Realmente creo que **un gran programador es el que es capaz de escribir código orientado a objetos, funcional y estructurado al mismo tiempo** (no hay mención a la programación lógica, lo siento, ajaj).

Si te gustó este artículo, por favor comparta y hágamelo saber a continuación en los comentarios, si crees que hay algo que me perdí, avísame 😀


Functional Programming for the Object-Oriented Developer

Programación funcional para el desarrollador orientado a objetos

## Antecedentes

Crecí en una casa de clase media alta en un barrio suburbano de Argentina. Durante mi adolescencia fui un desastre:

* Me gusta el punk rock, así que quería usar un mohawk en una escuela donde tenías que usar zapatos, camisa y corbata
* Luché con mi padre constantemente
* No me fue bien en la escuela, principalmente porque abandonaba la clase para ir a jugar `Magic The Gathering` o jugar algun `MMORPG`.

Después de cumplir 18 años, no sabía lo que quería hacer con mi vida, sabía que tenía que ir a la universidad porque eso es lo que todos hacen ¿no?.
Como mi escuela secundaria estaba orientada a los negocios, me inscribí para una doble especialización en Administración de Empresas y Contabilidad en la Universidad de Buenos Aires, la universidad más grande del país.

Adelantando 5 años después, era 2013 y tenía 23 años, todavía vivía con mis padres, trabajaba 8 horas al día como cajero de un banco mientras asistía a la universidad por la tarde / noche.
Vida bastante normal ¿verdad?.
Probablemente todos los que conozco habrían considerado que es un buen camino, y que era alguien que está progresando en su vida. Para mí fue un infierno.

No estaba contento, aunque estaba progresando en la escuela, estudiaba a medias, no me gustaba lo que estaba aprendiendo, pero sabía que quería una buena vida y pensé que ese era el camino correcto para conseguirla.

## El punto de quiebre

Lo curioso es que siempre he estado alrededor de la tecnología, simplemente no me di cuenta de que podría ser el camino correcto para mí.

Mi padre es ingeniero de software, nuestra relación aún es complicada, por lo que nos dabamos poca atención, todos mis amigos trabajaron en software o IT. Fue uno de esos amigos, Gastón, quien probablemente me conocía mejor que yo, que me dijo muchas veces que el sabia que escribir software era lo indicado para mi.Yo tenia dudas si siquiera podría entenderlo, pero decidí intentarlo. Me dio una breve introducción y obtuve el libro usado en el primer año de especialización en ingeniería en mi universidad y comencé a aprender algoritmos, estructuras de datos y C/C++.

1. Me enganché de inmediato.
2. Sentí que había descubierto un mundo nuevo.
3. Sentía que ahora tenía poderes mágicos.
4. Esto era algo especial.

Pasé muchos días y noches meditando sobre mi vida y lo que quería hacer con ella. Reconocí que la programación era algo que me interesaba profundamente, como nunca nada lo había estado antes, nadie tenía que decirme que estudiara, leyera, practicara, lo hice por mi propio interés y curiosidad. Entonces, decidí hacer un cambio completo y convertirme en desarrollador de software.

Después de terminar completamente ese libro, el mismo amigo, que es desarrollador de .NET, me dijo que leyera [C # en profundidad por Jon Skeet](https://csharpindepth.com/), lo lei varias veces y comencé a hacer C# con Windows Forms.

Es curioso cómo un evento puede desencadenar otros, desde ese momento usé lo que sabía y comencé a hacer hacks para los mismos videojuegos que solía jugar muchos años antes. Comenzó pequeño con algunas macros que tocarían ciertas teclas, luego pase a leer y escribir memoria y luego para crear archivos DLL que harían [Hook](https://en.wikipedia.org/wiki/Hooking) funciones de Windows para leer el tráfico cliente-servidor.

Al mismo tiempo me aceptaron en un Bootcamp C# ofrecido por Accenture, era gratis pero implicaba ir allí 8 horas al día durante un mes, lo que significaba dejar mi trabajo como cajero de un banco. Decidí dar un salto y hacerlo, renuncié a mi trabajo e hice el Bootcamp.

Supongo que Gaston aún vio mi potencial en mi porque cuando terminé el Bootcamp me dio una recomendación en su trabajo. Dos meses después, estaba trabajando allí como desarrollador de .NET, haciendo C#, Webforms y ASP.net MVC.

## ¿Cómo resultó todo?

Es 2020 y estoy trabajando como desarrollador .NET/Angular. Ya pase por algunos trabajos, trabajando con C#, F#, JavaScript y TypeScript.

* Todavía regreso a casa después de trabajar 8 horas y me siento a programar.
* Cuando hago ejercicio, tengo una larga lista de podcasts de desarrollo de software.
* Antes de acostarme, leo libros relacionados con el desarrollo de software.
* Doy tutoría a desarrolladores principiantes los fines de semana.
* He trabajado en algunos proyectos de código abierto, incluido mi propia [extensión](https://marketplace.visualstudio.com/items?itemName=raagh.angular-karma-test-explorer) de Visual Studio Code.
* Escribo en mi propio blog al menos una vez a la semana.
* En mi tiempo libre me gusta construir cosas con JavaScript, aunque últimamente me he metido en la programación funcional y Haskell.

Esta carrera me ha presentado a personas increíbles e incluso me dio la oportunidad de mudarme fuera del país y experimentar un tipo de vida diferente. Después de 6 años, sigo pensando que esto es lo que quiero hacer por el resto de mi vida, tengo mucha suerte de haber encontrado mi vocación en la vida y de que mis amigos me empujaron hacia adelante en el momento adecuado.

## ¿Todavía tienes dudas?

Tu situación puede ser diferente, pero si te sientes relacionado con mi historia de amor con el desarrollo de software, hace lo que esté en tu poder para continuar en este camino, vale la pena, yo solo lamento no haber comenzado antes.

Ahora puedo mirar hacia atrás y ver que todas mis elecciones, aunque más aterradoras, estaban enraizadas en algo poderoso, la comprensión de que este camino era el correcto para mí.

No puedo hacer el trabajo por ti, pero puedo darte mi historia como prueba de que es posible, puedo ser tu amigo y empujarte hacia adelante cuando lo necesites, puedo darte consejos y guiarte en tu viaje.

Gracias por leer este resumen de mi viaje hacia el desarrollo de software, un viaje que apenas comienza y no puedo esperar para ver lo que el futuro tiene preparado para mí. Si te gusta este artículo, por favor compártelo.

La promesa que hice atras era real, si necesitas ayuda, envíame un DM en Twitter o escribe tu pregunta en los comentarios, tienes un nuevo amigo 😀


It is never too late to change careers

Nunca es demasiado tarde para cambiar de carrera

Hola chicos, espero que les vaya bien y que estén aprendiendo nuevas habilidades mientras están en cuarentena. Si ese es el caso, entonces están de suerte porque hoy vamos a terminar nuestro querido *Snake Game* escrito en *JavaScript* funcional. Si no has leído el artículo anterior, puedes hacerlo [aquí](https://www.patferraggi.dev/blog/2020/mar/functional-snake-0/).

En nuestro artículo anterior, terminamos teniendo la `UI` lista y un pequeño modelo de nuestra serpiente. Hoy vamos a extender eso y completar el juego, comencemos por deshacernos de las partes feas.

## Efectos secundarios

**Todo software necesita producir efectos secundarios. Si se evitarían los efectos secundarios, no habría pruebas de que el programa realmente se ejecutó**. En nuestro caso, tenemos 2 tipos de efectos secundarios:

* El output del juego (lo que ves en la pantalla).
* El estado interno del juego que debe actualizarse (la posición de la serpiente, la manzana, etc.).

Los lenguajes de programación funcionales puros vienen con ciertas herramientas que nos ayudan a manejar esto de una manera elegante. *JavaScript*, por otro lado, no tiene estas herramientas, se pueden agregar usando librerias como [Ramda Fantasy](https://github.com/ramda/ramda-fantasy), pero en nuestro caso, vamos a usar un enfoque llamado `Functional Core Imperative Shell`, que básicamente dice que podemos tratar nuestro código en su mayoría funcional manteniendo todo lo puro en un lugar y todo lo que no es puro cerca de los límites de nuestro software, si deseas leer más al respecto, puedes consultar la publicación original [aquí](https://www.destroyallsoftware.com/screencasts/catalog/functional-core-imperative-shell).

Entonces, siguiendo ese enfoque, voy a ser muy explícito sobre qué partes del juego producen efectos secundarios y cuáles no.

### El output del juego

Este es nuestro módulo actual `UI`

```javascript
const r = require("ramda")
const { intercalate, update } = require("./helper")

const createWorld = (rows, columns, state) => {
  const repeatDot = r.repeat(".")

  const map = r.map(r.thunkify(repeatDot)(rows), repeatDot(columns))

  return r.pipe(addSnake(state), addApple(state))(map)
}

const addSnake = state => r.pipe(...r.map(update("X"), state.snake))

const addApple = state => update("O")(state.apple)

const displayWorld = matrix => {
  console.clear()
  console.log(intercalate("\r\n", r.map(intercalate(" "), matrix)))
}

const display = r.curry((rows, columns, state) => {
  return r.pipe(createWorld, displayWorld)(rows, columns, state)
})

module.exports = {
  display,
}
```

Si miras este código, solo hay un único lugar donde producimos efectos secundarios y ese es el procedimiento `displayWorld`:

```javascript
const displayWorld = matrix => {
  console.clear()
  console.log(intercalate("\r\n", r.map(intercalate(" "), matrix)))
}
```

El resto del código toma parametros de entrada y produce resultados, eso es todo.

### El estado interno del juego que necesita ser actualizado

Este es el archivo `index.js` desde donde se inicia nuestro juego:

```javascript
const COLUMNS = 15
const ROWS = 15
const SPEED = 125
let uglyMutableState = initialState

const displayState = display(COLUMNS, ROWS)

const runGameLoop = () => {
  setInterval(() => {
    displayState(uglyMutableState)
  }, SPEED)
}

runGameLoop()
```

Como puedes ver aquí, tomamos el estado inicial del juego y luego tenemos un intervalo que se ejecuta cada pocos segundos y muestra constantemente el mundo del juego, **en el futuro aquí tendremos que llamar a la lógica para crear un nuevo estado basado en el anterior y actualizar nuestra variable `uglyMutableState`**. Vamos a mantener pura toda la lógica del juego y solo modificaremos esta variable de estado dentro de este archivo.

**En un lenguaje de programación funcional, haríamos esto con `Recursión` pero dado que los motores de *JavaScript* carecen de `Tail Call Optimization`, hacer esto aquí volaría la pila casi de inmediato**, tendríamos que usar algunos hacks como devolver funciones sobre funciones para evitar este problema, pero pensé que en este punto era más fácil ser pragmático y seguir el enfoque mencionado anteriormente.

## Obteniendo input

Obtener información es una de esas cosas que modificará nuestro estado, específicamente el estado que dice dónde debe moverse la serpiente.

```javascript
// index.js
const setupInput = () => {
  readline.emitKeypressEvents(process.stdin)
  process.stdin.setRawMode(true)
  process.stdin.on("keypress", (str, key) => {
    if (key.ctrl && key.name === "c") process.exit()

    const options = {
      UP: addMove(direction.NORTH),
      LEFT: addMove(direction.WEST),
      DOWN: addMove(direction.SOUTH),
      RIGHT: addMove(direction.EAST),
    }

    const move = options[key.name.toUpperCase()]
    uglyMutableState = move(uglyMutableState)
  })
}

// snake.js
const direction = {
  NORTH: point(0, -1),
  SOUTH: point(0, 1),
  WEST: point(-1, 0),
  EAST: point(1, 0),
}

const initialState = {
  snake: [point(4, 3)],
  apple: point(5, 5),
  move: direction.EAST,
}

const addMove = r.curry((direction, state) =>
  isValidMove(direction, state.move) ? { ...state, move: direction } : state
)

// Comprueba que la serpiente siempre se mueve hacia adelante y
// no pueda cambiar a la dirección opuesta
const isValidMove = (direction, move) =>
  direction.x + move.x !== 0 && direction.y + move.y !== 0
```

Esta función lee los eventos del teclado y solo agrega una nueva dirección a nuestro estado mutable. Puedes ver que `addMove` y `isValidMove` no mutan nada, `addMove` recibe un estado y produce uno nuevo con la nueva dirección de nuestra serpiente, observa cómo agregamos una propiedad llamada `move` a nuestro estado inicial y cómo modelamos las direcciones usando la estructura `point` definida en el artículo anterior.

## La serpiente

Ahora queremos calcular el lugar donde la serpiente estará en cada intervalo de nuestro ciclo de juego **es decir mover la serpiente**. Entonces hagamos eso:

```javascript
const nextSnake = r.curry((cols, rows, state) => {
  return willCrash(cols, rows, state)
    ? initialState
    : {
        ...state,
        snake: willEat(nextHead(cols, rows, state), state.apple)
          ? [nextHead(cols, rows, state), ...state.snake]
          : [nextHead(cols, rows, state), ...r.dropLast(1, state.snake)],
      }
})
```

Imagina que ya definimos todas las funciones utilizadas aquí, vamos una por una, primero, preguntamos si la serpiente se estrellará contra alguna parte de su cuerpo, si lo hace, devolveremos el estado inicial para que el juego comience nuevamente, si no se estrella, entonces devolvemos un nuevo estado. Dentro del nuevo estado, revisamos nuevamente, ¿la serpiente se va a comer la manzana? en caso afirmativo, movemos la serpiente y agregamos un punto más en su cabeza para que la serpiente crezca. Si, por otro lado, la serpiente no se come la manzana, entonces agregamos un punto en la cabeza de la serpiente y retiramos uno de la parte posterior para dar la impresión de que la serpiente se mueve sin crecer. Ahora echemos un vistazo a esas funciones que faltaba definir:

```javascript
const willEat = r.equals
const willCrash = (cols, rows, state) =>
  r.find(r.equals(nextHead(cols, rows, state)))(state.snake)

const nextHead = (cols, rows, { move, snake }) =>
  point(
    modulo(cols)(r.head(snake).x + move.x),
    modulo(rows)(r.head(snake).y + move.y)
  )
```

`willEat` sólo comprueba si los objetos son iguales, por lo que podemos pasar la función [equals](https://ramdajs.com/docs/#equals) de ramda.js utilizando la notación `point-free`.
`nextHead` tomará la cabeza de la serpiente y la dirección actual y simplemente creará un nuevo punto al lado. Aquí usamos 'módulo' para que cuando la serpiente llegue a un lado del mapa, salga por el otro.
`willCrash` comprueba si la nueva cabeza de la serpiente coincidirá con cualquier punto del cuerpo.

## La manzana

Ahora que la serpiente se está moviendo, podemos verificar si la cabeza de la serpiente se va a comer la manzana y si ese es el caso, generamos un nuevo estado donde la manzana está en una nueva posición aleatoria.

```javascript
const nextApple = r.curry((cols, rows, state) =>
  willEat(r.head(state.snake), state.apple)
    ? { ...state, apple: point(randomPos(cols), randomPos(rows)) }
    : state
)
```

Vale la pena aclarar que aquí técnicamente no estamos haciendo programación funcional, ya que `nextApple` producirá diferentes manzanas con la misma entrada usando la función `randomPos`.

## Armando nuestra lógica de juego

Ahora finalmente tenemos todo lo que necesitamos para armar nuestra lógica de juego, ¿cómo vamos a hacer eso? vamos a **crear una función que recibe el estado actual y calcula la nueva** en función de las funciones que acabamos de definir.

```javascript
const step = r.curry((cols, rows, state) =>
  r.pipe(nextSnake(cols, rows), nextApple(cols, rows))(state)
)
```

Como puede ver, primero creamos la serpiente, luego creamos la manzana y devolvimos el estado calculado. Ahora tenemos que llamar a esto desde nuestro `index.js` impuro

```javascript
const COLUMNS = 15
const ROWS = 15
const SPEED = 125
let uglyMutableState = initialState

const setupInput = () => {
  readline.emitKeypressEvents(process.stdin)
  process.stdin.setRawMode(true)
  process.stdin.on("keypress", (str, key) => {
    if (key.ctrl && key.name === "c") process.exit()

    const options = {
      UP: addMove(direction.NORTH),
      LEFT: addMove(direction.WEST),
      DOWN: addMove(direction.SOUTH),
      RIGHT: addMove(direction.EAST),
    }

    const move = options[key.name.toUpperCase()]
    uglyMutableState = move(uglyMutableState)
  })
}

const displayState = display(COLUMNS, ROWS)
const nextState = step(COLUMNS, ROWS)

const runGameLoop = () => {
  setInterval(() => {
    displayState(uglyMutableState)
    uglyMutableState = nextState(uglyMutableState)
  }, SPEED)
}

setupInput()
runGameLoop()
```

Ahora puedes ver lo que quise decir acerca de que nuestro estado de juego es impuro, en cada ciclo obtenemos el nuevo estado y actualizamos nuestro estado mutable dentro de nuestro índice. Vamos a ver el resultado final, ¿de acuerdo?

![gamerunning](https://media.giphy.com/media/j77lvKqWHyMQPhH1qL/giphy.gif)

Ese es un juego bastante bonito, ¿verdad? 😀.

## Conclusión

Este ejemplo tiene algunas advertencias. Está claro que podríamos haber sido más funcionales si hubiéramos querido.

* Podríamos haber incorporado tipos de datos algebraicos de ramda-fantasy.
* Usar funciones en todas partes usando `r.merge` en lugar de destrucción de objetos y `r.ifElse` en lugar de operadores ternarios.
* Usar hacks para poder hacer recursión en lugar de usar `setInterval`.
* Usar `monads` para IO.

Pero creo que **el punto de hacer *JavaScript* de una manera funcional es que no sientas la presión inmediata de hacer todo como un lenguaje como *Haskell* te obligaría a hacer**. Creo que es una buena forma de practicar la programación funcional en un lenguaje que no es estrictamente funcional.

Realmente espero que hayas disfrutado este pequeño tutorial, fue muy difícil al principio, pero lentamente creo que empiezo a entender los conceptos básicos de la programación funcional, espero que tú también lo hagas. Si te gustó este artículo, compártelo y avísame a continuación en los comentarios. Si tienes alguna duda o necesitas ayuda, no dudes en ponerte en contacto conmigo.


Build a Snake Game in functional JavaScript

Crea un juego de la serpiente en JavaScript funcional

**¿Estás buscando trabajo?** ¿Notaste que la mayoría de las veces las ofertas de trabajo pierden el punto sobre lo que debería tener una persona para ser un buen desarrollador? Yo al menos sí lo noté.

La mayoría de las veces encuentro empleadores que requieren una cantidad muy específica de años de experiencia. Porque tener 6 años de experiencia en lugar de 7 supone un mundo de diferencia, ¿Verdad? También encuentro publicaciones que exigen conocimiento de un **framework** concreto.

A veces, los empleadores no son conscientes de que tener una habilidad técnica específica no garantiza que seas una buena adición a la empresa o al equipo. De hecho, diría que la mayoría de las veces puedes regalar algunas de esas habilidades por algún otro tipo de habilidades que aportarán mucho más valor a largo plazo.

En este artículo, mencionaré algunas cosas que los empleadores olvidan y que podrían ayudar a convertirte en un mejor desarrollador.

***

## 1.Saber cómo investigar y aprender nuevas tecnologías

Al revisar candidatos potenciales, y tengo que decir que yo mismo he sido culpable de esto, nos centramos demasiado en los conocimientos que la persona tiene en ese preciso momento. El problema con esto es que en nuestra industria hay una cantidad increíble de cosas nuevas que salen todos los días, por lo que **es imposible saberlo todo**. Aunque la tecnología cambie constantemente, las ideas y fundamentos no lo hacen. Las ideas se reinventan, se vuelven a empaquetar y se revenden con un nuevo sombrero.

![New hat](/newhat.jpeg)

**La realidad es que si tienes cierta experiencia con una serie de tecnologías, puedes adaptarte rápidamente a las demás**. ¿Sabes Angular? Eso es increíble, pero ¿Qué tan difícil puede ser comenzar a hacer Vue? Después de un mes trabajando con Vue a diario durante 8 horas seguidas, probablemente te sientas como en casa.

Es clave estar familiarizado con el proceso de aprendizaje de nuevas tecnologías, no tienes que saberlo todo, pero es importante mantenerse actualizado y mantenga su proceso de aprendizaje fresco.

En mi caso, trabajo todos los días como desarrollador full-stack, haciendo principalmente ASP.NET Core y Angular, así que en mi tiempo libre estoy aprendiendo programación funcional y Haskell. Esto me ayudará a mejorar mis habilidades de aprendizaje y mis habilidades técnicas al mismo tiempo.

## 2.No tengas miedo de fallar

Trato de ayudar a los desarrolladores principiantes con consejos de carrera o preguntas técnicas y una cosa que a destacar, es que tienen miedo al fracaso, miedo de parecer estúpidos ante los terribles Desarrolladores Senior.

Tienen tanto miedo que muchas veces dejan de hacer cosas con tal de no fallar. En mi opinión, **si no lo intentas, ya fallaste**.

Pregunta: ¿Tienes miedo de postularte a ese trabajo?

Mi respuesta: ¿Qué es lo peor que puede pasar?

Pregunta: ¿No sabes si este código funcionará?

Mi respuesta: ¿Has intentado ejecutarlo? ¿Buscaste el problema en Google?

Bueno, déjame decirte que como un tipo que ha dado varias vueltas a la cuadra, cometer errores es lo que me ha permitido llegar a este punto. He fallado constantemente durante años, pero aquí está el secreto:

**Cada vez que fallé, aprendí algo**. Aún así, después de varios años trabajando como desarrollador, todavía busco en Google a diario y sigo cometiendo errores tontos como hacer llamadas incorrectas o tener fallos de lógica básica.

No es el fin del mundo. Simplemente recuerda que nadie en este mundo es perfecto: todos cometemos errores, todos fallamos. Lo importante es lo que obtenemos de esos errores, así que por favor, de ahora en adelante quiero que comiences a fallar, tanto como puedas.

## 3.Trabaja bien con otros

A veces imaginamos a los desarrolladores Senior como personas que ni quieren ni necesitan la ayuda de otros, como genios mágicos que codifican las 24 horas seguidas y ofrecen hermosas soluciones.

La verdad es que la mayoría de nuestros trabajos son sociales, podemos producir buen software porque somos capaces de trabajar bien con personas de otros países, disciplinas y backgrounds.

Por lo tanto, es fundamental que sepas **cómo comunicarte con otras personas**, debes estar abierto a nuevas ideas y a la posibilidad de nuevos puntos de vista. Esto se relaciona con el punto anterior en el sentido de que existe una gran posibilidad de que hayas cometido un error, que no te dieras cuenta de algo o que carecías de la imagen completa del problema, y eso está bien, habrá otras personas contigo que están apuntando hacia el mismo objetivo. Aprende de ellos y convierte en un mejor desarrollador.

Y sé lo que estás pensando, ¿No es suficiente con tener habilidades técnicas? desafortunadamente, no lo es, recientemente una chica en mi trabajo fue despedida por ser grosera y no trabajar bien en equipo. Sus habilidades técnicas eran excelentes, era increíblemente inteligente, pero eso **no es suficiente**.

Aquí hay algunas ideas clave que merece la pena mencionar:

* **No todos tienen el mismo nivel de conocimiento**. Explica las cosas de manera tranquila y no te sorprendas si alguien no entiende lo que estás diciendo.
* **No todos tienen una formación técnica**. Conoce a tu audiencia, trata de aprender un poco del oficio de otros en tu lugar de trabajo, esto te dará las palabras adecuadas que utilizar para que todos estén en la misma página.
* **Aprende el dominio**. Si quieres ser entendido por aquellos que no trabajan en lo mismo que tu, debes utilizar el conocimiento común dentro de tu empresa, y ese es el dominio de la aplicación.

## 4.No es una carrera

A veces, nos preocupamos demasiado por no lograr lo que creemos que es nuestra responsabilidad, especialmente ahora con las redes sociales, vemos que todas estas personalidades tecnológicas alcanzan sus objetivos y se vuelven populares mientras lo hacen, pero debes recordar que este no es el objetivo. **Céntrate en ti mismo**: ¿Cómo puedes ser mejor de lo que eras ayer? ¿Cómo me acerca esta acción un paso más hacia lograr mis objetivos?

Es importante que comprendas que todos tienen un conjunto diferente de habilidades. Está bien si no aprendes cosas al mismo ritmo que otros desarrolladores, está bien si tu carrera no es tan brillante como la de ellos. Usa su influencia para crecer: ¿Hay algo que estén haciendo de manera diferente?

No te preocupes si en este momento no estás trabajando con la última tecnología, piensa en cómo quieres crecer durante un período de tiempo más largo. Yo planeo dedicarme a esto el resto de mi vida, así que planifico con anticipación, tomo medidas y me centro en mi carrera a largo plazo.

***

## Conclusión

Como siempre, escribo estas cosas para poder ayudarte tanto a ti como a mí mismo a subir de nivel y crecer como persona y como desarrollador. Nos encanta aprender sobre tecnología, y tener habilidades técnicas es importante, pero hay otras cosas que mejorarán en gran medida nuestro éxito en esta industria.

Si te gustó este artículo, házmelo saber a continuación en los comentarios y compártelo. Si crees que me perdí de algo, no olvides mencionarlo.


4 things you need to know if you want to be a developer

4 cosas que debes saber si quieres ser desarrollador

Tal vez notaste algo extraño en los últimos días, ¿no hay un nuevo artículo de Patricio?

## El punto de partida

Bueno, como saben hace unas semanas, escribí un artículo sobre el uso de la cuarentena para mejorar, en caso de que quieran leerlo, pueden hacerlo [aquí](https://www.patferraggi.dev/blog/2020/mar/quarantine-improve/). En aquel entonces estaba en llamas, tenía todo planeado, meditaba todas las mañanas, hacía ejercicio todas las mañanas, programaba todos los días (aparte de las 8 horas de Programación como trabajo), leía y escribía varios artículos a la semana. Pero luego cometí algunos errores...

## El fondo

Aunque era un jugador ávido cuando era más joven, desde que comencé a programar hace unos años, he estado jugando cada vez menos, en realidad, lo que sucede es que creo que escribir y aprender sobre software es más divertido que jugar, un hecho bastante controvertido estoy seguro. Eso no quiere decir que no juego en absoluto, generalmente juego alrededor de 3 juegos al año, el año pasado fue *Read Dead Redemption 2* y *God of war* con un poco aquí y allá de *Kingdom Come: Deliverance*. Pero este año, no había ningún juego a la vista para mí, al menos hasta que se publique *Cyberpunk 2077* en septiembre.

## ¿Que pasó?

He estado viviendo en Bélgica durante dos años, tener pocas conexiones aquí me ha hecho muy fácil concentrarme en lo que es más importante para mí:

* Mejorar como desarrollador
* Ser un buen esposo
* Escribir código abierto
* Crear tutoriales
* Escribir publicaciones en mi blog
* Ponerme en forma
* Leer Filosofía
* Construir un *side hussle*

Pero este fin de semana, estaba hablando con unos amigos de Argentina y me dijeron que si compraba un juego podríamos jugarlo en línea, como en los viejos tiempos. Estuve tentado, no había jugado nada con ellos en años, y extrañaba tener algo de tiempo de descanso, así que compré *Divinity: Original Sin 2*.
Me enganché al instante, me sentí como en los viejos tiempos, pasé de no jugar un solo juego a jugar durante 12 horas, ir a dormir, despertar y seguir jugando, leer sobre \_builds en mi tiempo libre y ver tutoriales, sin ejercicio, sin comida saludable, sin meditación, sin planificación semanal. Sé que estas cosas no están relacionadas entre sí, pero cuando dejé de hacer una, fue muy difícil seguir haciendo las otras.
Toda mi planificación y productividad ser fueron al caño, al principio me sentí culpable, pero luego me di cuenta de dos cosas:

* Lo que está hecho, hecho está, no tiene sentido culparte a ti mismo, pero puedes aprender de ello
* Estaba progresando muy bien con todo lo demás, merecía un poco de juego para relajarme de vez en cuando, con cierta moderación, por supuesto.

También sabía un hecho clave sobre volver a la `normalidad`:

> Todo lo que necesitas es ganar impulso

El impulso es clave, sabía que todo lo que necesitaba para volver al caballo era volver a la planificación, simplemente hacer mi rutina regular durante unos días y luego continuaría como siempre. También es mucho más fácil convencerse cuando solo se está planeando con unos días de anticipación, así que me dije a mí mismo. Bien, intentemos hacerlo hasta el lunes.

¿Así que, cuál es el plan?

## Comenzando de a poco

Un objetivo clave para mí en este asunto fue aprender de él. En lugar de centrarme estrictamente en cosas relacionadas a la programación, quiero darme un descanso de vez en cuando, así que en el futuro, no me estresare y simplemente relajarse como una parte regular de mi rutina. Entonces planeé mi calendario:

![Calendario](/calendar.png)

¿Te das cuenta de que los primeros 2 días de la semana no hay nada? Me costaba mucho dejar de jugar, no hice ejercicio ni escribi mi progreso. Pero hoy, miércoles, decidí que no era así como quería pasar mi tiempo, me encantan los juegos y voy a seguir jugando, pero también haré otras cosas que disfruto.
Planeé algunas cosas para mi semana, como continuar aprendiendo *Programación funcional y Category theory*, hacer *Pair Programming* con un amigo y escribir algunos artículos. Si has visto mi artículo original sobre planificación, sabrás que la semana parece bastante vacía de acuerdo con mis estándares habituales, bueno, no quiero esforzarme demasiado, por ahora, quiero seguir jugando de vez en cuando, así que dejé bastantes espacios vacíos para pasar tiempo con mi esposa o jugar con algunos amigos.

Pero la clave fue comenzar de nuevo a hacer cosas, sé que esto suena obvio, pero en realidad, es todo lo que necesitas hacer, lentamente comenzar a hacer cosas de nuevo, algo de ejercicio aquí y allá, un artículo, una línea de código a la vez, hasta que vuelvas a tu rutina.

![Lebuff](/lebuff.jpg)

Así que hoy me desperté, me cambié e hice ejercicio (incluyendo meditación), trabajé durante el día y ahora me ves aquí escribiendo esta publicación de mi blog. Si tengo algo de tiempo después de hacer esto (escribir tanto en español como en inglés toma bastante tiempo), voy a leer algunas páginas de un nuevo libro sobre *Estoicismo* que recibí hoy y luego continuaré subiendo de nivel a ese invocador/necromancer y disfrutando un juego de rol basado en turnos.

## ¿Ahora que?

En las próximas semanas, planeo comenzar lentamente a aumentar la cantidad de acciones que tomo para lograr mis objetivos, pero siempre recordando que no es una carrera, lo hago porque quiero, y de vez en cuando merezco tiempo para relajarme siguiendo algunas otras pasiones.

Todas las mañanas intentaré recordarme a mí mismo que soy un ser humano, que tengo pasiones y necesidades, pero con lo mejor de mis habilidades intentaré controlar mis emociones y disposiciones, trataré de pensar las cosas y actuar. Si fallo, aprenderé de ello sin sentirme culpable. Si tengo éxito, me recompensaré.

Con suerte, dentro de unos días, tendré el impulso necesario y recibirás un nuevo artículo mio acerca de la *Programación funcional* 😀.


Gaming or Coding? Getting back on track

¿Jugar o Programar? Volviendo a la carrera

## Introducción

Si has estado siguiendo mis últimos artículos, probablemente sepas que he estado tratando de aprender programación funcional.
Al principio, estaba tratando de aprender `Haskell` leyendo este [libro](https://haskellbook.com/), aprendiendo Category Theory de este [libro](https://github.com/hmemcpy/milewski-ctfp-pdf/) e incluso tratando de construir un [Juego de la viborita](https://en.wikipedia.org/wiki/Snake_\(video_game_genre\)) en `Haskell`

![Snake Game in Haskell](/haskell-snake.jpeg)

Es justo decir que era miserable, estaba progresando muy poco y enfrentando cantidades increíbles de frustración, fue entonces cuando me di cuenta de que el problema era que estaba tratando de abordar demasiadas cosas a la vez.

Estaba:

1. ...**aprender** la sintaxis de Haskell
2. ...**aprender** programación funcional
3. ...**aprender** un nuevo IDE y herramientas de desarrollo.
4. ...**construir** un juego de la viborita.

Principalmente, lo que estaba sucediendo era que me atascaba constantemente debido a que no entendía cómo hacer cosas básicas (como escribir en la consola) o no sabía los nombres correctos para los patrones comunes en la programación funcional. Entonces, decidí cambiar mi enfoque. Fui a algo que sabía, `JavaScript`. No soy un experto pero lo uso todos los días, también tenía 2 libros y un curso preparados.

* [Mostly adequate guide to Functional Programming](https://mostly-adequate.gitbooks.io/mostly-adequate-guide/)

* [Functional-Light JavaScript](https://github.com/getify/Functional-Light-JS)

* [Functional-Light JavaScript V3 course on Frontend Masters](https://frontendmasters.com/courses/functional-javascript-v3/)

Después de repasarlos y hacer algunas prácticas sencillas, decidí asumir nuevamente el desafío de construir el juego, ahora en un lenguaje que conocía, por lo que si en algún momento me quedaba atrapado en la `forma funcional`, siempre podría volver al clásico `JavaScript`. En este tutorial, te guiaré mientras construyes el juego, pero toma esto no como un ejemplo perfecto sino como un diario de mis pasos en el `estilo funcional`.

***

Tomé la idea de este post de [la explicación de Christopher Okhravi](https://www.youtube.com/watch?v=poVMBGe1THE) y decidí que voy a crear este pequeño juego en múltiples lenguajes de programación funcionales para poder comprobar cuál me gusta mas y luego sumergirme en él. Primero, déjame aclarar que el contenido y la forma de explicar las cosas que tiene Christopher me parecen asombrosas, pero encontré dos problemas con este video:

1. Como yo no vengo de un `background` funcional, no podía seguir el código que él escribió o entender por qué había construido cosas de cierta manera, así que decidí tomar el asunto en mis propias manos, construirlo por mi cuenta para hacer una comparación más tarde.
2. Como no conozco los patrones comunes de la programación funcional, no podría lidiar con tener que construir las funciones básicas y al mismo tiempo construir el juego.

Para resolver ambos problemas, decidí utilizar [Ramda.js](https://ramdajs.com/docs/), esta libreria implementa muchas de las funciones que encontrarías en un lenguaje totalmente funcional, todas son `puras` y todas vienen `curried` por defecto.

***

Perdón por la larga presentación, quería explicar qué guió mis decisiones y cómo llegué a este punto. Empecemos.

En esta primera parte de la serie, intentaremos construir los 3 elementos básicos del juego: el mapa, la serpiente (representado por `X` 's), la manzana (representado por `O`) y mostrarlos en la consola . Entonces obtendremos algo como esto:

![Final result](/final-result.png)

## Los fundamentos, un punto.

El mapa es una matriz bidimensional con coordenadas `X` e `Y`, llamaremos a este tipo un `punto` y lo definiremos de la siguiente manera:

```javascript
const point = (x, y) => {
  return {
    x: x,
    y: y,
  }
}
```

A partir de esto, podemos crear la `serpiente` que no es más que una colección de `puntos`, la `manzana` que es solo un`punto` en el `mapa`. Estas 2 cosas serán parte del `estado` de nuestro juego.

```javascript
/// Elegí una posición arbitraria para nuestra manzana y serpiente
const initialState = {
  snake: [point(2, 2)],
  apple: point(5, 5),
}
```

## Mostrando el mundo

En nuestro caso, la interfaz de usuario será el `terminal`. Queremos que este se desacople de la lógica de nuestro juego, así que dejamos el código anterior en un módulo llamado `snake.js` y creamos un nuevo módulo llamado `ui.js` donde podemos comenzar a crear el código que mostrará el `mapa`, la`serpiente` inicial y la `manzana` inicial.

### El mapa

Como dijimos antes, el `mapa` es solo una matriz bidimensional llena de `.`, ¿cómo podemos crear eso?

Importamos `ramda`

```javascript
const r = require("ramda")
```

Creamos una función que recibe, el número de filas, el número de columnas y el `estado` inicial de nuestro juego (usaremos ese `estado` más adelante para dibujar la `manzana` y la `serpiente` por encima del `mapa`).

```javascript
const createWorld = (rows, columns, state) => {
  // Creamos una función que creará una matriz de cierta longitud
  // con el '.' en cada elemento aplicando parcialmente ramda.repeat
  const repeatDot = r.repeat(".")

  // creamos una matriz con la longitud de `columns`,
  // luego lo mapeamos y para cada elemento insertamos una nueva matriz
  // con la longitud de las `row` toda cubierta de puntos.
  return r.map(r.thunkify(repeatDot)(rows), repeatDot(columns))
}
```

### La manzana

Continuemos con la `manzana` ya que es solo un `punto`. Podríamos comenzar haciendo esto:

```javascript
const addApple = (state, map) => {
  map[state.apple.x][state.apple.y] = "0"

  return map
}
```

La función recibiría el `mapa`, el `estado` y agregaría una `O` en la posición en que debería estar la `manzana`. Esto funciona, pero sé que no es "muy funcional" ya que estoy mutando una matriz en su lugar. En cambio, podríamos usar una función llamada `adjust` que recibirá un *índice*, una *string* y un *array* y copiará esa *array* pero reemplazará el elemento en el *índice* por el *string*. Así que creemos una función auxiliar para actualizar nuestro `mapa`.

```javascript
// Esta función tomará una cadena y un punto, primero reemplazará a `X`
// coordenada de la matriz y luego reemplaza la `Y`.
const update = r.curry((str, point) =>
  r.adjust(
    point.y,
    r.adjust(point.x, () => str)
  )
)
```

Probablemente hayas notado algo extraño en esta función, no estamos pasando el `mapa` en ninguna parte, esto se debe a que estamos retrasando la evaluación de dicha función, en lugar de pasar el `mapa`, estamos devolviendo una función que recibirá el `mapa` y producirá un resultado , sé que esto se ve raro, pero la razon se hará evidente en un momento, confía en mí.
Ahora que tenemos la función auxiliar `update` podemos refactorizar nuestra función `addApple` de la siguiente manera:

```javascript
const addApple = state => update("O")(state.apple)
```

Nuestra función `addApple` tomará el `estado`, llamará a la función `update` y devolverá la función que hará el trabajo cuando le pasemos el `mapa`.
Entonces, intentemos dibujar la `manzana`, para eso, yo lo imagino como una línea de montaje. Primero, creamos el `mapa`, luego dibujamos la `manzana` por encima, por lo que haremos uso de una función muy común en la Programación Funcional llamada `pipe`.

```javascript
const createWorld = (rows, columns, state) => {
  const repeatDot = r.repeat(".")
  const map = r.map(r.thunkify(repeatDot)(rows), repeatDot(columns))

  return r.pipe(addApple(state))(map)
}
```

Con pipe lo que hacemos es configurar una serie de funciones que se ejecutarán una tras otra, pasando el valor de retorno de cada una a la siguiente función. Esto parece más o menos lo que queremos hacer, ¿verdad? primero, dibuja el `mapa`, luego dibuja la `manzana` por encima y finalmente dibuja la `serpiente`.

### La serpiente

Entonces, ahora que tenemos una forma de dibujar por encima del `mapa`, extendamos eso para dibujar la `serpiente`

```javascript
const addSnake = state => r.pipe(...r.map(update("X"), state.snake))
```

Entonces, ¿que hacemos aqui? bueno, estamos creando una función que pondrá una `X` en cada posición de la `serpiente` y luego devolverá todos esos cambios en forma de una sola función aplicando parcialmente `pipe`. Cuando esa función se ejecute y reciba el `mapa` hará todos los cambios en una cadena. Ahora nuestro `createWorld` se verá así:

```javascript
const createWorld = (rows, columns, state) => {
  const repeatDot = r.repeat(".")
  const map = r.map(r.thunkify(repeatDot)(rows), repeatDot(columns))

  return r.pipe(addSnake(state), addApple(state))(map)
}
```

Ahora, ¿cómo podemos mostrar eso? creemos una función `displayWorld`

```javascript
const intercalate = r.curry((str, xs) => xs.join(str))

const displayWorld = matrix => {
  console.clear()
  console.log(intercalate("\r\n", r.map(intercalate(" "), matrix)))
}
```

Esta función no es nada mágica, solo toma el `mapa`, logea cada línea colocando un espacio entre cada elemento, y cuando llega al final hace un salto de línea. Extraje la lógica del intercalado a una función auxiliar para hacerlo más legible.

Finalmente, podemos juntar nuestro `estado` inicial y mostrarlo en la consola

```javascript
const display = (rows, columns, state) => {
  return r.pipe(createWorld, displayWorld)(rows, columns, state)
}

display(15, 15, Snake.initialState)
```

![Final result](/final-result.png)

## Conclusiones

Lo sé, realmente necesitamos que alguien trabaje en los gráficos si vamos a intentar vender este juego, ¿verdad?

Espero que este ejemplo no haya sido demasiado difícil para ustedes, hice todo lo posible para explicar mi proceso de pensamiento al crear la 'UI'.

En la siguiente publicación, trataremos de cubrir toda la lógica para mover la `serpiente`, comer la `manzana`, reiniciar el juego y perder.

Si te gustó este artículo, no olvides compartir o comentar, si tienes alguna duda sobre el código, no dudes en preguntarme en los comentarios. También puedes consultar el código fuente [aquí](https://github.com/Raagh/functional-snake-game) 😀.


Hola chicos, ¿cómo les va este fin de semana? Espero que estén tomando la cuarentena como una oportunidad para mejorarse, al menos así lo hago yo.

En Bélgica, estamos en encierro obligatorio, por lo que no hay una mejor excusa para quedarse en casa, leer y codificar. Creo que es mi deber ayudarte en tu carrera, así que creo que en lugar de quejarnos de tener que quedarnos en casa, tanto usted como yo podríamos aprovechar esta oportunidad para hacer algo que siempre quisimos hacer.

***

## El problema

Apuesto a que siempre quisiste aprender algo, practicar yoga, meditar, hacer ejercicio todos los días, comer sano, aprender un nuevo lenguaje de programación o terminar un libro que ha estado en tu estantería durante años. En nuestra vida moderna, siempre estamos apurados por ponernos al día, siempre hay un problema, siempre hay algo nuevo que debemos verificar, desafortunadamente, todo este ruido dentro de nuestras cabezas nos impide notar que estamos consumiendo nuestro recurso más preciado, `El Tiempo` .

Pasamos la mayor parte de nuestro tiempo comiendo, durmiendo y trabajando. Cuando tenemos algo de tiempo libre, estamos tan cansados ​​que solo comemos más, dormimos, vemos televisión o jugamos videojuegos, y por favor no me malinterpreten, no hay nada de malo en eso, a mí me gusta ver UFC o Glory de vez en cuando, también veo algunos partidos de la Liga de Campeones de la UEFA, pero cada vez que esto sucede, planeo hacerlo, planeo un tiempo para relajarme y pasarlo con mi esposa mirando televisión.

> La mayor parte del tiempo, lo paso tratando de mejorarme.

Esto implica muchos tipos de actividades, hacer ejercicio, leer, codificar, escribir. Mis amigos me dijeron varias veces que debería relajarme y \`\`simplemente no hacer nada'', y solía ser así, pero hace unos años me di cuenta de que mi tiempo en esta tierra se estaba desperdiciando si solo lo seguía sin pensar en lo que quería hacer y cuál era el uso apropiado de mi tiempo.

Puede ser difícil de entender, pero estamos muriendo cada día. Cada día, estamos un paso más cerca de nuestra tumba, sea lo que sea que decidamos hacer ahora, podría ser lo último que hagamos, así que te propongo que de ahora en adelante te enfoques en desarrollar tu virtud. Es tu vida, si no lo haces, ¿quién lo hará por usted?

## Tomando acción

Creo que la verdadera felicidad en la vida proviene de la satisfacción y la realización, no de comprar más cosas, mirar televisión o comer hasta que te sientas enfermo, sino de concentrarte en mejorarte a ti mismo y a los demás, amar tu oficio y siempre tratar de ser mejor en eso.

> Ama el humilde arte que has aprendido y descansa en él. Pasa el resto de tus días como alguien que de todo corazón confía todas las posesiones a los dioses, sin convertirse en tirano ni esclavo de ninguna persona.
> —Marcus Aurelius

Entonces, con la cuarentena en todo el mundo, te sugiero que te tomes este tiempo para mirar dentro tuyo y preguntarte:

1. ¿Qué es lo que realmente quiero de mi vida?
2. ¿Mis acciones actuales me llevan a ese lugar?
3. ¿Qué podría hacer de manera diferente para estar más cerca de mis objetivos?

Si estas preguntas, traen algo de verdad sobre tu vida, no te preocupes y no te enojes. El pasado es pasado y no hay nada que puedas hacer al respecto, lo único que importa son las cosas que están bajo tu control, qué puedes hacer ahora para convertirte en un mejor desarrollador, padre, hijo, esposo, persona.

Te sugiero que comiences haciendo un plan y creando algunas tareas sobre cómo lograr esos objetivos. Si estás interesado en seguir una guía práctica, puedes probar la mía, escribí sobre ella hace unos meses en [Estudio deliberado, tomando el control de nuestra carrera](https://www.patferraggi.dev/blog/2019/dic/deliberate-learning).

Además de esos objetivos, voy a aprovechar el tiempo que la cuarentena me está dando para mejorar algunas cosas que he estado haciendo, pero no tan frecuentemente como me gustaría, las nombraré aquí en caso de que necesites algunas ideas adicionales.

Personal:

* Meditar todas las mañanas
* Ejercicio todos los días
* No te enojes, no dejes que las emociones te guíen
* No encuentres culpa en los demás, son humanos como yo, tratando de hacer lo mejor que pueden
* Centrarse en lo que puedo controlar
* Leer todas las noches
* Escribir en mi diario todas las noches

Técnico:

* Leer sobre programación funcional
* Crear pequeños juegos usando programación funcional
* Practicar RX.js
* Refactorizar mi proyecto de código abierto
* Practicar desafíos algorítmicos

Cada mañana, cuando me despierte estaré meditando, ¿en qué me enfocaré? Mis objetivos, ¿qué puedo hacer hoy para estar un paso más cerca? ¿Qué desafíos puedo encontrar durante el día? ¿Cómo debo reaccionar ante estos obstáculos?

Voy a hacer ejercicio todos los días, mientras hago ejercicio usaré Audible para escuchar algunos audiolibros.

Voy a escribir en mi diario todas las noches, ¿sobre qué voy a escribir? ¿cómo me fue este día? ¿logré lo que quería hacer? ¿podría haber hecho algo diferente?

Usaré las siguientes semanas para tratar de ganar impulso en algunas de las cosas que he ido aflojando, el impulso es fundamental para crear buenos hábitos, como probablemente ya saben, las cosas se vuelven más fáciles con el tiempo.

***

Entonces, ahora que estás en casa, no tienes nada que hacer, ¿por qué no enfocarte en mejorar? podría ser la llama inicial que va a cambiar el resto de tu vida, solo comienza, no tienes nada que perder.

Este fue un artículo corto, y como probablemente notaron, escribí este libro más para mí que para otros, no soy perfecto, ni mucho menos, pero realmente quiero ser mejor de lo que era ayer.

Si quieres unirte a este desafío, me gustaría que pudieras escribir en los comentarios qué cosas planeas hacer mientras estás en casa. Si necesita ayuda para preparar sus objetivos y pasos individuales, puedes escribir en los comentarios o contactarme directamente en Twitter, estaría encantado de ayudarte y tal vez podamos hacernos responsables mutuamente para realmente hacer las cosas 😀.
