The Sexy Curls jQuery Plugin nos permite crear esquinas dobladas simulando páginas de forma muy sencilla con jQuery. Para su funcionamiento también es necesario jQuery UI.
Su uso es sencillo, creas una imagen, le asignas un id y ejecutas el siguiente código:
$(document).ready(function(){
$( '#target' ).fold();
})Los directorios suelen ser muy útiles para tener organizada la información, pero también puede ser un poco complicado encontrar lo que buscamos si es que existen muchas entradas en el directorio. Por eso, en esta entrada, vamos a explicar cómo añadirle un buscador para que solo nos muestre las entradas que coinciden con un texto (para ser más precisos, con una expresión regular).
Esta vez quiero hacerlo usando JSON, normalmente lo hago usando Javascript sencillo porque como no sé si la gente que mira nuestras entradas es entendido o viene buscando a través de Google, pues cuanto más sencillo de entender, mejor, y si luego la persona quiere hacerlo mediante JSON, pues que sepa cómo se hace normalmente. Lo importante es entenderlo, luego si se quiere que se haga un copiar/pegar.
Cal Henderson, desarrollador jefe de Flickr, nos hace una serie de recomendaciones para agilizar nuestra web. Iré explicándolas e intentando aportar mi propio punto de vista sobre ellas, de todas formas, es algo muy recomendable para leer.
Impresionante librería para incluir elementos UI en nuestras aplicaciones javascript. Contiene los siguientes elementos:
MooMonth es un calendario para MooTools que nos permite ver en nuestra aplicación los meses y las tareas o anotaciones de cada dÃa.
Altamente configurable, tiene efectos curiosos como las transacciones entre meses o la ampliación de un dÃa del mes. Aún está en fase alpha, pero por ahora tiene muy buena pinta.
MooMonth
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
Javascript Lint es una aplicación (también online) que nos permite comprobar que nuestro código no tenga los errores más comunes en Javascript, asà como el uso de técnicas cuestionables.
Basada en el motor de Javascript de Firefox, nos muestra los siguientes errores: