Desplegando el proyecto

"Nunca paremos de aprender"

🖨️ 𝗖𝗹𝗮𝘀𝗲 #𝟭𝟵: 𝗗𝗲𝘀𝗽𝗹𝗲𝗴𝗮𝗻𝗱𝗼 𝗲𝗹 𝗽𝗿𝗼𝘆𝗲𝗰𝘁𝗼 🖨️
.
Debemos hacer la inserción de content para tenerlo visualmente, justo antes de catch:

content.innerHTML = view; //innerHTML es igual a la vista que se ha creado e itera con el metodo map y devuelve un nuevo arreglo con los elementos que queremos obtener como el título, la descripción, la imagen miniatura de la API

Para el catch, se debe agregar la estructura (podemos editar la salida como queramos):

catch (error){
console.log(error); //en caso que de que haya un error el catch lo captura e imprime qué tipo de error devolvió
}

Para conectar el index con el main, se agrega un script con la raíz del proyecto:

<script defer src="./assets/main.js"></script> <!--cuando ésto se ejecute en el navegador, va a leer el archivo main y asignar en memoria c/u de los elementos API, options (la lógica del código).-->

Es importante colocar la palabra defer:

• Defer es un atributo booleano.

• Solo debe usarse si hay un script externo que lo contenga src

• El script se descarga en paralelo al análisis de la página y se ejecuta tan pronto como esté disponible (antes de que se complete el análisis).
  Fuente: aquí
  .

• Se ejecuta el index.html con la extensión Live Server y debe aparecer la landing con todos los elementos de forma correcta.

• Con la herramienta Inspeccionar del navegador (dar click derecho a la página y buscar Inspeccionar), nos permite analizar cuáles son los posibles errores arrojados por consola (Console) y si se selecciona la pestaña Network, se puede visualizar los servicios y conexiones a la API en vivo.

• Una vez que estemos satisfechos con la landing, se procede a subir el código a un servidor, en éste caso a Github.

• Para el deploy se hace la implementación de Github pages (mostrar nuestro código html dentro del repositorio).

• Vamos a consola para instalar el paquete con: npm install gh-pages --save-dev-

• Agregar en el archivo package.json el script (editar el apartado “test”):

"scripts": {
"deploy": "gh-pages -d src"
},

Se crea una nueva rama en el repositorio y se habilita para su publicación. Para ello primero se debe actualizar los cambios al repositorio antes del deploy, en consola para conocer el estado del se proyecto: git status

• Para confirmar y comentar que hay nuevos archivos y cambios se coloca: git commit -m “[ADD] files”
• Por último se hace el deploy con el comando: npm run deploy que ejecuta un comando de gh-pages para la subida de una rama y que luego se pueda mostrar como una página web.
• -Para obtener la dirección que arroja en Github con gh-pages, hay que entrar en la pestaña de Settings, en el panel izquierdo entrar a Pages, automáticamente nos muestra la url para ver nuestra landing y compartirla a otros.

En esta clase del curso profesional de javascript explican como es que llega un script al navegador en el caso de defer se va a ejecutar Javascript hasta el final, es decir luego de que se cargue todo el documento.

Luego de haber pensado mucho decidí adaptar con esto una web tributo a Lovecraft que tenía guardada, los videos quedaron en la última secci´n con la opción de ir a ellos directamente

Quiero avisar que está caído el link para hacer el desafío

Para el reto, utilice la libreria que se llamam sweet alert es muy facil de usar, se las recomiendo, aqui les dejo el link https://sweetalert2.github.io/#examples

Realice un proyecto desde cero utilizando html, sass y js. El proyecto se basa en utilizar la API PokeApi para obtener de manera aleatoria un pokemon, mostrar sus imagenes y los detalles del mismo. Dejo el enlace al GitHub Pages
https://nicogoux.github.io/Find-your-pokemon-app/

