Sirikon's Lab

Dockerizing a mess [Part 1]: Needs & Plan

Nov 11, ’16

Recently I started seeing Docker with more interest than I did the first time I heard about it. I was thinking about how the hell am I going to organize my server —a cheap VPS—, which has multiple services inside:

  • This blog (PHP7, MySQL, Bolt.cm).
  • unfollowers.sirikon.me (Node.js, MongoDB).
  • Multiple static websites (Served with Caddy)
  • Molly (A tool of my own, made for my deployments)
  • Many services that are not really working, yet the dependencies are installed.

All of them are inside a VPS with:

  • 1x 2.4Ghz core
  • 2 GB RAM
  • 10 GB SSD Storage

These series of posts are a summary of the things I learned while dockerizing my own server, dockerizing a total mess.

Needs

My server is a total mess and I have no clue at all of how to reproduce its current setup. I don't know which packages are installed, how are they configured, or if they are enabled or disabled, and I really don't want to know any of that.

What I actually need is...

  • To have an automated environment, being able to reproduce the needed environment for my services with a few config files.
  • To maintain a simple deployment workflow, because I want Continuous Deployment.
  • To not limit myself to specific technologies given by my VPS provider and to be able to move my whole server (and its services) to a new server, just requiring a basic Linux-based system.

After some investigation, I think Docker fits my needs (Will I regret this assumption? Let's see...).

  • Automated Environment? Can reproduce it using just a docker image or a couple of them.
  • Simple deployment workflow? Drop container, Drop image, Load Image, create container, profit.
  • There's just one requirement: Docker.

This seems promising! But I have some questions to resolve yet:

  • Memory & CPU Usage: Well, containers are cool, but containers are a full operating system with every dependency installed insde... for each service. Can my VPS handle that? Need a proof of concept.
  • The examples with Node and other fancy and easy to execute languages are pretty nice, but, what about a PHP website with a CMS that requires some extra packages for Image Processing? Not sure yet...

Plan

First, I'll make a simple Node.js docker image with a simple web service (without database), I'll test how easy and powerfull is to create an image, and also test how many resources are used by this docker container while running.

If everything goes well, I will try the same thing, but with this blog.

Will Docker be the solution for this? The worst error of my life? See you on Part 2 :).

Thank you @Darkatom for helping me with my terrible, terrible grammar.

Ionic para WebApps: Nunca más

Mar 28, ’16

Recientemente en el trabajo decidimos utilizar Ionic Framework para el proyecto de una webapp, la idea era que dicha webapp debía correr en las últimas versiones de los principales navegadores (Lo que incluye IE11 y Edge).

Al recibir las especificaciones vimos que Ionic podía encajar bien en el proyecto, ¿Por qué?

  • Corto tiempo de desarrollo (3 semanas).
  • La webapp, a demás, tenía que empaquetarse con Cordova, el hábitat natural de Ionic.
  • No era una app de funcionalidades fantasiosas y encajaba bien en lo que los componentes de Ionic aportaban.
  • Había utilizado anteriormente la capa de CSS de Ionic para un proyecto anterior y fue muy bien, así que sólo teníamos que enfrentarnos al 'ionic-bundle'.

Comienza el desarrollo, nos remangamos, preparamos las tareas de Gulp para transpilar todo y comenzamos a trabajar.

A mitad del desarrollo vimos que elegir Ionic fue un error, pero no había vuelta atrás.

Todo framework te ata

Y te ata hasta el punto en que el hacer o no un hack como una casa, depende de algo tan nimio como alinear un elemento aquí o allí.

Era habitual el querer poner elementos en ciertos lugares que resultaban absurdamente inaccesibles, es remarcable lo fácil que es encontrarse con elementos alineados a la derecha con position: absolute y right: 0 (o right: 15px para simular el padding).

Ionic viene con un montón de variables que puedes modificar para que el Framework se adapte a tus necesidades generales de color y layout, pero la mitad de las variables que necesité no llegué a encontrarlas.

Los componentes de Ionic están muy bien si no te sales absolutamente nada del tiesto, pero por cómo está pensado Ionic internamente (y las magias que hace, que es otra historia), hace que las ataduras sean todavía más severas, mucho más de lo que te ataría un simple framework de JS o CSS.

