Sweetalert 2 y ventas - mostrar cambio calculado según importe y pago de cliente

Sweetalert 2 – Mostrar total de venta y cambio a partir de pago

En este post sobre Sweetalert 2 (Sweet Alert 2) veremos un ejercicio práctico: cómo solicitar el pago del cliente y mostrar el cambio (Dinero que se devuelve al comprador cuando entrega una cantidad superior al importe) en la misma alerta, validando todo.

Veremos cómo escuchar el cambio del input de la alerta, modificar el HTML de la misma y validar según una variable externa.

Recomiendo ver el tutorial de SweetAlert2 antes de leer este artículo.

(más…)

Limpiar input file de HTML con JavaScript

En este corto post de programación con JS puro vamos a ver cómo resetear, reiniciar, reestablecer o limpiar un elemento input de tipo file.

Explicado con otras palabras veremos cómo eliminar el archivo seleccionado de un input tipo file o input de archivo, para que parezca que no se ha seleccionado un archivo.

Lo haremos con JavaScript puro para que puedas aplicarlo a cualquier framework.

(más…)

Enviar archivo de JavaScript a Golang

Subir archivo de JavaScript a Go (Golang)

En este post de programación cliente-servidor vamos a ver cómo enviar un archivo desde JavaScript del lado del cliente a Golang (Go) del lado del servidor.

Específicamente hablando veremos cómo enviar un archivo usando fetch y FormData a través de AJAX hacia un servidor de Go.

Lo que te enseñaré servirá para enviar fotos, archivos binarios o incluso una foto tomada con la cámara web con las debidos ajustes.

Va a ser un ejemplo realmente simple pero que luego podrás modificar para, por ejemplo, usarlo en React, Angular, JavaScript puro o Vue.

(más…)

Laravel: problemas con route model binding y middleware propio

En este pequeño post voy a relatar un pequeño problema que tuve con las rutas de Laravel al pasar un Model a través de la URL usando el Route Model Binding.

El problema era que yo pasaba el modelo por la URL pero al momento de recibirlo en el controlador, el mismo estaba vacío. Mejor dicho, era un arreglo vacío o un Model nuevo sin atributos.

Después de horas depurando me di cuenta de que el problema estaba causado debido a un middleware propio que yo había escrito.

(más…)

Encriptar y desencriptar información con JavaScript usando AES

Encriptación con JavaScript del lado del cliente usando la Web Crypto API

En este post de programación con JavaScript en el navegador veremos cómo encriptar y desencriptar datos usando una API nativa, segura y confiable.

Encriptar y desencriptar información con JavaScript usando AES

Encriptar y desencriptar información con JavaScript usando AES

Vamos a usar la interfaz Crypto a través de window.crypto. Al final podremos encriptar y desencriptar archivos usando una contraseña, derivando una clave de la misma y usando AES para el cifrado de datos.

Nota: voy a usar cifrado y encriptado como sinónimos para referirme a la encriptación de información.

Por cierto, usaremos la encriptación simétrica aunque también es posible usar la asimétrica con claves públicas y privadas.

(más…)

Enlace de descarga de archivo compartido

Aplicación para transferencia de archivos – Gratuita y open source

En este post te mostraré un software muy simple que he creado recientemente. Es para compartir archivos por internet y enviarlos de manera rápida y simple.

La principal función de esta app para transferir y compartir archivos es su funcionamiento para subir archivos en conexiones lentas.

Básicamente es como una alternativa open source y gratuita a WeTransfer, File.io, Firefox Send, etcétera.

A lo largo de este post te enseñaré cómo funciona, cómo puedes tenerla gratis (ya que usa Firebase en su plan gratuito) y cómo montarla en un servidor gratuitamente.

Nota: puedes ver cómo luce la app al descargar un archivo en este enlace.

(más…)

Número de semana con JavaScript a partir de una fecha

Número de semana con JavaScript

En este post de JavaScript te enseñaré a obtener el número de la semana a partir de una fecha.

Esto será para el número de semana que inicia el lunes. Vamos a ver una función de JavaScript que te dirá en qué número de semana estamos según una fecha (misma que puede ser la actual).

