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…)

Cadena aleatoria con JavaScript

Cadena aleatoria con JavaScript

En el post de hoy te enseñaré a generar una string aleatoria usando el lenguaje de programación JavaScript.

Al final tendremos una función que nos dará una cadena con caracteres aleatorios dependiendo de la longitud deseada. El ejercicio dice así:

Escribe una función de JavaScript que genere una cadena (de longitud especificada) de caracteres aleatorios.

Ejemplo de lista de caracteres válidos: “ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789”

Obviamente tú podrás cambiar el banco de letras si así lo deseas. Veamos cómo hacerlo con JS.

(más…)

Por parzibyte, hace
Caracteres únicos de una cadena en JavaScript - Ejercicio de programación resuelto

Extraer caracteres únicos de cadena con JavaScript

Hoy vamos a ver cómo extraer caracteres únicos de una cadena con JavaScript. El ejercicio solicita lo siguiente:

Escribe una función de JavaScript para extraer caracteres únicos de una cadena.

Cadena de ejemplo: “the quick brown fox jumps over the lazy dog”

Salida esperada: ” thequickbrownfxjmpsvlazydg “

Fíjate en que también estoy tomando en cuenta el espacio. Por cierto, esa cadena es un pangrama.

Veamos cómo hacerlo con JS.

(más…)

Por parzibyte, hace
JavaScript - Convertir cantidad de dinero a monedas y billetes de distinta denominación

JavaScript: convertir dinero a monedas y billetes

Hoy vamos a resolver un ejercicio de JavaScript. Se trata de un programa para convertir un número en monedas y billetes de distinta denominación. El mismo dice así:

Escribe una función de JavaScript para convertir una cantidad X de dinero en monedas o billetes. A la función se le deben pasar los valores de las monedas y billetes en las que queremos cambiar mediante un array

(más…)

Tipo de dato de una variable en JavaScript

JavaScript: función que devuelve tipo de argumento

En este post de JavaScript veremos cómo saber el tipo de un argumento de una función. Es un ejercicio de programación, ya que si queremos saber el tipo de una variable usamos typeof, pero el ejercicio dice:

Escribe una función JavaScript que acepte un argumento y devuelva el tipo.

Nota: Hay seis posibles valores que el tipo de retornos: objeto, booleano, función, número, cadena y undefined.

Veamos cómo hacer esto con JS.

(más…)

Contar vocales de una cadena en JavaScript - Programación

JavaScript: contar vocales

Hoy vamos a ver cómo contar las vocales de una cadena en JavaScript. A partir de una cadena vamos a realizar el conteo de las vocales. El ejercicio dice así:

Escribe una función de JavaScript que acepte una cadena como parámetro y cuente el número de vocales dentro de la cadena.

Toma en cuenta que solo vamos a contar la cantidad de vocales, y no vamos a agrupar o separar.

Verás que es algo fácil, solo es cuestión de recorrer la cadena letra por letra y ver si una de sus letras es una vocal. Vamos a usar la función includes de una cadena.

(más…)

Palabra más larga de una cadena en JavaScript

JavaScript: encontrar palabra más larga dentro de cadena

Hoy vamos a ver cómo encontrar la palabra más larga (con mayor longitud) dentro de una oración, cadena o string usando JavaScript.

Es decir, a partir de una simple cadena vamos a encontrar la subcadena más larga que exista dentro de la misma.

El problema dice así:

Escribe una función JavaScript que acepte una cadena como parámetro y encuentre la palabra más larga dentro de la cadena.

Para ello vamos a usar split y un simple algoritmo que recorre las palabras y va comparando.

(más…)

Ordenar letras de palabra - Ordenar cadena alfabéticamente con JavaScript

JavaScript: ordenar letras de cadena

Hoy vamos a resolver un ejercicio de JavaScript. Se trata de ordenar las letras de una cadena, o de ordenar una palabra en orden alfabético. El problema dice así:

Escribe una función JavaScript que devuelva una cadena pasada con letras en orden alfabético.

Cadena de ejemplo: parzibyte

Salida esperada: abeiprtyz

Veamos cómo hacer esto con JS.

(más…)

Todas las combinaciones de una palabra con JavaScript - Programación

JavaScript: generar combinaciones de cadena

En este post te enseñaré a generar todas las combinaciones posibles de una cadena en JavaScript. El ejercicio pide lo siguiente:

Escribe una función de JavaScript que genere todas las combinaciones de una cadena.

  • Cadena de ejemplo: luis
  • Salida: l,lu,lui,luis,u,ui,uis,i,is,s

Veamos cómo resolver esto con programación en JS.

(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…)