Cargar sitios web de manera instantánea con instant.page

Mejorar y agilizar la carga de las páginas web precargando enlaces

Hace algún tiempo estuve presente en una conversación donde se discutía por qué las páginas de la documentación de cierto sitio web se cargaban de manera instantánea. Es decir, hacías click en un enlace y la carga era inmediata.

Analizando algunas cosas se descubrió que los componentes eran precargados cuando el usuario ponía el cursor sobre un enlace, es decir, cuando el usuario estaba a punto de hacer click para navegar a otro lugar.

Después de eso vi que se crearon muchas librerías, y justamente hoy vamos a ver cómo usar una de ellas para hacer más rápida la carga de una página web a la que navega el usuario: instant.page.

(más…)

Escuchar click de botones en JavaScript

Escuchar el click de un botón o botones con JavaScript

En este post explicaré algo muy simple: cómo saber cuando un usuario hace click en un botón de JavaScript, también cuando hace click sobre muchos botones y cómo acceder al elemento del DOM.

Esto también funcionará para saber cuando alguien hace click sobre otro elemento.

Escuchar click de botones en JavaScript

Escuchar click de botones en JavaScript

Foto tomada con Polacode y marca de agua puesta con waterpy.

Vamos a usar querySelector, querySelectorAll y addEventListener para ejecutar una función en el click del elemento.

(más…)

Solución a Error: PhantomJS exited with return value 127

Hace un momento estaba ejecutando una aplicación de NodeJS en un servidor con Ubuntu 18, todo bien, ejecuté npm install pero al momento de usar PhantomJS saltó el error que dice:

Error: PhantomJS exited with return value 127

Lo raro de todo esto es que había instalado las dependencias correctamente, y en Windows (y otros sistemas operativos) funcionaba a la perfección.

Al final encontré la solución, la cual era una simple dependencia a nivel de sistema operativo.

(más…)

Paquete de iconos Eva Icons para la web o para escritorio. Iconos Open source

Eva Icons: un paquete de iconos open source para la web o para descargar

Hoy vengo a presentar un paquete de iconos totalmente open source y descargable (no es mío) llamado Eva Icons. Son unos iconos que se pueden usar en la web, o como PNG y SVG en distintos proyectos.

Gracias a que son unos iconos open source y descargables, podemos usarlos como PNG o en la web para nuestro siguiente proyecto.

Paquete de iconos Eva Icons para la web o para escritorio. Iconos Open source

Paquete de iconos Eva Icons para la web o para escritorio. Iconos Open source

En este post voy a explicar cómo descargar los iconos y cómo usarlos en la web.

(más…)

Página web de parzibyte.me renovada

He renovado mi página principal y ahora es open source

Justo hoy he publicado mi página principal totalmente renovada y hecha por mí, además de que es totalmente open source (he puesto el repositorio en línea).

Ya era hora, pues no estaba mostrando mi portafolio y la última actualización fue en diciembre del 2017.

Página web de parzibyte.me renovada

Página web de parzibyte.me renovada

Voy a explicar en este post cómo fue la creación y las cosas que usé para crearla; además de exponer cómo hice para que cargara rápido y otras cosas.

(más…)

Diagrama de flujo - Mayor o menor de edad en JavaScript

Herramienta para convertir código JavaScript a diagrama de flujo

He descubierto una herramienta que viene de maravilla para convertir código fuente a un diagrama de flujo, sin esfuerzo; únicamente se pone el código fuente y automáticamente se crea el diagrama de flujo.

Eso sí, el código que soporta es únicamente JavaScript (uno de mis lenguajes favoritos) y los resultados son maravillosos. Por ejemplo, aquí tengo el código de para saber si una persona es mayor o menor de edad en JavaScript:

Diagrama de flujo - Mayor o menor de edad en JavaScript

Diagrama de flujo – Mayor o menor de edad en JavaScript

Ese diagrama de flujo fue generado automáticamente únicamente pegando código. Veamos la página web en donde se puede usar y su forma de uso.

(más…)

Fondo de pantalla de palabras reservadas del lenguaje Go / Golang

Fondos de pantalla e imágenes de lenguajes de programación

Hace algún tiempo hice algunas imágenes sobre lenguajes de programación para usarlas como fondo de pantalla; son simples, tienen el nombre del lenguaje de programación pero formado con palabras reservadas del mismo, aquí un ejemplo de Rust:

Rust creado con WordArt

Rust creado con WordArt

Voy a exponer aquí los fondos de pantalla de lenguajes de programación para descargarlos.

(más…)

Ejemplo de respuesta de API JSON de DuckDuckGo

Consumir API de DuckDuckGo con Node.JS

El buscador DuckDuckGo, aparte de todas las ventajas que tiene en comparación con Google y otros buscadores, proporciona una API que si bien no sirve para buscar como en el buscador, funciona para obtener respuestas inmediatas y buscar definiciones.

Hoy veremos cómo consumir esta API basada en JSON utilizando JavaScript del lado del servidor: Node.JS. Un ejemplo de lo que la API devuelve es lo siguiente (al buscar JavaScript):

Ejemplo de respuesta de API JSON de DuckDuckGo

Ejemplo de respuesta de API JSON de DuckDuckGo

