javascript

Generar app de express y Node con express-generator

En este post voy a mostrar cómo crear la estructura inicial de una app de Node que utiliza el framework Express, usando el generador llamado express-generator.

Lo que veremos será:

  • Cómo instalar express-generator
  • Instalar las dependencias
  • Analizar la anatomía de la app, es decir, el proyecto, las vistas, etcétera

Nota: este ejemplo podría ser una “mejora” a la plantilla que vimos anteriormente.

Continue reading…

Subir archivos con JavaScript, fetch y FormData a PHP

Cargar archivo a PHP desde JavaScript con FormData

Introducción

Enviar datos con AJAX es algo relativamente fácil; pues al final de todo son simples datos. Ya sean cadenas o números, todo es texto. Pero algo distinto pasa cuando queremos cargar un archivo o fichero con JavaScript hacia PHP.

Esto es más complicado cuando queremos hacerlo con AJAX, pues no hay una forma estandarizada de enviar un archivo; y nos topamos con que el usuario podría seleccionar archivos pesados.

Lo que nos quedaría sería poner un formulario y agregar un <input type="file"> pero nuestra página perdería dinamismo.

Afortunadamente desde hace algunos años existe la API de FormData, la cual ofrece una manera de enviar todo tipo de datos como se enviarían en un formulario; con la ventaja de poder hacerlo sin interrumpir al usuario o recargar la página.

Continue reading…

Conversiones de números en JavaScript: Binario, Octal, Hexadecimal y Decimal

Introducción

Hoy veremos cómo podemos convertir números a una base distinta en JavaScript. Es decir, cómo hacer la operación (y lo inverso) para convertir un número de determinada a base a otra.

Por ejemplo, convertir binario a octal, binario a decimal, decimal a hexadecimal y todas esas conversiones.

Para ello, no utilizaremos más que los métodos que le lenguaje provee; nada de librerías externas o algoritmos complicados.

Continue reading…

Acceder a los filtros de VueJS desde el código Javascript

Introducción

Los filtros de Vue.js son muy útiles. Generalmente son utilizados sólo en la vista. Por ejemplo, si queremos filtrar moneda hacemos esto:

{{sueldo | currency}}

¿Pero qué pasa si queremos utilizar esos filtros en nuestro código javascript? recientemente me pasó que estaba generando un documento PDF con la magnífica librería jsPDF, pero para mostrar algunos montos necesitaba filtrarlos antes.

Así que me puse a pensar en cómo utilizar los filtros no sólo en la vista, sino también en la lógica. Y encontré la respuesta.

Utilizar filtros de VueJS en código Javascript

La respuesta viene del creador de este maravilloso framework. Una vez que hemos registrado nuestros filtros globalmente, podemos acceder a ellos desde this.$options.filters o desde Vue.options.filters.

Así que si tenemos un filtro llamado currency, podemos “importarlo” de la siguiente forma:

const {currency} = this.$options.filters;

Lo mismo para todos los demás filtros que hayamos registrado. Arriba estoy utilizando algo llamado desestructuración de objetos, o algo así. Pero sería lo mismo que escribir:

const currency = this.$options.filters.currency;

Finalmente, para utilizarlos, llamamos a la función y le pasamos argumentos:

let montoBonito = currency(monto);

En este caso fue para el filtro currency, pero podemos utilizarlo para cualquier filtro existente.

Ajustando fechas en Javascript

Introducción

No sé si sólo a mí me pasa o si sólo yo ocupo las fechas en Javascript, pero siempre que intento compararlas, algunas salen mal debido al offset. Sé que no se debe confiar en las fechas del cliente, pues se pueden cambiar, pero en alguna ocasión debimos necesitar trabajar con estas y puede que nos haya dado resultados inesperados.
Así que hoy mostraré cómo “ajustar el tiempo” de las fechas de Javascript utilizando getTimezoneOffset.

Descripción del problema

Esto pasa cuando creamos un objeto fecha utilizando una fecha como cadena. En donde la cadena es algo como “2018-03-05” (que representa el 5 de marzo del 2018 ). El objeto se crearía de la siguiente manera:

Nosotros esperamos que la fecha sea el 5 de marzo del 2018 a las 12 de la noche, o a las 00:00:00. Pero al imprimirlo...

Sorpresa. Dice que la fecha es del domingo (sunday) 4 de marzo a las 6 de la tarde. Y nosotros esperábamos que fuera del lunes 5 de marzo a las 0 horas.

Lo que está pasando aquí es que se están restando las horas del Tiempo universal coordinado (creo); en mi caso, como soy de México, resta 6 horas. ¿y si no estamos en México?

