Durante el último año se ha hablado mucho acerca de ReactJS, ha generado una gran cantidad de artículos, posts, discusiones, comentarios tanto negativos como positivos. Y muchos aún se preguntarán por que tanta discusión al respecto, y es que ReactJS viene a cambiar mucho de lo que se consideran “mejores prácticas” y la forma en que se hacen las cosas, y como todo cambio puede producir rechazo.

Cada vez es mayor la adopción de ReactJS en el mundo del desarrollo web y móvil (con react native), no sólo es usada por Facebook, Instagram y Whatsapp sino por compañías como Airbnb, Asana, Uber, Periscope, Khan Academy, Reddit, entre muchas otras.

Si quieres saltar la teoría y ver el código haz click aquí

¿Qué es React?

Antes que nada hay que definir que es ReactJS, es simplemente una librería de Javascript para crear interfaces de usuarios, es decir sería la V del MVC, o lo que mostramos al usuario, no más ni menos que eso.

Es una librería creada y hecha open source por Facebook y la hicieron para resolver los problemas que se les presentaban al hacer una aplicación tan grande como lo es Facebook y poder facilitar la creación de componentes interactivos, reusables y actualizables.

Los principios en los que React se basa son los siguientes:

Simple
Si le indicas a React como se debe ver tu aplicación en un momento determinado, React se encargará de actualizar tu Interfaz cuando los datos cambien, lo que ahorra mucho trabajo y esfuerzo a la hora de optimizar y mejorar tu aplicación.

Declarativo
Cuando los datos cambian, React actualiza tu Interfaz y sólo actualiza las partes que deben ser cambiadas. En la programación declarativa tu le dices al programa como quieres que se vea o que haga cuando tiene ciertos estados y el programa resuelve como hacerlo, esto es distinto a la programación imperativa tu le dices al programa como hacer las cosas.

Componentes Reusables
React se basa en construir componentes, cada componentes es totalmente encapsulado por lo que es fácil reutilizarlos y probarlos. Además puedes colocar varios componentes juntos, o uno dentro de otros.

Imagina un típico post de blog como este donde tienes el contenido, una sección de comentarios, la lista de comentarios, cada uno de estos elementos puede ser un componente e inclusive tener subcomponentes por ejemplo las estrellas de rating de los comentarios.

Todo en React se trata de los componentes.

Virtual DOM

El Virtual DOM es exactamente lo que dice el nombre un DOM (esctructura de las páginas HTML) virtual, se puede pensar como una capa de abstracción. Esto tiene varios beneficios entre ellos que se pueda “mostrar” o hacer render de la página mucho más eficiente, además como es una capa de abstracción puedes cambiar el Virtual DOM por casi cualquier cosa como por ejemplo Node en el servidor y tener SSR (Server Side Rendering), o por una implementación de componentes nativos móviles (como se hace con React Native).

Dale 5 minutos
Basado en este artículo, darle 5 minutos se refiere a que al principio React parece que va en contra de todo lo que sabes, cambia mucho de los paradigmas y “mejores prácticas” que conocemos, pero todo es cuestion de darle un poco de tiempo y acostumbrarse después empezarás a entenderlo mejor y ver los beneficios. Creeme era el primero que salió corriendo al ver HTML, CSS y JS mezclado en un solo archivo.

JSX

Aunque React se puede escribir en Javascript puro, es recomendado y se ha convertido la norma escribir los componentes en JSX.

JSX te permite crear objetos de Javascript usando sintaxis de HTML. Por ejemplo para hacer un link en React en Javascript puro sería algo como:

React.createElement(‘a’, {href: ‘https://facebook.github.io/react/’}, ‘Hola!’)

Con JSX se transforma en:

<a href=”https://facebook.github.io/react/”>Hola!</a>

Los archivos JSX tienen extensión .jsx en vez de .js, como estamos acostumbrados y tienen varias peculiaridades que veremos en los ejemplos.

El archivo JSX al final es transformado automáticamente en Javascript, y creanme que aunque al principio cuesta entenderlo hace la vida más fácil para escribir los componentes de React.

Más información y opiniones de JSX la pueden encontrar aqui y aquí.

Bueno ya basta de hablar de teoría pasemos a un poco de código para entender como se ve React.

Dirección de los Datos

Esto también es muy importante en React, la dirección de los datos es un sólo sentido, viaja a traves de state y props al componente, por lo que cuando tenemos varios componentes usualmente tenemos un componente padre que maneja el estado y le pasa a los hijos datos a través de los props.

Supongamos nuevamente el ejemplo de los comentarios, tenemos dos componentes un componente padre que representa la lista de los comentarios y luego cada comentario es un componente, posiblemente en el componente padre tendremos la candidad de comentarios además de la lista de los comentarios, pero al comentario hijo solo le interesaría el texto y autor de un comentario individual por lo que eso se lo pasaríamos de padre a hijo a través de props.

Además imaginemos que tenemos una función de ordenar en el padre donde se pueden ordenar los cometarios por fecha, el único que manejaría el estado del orden sería el padre los hijos no tienen porque saber nada acerca del orden. Esta separación permite hacer componentes muy específicos, fácil de probar y de manejar, a diferencia de tener cientos de lineas de código difíciles de entender.

Empezando con un simple Componente

Como esto es una introducción vamos a utilizar jsFiddle para ver los ejemplos, en futuros artículos veremos como configurar React en nuestro computador.

Vamos a crear un componente muy sencillo el típico Hola Mundo

const Hola = React.createClass({
  render() {
    return <div>Hola {this.props.nombre}</div>;
  }
});

React.render(<Hola nombre="Mundo" />, document.body);

Así es como se ve un componente (muy simple) en React.

Primero declaramos el Componente Hola a través de React.createClass, dentro de esta función tenemos render que es el que crea el componente como tal.

Aquí estamos utilizando JSX, como ven usamos una sintaxis muy parecida a HTML con el <div>.

Luego tenemos un atributo los {…} indican que React tiene que cambiar esto por el atributo que le estamos pasando en este caso this.props.name. Los Props son una de las forma que tiene React para pasar atributos o datos a los componentes y lo accedemos en el componente a través de this.props.

Por último llamamos a React.render el cual toma dos argumentos:

  1. El nombre del componente, en este caso le pasamos el componente con el prop ‘nombre’ definido como “Mundo”.
  2. Donde se debe mostrar o montar el componente, en este caso lo hacemos directamente en el body.

En jsFiddle puedes probar cambiando el nombre a otra cosa o cambiando el div por un H1, por ejemplo.

Un Componente con Estado

Todo componente en React tiene un objeto state y un objeto props. En el ejemplo anterior vimos como utilizar los props a través de this.props, el Estado (State) es lo que nos va a permitir la intereactividad de nuestro componente.

Los estados se manejan a través de los siguientes mecanismos:

  • setState, para colocar el valor de un estado
  • this.state, para acceder a los valores de los estados
  • getInitialState, es un método para colocar el estado inicial que queremos que esté nuestro componente.

Otra característica de nuestros componentes son los Eventos, los eventos están asociados a nuestros componentes como propiedades y pueden disparar métodos, por ejemplo cuando presionamos un botón, hacemos scroll, entre otros.

Vamos a hacer un ejemplo de un componente que es un contador que se incrementa cada vez que hacemos click sobre un botón.

 

const Contador = React.createClass({
  getInitialState() {
    return {
      contador: 0
    }
  },
  incrementarContador() {
    this.setState({
      contador: this.state.contador + 1
    });
  },
  render() {
    return (
      <div className="mi-componente">
        <h1>Contador: {this.state.contador}</h1>
        <button type="button" onClick={this.incrementarContador}>Incrementar</button>
      </div>
    );
  }
});

React.render(<Contador/>, document.body);

Los pasos a seguir serían:

  1. Crear un componente Contador con React.createClass.
  2. Colocamos un estado inicial del contador a 0 con getInitialState.
  3. Creamos un método incrementarContador() que aumenta el contador en 1 cada vez que lo llamamos.
  4. Llamamos a render() que se encarga de mostrar nuestro componente, aquí tomamos el valor del contador con this.state.contador y llamamos el método con onClick dentro del botón.
  5. Por último llamamos a React.render para mostrar nuestro componente.

Ahora cada vez que hacemos click sobre el botón el contador se incrementa en 1.

Puedes modificarlo en jsFiddle aquí http://jsfiddle.net/n5yx2bpy/1/

Conclusión

React es una librería que nos sirve para manejar nuestra interfaz de usuario a través de componentes, aunque es un cambio en la forma de pensar de construir aplicaciones, también tiene una serie de ventajas que nos ayuda a tener aplicaciones más fáciles de manejar, que se pueden probar fácilmente y escalables.

Dicho esto React no es para todo tipo de aplicaciones, si tienes una aplicación muy pequeña o estás haciendo sólo un prototipo, React puede ser demasiado. Lo bueno de React es que no tienes que cambiar toda tu aplicación de una vez, puedes ir cambiando pequeños elementos por componentes poco a poco y donde más lo necesites, así lo hizo Facebook con muchas de sus aplicaciones.

Ahora queda mucho por aprender y por avanzar, React está actualmente por la versión 0.14.7 al momento de escribir este artículo, fue puesta como código abierto en 2013 y especialmente en 2015 fue cuando comenzar a ganar mucha más atención. Todo el tiempo están saliendo nuevas mejoras y funcionalidades.

En próximos artículos veremos más en profundidad como usar React y haremos una pequeña aplicación.

Por ahora si quieres aprender más de React te recomiendo ver la página principal de React https://facebook.github.io/react/index.html y hacer el tutorial.

Si quieres ver ejemplos de componentes puedes visitar https://js.coach/

Si tienes alguna duda o sugerencia puedes dejar un comentario.

 

 

 

Este es un tutorial muy corto de  como cambiar la imagen de fondo aleatoriamente de un div o cualquier elemento con JQuery.

Suponiendo que tenemos una estructura de directorio como esta:

-misitio
  --imagenes
      imagen1.jpg
      imagen2.jpg
      ...
  estilos.css
  index.html

Y que nuestro index.html es algo como:

<html>
<body>
<div id="fondo"></fondo>
</body>
</html>

Y queremos cambiar aleatoriamente la imagen del div con id fondo seguimos los siguientes pasos.

En estilos.css deberíamos una propiedad como esta con la imagen que queramos en caso de que JQuery falle por alguna razón:

#fondo {
   background: url('imagenes/imagen1.jpg');
}

El código de jQuery para hacer el cambio aleatorio es el siguiente:

<script type="text/javascript">
$(function() {
  var imagenes = ['imagen1.jpg', 'imagen2.jpg', 'imagen3.jpg', 'imagen4.jpg', 'imagen5.jpg'];
  $('#fondo').css({'background-image': 'url(imagenes/' + imagenes[Math.floor(Math.random() * imagenes.length)] + ')'});
});
</script>

Vamos a explicar estas dos líneas de código:

1. En la primera línea tenemos un arreglo (array) con los nombres de las imágenes que queremos ir rotando.

2. En la segunda línea cambiamos la propiedad de background-image de #fondo a una de las imágenes que tenemos en el arreglo. Usamos dos funciones matemáticas de JavaScript Math.floor que redondea un número flotante hacia abajo al entero más cercano, por ejemplo 4.3 lo redondea a 4, y Math.random que nos da un número aleatorio, lo multiplicamos por la longitud de imagenes para que nos dé un número que esté dentro de ese arreglo.

Listo eso es todo con esto irá cambiando la imágen de fondo cada vez que regarguemos la página.

Espero que les sirva este tutorial, cualquier duda o sugerencia por favor dejen un comentario.

En este tutorial vamos a ver como instalar y configurar un servidor LEMP para Ubuntu, aunque en este caso estoy utilizando la versión de Ubuntu 14.04, este tutorial sirve para cualquier versión de Ubuntu desde la 12.04.

Si quieres saber como instalar un Servidor LAMP en Ubuntu con Apache puedes ver este tutorial.

Un servidor LEMP se refiere a un conjunto de aplicaciones que por sus siglas es Linux+(Engine X)nginx+MySQL+PHP y en este caso vamos a instalar y configurar un servidor con los siguientes componentes:

nginx – Servidor Web muy versatil y rápido, muy utilizado y un buen sustituto para Apache. Se suele pronunciar Engine X por eso la E de LEMP.

MySQL 5 – Uno de los servidores de base de datos más populares y utilizados en sitios y aplicaciones web

PHP 5 – Es un lenguaje interpretado utilizado para construir aplicaciones y páginas web

Concepto: Un servidor no es más que un PC que presta algún servicio (como mostrar páginas web).

Pasos previos:

 

  • Obtener e Instalar Ubuntu: lo pueden obtener desde la página Oficial de Ubuntu, si el servidor Web LEMP sólo lo van a utilizar como servidor les aconsejo descargar la versión de servidor. Igualmente se puede hacer la instalación sobre la versión de Escritorio de Ubuntu.
  • El servidor debe tener al menos 256 MB de memoria RAM, si no saben cuanta memoria tiene su PC simplemente ejecuten free -m en el terminal si donde dice total es mayor a 256 están bien. Yo personalmente recomiendo tener al menos 512 MB de memoria RAM
  • También pueden probar instalando el servidor en una máquina virtual ya sea con virtualbox, vmware, kvm o el manejador de máquinas virtuales de su preferencia.
  • Si van a hacer la administración del servidor LEMP de manera remota les aconsejo instalar openssh-server (sudo aptitude install openssh-server).

Les aconsejo también seguir el tutorial paso a paso, he tratado de hacer los pasos lo más concretos y cortos posibles, para que así no se pierdan de nada y tampoco les aburra el tutorial.

Bueno ya tenemos todo listo para empezar así que abran un Terminal y pongámonos a trabajar.

1. Actualizar nuestro sistema

Es siempre aconsejable realizar la actualización de nuestro sistema antes de llevar a cabo cualquier instalación simplemente ejecuten lo siguiente en el terminal

sudo apt-get update && sudo apt-get upgrade

Con este comando se actualiza nuestra lista de repositorios y los paquetes que tengamos instalados si hay alguna actualización disponible. Si les hace cualquier pregunta acerca de actualizar algún paquete pueden contestar que sí.

2. Instalar NGINX

La forma más fácil de instalar nginx es ejecutar el siguiente comando:

sudo apt-get install nginx

Cuando pregunte si quieres continuar simplemente responde Y y enter y espera que finalice la instalación.

Para probar que la instalación se hizo correctamente en tu navegador ve a http://localhost  o http://tudireccionIP y deberías ver un mensaje como este:

nginx

3. Instalar MySQL

MySQL es una de las base de datos open source más popular y utilizadas en innumerables páginas web y aplicaciones tanto gratuitas como comerciales. Es una base de datos bastante robusta y flexible, fácil de configurar y lo bastante rápida para la mayoría de las aplicaciones comunes.

Para instalar el servidor de MySQL debemos ejecutar el siguiente comando:

sudo apt-get install mysql-server

Esto instalará todos los paquetes y librerias necesarios para que funcione el servidor MySQL

Durante la instalación les aparecerá la siguiente pantalla solicitando la clave de root para el servidor MySQL, aquí deberán colocar una clave para el administrador de la base de datos, no es recomendable colocar la misma clave del usuario de Ubuntu, se recomienda también que tenga una longitud mayor a 8 caracteres y que mezclen letras, símbolos y números, no son permitidos los espacios en blanco.

Nota: No confundir esto con el usuario root de Linux, este es el usuario root de MySQL

Para comprobar el funcionamiento del servidor MySQL ejecuten el siguiente comando:

mysql -u root -p

Deberá pedirles la clave que colocaron en el paso anterior y aparecerles el prompt  mysql> algo parecido a esto:

vensign@lemp-vensign:~$ mysql -u root -p
Enter password:
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 40
Server version: 5.1.37-1ubuntu5 (Ubuntu)

Type 'help;' or 'h' for help. Type 'c' to clear the current input statement.

Vemos que nos muestra la versión del MySQL que acabamos de instalar. Para salir del prompt de mysql y volver al terminal de Linux simplemente escriban exit y presionen Enter o Intro.

Los comandos para administrar MySQL son:

Función Comando Comando Corto
Iniciar MySQL sudo /etc/init.d/mysql start sudo service mysql start
Detener MySQL sudo /etc/init.d/mysql stop sudo service mysql stop
Reiniciar MySQL sudo /etc/init.d/mysql restart sudo service mysql restart
Estatus MySQL sudo /etc/init.d/mysql status sudo service mysql status

 

El archivo de configuración de mysql se encuentra en /etc/mysql/my.cnf

4. Haciendo Seguro MySQL

Si vamos a utilizar nuestro servidor para producción queremos que sea lo más seguro posible, en el caso de MySQL nos proporciona un script que podemos ejecutar para realizar algunas configuraciones de seguridad.

Para esto ejecutamos el siguiente comando:

sudo mysql_secure_installation

Primero nos preguntará la contraseña de root de MySQL que establecimos en el paso anterior.

Luego nos preguntará si queremos cambiar nuestra contraseña de usuario root de MySQL si estás contento con tu contraseña puedes decir que N a este paso.

Luego nos hará una serie de preguntas a las cuales lo más fácil y seguro es responder que Si a todas. Coloco un comentario sobre cada pregunta para explicar un poco de que trata.

By default, a MySQL installation has an anonymous user, allowing anyone
to log into MySQL without having to have a user account created for
them.  This is intended only for testing, and to make the installation
go a bit smoother.  You should remove them before moving into a
production environment.

// Quitar cualquier usuario anónimo
Remove anonymous users? [Y/n] y                                            
 ... Success!

Normally, root should only be allowed to connect from 'localhost'.  This
ensures that someone cannot guess at the root password from the network.

// Que el usuario root de MySQL no se pueda loguear remotamente
Disallow root login remotely? [Y/n] y
... Success!

By default, MySQL comes with a database named 'test' that anyone can
access.  This is also intended only for testing, and should be removed
before moving into a production environment.

// Quitar la base de datos test que crea por defecto MySQL
Remove test database and access to it? [Y/n] y
 - Dropping test database...
 ... Success!
 - Removing privileges on test database...
 ... Success!

Reloading the privilege tables will ensure that all changes made so far
will take effect immediately.

// Recargar los privilegios para que hagan efecto los cambios.
Reload privilege tables now? [Y/n] y
 ... Success!

Cleaning up...

Con esto tendremos un MySQL un poco más seguro.

5. Instalar PHP

PHP es un lenguaje interpretado que es utilizado para crear páginas web dinámicas y aplicaciones, de una manera rápida y flexible. Entre las plataformas que utilizan PHP está WordPress, Drupal y Joomla.

Para instalar PHP 5 junto con el soporte para MySQL ejecutamos el siguiente comando en el terminal:

sudo apt-get install php5-fpm php5-mysql

Igual que en los pasos anteriores responde S cuando te pregunte que quieres instalar los paquetes.

Nota: Como vemos instalamos la versión FPM de PHP ((PHP5 FastCGI Process Manager), esta es la versión ideal para utilizar con nginx.

Los comandos para administrar PHP son:

Función Comando Comando Corto
Iniciar PHP sudo /etc/init.d/php5-fpm start sudo service php5-fpm start
Detener PHP sudo /etc/init.d/php5-fpm stop sudo service php5-fpm stop
Reiniciar PHP sudo /etc/init.d/php5-fpm restart sudo service php5-fpm restart
Estatus PHP sudo /etc/init.d/php5-fpm status sudo service php5-fpm status

6. Configurar NGINX y PHP para que funcionen juntos

Ahora que tenemos todos los componentes instalados nos falta configurar PHP y NGINX para que trabajen juntos para estos hacemos los siguientes pasos:

Primero editamos el archivo de configuración de PHP-FPM que está ubicado en /etc/php5/fpm/php.ini. Abrélo con tu editor de texto favorito, en este caso yo voy a utilizar nano:

sudo nano /etc/php5/fpm/php.ini

Y cambiamos la línea cgi.fix_pathinfo=1 por, si el parámetro tiene un ( ; ) adelante lo eliminamos ya que quiere decir que está comentado :

cgi.fix_pathinfo=0

Nota: Si este parámetro lo dejamos en 1, el intérprete de php hará todo lo posible para procesar el archivo más cercano al archivo solicitado, lo que es un riesgo de seguridad. Colocando el parámetro a 0 sólo se procesará el archivo solicitado.

Guardamos el archivo y reiniciamos PHP ejecutando:

sudo service php5-fpm restart

Ahora vamos a modificar el archivo de configuración del sitio por defecto de nginx que es el que vamos a utilizar y que está ubicado en /etc/nginx/sites-available/default, una vez más utilizando nano:

sudo nano /etc/nginx/sites-available/default

Debemos descomentar las líneas que comienzan con # que se indican a continuación para que el archivo quede de la siguiente forma:

 location ~ \.php$ {
         fastcgi_split_path_info ^(.+\.php)(/.+)$;
 #       # NOTE: You should have "cgi.fix_pathinfo = 0;" in php.ini
 #
 #       # With php5-cgi alone:
 #        fastcgi_pass 127.0.0.1:9000;
 #       # With php5-fpm:
         fastcgi_pass unix:/var/run/php5-fpm.sock;
         fastcgi_index index.php;
         include fastcgi_params;
 }

Guarda el archivo y reiniciamos nginx ejecutando:

sudo service nginx restart

7. Verificando que todo funciona

Por último debemos verificar que todo funciona y que nuestra configuración está correcta.

En Ubuntu el directorio por defecto donde estarán nuestros archivos para el sitio es /usr/share/nginx/html. Por lo que crearemos un archivo ahí que llamaremos prueba.php, creamos el archivo ejecutando:

sudo nano /usr/share/nginx/html/prueba.php

Y dentro de ese archivo escribimos la siguiente línea:

<?php phpinfo(); ?>

Ahora abrimos en nuestro navegador http://localhost/prueba.php o http://tudireccionip/prueba.php

Y nos debería aparecer algo como:

php-nginx

Si no te aparece esto o produce algún error entonces verifica tu configuración o deja un comentario y veré como puedo ayudarte.

Eso es todo ya tenemos un servidor LEMP funcionando, no olvides borrar el archivo de prueba.php una vez que hayas terminado de probar el servidor, ya que este archivo da mucha información de tu servidor que no queremos que sea pública.

Cualquier duda o sugerencia por favor deja un comentario y si te gustó este artículo puedes suscribirte al blog dejando tu dirección de correo en la barra de la izquierda y recibirás un correo semanal con los últimos artículos que tenemos.

La última vulnerabilidad que ha aparecido en SSL es POODLE un acrónimo para Padding Oracle On Downgraded Legacy Encryption (CVE-2014-3556) que fue nombrada por los investigadores de google que la descubrieron Bodo Möller, Thai Duong, y Krzysztof Kotowicz.

POODLE es una falla en como los navegadores manejan el cifrado, el atacante negocia el cifrado hasta llegar a SSL 3.0, un protocolo viejo y que ha sido abandonado hace mucho pero que aún es soportado, al conseguir esto permite al atacante decifrar información, incluyendo las cookies secretas de sesión, lo que permite hacerse pasar por el usuario.

Esto solo afecta a sitios que usan conexiones seguras con certificados SSL, para verificar si tu sitio es vulnerable puedes ir a este sitio y correr el test:

http://poodlebleed.com/

Para corregir esto en Apache necesitas hacer los siguientes pasos:

1. Actualizar openssl a su última versión

2. Colocar esto en el archivo de configuración de apache para deshabilitar SSL v2 y v3:

SSLProtocol all -SSLv2  -SSLv3

3. Reiniciar tu servidor apache.

Eso es todo después de estos pasos vuelve a correr el test para asegurarte que tu sitio no es vulnerable.

Actualización:

Si además de evitar la vulnerabilidad quieres hacer SSL más seguro en Apache agrega estás otras líneas a tu configuración de Apache:

SSLCipherSuite AES256+EECDH:AES256+EDH
SSLCompression off
SSLHonorCipherOrder On
SSLUseStapling on
SSLStaplingCache "shmcb:/var/run/ocsp(1500000)"
Header always set Strict-Transport-Security "max-age=63072000; includeSubDomains"
Header always set X-Frame-Options DENY
Header always set X-Content-Type-Options nosniff

Casi todas requieren Apache >= 2.4 y el módulo de headers activado.

Aquí nos aseguramos de utilizar cifradores seguros, activamos StaplingCache (puedes aparender más aquí) y además nos aseguramos que el navegador siempre utilice HTTPS no importa qué.

Y esta es una gran herramienta para verificar la seguridad y configuración de nuestro SSL:

https://www.ssllabs.com/ssltest/index.html

Espero que les sirva.

Normalmente cuando creamos un WP_Query en WordPress lo podemos ordenar por algún campo del post por ejemplo por el título o por la fecha de publicación pero que pasa cuando hemos creado un valor meta y queremos ordenarlo por ese valor, WP_Query viene al rescate.

Supongamos que tenemos dos meta valores, uno que se llama arquitecto y otro que se llama año.

Si queremos ordenar alfabéticamente por el meta valor de arquitecto nuestro WP_Query quedaría de la siguiente forma:

$args = array('post_type' => 'post', 'meta_key' => 'arquitecto', 'orderby' => 'meta_value', 'order' => 'ASC');
$query = new WP_Query($args);

Aquí estamos diciendo:

  • $pos_type=post, todos las entradas tipo post, aquí tambien puede ser page o algún tipo de entrada personalizado que tengamos.
  • $meta_key, es el nombre de nuestro meta en este caso arquitecto.
  • $orderby, es por qué parámetro vamos a ordenar aquí le decimos que ordene por el valor meta que seleccionamos anteriormente.
  • $order, el sentido del order puede ser ASC de menor a mayor o DESC de mayor a menor.

Ahora si queremos ordenar por el meta valor de año que es un valor numérico tenemos que hacer un pequeño cambio:

$args = array('post_type' => 'post', 'meta_key' => 'año', 'orderby' => 'meta_value_num', 'order' => 'ASC');
$query = new WP_Query($args);

Vemos que dejamos los parámetros casi igual lo único que cambia es ‘meta_key’=>’año’ para seleccionar el meta que queremos filtrar y  ‘orderby’ => ‘meta_value_num’ para indicarle a WordPress que este valor es numérico.

Eso es todo luego podemos usar nuestro loop como siempre lo hacemos:

while ($query->have_posts()) {

...

}

Así vemos que es muy fácil ordenar un loop a través de un meta valor.

Aunque la mayoría de las veces prefiero el terminal para manejar mis servidores, a la hora de manejar base de datos y realizar Querys prefiero utilizar MySQL Workbench, no siempre funciona de lo mejor pero la mayoría de las veces hace un gran trabajo.

Aquí vamos a ver como conectarnos con nuestra base de datos RDS de Amazon a través de MySQL Workbench con un tunel SSH. Esto nos ahorrará una gran cantidad de trabajo.

Los pasos son:

1. Abrir MySQL Workbench y crear una nueva Conexión

Hay dos formas o haces click en el botón de + al lado de MySQL Conections o vas al menú de Database>Manage Connections y seleccionas new abajo a la derecha a la izquierda tendrás varias pestañas selecciona Connection. Verás una ventana como esta y en el Connection Method seleccionamos Standard TCP/IP over SSH

Connection Name: Colocamos como queremos que se llame la conexión para indentificarla en MySQL Workbench.

Nueva Conexión MySQL Workbench

2. Crear la conexión con la Base de Datos

Cómo nos vamos a conectar a través de nuestra instancia de EC2 debemos colocar en SSH Hostname el Public DNS de la instancia de EC2.

Para encontrar este Public DNS debemos ir a la consola de Amazon  https://console.aws.amazon.com/ abrir el menú de instancias EC2 y seleccionar la instancia con la que nos conectamos normalmente vía SSH abajo veremos un campo de Public DNS parecido a este:

Public DNS EC2 Amazon

Copiamos el Public DNS y lo colocamos en SSH Hostname.

SSH Username: colocamos el nombre del usuario que utilizamos para conectarnos a la instancia de EC2, si por ejemplo es una instancia Ubuntu el usuario por defecto es ubuntu.

SSH Key File: Vamos  utilizar el archivo PEM que usamos como Key para conectarnos a EC2, en SSH Key File hacemos click en … para buscar el archivo y seleccionamos el archivo PEM (nuestra llave privada) que descargamos a la hora de crear la instancia de EC2.

MySQL Hostname: Aquí debemos colocar el Endpoint, que sería la instancia de base de datos creada en Amazon RDS. Para encontrar este Hostname debemos ir a la consola de Amazon  https://console.aws.amazon.com/ abrir el menú de instancias de RDS y seleccionar la instancia con la que nos queremos conectar veremos algo como esto:

Endpoint RDS Amazon

Copiamos toda esa dirección sin los :3306

MySQL Server Port: El puerto por defecto es 3306. Si lo cambiaste en tu configuración debes poner el nuevo puerto aquí.

Username: Es el nombre del usuario Master de la base de datos cuando creaste la instancia de RDS. Aparece en el Username de la consola de Amazon en la instancia de RDS por si lo olvidaste.

Password: Es la clave del usuario Master de la base de datos cuando creaste la instancia de RDS Amazon.

Una vez que llenemos todos los datos presionamos el botón de Test Connection y deberíamos ver un mensaje como el siguiente:

Untitled window_013

Luego presionamos OK y estamos listos para empezar a utilizar nuestra conexión.

3. Manejar la instancia con MySQL Workbench (Opcional)

Si queremos ser capaces de detener, iniciar y ver los logs de la instancia desde Workbench debemos hacer un paso adicional.

Vamos al menú de Database>Manage Connections, seleccionamos la conexión que acabamos de crear y vamos a la pestaña de Remote Managment y ya debería estar casi lleno comprobamos que:

Hostname: es el Public DNS de nuestra instancia EC2.

Username: El usuario que utilizamos para conectarnos vía SSH a nuestra instancia EC2.

Marcamos la opción de Authenticate Using SSH Key y buscamos el archivo .pem de clave privada de nuestra instancia EC2.

Manage Server Connections_017

Cuando este listo hacemos click en Close y ahora podemos ver habilitadas las opciones de nuestra instancia RDS:

Selection_018

Ten cuidado con estas opciones ya que si detienes la instancia puedes hacer que deje de funcionar tu aplicación Web.

Eso es todo, espero que les sirva, cualquier duda o sugerencia por favor deja un comentario.

 

 

Este es otro mini tutorial de git, en este caso cómo podemos “descargar” o hacer pull de una rama remota. Supongamos que queremos descargar una rama que se llama rama_nueva para esto se necesita sólo una línea:

git checkout -b rama_nueva origin/rama_nueva

Con esto ya se descargará nuestra rama_nueva y ya estaremos listo para editarla localmente.

Si da un error de este estilo:

fatal: git checkout: updating paths is incompatible with switching branches/forcing
Did you intend to checkout ‘origin/‘ which can not be resolved as commit?’

Entonces es que necesitas ejecutar primero:

git pull

Y luego la línea de arriba.

Eso es todo espero que les sirva, cualquier duda deja un comentario.

Es muy sencillo eliminar una rama en git con una simple línea de comandos:

Eliminar Rama Local

git branch -D nombre_rama

Por supuesto sustituyendo nombre_rama por la rama a eliminar. La opción -D elimina la rama sin importar el estatus en que se encuentre el merge, así que utilizalo con cuidado.

Eliminar Rama Remota

git push origin --delete nombre_rama

Se eliminará la rama en nuestro repositorio remoto. Eso es todo, cualquier duda pueden escribir un comentario.

Errar es de humanos, y nada nos hace más humanos que estar a las 2 de la mañana programando y equivocarnos en algún commit en git que no queríamos hacer o que simplemente nos faltó algo.

Pero gracias a la flexibilidad que tiene git y a que está pensado por programadores es muy fácil deshacer un commit.

Tenemos 3 escenarios vamos viendo uno a uno:

Para estos ejemplos vamos a suponer que tenemos tres commit A-B-C siendo C el último commit.

1. Queremos deshacer el último commit para modificar algo o agregar alguna línea que nos faltó, el equivalente al Ctrl+Z (o Cmd+Z) de git. Para esto simplemente ejecutamos el siguiente comando:

git reset --soft HEAD^1

En el caso que utilices MS Windows tienes que ejecutar git reset –soft HEAD~1 (nota el cambio de ^ por ~)

Después de ejecutar este comando quedaría A-B y los archivos con los cambios.

Con esto eliminamos el commit pero permanecen los cambios que habías realizado, luego de que termines de editar lo que te había faltado vuelves a hacer el commit como siempre lo haces. Algo como:

git add .
git commit -m "Mensaje explicativo del commit"

2. En el último commit que hiciste no merece existir más y quieres eliminarlo de la faz de la tierra y que nadie se entere de lo que hiciste jamás, no quieres guardar ningún cambio de este último commit. Entonces para esto ejecutas:

git log
git reset --hard HEAD^1

En el caso que utilices MS Windows tienes que ejecutar git reset –hard HEAD~1 (nota el cambio de ^ por ~)

En este caso quedaría A-B y C ni los últimos cambios existen.

Con esto se eliminará el último commit por completo y es como si nunca hubiera existido, por qué el git log? es una medida de seguridad si por casualidad te arrepientes de haberlo eliminado porque justo en ese último commit estaba la línea que hacía que todo funcionara puedes recuperarlo ejecutando:

git checkout -b nombre_nueva_rama sha_del_commit_que_destruiste

El sha_del_commit_que_destruiste es el número que aparece al lado de la palabra commit cuando ejecutas git log por ejemplo commit 345f7115ce3e1e611f41cd7492ed0e69945e858d. Estamos creando una nueva rama después que termines de hacer los cambios puedes hacer un merge con la ramas que estás trabajando.

3. Ya el commit está en el repositorio público, para esto la mejor práctica no es eliminar el commit sino crear un nuevo commit revirtiendo los cambios del último. Ejecutamos:

git revert HEAD

Ahora los cambios ya han sido deshechos y están listo para que hagas commit:

git commit -m "Revirtiendo últimos cambios"
git push

Eso es todo realmente muy fácil de corregir esos errores que nos pasan a todos, si tienen alguna pregunta, duda o recomendación por favor déjenla en los comentarios y con gusto les responderé.

Sublime Text 3

Sublime Text es uno de los mejores editores de código que hay actualmente y yo personalmente lo utilizo todos los días. Si quieres instalar Sublime Text 3 en Ubuntu a través de PPA para que se mantenga actualizado automáticamente lo puedes hacer ejecutando los siguientes comandos en la terminal:

sudo add-apt-repository ppa:webupd8team/sublime-text-3
sudo apt-get update
sudo apt-get install sublime-text-installer

Gracias a los de http://www.webupd8.org/ ya tenemos Sublime Text 3 instalado y listo para usar.

Si no quieres utilizar ppa o no utilizar Ubuntu, simplemente puedes ir a la página de descarga de Sublime Text y bajar la versión que quieras, http://www.sublimetext.com/3 hay versiones para MS Windows, OS X y Ubuntu y otras distribuciones de Linux.