El routing

Oh el routing...

Ionic tiene una funcionalidad muy cool que es el poder dividir el histórico de navegación en varios caminos distintos cuando utilizamos los tabs de navegación, de forma que en cada tab tenemos un histórico.

Esto está muy bien cuando permanecemos en Cordova, pero nada bien cuando estamos en una webapp, donde el usuario tiene acceso a un botón 'atrás' de la UI del navegador y la posibilidad de recargar la página, rompiendo completamente el histórico.

Soporte para IE

Recordemos que Ionic (al menos la versión estable a día de hoy, la 1.2.x) está pensado para correr sin problemas en iOS y Android, por lo que utilizan características de CSS ignorando IE, como por ejemplo Flexbox (Está en IE11, pero repleto de bugs), y hay algunos componentes que utilizan flexbox cuando menos te lo esperas (Flexbox para una alineación HORIZONTAL, good job ionic).

Por suerte este fue el menor de nuestros problemas.

Magia negra... que el mundo jamás debería conocer

A tí, querido lector, te propongo un experimento.

Abre un proyecto de Ionic con muchos componentes y compara el cómo los defines en tus plantillas con el DOM resultante. Vas a flipar.

Son innumerables las magias que hace Ionic para muchas cosas que pueden parecernos de lo más estúpido de implementar por nosotros mismos. Nos hemos encontrado con componentes que, al indicarles ciertos atributos toma estos atributos como one-time-bindings por defecto (Que a veces tienen sentido pero muchas otras veces no) y resulta imposible cambiar el valor a posteriori sin manipular el DOM directamente.

Resumiendo

Si en vez de usar Ionic hubieramos hecho la webapp con CSS from scratch y utilizado Angular con sus 3-4 módulos más habituales habríamos obtenido un mejor resultado y más mantenible, ahorrándonos muchos problemas y explicaciones en la documentación.

Está claro que no todos los proyectos son iguales y los hay donde Ionic funciona perfectamente, pero este desde luego no fue uno de esos proyectos.

ECMAScript 6: Symbols

Sep 28, ’15

Hoy nos toca repasar una de las últimas novedades en el mundillo del desarrollo web, los Symbols de ECMAScript 6.

Aprovechando que la especificación está lista es hora de ponerse en serio con lo nuevo que viene, y empezamos con ni más ni menos que la nueva incorporación en la selecta familia de los tipos primitivos (string, number, boolean, null, undefined... y ahora symbol).

¿Qué son los Symbols?

Un symbol es un tipo de dato único e inmutable (no es comparable con ningún otro, y no podemos cambiar su estado una vez creado) utilizado como identificador para propiedades de objetos, podemos entenderlo como un ID o un token. ¿No queda claro? Un ejemplo todo lo puede:

Ejemplo de uso simple de Symbolconst PASSWORD = Symbol("Password");
var user = new Object();
user.name = "Peter";
user[PASSWORD] = "1234";
console.log(JSON.stringify(user))     // { "name": "Peter" }
console.log(user["Password"])         // undefined
console.log(user[Symbol("Password")]) // undefined
console.log(user[PASSWORD])           // "1234"

En el ejemplo podemos ver que primero definimos un nuevo symbol constante llamado PASSWORD, creamos un objeto vacío llamado user, al cual le asignamos un name y un password, pero para el password usamos el symbol creado como clave.

Hasta aquí todo bien, pero cuando hacemos un JSON.stringify (para obtener la representación del objeto en JSON) no hay rastro del password, esto es porque las propiedades de un objeto que usen un symbol como clave serán ignoradas en los JSON.stringify().

Si intentamos acceder al password usando de clave el string "Password" no servirá de nada, lo he puesto para dejar claro que no es lo mismo Symbol("Password") que "Password"... de hecho Symbol("Password") tampoco es igual a Symbol("Password") (recordad, los symbols no son comparables) como podemos ver en el segundo intento.

Es más, en el constructor del Symbol el parámetro "Password" que le pasamos en este caso es opcional, no se usa como identificador, sino como una descripción para ayudar a la depuración.

Este hecho de que los symbols sean completamente únicos obliga a una cosa: si quieres utilizar el symbol (o acceder a la propiedad de la cual el symbol es clave) necesitas sí o sí la referencia del mismo, no puedes generar un symbol equivalente de la nada y utilizarlo como si fueran lo mismo.

