Presentación del proyecto
Clase 20 de 29 • Curso de Manipulación del DOM
Contenido del curso
Jimmy Buriticá Londoño
student•
hace 5 años
Eduardo Rodriguez
student•
hace 5 años
Sebastian Heredia
student•
hace 5 años
Jimmy Buriticá Londoño
Eduardo Rodriguez
Sebastian Heredia
Carlos Eduardo Gomez García
Andrés Felipe García Rendón
Giselle Desiree Boyer Jimenez
Efraín Hernández García
Anfernee Valera
Brandon Argel Verdeja Domínguez
Giselle Desiree Boyer Jimenez
Daniel David Mármol Rivero
Alexandra Gabriela
Fredy A. Yomayuza Colorado
Luis Lira
Cristian Roso
Cesar Guevara Cabrera
Gonzalo Vidal
Fredy A. Yomayuza Colorado
Luis Lira
Fredy A. Yomayuza Colorado
José Luis Quiróz Casas
Carlos Rubén Díaz Gutiérrez
Jhonatan Ronaldo
Karen Sanchez
Carlos S. Aldazosa
Jonathan Forero
Charles Castillo Rosas
Andres Prieto
Kevin Ramirez
Rodrigo Andre Gutierrez
Karen Sanchez
Muy descriptiva la imagen
Que excelente imagen, gracias.
Es importante mencionar que hoy en día el navegador ya tiene implementada una api nativa en HTML de Lazy Loading: . https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading . Sin embargo, aún no es compatible con todos los navegadores: .
. El motivo de usar Lazy Loading es la optimización de la página, es decir, es mejor que de inicio un usuario cargue pocos recursos de la página, de esta forma se acelera la carga de la misma, porque no tiene que cargar 100 imagenes de golpe, sino que de poquito a poquito va cargando las imágenes y se hace todo más ameno :D
Creo que soy fan de Lazy Loading, no sabia que existía pero eso en definitiva creo que optimiza el sitio (?)
Exactamente Andrés, el lazy loading permitirá que la página cargue más rápido.
Yo sabía que es posible hacer esto con HTML puro, es decir ya sin JavaScript y esa API de Intersection Observer
SI. Ya hay una API nativa de HTML para hacer Lazy loading, lo malo es que aun no está compatible para todos los navegadores 😥
Lazy Loading vs Eager Loading
Para que nuestro proyecto cargue más rápido teniendo en cuenta todo tipo de usuarios (Con una débil señal de internet o con un dispositivo de gama baja) podemos utilizar diferentes técnicas de loading:
Técnicas de lazy loading:
loading="lazy"El lazy loading es super útil tanto para apps como páginas web, permitirá que la carga de la página sea mucho más rápida mejorando así la experiencia del usuario.
El taller consiste en agregar una nueva API llamada intersection observer y todo lo aprendido anteriormente. El sitio se llamará Lazy loading para agregar imágenes y limpiarlas. En la cónsola podremos ver cuantas imágenes se solicitan y cuantas se han cargada (Solo cuando son visibles en el navegador). Esto es una técnica muy optimizada y avanzada de optimización WEB.
Hoy en día 'lazy loading' ya es compatible con Chrome, Firefox, Safari y Edge.
al clonar un proyecto en github es necesario estar conectado a nuestra cuenta personal ..?
No obligatoriamente, si solo haces "git clone" creo que no es necesario que tengas asociada la PC a tu cuenta de GitHub
Hola! Recuerda que Git es un software para control de versiones y Github una plataforma para sincronizarlo en la nube. Así que tú puedes clonar un repositorio a tu equipo sin necesidad de iniciar sesión ya que estarás usando Git, no GitHub. Ahora, si le haces push request al mismo repositorio o a uno nuevo en GitHub para tu uso ya es otra historia
Aqui se explica con el uso ya directo de un atributo HTML:
Esto me recordó a un término similar, el LAZY COMPILING, que se da en navegadores modernos, lo cual es que el contenido de las funciones no son compiladas al inicio de la ejecución del codigo Javascript, sino hasta que son llamadas(invocadas) así es mucho más rápido la carga al no compilar funciones que se tardarán en llamar (como la ejecución de lineas de código cuando se presione un botón) o incluso quizás nunca son disparados estos eventos(ni funciones)
Como instalo las dependencias en windows..?
Se instalan igual en cualquier SO, estando sobre el directorio del proyecto ejecutas npm install, esto busca el archivo package.json e instala todo lo que indica ahí.
Gracias Luis
Maravilloso curso ¡
¡Hey! Esta función la tiene Platzi en la sección de aportes y comentarios. 🙌
No pude clonar el proyecto final :(
tampoco pude clonar el repositorio me decia permission denied
Con el intersectionObserver se puede hacer infinite scroll, verdad?
Sí, el Intersection Observer API puede utilizarse para implementar la funcionalidad de "infinite scroll" (desplazamiento infinito) en una página web. El "infinite scroll" es una técnica que permite cargar más contenido a medida que el usuario se desplaza hacia abajo en una página, sin tener que hacer clic en un botón de carga adicional.
El Intersection Observer API proporciona una forma eficiente de observar los cambios en la visibilidad de un elemento en relación con un contenedor o la ventana del navegador. Esto es especialmente útil para determinar si un elemento se encuentra dentro del área visible del usuario.
Ejemplo básico:
// Crear el observador const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { // El elemento es visible, cargar más contenido // Aquí puedes realizar una solicitud de carga de contenido adicional // y agregarlo al DOM } }); }); // Seleccionar el elemento que se va a observar const targetElement = document.querySelector('#scroll-container'); // Observar el elemento observer.observe(targetElement);
En este ejemplo, se crea un observador utilizando la clase IntersectionObserver. Luego, se selecciona el elemento #scroll-container que deseas observar y se llama al método observe() del observador para comenzar a observar los cambios de visibilidad en ese elemento.
Cada vez que el elemento se vuelve visible, el callback que se pasa al constructor de IntersectionObserver se ejecuta y puedes realizar una solicitud para cargar más contenido en ese momento.
Ten en cuenta que este es solo un ejemplo básico para ilustrar el concepto. En una implementación real, probablemente necesitarías manejar detalles adicionales, como controlar cuándo dejar de cargar más contenido o manejar errores de carga.
Mis apuntes en Notion💚
Aún recuerdo que esta vaina la vi por primera vez en unos de los cursos de TypeScript, entre estas 2 técnicas la carga se puede hacer semi "infinita" que nunca se ve lo gris pues:
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
Si no les carga la imagen de los zorros, pueden usar esta alternativa https://placekitten.com/
Así adapté el código de utils.js para la nueva API
const minimum = 200; const maximum = 500; const random = () => Math.floor(Math.random() * (maximum - minimum)) + minimum; export const createImageNodes = () => { const wrapper = document.createElement("div"); wrapper.className = "p-4"; const image = document.createElement("img"); image.className = "mx-auto rounded-md bg-gray-300"; const ran = random(); image.src = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjMyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4="; image.dataset.src = `https://placekitten.com/g/${ran}/${ran}`; image.width = 320; wrapper.append(image); return [wrapper, image]; };
si cuando intentan conectar su repositorio de github con el del pc la terminal les dice que error: remoto origin ya existe, para desvincular el repositorio local del repositorio remoto de platzi y poder vincularlo al de nosotros usamos:
git remote rm origin
y luego conectamos nuestro repositorio de github o lo que queramos. ejemplo:
git remote add origin https://github.com/nombredeusuario/nombredelrepo.git
No pude clonar el repositorio