Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que se componga de CSS, JavaScript y HTML se puede convertir en una PWA, y ese también es el caso con Vue 3. Aunque Vue 3 con Vite compila a CSS, HTML y JS que podemos convertir a PWA quise darme a la tarea de documentar el proceso de creación. Por favor toma en cuenta que te recomiendo revisar el siguiente artículo para saber lo básico sobre las PWA: https://parzibyte.me/blog/posts/crear-publicar-progressive-web-app-convertir-app-web-pwa/ Veamos entonces cómo convertir una aplicación de Vue 3 con Vite en una PWA. ...

noviembre 5, 2024 · 6 min · 1148 palabras · Parzibyte

JavaScript - Dividir texto en varias líneas con espacio

Hoy te voy a enseñar a agregar un salto de línea a un texto para evitar cortar las palabras en caso de que dicho texto supere determinada longitud de columna. Dicho con otras palabras veremos cómo hacer que un texto salte a la siguiente línea automáticamente si es demasiado largo, sin que se corten las palabras. Por ejemplo, supongamos que puedes imprimir 10 letras por línea como máximo. Un texto se vería así, cortando las palabras y dejándolas incompletas: Hola mundo soy un te xto desde parzibyte.me Con la función que te mostraré hoy vamos a hacer que la palabra se corte en el espacio en blanco y queden solo palabras completas tomando en cuenta una máxima longitud para la línea. Por ejemplo: Hola mundo soy un texto desde parzibyte.me Te recuerdo que vamos a bajar las palabras a la siguiente línea usando JavaScript trabajando con cadenas (string). Sería el equivalente a overflow-wrap: break-word; y word-break: normal; de CSS. ...

octubre 7, 2024 · 3 min · 432 palabras · Parzibyte

Emitir sonido y parpadear LED en impresora térmica

Algunas impresoras térmicas ESC POS tienen un buzzer o zumbador que puede emitir sonidos, también conocidos como pitidos o como “hacer beep”. Otras impresoras, además del buzzer, tienen un LED para enviar notificaciones al momento de imprimir, avisando que un trabajo de impresión está por empezar o por terminar. En este post te voy a enseñar cómo hacer que una impresora térmica emita un sonido y envíe una notificación usando su luz LED, teniendo la opción de solo usar sonido, solo el LED o ambos. Vas a poder hacer que la impresora emita sonidos o encienda su LED incluso si no envías ningún trabajo de impresión, así que puedes usar la POS printer para avisarle al usuario sobre alguna notificación usando sonido. Recuerda que no todas las impresoras tienen el mismo hardware, en mi caso mi GOOJPRT PT-210 cuenta tanto con un buzzer para hacer pitidos (beep) como con un LED. ...

octubre 3, 2024 · 4 min · 671 palabras · Parzibyte

Tailwind CSS - Centrar verticalmente

En este corto tutorial de programación CSS con Tailwind vamos a ver cómo centrar un elemento verticalmente. ...

septiembre 27, 2024 · 1 min · 181 palabras · Parzibyte

Cámara a impresora térmica - Aplicación web

Hoy te voy a enseñar una aplicación web (programada con JavaScript en el lado del cliente) para imprimir fotos en una impresora térmica. Las fotos que se van a imprimir serán tomadas al instante con la cámara web o cámara integrada. Gracias a esta webapp vas a poder tomar una foto de la cámara y enviarla a una impresora térmica aplicando dithering para mejorar su calidad. Puedes acceder a la demostración ya mismo: cámara a impresora térmica. El proceso será automático, solo debes conectar tu impresora térmica por USB, abrir la página web, seleccionar tu cámara y presionar el botón para tomar una fotografía e imprimirla en una impresora térmica. ...

septiembre 26, 2024 · 5 min · 948 palabras · Parzibyte

Mejorar calidad de imágenes en impresora térmica

