Show all posts in chronological order.

Basic Git configuration
Published on 2018/06/10 Last updated on 2018/07


If you are a Manjaro Linux user, then you already have Git in your machine.

If you are an Ubuntu user, install it with:

sudo apt install git

You can check it’s working with this:

git --version
# git version 2.18.0

Let’s proceed with some basic setup, so we are able to initialize new projects and make commits.

User and email

Git will use this data to mark any commits you create:

git config --global "Your name goes here"
git config --global ""

Colorful CLI

To have colored output when doing git status and git diff:

git config --global color.ui "auto"

A little critique of Google's Material Design and its associated websites
Published on 2018/05/07 Last updated on 2018/05

I have a couple of opinions to state regarding the spec —which by the way I think is a great design specification— and its accompanying websites:

Guidelines on toggle functionality

I think regarding toggles, you should pick one way to get your point across to the user.
And be consistent about it, do not send mixed signals.

Here is a couple of examples that shows —in my view— incongruent behaviour:

Expansion panels

For expansion panels —or lists, the icon (arrow_drop_up/arrow_drop_down) doesn’t represent the state of the panel, but the intent of the user —what will happen if I press on it?

Components Expansion Panels

By the guidelines examples:

  • When closed, you should show an arrow down, signaling the user that if they press on it, it’ll expand.
  • When opened, you should show an arrow up, signaling the user that pressing on it will close the expanded panel.

Here, the visual cue (the arrow) represents intent, not state.

Elixir and my ISO-8859-1 character encoding problem
Published on 2018/04/25

Being from México, I have been wrestling with character encoding issues for a long time, in several languages…

Now, it’s Elixir’s time.

The problem

When working my way through The little Elixir & OTP guidebook —a highly recommended one— I got stuck at the ID3 parser example program:

defmodule ID3Parser do
  def parse(file_name) do
    case do
      {:ok, mp3} ->
        mp3_byte_size = byte_size(mp3) - 128

        <<_::binary-size(mp3_byte_size), id3_tag::binary>> = mp3

          _rest::binary>> = id3_tag

        IO.puts "#{artist} - #{title} (#{album} #{year})"

      _ ->
        IO.puts "Couldn't open #{file_name}"

Using Clementine I edited the ID3 tags for a file namedsome-song.mp3.
And put Éso as its title.

I wanted to know if the program would handle those just fine. It did not.

Building a JSON API with Phoenix 1.3 and Elixir
Published on 2018/04/06 Last updated on 2018/05

Do you have a Rails background?

Are you tired of looking at outdated or incomplete tutorials on how to build a JSON API using Elixir and Phoenix?

Then, read on my friend!


I have found there are mainly two types of tutorials one should write:

  • Scoped, focused tutorials.
  • Full step-by-step tutorials.

Scoped, focused tutorials, should be used to explain techniques, like this one: Fluid SVGs with Vue.js.

But, full step-by-step tutorials should be used to teach about new tech stacks.

Going from zero to fully working prototype without skipping steps.
With best practices baked-in, presenting the best libreries available for a given task.
I really like tutorials that take this holistic approach.

So, this won’t just be about how to generate a new Phoenix API only app. That’s easy enough, you just need to pass the --no-brunch --no-html to mix

This tutorial is about creating a small, but fully operational JSON API for web applications.

To complement your API, I recommend Vue.js on the frontend: Quickstart guide for a new Vue.js project.

What we’ll do:

  • Create a new API-only Phoenix application —skip HTML and JS stuff.
  • Create a User schema module and hash its password —because storing plain text passwords in the database is just wrong.
  • Create a Users endpoint —so you can get a list of, create or delete users!
  • CORS configuration —so you can use that frontend of yours that runs on another port / domain.
  • Create a Sign in endpoint —using session based authentication through cookies.

If you are interested on doing auth with JWTs, check this other tutorial out.

Quickstart guide for a new Vue.js project
Published on 2018/03/10 Last updated on 2018/08


In the time I have delving into Vue.js I’ve come to really appreciate the framework, and its surrounding libraries.

This opinionated guide details the steps I take to start with a solid foundation for a new Vue.js project.

What particular opinions does it include?
Well, for starters:

