Desactivar JavaScript en Firefox para comprobar enlaces SEO

Desactivar JavaScript en Firefox para comprobar enlaces SEO

Tiempo de lectura: < 1 minuto Hoy vamos a ver cómo aplicar una estrategia para comprobar enlaces SEO. Desactivar la carga de JavaScript utilizando nuestro navegador Firefox. Con esto lograremos cargar exactamente lo que un robot crawling carga cuando analiza la web. Lo primero que tenemos que hacer es abrir Firefox y cargar esto en la dirección URL: Una vez dentro … Leer más

Generar un sitemap.xml dinámico con Next.js

Generar un sitemap.xml dinámico con Next.js

Tiempo de lectura: < 1 minuto Hoy vamos a aprender cómo podemos generar un sitemap.xml de forma dinámica con Next.js esto es muy útil si tenemos links separados de cada uno de nuestros artículos y queremos generar su sitemap.xml. Con esta técnica mejoraremos mucho el SEO de nuestra web y ayudaremos a los buscadores a indexar correctamente nuestra web. Lo primero … Leer más

Usar archivos mp3 en React con Next.js

Usar archivos mp3 en React con Next.js

Tiempo de lectura: < 1 minuto Hoy vamos a aprender a importar y utilizar nuestros archivos .mp3 con Next y React. Cuando intentamos importar un archivo .mp3 nos devuelve este error: Para solucionarlo tenemos que instalar file-loader: Y configurarlo dentro de nuestro module.exports Y para que la importacón de *.mp3 no de problema con TypeScript añadiremos dentro de declarations.d.ts (si no … Leer más

Implementar Stripe en React

Implementar Stripe en React

Tiempo de lectura: 3 minutos Hoy vamos a aprender cómo implementar la plataforma de pago Stripe en React. Stripe es una Plataforma de pago segura para realizar transacciones o micro-transacciones online. Nos evitará tener que almacenar datos de tarjetas de crédito y ayudará a cumplir con la GDPR. Otra de sus ventajas es la comisión baja que cobra en cada … Leer más

Reproducir sonido con React

Reproducir sonido con React

Tiempo de lectura: < 1 minuto Hoy vamos a implementar una función que nos permitirá reproducir sonido utilizando React. Lo primero que tenemos que hacer es crear esta función que nos permitirá cargar el sonido: Y para utilizarlo haremos lo siguiente. Colocamos nuestros sonidos dentro de assets/sounds Los importamos e invocamos a la función creada poniendo .start() al final. isMa Ingeniero … Leer más

Comunicar una Web en React con un Frame dentro de React o web HTML con JavaScript usando postMessage()

Comunicar una Web en React con un Frame dentro de React o web HTML con JavaScript usando postMessage()

Tiempo de lectura: 2 minutos Hoy vamos a ver cómo podemos comunicar una web creada con React con un iFrame o frame en React o HTML con JavaScript. Cargar el Frame Creamos un iframe: En urlCargar ponemos la URL de la web de la que queremos capturar el evento. Ahora creamos el evento que nos permitirá obtener los datos: Primero … Leer más

Comunicar una Web en React con un WebView de React Native usando postMessage()

Comunicar una Web en React con un  WebView de React Native usando postMessage()

Tiempo de lectura: < 1 minuto Hoy vamos a aprender cómo podemos comunicar un Web creada con React con un WebView en React Native y además utilizaremos la función postMessage() de JavaScript. Esto es muy útil para poder realizar interfaces con web y poderlas implementar dentro de una APP. React Native Utilizaremos la librería react-native-webview La importamos: Lo primero que tenemos … Leer más

Crear un lector de códigos de barras utilizando React

Crear un lector de códigos de barras utilizando React

Tiempo de lectura: 2 minutos Hoy vamos a aprender cómo implementar un lector de códigos de barras utilizando React. Lo primero que tenemos que hacer es instalar la librería quagga2 también se puede usar quagga. Una vez instalado, vamos a crear un componente llamado scanner.tsx El lector reconocerá códigos que indiquemos en el decoder: { readers: [«ean_reader», …] para añadir … Leer más

Solucionar error en VSCode No muestra Explorador.

Solucionar error en VSCode No muestra Explorador.

Tiempo de lectura: < 1 minuto Si VSCode nos deja de mostrar el explorador. Tendremos que hacer lo siguiente: Vamos a VSCode y pulsamos: Se abrirá la consola de comandos. Y tendremos que ejecutar este comando (copiáis y pegáis): isMa Ingeniero en Informática, me encanta crear cosas o arreglarlas y darles una nueva vida. Escritor y poeta. Más de 20 APPs … Leer más

Añadir mapas Open Street Maps con Leaftlet en React y también compatible con Next.js

Añadir mapas Open Street Maps con Leaftlet en React y también compatible con Next.js

Tiempo de lectura: 2 minutos Hoy vamos a aprender cómo podemos crear un componente de Mapas compatible con Open Street Maps usando la librería Leaftlet en React. Lo primero que tenemos que hacer es instalar la librería necesaria: Y después la librería Leaflet: Y si necesitamos TypeScript (en mi caso sí) instalamos lo siguiente: Instalamos los iconos: Ahora podemos crear … Leer más