Bitácora de desarrollo: septiembre 2014

viernes, 19 de septiembre de 2014

UBUNTU - MySQL - AWS - Conexión remota

En un servidor AWS le di salida al puerto de mysql pero no me podía conectar desde afuera (si ya se, no debería porque no es seguro :P ), entonces modifique el /etc/mysql/my.cnf y comente la línea de bind-address, reinicie el servicio y voilá!

jueves, 18 de septiembre de 2014

GRUNT - Handlebars

https://github.com/gruntjs/grunt-contrib-handlebars

'use strict';

module.exports = function(grunt) {

grunt.registerTask('default', ['watch']);

// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
handlebars: {
compile: {
options: {
namespace: 'handlebars'
},
files: {
'./js/templates/templates.js' : ['./hbs/*.hbs']
}
}
},
watch: {
handlebars: {
files: [
'./hbs/*.hbs'
],
tasks: 'handlebars'
}
}
});

grunt.loadNpmTasks('grunt-contrib-handlebars');
grunt.loadNpmTasks('grunt-contrib-watch');
};

GRUNT - Iniciando

Grunt es un script runner, su funcionalidad mayor es ahorrarnos el estar ejecutando diferentes comandos para generar nuestra aplicación.

En el Grunt, metemos toda la compilación, revisión de errores y hasta pruebas del sistema. Desde la compilación de JADE, Handlebars, uglify, concatenación hasta las pruebas en Mocha/Jasmine, pasando por deploy en directorios de producción o desarrollo (se recomienda un Grunt de desarrollo y un Grunt para producción)

http://gruntjs.com/

El que siempre vamos a incluir es el watch, que lo que hace es monitorear ciertos directorios y ejecutar tareas cuando haya un cambio en el o los directorios que se están monitoreando.

https://github.com/gruntjs/grunt-contrib-watch

miércoles, 10 de septiembre de 2014

BOOTBOX - Alertas y modales, dependiente de jQuery

Bootbox es un buen plug-in para mostrar alertas y modales, dependiente de jQuery.

Hace realmente lo mismo que se puede hacer con el plug-in modal (el normalito de siempre), pero la ventaja es que ya esta hecho, y solo se llama con javascript simple.

Fuente:

http://bootboxjs.com

Ejemplo:

var mensaje = {
                    message : "¿Desea eliminar el registro?",
                    buttons :{
                        cancel:{
                            className:"btn-danger",
                            label:"Cancelar",
                            callback:function(){
                                console.log("cancel");
                            }
                        },
                        confirm:{
                            className:"btn-success",
                            label:"Confirmar",
                            callback:function(){
                               console.log("success");
                            }
                        }
                    }
                }
                bootbox.dialog(mensaje);

martes, 9 de septiembre de 2014

JQUERY - Tips & Tricks

Escuchar cuando se envía una forma
.submit()