Esto nos permite cosas como, por ejemplo, que una librería guarde información dentro de un objeto utilizando symbols privados, de forma que otras funciones externas a la librería no puedan modificar o acceder a esta información y corromper el funcionamiento de la librería.

Extendiendo funcionalidad con Symbols

En ECMAScript 5 algunas funcionalidades del lenguaje estaban incluidas en los objetos aunque no eran expuestas a los desarrolladores (como por ejemplo el funcionamiento de iteradores).

Pero ahora podemos definir dichas funcionalidades para nuestros objetos y hacer que, por ejemplo, un objeto creado por nosotros sea iterable según nuestra propia implementación:

Iterador propio usando Symbol.iterator// Instanciamos un objeto nuevo
var range = new Object();
// Con valores start y end
range.start = 4;
range.end = 7;

// Definimos el iterador usando el Symbol correspondiente
range[Symbol.iterator] = function(){
  var _this = this;
  _this.count = _this.start;
  return {
    // Es preciso que el iterador devuelva la función 'next'...
    next: function(){
      // Y que la cual devuelva un resultado en formato {value: anything, done: bool}
      var result = {value: _this.count};
      if(_this.count <= _this.end){
        result.done = false;
        _this.count++;
      }else{
        result.value = undefined;
        result.done = true;
      }
      return result;
    }
  }
}

// Probamos la iteración
for(var i of range){
  console.log(i); // 4, 5, 6, 7
}

Esta explicación es muy superficial para todo lo que pueden dar de sí los symbols, para aprender más sobre ellos os recomiendo pasaros por su página correspondiente en MDN, a demás de este post y este otro post.

Agur!

Mi experiencia en Gamepolis 2015

Jul 27, ’15

El gran evento del año del videojuego en Málaga, Gamepolis, arrancaba este año su tercera edición prometiendo ser una gran experiencia para todos sus asistentes, ya disfrutaras de los videojuegos en calidad de usuario, desarrollador, empresario o inversor.

Cabe destacar que éste es el primer año que hacen un evento paralelo llamado GameInvest, donde estudios llegados desde varios rincones de España se dan cita para encontrar ese inversor que dará oxígeno a sus proyectos.

Me dispongo a relatar mi experiencia de esta edición que, una vez más, me ha decepcionado enormemente, sentimiento que se acrecienta año tras año. Que sirva esto como crítica constructiva.

NOTA: En este evento tuve la gran fortuna de participar en el desarrollo de uno de los juegos expuestos en el stand de MálagaJam, realizado en 48 h dos semanas antes en el MálagaJam Weekend II y con el que conseguiríamos el premio del público, estoy muy orgulloso de esto y fue una gran experiencia, pero en este post prefiero hablar de la crítica a Gamepolis.

Información previa

Desde unas semanas antes del comienzo del evento, me dispongo a informarme de qué me voy a encontrar allí, para lo que recurro a la página web http://gamepolis.org.

Lo que me encuentro es una página en la que, desde que empecé a verla hasta un día antes del evento, no pararon de cambiar información, añadir detalles insulsos y tratar de rellenar a contrareloj la información de los torneos o las charlas.

Varias funcionalidades de la página web no funcionan correctamente, resulta muy pesada de abrir estando en el propio evento (mi humilde ancho de banda de Pepephone se vió resentido). En general una página web mal hecha, la cual es el primer escaparate de lo que será este festival. Si tuviera un público general más exigente seguro habrían habido más quejas.

Llegada al evento

Pongámonos en situación: viernes 24 de Julio en Málaga, 9:00, el calor aprieta con fuerza en la Costa del Sol.

Llegamos a las puertas del evento y divisamos grandes colas tanto para comprar la entrada diaria como para entrar con la entrada anticipada online. Para empezar la única indicación que hay es el rótulo de "Gamepolis" en una puerta y el de "Gameinvest" en la otra... ambas puertas dan acceso al mismo espacio abierto, ¿Se puede entrar sólo por la que pone Gamepolis, por ambas? Ningún cartel al respecto.

