Similar Posts
WebSockets en HTML5
ByLuis
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
Laboratorio: borrar filas de una tabla en Javascript
ByLuis
Viendo el otro dÃa la entrada de aNieto2K, recordé el efecto que usa WordPress para resaltar que se ha borrado una fila de una tabla en las herramientas de administración. Se trata de pintar progresivamente la fila en rojo y luego borrarla, consiguiendo asà que el usuario se percate de qué ha pasado.
Read More “Laboratorio: borrar filas de una tabla en Javascript”
Laboratorio: shortcuts en formularios
ByLuis
Algo a lo que suelo estar acostumbrado es a usar el teclado para realizar ciertas acciones (shortcuts), cuando estás 8 horas diarias delante de un ordenador, si no haces uso de los shortcuts, perderás mucho tiempo moviendo el ratón de un lado para otro.
Antes el uso estaba más restringido a las aplicaciones de escritorio (CTRL + S para guardar el documento, ALT + F4 para cerrar la ventana, …), pero ahora que cada vez se usa con más frecuencia aplicaciones web, se echan en falta estas facilidades. Aunque hay que decir que últimamente se ven con más frecuencia: TAB + INTRO para enviar un correo en GMail (claro que esta no se programa), CONTROL + S para guardar una entrada en Blogger, …
Añadir números de línea en highlight.js
ByLuis
Aprovechando la versión 1.2.0 de Snippet Block, comparto cómo añadir números de línea al código formateado por highlight.js.
El desarrollador del plugin pasa de añadir esta característica a la librería, lo cual me parece muy bien, que cada uno haga lo que quiera con su código. Pero como tampoco hay eventos o algo que permita añadir características, es necesario “hackear” la función antes de su uso.
document.addEventListener( 'DOMContentLoaded', () => {
const prevHighligth = window.hljs.highlightBlock;
window.hljs.highlightBlock = block => {
const newline = '<span class="sw_new_line"></span>';
// Replace all without regex
block.innerHTML = block.innerHTML
.split( newline )
.join( '' );
prevHighligth( block );
if ( block.classList.contains( 'sw_show_line_numbers' ) ) {
block.innerHTML = newline +
block
.innerHTML
.replace( /\n/g, `\n${ newline }` );
}
};
} );¿Qué es lo que hace este código? Primero guarda el método original highlightBlock para usarlo posteriormente. Y luego se modifica el método para apadir una clase para mostrar los números de línea al principio del código y después de cada salto de línea.
Ahora toca explicar la parte CSS, para ello usaremos CSS counters.
pre code {
counter-reset: linenumber;
}
pre code .sw_new_line::before {
content: counter(linenumber, decimal-leading-zero);
counter-increment: linenumber;
padding-right: 15px;
font-size: 0.8em;
opacity: 0.6;
}Permitir el botón atrás en aplicaciones dinámicas
ByLuis
Cuando realizamos aplicaciones dinámicas, ya sea usando Ajax o mediante javascript mostrando u ocultando contenidos, nos podemos encontrar con el problema de que el usuario pulse el botón ‘Atrás’ del navegador creyendo que accederá al contenido anterior. El resultado de esa acción será en la mayoría de los casos que el usuario acceda a la página anterior y no al ‘contenido’ anterior.
Para solucionar esto, lo que se debe hacer es que las acciones dinámicas sean realizadas mediante enlaces (#), por ejemplo, si queremos usar pestañas podemos acceder a #tab1, #tab2, …, #tabn. Si vamos atrás en el navegador continuaremos en la misma página pero en otra sección (#).
Para tratar esto mediante jQuery se puede hacer usando el siguiente código:
$(window).bind('hashchange', function () {
// hacer lo que sea para mostrar el contenido
});Vía / CSS Globe
¿El futuro de Javascript?
ByLuis
El creador de Javascript habla del futuro que tendrá, al menos ECMA. Una de las opciones que indica es la posibilidad de añadir propiedades a objetos e indicar setters y getters (indicar y recuperar el valor).
Object.defineProperty(obj, "length", {
get: function() {
return this.computeLength();
},
set: function(value) {
this.changeLength(value);
}
});