necudeco

Como instalar GIT FLOW ?

GIT Flow es una herramienta que te permite crear un flujo de trabajo predefinido para tus proyectos. Es decir, crea un orden en la forma de hacer las cosas con GIT.

A continuaciĆ³n vamos a revisar las diferentes formas de instalacion en los diferentes sistemas operativos. Spoiler Alert, Windows sera el mas complicado.

Instalar GIT Flow en Linux

apt install git-flow

Instalar GIT Flow en Mac

brew install git-flow

Instalar GIT Flow en Windows

Aca es cuando la cosa ya no es como lo pintan en la tele šŸ™

  • Una vez ahi seleccionamos el instalable ( EXE ) que corresponda a nuestra arquitectura. Spoiler Alert ( probablemente sea 64-bit )
  • Nos pedira aceptar la licencia del programa, en este caso GPL. Obviamente aceptamos
  • Nos pide seleccionar la carpeta de instalaciĆ³n. Dejamos opciones por defecto.
  • Nos pide seleccionar que componentens instalar. Aseguremonos que la opcion de Git Bash este marcada
  • Nos pide seleccionar el nombre del menu de Inicio. Dejamos valor por defecto.
  • Nos pide seleccionar el editor que usara GIT ( Git requiere usar un editor de texto cuando trabaja, yo personalmente uso nano … pero cualquier opcion es valida )
  • Nos pide seleccionar la variable PATH.

Estas 3 opciones significan:

  • Use Git from Git Bash only
    Quiere decir que solo podras usar los comandos de Git desde un aplicativo especial que ya viene instalado. Esta opcion es mƔs que suficiente para el 90% de los casos
  • Git from the commando line and also from 3rd party software
    Si necesitas usar GIT con otros aplicativos en tu PC, pues esta opcion es la mas conveniente.
  • Use GIT and optional Unix tools from the Command Prompt
    Esta opcion te instala ciertos comandos de Windows en tu Linux, lo malo es que “sobreescribe” esos comandos que ya tenias en windows. NO lo uses sino estas seguro.

  • Nos pide seleccionar el cliente SSH. Por defecto usamos OpenSSH
  • Nos pide definir como sera el SALTO DE LINEA.

Cuando tu presionas ENTER en tu editor de texto en Windows se imprimen los caracteres ocultos \n\r

En cambio en Linux, solo se imprime el caracter \n

  • Nos pide que emulador de terminal usaremos. Seleccionamos MinTTY por defecto.
  • Y listo, instalaciĆ³n finalizada
cortar video linux

Como cortar un video en Linux

Existen diferentes programas para cortar un video en Linux. Sin embargo, la forma mas sencilla de hacerlo es desde la terminal.

Casi todo el mundo tiene instalado el paquete ffmpeg en Linux. Este paquete se encarga de reproducir correctamente los videos, asi que ya no necesitares instalar nada mas.

Por si las dudas, se instala asi:

sudo apt install ffmpeg

Ahora bien para proceder a cortar el archivo debemos abrir el terminal de comandos, preferentemente en la carpeta donde esta el archivo de video. Y ejecutamos el comando

ffmpeg -i 'Partida DOTA Axe.mkv'  -ss 00:10:20  -t 00:00:45  -c copy 'Partida DOTA Axe - 5 Kills.mkv'

En el comando que acabamos de ejecutar, hemos enviado 4 parametros:

  • -i ‘Partida DOTA Axe.mkv’, este parametro me permite indicar el video original el cual voy a proceder a cortar.
  • -ss 00:10:20, el parametro -ss me permite indicar el tiempo de inicio del corte. En este caso le estoy diciendo que la porcion de video que me interesa empieza en el minuto 10 y 20 segundos.
  • -t 00:00:45, con el parametro -t estamos indicando que solo nos interesa los siguientes 45 segundos
  • -c copy ‘Partida DOTA Axe – 5 Kills.,mkv’, y por ultimo indicamos el nombre del archivo donde se guardara el resultado.

Y listo, en breves segundos tienes un nuevo video con la seccion deseada y sin haber instalado pesadas herramientas para realizar el trabajo.

Como agregar un icono en un html select options

Para agregar un icono fontawesome en un html select vamos a seguir los siguientes pasos:

Vincular fontawesome a nuesta pagina web

Aunque este paso podria parecer algo obvio, no esta demas indicarlo. Vamos a incluir la hoja de estilos de fontawesome al header de nuestro pagina.

<link rel='stylesheet' type='text/css' media='screen' href='fontawesome-free/css/all.min.css'>

Agregar la clase de fontawesome

Debemos agregar la clase fa tanto al select como a los options. Esto nos permitira tener acceso a la fuente de FontAwesome

<select class="form-control fa">
      <option class="fa"> Email </option>
      <option class="fa"> Camara </option>
      <option class="fa"> Direccion </option>
</select>

Agregamos el codigo UNICODE del icono

Ahora debemos ir a la pagina de Fontawesome y buscar el codigo UNICODE de los iconos que deseamos copiar.

En este caso, el codigo UNICODE es f2bb

Ahora agregamos el codigo en el texto del option, agregando &#xf2bb; los caracteres &#x adelante del codigo y terminandolo con un ;.

<select class="form-control fa">
      <option class="fa"> &#xf0e0; Email </option>
      <option class="fa"> &#xf083; Camara </option>
      <option class="fa"> &#xf2bb; Direccion </option>
</select>

Espero que te sirva, si necesitas ayuda o quieres mejorar el resultado no dudes en contactarme.

NGINX – Politicas de Cache – CSS JS y Media Elements

Āæ Como mejorar el posicionamiento web en Google mejorando la velocidad de carga a traves de las Politicas de Cache de NGINX segun las recomendaciones de Google PageSpeed Insights ?

Un sitio web ( blog, ecommerce o pagina institucional ) estan compuesto por un archivo HTML, varios archivos CSS, varios archivos JS y varios archivos multimedia como imagenes.

Una pagina web estandar puede tener 100 de estos archivos, y cada vez que es visitada deben descargarse estos 100 elementos. Sin embargo, hay elementos que rara vez cambian, como las imagenes, los archivos CSS y JS.

Para evitar descargar en cada visita todos los archivos que componen una pagina existen las politicas de Cache.

Una de las variables que considera google para establecer el ranking de las paginas web, es su velocidad de carga. Las politicas de Cache permiten mejorar esa velocidad de carga y por tanto mejorar el posicionamiento del sitio en google. Puedes evaluar la velocidad de carga de tu sitio web en Google PageSpeed Insights

Politicas de Cache

Las politicas de cache establecen que archivos se van a guardar en el navegador del cliente y durante cuanto tiempo. Asi pues, si vuelves a visitar la pagina esos archivos que se han guardado ya no se vuelven a descargar.

Esto agiliza la carga del sitio web y permite que el servidor atienda de forma mas rapida a otros usuarios.

Implementacion de Politicas de Cache en NGINX

NGINX es un servidor web, existen muchos otros, pero para efectos de este tutorial vamos a centrarnos en NGINX.

Cada sitio web en NGINX se configura como un server.

server {
  server_name www.midominio.com;
  root /var/www/html/midominio;

}

En el ejemplo, hemos definido un “server” para que atienda todas las peticiones a www.midominio.com y que se encuentra alojado en la carpeta /var/www/html/midominio

Ahora dentro de esa definicion basica de “server” vamos a aƱadir como deben tratar NGINX a los archivos de tipo CSS, por ejemplo.

location ~* \.(?:css)$ {
	  expires 1M;
	  add_header Cache-Control "public";
	}

En este ejemplo indicamos con una expresion regular que cualquier archivo cuyo nombre termine en “.css” se le aplicaran las reglas delimitadas por las { }.

La sentencia expires 1M, nos indica que el contenido de ese archivo se guardara en el navegador durante 1 mes.