Javascript provee una forma de obtener el offset de la fecha. Y con ello podemos arreglar las fechas.

Vamos a ver la solución más abajo.

Solución

Esto es simple, al objeto que ya hemos creado vamos a ponerle el tiempo en milisegundos como el resultado de los milisegundos que ya tiene, sumando los milisegundos que resultan al obtener el offset. Para no confundirnos, se hace así:

Expliquemos esto.

setTime recibe un número, que es el tiempo en milisegundos que han pasado desde la fecha unix.

getTimezoneOffset devuelve en minutos la diferencia de tiempos; en este caso devolverá 360, pues son 6 horas multiplicadas por 60 minutos.

Estos 360 minutos los multiplicamos por 60 para pasarlos a segundos, y luego al resultado lo multiplicamos por 1000 para convertirlo a milisegundos.

Con eso, hacemos la resta. Obtenemos los milisegundos que ya tiene la fecha con getTime y a eso le sumamos el resultado que obtuvimos arriba.

En pocas palabras, se le suman los milisegundos de la diferencia de horas. Si después de hacer esto imprimo la fecha, tengo esto:

Correcto. La fecha ahora sí es del lunes a las 12 de la noche. Y este método, me parece, funciona para cualquier zona horaria.

Así, podemos arreglar y ajustar fechas en Javascript sin perder la cabeza.

Conclusión

Cabe mencionar que esto sólo me ha pasado al instanciar objetos con una fecha ya existente; si se instancia y no se le pasan parámetros, todo va bien. Es decir, si hago lo siguiente todo va bien:

Se desajusta cuando al constructor de Date le paso una cadena como argumento.

API de binbox.io en Javascript

Introducción

Recientemente hice una entrada sobre la api de binbox.io en Python y dije que escribiría un poco sobre cómo consumirla pero ahora con Javascript nativo, el cual se puede ejecutar en el navegador.

Incluyendo scripts

Esto es muy, muy simple. Creamos un documento HTML nuevo e incluimos el script de binbox.io al final. Dicho script se puede encontrar en esta ruta. Esto proporcionará un objeto global el cual contiene una clase que podemos instanciar.


Con ese código ya podemos comenzar a trabajar.

Nota: si cargamos estos scripts desde un servidor con https habrá errores, pues no podemos cargar http desde https. Esto es debido a que el script de binbox carga dentro de sí mismo a jQuery, pero desde http. Entonces aunque carguemos el script (de Binbox) con https, éste cargará a otro (jQuery) sin http provocando un error.

En resumen, no uses estos ejemplos en un servidor con https.

Instanciando con nuestro nombre de usuario

Ya hemos incluido el script, ahora es momento de usar las clases que nos brinda. Para poder acortar y crear pastes necesitamos instanciar la clase API del objeto Binbox. Como parámetro, el método constructor requiere una url completa de nuestro usuario para la api.

La url es algo así: http://tu_usuario.binbox.io/

En donde obviamente tenemos que cambiar tu_usuario por el nombre de usuario real.

Acortando un link

Para acortar un enlace o link podemos, una vez instanciada la clase, llamar al método create. Dicho método tiene que ser llamado con dos argumentos.

El primero, un objeto con dos propiedades: title y url, lo que sería el título y el enlace, respectivamente.

El segundo, una función que será llamada una vez que el enlace sea acortado; es decir, una función callback.

Si no entiendes mucho sobre las funciones anónimas o los callbacks, aquí te dejo una breve introducción a ello.

Sabiendo eso, hagamos un ejemplo en donde se acorte un link y el resultado se ponga en un párrafo.

Puedes probar el ejemplo aquí: Abrir plnkr

Creando un paste

Crear un paste es igual de sencillo que crear un link. En este caso sólo cambia la propiedad “url” por “text”. Así:


Los resultados aquí: Click para abrir la vista en plnkr.co

Interfaz gráfica

Una vez visto esto, se me ocurrió hacer una pequeña aplicación que permite crear pastes y links acortados. Simple, pero funciona. Como lo expliqué arriba, hay un error con binbox y https. Así que no puedo embeber, pero sí puedo poner el link: ver demostración.

Algunas capturas

Código

Aquí el código:

Y eso es todo por hoy.

¿Por qué en Javascript no necesitamos punto y coma ni var?

Introducción

Independientemente de qué tanto sepamos Javascript, en algún momento alguien nos dijo o descubrimos que en Javascript podemos hacer dos cosas un poco raras:

  • Declarar variables sin la palabra reservada var
  • No poner punto y coma al final de cada sentencia

Cada una de estas cosas tiene su explicación. Y deberíamos omitir siempre ambas.

Declarar variables sin var

