Trabe ya no escribe aquí. Puedes encontrarnos en nuestra publicación en Medium: medium.com/trabe.

4Trabes Historias de una empresa en 100 metros cuadrados

El blog de Trabe Soluciones

Desarrollando con Guard y LiveReload

| | Comentarios

TL;DR

Para utilizar Guard y guard-livereload para recargar automáticamente la ventana de nuestro navegador cuando guardamos un fichero, instala ambos, configura el plugin de LiveReload para tu navegador y listo.

Si quieres más detalles, sigue leyendo ;)

Antes de nada

Aunque todo lo que se comenta en este post es útil sea cual sea la tecnología con la que trabajas, las herramientas que vamos a utilizar son todas del ecosistema Ruby, así que va a ser necesario tener una versión de Ruby instalada y funcionando. Si tu operativo es Linux o Mac OS X ya deberías tenerlo de serie. De todos modos, puedes informarte en Google :)

Bundler

Bundler es una herramienta para gestionar las dependencias de proyectos Ruby. Su instalación es muy sencilla:

1
$ gem install bundler

Para especificar las dependencias de nuestro proyecto crearemos un fichero Gemfile en el que indicaremos las gemas a instalar:

1
2
3
4
source 'http://rubygems.org' # gems source

gem '1st_gem_name' # 1st dependency
gem '2nd_gem_name' # 2nd dependency

Para instalar las gemas listadas en el Gemfile (y todas sus dependencias) bastará con ejecutar un comando:

1
$ bundle

Este mismo comando nos permitirá actualizar las gemas cada vez que cambiemos el Gemfile.

Por último, si alguna gema proporciona ejecutables, para asegurarnos de que todas las dependencias están cargadas, tendremos que ejecutarlos a través de Bundler mediante el comando bundle exec:

1
$ bundle exec some_gem_executable

Guard

Ya sabemos cómo instalar gemas cómodamente usando Bundler. Ahora hablemos de Guard.

Guard es una herramienta Ruby que permite automatizar tareas cuando se detecta algún cambio en el sistema de ficheros. ¿Para qué lo vamos a usar? En este caso para recargar automáticamente la ventana del navegador cuando se detecte un cambio en las plantillas de la vista, las CSS o el JS.

Este sería nuestro Gemfile:

1
2
3
4
source 'http://rubygems.org'

gem 'guard'
gem 'guard-livereload'

Es decir, vamos a instalar Guard y un plugin o guard llamado guard-livereload (como puedes ver en el wiki del proyecto, la lista de guards disponibles es muy extensa). guard-livereload recarga la ventana del navegador cuando detecta cambios en ficheros (más detalles cuando hablemos de LiveReload).

Guard tiene un DSL muy sencillo para describir qué hay que hacer cuando cambia un fichero y qué ficheros hay que “viligar”. Por defecto, Guard leerá estas reglas de un fichero Guardfile. El nuestro tiene esta pinta:

1
2
3
4
guard 'livereload' do
  watch(%r{public/.*}) # matches any file under the public directory
  watch(%r{views/.*})  # matches any file under the views directory
end

Traducido: cada vez que un fichero dentro de los directorios public o views cambie (en este caso el proyecto es una aplicación Sinatra y ahí están los ficheros CSS, JS y HTML/Erb), LiveReload se encargará de refrescar nuestro navegador. Si tienes dos monitores (o uno con el suficiente espacio) puedes decir adiós a Alt+Tab-Ctrl+R o la secuencia de teclas que uses habitualmente: podrás editar tu código y ver los cambios sin moverte del editor. Fuck yeah!

LiveReload

Te estarás preguntando dónde está la magia. Pues aquí: LiveReload, una herramienta que hace precisamente esto que estamos describiendo en este post: recargar la ventana del navegador cuando detecta cambios en los ficheros del proyecto. ¿Y por qué no la usamos directamente? Pues porque como dice en su propio sitio web:

if GUI is not your thing, guard-livereload is the next best choice.