Obtener todos los campos de una forma
$('#formAdd input[type!="submit"], #formAdd select').each()
Para este caso, buscamos de la forma con id (#) y luego le decimos que todos los inputs, EXCEPTO los de tipo submit, y por último también le decimos que los select.

http://api.jquery.com/submit/

Para formatear numeros
Encontre un buen plugin: https://github.com/teamdf/jquery-number/
Muy fácil el uso:
$.(valor,num decimals)
$.(1234,2) -> 1,234.00

Emular dobleclick
.dblclick()

Obtener el contenido HTML de un elemento, o cambiarlo
.html()
.html('valor a poner')

Buscar elementos
.find()
Permite buscar elementos por su id, su nombre de tag, su class o alguna otra propiedad, y se pueden combinar elementos de búsqueda.
http://api.jquery.com/find/

$('.dataTables_scrollFootInner').find('#totalDebe').html('$ '+ $.number(totalDebe,2));
Busca primero por el class dataTables_scrollFootInner despues en lo que encontró, busca el elemento con el id totalDebe y por último asigna su valor HTML.

Ejercicios de jQuery
http://jqexercise.droppages.com/

Limpiar campos de forma
.trigger('reset')

Detener el envio de un form, cuando se cacha el submit
$('#formEncabezado').submit(function(event){
event.preventDefault();
});

Cambiar de tabs
$('#polizaTabs a[href="#detalles"]').tab('show');

JAVASCRIPT - Validación de Formas con Parsley

Excelente librería para la validación de formas HTML:

http://parsleyjs.org/

Algunos ejemplos:

lunes, 8 de septiembre de 2014

STACK DE DESARROLLO

El stack que vamos a utilizar es como sigue:

Backend

Node
Bower
MongoDB (mongoose y el driver nativo)

Frontend

jQuery
Handlebars
Bootstrap
underscore
JADE
Backbone
Marionette
y por supuesto lo nativo de HTML5, CSS3 y JavaScript

Para generar código

Grunt
+ Watch
+ las herramientas de jade y handlebars
+ para producción ya utilizamos concat y uglify

Tests

Mocha

A probar

Quiero ver que tan bueno es el plug-in "reload" de Chrome, donde detecta cambios en el source y recarga solita la página, no es mucho pero... al final es un clic o dos extras que te ahorras jeje.

BOOTSTRAP - Iniciando

Básicament bootstrap es un template CSS que permite hacer páginas responsivas. A muy grandes razgos eso hace.

Hay muchos elementos ya hechos en los temas default de Bootstrap, pero hay muchos más en la red. El que mas sugiere Cristian es:

http://themeforest.net/tags/bootstrap

En themeforest hay un montón, no solo de bootstrap, si no de Wordpress y temas así. Todos (o la mayoría) cuestan, pero valen la pena y no son caros.

Mucho de lo de bootstrap, es el grid y básicamente es que tiene que cubrir 12 columnas. Ya sea 12 elementos de 1 columna, o 1 elemento de 12 columnas, o una combinación cualquiere que en un renglón de 12 columnas:

6+6
4+8
3+3+3+3
12
10+2
etc

El que estamos usando en G4, es TODO:

http://flatfull.com/themes/todo/index.html
http://flatfull.com/themes/todo/docs.html

Algo super importante también son las clases vbox y hbox que pre-arman (o acomodan) contenido. En el vbox el chiste es meter otros elementos de forma vertical, por ejemplo un header, seguido de un section y finalizas con un footer. En el caso de hbox es meter contenido vertical, por ejemplo un aside, seguido de un section, finalizando con otro aside. Estas dos clases son la base para todos los templates de este estilo y ayudan mucho, pues el tema automáticamente agrega clases necesarias.

Por ejemplo en un hbox si tengo un section y un footer, el tema automáticamente al section le agrega un margen inferior, para que no se encime al footer, y cosas así.

HANDLEBARS - Iniciando

Handlebars le agrega un poco de lógica al front end. Algo como lo que anteriormente se hacía con JSP o PHP, al tener ciclos y helpers. Se me hace super útil también para internacionalización, pues solo se le pasa un JSON y handlebars reemplaza las cadenas {{cadena}} con los keys que hay en el JSON.

Tiene dos formas de operar, una es compilación en el browser, y la otra es precompilación, para lo que se requiere Node. Vamos a usar la segunda, pues es significativamente más rápido para hacer el render.

De entrada, lo que hemos visto hasta ahora, es poner {{key}} en el HTML, y despues compilarlo, esto genera un archivo JS que se va a incluir en el HTML, y luego en el HTML lo invocas por medio de JavaScript y lo insertas donde lo necesitas.

Lo que hice hoy, fue incluir la semántica de Handlebars, dentro de mi archivo Jade. Al compilar el Jade me deja el HTML con la semantica {{}} y luego compilo el handlebars para obtener el JS.

Primero lo instalamos:

sudo npm install handlebars -g

Y el código que hice en Jade:

section(class='hbox stretch')
aside(class='aside-sm bg-dark')
a(href='#',class='nav-brand',data-toggle='fullscreen')
img(src='images/{{logo}}')
aside(class='bg-black')

La única intención ahí es de pasarle la imagen del logo, para que sea dinámica, ya compilado por Jade se ve así:

<section class="hbox stretch">
<aside class="aside-sm bg-dark">
<a href="#" data-toggle="fullscreen" class="nav-brand">
<img src="images/{{logo}}"/>
</a>
</aside>
<aside class="bg-black"></aside>
</section>

Y ya teniendo ese HBS, entonces lo compilo con:

handlebars headerLogo.hbs -f headerLogo.js

Para incluír este template en mi código, hice lo siguiente en JavaScript - jQuery:

var headerLogoTemplate = Handlebars.templates['headerLogo.hbs'];

var headerLogoData = {logo:"logo.png"};

var headerLogoHTML = headerLogoTemplate(headerLogoData);

$('#headerLogo').append(headerLogoHTML);

Donde headerLogo es un tag header de HTML, aunque este último también lo estoy haciendo con JADE.

Al parecer la versión de handlebars que me descargo, la 2.0.0, es medio beta aún, me comenta Linus que hay que usar la 1.3, y esto funciona con Grunt.

También se puede utilizar con Backbone, pero eso lo haré más adelante, primero quiero dominar bien Jade y Handlebars que son mas sencillos, y luego paso a Backbone.

* IMPORTANTE SI SE USA GRUNT

El contrib-handlebars compila con la versión 1.3, por lo tanto, si se va a utilizar Grunt (que es lo mas normal), hay que utilizar la versión del runtime que soporta el contrib, si no, no funciona.

Ejemplo con 1.3, en el JavaScript de la aplicación

var hbs = function (name) {
return handlebars['./hbs/'+name+'.hbs'];
};

var templates = ['detalles','encabezado'];
for(var i=0;i<templates.length;i++){
var hbstemplate = hbs(templates[i]);
var hbsdata = {};
var hbshtml = hbstemplate(hbsdata);
$('#'+templates[i]).append(hbshtml);
}

JADE - Iniciando

JADE es un engine template, que nos ayuda a teclear bastante menos código HTML al hacerlo mucho más compacto y con atajos.

Básicamente funciona con identación, por lo que es super importante tener cuidado para que la anidación de tags, funcione correctamente.

El elemento por default es "div", y si no se especifica en un renglón el elemento a crear, asume que es div (como Backbone)

A un elemento, se le pueden asignar propiedades, la mayor parte de las veces seguido de paréntesis:

section(class='clase1 clase2')

También puede ser directo:

section.clase1

Si queremos ponerle un id, solo ponemos #<id> después del elemento:

section.clase1#idelemento

Y así, para todos los tags. Se le pueden pasar variables, para esto a un tag, se le pone un = y después el nombre de la variable, como por ejemplo:

title= pageTitle

En este caso al generar el HTML, se le pasan los datos y se sustituye pageTitle por el valor de esa variable.

Algunos importantes para iniciar, son:

doctype html
html
head

Instalación (requiere Node):

sudo npm install jade -g

Para generarlo, con línea de comando (más adelante voy a ver como hacerlo con Grunt, porque esta de flojera hacerlo así cada cambio):

jade < source.jade > output.ext

Este obtiene source.jade, genera el HTML y lo deja en output.ext (por ejemplo output.html, output.hbs, etc)

Si el nombre del source es igual que el destino, salavo la extensión, entonces directo:

jade source.jade

CSS - Tips & Tricks generales

Para acomodar un renglón dentro de un elemento

line-height

Fuente:

http://www.w3schools.com/cssref/pr_dim_line-height.asp

Overflow

La explicación es, razonablemente lógica, que indica hacia donde puede "sobresalir" el elemento, si a ningun lado, a uno específico o automático.

CSS - jQuery > Double Click

Encontré la función dblclick() de jQuery para emular (obviamente!) el double clic, esto se lo integre al data table (también de jQuery).

El problema surgió cuando al dar doble clic, se quedaba seleccionado el renglón o el texto, todo feo, entonces Cristian Hurtado me recomendo utilizar:

-webkit-user-select: none

Es una propiedad de CSS para que en un elemento, o todo el body, no se pueda seleccionar nada, esto resolvió el problema. No se puede seleccionar, pero por supuesto se puede hacer clic o doble clic.

Recursos:

http://api.jquery.com/dblclick/

https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

Objetivo

El objetivo de este blog, es ser una memoria técnica para la tecnología que voy aprendiendo en el desarrollo.

Incluye desde tips, hasta pasos de instalación.

Va a incluir de todos los lenguajes usados, en el encabezado especificando claramente de que se trata, y de que lenguaje.

Puede ser Java, PHP, Node o tecnologías para SPA; así como Mongo, Redis, MySQL y otras RDBMS.

Tips y aprendizaje también de APIs de diferentes proveedores de nube, como Amazon, Heroku, Opticalcube, SoftLayer y Rackspace.