# CSRF Protection para Hipsters

> Disclaimer: No soy experto en seguridad, estas son notas sobre mi búsqueda.

Estaba haciendo una PWA chiquita, sin romper nada, hasta que me tocó llegar a la parte de la autenticación.

Para este caso de uso no puedo usar un servicio como Auth0 y armar un buen esquema con JWT que rotan bien es un bardo, preferí ir por los no tan hipsters y bien queridos token sessions con una cookie HTTP.

El problema llegó cuando le quise meter [CSRF](https://owasp.org/www-community/attacks/csrf) tokens para proteger a la app. Como quería servir el front desde una CDN no podía usar el esquema típico de meter el token en el HTML porque no hay un server atrás.

Lo que se me ocurrió fue crear un endpoint que me traiga un csrf token en una cookie al bootear la app. Ahí fue cuando me encontré lo siguiente en el artículo de[ __understanding csrf__](https://github.com/pillarjs/understanding-csrf) recomendado por [csurf](https://github.com/expressjs/csurf), la librería más usada para CSRF protection en node.js:

> Don't ever create a GET /csrf route in your app and especially don't enable CORS on it. Don't send CSRF tokens with API response bodies.

Con lo cual pensé que esta no era una opción viable. 

## Same-Site Lax cookies

Como el frontend de mi app corre en el mismo dominio (distinto subdominio) del backend y como el target son navegadores modernos (IE11 es moderno, ponele), podemos usar una feature que protege nuestras cookies de sesión. Seteando la cookie de sesión como __SameSite=Lax__ en conjunto con __HTTPOnly__ tenemos la seguridad de __SameSite=Strict__ donde las credenciales no se transmiten entre distintos dominios salvo en requests GET, cosa que si entramos al sitio desde un link, la sesión se envíe y no perdamos el flujo del usuario autenticado.

En los artículos que leí se recomiendan los tokens de CSRF por compatibilidad con browsers no tan modernos y por ser future proof, ya que la protección pasa por la app y no por features del browser.

## Tan mala es la idea del endpoint para obtener tokens?

Si bien el artículo que menciono no lo recomienda ni un poquito, encontré que frameworks como Laravel que [usan](https://laravel.com/docs/7.x/sanctum) esta estrategia y hay una [conversación al respecto](https://github.com/pillarjs/understanding-csrf/issues/6) en el artículo que cité antes ¯\_(ツ)_/¯.

Disclaimer: No soy experto en seguridad, estas son notas sobre mi búsqueda.


Estaba haciendo una PWA chiquita, s...

CSRF Protection para Hipsters

---
path: relaciodan-3-bano-de-inmersion
tag: relaciodan, a-frame, vr
---

# Relaciodan #3: Baño de inmersión

Esta es la tercera entrega de una serie de dinámicas de la [Escuela Relacional](https://instagram.com/escuela.relacional) en las que
estoy participando.

## Todo se hace tan lejos en mi depto

  La primera parte de la consigna fue quizás la más complicada: Elegir un espacio de la casa y escribir al respecto. Primero pensé en el cuarto, luego en la cocina, el escritorio y la cama. Al final me decidí por la bañadera, uno de mis rincones favoritos y que menos aprovecho.

  Como estaba copado con [Collected notes](https://collectednotes.com/impronunciable/la-banadera) aproveché la plataforma para escribir este fragmento:

  ```
  La bañadera

  Algunas cosas nos atraen más por su potencia,
  por lo que podemos hacer con ella que por el
  uso que le damos.
  
  La bañadera nos permite obtener lo mejor de dos mundos,
  nos acerca a la horizontalidad y placidez de la cama en
  combinación con la relajación purificadora de la ducha.
  La bañadera es descanso y es renovación.
  Sin embargo la costumbre, la rutina y el olvido me
  privan de este uso y me obligan a la verticalidad, a la
  velocidad y al secado rápido.
```

## Desde adentro

La segunda parte de la dinámica consta en dibujar el espacio que elegimos.
Yo quería mostrar la bañadera desde adentro, no desde lejos. Por eso elegí un
recurso poco ortodoxo:

- Saqué una foto equirectangular (360) estando adentro de la bañadera con la
[app](https://play.google.com/store/apps/details?id=com.google.android.street) de Google Street View.

![Foto 360 de la bañadera](https://i.imgur.com/rIXmP09.jpg)

- Con una app de dibujo con capas "calqué" las partes que me interesaban de la foto.

![La bañadera](https://i.imgur.com/ZjCw0Xw.jpg)

- Metí la imagen resultante en una escena de `A-Frame` para hacer el stitching y quedar como ambiente (mové el dedo en el teléfono, arrastrá el mouse en desktop o entrá en modo vr en el link externo).

[Ver en pantalla completa](https://zajdband.com/🛀/)

Para quien le interese, el código HTML para crear esta escena es exactamente el siguiente (pueden ir a ver el código fuente en el link de arriba si no me creen):

```html
<html>
  <head>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-assets>
        <img id="sky" src="sky.jpeg" />
      </a-assets>
      <a-sky src="#sky"></a-sky>
    </a-scene>
  </body>
</html>
```

dónde `sky.jpeg` es la imagen dibujada del paso anterior.

## Volver

Apróximadamente una semana después de esto nos pidieron volver a escribir sobre el espacio que elegimos. En mi caso después de pensar en como me gusta la bañadera y lo poco que la uso,
de anhelarla y de prometerme volver a usarla, pasó una semana sin ningún cambio. Por eso escribí lo siguiente:

```
La ducha

Abro la canilla más cercana. Es la fría, bien.
Me contorneo hasta alcanzar la caliente y girar
menos que ayer para no quemarme. Me saco el pijama,
abro la cortina y noto la ausencia de toallas.
Cuando hay una significa que Ana se bañó pero
yo no, esta disposición me obliga a ir a buscar algo
para secarse a un futuro yo.

Vuelvo al baño. Calculé mal, hay que ajustar
la perilla caliente. Pongo un pie adentro,
luego el otro. Veo todo desde arriba: El shampoo,
el patito rosa y el naranja, el jabón,
el acondicionador, el cepillo para las uñas.
Todo parece tan lejano a mi alcance.
Me pongo a pensar en la bañadera, en que
algunas cosas nos atraen más por su potencia,
por lo que podemos hacer con ella que por el uso
que le damos...
```

## Al agua pato

Para terminar nos pidieron que saquemos una foto del espacio en el que veníamos trabajando.
Vencido, me metí a la bañadera sin agua y saqué una foto a la altura de la bañadera y cerré
la dinámica.

![Desde la bañadera](https://i.imgur.com/THemKJc.jpg)

## No tan rápido

Esta fue la tercera entrega de esta serie de ejercicios que estamos haciendo en la
[Escuela Relacional](https://instagram.com/escuela.relacional) ❤️. Mis agradecimientos a
la gente hermosa que la compone y me permite ser parte de esto.


Relaciodan #3: Baño de inmersión

Esta es la tercera entrega de una se...

Relaciodan 3: Baño de inmersión

---
path: relaciodan-2-la-frambuesa-parlanchina
tag: relaciodan, raspberry pi, tensorflow
---

# Relaciodan #2: La frambuesa parlanchina

Esta es la segunda entrega de una serie de dinámicas de la [Escuela Relacional](https://instagram.com/escuela.relacional) en las que
estoy participando. Ya está disponible [el primer artículo](https://zajdband.com/relaciodan-1-a-traves-del-algoritmo/).

## Parte I: Identidad

La primera parte de la consigna, elegir un objeto que nos represente, puede parecer una pregunta de entrevista de trabajo
cual "Qué animal serías?". Sin embargo, tomarnos un tiempo para pensar en esto puede ayudarnos a entender un poco más
sobre nosotros mismos.

Después de pensarlo largamente y con ayuda de [Ana](https://twitter.com/anamisbernal) decidí ir por un objeto que pasa
la mayor parte del tiempo en un cajón, más precisamente en el que denominamos __el cajón de la tecnología__.

![Raspi](https://i.imgur.com/rS1JJey.jpg)

El objeto en cuestión es una denominada __Raspberry PI__. La [Raspi](https://www.raspberrypi.org/) (para los amigos), es una computadora muy chiquita
en tamaño y muy barata (unos 30 dólares) que fue inventada en el Reino Unido para enseñar informática en las escuelas.

Por qué elegí este objeto? no porque me considere a mi mismo como una máquina ni mucho menos sino porque la Raspberry PI
es usada mayoritariamente para experimentar y eso es lo que más me gusta hacer con la tecnología. Es muy simple convertir
la Raspi en una consola de videojuegos, un centro multimedia, un servidor de aplicaciones web o lo que se nos ocurra.
Esto me vino muy bien para la segunda parte de la dinámica.

## Parte II: Repetición

Luego de seleccionar el objeto se nos pidió que realicemos al menos 30 registros del objeto en distintos momentos. Acá
es donde mi vagancia y falta de tiempo me vinieron al pelo y donde voy a empezar a mostrarles codiguito, no se preocupen.

El concepto fue el siguiente:

> En vez de repetir el registro del objeto desde mi perspectiva intenté que el objeto interactúe con la gente y así
armar el registro de repeticiones.

### La receta

Para realizar la interacción entre mis compañeros y mi objeto se me ocurrió lo siguiente:

- Levantar un sitio web que corra en la Raspberry.
- Al entrar al sitio el objeto cuenta cosas de si mismo, muestra interacciones pasadas e invita a participar en el registro colectivo.
- Si la persona accede se realiza el registro y se guarda en la memoria del objeto.

### Abriendo el corazón (de la red de mi casa)

Lo primero que hice fue **quemar** una imagen de [Raspbian](https://www.raspberrypi.org/downloads/raspberry-pi-os/) que es una
distribución de Linux para Raspberry en una tarjeta SD y configurar el wifi con la red de mi casa para poder acceder sin
conectarla a un monitor y teclado (ya dije que soy vago).

Una vez conectada la Raspberry a la corriente con un cable para cargar el celu me conecté por SSH a mi objeto elegido y me aboqué
a instalar todo para correr mi servidorcito web. Para eso me puse a instalar:

- __nginx__: Para servir los requests.
- __Certbot__: Maneja los certificados SSL.
- __node.js__: Para el backend.
- __Cliente de [noip](https://www.noip.com/)__: Para rutear los DNS hacia la IP del router de mi casa que no es estática.

Una vez configurado todo este ambiente (me pueden [escribir](https://twitter.com/impronunciable) si necesitan una mano haciendo esto)
y emocionado porque los pedidos a mi página entraban directo a la maquinita que tenía a mi lado me puse a armar el sitio propiamente dicho.

### La experiencia de humano

Como dije antes, la idea era que la gente que entrara al sitio se llevara un poco del objeto y dejara su sensación registrada.
Por eso cuando se entraba al sitio (que ya no anda porque no da tener la raspi corriendo todo el día y mi router expuesto al COVID-19)
se veía algo así:

![Sitio en la Raspi](https://i.imgur.com/1lPLmta.jpg)

En la introducción el objeto se presenta no solo contando su historia sino con 2 datos de su presente. Por un lado
cuenta hace cuanto está despierto y por otro su temperatura actual.

Como comenté usé node.js para este ejercicio. Para obtener el tiempo de vigilia usé `process.uptime()` que retorna
la cantidad de segundos desde que el proceso se despertó. Para mostrar algo más natural que una cantidad en segundos
usé `date-fns` para que me de el tiempo relativo. Para la temperatura usé el módulo `pi-temperature` que creo no
requiere mucha explicación. Fue interesante recibir comentarios sobre la "alta temperatura" de la Raspi, creo que esto
ayudó a darle un carácter subjetivo al objeto.

Después de la selfie se muestra un listado de registros. Como se puede ver, cada registro cuenta con 2 datos: La localización
relative de la persona que entró al sitio respecto a la ubicación de casa y por otro lado el estado __emocional__ de la persona
capturado por el objeto.

Más abajo aparece la súplica de colaboración para participar del registro. Vamos a ver como se capturaron los registros que es lo que
probablemente te interese ahora.

### Atrápalos ya!

Al clickear en el botón se registraban 2 datapoints: Distancia y emoción.

#### Calculando la distancia

Para esto usé al querido objeto `navigator.geolocation`. El código para esto es bien simple:

```javascript
navigator.geolocation.getCurrentPosition(function(position) {
  const posicion = { lat: position.coords.latitude, lon: position.coords.longitude };
});
```

Como no me interesaba por privacidad ni por objetivo del ejercicio guardar la ubicación real de la persona sino la distancia a mi casa,
el servidor simplemente guardaba la distancia ente mi ubicación y ese punto. Usé el módulo `geo-distance` por vago pero una distancia
euclideana bastaba. Lo bueno de este módulo es que tiene funcionces que escupen el resultado en lenguaje natural.

```javascript
const Distance = require('geo-distance');
function getDistance(position) {
  const dis = Distance.between(home, position).human_readable().toString();
  return `Desde ${dis} de mi casa`;
}
```

#### Algo en tu cara me fascina

Como dijo Elvis Crespo algo en tu cara me da vida, será tu sonrisa? Esa es la pregunta que quería que se haga la Raspi
y no quería correr un algoritmo muy pesado en el server.

Lo que hice fue usar [Face API](https://github.com/justadudewhohacks/face-api.js) un modelo para [Tensorflow JS](https://www.tensorflow.org/js)
que nos permite ejecutar modelos de DeepLearning en el navegador 🤯.

Cuando la persona clickeaba en el botón, además de pedir permiso de geolocation también pedía permiso de acceso a la webcam
y usaba el algoritmo mirando la imagen hasta identificar una emoción.

El flujo para identificar la emoción en la cara del registrado es algo como esto (hay un poco más de código que metí para evitar
race conditions pero no viene al caso):

```javascript
  // Pido acceso al video y empiezo a "leer" las imágenes
  const videoElement = document.createElement('video');
  document.body.appendChild(videoElement);

  return navigator.mediaDevices.getUserMedia({ video: { facingMode:'user' } })
  .then(capture => {
    videoElement.srcObject = capture;
    videoElement.play();
  });

  // Cargo los modelos
  Promise.all([
    faceapi.nets.faceExpressionNet.loadFromUri('/models'),
    faceapi.nets.ssdMobilenetv1.loadFromUri('/models'),
  ]).then(detectFaces);

  // Detecto emociones
  function detectarEmocion() {
    // Cada 1 segundo tomo una foto
    const inter = setInterval(() => {
      faceapi.detectSingleFace(videoElement).withFaceExpressions()
      .then(res => {
        // Ordeno las expresiones por nivel de confianza del algoritmo y elijo la primera
        const [emocion, confianza] = Object.entries(res.expressions).sort((a, b) => b[1] - a[1])[0];
        // Si la confianza es más del 50% la envío y dejo de detectar
        if (confianza >= 0.5) {
          clearInterval(inter);
          sendData(emocion, confianza);
        }
      });
    }, 1000);
  }
```

Una vez enviada la información al servidor, en vez de hablar de porcentaje de confianza lo pongo en términos más naturales
y hago la traducción al español con una función simple:

```javascript
var expressions = {
  neutral: 'tranquile',
  happy: 'alegre', 
  sad: 'triste',
  angry: 'enojade', 
  fearful: 'miedose',
  disgusted: 'a disgusto',
  surprised: 'sorprendido'

}

function getExpression (exp) {
  var adj = 'un poco'
  if (exp.value > 0.75) adj = 'bastante'
  if (exp.value > 0.9) adj = 'demasiado' 
  return `${adj} ${expressions[exp.name] || 'tranquilo'}`
}
```

Luego se guardan los datos en la base (un archivo JSON) para que el próximo
participante pueda leer los últimos 5 y así también armar mi base de datos de
repeticiones no tan repetidas.

### No tan rápido

Esta fue la segunda entrega de esta serie de ejercicios que estamos haciendo en la
[Escuela Relacional](https://instagram.com/escuela.relacional) ❤️. Mis agradecimientos a
la gente hermosa que la compone y me permite ser parte de esto.


Relaciodan #2: La frambuesa parlanchina

Esta es l...

Relaciodan 2: La frambuesa parlanchina

---
path: relaciodan-1-a-traves-del-algoritmo
category:
tag: relaciodan, tensorflow
---

# Relaciodan #1: A través del algoritmo

La pandemia nos privó de muchas cosas pero también trae nuevas oportunidades.
Desde hace un poco más de un mes tuve la oportunidad de sumarme a una serie de
dinámicas o ejericios organizados por la [Escuela Relacional](https://www.instagram.com/escuela.relacional/).
Siendo Relacional una escuela de Dirección de Arte y yo un programador sin background en lo visual
me interesó el desafío doble que tengo por delante.

La idea detrás de la serie de artículos que empiezan con este es contar como los encaro
desde mi perspectiva como programador, haciendo especial hincapié en el aspecto técnico
de la resolución de cada dinámica.

Cada ejercicio finaliza con una mesa de trabajo donde se dialoga sobre lo trabajado que
por motivos varios van a quedar por fuera de esta serie.

## La primera dinámica: el registro

### La previa

Para empezar, nos pidieron que entreguemos un registro propio que conste de:

- Nombre
- Una foto nuestra
- Cuenta de instagram
- Mapa (así, bien libre)

Por ejemplo, esta fue mi entrega:

- Dan Zajdband
- [@danzajdband](https://instagram.com/danzajdband)
- Buenos Aires

![retrato]
(https://i.imgur.com/FTX0mn9.jpg)

### El registro del otro

Para la primera dinámica se nos envió un documento con el registro de todos los
participantes (más de 40 personas) y nos pidieron que hagamos un registro de 10 de ellas.

Para esta consigna decidí aplicar algoritmos computacionales similares a los
utilizados por las redes sociales para comprender el contenido que publicamos
cotidianamente en ellas y así ayudar a identificar la disonancia entre nuestra
fantasía respecto a lo que realmente las máquinas logran captar.

### La elección de los registros

La primera decisión que tomé fue que yo no iba a elegir las personas a registrar sino que lo iba
a hacer la computadora. Para esto creé un archivo plano `usuarios.txt` con una cuenta de instagram por línea
y corrí el siguiente comando en la terminal para que se genere un nuevo archivo con 10 cuentas al azar:

`$ cat usuarios.txt | sort -R | head -n10 > elegidos.txt`

Una vez obtenidos los 10 elegidos (y sin mirar el resultado para no hacer trampa) pasé a la primera técnica
para hacer mis registros asistidos por computadora.

### Técnica 1

> Sin que yo pueda verlo, un algoritmo descarga una imagen de una cuenta de instagram,
  la observa y genera una descripción corta de la misma.

>  Luego de recolectar las frases, sin haberlas yo visto y sin saber de quienes son
  hago un dibujo de cada descripción. Finalmente presento la descripción automática
  junto al dibujo y la imagen original.

#### El día que tu AI lo entienda...

El primer paso fue entonces seleccionar una imagen al azar de cada una de las cuentas de Instagram
de estas personas. Para esto usé [InstaLoader](https://instaloader.github.io/) que nos permite
descargar media y metadata de cuentas de instagram desde un CLI. A partir de esta herramienta generé el siguiente
script:

```bash
ITER=0
for INSTAGRAM in $(cat elegidos.txt)
do
ITER=$(expr $ITER + 1)
echo "Starting ${ITER}"
PROFILE_DIR="instagram/${INSTAGRAM}"
instaloader ${INSTAGRAM} --dirname-pattern="${PROFILE_DIR}" --post-filter="date_utc >= datetime(2019, 4, 30)" --no-captions --no-videos > /dev/null
done
```

El script de bash itera sobre la lista de elegidos y ejecuta `instaloader` por cada uno de ellos trayendo fotos del último año.
Decidí esto para no traer un registro demasiado antiguo y porque mucha gente tiene una actividad agitada en la red.
Las imagenes de cada usuario van a parar a la carpeta `instagram/elusuario`. Una vez que descargué todo esto me avoqué a la tarea que más intriga me daba, la de extraer descripciónes de las imágenes.

Después de probar muchos proyectos, pelearme con pytorch, tensorflow y otros, me decidí por usar [IM2TXT](https://github.com/jmrf/im2txt-demo)
que es una implementación del modelo propuesto en el paper [Show and Tell: Lessons learned from the 2015 MSCOCO Image Captioning Challenge](http://arxiv.org/abs/1609.06647).

Luego de instalar dependencias y el modelo pre-entrenado, armé un script que:

- Por cada usuario de la lista de `elegidos`:
  - Elige una imagen al azar de la carpeta de imágenes descargadas.
  - Copia la imagen original a otra carpeta para poder más tarde producir la entrega (sin verla en el momento)
  - Corre el modelo de captioning (descripción) de la imagen elegida.
  - Escupe la descripción en un archivo de descripciones.

El script me quedó así:

```bash
CHECKPOINT_PATH="model/train"
VOCAB_FILE="data/mscoco/word_counts.txt"

mkdir pics

ITER=0
for INSTAGRAM in $(cat elegidos.txt)
do

ITER=$(expr $ITER + 1)

echo "Starting ${ITER}"

PROFILE_DIR="instagram/${INSTAGRAM}"

IMAGE=$(ls -1 $PROFILE_DIR | sort -R | head -n1)

cp "${PROFILE_DIR}/${IMAGE}" "pics/${ITER}"

cd im2txt
bazel build -c opt //im2txt:run_inference > /dev/null
cd ..


echo "${ITER}\n" >> descripciones.txt
bazel-bin/im2txt/run_inference \
  --checkpoint_path=${CHECKPOINT_PATH} \
  --vocab_file=${VOCAB_FILE} \
  --input_files="${PROFILE_DIR}/${IMAGE}" \
  | head -n2 | grep "0)" >> descripciones.txt 

done
```

#### A dibujar

Abriendo el archivo `descripciones.txt` leí las 3 descripciones que infirió el modelo sobre las imágenes que vio
hice un dibujo (con mi técnica super pulida) imaginando las situaciones a través del texto.

El resultado para las 3 personas que fueron pasadas por esta técnica son las siguientes:

![Oscar](https://i.imgur.com/opg7Lml.jpg)

![Juan](https://i.imgur.com/1SjYCxV.jpg)

![@lapoll](https://i.imgur.com/N6kUM39.jpg)


### Técnica 2

>  Elijo manualmente 9 imágenes consecutivas de una cuenta de instagram y genero una descripción corta.
  Luego paso las mismas imágenes
  por un algoritmo que retorna descripciones automáticas de estas.
  
>  Presento en cada retrato las 9 imágenes junto a las descripciones manuales y
  automáticas.

Para esta segunda técnica usé un script muy similar al de la técnica anterior:

- Elijo las siguientes 3 cuentas de instagram de los `elegidos` y por cada una:
  - Selecciono 9 imágenes al azar.
  - Las paso por el modelo de captioning automático.


Por otro lado, entré a la carpeta de imágenes seleccionadas por el script y escribí yo descripciones
para esas imágenes.

Lo interesante de esta técnica es primero ver como el algoritmo tiene su propio bias y encuentra
cosas muy distintas a las que nosotros vemos. En conversaciones posteriores me comentó mucha gente
como se quedaban buscando elementos de la descripción del algoritmo en las imágenes.

El resultado para les 3 afortunades fue el siguiente:

![@romi_alvarez](https://i.imgur.com/1Zkyyp6.jpg)
![@diamante.carbon](https://i.imgur.com/1IUWvb6.jpg)
![@nicopereiro](https://i.imgur.com/SpkhYdO.jpg)

### Técnica 3

> Elijo una imagen al azar de una cuenta de instagram y obtengo descripciones cortas automáticas de cada una de ellas a través de un algoritmo.

> Luego paso otro algoritmo que dada una frase corta genera un texto ampliado.

> En cada caso presento la imagen original, la descripción autogenerada y el texto ampliado.

#### Tengo miedo nene!

Como podemos imaginar, las primeras etapas de esta técnica son similares a las anteriores. Con un script elijo imágenes
de cuentas de Instagram y las paso por el algoritmo de descripción automática.

La variante en este caso es que, como en este caso no importaba que yo accediera a pasos intermedios, pude usar un servicio online
simple y poderoso para producir el texto largo a partir de la descripción. Para eso me apoyé en [Talk to Transformer](https://talktotransformer.com/)
que usa el modelo `GPT-2` para completar textos a partir de un comienzo. Entonces agarré los textos generados por `im2txt`
y los pasé por este sitio y los resultados, como pueden ver a continuación son super interesantes:

![@brunotortolano](https://i.imgur.com/UmF5x2m.jpg)
![@anitabagg](https://i.imgur.com/wApHz6o.jpg)
![@gabo.pic](https://i.imgur.com/BiqmeDl.jpg)
![@danzajdband](https://i.imgur.com/51M2Syj.jpg)

### No tan rápido

Esta fue simplemente la primera entrega de esta serie de ejercicios que estamos haciendo en la
[Escuela Relacional](https://instagram.com/escuela.relacional) ❤️. Mis agradecimientos a
la gente hermosa que la compone y me permite ser parte de esto.

Relaciodan #1: A través del algoritmo

La pandemia nos p...

Relaciodan 1: A través del algoritmo

---
path: nowhere-to-ssh-my-journey-into-the-serverless-world
tag: serverless, gurivr, firebase, zeit
---

# Nowhere to SSH: my journey into the Serverless world

> tl;dr: I migrated a small real-world app from Express + MongoDB to Now + Firebase. I'm happy I was able to do it in ~10 hours and I don't need to maintain or spend money on servers (at least for now).

Since [I'm](https://twitter.com/jdbothma/status/1100714277185433602) [terrible](https://twitter.com/erik_mh/status/1181399247763202048) [at](https://twitter.com/fcaivano/status/849084831959052288) [](https://twitter.com/erik_mh/status/1181399247763202048)[managing](https://twitter.com/lu_cyP/status/922346987487449088) my personal projects servers I wanted to believe the hype around Serverless architectures. My intention was to go to a scenario where I don't have to worry about scalability, OS vulnerabilities, web servers, SSL certificates or database backups. Time will tell but for now it seems that's the case.

## The state where I was in

To start experimenting with this technology I chose [GuriVR](https://gurivr.com). It was a Preact app with a tiny Express backend using MongoDB as the primary database, you can explore the old [codebase](https://github.com/OpenNewsLabs/guri-vr/tree/3f293ea45b421169e6a8559e3d5df49dcab829d4). It was hosted on a $10/month DigitalOcean droplet along with other apps and sites.

## Changing the mindset

I looked at different platforms and frameworks and decided to give a chance to [Now](https://zeit.co) from Zeit, the magic **now** command played an important part in the decision.

What I understood from the docs is that in the serverless world you get a kind of clean slate on every request. The goal is to return as fast as possible and avoid persistent connection. Firebase was a great fit for my need because it offers two products I needed to implement: Stateless authentication instead of the MongoDB backed user sessions in the old system and the **Firestore** database. One functionality I wasn&#8217;t giving up easily that I got for free in Firebase was the &#8220;passwordless&#8221; authentication.

Besides the database and authentication provider change I haven&#8217;t had to change too much. The Frontend compiles to a static app that **Now** delivers super fast with their Smart CDN. The **Express** app was easy to convert. I just moved each endpoint to a separate file, matching the API structure. For the frontend I used @now/static and for the backend @now/node.

Most of the ~10 hours I had to work on the migration where spent implementing the new firebase authentication and updating the database calls to use Firestore. I also moved the file uploads from AWS S3 to the Firestore Storage service just because I thought it was better to have all the services in the same provider and dashboard.

## Platform specific configuration

Besides moving the backend endpoints to different files exporting the lambda functions I had to create a now.json file to hep **Now** figure out how my project should be deployed. This was the first time I did this and I&#8217;m sure there are better ways to do it but this is what I got:

```json
{
  "version": 2,
  "name": "gurivr",
  "builds": [
    { "src": "api/**", "use": "@now/node" },
    { "src": "client/dist/**", "use": "@now/static" }
  ],
  "routes": [
    { "src": "/api/preview", "dest": "api/preview.js" },
    { "src": "/api/stories", "dest": "api/stories.js" },
    { "src": "/api/stories/([^/]+)", "dest": "api/story.js?id=$1" },
    { "src": "/api/assets/search", "dest": "api/assets/search.js", "headers": { "Access-Control-Allow-Origin": "*" } },
    { "src": "/(login|guide|stories)", "dest": "/client/dist/index.html" },
    { "src": "/stories/create", "dest": "/client/dist/index.html" },
    { "src": "/(.*)", "dest": "/client/dist/$1" }
  ],
  "env": {
    "FIREBASE_ADMIN": "@firebase-admin",
    "FLICKR_SECRET_KEY": "@flickr-secret-key",
    "GMAPS_SECRET_KEY": "@gmaps-secret-key",
    "FREESOUND_SECRET_KEY": "@freesound-secret-key",
    "STORAGE_BUCKET": "@storage-bucket"
  }
}
```

This was maybe the trickiest part of the project but it wasn&#8217;t that hard to be honest. The development phase was a delight. To start a local server I just typed **now dev** and that was it. The node.js backend and the frontend were up in about one second. It also offers live-reload, something that I wasn&#8217;t even expecting 😍. On development mode you can set a _.env_ file to provide environment variables and secrets.

Every time I wanted to see if everything worked well &#8220;in the internets&#8221; I just used the **now** command that returns a nice development url for every deploy.

## The &#8220;deployment&#8221;

This felt like cheating. For deploying to production I had to do 2 things. The first one was setting up the secrets using the **now** tool. This means typing **now secrets add my-secret &#8217;42&#8217;**. Then, to get a production build I executed again the **now** command but with the **&#8211;prod** flag, and that was it (I promise).

## What&#8217;s next?

You can see the [diff](https://github.com/OpenNewsLabs/guri-vr/commit/b8fe814c90f601679cf32fe022280f3bbf77d3a1) on the codebase and get your own conclusion. My next move will be to figure out how to move this blog and my other projects to this schema. You can reach me on [twitter](https://twitter.com/impronunciable) if you have questions or want to add something to the discussion.

Nowhere to SSH: my journey into the Se...

Nowhere to SSH: my journey into the Serverless world

Siendo mañana mi último día como Knight-Mozilla Ope...

Fellowship revisitado

---
path: fellowship-in-review
tag: Fellowship, Coral, opennews
---

# Fellowship in review

Since tomorrow is my last day as a  [Knight-Mozilla OpenNews Fellow](https://opennews.org/blog/introducing-2016-fellows/) I feel the need to revisit this past 10 months to document what I did, what I left unfinished and some things I'd like to do in the future. An important note is that even if I'm going to talk mostly about projects, the most important takeaway from this process is the people I met, the experiences I lived and all the things I learned. Without further delay, this is what I've been doing during the last year:

## The Coral Project

The organization that hosted me during my fellowship was  [The Coral Project](https://coralproject.net), A Mozilla Foundation project in collaboration with the New York Times and the Washington Post created to build Open Source Software, research and tools to improve online conversation around journalism. As soon as I arrived to the Coral I found not only a super diverse and proactive team but also a great human group, making my job easier and more enjoyable.

The great thing (and also a little terrifying) of the fellowship perspective both from OpenNews and The Coral Project was the total freedom to do the work I wanted to do. They believed I could do interesting and creative things and they gave me the tools and the time so I can develop. Besides having a lot of time to experiment with ideas, some of them with good results, other that didn't work, my main job with the project was to help developing the core Open Source tools that the Coral Project offer to newsrooms of all sizes to improve their communities.

### Trust

![Trust](https://photos.collectednotes.com/photos/110/b7af698e-4812-4bc2-9522-d56437040535)

[Trust](https://coralproject.net/products/trust.html) is a tool that allows a better understanding of commenters behavior in your site by applying filters, creating dynamic user lists. The main idea is that by generating the user lists, filtering by customizable variables, you can detect behavior and engagement patterns. Once identified the user groups we can take actions like sending an E-mail to a user with a gift once it's comments are good enough for our criteria.

The development of Trust was already going on when I started my fellowship and I participated mostly in the development on the tool [Front End](https://github.com/coralproject/cay/graphs/contributors). We use React and Redux for all the Coral Project Front End projects and Go, node.js & MongoDB for the Back End.

### Ask

![Ask](https://photos.collectednotes.com/photos/110/e1109593-2abf-4f2d-b65b-973a97359bcd)

The first project I was involved from the beginning was  [Ask](https://coralproject.net/products/ask.html). As it's name says, the idea behind this product is to allow journalists ask their audience questions, manage the submissions and embed answer galleries to display in their website.

Because The Coral is a very ambitious project we can't waste time. Since we knew we will need to embed widgets in 3rd party sites for Ask and subsequent projects, just one week after starting my fellowship I started investigating good practices and new ideas around creating embeddable widgets and ended up with [a blogpost](https://zajdband.com/exploring-new-techniques-building-composable-widgets-for-the-web/), a ton of ideas thanks to [Ted Han](https://twitter.com/knowtheory) insights and my first steps with [Preact](http://preactjs.com), a framework that gave me a lot of satisfaction during the year (yep, a front end framework can give you satisfactions) and that I then used in Ask and personal projects. That's also how I met [Jason](https://twitter.com/_developit) who became a great inspiration on how to maintain an open project.

Since I've been playing with embeds it was natural to work with this aspect of Ask. That's how we worked mainly with [Pablo Cuadrado](https://twitter.com/pablocubico) on the [embeds engine](https://github.com/coralproject/elkhorn) with more than great results. In fact we don't even really know how but the Ask embeds often load much faster than the host websites ?. Besides working with the embeds y spent a long time with the Ask Front End that lives next to the Trust one and it's called [Cay](https://github.com/coralproject/cay).

Ask is in beta and we already had experiencies collaborating with newsrooms, for example for the president election in the United States.

### Talk

The last big project for the Coral Project in 2016 and likely the most expected one is [Talk](https://coralproject.net/products/talk.html). Just like Ask was built for unidirectional communication from audience to journalists, talk is about conversation. It is our approximation to the comments section on a website, but unlike any other comment system we want to create a configurable software so the comment box after your article stop being that and starts being something more appropriate and engaging to each audience.

Talk is under heavy development and we expect a beta really soon. I also worked on the core development for this project but as in Ask, I could focus at least for a while in a specific aspect I was especially interested in: Comment moderation. I developed the moderation system that was then integrated into the administration tool. For the moderation tool I focused on user input speed and allowing the tool to be used without connectivity or under restricted data scenarios. That's how I met the [Offline first](http://offlinefirst.org/) community, and learned a lot about the development of Progressive Web Apps.

Aas anything we build at The Coral Project, Talk is Open Source and the Source Code is [available on GitHub](https://github.com/coralproject/talk).

### Alternative Front End for Ask

![Alternative Front End for Ask](https://photos.collectednotes.com/photos/110/3d7c0dd5-4f86-4337-9baf-e41be1423a73)

When we started planning Ask, one of the architectural goals was to decouple the Front End from the Back End and from the widget generation (forms and galleries). One of the effects of that decision is the possibility to create new ways to build the forms without using the tool we developed from inside the Coral Project but just our Back End API.

Trying to showcase what is possible using the Ask API and also applying some tricky I learned while working on the Natural Language Processing aspect for [GuriVR](https://gurivr.com), I built an [alternative form generator](https://impronunciable.github.io/askme/) that instead of using the typical widgets drag & drop, it tries to engage in a conversation with the journalist, anticipating some things and making it reflecting about the questions asked and the input type of each question (E-mail, Number, Long text, etc). [The code](https://github.com/impronunciable/askme) is available in GitHub and I also talked a little about the input type inference on a [Source post](https://source.opennews.org/en-US/articles/low-budget-natural-language-processing/).

### Ask WordPress Plugin

![Ask WordPress Plugin](https://photos.collectednotes.com/photos/110/310dcaf1-337a-4e42-937a-42eb84a179db)

WordPress plays a big part in the online news scenario and that's why creating integrations for our products is a priority. I built this integration to embed Ask Galleries and Forms and also being able to do administration tasks without leaving the WP admin. The plugin and it's code will be available soon.

### Ask bot

![Ask bot](https://photos.collectednotes.com/photos/110/fe221109-1798-4c11-831c-ae20140c1b49)

After a conversation with people at BuzzFeed Labs, when they showed us their [BuzzBot](https://github.com/buzzfeed-openlab/buzzbot) I thought about doing an Ask Bot that, when configured pointing to an Ask instance it talk with users that want to complete questionnaires.

The code is available on [GitHub](https://github.com/impronunciable/askbot) and I'm more than happy to help you implement it next to your ask implementation ?.

### Coral Native

![Coral Native](https://photos.collectednotes.com/photos/110/b8b9cc25-be88-452f-9ec7-be90ee5cba7a)

During the first"Coral Week" at the Washington Post HQ, y took some hours to prototype a native mobile app for Trust, the first Coral Project product using React Native and also adding some proof of concepts for moderation in Talk. For example the above gif shows "Quick moderation" that allows comment moderation using our products APIs to moderate comments in a tinder-like fashion.

I killed this project after that week since it wasn't aligned with the Coral roadmap and there were other priorities but it was pretty fun and a very good proof of concept on what can be done without modifying the core code from Trust.  The other takeaway from this project for me was a proof that I could experiment with freedom at the Coral thanks to the support of the team, especially from [Andrew](https://twitter.com/losowsky) and [David](https://twitter.com/daviderwin).

### Muddy

![Muddy](https://photos.collectednotes.com/photos/110/b75480a8-435f-4390-a6ce-cb01af02ed23)

As mentioned before, one of my interests while working with Talk was related with comments moderation. Before even starting formally with the project I had some time to research and prototype a moderation app. This app never saw the light of day but most of the concepts were included into the current Talk moderation interface.

The codename for this project is Muddy (a tribute to Muddy Waters) and it's what is called a Progressive Web Application. The idea was to build a moderation app that could be used not only by moderators but also by journalists for example while riding the subway. I had 2 main goals at the time I developed it:

  * It must work under bad connectivity and offline scenarios
  * It should allow different types of input so users can emit moderation actions efficiently under diverse scenarios and use cases

To make the app work offline I used new web standards to make a "Progressive Web Application" that can cache resources and sync when the user is online the next time. On the input types side I worked with Speech Recognition, Keyboard Shortcuts and Touch gestures. I also combined what I did with "Coral Native" adding a "Swipe mode" with Tinder-like cards to make moderation more approachable.

I mentioned some decisions taken for Muddy on my BAFrontend Progressive Web Apps [talk](https://www.acamica.com/charlas/45/un-electrizante-viaje-a-las-progressive-web-applications).

## Personal project and other experiments

### GuriVR

![GuriVR](https://photos.collectednotes.com/photos/110/cf41fb6e-3534-400e-8921-fede37a830af)

If there's a project that identifies my fellowship, then that is [GuriVR](https://gurivr.com). It was born from a question I asked myself during the 2015 MozFest after seeing great Virtual Reality related projects.: How far can we simplify the prototyping for VR experiences? Can we make it so a journalist (or any non-graphic-programmer) could do VR? This question mutated into a couple of prototypes before taking the final form of a Virtual Reality [online editor](https://gurivr.com) using natural language as the input both in English and Spanish, a [Twitter bot](https://twitter.com/guri_vr) that takes tweets and returns a VR scebe, a [Slack bot](https://github.com/OpenNewsLabs/guri-slack) and many more things.

I [wrote](http://gurivr.com/guide) [extensively](https://source.opennews.org/en-US/articles/virtual-reality-rest-us/) on the technical side of the project, but there is another important aspect of the project that is tied to the Fellowship spirit on working with this project as I was interested in new things during the year and as you can see in the chart below my interest fluctuate a lot

![commits](https://photos.collectednotes.com/photos/110/4a1cd79b-9ebd-438d-a092-1aeccaa8aea0)

This project is tied to my interests (and other people requests) but it also helped me test some ideas I had during the year, and that's why even if I worked from time to time during the whole fellowship on this project there were 2 specific nights where I wrote the key parts of Guri:

The first one was the night of the [March Hacks/Hackers New York meetup](https://www.meetup.com/hacks-hackers-nyc/events/229647574/). I had the idea of doing simple VR for everyone in my mind but I didn't have a clear way to implement it. During that Meetup, [Sisi Wei](https://twitter.com/sisiwei) from ProPublica showed how they translate articles to different languages using Google Docs and structuring the translations with [ArchieML](http://archieml.org/). That same night, after asking some questions on the matter to [Mike Tigas](https://twitter.com/mtigas), I named the project and started the first version. "Write your story on a Google Docs, add annotations with ArchieML and get your VR piece":

![Twitter DM](https://photos.collectednotes.com/photos/110/a1ebab22-929e-4c56-a578-df7dc6d7a4e7)

The second night was the one before presenting Guri to [Miguel Paz](https://twitter.com/miguelpaz) CUNY J-School class. At this point I had this project that took an annotated Google Docs and turned it into a VR scene, but I felt there was still a big learning curve for people not used to structure data (and I also wanted to impress the students). So that same night I started writing a parser that takes natural language from the Google Docs (instead of ArchieML annotations) and transforms it into a VR experience. The code I wrote that night is practically what we have now in the [NLP side](https://github.com/OpenNewsLabs/guri-vr/blob/master/client/shared/nlp.js) for GuriVR.com.

Just as those 2 nights that changed the course of the project based in new ideas I had at the time, there were many more nights and days that piled more features into what you can use now on GuriVR. That hands-on spirit, that was transmitted from OpenNews, helped me develop my creativity and my interests on this project that now has many different use cases.

As an extra, Guri made me start participating on the  [A-Frame](https://aframe.io) community, the VR Framework developed by Mozilla, and also their creators that were really helpful during the whole process.

### Next.js

![Next.js](https://photos.collectednotes.com/photos/110/06b98f09-1730-4ff0-b6fc-2dfba16ccb46)

[Guillermo](https://twitter.com/rauchg) showed me the main concepts for this Universal Front End Framework many months ago. That's why after spending many hours configuring a new project I asked him if they had plans to finish implementing the framework. That's how I started contributing to [Next](https://github.com/zeit/next.js).

This is one of the projects I enjoy both contributing, since I learned so much from the amazing [Zeit](https://zeit.co) team and also benefit as a user, a win-win.

### Isopo

![Isopo](https://photos.collectednotes.com/photos/110/be083dfc-29af-43d4-aa28-67ebb19c5d88)

During the Fellows work week in Buenos Aires, After [Martín](https://twitter.com/tincho_for_ever) showed me the Inception app for Android, It occurred to me to work on [Isopo](https://impronunciable.github.io/isopo/), a web technologies version of that app adding configurable audio filters. The idea is that to make Augmented Reality is not required to use the user camera, we can just listen what's coming from the phone microphone, apply some filters and feed it back to the ears, modifying our reality perception.

### StoryTeller

![StoryTeller](https://photos.collectednotes.com/photos/110/dcb90b1a-37d3-4591-91c1-baeed6c03cb7)

[StoryTeller](https://zajdband.com/storyteller/vr.html) is an experiment that uses speech recognition technologies to interact with WebVR, allowing VR exploration using the human voice.

I didn't finish this project but it helped into the development of other [GuriVR](https://gurivr.com) features and showcase the posibilities we have to experiment in the VR space.

### A-Frame Chartbuilder component

![Chartbuilder](https://photos.collectednotes.com/photos/110/9e22ee17-4c99-44ed-9963-d3a601132561)

ExperimentingE with dataviz in 3d I created this [A-Frame](https://github.com/impronunciable/aframe-chartbuilder-component) component that takes charts generated with [ChartBuilder](https://quartz.github.io/Chartbuilder/)  and renders it into a WebVR scene. This experiment talks about the interoperability between the WebVR world and popular web libraries such as d3js.

### Shooting 360 at Coachella

![Coachella](https://photos.collectednotes.com/photos/110/ea4c12be-f1ed-481f-a7d8-63900053e053)

I was working on WebVR projects involving a lot of 360 video but I've never filmed in my life, that's when [Miguel](https://twitter.com/miguelpaz) told me he had a student that was interested in filming with his new 360 camera and I met him immediately.

Joseph told me he was about to go to Coachella to film in 360 so I got a press pass and we went to film to the festival. This was one of the experiences I couldn't have in a different context and that helped me understand much better the content producers I worked with.

## Bla Bla Bla | Talks

### WebVR & GuriVR

![alt](https://photos.collectednotes.com/photos/110/e2b50d84-5dc8-438d-8be5-9702cad2426d)

* [SRCCON](http://schedule.srccon.org/#_session-webvr)
* [MozFest](https://app.mozillafestival.org/#_session-568)
* [Buenos](https://www.youtube.com/watch?v=r1d8Mc4pJSM)[Aires](https://www.youtube.com/watch?v=r1d8Mc4pJSM), [Miami](http://www.fiumediainnovationlab.com/mediaparty/) y [Africa](https://mediapartyafrica2016.sched.com/event/8aLK/creating-your-first-virtual-reality-experience-with-gurivr-and-a-frame) Media parties

### Offline-First & Progressive Web Applications

![Offline first and PWA](https://photos.collectednotes.com/photos/110/d8e6f3c9-1458-4530-b6fd-4c3aa3aab950)

* [Encryption and](https://mediapartyafrica2016.sched.com/event/8YYq/encryption-and-offline-access-for-your-site)[offline access for your site](https://mediapartyafrica2016.sched.com/event/8YYq/encryption-and-offline-access-for-your-site) @ Africa Media Party
* [Progressive Web Apps](https://www.acamica.com/charlas/45/un-electrizante-viaje-a-las-progressive-web-applications) @ BAFrontend
* Offline-First Panel @ SXSW 2017

## Articles

  * [Virtual Reality for the rest of us](https://source.opennews.org/en-US/articles/virtual-reality-rest-us/)
  * [Enabling Offline First Experiences on the Web with Service Workers](https://medium.com/offline-camp/enabling-offline-first-experiences-on-the-web-with-service-workers-e4bc8c773dae#.2wk7eulgn)
  * [Universal Rendering with Preact](https://zajdband.com/universal-rendering-with-preact/)
  * [Exploring new techniques on building composable widgets for the web](https://zajdband.com/exploring-new-techniques-building-composable-widgets-for-the-web/)
  * [Low-Budget Natural Language Processing](https://source.opennews.org/en-US/articles/low-budget-natural-language-processing/)
  * [Introduction to Preact and Webpack screencast](https://www.youtube.com/watch?v=nZqTzjl2DwE)  
    ## 

## Fellow-Fellows

![Fellow fellows](https://i.imgur.com/Gs0maJ1l.jpg)

I spent such a great time with my Fellow OpenNews Fellows, and as they say, I had the honor of introducing them into the Alfajor world.

![Alfajor](https://i.imgur.com/rL7dt6f.jpg)

## See you soon!

I'm ending the fellowship and new things will start. I will be back to talk about my new (for now uncertain) adventures.

See you soon ?

Since tomorrow is my last day as a  Knight-Mozilla Ope...

Fellowship in review

---
path: on-keeping-web-development-weird-for-the-next-generation
image: https://photos.collectednotes.com/photos/110/dcb27f6f-5a21-4ddf-a60d-16098e6f50c0
tag: opennews, thoughts, prototyping
---

# On keeping Web Development weird for the next generation

Enjoying a Spring Friday in December, looking for ways to ruin my existence, I was inclined to read a couple of pending resources from the excellent [Rust Docs](https://www.rust-lang.org/en-US/documentation.html). Catching errors at compile time, Static type-checking, immutable bindings, we can do these things now in JavaScript — that’s amazing!

But wait! Rust is a System Programming Language, its main goal is to make programs work as intended, super fast and avoiding memory management issues. I'd love my payment processor, self-driving car, or my OS to be written in a language based on these principles. Don’t get me wrong it's not that I don’t want my home banking website to mistakenly empty my account or Amazon to offer me a product again as soon as I buy it ?. The issue here is that in order to guarantee all the promises we get from a language we must concede some freedom at development time.

Your program correctness and memory safety is based on following a number of unbreakable rules. If you try to break them, you’ll get a message from the compiler and your program won’t run. In web development, we don’t usually have these limitations. If you ever used the Internet you’ll know that this freedom can lead to a lot of broken sites and apps. Because of that, it is great that every day we get new tools for improving our websites and apps.

![Messi](https://photos.collectednotes.com/photos/110/633541af-f8d3-430b-aec8-4f14c1b498b0)

*Messi can be Messy and awesome, like web development*

It worries me that we are focusing too much on making the web correct, fast and scalable that we forget that part of the beauty in Web Dev is about being able to transmit your ideas and unleash your creativity with the tiniest possible friction. [I](https://zajdband.com/screencast-in-spanish-introduccion-a-preact-con-webpack-y-babel/) [love](https://zajdband.com/universal-rendering-with-preact/) [to](https://zajdband.com/exploring-new-techniques-building-composable-widgets-for-the-web/) [use](https://gurivr.com) (p)react, Typescript, Flow, Babel and Webpack for my apps. But I also love to be able to throw a bunch of script tags and create [a weird VR scene](https://impronunciable.github.io/webvr-experiments/village/) or a [crazy Web Audio API experiment](https://impronunciable.github.io/isopo/).

I don’t want part of the next generation of web developers to think that you need to transpile, type-check, use a package manager, a framework for UI, another framework for global state, and a Service Worker automatic generation tool to be able to play around or to do an interactive piece. I think these concepts are important for some part of the web, but not for the web ecosystem as a whole. Being messy is a big part of learning, even to learn that it’s not the best path.

The question will then be: Are we keeping web development weird enough?

[Manatee drawing ](https://www.flickr.com/photos/jimmiehomeschoolmom/1480830286/in/photolist-3fRDfE-c1piBN-apV9yp-9rP4hU-9rP4j1-85HcT-spNLud-dxNDVJ-nME1EL-dKBky1-aJGYvi-961nv8-di5kH1-6d7sak-aoCx48-bZJMAG-ajxosJ-9eJiWK-7Lr1ne-dNdvPx-inupcY-7AUfvg-nkDPX4-gr7W4K-9r5tfZ-fJAgRi-r9tqA3-pNb4Ak-dC9iMR-ow7PEx-6vNmg1-7jS6rM-dC47Uq-2nfz2C-7xQJHe-bfqLyc-5i2Hit-7jVULw-a3bDeL-6jzMQY-h8tEDJ-7jS1wH-azEzLn-atUMP4-6dVNxf-owCSc5-6qtgKa-6MBMb2-7Ujiwf-azEAo6") by Jimmie.

Thanks [Sandhya](https://twitter.com/sandhya__k) for the spell and grammar check 🙂

path: on-keeping-web-development-weird-for-the-next-generation
image: https://photos.collectednotes.com/photos/110/dcb27f6f-5a21-4ddf-a60d-1609...

On keeping Web Development weird for the next generation

---
path: raros-peinados-nuevos-javascript-y-crisis-de-identidad-en-la-era-del-transpilador
image: https://photos.collectednotes.com/photos/110/2c479853-cb86-47d8-b5cb-0d1568279239
tag: JavaScript
---

# Raros peinados nuevos - JavaScript y crísis de identidad en la era del transpilador

![Raros peinados nuevos](https://photos.collectednotes.com/photos/110/2c479853-cb86-47d8-b5cb-0d1568279239)



> Si me gustan las canciones de amor y me gustan esos raros peinados nuevos. Ya no quiero criticar, Sólo quiero ser un enfermero

> __Charly García__


El Neoliberalismo vuelve a posar sus garras sobre Ciudad Gótica, los polos se derriten y Gilmore Girls ya no es lo que era. Sin embargo lo que te quita el sueño no es el futuro distópico sino el paso del tiempo. Desempolvás el libro de los recuerdos y abrís esa página donde bromeabas sobre el uso de clases, los nombres largos, errores en tiempo de compilación y comparabas la diferencia entre JavaScript y Java con la de Flores y Floresta. "Esos eran tiempos felices" suspirás, tus gafas reflejando el impúdico [sitio de Space Jam](http://www.warnerbros.com/archive/spacejam/movie/jam.htm), la mano izquierda sobre el ratón.

Entre lágrimas de café con leche recordás que para esa época el Flaco no era todavía [un bot](http://twitter.com/flaco_bot),  y te cantaba que "Mañana es mejor", que Internet Explorer iba a caducar y que si bien [Safari es el nuevo IE](http://arstechnica.com/information-technology/2015/06/op-ed-safari-is-the-new-internet-explorer/), no ibas a tener que instalar un plugin para mostrar un video o una [librería obesa](https://github.com/DmitryBaranovskiy/raphael) con soporte de VML para mostrar un gráfico de torta con tooltips. Y Spinetta tenía razón cuando te decía todo eso porque hoy tus sitios vuelan, es más simple dividir el código en secciones y la **compatibilidad** de APIs en los navegadores está [bastaneeeete](https://www.youtube.com/watch?v=Ls3BvUEyLxc) mejor.

![clock](https://photos.collectednotes.com/photos/110/bd91b45d-d03a-4595-821f-915da0979c36)

&nbsp;

Por qué digo que **hoy te amo ya y ya es mañana**? Porque si bien todos los hipsters estamos llenando Github con Arrow Functions, async/await, HTML y CSS adentro del JS, tipado estático, promesas sobre el bidet y clases, todas estas construcciones son **elecciones** que podemos hacer en el ámbito web. **La era del transpilador es también la era de la modularización**. Si hacemos las cosas bien, y creo que estamos yendo para ese lado, no te tiene que importar demasiado que tu vecino use typescript, (p)react, jQuery mobile, Sencha Touch o simple Vanilla JS. Lo que importa no es tu capacidad de masturbación mental frente a nuevas tecnologías, sino la **experiencia de usuario**. Si tu app carga rápido y funciona bien tus amiguitos van a quererte y vas a ser exitoso/a en el arte del amor.

Entonces para cerrar y dejarte en paz con las 20 pestañas de posts motivacionales de Medium te pido que no pienses si está bien o mal el uso de nuevas construcciones en un lenguaje, sino en como podemos convivir en este rincón del multiverso y preocuparnos por cosas importantes como el homenaje a [Diego Milito](https://www.youtube.com/watch?v=2paikH7sGeQ).


path: raros-peinados-nuevos-javascript-y-crisis-de-identidad-en-la-era-del-transpilador
image: https://photos.collectednotes.com/photos/110/2c4...

Raros peinados nuevos - JavaScript y crísis de identidad en la era del transpilador

---
path: screencast-in-spanish-introduccion-a-preact-con-webpack-y-babel
tag: webpack, babel
---

# Screencast: Introduction to Preact with webpack and babel

[youtube nZqTzjl2DwE]

Screencast: Introduction to Preact with webpac...

Screencast: Introduction to Preact with webpack and babel

---
path: universal-rendering-with-preact
image: https://photos.collectednotes.com/photos/110/7f1d4b8e-8e43-4ab2-b5d2-cfe866a37035
category:
description: "In this article I explain a technique and conventions to follow in order to achieve Universal rendering (the ability to render an app both client and server side) using preact, node and redux."
tags: preact, node.js, opennews, web
---

# Universal rendering with Preact

As [@rauchg](https://twitter.com/rauchg) stated, [server renderer pages are not optional](https://rauchg.com/2014/7-principles-of-rich-web-applications/#server-rendered-pages-are-not-optional). On my journey redoing the [HackDash](https://hackdash.org) front-end I&#8217;m trying to apply best practices on this software piece, so implementing Universal rendering was one of the first challenges.

In this article I explain a technique and conventions to follow in order to achieve Universal rendering (the ability to render an app both client and server side) using [preact](https://preactjs.com/), node and [redux](https://redux.js.org). This is not the only way to do it but it can help you understand some concepts behind this technique. You can see a demo of the Work in Progress using [now](https://zeit.co/now) for the deployment [here](https://hackdash-front-pgalvabhlc.now.sh), the code is [Open-Source](https://github.com/impronunciable/hackdash-front).

### TL;DR

An easy way to develop this kind of single-page apps with universal rendering is to break your app in pages (in my case each page refer [1-on-1 with a route](https://github.com/impronunciable/hackdash-front/blob/master/src/components/App.js#L13)) and provide an initial fetch redux action for each page. Then, on the server, [provide a middleware](https://github.com/impronunciable/hackdash-front/blob/master/server.js#L25) to fetch that data and when you get the redux action that indicates the data is loaded, [render the page](https://github.com/impronunciable/hackdash-front/blob/master/template.js) along with a JSON representation of the initial state of the app.

### Transpile your server-side code (too)

Because we want to render our client-side preact app on the server, importing the client code into the server, we need to transpile our node code too. Webpack allows to specify a [node target](https://github.com/impronunciable/hackdash-front/blob/master/webpack.config.back.js) that deals for this specific environment while helping with, for example, the jsx components.

### Avoid the usage of browser specific variables

Using browser-only variables like _window_ and _document_ will break your server builds. If you must use them you can access to [global polyfills](https://github.com/Raynos/global) or declare them as external on your webpack configuration.

### Share as much code as you can

The only difference between the code executed in the server and the client is a [minimal express app](https://github.com/impronunciable/hackdash-front/blob/master/server.js). This code is in charge of fetching the initial data for the required page (using the same redux store as the front-end) and render the initial HTML document. Is important to notice the 1-on-1 mapping between the [client](https://github.com/impronunciable/hackdash-front/blob/master/src/components/App.js#L13) and the server [routes](https://github.com/impronunciable/hackdash-front/blob/master/server.js#L39).

### Identify each page first render data

This may be the hardest part of this technique. There should be one entry point for each page. This doesn&#8217;t mean that you can do only one request for a page, you only need to identify when the first render data is loaded and dispatch a SERVER\_READY action. This will allow the middleware to know when to render your app. The way I prevent the first data to be fetched again on the client is just with [a boolean](https://github.com/impronunciable/hackdash-front/blob/master/src/actions.js#L7) indicating if the app was already mounted once.

### More to come

As I said, this is just a WIP. This is the first of a serie of follow-ups on the development of the app. You can follow me on twitter as [@impronunciable](https://twitter.com/impronunciable).

&nbsp;

path: universal-rendering-with-preact
image: https://photos.collectednotes.com/photos/110/7f1d4b8e-8e43-4ab2-b5d2-cfe866a37035
category:
descri...

Universal rendering with Preact

---
path: exploring-new-techniques-building-composable-widgets-for-the-web
tag: Web, Coral, node.js, opennews, prototyping
---

# Exploring new techniques on building composable widgets for the web

During my first days at the [Coral Project](https://coralproject.net) I experimented with a feature intimately related with the collaborative nature of the Cral initiative. The main idea is to build a tool to create embeddable widgets to embed into media sites giving more insights to the users about their contributions as well as other readers.

Because we want publishers to make their online identity stronger, we don't want the widgets to look like other websites. For that reason, the focus was into mimic our components inside the website's characteristic aesthetic. Having this as a rule I formulated a series of goals for this component series:

  * Mimic with the host website
  * Make the loading of the widgets non-blocking for the rest of the host website
  * Allow to do server-side rendering on the components, reducing the amount of requests needed from the client
  * The downloaded script should be really small
  * Allow the composition of widgets
  * Offer pre-styled components for sites that want that kind of widget

To accomplish the mimicking of the widget style and having the book [Third-Party JavaScript](https://thirdpartyjs.com/) as my main inspiration y found 2 ways to tackle the requirement: The first one is to serve the widget on an HTML document situated in our site, insert an iframe on the host website and using heuristics, retrieve the styles from the host site and apply the rules into the iframe. The second option is simply inserting the widget code intro the host website, automatically obtaining the styles from the context. The latter was my to-go choice.

The main problem with this approach is that **the styles from the host website can break the widget**. The recommendation for this scenario used to be a concept that was kind of prohibited in the Front End world some years ago but now is back. The answer is just to use **inline styles. **I found out that the most used framework nowadays (React) use a technique to compose styles that relies also on inline styles, being perfect for this use case. React also solves server-side rendering and composing widgets as JSX tags, matching two other goals for the widgets.

It seemed a solved problem, except for a big problem. React's download size is 36kb (gzipped + minified), which is a lot for an embed (at least for me). Welcome [Preact](https://developit.github.io/preact/), a framework  with a React compatible API but in 3kb. Preact, despite it's small size, allows us to do virtually everything React does, even [server-side rendering](https://github.com/developit/preact-render-to-string).

Once I've got the widgets working I found out that the difference between the iframe and the \`in-site\` script was only the way they were wrapped. So by writing different wrappers we can offer both the iframe and the injected script experience to the websites. Having both versions working it's easy to see how the iFrame isolation harms the User Experience

![iframe behavior](https://photos.collectednotes.com/photos/110/a8fbb385-e09d-461d-8eff-334d621d1b8a)  

I'll continue working with this tool and blogging improvements. I'd love to know your experiences related to Third-Party applications in the web. You can find me on Twitter as [@impronunciable](https://twitter.com/impronunciable).

Thanks [@](https://twitter.com/sandhya__k) for reviewing this article.

Exploring new tec...

Exploring new techniques on building composable widgets for the web

---
path: hackdash-v2-call-for-devs-and-desginers
tag: HackDash
---

# HackDash v2: Call for devs and desginers

I started [HackDash](https://hackdash.org) about [3 years ago](https://zajdband.com/hackdash-putting-ideas-together-solving-problems/) with the hope of improving the way Hackathon projects are followed, presented and shared. [HackDash](https://hackdash.org) was set up as an [open source](github.com/impronunciable/hackdash) project from the beginning allowing us to get amazing people contributing.

Like most Software, HackDash started as a small project and grew at different rates. We learned a lot about the problem we are attacking and have a lot of new ideas and I feel at this point is hard to make them possible with our current design and codebase.

More than 1100 dashboards and 3800 projects validate that HackDash is solving a problem many Events have about showcasing and persisting projects. It is time to use the gained expertise and build a new HackDash allowing more interesting ways to interact in Hackathons and other kind of events. My proposal is to rebuild [HackDash](https://hackdash.org) getting contributors at day 0.

**Contributing**

I created a [Slack Team](https://hackdash-slack.herokuapp.com/) that I invite you to [join](https://hackdash-slack.herokuapp.com/) in order to discuss everything about the development and key decisions in the making of this new version.

I also created the first 2 GitHub repos for the [API](https://github.com/impronunciable/hackdash-api) and the [Web Client](https://github.com/impronunciable/hackdash-web-client). The only decision made, and an important one is the basic development stack. We&#8217;ll use Go for the main backend API, React + Redux for the Web client and Postgres as the main database. The rest is up to discussion.

See you in [Slack](https://hackdash-slack.herokuapp.com/)!

I started HackDash about 3 years a...

HackDash v2: Call for devs and desginers

---
path: installing-hackdash
tag: HackDash
---

# Installing HackDash

In a [previous post](https://zajdband.com/hackdash) I explained the project  
history, goals and involved people. Shortly saying HackDash is a dashboard where  
you can put your project ideas. It was specially designed for Hackatons but it  
was used for other purposes with really good results.

Since I received lots of mails asking how to install it in different servers  
I decided to make this post explaining how can you install it for yourself.

Furthermore I will explain the steps I usually do in order to install a  
HackDash instance using Heroku and MongoLab (you can use it for free for small  
projects, the free version for both services can hold a HackDash instance with an interesting amount of users and projects).

![Dashboard](https://photos.collectednotes.com/photos/110/bf694ca4-8056-4bde-a15c-17890310ff34) 

## Basic Install

### Installation Prequisites

HackDash is based on top of 2 open-source projects:

  * [Node.js](https://nodejs.org/): You can install it using the install button on the home page. If you are using Linux you can build the sources or use your favorite package manager.
  * [MongoDB](https://www.mongodb.org/downloads): the downloads page will help you with the installation process.

That&#8217;s it. If you can run node.js and MongoDB, you can then install a HackDash instance.

### Download the project and install the dependencies

First, download the project source. You can Download it from [this link](https://github.com/danzajdband/hackdash/archive/master.zip) or clone the repo:

`$ git clone git@github.com:danzajdband/hackdash.git`

Then, inside the project folder, install the dependencies

`$ npm install`

### Project configuration

When this process finish you'll need to config the app. The easiest way is to  
copy the file called `config.json.sample` to `config.json` and  
`keys.json.sample` to `keys.json`.

Open your `config.json` file and set yur config settings.

The `keys.json` file allows different auth providers. You need to fill at least  
one of those to make your users LogIn. I want to provide email + password login  
for the future but now is not available at the moment.

At the moment we allow 4 different auth providers: Twitter, Facebook, Meetup and  
Github. Choose the services you want and fill the file with your credentials.

For example to get Twitter credentials you need to go to  
[Twitter dev](https://dev.twitter.com/) and create a new application.

Keep in mind that the callback url format is `/auth/{provider}/callback` while you generate the provider  
credentials.

### Run the app

To run the app you just need to start MongoDB (the fork option is optional, it  
will run MongoDB in background) and init the node server.

```bash
$ mongod --fork your/log/file
$ node server.js
```

Then open your browser using the address you provide and will have a fully-working HackDash instance.

### Deploy options

This apply to any node.js project but I left it as a good remainder (don't  
forget the HackDash is not more than a [ExpressJS](https://expressjs.com) app) some deployment good advices.

* If you are going to deploy it in a production environment, start the script with the production flag. 
    $ NODE_ENV=production node server.js
    
* It is recommended to use a node script reloader. I recommend  
        [Up](https://github.com/LearnBoost/up) but is up to you.  
        [Forever](https://github.com/nodejitsu/forever) is also widely used.
    
### Make yourself the Dashboard admin
    
If you point your browser to yourdomain.com/install while logged in you'll  
became the admin of the Dashboard. The /install route will redirect to the  
previous page you visited if the admin was selected before.
    
## Installation using Heroku and MongoLab
    
I choose these services because I made some successful installations on this  
environment, and it's pretty easy to work with.
    
### Prequisites
    
* Create a [Heroku](https://heroku.com) account and install the CLI.
    
### Download and Configure
    
The steps (Download and Configure) are the same as the Basic installation, you'll want to  
check it out above. For this type of installation I'll ask you to clone the  
project instead of downloading the source tarball (It will be easy to deploy then). Once you finish configuring your project instance, this are  
the next steps
    
### Create a Procfile
    
Create a file in the root project folder called `Procfile` and write inside
    
```bash
web: node server.js
```    
    
### Create the Heroku application
    
To create a Heroku app, follow this steps
    
```bash
$ heroku login
$ heroku create
```
    
### Add the MongoLab add-on to the app
    
I choose the starter package that is free, you can select [https://addons.heroku.com/mongolab](the%20one%20you%20need).
    
```bash
$ heroku addons:add mongolab:starter
```
    
Then add your MongoLab URI to the config file, the url will override other db config. To get your MongoLab URI perform this command in your terminal

```bash
$ heroku config | grep MONGOLAB_URI
```
    
### Commit the changes, and deploy
    
You need to commit the changes you made to push the files to heroku.
    
```bash
$ git add config.json Procfile
$ git commit -m "Heroku deploy config"
$ git push heroku master
```
    
### Scale the app
    
If you want to use more than one process it&#8217;s cool, you just need to change the 1 in the following command
    
```bash
$ heroku ps:scale web=1
```
    
### Logs
    
If you want to see the logs you can do `$ heroku logs`
    
## Final notes
    
This is the process I usually do for both kind of deployments. If you have any questions, please [contact me](mailto:dan.zajdband@gmail.com). The project is under  
    development, I&#8217;ll be glad to add more people to the list of [awesome  
    contributors](https://github.com/danzajdband/hackdash/contributors). 

In a previous post I explained the project
history, goals and involved pe...

Installing HackDash

---
path: hackdash-putting-ideas-together-solving-problems
tag: HackDash
---

# HackDash: Putting Ideas Together, Solving Problems

We live in a perfect world for open source and free software. Social networks (like twitter or GitHub at some point) connect us and offer a perfect place to work together on fun and useful projects. A cool thing about this is that you don't have to be a Programmer in order to be a key part of a software project.

One big example is [HacksHackersBA](https://hhba.info) where hackers and journalists share ideas.

That was the context of the [HackDash](https://github.com/danzajdband/hackdash) born. [@blejman](https://twitter.com/blejman) had an idea about a Dashboard for HacksHackersBA hackatons, and I was interested in implement that idea. If the open-source community teached me something is: If you want to show that something is useful, just do it.

So we [started building the app](https://github.com/hhba/hackdash/commit/6de06c5b37f6ed44b9849859e6735d6c456d0c8e) hoping we can get to the [Buenos Aires media party](https://mediaparty.hhba.info) with something that doesn't suck.

The Media Party Hackaton day came followed by a grateful surprise. Not only the people liked the [HackDash implementation](https://hackdash.hhba.info) but a couple of coders added the improvement of the HackDash as a Hackaton project.

After the Media Party I realized that this small app is filling a real need. The Dashboard is been used now in several ways. For example by [Node.js Argentina meetup](https://https://dashboard-ar.jit.su/), [HacksHackersBA](https://hackdash.hhba.info), [La Nación DataFest](https://hackdash.datafest.org.ar) and [HackasHackersCL](https://ideas.hackshackers.cl/) (using it as a WordPress theme).

Now we are working on our free time for a new version of the web app and looking for more contributors. Feel free to [contact me](mailto:dan.zajdband@gmail.com).

We live in a pe...

HackDash: Putting Ideas Together, Solving Problems

---
path: express-and-components-presentation-at-node-js-argentina-meetup
tag: express.js, node.js, talks
---

# Express (and Components) Presentation at node.js Argentina Meetup

I had the pleasure to be invited to talk at the 2nd [node.js Argentina meetup](https://www.meetup.com/NodeJS-Argentina/) about [ExpressJS](https://expressjs.com). Because most of the attendees are starting with node the main idea was to introduce some important aspects about this llibrary and the motivations about express.

After a review of the most popular node.js web framework, I introduced [Components](https://github.com/component/component), a brand new package manager for client-side components.

[Here](https://speakerdeck.com/danzajdband/introduccion-a-express-meetup-node-dot-js-argentina) are the slides for the presentation.


Express (and Components) Presentat...

Express (and Components) Presentation at node.js Argentina Meetup

---
path: tuiter-0-1-1
tag: node.js, tuiter
---

# Tuiter 0.1.1

I've been working on [Tuiter](https://github.com/danzajdband/Tuiter). This new release count with two major features: **Automatic Reconnection** and **Gzip compression**.

## Automatic Reconnection

Streaming API connections are incredible powerful and it's very common to keep those connections open all the time. The thing is [Twitter closes valid connections](https://dev.twitter.com/docs/streaming-api/concepts#connecting) very often because of:

  * Duplicate clients logins (earlier connections terminated)
  * Hosebird server restarts (code deploys)
  * Lagging connection terminated (client too slow, or insufficient bandwidth)
  * General Twitter network maintenance (Load balancer restarts, network reconfigurations, other very very rare events)

Following the Twitter Team recommendations I made this simple _Automatic reconnector_ for the library.

#### Gzip compression

Twitter give us the oportunity of reduce the streams to 1/5 size using [Gzip-formatted data](https://dev.twitter.com/docs/streaming-api/concepts#gzip-compression) via `Accept-encoding` header. Using the header and uncompressing with the help of the node.js core module 'zlib' now all API calls are performed with this format.

## State of the art

For the next release I want to improve the performance of the library and the parameters pre-processing. Don't forget to [Fork me on Github!](https://github.com/danzajdband/Tuiter)

I've been working on Tuiter. This new release count with two major features: **Aut...

Tuiter 0.1.1

---
path: tuiter-0-1-0
tag: node.js, tuiter
---

# Tuiter 0.1.0

I’ve been working on this node.js twitter library called [Tuiter](https://github.com/danzajdband/Tuiter) (That’s how Twitter sounds in spanish). I think it’s mature enough to release the first stable version of the module.

## Features

For usage and installation steps you can go to the [README](https://github.com/danzajdband/Tuiter/blob/master/Readme.md). This are the most important features:

  * All API methods available (for Search, REST and Streaming APIs)
  * Params preprocessing: Locations as `{lat: num, long:num }` arrays, allow array params
  * API HTTP Error handling
  * Paging for REST API
  * Custom results for Search API

## Demo

Few weeks ago I deployed a [demo](https://pure-waterfall-1016.herokuapp.com) on Heroku using Tuiter, Google Maps, Socket.IO and ExpressJS. This is just an example of the power of the twitter Streaming API. Can’t wait to see your own demos/apps!

## State of the art

I’m working on automatic reconnection for the Streaming API calls for a next version. Another feature I want to add is the possibility to filter by location names (like “Buenos Aires” or “Asia” instead of bounding boxes).

Stay tuned.