Hola! Aquí les dejo mi versión 1.0. Apliqué el dark mode en Tildwindcss y capté el vídeo de YouTube que tengo en uno de mis canales. Mi reto es ahora usar la API de Pinterest para insertar mis proyectos.

Algo molesto de la metodologia del profe es que asi sea algo sencillo no lo explica asi sea por encima como el defer.

dejo una explicacion rapida

Es posible que la solución que te hayan sugerido sea utilizar el atributo "defer" en la etiqueta del script en el HTML. El atributo "defer" se utiliza para diferir la ejecución de un script hasta que se haya cargado completamente el documento HTML, lo que significa que el script se ejecutará después de que se hayan construido los elementos HTML de la página web.

El error "Cannot set properties of null (setting 'innerHTML')" se produce cuando intentas establecer la propiedad "innerHTML" en un elemento que aún no ha sido creado en el DOM (Document Object Model). Si colocas el script que intenta acceder al elemento antes de que se haya creado el elemento en el HTML, se producirá este error.

Al utilizar el atributo "defer" en la etiqueta del script, le estás indicando al navegador que diferirá la ejecución del script hasta que se haya construido completamente la página web, lo que garantiza que los elementos HTML que se intentan acceder ya existan en el DOM.

Por ejemplo, puedes agregar el atributo "defer" en la etiqueta del script de esta manera:

php
Copy code
<script src="tu-archivo.js" defer></script>
De esta manera, el script se ejecutará después de que se haya construido la página web y se hayan creado los elementos HTML que se intentan acceder, lo que evitará el error "Cannot set properties of null (setting 'innerHTML')".

Mi proyecto: https://vcombitad.github.io/async-landing/

Aqui dejo humildemente mi aporte, en mi caso, consumi la API de studio ghibli, la puedes encontrar aqui si deseas probar tu tambien!: https://ghibliapi.herokuapp.com/#section/Base-URL

y aqui esta el resultado de mi poryecto: https://sora-san-df.github.io/Project-CV/

y slgunas fotitos! c:

Hola compañeros, quería compartirles la pagina que hice, en mi caso yo la hice haciendo uso de una librería de js, la cual es react js, y lo hice conectado con una API de peliculas, la cual me permite obtener informacion de diferentes peliculas, asi como hacer filtros. Yo la subi a netlify, la url es: https://diego-gallery.netlify.app

comparto mi proyecto del curso:
https://liwgar.github.io/curso_asincro_js/

Hola como están? Tengo un error a la hora de poner los videos de YouTube, no me aparecen y en la consola me aparece “Cannot read properties of undefined (reading ‘map’)” les dejo mi código por si me pueden ayudar. Gracias 😃

const API = 'https://youtube-v31.p.rapidapi.com/search?channelId=UCHAzisV9csGSEdXf3Wgkhmg&part=snippet%2Cid&order=date&maxResults=50'

const content = null || document.getElementById('content')

const options = {
	method: 'GET',
	headers: {
		'X-RapidAPI-Key': '36be455b77msh0447b8241cd0f50p162a6cjsna65ea125c0d9',
		'X-RapidAPI-Host': 'youtube-v31.p.rapidapi.com'
	}
};

async function fetchData(urlApi) {
    const response = await fetch(urlApi, options)
    const data = await response.json()
    return data
}

(async () => {
    try {
      const videos = await fetchData(API);
      let view = `
      ${videos.items.map(video => `
        <div class="group relative">
          <div
            class="w-full bg-gray-200 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:aspect-none">
            <img src="${video.snippet.thumbnails.high.url}" alt="${video.snippet.description}" class="w-full">
          </div>
          <div class="mt-4 flex justify-between">
            <h3 class="text-sm text-gray-700">
              <span aria-hidden="true" class="absolute inset-0"></span>
              ${video.snippet.title}
            </h3>
          </div>
        </div>
      `).slice(0, 4).join('')}
      `;
      content.innerHTML = view;
    } catch (error) {
      console.log(error);
      alert('ERROR')
    }
  })();

