La verdad es que trabajar con fechas en Javascript suele ser un poco pesado. Con Datejs podremos trabajar con fechas de una forma increÃblemente fácil y potente.
No se trata únicamente de un parseador, sino que ofrece muchas más funcionalidades.
Algunos ejemplos que nos pueden hacer ver la potencia de esta librerÃa son:
Algo que me gusta bastante de algunos editores tipo Netbeans es que cuando hay algún error en una línea aparece un enlace en el lateral en la posición relativa de la línea respecto al alto del editor.
Algo parecido se me ha ocurrido hacer con jQuery, obtener los elementos cabecera (H1..H6) y crear un índice, y mediante estilos y jQuery repartirlos por el lateral de la ventana.
El código es sencillito, recupero los elementos h1..h6, calculo su posición X y luego ordeno el array por esta posición, creo una lista ordenada y anidada con OLs y LIs y con CSS y Javascript coloco los elementos donde corresponde.
$(document).ready(function() {
var ids = 0;
var haches = new Array();
for (var i=1; i<7; i++) {
$('#content h'+i).each(function () {
if (!this.id) this.id = 'haches_'+ids++;
if ($(this).css('display') != 'none') {
haches.push(new Array($(this).offset().top, $(this).text(), this.id, i));
}
});
}
haches.sort(function(a,b){return a[0]>b[0];});
var ant = 1;
var html = '<ol class="indice">\n'
for(var i=0; i<haches.length; i++) {
if (haches[i][3] > ant) {
html += '\n<ol>';
} else if (haches[i][3] < ant) {
html += '\n</ol>';
}
html += '<li id="haches'+i+'" class="indice'+haches[i][3]+'"><span><a href="#'+haches[i][2]+'">'+haches[i][1]+'</a></span></li>\n';
ant = haches[i][3];
}
html += '</ol>\n';
$(document.body).prepend(html);
$('#indice').css('position: absolute; top: 0px');
var alto = $(window).height();
var max = $(document).height();
for(var i=0; i<haches.length; i++) {
console.log(parseInt(alto*haches[i][0]/max));
$('#haches'+i).css('top', parseInt(alto*haches[i][0]/max)+"px");
$('#haches'+i).css('left', ($(window).width()-50)+"px");
}
});
Ni que decir tiene que le faltan cosas por hacer, como por ejemplo moverlo según se mueve el scroll, pero para hacerlo en un rato no está tampoco muy mal. Los distintos tipos de enlaces a cabecera tienen sus estilos propios (feos pero propios) y cuando te pones sobre uno de ellos aparece el título enlazando al elemento en cuestión (esto también habría que refinarlo).
Supongo que lo de “encajar capas HTML” no es algo que se entienda muy bien, pero realmente se trata de eso. Este plugin de jQuery coloca las capas HTHL de tal forma que no queden espacios en blanco entre ellas (algo normal cuando se usa el css float).
Hay que tener cuidado, porque aunque nos devuelve un layout sin espacios en blanco, también nos lo da con un orden no muy usable, por lo que es importante no usar este plugin cuando el orden de colocación importa. jQuery Masonry
Vía / WebAppers
Ahora solo falta crear el controlador para las rutas de usuarios, dos en este caso:
GET /user/[user] para recuperar un usuario
PUT /user para crear un nuevo usuario
Lógicamente aún no hay nada de autenticación, por lo que cualquiera puede crear un usuario realizando una llamada PUT a la URL indicando userName, email y password.
Para comprobar la validez de los datos introducidos, usaremos joi. Usando las opciones de la ruta, indicaremos las reglas que deberá cumplir cada parámetro introducido. Así, para recuperar un usuario, se comprobará que user sea string, alfanumérico y que tenga una longitud de 3 a 20 caracteres:
Por último mostrar el código para crear un nuevo usuario. Primero se comprueba si existe un usuario con ese nickname o email. Si es así, se devuelve error usando boom, si no, se genera la contraseña encriptada (aquí no me he molestado mucho en ello, ya lo haré más adelante), y se crea el usuario usando el método create de moongose:
La jerarquía de las plantillas de wordpress permite definir diferentes plantillas para mostrar según el tipo de contenido. Por ejemplo, la template para mostrar el contenido de un post es single.php, pero si es un custom post type podemos crearnos la template single-miposttype.php y que use esa plantilla específica para mostrar los contenidos del custom post type. Si se trata de una página mostrará page.php, y así con todos los tipos de contenido.
Lo que nos encontramos en ocasiones es que queremos ejecutar un javascript específico asociado a esa plantilla, lo cual podemos hacerlo a la hora de añadir los scripts preguntando por el tipo de contenido. Pero si lo queremos hacer de una forma más automática, podemos añadir en el filtro template_include la acción de añadir el script.
add_filter('template_include', 'js_load_script_template');
function js_load_script_template($template) {
// Obtenemos el fichero de la template que se usa
$js = pathinfo($template);
$js = $js['filename'];
// Me gusta obtener la versión del theme para evitar caches
$my_theme = wp_get_theme();
$version = $my_theme->get( 'Version' );
// Si el fichero js existe, p.e. single-miposttype.js lo añadimos
if (file_exists(get_template_directory().'/js/'.$js.'.js')) {
wp_enqueue_script( $js, get_bloginfo('template_directory').'/js/'.$js.'.js', array(), $version );
}
// Tambien ejecuto el script relacionado con la plantilla generica, p.e. single.js
$js_part = preg_replace('#^([^\-]+)\-.*$#', '$1', $js);
if ($js != $js_part && file_exists(get_template_directory().'/js/'.$js_part.'.js')) {
wp_enqueue_script( $js_part, get_bloginfo('template_directory').'/js/'.$js_part.'.js', array(), $version );
}
return $template;
}
linkNotify es un plugin jQuery que permite modificar enlaces y mostrar un texto personalizado que indica que el enlace se está cargando. Algo que puede ser muy útil para aplicaciones en la que el usuario es algo básico y pincha y pincha en el enlace eternamente hasta que ve algún resultado sin esperar a que cargue la primera vez.
$('a').linkNotify('Espera mientras carga la pagina...');