Ir al contenido principal

Destacado

Node | Debug nestjs app en vscode

Recientemente me encontré trabajando en un proyecto basado en nestjs y una cosa que me sorprendió fue la cantidad de console.log distribuidos por todo el repositorio, señal de que el equipo lo usaba como su principal forma de depurar. Un poco old school para mí gusto para ser sincero, así que, ¿Por qué no usar vscode a tu favor? La siguiente configuración ademas de correr la app,  enlaza  el debugger al proceso node. En MacOS:   Ejecutar > Agregar configuración... Listo, ya podemos poner breakpoints en donde lo requiramos, sencillo no? C you space cowboy!

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

Comentarios

Entradas populares