Mi comentario es que el código dado por GNDX los vídeos no dirigen hacía el vídeo.
Reto a que hagan las etiquetas que logra que se abra el vídeo en una nueva pestaña.

O si se sientes osados. Implementen un reproductor sin salir de su landing async

Mi proyecto se lo dediqué a un amigo divulgador de la flora y fauna de México.

Biologando con Miguel

la verdad yo no entendi casi nada, solo me doy una idea no se si soy yo, o a los cursos aveces les falta explicacion , enfin solo se que en un poco tipo aprendere bien asi como ya aprendi html css git github que igual se me hicieron dificiles

Hola, aproveché para hacerle publicidad a mi papá, así me quedó el proyecto.

https://ingeshare.github.io/async-landing/

Esta es la pagina

Excedí el límite diario, pero me sirvió para probar el mensaje de error.

Aquí está mi landing 🐱: https://jjat00.github.io/lofi-code-landing/

Usé la API de github para traer mis repositorios para el ejercicio! si lo quieres utilizar es el siguiente

const API = `https://api.github.com/users/${usuario}/repos`;

asi quedo el mio un poquito rapido pero super bueno.
https://shaggyt85.github.io/async_landpages/

Aqui mi proyecto 😃

Hola, modifique un poco la plantilla para agregar el Dark Mode y un poco de responsividad. Dejo la url: https://clmiranda.github.io/async-landing/

https://pjmonrroy.github.io/async-landing/

lo de github pages ya no funciona 😦, seria interesante que actualicen la forma de deploy gratuita

Hola esta es mi landing page la cual realice con React js
(Aun estoy en aprendizaje con este lenguaje). Espero les agrade
live: https://irumau.github.io/manga-landy/
repo: https://github.com/Irumau/manga-landy

Costo un poquito trabajar con la api porque en vez del canal, elegi una playlist. Y no use el template que proporciono sino otro que cuenta con bootstrap.
Les dejo el link:
https://batman-api.netlify.app/

Yo hice el landing de Te lo resumo.
Lo pueden ver aquí:
https://jorgeromero17.github.io/landing-teloresumo/

hola buenas tardes me aparece esto en la cponsola alguien me podria ayudar

Mi landing page enlazada con mi canal de youtube. Reto culminado 😃 : https://diegomp34.github.io/async-landingpage/

Hola comunidad!! yo hice mi landing page basado en un personaje de Marvel!! Black Panther…

https://tavodlhoz.github.io/tavodlhoz-landing/

Aca dejo mi diseño

Buenas el repositorio esta dando un 404 , nose si hay que pedir algun permiso o que, pero aca dejo mi proyectito.
https://facuzogbe.github.io/async-landing/#acerca-de-mi

Hola les comparte mi landing page tengo pensado hacer mas cosas por si ven otros apartados en la pagina utilice la
api jikan
repositorio
pagina

Aca les dejo mi pagina inspirada en el crack de BZRP. https://josmanjimenez.github.io/BZRP-land-page/ .

Este es mi aporte algo sencillo espero les guste.

https://seven-tec.github.io/async-landing-page/

¡Hola! Aquí les dejo mi landing project. ¡Saludos desde Colombia! https://vegadelalyra.github.io/asyncLanding/

Les comparto mi proyecto:

https://jonathan-debugger.github.io/async-landing/
Le añadi una api de visualizacion basica de instagram

Pasos para subir los files de vscode a github

1. git add .
2. git commit -m “describe aquí tu commit”
3. git push -u origin main

Clase 22 - Desplegando el proyecto

Antes de desplegar nuestro proyecto hay que:

1. Vincular nuestro archivo main.js al index.html, pero tambien debemos agregarle el atributo defer al vinculo, quedando así: <script defer src="./assets/main.js"></script>.

   <aside>
   📌 El atributo defer indica al navegador que no espere por el script. En lugar de ello, debe seguir procesando el HTML, construir el DOM. El script carga “en segundo plano” y se ejecuta cuando el DOM esta completo.
   Esto evita que, en el códido main.js, tengamos un error al llamar el elemento content. Ya que al descargarse antes que el DOM, estaríamos haciendo un llamado a un elemento que no existe.

   </aside>

2. Agregar la implementación gh-page a nuestro proyecto.

   1. Instalación:

      npm install gh-pages --save-dev

   2. Configuración de package.json agregando el script.

      "scripts": {
          "deploy": "gh-pages -d src"
       }
      

      <aside>
      📌 Este script sirve para realizar el deploy a github pages desde la carpeta src, la cual contiene el código fuente.
      Si src tuviera otro nombre, debería indicar el nombre correcto de la carpeta.

      </aside>

   3. Deploy:

      Una vez agregado todos los archivos al repo, solo queda hacer el deploy ejecutando el comando:

      npm run deploy

      Esto crea una rama llamada gh-pages el cual ya cumple con el standar de github pages y mostrarla como una página web.

#Hola, Comunidad.

Les comparto mi proyecto: https://juancodev.github.io/landing-page-js/

Hola a todos, I need help:

.

.
nose poruqe no se muestran los resultados:

.
Aqui les dejo el JS:

.
Aqui el link de la API: https://rapidapi.com/everyday/api/ai10/
.
Espero super atentamente sus ayudas.

inentendible

Mi aporte con la api de youtube a la fecha de agosto 2022

const API = "https://youtube138.p.rapidapi.com/channel/videos/?id=UCJ5v_MCY6GNUBTO8-D3XoAg&hl=en&gl=US";

const content = null || document.getElementById("content")
console.log(content)

const options = {
    method: 'GET',
    headers: {
        'X-RapidAPI-Key': '5d3d60551bmsh1398382c8325a84p10b8a8jsn17a4115e4a40',
        'X-RapidAPI-Host': 'youtube138.p.rapidapi.com'
    }
};

async function fetchData(urlApi) {
    const response = await fetch(urlApi, options)
    const data = await response.json()
    return data;
}

(async () => {
    try {
        const videos = await fetchData(API)
        let view = `      
      ${videos.contents.map(video => `
      <div class="group relative">
        <div
                class="w-full bg-gray-200 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:aspect-none">
          <img src="${video.video.thumbnails[0].url}" alt="1" class="w-full">
        </div>
        <div class="mt-4 flex justify-between">
          <h3 class="text-sm text-gray-700">
            <span aria-hidden="true" class="absolute inset-0"></span>
            ${video.video.title}
          </h3>
        </div>
      </div>
      `).slice(0,4).join('')}
`;
        content.innerHTML = view
    } catch (error) {
        console.log(error)

    }

})();

Una observación, RapidAPI escanea la web verificando si los headers, que viene siendo:

const options = {
	method: 'GET',
	headers: {
		'X-RapidAPI-Key': 'numerosaleatoriosotorgadosporrapidapi',
		'X-RapidAPI-Host': 'host-de-la-api-en-cuestion'
	}
};

Seguramente les llegue un email notificando que esta información esta publica en internet, lo mejor sería crear variables de entorno, pero esto tendría un problema en GitHub Pages, tocaría publicar en otro sitio que permita esta integración de variables de entorno, como por ejemplo Heroku.

no se encuentra el repositorio de showcase, me imagino que estan implemaentado algunas cosas ya que este curso es relativamenete nuevo y la fake api tambiem… espero por estos dias algun profe publique el repo…

Estoy utilizando los videos de mi banda, Contrafuerza. Los invito a completar el reto y oír nuestra música

LISTOO => https://tonyrodriz.github.io/async-landing-prueba/

No tengo canal de YT, así que decidí usar una api del clima porque hace mucho calor:.