Además, guard-livereload es la única opción para Linux :)

Ya hemos instalado guard-livereload en el paso anterior, así que nos queda instalar la extensión correspondiente en nuestro navegador (aquí LiveReload para Firefox y aquí LiveReload para Chrome).

Poniéndolo todo a funcionar

Suponiendo que estamos usando la configuración por defecto de LiveReload (si no es así puedes configurar el plugin del navegador y configurar las opciones disponibles de guard-livereload de manera acorde), solo nos resta:

  • Activar LiveReload en el navegador, en la pestaña en la que estemos viendo nuestra aplicación en desarrollo (es decir, hacer click en el iconillo de LiveReload, uno que pone “LR”).
  • Lanzar guard mediante el siguiente comando:
1
$ bundle exec guard
  • Trabajar mientras miramos cómo el navegador se actualiza solo cada vez que guardamos un fichero :)

Sesiones Vim

| | Comentarios

Cuando edito código con Vim, normalmente utilizo splits para poder ver al mismo tiempo varios ficheros que me interesan. Por ejemplo, un poco de HTML, un poco de Javascript (o CoffeeScript) y un poco de CSS (o SASS, o LESS): todo lo que necesito para trabajar cómodo (más sobre trabajar cómodo en un próximo post). A veces tengo que parar antes de terminar el trabajo que estoy haciendo y no siempre puedo dejar el ordenador suspendido (es más, a veces aunque lo deje suspendido, Ubuntu se empeña en no volver a encenderlo como debe), así que para evitarme el coñazo de restaurar el estado de mi editor a mano, utilizo el comando mksession de Vim:

1
:mksession my_session_file.vim

Más tarde cuando quiero restaurar esa sesión, puedo hacerlo invocando Vim con la opción ‘-S’:

1
vim -S my_session_file.vim

Y listo, ya tengo el editor como lo había dejado :)

Por cierto, el fichero que describe la sesión no es más que un montón de vimscript en el que se restablece el valor de todas las variables, mappings, etc. tal y como estaban en el momento en el que guardamos la sesión (bueno, esto no exactamente así: lo que restablezca o no dependerá de nuestra configuración. Más detalles en la ayuda).

Plugins

Hay plugins para gestionar las sesiones de una manera menos pedestre. No los he probado, pero supongo que funcionan :). Una búsqueda en Google y ya salen unos cuantos. Y si usas Vundle para gestionar tus plugins (recomendación de @madtrick) aparecen más de 10 plugins relacionados con la gestión de sesiones.

Problemas

Es posible que alguno de los plugins que tengas instalados den problemas a la hora de restaurar la sesión y aparezcan algunos errores. Supongo que no es lo más común, porque yo tengo instalada una buena cantidad de plugins y no tengo problemas, pero ya sabes, si es tu caso: Google.

wsecli: a websocket client in Erlang

| | Comentarios

I’m combining my work at Trabe with doing my end of degree project - someday I’ll post about it. This end of degree project (EOP from now on) uses a nice amount of technologies being Erlang one of them.

A part of the EOP is a WebSocket endpoint built in Erlang (with cowboy). To run some automated test on this endpoint I needed a WebSocket client in Erlang that was conformant to the last WebSocket version, wich now is the RFC6455 for WebSocket version 13. To my dispair I could only find clients (not many) that were built for old versions of the protocol.

So…I had two choices:

  • Skip all the tests wich involved using a client.
  • Build a client wich implements the RFC6455.

So…being me I built it.

The result is wsecli, a WebSocket client writen in Erlang wich implements the aforementioned WebSocket rfc6455. It was a nice toy-project to get a deeper understanding of:

  • Erlang’s bit sintax which kicks asses when having to deal with data at a bit/byte level. Oh, fuck yeah!
  • WebSocket protocol itself.

Using this project as a base I’m now working on wsock, a library to help you build WebSocket clients (like wsecli) and servers in Erlang. That’s for a future post (woo, too may posts piling up).

If you have any doubt or question comment or tweet me at @madtrick.