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.