Falta algo de CSS y a lo mejor unos cuantos iconos, pero la idea e interpretación de la API está bien.

Saludos.

Espero en el futuro poder mejorar el proyecto.
Github Mi repo
Netlify Live site

Luego de varias ocasiones practica error, practica error ¿, este ha sido el resultado

reto pagina
https://andres-montes.github.io/async-page/

![](

link de Github Pages: https://markoteixido.github.io/async-landingPage_MM/src/index.html

Mi landing
https://samuelsanpo.github.io/async-landing/

Luego de 6 horas, lo logré: este es mi proyecto :’)

Buena suerte mochachos, el camino es duro pero el final es bello 😄

🦁 Preview

Normalmente suelo usar Netlify y vercel para hacer esos despliegues

Hola muchachos. Me puse a jugar un poco con el poligino y los colores y esto fue el resultado. ademas agregue links funcionales a los videos de mi canal (no pude solucionar los links inexistentes a las listas de reproduccion).

https://lufebadeca.github.io/async-landing/

🗒 asyncanime

Lista de los top anime de todos los tiempos

.
🤓 Cosas que utilicé:

• rapidapi/myanimelist La API no oficial de MyAnimeList
• render Para desplegar la web estática, tiene muchas más opciones de despliegue gratis (video de referencia)
• getimg.ai Para generar la imagen
  
  

Mi proyecto, Una landing page de Taylor Swift https://jsalegria16.github.io/landing-page-asyncjs/src/.

• Usé la API de Spotify para obtener los álbunes y los singles

Proyecto: https://zearkiatos.github.io/landing-page-web/

Github: https://github.com/zearkiatos/landing-page-web

Esta es mi proyecto, es sobre el mejor rapero de latinoamerica: Canserbero

Pues ya… aunque la verdad no sé qué aprendí del curso…

Diferencia entre <script defer> y <script> al final del <body>:

• <script defer> en <head>: El script se descarga en segundo plano mientras se construye el HTML, pero su ejecución se diferirá hasta que el documento HTML esté completamente construido.
• <script> al final de <body>: El script se descarga y ejecuta una vez que todo el contenido visible para el usuario esté construido.

.
Esa info está en el recurso compartido por el profesor

Probando como funciona la API, lo hice así, me gustaría aprender a usar más el map, y creo sinceramente que hay mucho campo de mejora. Pero me alegra poder consumir una API.
 

const content = null || document.getElementById("content");

const url = 'https://youtube-v31.p.rapidapi.com/search?channelId=UCsFjINquwqc-2L_yd-UKGZA&part=snippet%2Cid&order=date&maxResults=9';
const options = {
	method: 'GET',
	headers: {
		'X-RapidAPI-Key': '',
		'X-RapidAPI-Host': 'yo'
	}
};

(async ()=>{
	try {
		const response = await fetch(url, options);
		const result = await response.json();
		const items = result.items.forEach(element => {
			let id = element.id
			let video = element.snippet;
			let thumbnails = video.thumbnails;
			let view = `<a href="https://youtube.com/watch?v=${id.videoId}" target="_blank">
			<div class="group relative">
			<div
			  class="w-full bg-gray-200 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:aspect-none">
			  <img src="${thumbnails.high.url}" alt="${video.description}" class="w-full">
			</div>
			<div class="mt-4 flex justify-between">
			  <h3 class="text-sm text-gray-700">
				<span aria-hidden="true" class="absolute inset-0"></span>
				${video.title}
			  </h3>
			</div>
		  </div>
		  </a>`;
		  content.innerHTML += view
		});

	} catch (error) {
		console.error(error);
	}
})()

Buen día, estoy realizando los pasos segun el curso sin embargo cuando voy a correr el comando npm run deploy me sale este error, estuve leyendo sobre esa modificación de agosto 13 del 2021, dice que se debe crear un token personal, el cual ya cree pero no se como aplicarlo para que permita autenticarse.

Agradezco si alguien puede ayudarme