Después de haber comenzado con ReactJS: Instalar todo lo necesario para empezar e Introducción a ReactJS, vamos a ir un poco más profundo en cómo funcionan los componentes de React.

Cuando creamos un componente e interactuamos con el pasa por un ciclo de vida. Si conocemos que pasa en cada paso podemos aprovechar de hacer modificaciones o reaccionar a ciertos eventos para hacer nuestro componente y aplicación comportarse como queremos.

Vamos a ver 3 ciclos:

  1. Inicialización del componente
  2. Actualización del componente
  3. Destrucción del componente

Y veremos en cada ciclo que métodos son llamados y que propiedades están disponibles.

1. Inicialización del Componente

Esta es la fase inicial donde el componente es creado.

Los métodos y triggers que son llamados durante esta fase son:

  1. getInitialState
  2. getDefaultProps
  3. componentWillMount
  4. render
  5. componentDidMount

getInitialState

Este es llamado sólo una vez antes de que el componente se monte. Regresará el valor inicial de this.state.

getDefaultProps

Solo se invoca una sola vez y es guardado en cache cuando el componente es creado. Los valores serán guardados en this.props.

Como es invocado antes de la creación de cualquier instancia no puede depender en los valores anteriores de this.props.

componentWillMount

Invocado solo una vez justo antes que se llame al render del componente, tanto en el cliente como en servidor, si se coloca un valor de estado (this.state) dentro de este método no provocará una actualización.

render

Este método retorna el componente como tal para su visualización, sino quieres que se muestra nada debes retornar null o false. Es el único método requerido siempre por los componentes.

Esta función debe ser pura, lo que quiere decir que no debe modificar el estado del componente y que regresará el mismo resultado cada vez que se llame. Tampoco debe leer o escribir directamente al DOM o interactuar con el navegador, para este tipo de intereacciones se pueden utilizar otros métodos como por ejemplo componentDidMount().

componentDidMount

También se invoca una sola vez, sólo en el cliente, y es llamado inmediatamente después de la vizualización inicial (realizada por la función render). En este método ya puedes acceder a cualquier referencia de los componentes hijos, el método componentDidMount de los hijos es siempre llamado antes que el de los padres.

En este método puedes integrar otros frameworks de Javascript, colocar timers con setTimeOut o setInterval o hacer llamadas AJAX.

Aquí finaliza la fase de inicialización y el componente debería ya mostrarse en nuestro navegador.

2. Actualización

La fase de actualización pasa o cuando hay nuevos props o cuando cambia el estado.

  1. componentWillRecieveProps (solo cuando hay nuevos props)
  2. shouldComponentUpdate
  3. componentWillUpdate
  4. render
  5. componentDidUpdate

componentWillRecieveProps

Sólo es llamado cuando un componente está recibiendo nuevos props. Podemos utilizar este método para actualizar el estado (this.state) sabiendo que va a haber un cambio en los props.

Los valores antiguos de los props se pueden acceder con this.props ya que aún no se han actualizado.

Este método recibe como parámetros los valores de los props a actualizar.

Por ejemplo:

componentWillReceiveProps: function(nuevosProps) {
  this.setState({
    votos: nuevosProps.votos > this.props.votos
 });

Nota importante: NO implica que un cambio de estado vaya a generar un cambio en los props.

Este método NO es llamado cuando hay un cambio de estado.

shouldComponentUpdate

Es llamado antes de render cuando son recibidos nuevos props o estados. Este método por defecto retorna true, pero si estamos seguro que la actualización de los props o el estado no requiere que se actualice el componente puedes sobreescrbirlo y retornar false, en cuyo caso no se llamara a método render hasta el próximo cambio y tampoco se llamarán a los métodos componentWillUpdate y componentDidUpdate.

Aquí es donde es importante la inmutabilidad del estado del componente, en este método podemos hacer comparaciones entre los cambios y ver si es necesario actualizar o no. Esto nos permite obtener mejor rendimiento y menos uso de nuestros recursos.

Por ejemplo podemos verificar si no hubo cambios en nuestro props y si es así no actualizar.

shouldComponentUpdate: function(nuevosProps, nuevoEstado) {
  return nuevosProps.id !== this.props.id;
}

También como se muestra tenemos acceso al nuevoEstado, por lo que podemos hacer otras comparaciones y ver si es necesario actualizar o no.

Este método no se llama en la inicialización.

componentWillUpdate

Se llama justo antes de llamar a render(), cuando se reciben los nuevos props o estados. Aquí podemos hacer preparaciones antes de que ocurra la actualización.

Es importante saber que NO podemos utilizar this.setState() en este método, si necesitamos cambiar el estado debido a un cambio en los props debemos usar el método componentWillReceiveProps que vimos anteriormente.

Ejemplo:

componentWillUpdate: function(nuevosProps, nuevoEstado) {
  ...
}

Este método no se llama en la inicialización.

render

Es igual al que vimos en la fase de inicialización y es donde se crea el componente como tal.

componentDidUpdate

Se llama justo después de render después que todos los cambios han sido hechos en el DOM. Puedes utilizar este componente para hacer alguna operación el DOM después que el componente se haya actualizado.

componentDidUpdate: function(anteriorProps, anteriorEstado) {
  ...
}

3. Destrucción

Esta es la última fase y es cuando el componente se destruye y consiste en un sólo método.

componentWillUnmount

Es llamado justo antes de que el componente sea removido del DOM, es útil para hacer cualquier operación de limpieza, tales como invalidar timers, eliminar elementos que se hayan creados durante componentDidMount y cualquier otra operación pendiente.

Conclusión

Siempre es importante conocer por cuales ciclos de vida pasa cualquier elemento de nuestra aplicación, muchas veces tratamos de realizar operaciones donde no corresponde, o queremos evitar que pasen ciertos eventos cuando se cumplen ciertos valores, o queremos acceder a datos antes de que se muestren y todo lo podemos hacer con los métodos que vimos.

También te pueden interesar ReactJS: Instalar todo lo necesario para empezar e Introducción a ReactJS.

Como siempre si tienen cualquier duda o sugerencia siempre son bienvenidos los comentarios.

 

 

En el artículo anterior Introducción a ReactJS vimos como que es React y un par de pequeños ejemplos de como crear un componente, en este artículo instalaremos todo lo necesario para correr React en nuestra computadora.

Instalar Node

Lo primero que tenemos que tener instalado es Node, preferiblemente en su última versión.

Mac OS X o Linux (Recomendada)

Si tienes cualquiera de estos dos sistemas operativos recomiendo instalar node con NVM, este es un manejador de versiones de node que permite cambiar de versiones cuando lo necesites y mantener actualizado node a su última versión de forma sencilla.

Nota: Para linux necesitas tener instalado build-essentials y libssl-dev.

Los pasos para instalarlo son:

1- Ejecutar en el terminal:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.30.2/install.sh | bash

2- Para instalar la última versión de node ejecutamos:

nvm install node

Para más información ve a la página de NVM.

Mac OS X (Alternativo)

Tienes dos opciones ir a la página de Node descargar el instalador y ejecutarlo o instalarlo con brew ejecutando:

brew update
 brew install node

Con cualquiera de los dos métodos debería quedar instalado node y npm.

Si ya lo tenías instalado lo puedes actualizar con:

brew update node

Linux (Alternativo)

Puedes instalar node en Linux usando cualquier instalador de paquetes de tu distribución por ejemplo para Debian y Ubuntu ejecutando:

sudo apt-get update
sudo apt-get install build-essential libssl-dev
sudo apt-get install nodejs npm

También puedes descargar el instalador desde la página de Node

MS Windows

Descarga el instalador desde la página de Node

Instalar Webpack

Hay dos librerías que se utilizan con React para crear el bundle de nuestra aplicación, hacer live reload y mucho más una es browserify y la otra es Webpack, yo prefiero Webpack y por eso indico como se instala aquí, si prefieres browserify instala ese.

Para instalar Webpack simplemente ejecutamos:

npm install webpack -g

También necesitaremos el Webpack-dev-server para instalarlo ejecutamos:

npm install webpack-dev-server -g

Esto instalará el paquete de webpack y webpack-dev-server de manera global.

Instalar Babel

En nuestros ejemplos vamos a estar utilizando ES6 (o ES2015 como prefieras llamarlo) y para esto necesitamos Babel que “transpila” o transforma el código ES6 a la versión anterior para que sea entendido por todos los navegadores, sin tener que preocuparnos de nada.

Para instalarlo ejecuta:

npm install babel -g

Empezando un proyecto

Listo esas son las herramientas que necesitamos ahora veremos con configurar un proyecto de ejemplo con estas herramientas.

En este ejemplo vamos a hacer un simple botón que al presionarlo nos muestre un número aleatorio.

Creamos un directorio que yo voy a llamar react-configuracion

mkdir react-configuracion

cd react-configuracion

Una vez dentro del directorio ejecutamos:

npm init

Presionamos Enter para seleccionar todas las opciones por defecto, después lo podremos cambiar en el archivo package.js.

Esto inicializará nuestro proyecto con un archivo package.js.

Ahora tenemos que instalar react y react-dom ejecutando:

npm install react react-dom --save

Eso lo instalará y lo guardará en nuestras dependencias.

Para que no tengamos errores en la instalación debemos declarar webpack y webpack-dev-server en nuestras dependencias para eso ejecutamos:

npm install webpack webpack-dev-server --save-dev

Ahora instalaremos algunos preset de Babel:

npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev

Nota: Recuerda que debes tener instalado babel, webpack y webpack-dev-server como lo indicamos en los pasos anteriores.

Ahora vamos a empezar a crear nuestra aplicación.

Primero creamos un archivo llamado webpack.config.js en tu editor favorito, este archivo es donde indicaremos como se compilará nuestro proyecto y donde se hará la transformación de JSX a Javascript, en este archivo colocamos lo siguiente:

module.exports = {
 entry: './main.js', //cual es la entrada de nuestra aplicacion
 output: {
   path: './', //donde colocará los archivos al terminar
   filename: 'index.js' //el nombre de nuestro bundle
 },
 devServer: { // opciones para el servidor de desarrollo
   inline: true, // para que se recargue automáticamente cuando cambie un archivo
   port: 3333 // puerto donde funcionará el servidor
 },
 module: {
   loaders: [
     {
       test: /\.js$/, //probamos por la extensión .js
       exclude: /node_modules/, //no queremos procesar los archivos en node_modules
       loader: 'babel', //utilizamos babel
       query: { //cargamos los presets que instalamos
         presets: ['es2015', 'react']
       }
     }
   ]
 }
};

Todo está comentado en el archivo para que lo puedan entender mejor.

Ahora creamos un archivo llamado index.html con el siguiente contenido:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Número Aleatorio</title>
</head>
<body>
 <div id="app"></div>
 <script src="index.js"></script>
</body>
</html>

Un HTML estandar donde agregamos un div con id #app que será nuestro elemento target para la aplicación e incluimos el index.js que es el bundle que crea Webpack como lo indicamos anteriormente.

Creamos un archivo llamado App.js donde crearemos nuestro primer componente, colocamos el siguiente contenido:

import React from 'react';
const App = React.createClass({
 getInitialState() {
   return { num: Math.ceil(Math.random() * 6) };
 },
 getNumeroAleatorio() {
   this.setState({num:Math.ceil(Math.random() * 6)});
 },
 render() {
   return (
     <div>
       <p>{this.state.num}</p>
       <button onClick={this.getNumeroAleatorio}>Lanzar</button>
     </div>
   )
 }
});

export default App;

Simplemente estamos creando un componente con JSX, con un estado inicial de un número aleatorio, una función que coloca el estado de num en un número aleatorio, el componente como tal que consiste en mostrar el número y un botón para actualizarlo que llama la función getNumeroAleatorio. Finalmente exportamos la clase. Puedes ver más de los componentes en el primer artículo de Introducción a ReactJS.

Luego creamos el archivo main.js donde mostraremos nuestro componente, en este archivo colocamos lo siguiente:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(<App />, document.getElementById('app'));

Aquí importamos la librerías necesarias y nuestro componente que acabamos de crear, luego indicamos con ReactDOM.render() que muestre nuestro componente App (primer argumento), y que lo asocie con el div con id app que creamos en nuestro index.html.

Por último modificamos nuestro archivo package.js, eliminamos la linea que dice test dentro de scripts y agregamos una nueva linea de start donde llamamos a webpack-dev-server.

{
 "name": "react-configuracion",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
   "start": "webpack-dev-server"
 },
 "author": "",
 "license": "ISC",
 "dependencies": {
   "react": "^0.14.7",
   "react-dom": "^0.14.7"
 },
 "devDependencies": {
   "babel-core": "^6.4.5",
   "babel-loader": "^6.2.2",
   "babel-preset-es2015": "^6.3.13",
   "babel-preset-react": "^6.3.13",
   "webpack": "^1.12.13",
   "webpack-dev-server": "^1.14.1"
 }
}

El cambio ocurre en la línea 7,  “start”: “webpack-dev-server”.

Guardamos todos los archivos y en nuestra terminal dentro del directorio del proyecto ejecutamos:

npm start

Nuestro servidor correrá en el puerto 3333 como lo indicamos en el archivo de webpack.config.js.

Abrimos nuestro navegador en:

http://localhost:3333

y deberíamos ver algo como:

Componente ReactJS

Si hacemos click en el botón nos debería mostrar un número aleatorio del 1 al 6.

Si cambiamos algo nuestro servidor debería recargar automáticamente, puedes probar cambiado la palabra lanzar en el botón en App.js por otra cosa y deberías verlo en el navegador sin necesidad de hacer click en botón de recargar.

Eso es todo por ahora, tenemos una base para nuestros futuros proyectos.

Cualquier duda o sugerencia puedes dejar un comentario.

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.

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.