Nuestro propio plugin Lazy Loading
Clase 21 de 29 • Curso de Manipulación del DOM
Contenido del curso
Alejandro Dotor
student•
hace 5 años
Sebastián Buitrago
student•
hace 5 años
Clase 21 de 29 • Curso de Manipulación del DOM
Contenido del curso
Alejandro Dotor
Sebastián Buitrago
Carlos Eduardo Gomez García
José Pablo Jiménez Cucanán
Juan Cruz
Andrés Felipe García Rendón
Luciano Marchese
Gabriel Andrés Rondón Barragán
Sebastian Heredia
Seba Cardoso
Sebastian Heredia
George Báez Beltré
Ines Valeria Foglino
Juan Diego Loaiza Martinez
Andres Felipe Pinchao Ramirez
Juan David Moreno Rodriguez
Oscar Leandro Camacho Vasquez
Edgar Lopez Arroyo
Maria Tohabanda Duchi
Jacobo Burbano
Sergio Martinez
Miguel Angel Reyes Moreno
Melba Indhira Tejada Leonardo
Jonathan 🦑 Alvarez
Johel Jesus Hoces Saenz
Isaac Yael Ruiz
Daniel Adolfo Ordoñez Rubio
Isaac Yael Ruiz
He visto que el profe es muy rápido cuando escribe código, esto es porque usa los shortcuts que nos da el software, en este caso VS Code.
Les dejo los link para que vean todo lo que se puede hacer solo con el teclado: MAC 🟦 WIN Espero mejoren su productividad a la hora de escribir código 💪
con oprimir ctrl+k y ctrl+s aparecen todos los atajos segun tu SO, en mac obviamente seria con comand, y ademas desde alli los pueden editar
Foxes are the bests:3!
API sumamente útil xD
Este link tiene muchas apis para poder trabajar este taller y practicar.
gracias por el dato colega!
Muy bueno!
Tengo la sensación de que Jonathan explica muy bien, este curso ha sido bastante enriquecedor.
Después de seguir por la ruta de desarrollo web, es impresionante como uno puede entender y hacer todo tan fluido donde vamos aprendiendo cosas gradualmente. 😃
Después de seguir por la ruta de desarrollo web, es impresionante como puede entender y hacer todo tan fluido donde vamos aprendiendo cosas gradualmente. :)
<div id="imagenes" class="pt-10"> <div class="p-4"> <img class="mx-auto" width="320" height="120" src="https://randomfox.ca/images/2.jpg" alt=""> </div>
Para copiar y pegar
Jaja...gracias!!!
Continuamos :)
Emmet Abrevation
Esto sirve para crear etiquetas en html mucho mas rápido, te dejo un ejemplo con los div y imágenes con las clases ya agregadas .
div.p-4*9>img.mx-auto```
La forma en la que explica Jonathan es increíble 🤩
El enlace de la imagen
Usando <figure> para manejar imagenes
<div id="root"> <figure class="p-4"> <img class="mx-auto" src="https://randomfox.ca/images/1.jpg" width="200" alt="Zorro Image" /> </figure> <figure class="p-4"> <img class="mx-auto" src="https://randomfox.ca/images/2.jpg" width="200" alt="Zorro Image" /> </figure> </div>
Happy to learn new things. :)
Use javascript para la implementación desde las imágenes, mas automatizado y manejando la optimización de este lo mejor posible
const divImages = document.getElementById('images') let foxes = [] for(let i = 1; i < 8; i++){ const imagenes = document.createElement('img') imagenes.setAttribute('src' , `https://randomfox.ca/images/${i}.jpg`) imagenes.setAttribute('class', 'mx-auto p-8') foxes.push(imagenes) //Manejo de lotes } divImages.append(...foxes)
En el caso de que quieran probar otras imagenes y variaciones de estas yo utilice esta API: 👌
Workshop 2: Lazy loading
Presentación del proyecto
Repositorio del proyecto
Link de las imágenes de los zorros(primera foto)
Mi código. [](<img width="320" src="https://randomfox.ca/?i=9/images/2.jpg" alt="imagen de un cachorro"></div>)
Hola Indhira, muchas gracias por el código, crees que podrías enviarnos tu repositorio de GitHub para ver todo el demás código y poder ayudarte mejor? :)
Me sale ese error, alguien me ayuda por favor :(
Me sale que el port 8080 no está disponible pero no entiendo cómo cambiarlo, ya puse --port pero no pasa nada, también si le pongo --port 5000 ¿Cómo cambio de port? obviamente lo estoy haciendo mal pero es que no encuentro cómo se hace
Hola, Isaac :)
Si se trata de un proyecto de Snowpack, revisa si existe el archivo snowpack.config.mjs o puedes crearlo en el directorio raíz del proyecto.
Debería exportar un objeto JSON así
export default { devOptions: { port: el puerto que quieres usar }, };
Gracias!