Al acercarme veo que, mientras reina la confusión en la cola, varias personas se ponen delante de la puerta rotulada como "Gameinvest" al ver que se abría ocasionalmente, ¿Qué hacen los cuatro miembros del Staff de Gamepolis que charlaban junto a esta puerta? Nada.

- Disculpad, ¿Se puede entrar por ambas puertas o sólo por la que pone "Gamepolis"?
+ Sólo por la que pone Gamepolis, la otra es para los asistentes del Gameinvest.

Aclarado por la organización vuelvo con mis amigos a la cola, cuando de repente mucha más gente se incorpora frente a la puerta de Gameinvest, a lo que veo que alguien más del Staff sale de ella, me aproximo a éste y le repito la pregunta.

- Disculpa, ¿Se puede entrar al Gamepolis por la puerta que pone "GameInvest"?
+ Sólo si eres prensa.

Dos respuestas distintas a la misma pregunta por la organización, esto no pinta bien.

Siguiendo estas últimas indicaciones, como no soy prensa, vuelvo a la cola de la puerta "Gamepolis". Pasados unos minutos (En torno a las 9:45 ya) alguien de la organización dice que la cola tiene que dividirse en dos, a la izquierda los de entrada de un día y a la derecha los de entrada de tres días, esto provoca el reajuste en la cola de cientos de personas con su correspondiente confusión para los que estaban mucho más atrás y no se enteraron, ya que este miembro del Staff sólo lo comunicó al principio de la fila. Recordemos que estamos con unos 38º al sol.

10:00, el Staff comunica que la entrada de la derecha es para todos aquellos que no sean asistentes normales (prensa, youtubers, jugadores de torneos, etc), cuando ya deberían de estar abriendo.

10:15, un cuarto de hora de retraso al abrir y la organización decide que van a cambiar una vez más las colas, ahora los de la entrada diaria se posicionan donde los de la entrada anticipada online y viceversa, como es normal consiguen abucheos del público.

10:20, finalmente abren las puertas y podemos pasar a un ritmo desesperantemente lento, yo tuve la suerte de coger sitio en el tramo de sombra previo a la puerta, no quiero imaginar el calor del resto mientras avanzaban a paso de tortuga.

Las charlas...

Para mi gusto las charlas en contenido estuvieron bastante bien y cumplieron mis expectativas, quiero destacar las relacionadas con la música en los videojuegos de Machinet Música y Oscar Araujo, la que hablaba sobre el género de terror en cine y videojuegos de la mano de Jose María Villalobos y la de Guillermo G.M. (Deus Ex Machina) sobre la conciencia social en los videojuegos indie (Una pena los problemas técnicos que obligaron a recortarla a más de la mitad).

...y la contaminación en las charlas

Comienza opinión no políticamente correcta y desde mi punto de vista, porque esta es mi página y digo lo que me sale del buffer.

La combinación de los juegos predominantes (para jugarlos allí o con abundante merchandising) presentes en esta edición (Minecraft, Call of Duty, League of Legends...) junto con varios youtubers asistentes al evento y un precio muy asequible, hacen que acuda al evento cierta raza autóctona de estos lares, los niños rata.

Los niños rata son jóvenes de muy temprana edad que aprendieron a abrir Youtube, jugar a Call of Duty o Minecraft muchísimo antes de aprender modales, si añadimos a la fórmula un calor sofocante y una sala de conferencias con un generoso aire acondicionado, ¿Cuál es el pasatiempo del niño rata que no tiene nada que hacer? Ir a dar por saco a las conferencias.

Aplausos a destiempo, gritos, chillidos, sonidos agudos muy molestos desde sus teléfonos móviles, música, risas a carcajadas... todo esto mientras un ponente está explicando su experiencia a un público que escucha con atención, un ponente que probablemente haya preparado esta charla con todas sus ganas e ilusión, pero esto al niño rata le da igual, porque no tiene educación alguna.

Ah, y cómo no, la organización hizo poco al respecto, a pesar de las quejas de todos los ponentes.

Final de opinión no políticamente correcta.

Los stands

Cuando vas a un festival de videojuegos que pretende competir con eventos como la Madrid Games Week y similares, esperas encontrarte contenido exclusivo, único, que sólo allí puedas ver y disfrutar.

