Estructura base de un proyecto con Fake Store API
Contenido del curso
Webpack
Parcel
ESBuild
Rollup
Vite
Conclusiones
Estructura base de un proyecto con Fake Store API
Estructura base de un proyecto con Fake Store API
Contenido del curso
Bryan Figueroa
Josue Cerron Tuesta
Irving Juárez
Rubén Ernesto Aragón Gil
German Tellez Vanegas
Kenneth Angulo L
Jonatan Lisama
Juan José Mamani Tarqui
Santiago Andres Alvarez Cuadros
Juan José Mamani Tarqui
Oscar Cornejo
Laura Roa
Rubén Ernesto Aragón Gil
Cristian Blandon
Es muy buena idea leer la documentación, pero no solo la de parcel o la Fake API de platzi, sino en general en todo, te sorprenderá todo lo que aprendes solo leyendola
Importante la lectura.
De hecho toda la documentación de JS o Python esta en internet, gratis! Con ejemplos de apps y todo
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400&display=swap"); body { margin: 0; padding: 0; color: #3c484e; font-family: "Open Sans", sans-serif; } .Main { padding: 10px; grid-template-columns: minmax(auto, 768px); display: grid; justify-content: center; } .Items { grid-template-columns: repeat(2, 1fr); grid-gap: 1.5rem; grid-row-gap: 1.5em; display: grid; } .Card { text-decoration: none; box-shadow: 8px 14px 38px rgba(39, 44, 49, 0.06), 1px 3px 8px rgba(39, 44, 49, 0.03); border-radius: 5px; margin: 0 0 20px 0; display: block; animation-duration: 4s; animation-name: fade; } .Card img { width: 100%; height: auto; border-radius: 5px 5px 0 0; } .Card h2 { font-size: 18px; font-weight: 300; padding: 5px 10px; display: flex; justify-content: space-between; } @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
URL de la API:
¿Por qué es mejor paginar la API?
Paginar los datos usando parámetros como offset y limit es fundamental para el rendimiento y la experiencia del usuario. Si una base de datos tiene miles de productos y los solicitas todos a la vez, el navegador tardará demasiado en descargar la información, consumiendo ancho de banda innecesario y ralentizando el renderizado de la interfaz. Al limitar la respuesta (por ejemplo, a 10 elementos), logras que la aplicación cargue casi de forma instantánea. Además, esto te permite implementar patrones de diseño modernos como el scroll infinito o botones de carga progresiva. En la práctica, el offset le dice al servidor desde qué punto empezar a contar, y el limit cuántos elementos devolver a partir de ahí, dándote control total sobre el flujo de información en tu frontend.
Excelente curso , aprendiendo mucho !!
En el minuto 5:05 por que pone el simbolo de dolar const $app ?
Es una convención que se utiliza en JQuery para indicar que una variable es un nodo HTML obtenido a partir de su id.
.
En JQuery, se utiliza la función $() en vez de escribir document.getElementById() porque es mucho más corto de escribir, y usando el $ al inicio de una variable indicas que se utilizó $() para traer un elemento del DOM.
.
Pero esto es solamente una convención, así como en programación utilizamos el underscore (_) para indicar que un método o propiedad es privada dentro de una clase
Que significa el signo de dolar delanta de una constante o variable
El carácter o signo de dólar ($) es un prefijo, que no tiene un significado especial para JavaScript, es solo otro carácter válido para un nombre de variable.
En lo personal no lo uso esta convención, pero si deseas saber el por qué se usa, en el proyecto de webpack del módulo anterior, podrás notar que esto nos ayuda a diferenciar las variables $name de name.
Espero te haya servido la explicación. Saludos!
porque la etiqueta script esta definida despues de la etiqueta de cierre del body?
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.
Al tener defer no importa tanto donde se ubica... Sin embargo, por la misma razón, al tener el defer es buena práctica ubicarla dentro del <head>.