Vas a poder usar este código en el lado del cliente con el navegador web, y en el lado del servidor con Node.

(más…)

Listado de conejos - Mostrar fotos, información y filtrar

Aplicación para cunicultura – Gratuita y open source

En este post te mostraré una aplicación web y PWA que acabo de crear. Se trata de una app para llevar el control de la crianza de conejos. Básicamente es una app para cunicultura.

Esta app web que puede ser usada como app móvil sirve básicamente para llevar el registro de los conejos y tener un control sobre su edad, género, información de sacrificio, reproducción, ventas, etcétera.

También vamos a poder llevar los registros de reproducción de los conejos, tomando en cuenta la cantidad de días para el parto y muchas cosas más.

A lo largo del artículo te enseñaré todos los módulos del programa, la parte técnica, cómo descargar el código fuente y cómo probar la app web.

(más…)

Reducir tamaño de imagen con JavaScript

Reducir tamaño de imagen con JavaScript

En el post de hoy te enseñaré a comprimir una imagen usando JavaScript al seleccionar una imagen con un input de tipo file.

Con comprimir me refiero a reducir el tamaño del archivo de imagen, cambiando su calidad. Verás que podrás reducir la imagen hasta el 20 % de su calidad sin que se note (y podrás comprimirla incluso más).

Reducir tamaño de imagen con JavaScript – Antes y después, al poner el 30 % de calidad

De este modo puedes reducir el tamaño de una imagen antes de subirla a un servidor o cosas por el estilo (cambiando su peso, no su medida en pixeles). Todo esto lo haremos del lado del cliente trabajando con JS, Canvas y URL.

Yo hago este post porque estoy usando el storage de Firebase y necesito subir archivos pero no quiero que se agote mi plan gratuito.

También te servirá a ti para ahorrar ancho de banda y almacenamiento en tu servidor, o tal vez solo quieras hacer una app que reduzca la calidad de las imágenes.

(más…)

Reporte de deudas - Filtro por acreedor, deudor o estado de liquidación

Aplicación para deudas y gastos compartidos – Gratuita y open source

Hoy voy a enseñarte una app móvil y web que sirve para llevar el registro de las deudas y gastos compartidos entre cierto grupo de personas.

En esta app puedes registrar las deudas que tienes, y las otras personas pueden registrar lo que tú le debes a ellas. Además, las deudas o gastos pueden ser de persona a persona o compartidas entre todos.

A lo largo de este post te mostraré las características de la app, los módulos que tiene y cómo funciona. Desde ahora te cuento que esta es una PWA y puede ser usada en móviles o en computadoras como si fuera nativa.

Entre sus características encontramos:

  1. Sincronización de datos en tiempo real
  2. Trabajo sin conexión (los datos se suben cuando la conexión regresa)
  3. PWA que puede ser usada como nativa o en el navegador web
  4. Manejo de usuarios
  5. Control de deudas con opción para repartir los gastos y liquidar las deudas
  6. Filtros para acreedores y deudores
  7. Totalmente gratuita y open source, puede ser usada como un proyecto de estudiante
  8. Tú puedes tener tu propia versión, solo debes configurar el SDK de Firebase y comenzar a usar la app

Por cierto, la he hecho usando Firebase con Firestore Database y Vue con Buefy.

(más…)

Service worker en Progressive Web App

Crear y publicar Progressive Web App – Convertir app web en PWA

Hoy voy a enseñarte cómo convertir cualquier aplicación web en una PWA o Progressive Web App.

Tú puedes programar en cualquier lenguaje y Framework, ya que las PWA no están atadas a algo más allá de JavaScript.

Así que mientras tu app conste de archivos del lado del cliente, podrás convertirla en PWA. Y con estos archivos me refiero a CSS, JS, HTML, imágenes, etcétera.

Te repito que para crear una PWA no necesitas usar un framework específico, así que puedes usar JavaScript puro, Angular, Vue, React, jQuery (bueno, jQuery no, ya es obsoleto) y cualquier otro que genere JavaScript al final.

(más…)