Al menos el año pasado había una zona para el videojuego Evolve antes de que éste saliera al mercado, esta vez nada parecido, todos los juegos de compañías grandes allí presentes podían llevar lanzados meses o años.

En cuanto a novedades lo indie salvaba el evento, la presencia de estudios independientes enseñando sus propuestas e iniciativas que promueven el desarrollo de videojuegos como MálagaJam hacían algo más ameno el espacio entre la puerta de entrada y la gran pantalla de los torneos.

No faltan los stands de hardware para videojuegos, como Ozone, Krom, Keep Out y Versus Gamers, que para ellos es una cita obligada (¿Quizás excesiva en proporción al resto?).

El espacio, actividades e instalaciones no cubrían ni mucho menos las necesidades de la masa de gente presente, podías esperar fácilmente cerca de una hora para una partida de 5 minutos.

GameInvest

El 90% de los estudios allí presentes asistieron gracias al GameInvest, para buscar financiación. Prometieron a estos estudios que habría una gran cantidad de inversores para valorar sus proyectos y participar económicamente, estudios que se gastaron el dinero de su bolsillo para venir desde varios rincones de la geografía española, todo para encontrarse una realidad era muy distinta.

En palabras de estudios participantes, sólo había un inversor, cientos de kilómetros para un sólo inversor, un espacio monopolizado por Genera, con unas votaciones amañadas y contabilizadas sin sentido alguno y con una valoración máxima de 10.000€ por la mitad de tu empresa, la decepción de los estudios era más que evidente, de hecho más de la mitad se fueron del evento por el enfado.

Yo si fuera uno de estos estudios no me habría ido, habría aprovechado el stand gratuito y de gran visibilidad en el evento los tres días, pero bueno, supongo que en caliente se toman malas decisiones.

Conclusión

Como decía, un año más Gamepolis consigue decepcionarme sobremanera, con una organización con muchas fallas, demasiados videojuegos muy trillados y faltas de respeto a los ponentes y a cualquiera allí presente.

Bienvenidos a Gamepolis, el circo anual del videojuego.

PD: Si me he dejado algo reseñable, no estás de acuerdo o quieres debatir algo, te invito a escribir en la caja de comentarios o contactarme desde aquí.

Safari iOS: position:fixed y overflow-scrolling:touch

May 07, ’15

Recientemente he trabajado en un proyecto HTML5 con una UI muy compleja, he llegado a dedicar una semana entera a sólo una pantalla de la docena de pantallas con las que cuenta la aplicación.

Mientras me peleaba precisamente con dicha pantalla, me encontré con un extraño problema.

Quería hacer un div con overflow:scroll, al cual para hacer que quedara más fluido en iOS, añadí -webkit-overflow-scrolling:touch. Después necesitaba que uno de los elementos dentro del div con scroll pudiera ser arrastrado fuera de dicho contenedor, así que mediante Javascript le aplico position:fixed cuando es tocado para que pueda salir fuera de su contenedor y a partir de aquí lo muevo con transform:translate3d(...).

El problema es que en Chrome de escritorio y Android Browser funcionaba correctamente... pero no en iOS, en iOS el elemento desaparecía al pulsarlo. Con el inspector descubrí que el elemento estaba bien posicionado, pero estaba oculto ya que había sobresalido de su contenedor con overflow:scroll, pero esto no debería suceder ya que tiene position:fixed!. Por alguna razón cuando un contenedor tiene -webkit-overflow-scrolling:touch ningún elemento hijo puede visualizarse fuera de él.

Resultado: Al final por exigencias de la interfaz y otros problemas de la misma hice que, al pulsar el elemento, lo clonara, lo añadiera como hijo al body y lo animara mientras el original permanecía oculto, de esta forma podía eludir al contenedor con scroll que no me permitía mostrar nada más allá de él. Para afrontar el problema debería bastar con desactivar -webkit-overflow-scrolling:touch cuando sea necesario sacar un elemento fuera del contenedor, aunque si con el elemento fuera necesitáis poder hacer scroll en el contenedor sí tendréis que recurrir a lo que hice yo.

Para comprobar el problema podéis acceder a este test desde Safari en iOS.

UPDATE #1: No me había dado cuenta de que también sucede en Safari de Escritorio, podéis comprobarlo vosotros mismos.

