Categoría: JavaScript • JnjSite.com

Datatables: filtrando entre rangos de fechas por columnas

2021-02-20 - Categorías: General / JavaScript

¡Hola de nuevo! Comparto aquí otro codekata o howto. Simplemente es una forma de filtrar entre fechas por columnas usando Datatables. Nunca lo había hecho, y buscando por Internet no he encontrado la solución, así que jugando un poco con JavaScript, aquí que lo dejo..

Partiendo de un post anterior sobre Datatables con botones, lo he reescrito para permitir el filtrado entre fechas. Posiciona en la segunda columna unos campos de texto. Y al poner dos fechas, una fecha desde y una fecha hasta, entonces filtra los datos de la tabla mediante JavaScript.

Continuar leyendo..

JavaScript: el ABC con svgMap para hacer mapas del mundo

2021-02-06 - Categorías: JavaScript

Hoy vengo a compartir otra joya del software. Se trata del svgMap, una librería de JavaScript con la que se pueden hacer mapas vectoriales fácilmente con los datos que quieras.

Se pueden colorear, son responsive con lo que se adaptan al dispositivo, muestran los datos en un popover al pasar el ratón por encima. La documentación está de lujo. Y además es un proyecto con licencia MIT, con lo que se puede utilizar en cualquier tipo de proyecto.

Este post es un howto o codekata para generar un array de datos JavaScript en forma de objeto, y así empezar a usarlo cargándole muchos datos.

Continuar leyendo..

Editando JavaScript al vuelo sin recargar la página

2021-01-30 - Categorías: JavaScript

JavaScript, editando el código al vuelo sin recargar la página..

Ya estoy por aquí de nuevo, compartiendo un howto o truco para programar con JavaScript al vuelo, sin recargar la página. A fecha en que escribo este post, sólo he encontrado esta funcionalidad en uno de los navegadores más usados. Estoy hablando de Google Chrome, que te permite editar al vuelo el JavaScript, en el inspector de código fuente.

El poder editar los códigos fuentes sin recargar la página es algo habitual entre los navegadores, pero no con JavaScript. Normalmente los navegadores te permiten editar los fuentes HTML y CSS. Pero Google Chrome ha llevado a otro nivel esta funcionalidad, permitiendo además el editar el código JavaScript, de cualquier página web, al vuelo y sin recargar la misma web para aplicar los cambios.

Continuar leyendo..

Implementando con JavaScript arrays asociativos, listas, pilas y colas

2021-01-23 - Categorías: JavaScript

Este es un pequeño howto, un codekata resumen, de las principales formas para organizar información en vectores o arrays en JavaScript. Lo mismo se puede usar para organizar en forma de vectores de vectores, o lo que es lo mismo, para matrices.

Continuar leyendo..

Datatables con botones para CSV, Excel, PDF e imprimir

2021-01-10 - Categorías: JavaScript

Comparto un script aquí de copia y pega con un Datatables en una web que tiene filtros y los botones. Con estos botones de Datatables de este script se puede después de haber filtrado entre los datos, descargar un fichero CSV con dichos datos, también en formato Excel, en PDF o enviar a imprimir.

Continuar leyendo..

JavaScript y la programación orientada a objetos

2021-01-02 - Categorías: JavaScript

Con las tareas cotidianas de puesta al día, traigo este post sobre POO en JavasScript. Esto es un clásico de la programación, es un howto resumen de las principales características que disponemos en JavaScript para crear objetos. Para luego extenderlos creando otros derivados, y así poder estructurar los programas en JavaScript permitiendo que sean más mantenibles.

Ya sea que estemos implementando un listado de productos, un carrito, un listado de páginas web, un buscador, información del usuario, elementos de un juego 2D o 3D, etc.. podremos mover mucha lógica de la aplicación a la programación en cliente usando JavaScript.

Continuar leyendo..

Gulp 4 + Browser-sync programando para varios navegadores

2020-12-04 - Categorías: JavaScript

Ando poniéndome al día de nuevo, con este howto o codekata, mientras que les comparto en este post sobre estas joyas de la informática. Se trata de Browser-sync y de Gulp, herramientas para desarrollar localmente más rápido páginas web.

Con Browser-sync nos evitamos el continuo F5 para refrescar los navegadores con cada cambio mientras que trabajamos, además de que podemos probar en múltiples dispositivos las páginas web mientras que vamos construyendo. Y además con Gulp, podemos tener programadas una serie de rutinas de trabajo, como combinar hojas de estilo, ficheros JavaScript, minificarlos, etc.. para así poder trabajar también más rápido y mejor.

No he encontrado por Internet un howto para Gulp 4, así que aquí estoy compartiéndolo mientras que he conseguido hacerlo funcionar. Con este howto, queda programado en Gulp el lanzamiento de Browser-sync, junto con unas rutinas básicas de JavaScript y CSS, para un entorno básico de página web.