CLI tools

  • Package manager: Yarn — Fast, reliable, and secure dependency management.
  • Project generation tool: vue-cli — CLI for rapid Vue.js development.


  • UI component framework: Vuetify — Material Design component framework.
  • Material icons library: Google Material Icons — Beautifully crafted, delightful, and easy to use.
  • Validation library: Vuelidate — Simple, lightweight model-based validation for Vue.js.
  • Data visualization library: D3 — A JavaScript library for manipulating documents based on data.

Utility libraries

  • HTTP client: Axios — Promise based HTTP client for the browser and Node.js.
  • Utility library: Lodash — A modern JavaScript utility library.
  • State management pattern + library: Vuex — Centralized state management for Vue.js.
  • Date library: Moment.js — A lightweight JavaScript date library for parsing, validating, manipulating, and formatting dates.

Template and preprocessor languages

  • HTML template engine: Pug — A robust, elegant, feature rich template engine for Node.js.
  • CSS preprocessor language: Stylus — An expressive, robust, feature-rich CSS language built for Node.js.

I have found that these tools and libraries are performant, intuitive and very easy to work with.

I had a similar stack for Angular that included Angular Material plus some custom component primitives for rendering dynamic forms, data tables and other stuff.

I was really fond of the dynamic forms implementation, it allowed the user to specify highly configurable forms using a simple JSON specification.
The generated forms integrated well with our Rails JSON API backend.

I plan to write a tutorial about doing the same thing but this time with Vue.js and Vuetify, but I digress…

How to install Node.js in Manjaro Linux
Published on 2018/03/10 Last updated on 2018/08

Installation process

Install asdf

Version managers rule in dev environments.
So we will install Node.js using asdf.

Clone the GitHub repository:

git clone ~/.asdf --branch v0.5.0

Add some lines to your .profile and .bashrc files:

echo -e '\n. $HOME/.asdf/' >> ~/.profile
echo -e '\n. $HOME/.asdf/completions/asdf.bash' >> ~/.bashrc

Make changes effective with:

source ~/.profile
exec $SHELL

We add to .profile and not to .bashrc, because it will have the side effect of allowing applications started through dmenu —for i3 users— to have the node command available.

This is because stuff in .profile gets loaded when you login into your account, so anything there will be available to commands run through dmenu or desktop icons.

But, stuff in .bashrc gets loaded everytime you open a terminal —so another solution, would be to just start code from the CLI.

Fluid SVGs with Vue.js
Published on 2018/03/09


I really like going for fluid SVGs when doing data visualization.

Fluid SVGs are the ones that can extend on the horizontal axis as far as the parent allows it.
They preserve their aspect ratio, growing and shrinking accordingly to adjust themselves if their size ever changes.

The trick lies in how you define the <svg> element, specially its viewBox attribute.
Also, you shall not define height or width attributes on it.

Here is a single file component in Vue.js that will behave exactly like that.
Let’s name it src/components/FluidSvg.vue:


    <svg :viewBox="viewBoxString">


