Cloud 9 un entorno de desarrollo en la nube

Hace unas semanas debido a una fuerte gripe, me tocó trabajar en casa para un trabajo que debía hacer una oficina donde tenía mi computadora con todo el entorno de desarrollo configurado. Sin embargo en la organización tenían configurado el servicio Cloud9 para poder trabajar remotamente.

Cloud9 es un completo entorno de desarrollo y ejecución en la nube, permitiéndote desde tu navegador web crear y ejecutar software web. El mismo posee un editor muy parecido a Sublime Text (de hecho muchos atajos del teclado son iguales), acceso a la terminal de un servidor y la posibilidad de configurar dependencias necesarias para ejecutar el programa: servidor web, framework, base de datos, etc.

Entorno de desarrollo de Cloud9

Entorno de desarrollo de Cloud9, todo se está ejecutando desde el navegador

El espacio de trabajo

El uso de Cloud9 es muy sencillo, primero debes configurar un espacio de trabajo (Workspace), actualmente (al menos en la versión gratuita) te ofrece entornos como LAMP, Django, NodeJS, puro HTML, Rails, entre otros. Luego de seleccionar el entorno especificas asignas un repositorio de control de versiones (creo que es impensable hoy en día hacer un proyecto sin eso), para obtenerlas fuentes, haces las configuraciones requeridas por tu aplicación y listo. Luego se encarga de correr los servicios necesarios y puedes acceder a tu aplicación web desde una URL.

Plantilla de espacios de trabajo disponibles en Cloud9

Plantilla de espacios de trabajo disponibles en Cloud9

¿Por qué usarlo?

La principal ventaja de usar Cloud9 es poder escribir el código de un programa, guardar, cambiarte de equipo o de localidad y seguir escribiendo código el mismo código sin problemas. Aunque puedes sacrificar privacidad (en la licencia no se ve nada extraño) es muy útil en casos donde trabajas en distintos lugares y no puedes cargar tu portátil (en mi caso me muevo entre casa, universidad y oficinas de clientes pero por la inseguridad no puedo cargar mi portátil en todos lados). Otro caso, como en el que descubrí la herramienta, en organizaciones pueden usarlo como respaldo en caso que un empleado necesite trabajar desde su casa u otro lugar de forma urgente.

Algo interesante, es que en pocos segundos puedes tener un entorno de ejecución funcional. Con unos clics puedes tener un servidor web hecho Django y empezar a trabajar en él (o estudiarlo), luego con otros clics tienes un entorno en Ruby. Lo cual es mas fácil que estar instalando dependencias y configurar servicios en tu sistema operativo.

El editor está realizado en Javascript y tecnología detrás de ella es un servidor NodeJS que crea contenedores en Docker, me parece interesante esta arquitectura. Algo que me parece “fácil” de replicar en otros servidores y poder contar con una solución similar.

Si deseas contar con IDE y entorno de ejecución que puedas usar en cualquier computadora sin estar descargando cosas, te recomiendo utilizar Cloud9. Lo único es que como toda nube, dependes de un tercero y a veces puedes desconfiar de la seguridad del mismo o de la calidad de protección de los datos. Aunque, me parece un buen entorno para aprender tecnologías o hacer experimentos rápidamente.

Sitio oficial de Cloud9

Hace 3 años en esa fecha: Breve resumen del FUDCon Día #3

Hace 5 años en esa fecha: ¡Feliz día del Blog!

Cómo crear pruebas unitarias y funcionales con Yii 1.x usando Composer

Si tienes configurado tu proyecto hecho en Yii 1.x para cargar las clases mediante composer y deseas realizar pruebas automatizadas, notarás que existen ciertas incompatibilidades entre Yii 1.x y el PHPUnit del repositorio de composer. A continuación te explicaré como instalarlo.

Instalación de las dependencias

Lo primero es instalar todos los paquetes necesarios para realizar las pruebas, todas se colocarán en la sección require-dev debido a que solo serán utilizadas durante el desarrollo y no en el servidor de producción para evitar bugs/exploits, ocupar espacio, rendimiento, etc. El paquete requerido por Yii es PHPUnit, pero al momento de desarrollo del framework, PHPUnit incluía varias funcionalidades que actualmente están disponibles en otros paquetes, por esta razón también debemos agregar php-invoker, phpunit-story y phpunit-runner. Ahora, si deseas utilizar fixtures (datos de prueba) o vas a realizar pruebas con base de datos debes agregar dbunit como dependencia, si vas a realizar pruebas funcionales agrega phpunit-selenium y finalmente, si utilizas un generador de pruebas (Netbeans incluye uno) agrega phpunit-skeleton-generator para con un clic generar un archivo de con los métodos de una clase para escribir pruebas.