Continuar leyendo..

Carga opcional de Google Analytics y otros, desde JavaScript

2020-11-29 - Categorías: JavaScript

Hoy traigo de nuevo otro codekata, esta vez en JavaScript. Para evitar el uso de cookies, y la carga opcional de ficheros JS. Traigo el cómo cargar o no Google Analytics opcionalmente mediante JavaScript. Es decir, son unas rutinas de carga de ficheros JavaScript, o de funciones que se ejecuten, si el visitante ha aceptado o no el uso de ciertos servicios que usemos en una web.

Esto se puede usar para Google Analytics o para otros servicios que carguen a partir de JavaScript como anuncios, pixeles de conversión, etc..

Continuar leyendo..

Preparando un plugin de WordPress para publicar, ahora con Gulp

2020-10-17 - Categorías: JavaScript / WordPress

Dejo aquí otro pequeño codekata o howto sobre Gulp, en JavaScript, para preparar los directorios de publicación de un plugin para WordPress. La semana pasada publiqué lo mismo en Shell Script, pero como en JavaScript se puede hacer de todo, lo he transcrito para usar con Gulp. Así podemos automatizar el flujo de trabajo dentro de los otros flujos de trabajo Gulp. Así nos independizamos del sistema operativo y nos beneficiamos de los extras que nos trae Gulp con sus plugins, para hojas de estilo CSS, JavaScripts, tratamiento de imágenes, etcétera.

Simplemente genera una estructura de directorios bajo el directorio extra/ dentro del proyecto siguiendo el patrón de estructura propuesto para WordPress, a partir de un plugin en desarrollo bajo el directorio /wp-content/plugins/your-plugin-slug/. Es necesario tener instalado Nodejs, Gulp 4 por lo menos, y las dependencias necesarias. Al lanzarlo, si falta algo en tu sistema te lo dirá. En teoría es multiplataforma.

Continuar leyendo..

Una forma de trabajar SASS con Gulp

2020-09-19 - Categorías: CSS / JavaScript

Este es un pequeño codekata o howto para configurar un proyecto SASS con Gulp. Un proyecto en el que tengamos unos fuentes hechos con SASS, de forma que, continuamente se reprocesen con cada cambio detectado, generando las hojas de estilo finales en CSS normal.

Continuar leyendo..

El ABC con Gulp, un hola mundo

2020-08-30 - Categorías: General / JavaScript

¡Hola de nuevo! Hace tiempo que no escribo, pero ya estoy por aquí de nuevo. He seguido avanzando con mis tareas y vengo a traer con este post otra joya de la informática. Imagino que muchos especialistas del frontend ya lo conocerán, se trata de Gulp. Pero si no lo conoces, esta es una de estas herramientas de las que hay que conocer, de las mustknow.

Gulp es una herramienta JavaScript que ejecutamos mientras que desarrollamos en local. Nos automatiza muchas tareas de forma que podemos hacer cosas automáticamente como optimizar imágenes, optimizar ficheros CSS minimizándolos, combinándolos. Podemos automatizar también el tratamiento de los ficheros JavaScript, combinándolos, comprimiéndolos, etc.. De igual manera incluso podemos automatizar despliegues, montar un servidor local para probar mientras desarrollamos. También podemos refrescar el navegador automáticamente cuando cambiamos algo en algún fichero, o retrabajar los ficheros con cada cambio, monitorizando los cambios, y un largo, muy largo, etcétera.

Continuar leyendo..

Cómo hacer peticiones AJAX con JavaScript, desde cualquier frontend, al backend de WordPress

2020-08-02 - Categorías: JavaScript / PHP / WordPress

Una persona me ha hecho una pregunta sobre WordPress. Curioseando para responder al comentario, inspeccionando las llamadas con el Monitor de Red, me he dado cuenta de una funcionalidad muy interesante que nos brinda WordPress. Resulta que tenemos disponible otra forma de desacoplar el frontend de una instalación WordPress, pero seguir disfrutando del backend de WordPress. Podemos programar con esto en mente, para trabajar la información usando llamadas AJAX que ataquen al CMS.

Rizando el rizo un poco, estas llamadas AJAX, incluso se podrían hacer desde otro tipo de programas que no fueran webs..

Es decir, tenemos un ‘endpoint’ con la ruta wp-admin/admin-ajax.php al que podemos atacar. Y a partir de este punto de entrada podemos crear plugins o themes, con lo que podemos programarle lo que queramos en la parte de backend. Por otro lado, en la parte de frontend, al atacar este endpoint podríamos así desacoplar más todo el frontend, y usar cualquier tecnología de frontend como podría ser Angular, React, Vue, etc.. o incluso otro tipo de programas de escritorio o aplicaciones nativas de móviles.

Continuar leyendo..

JavaScript

¡Suscríbete a las novedades!