En este artículo te voy a enseñar una técnica para mejorar la calidad de las fotos impresas con una impresora térmica usando comandos ESC POS. La mayoría de impresoras térmicas que conozco solo pueden imprimir blanco o negro (un punto quemado, o un punto sin quemar) así que es un poco complejo imprimir una imagen y mantener todos sus detalles como la iluminación o forma. Por ejemplo, tengo la imagen de un colibrí a color y se ve así: Pero al momento de imprimirla y convertirla a blanco y negro, pierde muchos detalles: Es totalmente normal, pues la impresora no tiene forma de imprimir más colores además del blanco y negro. Si un color es más blanco, se convierte a blanco, y si se acerca más al negro, se convierte en negro. Nota: la conversión de una imagen para que sea entendible por la impresora térmica no es automática, tiene todo un proceso según el algoritmo. Actualmente conozco Bit image column format, Raster bit image y NV Graphics. Para mejorar la calidad de las imágenes en una impresora térmica podemos usar la técnica del algoritmo Floyd-Steinberg Dithering para dar la ilusión de que la imagen tiene tonos e iluminación, usando solo blanco y negro: Aunque parezca una imagen en escala de grises (cosa que una impresora térmica no puede imprimir, pues no tiene niveles de grises) en realidad es una imagen que solo utiliza blanco y negro, pero su calidad ha mejorado bastante y se pueden apreciar muchísimos detalles. ...

septiembre 26, 2024 · 5 min · 955 palabras · Parzibyte

Convertir OffscreenCanvas a imagen en base64

La API de OffscreenCanvas permite trabajar con un canvas en JavaScript sin tener que usar un elemento <canvas> HTML. Hoy te voy a enseñar cómo convertir ese OffscreenCanvas a una imagen codificada en base64, ya que este OffscreenCanvas no permite usar toDataURL. ...

septiembre 25, 2024 · 1 min · 159 palabras · Parzibyte

Actualización Plugin ESC POS 3.5.0 - Dithering y respuesta al imprimir

En este post voy a describir las novedades de mi plugin HTTP a ESC POS. Hemos llegado a la versión 3.5.0 y la novedad es que se puede aplicar dithering a las imágenes, imprimiendo imágenes de mejor calidad guardando la calidad. La impresión de fotografías es la que más beneficiada se ve con el dithering, pues se conservan detalles que, sin este algoritmo, son invisibles. Otra cosa que acompaña a esta actualización es que finalmente he creado la página de documentación del plugin donde puedes revisar la descripción de cada operación, un ejemplo de JSON, leer la descripción de la API, usar una área de pruebas, revisar las impresoras compatibles y todo lo que necesitas saber para usar este plugin. Puedes revisar la documentación en: Documentación plugin ESC POS Finalmente, otra cosa que se cambió es la respuesta que devuelve el endpoint /imprimir. ...

septiembre 20, 2024 · 3 min · 495 palabras · Parzibyte

Generador de números aleatorios online

Hoy te quiero compartir una herramienta en línea para generar números aleatorios directamente en el navegador web. Puedes especificar el límite inferior, límite superior y cantidad de números aleatorios que quieres generar. También puedes especificar el separador de números aleatorios para que sea una coma, un punto, un espacio, un salto de línea o cualquier carácter. El generador de números aleatorios permite mostrar los números generados o descargarlos en un archivo de texto (extensión txt). ...

agosto 29, 2024 · 2 min · 426 palabras · Parzibyte

Leer 10 mil números y ordenar con C

En el ejercicio de programación de hoy vamos a trabajar con ANSI C para leer 10000 (diez mil) números de un archivo de texto y ordenarlos usando varios algoritmos, los cuales son: Selección Inserción Burbuja Rápido (Quicksort) Mezcla (Merge) Vamos a leer el archivo usando fgets y convertir cada número con atol, luego vamos a rellenar un arreglo con esos números (hasta una cierta cantidad de números) y ordenarlos comparando los tiempos de ejecución de cada algoritmo. ...

agosto 29, 2024 · 9 min · 1786 palabras · Parzibyte