Entonces la sección de require-dev en tu composer.lock debe quedar así:

"require-dev": {
 "phpunit/phpunit": "4.7.*",
 "phpunit/php-invoker": "*",
 "phpunit/phpunit-story": "*",
 "phpunit/dbunit": ">=1.2",
 "phpunit/phpunit-selenium": ">=1.2",
 "phpunit/phpunit-skeleton-generator": "*",
 "hot/phpunit-runner": "dev-master"
}

Luego ejecuta composer install y tendrás las dependencias en tu proyecto.

Configuración en Netbeans

Primero se debe configurar el proyecto para indicar cuales son las carpetas con los archivos y la configuración de phpunit a utilizar, para ello, haz clic derecho en el proyecto. En la parte izquierda entra a la sección de Testing, luego en la ventana de diálogo selecciona PhpUnit y en la selección de la carpeta, escoge /protected/tests/ para indicar que esa es la carpeta de pruebas del proyecto. Finalmente, en la parte inferior se debe seleccionar PHPUnit en la sección de Testing Providers

Selección de PHPunit en Netbeans

Selección de PHPunit en Netbeans

A continuación, en el panel izquierdo haz clic en PHPUnit, y en el panel derecho:

  • Selecciona la opción Use Bootstrap y selecciona la ruta /protected/tests/bootstrap.php
  • Activa la opción de Use Bootstrap for creating new tests
  • Selecciona la opción Use XML Configuration y selecciona la ruta /protected/tests/phpunit.xml
  • Use Custom PHPUnit Script y coloca la ruta /protected/external/phpunit/phpunit/phpunit

De esta forma le indicamos a Netbeans el uso de la configuración de arranque incluída en Yii y que utilice el script de PHPUnit que instalamos con composer.

Selección del PHPUnit de composer

Ahora necesitamos indicarle a Netbeans que utilice la plataforma de PHPUnit instalada con composer, de lo contrario puede utilizar la que viene incluida en el IDE o la del sistema operativo opertivo, las cuales son incompatibles con las clases incluídas en composer. Para cambiarlo, haz clic al menú Tools y luego Options, entra a la sección de PHP, selecciona la pestaña de Framework & Tools, luego en el panel izquierdo selecciona PHPUnit, y selecciona/escribe las siguientes rutas:

  • En la ruta de PHPUnit Scripts, coloca la ruta de phpunit de composer: /protected/external/phpunit/phpunit/phpunit
  • En la ruta de Skeleton Generator Script, /protected/external/phpunit/phpunit-skeleton-generator/phpunit-skelgen
Selección de scripts de PHPunit de Composer en Netbeans

Selección de scripts de PHPunit de Composer en Netbeans

Ejecución

¡Listo! Ya puedes ejecutar las pruebas desde la clase principal con F6 o desde la clase de pruebas con Alt + F6. Ademas, al hacer clic derecho en una clase, puedes entrar al menú de Tests y luego Create Tests para crear automáticamente los archivos pruebas, estos ya vienen con los métodos que debes escribir y métodos para ejecutar métodos antes de las pruebas.

Ahora no tienes excusa para probar tu software de forma automática utilizando Yii.

Hace 4 años en esa fecha: Conferencia de John Carmack en el Quakecon 2011

Hace 6 años en esa fecha: Nueva revista mensual de Archlinux

Cómo hacer que Yii 1.x cargue automáticamente las clases de Composer

Hoy en día si programas una aplicación en PHP, es muy probable que utilices composer para instalar y manejar las dependencias de tu programa; sin embargo, aunque es fácil de utilizar e instalar dependencias, muchas veces tenemos problemas para instanciarlas en nuestra aplicación por los distintos formatos existentes (debido a la distintas versiones de PHP) utilizados para la carga de clases.

Con Yii framework es posible configurar para que cargue todas las clases instaladas con composer automáticamente, para ello, debes comenzar agregando lo siguiente en tu archivo composer.json

