Buen script que nos permite mover nuestras capas mediante drag&drop y cambiarlas de tamaño.
Funciona con posicionamiento relativo y absoluto de los elementos en la página. Además permite personalizar los estilos mediante CSS. No es obtrusivo. Es posible indicar tamaños máximos y mínimos para las cajas y es compatible con la mayoría de los navegadores.
DragResize
Vía / Ajaxline
Popcorn.js es una librería que permite sincronizar la etiqueta <video> de HTML5 con contenido que deseemos mostrar. Para ello utiliza las propiedades, métodos y eventos nativos de HTMLMediaElement. Además ofrece un sistema de plugins desarrollados por la comunidad:
document.addEventListener("DOMContentLoaded", function () {
// Create a popcporn instance by calling Popcorn("#id-of-my-video")
var pop = Popcorn("#video");
// play the video right away
pop.play()
// add a footnote at 2 seconds
.footnote({
start: 2,
end: 6,
text: "This footnote is the stepping stone of progress!",
target: "footnotediv"
});
}, false);Podéis ver algunos ejemplos bastante interesantes. Una librería muy útil para presentaciones y vídeos corporativos.
Mirando una entrada sobre cómo evitar que se puedan producir pérdidas de memoria en Javascript, me he encontrado con una extensión para Firefox que te avisa cuando se produce este tipo de situaciones.
De paso, comentaré los tres consejos que nos da para evitar esas perdidas de memoria, que nunca vienen mal.
La verdad es que estos problemas no me queda muy claro si se dan solo en Firefox o en otro navegador, aún asÃ, buenas costumbres a la hora de programar siempre son bienvenidas.
3 Easy Steps to Avoid JavaScript Memory Leaks
VÃa / Digg
HTML5 introduce una característica que puede mejorar sustancialmente las aplicaciones web, los WebSockets, los cuales permite crear un canal de comunicación bi-direccional entre el cliente y el servidor, solucionando los problemas que presenta Ajax o Comet. El ancho de banda ahorrado tiene una proporción de 500:1 y una latencia de 3:1, resultados increíbles que hacen que los de Google anden muy interesandos en esta tecnología (el ahorro en aplicaciones como GMail puede ser considerable).
Por ahora sólo funciona en Google, pero un código de ejemplo sería el siguiente:
if ("WebSocket" in window) {
var ws = new WebSocket("ws://websockets.org:8787"); //this service bounces messages back
ws.onopen = function() {
// Web Socket is connected. You can send data by send() method.
ws.send("message to send");
};
ws.onmessage = function (evt) { var received_msg = evt.data; alert(evt.data); };
ws.onclose = function() { /* websocket is closed.*/alert("WebSocket Closed!"); };
}else{
// the browser doesn't support WebSocket.
alert("Websocket is not supported in your browser");
}HTML5 Web Sockets: A Quantum Leap in Scalability for the Web
Vía / DZone
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
Sencillo pero efectivo método para paginar contenidos mediante Javascript. Puede ser muy útil cuando el diseño no permite grandes espacios para contenidos.
El funcionamiento es muy sencillo, se ocultan los contenidos y mediante los botones de paginación se van mostrando. La verdad es que no serÃa necesaria esta librerÃa, porque como ya he dicho el método es muy sencillo y nosotros mismos lo podrÃamos implementar, incluso mejorar, porque usa la librerÃa cssQuery unicamente para obtener los elementos, mientras que podrÃamos hacerlo nosotros mismos con un getElementsByTagName, si es que nuestras necesidades no son obtener elementos mediante sus estilos, rel u otras cosas.
Javascript pagination in yer face
Muchas veces los diseños no suelen ir de acuerdo con el aspecto de los radio y los checkbox que nos ofrecen los navegadores.
Crear controles que sustituyan los ya existentes puede darnos problemas de accesibilidad, salvo en este caso (bueno, y supongo que en otros), ya que lo que hace este script es aprovechar la funcionalidad de las etiquetas label para que el funcionamiento recaiga sobre estas etiquetas y no sobre las checkbox o los radio.
El script buscará los inputs radio y checkbox y los ocultará y cambiará el estilo de las label asociadas para que el funcionamiento sea el mismo.
ARC – Adam’s Radio/Checkbox customisation
VÃa / Infected-FX