export default {
  name: 'FluidSvg',

  data () {
    return {
      svg: {
        width: 1000,
        height: 1000
      rect: {
        x: 100,
        y: 100,
        width: 300,
        height: 300

  computed: {
    viewBoxString () {
      return `0 0 ${this.svg.width} ${this.svg.height}`

svg {
  background-color: antiquewhite;
  border: 2px solid black;

.my-square {
  fill: white;
  stroke: red;
  stroke-width: 2;

How to install Elixir in Manjaro Linux
Published on 2018/03/08 Last updated on 2018/08

Installation process

Install asdf

I really like using version managers to install different coexisting versions for the dev languages that I use.

I’ve been using asdf the extendable version manager, to install Erlang and Elixir with OTP support, and it’s been great.

Clone the GitHub repository:

git clone ~/.asdf --branch v0.5.0

Add some lines to your .profile and .bashrc files:

echo -e '\n. $HOME/.asdf/' >> ~/.profile
echo -e '\n. $HOME/.asdf/completions/asdf.bash' >> ~/.bashrc

Make changes effective with:

source ~/.profile
exec $SHELL

We add to .profile and not to .bashrc, because it will have the side effect of allowing applications started through dmenu —for i3 users— to have the elixir command available.

This is because stuff in .profile gets loaded when you login into your account, so anything there will be available to commands run through dmenu or desktop icons.

But, stuff in .bashrc gets loaded everytime you open a terminal —so another solution, would be to just start code from the CLI.

How to install PostgreSQL in Manjaro Linux
Published on 2018/03/08

Installation process

Setting up PostgreSQL in Manjaro Linux is very easy.

Just follow these steps and you’ll have a working installation in no time.

Install the postgresql package:

sudo pacman -S postgresql

Switch to the postgres user account and initialize the database cluster:

sudo su postgres -l # or sudo -u postgres -i
initdb --locale $LANG -E UTF8 -D '/var/lib/postgres/data/'

You need to know about i3
Published on 2018/02/27

Power users rejoice

If you are a power user, you’ll be happy to know that something like i3 (an improved tiling window manager) exists —I know I was, very.

These are the three videos with which I initiated myself into this new world of productivity.
Of course, it won’t be too easy at the start (or, it might be, depending on your mental model and how you go about things).

But worry not, if i3 is meant for you, it’ll stay with you —or you’ll stay with it— for a long time to come.

Just have a look at least at the first video, you just need to watch the first two minutes of it to see if it’s something you’ll love for life or not. Dare to have a look? I double dog dare you!

Dynamic and async components made easy with Vue.js
Published on 2018/02/11

I think this post will be most useful to advanced Angular/AngularJS developers that are still pondering what’s all the fuss about Vue.js —just like I was just a few weeks ago.

Nonetheless, I have included step-by-step instructions that will help beginners too.

So, in this —opinionated— tutorial, I’m hoping you’ll:

  • Realize just how ludicrously easy is to setup on-demand / lazy-load for Vue.js components.
  • Show you how to combine dynamic components + async loading for maximum effect!

Use cases

These are the use cases we will review in this tutorial:

  • The app router should only load code for sections of the app you actually visit.
  • You should be able to dynamically add/remove/swap components on a page.
  • Inside a section, the app should only load code for components that are actually rendered.
    A component might be declared an available for rendering, but its code should only load if you display it.

How to setup automatic Hugo website generation and deployment with Git
Published on 2018/01/28

Let’s say that you have tried Hugo, you liked it, and made a website with it.
Now you are ready to deploy that website for the whole world to see.

Wouldn’t it be great if you could just do:

git add .
git commit -m "Updated blog content"
git push

And be done with it?

Well, if that sounds like your kind of thing; something you’d like to have…
Then read on my friend!


What do you need for this tutorial?

  • A public server somewhere. If you don’t have one, you can get a VPS (Virtual Private Server) from Linode, DigitalOcean or similar providers.
  • An account with access to sudo.
  • You have git available, from this guide.
  • You use Gitolite to manage your repositories, from this guide.
  • A configured webserver —I recommend looking into NGINX, since it’s super easy to setup in Ubuntu.

Let’s assume:

  1. A local ~/.ssh/config file with this content:

    Host git-server
      # This is the IP for your VPS
      Port 22
      # This is the remote user
      User yolo
    Host web-server
      # This is the IP for your other VPS
      Port 22
      # This is the remote user
      User webcustomer

How to setup Full Disk Encryption on a secondary HDD in Linux
Published on 2018/01/25 Last updated on 2018/06


Let’s say that you get a brand new 2TB/4TB/8TB/XXTB HDD, and you want to use it as a safe backup device.
That means you want to encrypt everything you put in it.

So, assuming you’ve already installed the drive on your computer; let’s prepare it for FDE (Full Disk Encryption).

Correctly identify the drive name

Open a terminal and type:

sudo fdisk -l

How to setup your own private Git repositories with Gitolite
Published on 2018/01/24 Last updated on 2018/01

Say you want to manage your own private Git repositories for a Project/Team/Company.

What are your options?
GitHub is very convenient, as is Bitbucket, or even your own installation of GitLab.

But, there is a place for simpler ways to administer your own private Git repositories, and keep your sources totally under your control.
—You lil’ control freak. ;)

Gitolite is small, simple and powerful.

User access control and repo creation are dead easy and just a git commit & git push away!

This guide will show you how to setup your own private Git infrastructure with Gitolite for easy repository and user management.

Read on!


What do you need for this tutorial?

  • A public server somewhere. If you don’t have one, you can get a VPS (Virtual Private Server) from Linode, DigitalOcean or similar providers.
  • An account with access to sudo.

Let’s assume a local ~/.ssh/config file with this content:

Host git-server
  # This is the IP for your VPS
  Port 22
  # This is the remote user
  User yolo


First, let’s login on the remote machine; the one you want to setup Gitolite on.
Open a terminal and SSH into it:

ssh git-server

How to setup Manjaro Linux i3 on a Macbook Pro
Published on 2018/01/09 Last updated on 2018/08


I have laid my eyes on a new distribution that bakes in i3 with it: Manjaro Linux i3 Community Edition.

It has some rough edges, but I’m pretty sure they’ll be ironed out rather sooner than later, given Manjaro’s rise in popularity.

What I can say is that Manjaro Linux feels nimble and agile, meanwhile Ubuntu starts to feel bloated and sluggish.

So, what follows is a very opinionated guide for installing Manjaro Linux on a MacBook Pro from Mid 2014, and leave it in a perfect state for desktop and software development usage —kind of what I currently have in Ubuntu.

Still on the quest for a perfect OS. Let’s start!


  • Manjaro Linux all versions: here.
  • Manjaro Linux i3: here.

Preparing the live USB

You need another Linux machine, or a way to make a Manjaro Linux live USB stick.

Once you have downloaded the .iso image you can follow these instructions to prepare the USB drive.

Booting from USB

Turn off your machine, insert the USB drive, then turn it on, and as you hear the distinctive sound when it starts, press and hold the alt key until a boot menu appears. Select the one that says EFI.

You’ll be presented with a preconfiguration screen. Select your timezone, keyboard distribution, language, free drivers, then: Boot: manjaro.x86…

How to create an Ubuntu live USB using the CLI
Published on 2018/01/02

If the Startup Disk Creator app is not working for you or takes forever to finish, or always present an error at the end… Why don’t you try deploying the Ubuntu ISO from the CLI?

It’s super easy, let’s see how.

Be sure to have an .iso file ready, or download the latest Ubuntu image from here.

Find the right letter for your device

Insert the stick into a port and get a list of connected devices with this:

sudo fdisk -l

How to setup Ubuntu on a MacBook Pro
Published on 2018/01/02 Last updated on 2018/06

These instructions were tested on a MacBook Pro Mid 2014.
Should —probably— work just fine on other MacBooks.

If you install Ubuntu on a MacBook, you’ll soon find a small —but highly irritating— set of behaviours:

  • The Alt and Cmd keys are swapped out (using a PC keyboard as a reference).
  • The function keys are swapped out with the multimedia keys.
  • Cannot easily copy & paste on the CLI with the laptop’s keyboard.
  • The trackpad behaves erratically.
  • You can hardly read anything on the screen or…
  • Maybe the UI size is too big and you’d want to adjust it to your liking.

If this sounds like your kind of problems, then keep reading, solutions are ahead.
Right now, the only issue without a solution is the integrated webcam. It does not work.

Keyboard issues

Swap Cmd and Alt keys

If you’d like your Alt key where it usually is on every PC —except Macs. With immediate effect, but temporary:

echo 1 | sudo tee /sys/module/hid_apple/parameters/swap_opt_cmd

New Year's blog reboot
Published on 2018/01/01 Last updated on 2018/01

A great power couple

Towards the end of 2017 I decided that I had to improve/update my tech stack. So, while doing the obliged tech review rounds, I found some jewels, a powerful couple:

  • Hugo as a tool for static site generation.
  • Bulma as a minimal CSS framework.

Cómo instalar Java en Ubuntu
Published on 2014/08/26 Last updated on 2018/05

Open source Java

Java 8

Para instalar el runtime y el kit de desarrollo de Java, teclea en la terminal:

sudo apt install openjdk-8-jdk openjdk-8-jre

Por seguridad se recomienda que no instales el plugin de Java para tu navegador.

Cómo instalar Git en Ubuntu
Published on 2013/12/31 Last updated on 2018/06

El proceso de instalación es muy sencillo:

sudo apt install git

Para checar la instalación prueba con esto:

git --version

Puesta a punto de Ubuntu Desktop
Published on 2013/12/31 Last updated on 2018/06


Al finalizar esta guía tendrás un Ubuntu configurado y listo para hacer fullstack development.

Desde una terminal:

echo "" >> ~/.bashrc # leave a space before custom configuration
echo "export EDITOR=nano" >> ~/.bashrc # set nano as the default editor
echo "set constantshow" >> ~/.nanorc # show line number in nano
echo "alias ll='ls -lhF'" >> ~/.bashrc # convenient list command
echo "alias la='ls -lahF'" >> ~/.bashrc # same as before, but show hidden files

Activa el firewall:

sudo ufw enable # review status with: sudo ufw status
sudo ufw allow OpenSSH

Cómo instalar Node.js en Ubuntu
Published on 2013/02/19 Last updated on 2018/08


  • Git para clonar el repositorio de nvm.

Proceso de instalación

Primero, instala las dependencias en Ubuntu:

sudo apt install python g++ make
sudo apt update
sudo apt build-dep nodejs

Si te aparece un mensaje que dice:

Leyendo lista de paquetes... Hecho
E: Debe poner algunos URIs fuente («source») en su sources.list

Cómo instalar Google Chrome en Ubuntu
Published on 2013/02/06 Last updated on 2017/12

Selecciona aquí la versión que vayas a instalar: Chrome Release Channels.

Desde una terminal, ingresa al directorio donde está el archivo ~/Descargas y teclea:

sudo dpkg -i google-chrome-stable_current_amd64.deb

Cómo instalar Ruby en Ubuntu
Published on 2012/10/07 Last updated on 2018/06

Vamos a instalar Ruby usando el manejador de versiones rbenv.


  • Instala git siguiendo esta guía.
  • Instala algunas dependencias (RVM las lista como requisitos para Ubuntu):

    sudo apt install bison libreadline-dev libyaml-dev libsqlite3-dev sqlite3 \
    libxml2-dev libxslt-dev autoconf texinfo libncurses-dev automake libssl-dev \
    build-essential libffi-dev libbz2-dev libmagickwand-dev

Usuario para despliegue

Si vas a instalar Ruby para desplegar aplicaciones en un VPS (Virtual Private Server) —tipo Linode, es recomendable crear un usuario específico para este propósito.

sudo adduser deployer
sudo su deployer -l

Si lo que quieres es una instalación local, sáltate este paso y procede a clonar el repositorio directamente en tu $HOME.

Instala rbenv

git clone git:// ~/.rbenv

Cómo descomprimir archivos .rar en Ubuntu
Published on 2012/08/30 Last updated on 2017/12

Teclea en la terminal:

sudo apt install unrar

Cómo instalar PostgreSQL en Ubuntu
Published on 2012/08/30 Last updated on 2018/05


Escribe en la terminal:

sudo apt install postgresql postgresql-client \
postgresql-contrib libpq-dev

Esto instala el cliente y servidor de la base de datos y algunos scripts de utilería.
El paquete libpq-dev nos permitirá compilar la gema para PostgreSQL.

Confirma que la instalación terminó adecuadamente:

psql --version

Debes ver algo como:

psql (PostgreSQL) 10.3 (Ubuntu 10.3-1)

Cómo crear un usuario para desarrollo local

Para crear un usuario llamado pepito:

sudo su postgres -c psql
CREATE USER pepito WITH PASSWORD 'eldeloscuentos123';

Cómo entrar a la configuración de los modems de Telmex
Published on 2010/01/20 Last updated on 2017/12

Para entrar a la página de configuración, abre tu navegador y visita la siguiente URL:

Datos de acceso

  • Nombre de usuario: TELMEX
  • Contraseña: (esta es tu clave WPA que viene en una etiqueta sobre el aparato)

El famoso licuado verde
Published on 2009/03/10 Last updated on 2017/12

La receta

  • 1 nopal.
  • 1 apio (1 tallo).
  • 1 rebanada de piña.
  • 1 ramita de perejil.
  • 1 xoconostle pelado (este lo consiguen en los tianguis o mercados, parece una tuna pero no es dulce).
  • Jugo de toronja para preparar un litro en total.

Cómo instalar LAMP en Ubuntu
Published on 2008/05/01 Last updated on 2017/12

  • NOTA
    Tiene muchísimo tiempo que no instalo una LAMP stack. Estas son mis notas de cuando lo hacía hace ya varios años.


LAMP: Linux Apache MySQL PHP


Abre una terminal y escribe:

sudo apt-get install apache2

Cómo descomprimir archivos .tar.bz2, .tar.gzip y .tar.gz en Ubuntu
Published on 2008/03/12 Last updated on 2017/12


Ingresa desde la terminal al directorio donde está el archivo a descomprimir.
Intenta con cd ~/Descargas, después ingresa:

tar -xjvf example.tar.bz2

.tar.gzip o .tar.gz

tar -xzvf example1.tar.gzip
tar -xzvf example2.tar.gz