"config": {
  "vendor-dir": "protected/external" //definimos la carpeta de instalación
},
"autoload": {
  "psr-0": {  //definimos el estándar a usar
   "config": "./",
    "": "src"
  },
  "classmap": ["protected/"] //CREO que define el namespace raíz de las clases
},
"require": {
  "php": ">=5.3.2", //la versión de php a usar
  "yiisoft/yii": "1.1.*", //la última versión de Yii 1.1
}

En tu archivo /index.php modificamos el atributo classMap de la aplicación Yii, para incluir las rutas de los componentes externos que han sido instalados con composer:

require_once($yii);
$loader = require(__DIR__ . '/protected/external/autoload.php');
Yii::$classMap = $loader->getClassMap();
Yii::createWebApplication($config)->run();

¡Listo! A partir de ahora se cargaran automáticamente, las clases ubicadas en las rutas definidas en /protected/config/main.php y todas las ubicadas en la carpeta protected/external. De esta forma, puedes instalar componentes/clases/liberías desde composer y automáticamente se integrarán a tu aplicación Yii.

Hace 7 años en esa fecha: LinuxTube: El Youtube de Linux

Hace 9 años en esa fecha: Mi primer theme de Splashy (para Debian)

Aumenta la seguridad de tu sesión en WordPress

Una de las principales preocupaciones de los usuarios de WordPress es el acceso al panel de administración, pues por defecto se encuentra en la ruta /wp-admin y está compuesto de un simple formulario que puede ser atacado por fuerza bruta. Por eso les voy a recomendar dos complementos para aumentar la seguridad de inicio de sesión de WordPress, al implementar autenticación de dos factores (Two Factor Authentication) y cambiar la ruta por defecto del formulario de inicio de sesión:

  • Rename WP Login: es un plugin muy liviano y sencillo, simplemente te permite definir una url personalizada para el formulario de inicio de sesión en la pantalla de enlaces permanentes, como por ejemplo http://tusitio.org/entrar-al-admin/. Aunque en el título dice que el plugin no tiene soporte, el autor se refiere a que no posee tiempo para resolver cualquier duda que se presente en los foros , sin embargo, acepta parches de código, nuevas funcionalidades, correcciones de bugs, entre otros. Por lo que puedes instalarlo sin preocuparte de que esté obsoleto.
  • Clef: un plugin recomendado por Manuel Camacho, consiste en una autenticación de 2 factores, es decir, aparte de brindar una información que solo tú conoces, debes dar información generada de un objeto que tienes contigo (el móvil o una tarjeta por ejemplo). En este caso, una vez que instalas el plugin la pantalla de inicio de sesión cambia a una especie de QR dinámico, el cual debes escanear con tu teléfono móvil a través de la aplicación Clef, una vez que reconoce el patrón único automáticamente inicia sesión en el sitio, lo chévere es que desde el teléfono controlas el tiempo de sesión e inclusive cerrarla remotamente. También se configurar para usar el inicio tradicional como respaldo en caso de que no tengas el teléfono contigo.

 

Clef en el blog

Ejemplo de como funciona Clef

Con estos 2 sencillos plugines que puedes instalar y configurar en poco tiempo, podrás aumentar la seguridad en tu sitio con WordPress, o mejor aún, el de tus clientes. Finalmente, si conocen alguna alternativa o desean compartir información adicional, no duden en dejar un comentario para mejorar la seguridad de nuestros sitios.

Hace 7 años en esa fecha: Record Mundial de Guitar Hero 3

Optimiza el HTML, CSS, JS e imágenes de tu sitio web con Gulp

Uno de los retos de los desarrolladores web al momento de crear páginas web, es encontrar el equilibrio perfecto entre ofrecer un sitio con excelente apariencia visual y usabilidad, pero cuyo tamaño sea lo menor posible para que la carga sea rápida. Pues un sitio web rápido permite: tener mas visitas con el rendimiento actual del servidor, se ahorran costos de ancho de banda, los usuarios sienten que es una buena página y navegan mas tiempo por ella, entre otras. Este procedimiento incluye varias tareas que realizan muchos desarrolladores web como: usar las versiones reducidas (comprimidas) de Javascript, comprimir y ofuscar nuestro código del lado del cliente,  optimizar las imágenes del sitio, comprimir los archivos CSS, combinar todos los archivos CSS y Javascript en un sólo archivo (para cada tecnología) para reducir el número de conexiones, etc. Algo que no es complicado pero consume tiempo y que se debe repetir cada vez que se hacen cambios en el sitio.

Gulp

Como este proceso es repetitivo y consume tiempo, lo mejor es hacer un script que automatice cada etapa, pero hoy en día existen herramientas como que nos permite facilitar todo lo mencionado anteriormente. En este artículo hablaré sobre Gulp, una herramienta para automatizar tareas que hace lo mismo que GruntJS pero es mas fácil de usar y entender.

¿Cómo empezar?

Para instalarlo, lo hacemos a través Node Package Manager de forma global para que se instale como un comando del sistema y poder ejecutarlo en cualquier parte:

npm install -g gulp

Luego en la raíz del proyecto creamos un archivo gulpfile.js donde especificaremos las tareas a realizar:

var gulp = require('gulp');
gulp.task('default', function() {
});

Añadir una tarea

Una tarea es un conjunto de procesos, por ejemplo, optimizar el código JS consiste en: reemplazar algunas liberias por sus versiones CDN, utilizar las versiones minificadas de librerías de terceros, luego concatenar los archivos, minificar y actualizar las referencias en el HTML. Cada uno de estos procesos podemos encontrarlos en el buscador de complementos de Gulp (en caso de no existir alguna puedes crearla y publicarla en Github) y se instalan con npm.

Gulp posee una importante característica: su sistema de flujos entre tareas. Cada una de ellas recibe un conjunto de data (generalmente archivos), realiza un proceso en ella y produce nueva data para ser enviada como entrada a otro flujo. Esto permite a tareas que modifiquen gran de archivos, hacer este procedimiento en RAM y solo escribir en el disco cuando ya se ha terminado de procesar todos los archivos, por lo que se ejecutará muy rápido.

Para verlo en acción, haremos una tarea para reducir el tamaño de los archivos JS como ejemplo, entonces nuestro primer paso es instalar el plugin uglify con NPM:

npm install --save-dev gulp-uglify

Luego se deben hacer dos cosas en el archivo gulpfile.js, una es importar esta el complemento en las dependencias y asignarla a una variable, luego con esta variable podemos ejecutar la función que se encargará de (en este caso) reducir el tamaño del código javascript. Para ello debemos hacer lo siguiente:

var uglify = require('gulp-uglify');
gulp.task('comprimir', function() {
gulp.src('lib/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist'))
});

Como podrás observar, hemos creado una tarea llamada comprimir , que recibe un conjunto de archivos (los archivos JS ubicados dentro de /lib), crea una tubería y ejecuta uglify que se encargará de comprimir cada uno de los archivos, finalmente entrega el resultado a la tubería que se enviará a la ruta de destino (esta se puede definir a donde uno desee). Así sucesivamente podemos ir creando procesos como los mencionados anteriormente y luego agruparlo en unas tareas mas generales, por ejemplo, tareas para generar una versión para depurar (cuya fuente no este comprimida), una versión para producción, una versión de producción para pruebas, entre otros. Esto lo puedes hacer al final haciendo algo como esto:

gulp.task('produccion', ['comprimir', 'copiar','cdn', 'less']);

Ejecutar las tareas

Finalmente puedes ejecutar el comando gulp en la raíz de tu proyecto y empezará a realizar todas las tareas de forma automática. En caso de que quieras ejecutar solo una tarea, puedes pasar por parámetro el nombre de la tarea:

gulp produccion

Con esto generas la versión de producción, o  por ejemplo, si tienes una tarea llamada less para generar los archivos CSS desde LESS, simplemente ejecuta:

gulp less

Tareas recomendadas

Para optimizar un sitio web, generalmente utilizo imagemin, jshint, minify-css, notify, imagemin-pngquant, uglify, usemin. Con estas puedo comprimir imágenes, mejorar el código javascript, concatenar archivos, reducir el tamaño, entre otros. Aunque te recomiendo leer un artículo de Addy Osmani sobre optimización de webs, pues lista una gran cantidad de tareas que puedes ir probando para usar al momento de mejorar tus sitios.

Finalmente, como te darás cuenta con Gulp puedes crear sitios web mas óptimos y ahorrando mucho tiempo. Existen una gran cantidad de tareas existentes que puedes agregar a tu proyecto y facilitar tu trabajo, por eso te recomiendo chequearlas en el buscador de plugins de Gulp y si no existe, puedes crearla y ayudar a otros programadores que necesiten algo similar.

Hace 3 años en esa fecha: Google Chrome para Android