Consumir esta API no es nada difícil, pues es una simple petición GET y parseo de JSON.

(más…)

Ejemplo de respuesta de la API de JsonPlaceholder

Petición HTTP GET simple en Node.js con request

Node, JavaScript del lado del servidor, provee un modo para comunicarse a través de http: el módulo http. Sin embargo, este módulo es un poco largo de usar, así que se han creado varios módulos o paquetes y uno de ellos es request.

El módulo de request tiene otra envoltura llamada request-promise, el cual es como request pero usando promesas.

En fin, vamos a ver cómo hacer una petición GET HTTP usando Node y el módulo request. Será un ejemplo sencillo y básico pero que servirá para ejemplos más avanzados.

(más…)

Sistema web para cotizaciones y presupuestos

Presentando un sistema web para hacer cotizaciones y presupuestos, gratuito y open source

Hoy vengo a presentar un software para realizar cotizaciones o presupuestos, el cual es totalmente gratuito de usar en la nube; así como open source. Es decir, aparte de que puedes usarlo en mi sitio, puedes descargarlo y modificarlo.

Sistema web para cotizaciones y presupuestos

Sistema web para cotizaciones y presupuestos

Características del software

No es la gran cosa, pero entre sus principales características encontramos las siguientes:

  • Realizar cotizaciones o presupuestos
  • Estimar el costo requerido, el cual se configura por cada servicio
  • Calcular tiempo requerido por cada servicio
  • Describir características y/o condiciones del trabajo
  • Agregar clientes para ligarlos a las cotizaciones
  • Imprimir la cotización o guardarla como PDF (esto depende del navegador la mayoría de veces)
  • Multiusuario: cualquier usuario puede registrarse y usarlo, así de simple. Eso sí, las cotizaciones, servicios y características son separadas por usuario
  • Totalmente open source
  • Escrito con PHP, utiliza PDO para interactuar con la base de datos
  • Base de datos MySQL
  • Lado del cliente con Vue.JS y Bootstrap
  • Mensaje de agradecimiento, presentación y pie totalmente configurables

Se me ocurre que puede servir tanto como para estudiantes que tienen que entregar un proyecto con PHP simple, así como para personas que necesitan un software como estos.

Voy a explicar cómo fue creado, en dónde se puede probar y también dónde se puede leer el código fuente.

(más…)

Minutos a tiempo legible en JavaScript

Convertir minutos a texto legible en JavaScript

En un sistema web en el que he estado trabajando tuve la necesidad de convertir minutos a su representación como texto, en cantidades más grandes. Por ejemplo, 59 minutos son 59 minutos, pero 60 minutos son 1 hora, así que en lugar de mostrarlos como minutos, se muestran como horas.

Minutos a tiempo legible en JavaScript

Minutos a tiempo legible en JavaScript

La función que escribí puede convertir cualquier número de minutos a su representación como horas, días, semanas, meses o años. Con los ejemplos veremos de lo que hablo.

(más…)

Convertir número a representación monetaria en JavaScript

Convertir número a moneda en JavaScript

Anteriormente vimos un filtro de Vue.JS para transformar un número a moneda; es decir, de un número entero o flotante, obtener su representación legible para el ser humano.

Pues bien, no todos programamos en Vue, y la instalación de la librería citada es un poco compleja si queremos cosas simples, así que me di a la tarea de crear mi propia función para formatear dinero en Javascript.

Convertir número a representación monetaria en JavaScript

Convertir número a representación monetaria en JavaScript

Es una función que convierte un flotante a moneda, escrita en JavaScript puro. Se puede configurar de varias maneras para poner un separador de miles personalizado, un símbolo de acuerdo al país, etcétera.

(más…)

Cálculo del factorial de un número en JavaScript. Aplicación web online

Aplicación web para calcular el factorial de un número online

Para ejemplificar y combinar el uso de BigInt con los Web Workers en JavaScript me di a la tarea de crear una sencilla aplicación web que permite calcular el factorial de cualquier número, todo desde el navegador, es decir, online.

El uso de los Web workers es para hacer cálculos extensos, y el de BigInt para no quedarnos cortos a la hora de trabajar con números grandes. Por el momento sólo funciona en Chrome y Opera, ya que usa BigInt y no quise usar el polyfill.

Cálculo del factorial de un número en JavaScript. Aplicación web online

Cálculo del factorial de un número en JavaScript. Aplicación web online

Voy a explicar la creación de la aplicación web y cómo utilicé cada cosa para crear todo esto.

(más…)

Aumentar números más allá del máximo en JS

BigInt en JavaScript

Los números en JavaScript tienen un límite, no sé cuál, pero tienen un límite y si se sobrepasa, se experimentan comportamientos raros. Es por ello que no podemos tener números muy grandes, porque los mismos pueden ocasionar problemas de contabilidad y esas cosas.

Pero no nos podemos quedar así, y es por eso que ha llegado el tipo de dato BigInt en JavaScript (seguramente también está el BigFloat o algo así) que permite tener enteros muy grandes (algo así como la maravillosa librería GMP programada en C)

En este post veremos cómo usar el tipo de dato BigInt en JavaScript, así como sus ventajas y algunos usos. Gracias a BigInt podemos hacer aritmética sin preocuparnos por los límites.

(más…)