La sentencia add_header, nos indica que el cache guardado es de acceso publico para cualquiera que acceda a la pagina desde ese navegador.

Google Analytics: Como evitar Avg Time 0 en nuestras estadisticas

Avg Time, es un indicador de Google Analytics que muestra cuanto tiempo estuvo un usuario en nuestra pagina.

Google muestra tu sitio web primero que otros a los usuarios del buscador, entre otras cosas por el tiempo promedio que pasan los usuarios en tu sitio web.

Avg Time

En Google Analytics, Avg Time indica cuando tiempo estuvo el usuario en nuestra pagina. Sin embargo, para calcularlo GA utiliza el tiempo de carga del siguiente click. Eso quiere decir que si nuestro usuario entro en nuestro sitio y visito un enlace externo o cierra la pestaƱa o ingresa otra URL, Google no sabra cuanto tiempo estuvo en nuestro site.

Una soluciĆ³n

Podemos evitar pasar desapercibidos para google enviando una seƱal a google que le indique que todavia estamos en la pagina o que estamos saliendo del site. Por ejemplo:

window.onbeforeunload = function(e) { ga('send', 'pageview', 'exit');  }; 

Con este codigo, cuando el usuario se retira de la pagina actual ( ya sea porque cerro el navegador, hizo click en un enlace externo o cambio la url ) se le indica a Google Analytics que hemos cargado una pagina virtual llamada exit, y asi GA puede calcular el tiempo exacto de nuestra permanencia en nuestro sitio.

Āæ Como hacerlo en WordPress ?

Si estas usando el plugin GA Google Analytics, puedes ir a la seccion de configuracion y buscar la opcion custom code y copiar el siguiente codigo.

<script>
   window.onbeforeunload = function(e) { ga('send', 'pageview', 'exit');  }; 
</script>

Āæ Tienes algun problema para implementarlo en tu sitio web o necesitas ayuda ? Dejame un comentario y con gusto te ayudare ! šŸ˜‰

Javascript: ĀæComo ordenar Arrays?

Como ordenar (sorting) elementos de un array usando javascript.

El metodo sort de Arrays permite la comparaciĆ³n de los diferentes elementos de un arrays, incluyendo objetos.

let alumnos = ['Carlos Gonzales', 'Jose Sifuentes', 'Cinthia Rodriguez'];

alumnos.sort();

Por defecto el metodo sort ordena el array convirtiendo cada elemento del array en string y comparandolo con los demas.

En el caso de elementos mas complejos se le puede proporcionar a la funcion sort una funcion de comparacion pudiendo acceder asi a propiedades de los objetos para realizar la comparacion.

let alumnos = [ { nombre: 'Carlos Gonzales', promedio: 11 }, { nombre: 'Jose Sifuentes', promedio: 15 }, { nombre: 'Cinthia Rodriguez', promedio: 8} ];

alumnos.sort( (a,b) => a.promedio < b.promedio );

En este ejemplo, la funcion de comparacion recibe 2 parametros ( siempre recibira dos parametros que representa dos elementos del array ) y compara su propiedad promedio para ordenar los elementos.

Instalar PGAdmin con Docker

PGAdmin es una herramienta de Interfaz grafica para administracion de nuestros servidores de base de datos postgres. En este articulo, vamos a aƱadirlo a nuestro archivo docker-compose para poder administrar nuestra base de datos remotamente.

Punto de inicio

Vamos a partir de una situacion donde ya tenemos nuetro docker corriendo y ejecutando postgresql. Para lo cual puedes guiarte de este otro articulo: Instalando Postgres en Docker

Agregando el servicio de pgAdmin

Para instalar pgadmin vamos a editar nuestro archivo docker-compose.yml y aƱadir un nuevo servicio

version: '2'

services:

  db:
    image: postgres
    user: postgres
    environment:
      POSTGRES_PASSWORD: 123456
      POSTGRES_USER: postgres

  pgadmin:
    image: dpage/pgadmin4
    ports:
      - 8080:80
    depends_on:
      - db
    links:
      - db:db
    environment:
      PGADMIN_DEFAULT_EMAIL: admin
      PGADMIN_DEFAULT_PASSWORD: 123456

