Bug en el método UTC del objeto Date de Javascript

ByLuis

O al menos en Firefox. Se trata de que si quiero obtener el timestamp de una fecha usando el método Date.UTC me devuelve datos incorrectos.
Por ejemplo, en esta llamada Date.UTC(2008, 3, 2, 18, 33, 32) (el mes es abril porque empieza desde 0), se verá que da un el timestamp 1207161212000, mientras que si creamos un objeto Date y obtenemos su timestamp (new Date(2008, 3, 2, 18, 33, 32)).getTime() obtenemos el timestamp 1207154012000, habiendo 2 horas de diferencia.
Habrá que tener cuidado

Similar Posts

Indicar calidad de la password con Javascript

ByLuis

Ya hace tiempo comentamos como indicar la calidad de una contraseña mediante Javascript y esta vez vamos a mostraros otro ejemplo de cómo hacerlo.
passwordmeter.png
En esta ocasión se van a usar dos scripts, uno de ellos está basado en el algoritmo de Javascript Password Strength Meter, el cual mide que la contraseña tenga más de 8 caracteres, tenga minúsculas y mayúsculas, algún número, use caracteres especiales y use L33t.
En este caso el formulario se realiza con Ext Form, una gran librería, pero no me gusta que el formulario se cree mediante javascript.
Password Meter
Vía / WebAppers

SocialHistory.js: conoce los lugares que ha visitado los usuarios de tu web

ByLuis

Interesante script que nos permite saber si un usuario ha visitado alguna página, centrada en sitios sociales tipo Facebook, Digg, … aunque se puede ampliar a cualquier web.
La idea es brillante, se crea un iframe, inserta enlaces a las páginas que deseas saber si ha visitado o no, modifica los estilos para ocultar los enlaces visitados (a:visited {display: none}) y luego pregunta por cada enlace si ha sido visitado o no (el estilo debe ser display: none si ha sido visitado).
No es fiable al 100% pero es bastante efectivo.
Vote! How to Detect the Social Sites Your Visitors Use
Vía / WebAppers

6 razones para utilizar librerías o frameworks Javascript

ByLuis

Últimamente los frameworks de Javascript que aparecen son cada vez más numerosos, y aunque ya en alguna ocasión hemos hablado de esto, no está mal recordar y añadir otros puntos por los que deberíamos usar estas librerías o frameworks.

  • No reinventes la rueda: no pierdas en tiempo en hacer algo que ya han hecho otros y que además dan buen resultado.
  • Haz más con menos código: estas librerías suelen permitir encadenar código, por lo que con menos código se consigue menos espacio, mejor mantenimiento y menos tiempo de desarrollo.
  • Ahorra tiempo: por mucho que te guste programar en Javascript, ahorrarás tiempo al realizarlo mediante estas librerías.
  • No eres el mejor programador: por mucho que tu ego te diga que eres bueno, los hay mejores. Además, estas librerías suelen estar apoyadas por una comunidad que hace mejorar el trabajo.
  • Velocidad: estas librerías suelen ser muy rápidas a la hora de realizar las acciones. Visita esta página para comprobarlo.
  • El código se entiende mejor: el código base de Javascript puede ser más complicado de leer y entender.

6 Reasons To Use Javascript Libraries & Frameworks

Librería Javascript para hacer zoom en imágenes

ByLuis

FancyZoom es un script que nos permite realizar zoom de nuestras imágenes mediante Javascript. Hace aparecer la imagen mediante un zoom progresivo y transparencia. Además muestra el title del enlace en un recuadro.
fanzyzoom.png
Las imágenes ser precargan automáticamente cuando el ratón pasa por encima de la imagen, por lo que se reduce la demora en la persentación. El único fallo que encuentro es que hay que añadir un onload en el body, pero bueno, podemos cambiar la librería para que se haga automáticamente.
FancyZoom

|

El rendimiento de Google Instant Previews

ByLuis

Algunas veces no nos paramos a pensar en los cambios que añade una web, en este caso Google, los problemas que pueden aparecer en tema de rendimiento. Y estos problemas suelen ser fundamentales a la hora de la impresión que se lleva un usuario de la web, claro, que Google no se caracteriza por problemas de rendimiento y los expertos que están trabajando allá deben ser de lo mejorcito que existe.

Después de este rollo introductorio, me gustaría apuntar los 3 aspectos que utiliza Google para mejorar el rendimiento que se centran sobre todo en la reducción del número de peticiones HTTP:

  • Compilación de Javascript: mediante Closure Compiler, consigue reducir el tamaño de los ficheros js, reutilizar variables, …
  • JSONP bajo demando: JSONP permite envolver la respuesta JSON con una llamada Javascript. Se realizan llamadas directas al script en vez de usar Ajax, lo cual permite hacer llamadas crossdomain y que el navegador lo cachee perfectamente. El problema es que si se añade la llamada con un createElement, el navegador se queda cargando, por lo que es mejor meterlo entre un setTimeout.
  • DATA URIs: es un método de añadir contenido en URLs usando base64, el problema es que IE8 sólo admite DATA URIs de 32k, por lo que dividen las imagenes en trozos y los “empalman” con etiquetas IMG. También han comprobado que aunque base64 añade hasta un 33% del tamaño, como lo devuelven en gzip, el tamaño final es más o menos el mismo.

Está claro que hay que aprender de los que saben.

Instant Previews: Under the hood

Vía / High Scalability

Hapi.js + Vue.js avatar

Hapi.js + Vue.js avatar

ByLuis

En esta nueva versión se ha añadido el poder subir el avatar, recortando la imagen usando la librería Cropper.js y para ello también se usará Vuex para guardar el avatar y que se actualice en toda la app.

Para subir la imagen se usará el siguiente método.

this.cropper
	.getCroppedCanvas( this.outputOptions )
	.toBlob( blob => {
		new ApiFectch()
			.updateAvatar( blob )
			.then( response => {
				if ( response.response ) {
					success( response.message );
					this.avatar = avatar + '?cache=' + new Date();
					this.$store.commit( `user/${ USER_SET_AVATAR }`, new User().getAvatarURL( userData.username ) + '?cache=' + ( new Date() ) );
				} else {
					error( response.message );
				}
			} );
	} );

Para manejar todo habrá que usar Vuex con módulos, por ejemplo, para el módulo user:

import { USER_SET_AVATAR, USER_SET_USERNAME } from '../mutation-types';

const state = {
	avatar: null,
	username: null,
};

const mutations = {
	/**
	 * Sets avatar
	 *
	 * @param {Object} mutationState Vuex state.
	 * @param {String} avatar Avatar string.
	 */
	[ USER_SET_AVATAR ]( mutationState, avatar ) {
		mutationState.avatar = avatar;
	},

	/**
	 * Sets username
	 *
	 * @param {Object} mutationState Vuex state.
	 * @param {String} username User name.
	 */
	[ USER_SET_USERNAME ]( mutationState, username ) {
		mutationState.username = username;
	},
};

export default {
	namespaced: true,
	state,
	mutations,
};

Aquí está el código