Saludos!

'boycott systemd' o por qué hay tanto idiota en la comunidad GNU/Linux

Sep 03, ’14

Siempre he apoyado a GNU/Linux, el software libre y todo lo que esto conlleva y significa, esta comunidad es un gran rebaño, y como todo rebaño, hay ovejas negras.

Aunque diría que estas ovejas no son negras, si no viejas, dinosaurios tecnológicos que prefieren despotricar contra lo que no les gusta en vez de echar una mano y dar su opinión de buenas para arreglarlo, porque cuando haces algo de X forma que habitualmente se hacía de Y forma, ¿Viene un señor a tratar de entender ese cambio y guiarte con su opinión y experiencia? No, te dice que en sus tiempos todo era mejor y que ahora no sabéis donde tenéis la cabeza los jóvenes que creéis que lo sabéis todo y no sabéis nada que estas tecnologías nuevas no sirven para nada que en C se hace absolutamente todo mejor y más rápido y eres un inútil etc etc etc...

¿Y a qué viene todo esto? A la nueva iniciativa tan productiva de la comunidad GNU/Linux: http://boycottsystemd.org/, en esta tan fabulosa (Y moderna, ojo) página web podemos ver todas las razones por las que no deberíamos usar Systemd para nuestros sistemas, hasta aquí todo bien, somos libres de decir nuestra opinión y muy bien dicha está, de hecho estoy de acuerdo con todas y cada una de las razones planteadas.

El problema es que se dedican a montar todo este jaleo (Que no sólo es la página, foros, IRCs, webs y comunidades varias están que echan humo) en lugar de decir todas estas cosas en los trackers correspondientes para que se apliquen estas mejoras, y así, como una comunidad que somos todos, decidir si se hace de una forma o de otra según qué implementación sea la mejor/peor o más/menos óptima.

En resumidas cuentas en lugar de ayudar con sus conocimientos a que el proyecto avance en buen camino, empezamos a tirar mierda sobre él y a quedarnos sin más con el sistema antiguo ¿Os suena de algo?.

Y a las pruebas me remito:

En el punto 2 de las razones hablan que:

Los archivos controlados por journald utilizan un formato binario muy complejo, y tienen que ser solicitados con journalctl, lo cual hace que los logs de journal sean potencialmente corrompibles por no usar un modelo de transacciones ACID-compliant

Y no sólo esto, si no que se quejan de que la respuesta de los desarrolladores fue ignorar este hecho y dan un enlace al issue para poder comprobar esta respuesta.

Si nos vamos al issue podemos comprobar que efectivamente, la respuesta a esto fué ignorarlo, pero también podemos comprobar (Surprise!) que en el issue no hay ningún mensaje diciendo que esto es una mala idea, y a demás la respuesta fué más larga que un simple 'ignóralo':

La única forma de tratar con las corrupciones en journal, actualmente, es ignorarlas: Cuando se detecta una corrupción en los ficheros, journald lo renombrará a <loquese>.journal~, y journalctl hará todo lo que pueda para tratar de leerlo. Actualmente arreglar las corrupciones del journal es un trabajo duro, y no creo que se vaya a implementar en un futuro próximo

Hay hasta 12 razones por las cuales no usar systemd, os invito a que las leáis ya que, insisto, estoy totalmente de acuerdo con ellas.

El problema es que en vez de echar una mano y ayudar se dedican a montar iniciativas como ésta.

Pongamos que sí que han planteado estos problemas y soluciones pero que han sido completamente ignorados, ¿Son ellos los que mandan en GNU/Linux? ni de coña, si no te gusta no uses la distribución que lo implemente porque hay alternativas (Como Slackware o Gentoo, mencionadas en la página), no hace falta montar tanto jaleo y dar esa mala imagen de comunidad.

Carlos Fernández Llamas

Development Advisor @ Plain Concepts


Prizes

1 Jammer's Certificate Of Honour @ Global Game Jam 2017 Bilbao - Who Let The Waves Out
1 Premio del Público de Gamepolis y MalagaJam 2015 - Luxury Madness
4 Megathon España 2013 - GiftWish
1 Megathon Málaga 2013 - GiftWish

Lectures & Workshops


My CV

cv.sirikon.me