Como pueden ver en el codigo anterior, hemos aƱadido un servicio pgadmin, el cual se crea a partir de la imagen docker dpage/pgadmin4. Este nuevo servicio se ejecuta en el puerto localhost:8080.

Y listo ya tenemos pgadmin instalado šŸ˜‰

Si tienes alguna duda, dejamelo en los comentarios y juntos lo resolveremos.Ā šŸ˜€

Instalar Postgres en Docker

Unos pasos sencillos para instalar en tu computadora local el servidor de base datos postgres, usando Docker. Āæ Porque con Docker ? Porque al usar docker, no importa lo que haga nunca voy a malograr mi sistema principal.

Instalando docker ( Pasos Previos )

En caso no tuvieras instalado docker, en Ubuntu lo puedes hacer ejecutando este comando:

apt install docker-compose

Instalando Postgres

Nuestro primer paso sera crear una carpeta donde residira el proyecto. Esto es asi, porque Docker Compose buscara en la carpeta un archivo YML con las instrucciones para ejecutar y configurar el servicio de postgres.

mkdir postgres

Luego creamos el archivo docker-compose.yml con el siguiente contenido:

version: '2'

services:

  db:
    image: postgres
    user: postgres
    environment:
      POSTGRES_PASSWORD: 
      POSTGRES_USER: postgres

En este archivo ( docker-compose.yml) le estamos indicando que se creara un servicio llamado db, el cual ejecutar la ultima version de postgres.

Para iniciar el servicio lo hacemos con la sentencia: docker-compose up -d

Para detener el servicio: docker-compose stop

Conectarnos a la base de datos

Cuando el servicio db esta activo, es decir despues de haber ejecutado docker-compose up -d podemos conectarnos a la linea de comando de la base de datos usando el comando:

docker-compose exec db psql

Si tienes alguna duda, dejamelo en los comentarios y juntos lo resolveremos. šŸ˜€

Como apagar los monitores cuando se activa el screensaver en GNOME

En mi configuracion de Workspace yo tengo 3 monitores ( esperemos muy pronto 4 ) y como tengo prendida la PC todo el dia … muchas veces los monitores se quedan prendidos TODO EL DIA. Ademas de esto, cuando finalmente se apagan los monitores mi perro roza el escritorio, yo llego a buscar un papel y se mueve ligeramente el mouse y listo monitores prendidos y que se niegan a apagarse.

Ya habiamos tocado este tema en una entrada anterior Como apagar los monitores cuando se activa el screensaver en KDE, pero yo no soy mucho de usar KDE.Ā  En ese articulo vimos, que para apagar los monitores solo teniamos que ejecutar el comando

xset dpms force off

El problema era ejecutarlos en el momento adecuado ( al bloquear la session, posiblemente con CTRL + L o por inactividad ) sin embargo, recientemente encontre un codigo que me avisa cuando el screensaver se activa y cuando se apaga. Entonces programe un script para que los monitores se apaguen automaticamente, xq eso de estar ejecutando un comando manualmente cuando me iba a retirar de la PC como que era mucho estress para mi.

MOUSEID=`xinput list | grep Mouse | egrep -o “id=([0-9]{1,2})” | egrep -o “[0-9]{1,2}”`

dbus-monitor –session “type=’signal’,interface=’org.gnome.ScreenSaver'” |
while read x; do
case “$x” in
*”boolean true”*)
echo SCREEN_LOCKED + `date`
sleep 2s
xset dpms force off
xinput –disable $MOUSEID
;;
*”boolean false”*)
echo SCREEN_UNLOCKED + `date`
xinput –enable $MOUSEID
;;
esac
done

Ustedes solo deben guardar este script en su $HOME y ejecutarlo al iniciar session. Por ejemplo, aƱadiendolo al archivo $HOME/.profile

