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

Solución a ERR_SSL_CIPHER_OPERATION_FAILED

Hoy voy a tratar de solucionar el error ERR_SSL_CIPHER_OPERATION_FAILED que aparece al usar npm install con, obviamente, Node. Te voy a relatar los problemas que tuve al encontrar ERR SSL CIPHER OPERATION FAILED y la solución que apliqué. ...

agosto 3, 2024 · 2 min · 287 palabras · Parzibyte

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

junio 13, 2023 · 4 min · 737 palabras · Parzibyte

Solución: ERR_OSSL_EVP_UNSUPPORTED con Node

Hace algún tiempo y también hoy me apareció el error de ERR_OSSL_EVP_UNSUPPORTED. Esto es porque se está usando la última versión de Node (me ocurrió con la versión 18 pero no me pasaba con la 16) y por defecto no permite que se usen funciones de openssl que ahora son “inseguras”. La solución simple es exportar la variable de NODE_OPTIONS pasando --openssl-legacy-provider. Todos dicen eso, pero no dicen cómo hacerlo específicamente en Windows. Por ejemplo, yo lo intenté con: npm run serve --openssl-legacy-provider Pero no es así. Así que veamos cómo solucionar el error ERR_OSSL_EVP_UNSUPPORTED en Windows al usar Node y NPM. ...

junio 7, 2023 · 2 min · 219 palabras · Parzibyte

Deshabilitar ESLint (Linter de JavaScript)

Hoy te mostraré cómo deshabilitar el linter de ESLint que normalmente se usa al programar aplicaciones web con JavaScript. Este linter nos ayuda a tener un código más limpio y ordenado, pero en ocasiones es necesario deshabilitar ESLint temporalmente o en determinadas líneas. En mi caso quería invocar al depurador (con debugger) y me aparecía el mensaje de: Unexpected ‘debugger’ statement no-debugger. Obviamente a ti te pueden aparecer otros errores relacionados a este linter llamado ESLint, por eso es que en este post te mostraré cómo deshabilitarlo ya sea por una línea o por un bloque, sin importar el error. ...

noviembre 4, 2021 · 2 min · 322 palabras · Parzibyte

Usar chart.js con Vue.js, Webpack y NPM

Hoy voy a enseñarte a usar chart.js (librería para crear gráficas en la web) con Vue.js cuando se programa en Webpack con NPM. Te aviso desde ahora que probablemente esta no sea la manera de vue, es decir, lo haremos como lo haríamos sin usar el framework, pero esto me ha funcionado y te funcionará a ti para no tener tantos problemas al integrar Chart.js con Vue. Nota: primero te invito a familiarizarte con chart.js, ya que aquí solo te enseñaré a usarlo con Vue a través de webpack con npm. Nota 2: en febrero de 2023 intenté usar este método y si instalas la última versión tal vez te aparezca un error. Para evitarlo, en el siguiente paso en lugar de usar npm install --save chart.js usa npm install --save chart.js@3.2.1, yo pongo la 3.2.1 porque es la última que me ha funcionado, pero me imagino que mientras sea menor a la 4 todo debería funcionar. La guía está en: https://www.chartjs.org/docs/latest/migration/v4-migration.html ...

noviembre 3, 2021 · 3 min · 471 palabras · Parzibyte

Usar librería de NPM en Vue con webpack y require

En este post de programación con JavaScript y Vue te enseñaré a importar una librería de NPM a un componente de Vue. Si bien esto es algo muy simple, en ocasiones podemos olvidarnos o perdernos. Por ello es que en el post de hoy te enseñaré a importar un paquete de NPM desde un componente de Vue y usarlo dentro de ese componente a través de require. Estoy suponiendo que usas la Vue CLI con Webpack, pero incluso si no lo haces, esto podría darte una ayuda. ...

octubre 1, 2021 · 3 min · 604 palabras · Parzibyte

Programar en Angular desde Android

En este post te mostraré cómo editar y crear proyectos de Angular desde tu móvil o tableta con Android. No vas a usar emuladores o cosas así, realmente podrás usar Angular en tu teléfono o dispositivo móvil. Vamos a lograr esto usando NPM y Node.js, mismos que se pueden instalar en Termux. Y como la CLI de Angular es solo un paquete más, podremos instalarla en nuestro teléfono parar crear y compilar proyectos de Angular. ...

septiembre 7, 2021 · 3 min · 501 palabras · Parzibyte

Configurar publicPath de Vue CLI en ./

En este tutorial te mostraré cómo hacer que la ruta pública de Vue (al usar la vue cli para compilar nuestros proyectos con npm run build) sea el directorio actual, es decir, ./. Normalmente la Vue CLI va a compilar y crear el archivo index.html pero en las rutas habrá algo como: script src=/js/script.js Si te fijas, no tiene el ./, por lo que en varios servidores causará errores. Hoy te enseñaré cómo hacer que Vue CLI compile las rutas de manera relativa al directorio actual. ...

marzo 16, 2021 · 2 min · 325 palabras · Parzibyte

Instalar Node y NPM en Ubuntu con nvm

En este post te mostraré cómo instalar Node y NPM en Ubuntu de manera muy muy fácil. Podremos tener la versión más reciente de ambos scripts con unos sencillos pasos; usando nvm. ...

abril 19, 2020 · 2 min · 265 palabras · Parzibyte