on the code

Entradas

Mostrando entradas de agosto, 2024

Como consumir una API con REACT 19 | use - suspense

En este artículo, exploraremos cómo consumir una API utilizando la nueva API use en React 19, una característica que simplifica la gestión de datos asíncronos en las aplicaciones. Primero que nada te dejo el video de este articulo, no te olvides de suscribirte a mi canal! subo mucho contenido de este estilo 😁 El Escenario Supongamos que tienes una aplicación en la que necesitas consumir una API (ejemplo una API para traer nombres de usuarios). Anteriormente, habrías utilizado useEffect, pero con React 19, las cosas son diferentes. Ahora, puedes utilizar la API use, que permite manejar promesas de forma mucho mas simple. Desglosando el Código 1. fetchUsers y userPromise Primero, se define la función fetchUsers para obtener datos de una API y se almacena la promesa en userPromise. const fetchUsers = async () => { const res = await fetch('https://jsonplaceholder.typicode.com/users'); return res.json(); }; const userPromise = fetchUsers(); 2. El Componente Us...

Como utilizar la API de Mercado Pago con Javascript en 2024

Primero que nada, me gustaría aclarar que este artículo no va a ser un tutorial paso a paso sobre cómo utilizar la API de Mercado Pago. Eso ya lo hice en video y aca te los dejo. Te los recomiendo. De hecho, después de estos, hay más videos en mi canal sobre cómo integrar el checkout de Mercado Pago como un modal o con distintos tipos de redirecciones, así como también cómo capturar información un pago exitoso. Por otro lado, me gustaría elaborar una guía sobre cómo utilizar la versión anterior de esta API. Esto está destinado principalmente a ayudar a aquellas personas que hayan visto mis videos sobre esta API en mi canal de YouTube, pero aquellos que se encuentren desactualizados y estén buscando aprovechar esos proyectos sin necesidad de modificar el código de mercado pago a la última versión como se muestra en los vídeos que compartí más arriba. Dejo acá el link directo a los videos que han quedado desactualizados para que tengas a mano el tutorial que estés siguiendo. Integración ...

Creando un filtro de busqueda simple con JavaScript

Vamos a crear paso a paso un filtro de búsqueda con JavaScript. La intención es compartir el código con explicaciones debajo para que puedas copiarlo e ir probando el proyecto en tu propio editor de código. Antes de comenzar te dejo el video de este articulo. No te olvides de suscribirte a mi canal, subo contenido de programación regularmente. 1 - Armando la estructura HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="styles.css" /> <title>Document</title> </head> <body> <div class="search-container"> <input type="text" id="searchInput" placeholder="buscar país" /> <ul id="resultsList" class="results-list"></ul> <p id=...

Buscador y filtrado de productos en Javascript

Vamos a crear en este articulo un buscador y filtrado de productos en JavaScript paso a paso. Te voy a ir dejando el código limpio para que puedas copiarlo y probarlo en tu proyecto junto con explicaciones. Te dejo también el video de este tutorial por si te interesa tenerlo a mano. ¡No te olvides de suscribirte a mi canal! ♥️. 1) El HTML del buscador del productos en javaScript <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="styles.css" /> <title>Document</title> </head> <body> <h1>BUSCAR PRODUCTOS</h1>  <div class="search-container"> <input type="text" id="searchInput" placeholder="Search products..." /> ...

Botones de scroll horizontal con html - css y Javascript

Vamos a programar en este articulo dos botones para hacer scroll horizontal con html, css y unas pocas líneas de JavaScript. Vas a poder encontrar el código explicado paso a paso y te va a quedar disponible para que lo puedas copiar y probar en tu propio proyecto. Antes de arrancar te dejo también disponible este tutorial en vídeo. No olvides suscribirte a mi canal, subo contenido regularmente! ahora si , comenzamos con el código. 1 - Comenzamos creando la maquetación HTML. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="styles.css" /> <title>Document</title> </head> <body> <div class="scrolling-buttons-container"> <span id="scrolling-button-left">👈</span> <span...

Append vs AppendChild en Javascript ¿ Cuál utilizar ?

No comprendo por que usas append y no appendChild. Hace poco recibí este comentario en uno de mis videos de YouTube en donde muestro como ir paso a paso creando la lógica de un E-commerce con JavaScript. Aquí el video para quien le interese: En verdad esto me motivo a escribir este articulo para explicar la diferencia entre ambos y comentar cual es conveniente utilizar. ¿Qué son append y appendChild? Append y appendChild en JavaScript son metodos para manipular el DOM (es decir: el Document Objet Model). Ambos tienen la facultad de agregar elementos al DOM pero tienen enfoques ligeramente diferentes. El método appendChid Su tarea principal es agregar un único nodo como hijo al final de otro nodo existente. Para utilizarlo, primero hay que seleccionar el nodo al que deseas agregar un hijo y luego llamar a appendChild. Un ejemplo con appendChild() const parent = document.getElementById("parentElement"); const child = document.createElement("div"); parent.appendChil...

Como deployar proyecto Backend con Node.js y Expess.js en Vercel

Se hace bastante simple deployar un proyecto backend con NodeJS y Express en vercel, solo hay que tener en cuenta algunas pocas cosas! te lo voy a ir mostrando en este articulo paso paso, dejándote también el código de ejemplo para que te lo puedas copiar y probar en tu proyecto. Te dejo también el paso a paso en video, no te olvides de suscribirte a mi canal ❤️ Preparando proyecto para deployar en Vercel Vamos a comenzar creando un proyecto simple para deployar, en tu editor de código crea una carpeta llamada app. Dentro de esta carpeta corre el siguiente comando en la consola: npm init -y Esto va a crear un archivo package.json con información básica y necesaria del proyecto. Ahora, dentro de nuestra carpeta app hay que crear otro archivo al cual lo vamos a llamar index.js, es importantísimo que se llame index.js y no de otra forma como app.js o server.js, vercel va a buscar un archivo que se llame index.js a la hora de deployar el código. Entonces la estructura tiene que ir que...

Solucionando conflictos de CORS al acceder a la API del Banco Central de Argentina

Si estás intentando utilizar la API del Banco Central de Argentina desde el front-end de tu sitio web, es posible que te encuentres con un problema de seguridad conocido como CORS. En pocas palabras, CORS es una medida de seguridad implementada por los navegadores web para evitar que una página web haga solicitudes a un servidor desde un dominio diferente al que el servidor está configurado para permitir. Hace un tiempo hice un video de YouTube en mi canal on the code sobre cómo consumir la API del BCRA con Javascript, pero al recibir consultas sobre cómo resolver el problema de CORS sin utilizar una extensión del navegador (que era lo que estaba haciendo en mi vídeo), decidí crear un proxy para solucionar este problema. Primero te dejo el video, no olvides suscribirte a mi canal ! subo contenido regularmente. Todo esto de CORS es muy común en las aplicaciones web modernas, ya que a menudo utilizan múltiples servidores y dominios diferentes. Afortunadamente, existe una soluc...