Ahora paso a explicar un poco mas a detalle el script para todos los interesados:

MOUSEID=`xinput list | grep Mouse | egrep -o “id=([0-9]{1,2})” | egrep -o “[0-9]{1,2}”`

Esta linea me obtiene el ID del dispositivo mouse en mi sistema. Este id es diferente en cada computadora

dbus-monitor –session “type=’signal’,interface=’org.gnome.ScreenSaver'” |

Esta linea se encarga es escuchar permanentemente el BUS de log del sistema y me avisa cuando sucede un evento de org.gnome.ScreenSaver

Este solo puede ser de dos tipos:

  • TRUE cuando se activo el screensaver
  • FALSE cuando se desactivo el screensaver

 

Cuando se activa el screensaver, le indico al sistema que espere 2 segundos ( sino lo hago a veces la pantalla no se apaga šŸ™ ) y luego le indico a las pantallas que se apaguen. E inmediatamente deshabilito el mouse. Esto, porque basta que me pare bruscamente del escritorio para que se mueva el mouse y por ende se activen las pantallas.

Cuando se desactiva el screensaver, le indico al sistema que me reactive el mouse

Como instalar wordpress usando Docker

Si quieres hacer una instalaciĆ³n local de wordpress, te mostrare los pasos a seguir usando docker.

NOTA: La instalaciĆ³n de Docker esta pensada para Ubuntu pero pueden replicarse en windows Mac u otra distribucion Linux.

Instalar Docker

Descubrir docker es algo que te cambia la vida. Finalmente puedes hacer instalaciones de sistemas de forma rapida. Ya no tienes miedo de desconfigurar tu maquina principal. Y puedes hacer cuantas pruebas requieras en la configuracion de los servidores. Sin embargo, aun debes crear las imagenes y lanzar los containers de forma manual. Montar volumenes, configurar las redes internas, etc. Para evitar ese trabajo manual yo recomiendo usar docker-compose.

Docker-compose es una herramienta que intrepreta un archivo de texto docker-compose.yml y ejecuta por ti todos los comandos docker correspondientes.

En este caso, para instalar Docker, Docker-compose y todas sus dependencias necesarias ejecutamos el comando:

sudo apt install docker-compose

Una vez terminado, estamos listos para instalar nuestro wordpress.

Instalar WordPress

Creamos una carpeta donde residira el proyecto:

mkdir proyecto-wordpress

En dicha carpeta creamos un archivo docker-compose.yml:

version: ‘2’
services:
web:
image: wordpress
volumes:
– ./wp-content/:/var/www/html/wp-content/
ports:
– 80: 80
depends_on:
– db
links:
– db : db

db:
image: mysql: 5.7
environment:
– MYSQL_ALLOW_EMPTY_PASSWORD=true
– MYSQL_DATABASE=wordpress
– MYSQL_USER=root

El archivo en cuestion le indica al sistema que se descargue la ultima version de wordpress, que ejecute el servidor en el puerto 80 de nuestro localhost, y que la proyecto-wordpress/wp-content contenga toda la informacion que se sube a wordpress.

Ahora procedemos a ejecutar el servicio de wordpress ejecutando el comando

docker-compose up -d

Al realizar la configuraciĆ³n inicial de wordpress a traves de localhost, debemosĀ tomar en cuenta, que al usar docker el Database Host ya no sera localhost sino db. ( En el archivo docker-compose.yml, en la seccion services => web => links => le pusimos el nombre db al servidor de la base de datos ).

InstalaciĆ³n Finalizada Exitosamente šŸ˜‰

 

Comandos de Docker-Compose

El servicio de docker no es algo que debe estar permanentemente en memoria. Podemos prenderlo y apagarlo cuando lo necesitemos.

Ejecutar WordPress

docker-compose up -d

Detener WordPress

docker-compose stop

Borrar la instalaciĆ³n

docker-compose down

Revisar los logs

docker-compose logs web

necudeco, Author at Mario Uriarte