enero 28, 2017

Infinite Scroll Page | DIY

Bueno hoy veremos como implementar esta cool feature para poder incorporarlas en nuestros desarrollos.
Para los que no estén muy familiarizados el infinite scroll page es un comportamiento que nos permite mostrar bloques de datos nuevos dentro de nuestra vista actual (pagina) conforme el usuario se acerca al final de la misma, eliminando la necesidad de un paginador.

Herramientas a usar:

  • jQuery. Para simplificar el JS coding.
  • JSON files. Chunks (bloques) de datos para ir incorporando.
  • HTML. Pagina de ejemplo.
  • jDebounce. jQuery plugin para diferir la ejecución de métodos.


Empecemos con el layout de nuestra página:
<!DOCTYPE html>
<html>
 <head>
  <title>Infinite Scroll Sample</title>
 </head>
 <body>
  <h1>Teachers</h1>
  <ul id="data"></ul>
  <script src="https://code.jquery.com/jquery-1.12.4.min.js" 
 integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" 
crossorigin="anonymous"></script>
  <script src="/debounce/jdebounce.js"></script>
 </body>
</html>

Como podemos ver ya agregué las referencias a jQuery y jDebounce. Ahora agregaremos un poco de código para realizar la carga de datos inicial.

<script type="text/javascript">
   jQuery(function($) {

    function printData(response) {
     var rootElement = $("#data");

     for (var i = 0; i < response.length; i++) {
      rootElement.append("<li>" + response[i].name + "</li>");
     }
    }

    function loadChuck(index) {
     var chunkURL = "data/chunk.json";

     $.get(chunkURL, null, printData, 'json');
    }

    loadChuck();

   });
</script>

Ya con la carga inicial de datos toca definir unos estilos para presentar mejor la información:
<style>
ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

li {
    border-bottom: 1px solid #ccc;
    padding: 15px;
}
</style>

Puedes modificar a gusto la presentación mientras se logre que el contenido se extienda mas allá de nuestro viewport.

Ya con la página lista agregamos el código para cargar más datos cuando se esté alcanzando el final del documento. Para ello debemos 'escuchar' el evento 'scroll' en el objeto document:

var document$ = $(document);
document$.on("scroll", function(ev) {
 // Haz lago
});


Ahora bien para poder determinar si estamos por alcanzar el final de los datos debemos entender 1 concepto fundamental: viewport.

El viewport no es más que la sección visible de nuestro documento HTML, que no es más que la ventana de nuestro navegador.  Cuando ajustas el tamaño de la ventana a un tamaño menor el área visible es menor y viceversa.

Si el tamaño de un documento HTML se extiende más allá del tamaño de nuestro viewport aparecen los scrolls (verticales/horizontales) que nos permiten navegar la totalidad del documento, mostrando una sección del mismo a la vez.

A nosotros nos interesan las longitudes verticales tanto del viewport como del document.

Para conocer el tamaño de nuestro viewport usamos:
$(window).height();
Para conocer el tamaño de nuestro documento usamos:
$(document).height();
También vamos a necesitar saber el número de pixeles recorridos en un scroll de nuestro documento, para ello usamos:
$(document).scrollTop();
Integrando todo nos queda algo parecido a esto:
var document$ = $(document);
var window$ = $(window);

document$.on("scroll", function(ev) {
    var offset = window$.height() + document$.scrollTop();
    // si estamos a 250px de alcanzar el final del documento
    if (offset + 250 >= document$.height()) {

        loadChuck(); // cargamos más datos
    }
});


Ya con todo esto debemos tener algo funcional pero falta optimizarlo un poco y aquí es donde entra en juego el jdebounce.

Debido a que el evento scroll en ciertos escenarios se dispara varias veces (mouse arrastrando la barra vertical) terminaríamos con el mismo número de ajax requests que quizá para este ejemplo no impacte mucho pero en un ambiente de aplicación podría ser algo muy costoso en términos de recursos por lo que retrasamos la ejecución del handler a través de un debouncing. Con esto nos aseguramos que sólo un request sea disparado a la vez.

Modificamos el último bloque de código para tener algo parecido a esto:

var document$ = $(document);
var window$ = $(window);

document$.on("scroll", $.debounce(function(ev) {
    var offset = window$.height() + document$.scrollTop();
    // si estamos a 250px de alcanzar el final del documento
    if (offset + 250 >= document$.height()) { 

        loadChuck(); // cargamos más datos
    }
}, 500));


Y listo, espero haya sido de su agrado.

Pueden descargar el ejemplo completo en este link
 Ahora pueden checar el código en github

agosto 21, 2014

JavaScript | CodeFights

Aburrido en tu trabajo?, No sabes en que matar el tiempo?, Ya leiste todo tu timeline de twitter y facebook? Trabaja un rato la mente con esta ingeniosa herramienta: Code Fights

La aplicación gira entorno a rounds, en cada round te muestra un fragmento de código que contiene un bug en una de sus lineas y tienes 60 segundos para encontrarlo y repararlo.

Por cada round que pases un marcado global se va alimentando en base a los segundos restantes en la prueba.

Si por alguna razón no logras pasar un round el marcador se reinicia a 0 y tienes que comenzar de nuevo a sumar puntos.

El único detalle es que los requerimientos de cada prueba están en Ingles, fuera de eso es un muy buen ejercicio.









agosto 14, 2014

JavaScript | Ocultar Elementos con PrototypeJS

Hace ya bastante que no escribía nada así que decidí retomarlo con una serie de ejercicios usando prototypeJS , vamos a empezar viendo como ocultar elementos con esta simple herramienta.

Teniendo un documento con la siguiente estructura:

<html>
<body>
    <div class="container">
        <ul class="elementos">
            <li>Maecenas vestibulum</li>
            <li>Nam adipiscing</li>
            <li>Phasellus a est</li>
        </ul>
        <p>Lorem ipsum</p>
        <p>Quisque malesuada placerat nisl.</p>
    </div>
</body>
</html>
Para empezar prototypeJS implementa la siguiente funcion:
Element.hide(elemento)
De tal forma que es posible hacer esto:
$$('.container')[0].hide(); // Ocultamos el elemento completo.
Ahora si quisieramos ocultar todos los hijos <p> de div.container tendriamos que hacer algo como esto:
$$('.container p').each(Element.hide);
Para ocultar todos sus hijos haríamos algo como esto:
$$('.container')[0].childElements().each(Element.hide);
Bastante sencillo no?

noviembre 25, 2013

octubre 01, 2013

musica | The Lumineers - Ho Hey

Aquí les dejo esta canción bastante interesante:

 

I've been trying to do it right
I've been living a lonely life
I've been sleeping here instead
So show me family
I do not know where I belong
I do not know where I went wrong
But I can write a song...

septiembre 27, 2013

JavaScript | Ejercicio.

Teniendo el siguiente codigo:

var name = 'Test';
var Person = {name:'Test2', getName: function(){return this.name;}};
var getName = Person.getName;

Person.getName();
getName();
Que salida producen las líneas 5 y 6, bonus: porque?

Saludos.

septiembre 25, 2013

Nano | Me dueles.

Siempre viendo hacia el horizonte, recorriendo nuevos caminos.
Y de la nada ese punzar en el alma que me recuerda lo lejos que aún estás.
Siempre riendome de la vida, al grado de rayar en lo simple.
Y de la nada ese punzar en el alma que me recuerda lo lejos que aún estás.
Siempre esforzandome en alejar a la gente, con una mezcla de humor negro y un poco de indiferencia.
Y de la nada ese punzar en el alma que me recuerda lo lejos que aún estás.

De repente la ira absoluta.
De repente me dueles.