Posts en tips

Imágenes de producción en ambiente local con nginx

Uno de los procesos más comunes y más útiles a la hora de desarrollar un nuevo sitio web, es la creación de multiples ambientes de trabajo para asegurarnos de que nuestros cambios o nuevas funcionalidades funcionen a la perfección antes siquiera de acercarse a producción.

Al mismo tiempo, uno de los problemas más comunes en estos casos es el desconecte entre nuevos ambientes, no es raro tener 3 bases de datos distintas entre local, staging, y producción.

Lo ideal, es que cada uno de estos ambientes sea una copia exacta de producción, teniendo el mismo “servidor” (o amenos algo lo más parecido), la misma base de datos, y en casos cada vez más comunes, los mismos archivos multimedia.

El problema

Mientras que para la base de datos, u servidores, no es tanto problema recibir una copia que podemos utilizar en nuestro sistema local, los archivos multimedia por lo general tienen un tamaño mucho mayor, y por lo tanto algunas veces resulta en una perdida de espacio el tener varias copias del mismo para cada uno de nuestros ambientes, especialmente con imágenes que muchos sistemas recortan, creado más y más copias de la misma imagen.

La solución

La solución en estos casos es en realidad bastante sencilla, lo único que necesitamos hacer es: usar nuestros archivos de producción en nuestro local.

Los pasos para esto pueden variar, pero en mi caso, utilizo normalmente nginx, y los pasos para esto son, encontrar el archivo de configuración (normalmente default.conf ó site.conf) . Dentro de éste archivo agregaremos una etiqueta de location, para que se vea como éste ejemplo:

Ahora, cada que mi servidor reciba una petición hacia uno de los archivos que he definido, en vez de buscarlos en mi servidor local, los buscará en mi servidor de producción, dándome la imagen real que tengo en producción sin necesidad de copiarla localmente.

Eliminar elementos de un array en Javascript

Muchas las cosas más sencillas son las que más dolores de cabeza nos llegan a dar, a pesar de tener muchos años de experiencia en el mundo del desarrollo web, aún tengo que Googlear las cosas más básicas prácticamente todos los días.

Es por eso que he decidido simplemente crear mi propia versión de estos tips, para así tener una referencia en mi sitio cuando inevitablemente tenga que buscarlos de nuevo, ésta vez. Remover elementos de un array en Javascript

El problema, como muchas cosas en la vida, (y en Javascript) es que no es tan simple como debería, y, como muchas cosas en la vida (y en Javascript) hay muchas maneras de hacerlo.

Remover un elemento utilizando .splice()

El método .splice() es probablemente la forma más fácil de manipular arrays, nos permite agregar, reemplazar, o eliminar un cierto elemento en base a su índice, ejemplo:

La ventaja de este método es: En realidad no elimina el elemento del array, si no que lo mueve. Básicamente el método regresa cualquier valor que se ha eliminado del array, en este caso lo guardamos en una nueva constante, para uso en un futuro.

Otro punto a notar, es que podemos quitar varios elementos utilizando éste mismo método, simplemente debemos aumentar la cantidad en el segundo argumento.

Remover el último elemento utilizando .pop()

El método .pop(), es algo así como el opuesto de .push(), mientras que .push() Agrega un nuevo elemento al final de un array, .pop() elimina el último elemento de un array, ejemplo:

Al igual que .splice(), .pop() regresará el elemento “removido” para que podamos usarlo en un futuro. Sin embargo, nótese que en ésta ocasión recibimos un string, y no un array.

Remover el primer elemento utilizando .shift()

El método .shift(), es el opuesto a .unshift(), y éstos a su vez son opuestos a .pop() y .push(), mientras que éstos últimos trabajan al final del array, los primeros hacen su magia al comienzodel array.

.shift() eliminará el primer elemento en nuestro array, ejemplo:

Una vez más, nótese que el valor que recibimos es un string

Remover un elemento en base a su valor

Hasta ahora hemos visto cómo eliminar elementos en base a su índice, pero, ¿Qué pasa cuándo necesitamos remover algo an base a su valor?

El procedimiento es parecido, pero en éste caso necesitamos primero encontrar el índice del elemento con ese valor.

Para encontrar el índice podemos utilizar .indexOf(), y lo utilizamos en conjunto con .splice(), ejemplo, quitemos “bar”:

Nótese la comparación para asegurarnos de que el índice existe, si no existe, regresará -1. Usualmente una comparación fallida regresaría 0, (traduciéndose a false), pero como los arrays comienzan en el índice 0, no nos ayudaría mucho ¿Cierto?

Remover elementos utilizando .filter()

Por último, podemos utilizar el método .filter() para crear un nuevo array con los valores deseados, técnicamente éste método no elimina los elementos del array, ya que el array original no cambia. Ejemplo, creemos un nuevo array sin “bar”: