Parzibyte's blog

Blog de conocimiento gratuito: linux, programación, open source, bases de datos, android, frameworks, web e informática en general.

SQLite3 en JavaScript con WebAssembly y OPFS

Anteriormente te he hablado de SQLite en el navegador web, ya sea con Svelte o JavaScript puro. Hoy voy a mostrarte otra cosa: cómo invocar a SQLite3 desde WASM o WebAssembly.

Al final vamos a estar invocando la API de SQLite3 de JS desde WebAssembly. Te enseñaré cómo es mi entorno de trabajo y cómo usar SQLite3 con WebAssembly.

(más…)

SQLite3 con JavaScript puro y OPFS – Tutorial

En este post te mostraré cómo usar SQLite3 directamente en el navegador web usando la librería original escrita en C a través de WebAssembly y el OPFS para alojar la base de datos. De este modo tendremos SQLite3 original en la web para trabajar en el navegador con JS del lado del cliente.

Podremos hacer esto con JavaScript puro o con cualquier framework; pero te mostraré un ejemplo básico y bien explicado de SQLite3 con JavaScript. Luego te enseñaré un ejemplo con Tailwind, Svelte y Progressive Web apps.

(más…)

Usando SQLite3 en la web con Sveltekit y @sqlite.org/sqlite-wasm

Estoy muy emocionado porque después de tanto tiempo y gracias al Origin Private File System podremos tener SQLite3 en los navegadores, con todas sus ventajas y todo contenido desde una página web.

Si quieres puedes ver el hola mundo sin Svelte, es decir, con JS puro y aprender cómo usar SQLite3 en el navegador web sin servidores.

Ya había leído eso hace tiempo pero tenías que hacer unas cosas “experimentales”.

El punto es que ando aprendiendo un poco de Svelte con Tailwind haciendo una app de notas (a las que les agregaré encriptación) y me dio curiosidad por ver si SQLite3 ya estaba “portado” totalmente, porque si bien ya existía con WebAssembly no había manera de crear archivos binarios en el navegador web.

Entonces encontré a: https://developer.chrome.com/blog/sqlite-wasm-in-the-browser-backed-by-the-origin-private-file-system/

Y vi que ya era posible. Lo siguiente era hacerlo funcionar con SvelteKit que usa a su vez Vite para todo su entorno.

Te contaré cómo lo hice y de dónde me he guiado.

(más…)

Cambiar ubicación e idioma en página web

Hoy vamos a ver cómo modificar o falsificar nuestro idioma y ubicación en un sitio web. Esto sirve a los programadores para:

  1. Probar si el sitio web funciona en varios idiomas
  2. Revisar si la ubicación se mueve y no exponer la propia ubicación al momento de hacer pruebas

También puede servir para otras cosas como para no revelar tu ubicación real a las páginas web o ver una página en otro idioma.

Por cierto, lo haremos con Google Chrome pero me imagino que cualquier navegador decente debe funcionar.

(más…)

Solicitar firma manuscrita con JavaScript

En este post te mostraré cómo solicitar la firma a un usuario desde la web usando JavaScript, de modo que el usuario pueda firmar como si lo hiciera en una hoja de papel.

Después podremos enviar esa firma al servidor, descargarla, colocarla en un documento, etcétera.

Documento con firma de usuario con JavaScript - Imprimir o guardar como PDF

Documento con firma de usuario con JavaScript – Imprimir o guardar como PDF

Quiero que quede claro que vamos a solicitar la firma manuscrita usando programación en la web a través de un navegador. Para ello vamos a usar el canvas.

Nota: una vez que la firma haya sido dibujada puedes enviarla a PHP, Java, Node, etcétera. En el ejemplo te mostraré cómo descargarla como imagen y colocarla en un documento.

(más…)

Prevenir cierre de página web con JavaScript

En el post de hoy te mostraré cómo prevenir que el usuario navegue a otra página o pestaña, recargue la página o la cierre. Todo esto con JavaScript.

Desde ahora te digo que (si bien contradice el título del post) no es posible prevenirlo al 100 %, solo se puede mostrar una advertencia que el usuario puede ignorar.

Si bien no vamos a prevenir, te mostraré cómo mostrar un mensaje para darle al usuario la posibilidad de no cerrar la pestaña o navegar a otro lugar.

Esto funciona con Chrome y Firefox en sus últimas versiones al momento de escribir este post.

(más…)

Mostrar PDF en navegador con PHP

Resumen: mostrar PDF directamente en el navegador usando PHP, es decir, servir un archivo pero no descargarlo, sino mostrarlo en el navegador.

(más…)