Comenzamos con declarar variables sin var. Pues bien, recordemos que para declarar una variable normal usamos lo siguiente:

var edad = 10;
var nombre = "John";

Pero claro que podemos hacer esto:

edad = 10;
nombre = "John";

¿Qué está pasando ahí?

Cuando no usamos var, la variable pasa a ser global automáticamente. Hacer esto:

function hola(){
  saludo = "Mundo";
}

Es equivalente a hacer esto:

var saludo = "Hola"; //Es global
function hola(){

}

Puede que no parezca nada malo; pero cuando estamos en proyectos grandes, una variable global puede traernos graves problemas, porque puede que tengamos resultados inesperados leyendo una variable que creemos local cuando en realidad no lo es. O podemos asignarla y otro programador obtendrá valores equivocados.

Para solucionar esto y educarnos a nosotros mismos (y a nuestros compañeros) podemos usar el modo estricto poniendo “use strict”; al inicio de nuestros scripts.

"use strict";
function hola(){
  saludo = "Mundo"; // Error 
}

Así que asignar variables sin var no es un tipo de magia, sino más bien una muy mala práctica que debemos omitir al menos que sepamos lo que estamos haciendo.

No usar punto y coma ;

Por otro lado tenemos a aquellos que dicen que no es necesario el ; al terminar una sentencia. Esto tampoco es magia. Cuando no ponemos punto y coma, el intérprete separa las sentencias con saltos de línea.

Con punto y coma, yo puedo hacer esto:

var edad = 19; console.log("Tu edad es ", edad);

Sin punto y coma…

var edad = 19 console.log("Tu edad es ", edad)

Oh, sorpresa. ¿No decían que se puede hacer sin ;?

Veamos ahora otra cosa que me encontré un día en codewars. Esta función:

function obtenerMascota(){
  return
  {
    nombre: "Maggie"
  }
}

Lo que esperamos al llamar esta función es un objeto que tiene la propiedad nombre. Vamos a probar…

Podemos ver que al llamar a obtenerMascota nos da undefined. La razón de esto es que estamos separando por un salto de línea el return y la llave de inicio del objeto.

La función correcta debería quedar así:

En este caso ponemos la llave junto con return. Ya que anteriormente el intérprete tomaba a return como una sentencia aparte del objeto.

Por eso es importante terminar nuestras sentencias con punto y coma, y poner la llave de inicio en la misma línea cuando estamos regresando un objeto.

Conclusión

Con esto terminamos por hoy. Tal vez al inicio nos moleste un poco usar el modo estricto pero es una forma de mejorar. Dejo algunas referencias:

https://www.w3schools.com/js/js_variables.asp

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/var

https://stackoverflow.com/questions/1470488/what-is-the-purpose-of-the-var-keyword-and-when-to-use-it-or-omit-it

Tomar foto con Javascript y cámara para guardarla en servidor PHP

Introducción

Nota: ya hay una versión 3 de este código. En ese nuevo post explico cómo dar la posibilidad de que el usuario cambie la cámara, además de que introduzco otras mejoras y actualizaciones. Míralo aquí.

Nunca imaginé que algún día se podría tomar una foto y guardarla en un servidor usando código nativo de Javascript y la cámara del dispositivo. Eso abre un mundo de posibilidades que permite a nuestras aplicaciones tener más características.

Hoy mostraré aquí un pequeño tutorial que nos permitirá tomar una simple foto y subirla a un servidor que tendrá PHP. No se usará ningún framework, ni de Javascript ni de PHP.

Nota: debido a que vamos a tomar una foto con la cámara, debemos servir nuestra app en localhost (para hacer pruebas locales) o en un servidor con https. Es decir, nuestro código debe estar en un servidor con un certificado SSL, o corriendo en nuestra máquina.

Si te gusta programar en Python, te invito a leer cómo tomar una foto de la cámara web, utilizando Python.

Continue reading…

Imprimir ticket en impresora térmica usando Javascript

Introducción

Actualización agosto 2019

¿Quieres imprimir con JavaScript sin usar el diálogo de impresión, con la posibilidad de cortar el papel y abrir el cajón de dinero? mira este post.

Recientemente escribí un tutorial sobre cómo imprimir un ticket en una impresora térmica usando PHP. Veamos entonces cómo podemos imprimir ticket en impresora térmica usando JavaScript.

Las complicaciones que tenemos al imprimir con PHP son:

  • Confusión de cómo usar la librería
  • Forzar a que el lenguaje del servidor sea PHP

Así que ahora decidí hacer una entrada para saber cómo imprimir un ticket en una impresora térmica sin usar PHP, sólo Javascript. El resultado será el siguiente:

Continue reading…