Javascript

Acabo de crear un conversor de formato de imágenes muy simple usando JavaScript del lado del cliente. Es un conversor muy simple que te permite convertir entre formatos de imágenes como lo son JPG, PNG, AVIF y WEBP. https://parzibyte.me/apps/conversor-imagenes/ Con este conversor puedes convertir de webp a png, webp a avif, webp a jpg y todas las combinaciones posibles entre estos formatos. El conversor es realmente rápido, basta con seleccionar el formato de salida, la calidad y listo, una vez que selecciones la imagen se va a descargar la misma imagen pero con el nuevo formato, así de simple. ...

Gracias a WebAssembly podemos ejecutar código de otros lenguajes de programación desde el navegador web con JavaScript. La ventaja de WASM es que, aparte de ser rápido, permite programar en otro lenguaje y aprovechar las librerías presentes en el mismo. Personalmente he usado Golang con WebAssembly para crear un generador de credenciales, códigos QR y códigos de barras. Todo el procesamiento y generación de imágenes se hace con Go, para luego exportar los resultados a JavaScript. En este post voy a documentar **cómo exportar un arreglo de tipo byte ([]**byte) de Go a un Uint8Array de JavaScript, ya que, como te lo dije anteriormente, esto sirve cuando creamos un archivo binario con Go y queremos exportarlo a JavaScript. Además, un Uint8Array sí puede ser transportado a través de un WebWorker usando el structured clone algorithm. ...

Hoy te enseñaré a extraer la cadena base64 de una clave PEM usando una función de JS que puedes usar en el propio navegador web o en la consola de depuración, así como en Node. ...

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly (con Golang) en Vue 3 con Vite y Pinia. Voy a explicar cómo comunicar las funciones de WASM con JavaScript y viceversa, dejando mucho código del lado de Golang con WASM. Toma en cuenta que es una documentación muy específica a mi modo de trabajo. No esperes un tutorial paso a paso. ...

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores que quiero documentar para ayudar a otros usuarios que experimenten las mismas fallas. Cabe mencionar que mi entorno de trabajo es Comlink con WebAssembly, Vue 3, Vite y Pinia. Varias de esas tecnologías no afectan al uso de Comlink pero me parece importante mencionarlas. Estos errores, en un contexto de JavaScript puro son fáciles de solucionar. El Maximum call stack size exceeded normalmente es causado porque una función recursiva se ha salido de control, y el cannot read property of undefined es porque una variable es undefined y tratamos de leer una propiedad. Sin embargo, con Comlink los errores son distintos. ...

En este artículo te voy a enseñar cómo usar un “top level await” esperando a que una promesa se resuelva dentro de una store de Pinia con Vue 3. Para usar await con Pinia debes esperar a que la promesa se resuelva fuera de la definición de la store. ...

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. ...

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. ...

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. ...

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. ...