🎯 Key Takeaways for quick navigation: 00:00 🌐 En el tutorial, se busca mejorar una página web existente utilizando Astro build, HTML, TailwindCSS y JavaScript. 00:53 🖼️ Se identifican problemas en la página actual, como la calidad de las imágenes y el tiempo de carga, y se planea optimizar el rendimiento. 01:51 🚀 Se elige utilizar Astro, un framework sencillo, para el desarrollo web, con el objetivo de crear interactividad y una animación atractiva. 02:47 ⚠️ Se enfatiza que el proyecto es solo con fines educativos y no se buscará su publicación o compra de dominio. 04:34 💻 Se inicia la creación del proyecto con comandos para instalar dependencias como Astro y TailwindCSS. 08:29 🎨 Se comienza a diseñar la sección principal de la página, colocando imágenes de "boxeadores" en posiciones específicas con estilos personalizados. 19:18 🔄 Se plantea la necesidad de agregar animaciones a las imágenes para mejorar la presentación visual de la página. 21:23 🎨 Telwin CSS Animated es una biblioteca que facilita animaciones con Telwin de manera fácil y rápida. 21:49 🛠️ La instalación de Telwin Animated se realiza con `pnp install animated`, y es una dependencia de desarrollo. 22:16 🎭 Telwin CSS Animated ofrece un playground para probar animaciones con diferentes estilos y parámetros. 23:06 ⏰ Ajustar los tiempos de retardo (`delay`) en las animaciones es clave para lograr efectos deseados. 25:18 🚧 Problemas con `animate delay` se resuelven al aplicarlos a cada imagen individualmente en lugar de a nivel global. 26:44 🚀 Optimizar las animaciones para una experiencia de usuario rápida es esencial; evitar largos tiempos de carga. 28:12 🖼️ Agregar un logo al sitio web y estilizarlo con estilos y fuentes específicas. 30:02 🌈 Aplicar gradientes y efectos visuales para mejorar la estética del sitio. 35:21 📏 Utilizar gradientes radiales y colores oscuros para mejorar la apariencia de secciones específicas del sitio. 40:42 🌐 Crear una sección de información interactiva al hacer hover sobre elementos específicos del sitio, brindando detalles sobre eventos y enlaces relevantes. 44:12 🎨 Ajustando el diseño del sitio web, enfocándose en Flex display y colores para resaltar información clave. 45:33 🎟️ Personalización de elementos para destacar información sobre Twitch y la compra de boletos. 46:33 ✨ Agregando efectos de hover a los enlaces para una mejor experiencia visual. 49:16 🖼️ Exploración de ajustes visuales para el fondo y el logo del sitio web. 50:10 🖱️ Implementando una función de hover que destaca información específica al pasar el mouse sobre elementos. 51:56 🔍 Uso de JavaScript para gestionar eventos de hover y resaltar elementos relacionados. 55:38 🤔 Explicación detallada sobre la recuperación de imágenes y posicionamiento de elementos para efectos de hover. 57:57 🔄 Alternativa propuesta para la recuperación de imágenes y posición en lugar del uso de `array.from`. 59:43 🎭 Aplicación de efectos visuales al seleccionar imágenes específicas, mejorando la experiencia de usuario. 01:00:14 🎞️ Implementación de un efecto de ocultamiento y resaltado al interactuar con imágenes mediante eventos de hover. 01:07:19 🖌️ Se explora la aplicación de la propiedad `clip-path` para recortar imágenes en el tutorial. 01:08:52 🔄 Se muestra cómo ajustar la propiedad `clip-path` manualmente para lograr el recorte deseado en la imagen. 01:13:30 🔍 Se discute la posibilidad de implementar una función de detección automática para recortar imágenes de forma precisa. 01:14:53 🥊 Se comienza a trabajar en una interfaz de combate, explorando estilos visuales para indicar el enfrentamiento entre dos elementos. 01:17:12 📊 Se ajustan las propiedades de visibilidad y animación para mostrar y ocultar información específica durante el combate. 01:19:26 🛠️ Se utiliza JavaScript para dinámicamente cambiar los nombres de los luchadores en la interfaz de combate. 01:23:07 🎨 Se experimenta con la creación de un teclado visual para añadir un toque estético a la interfaz del juego. 01:30:49 🌐 La optimización de imágenes es crucial para el rendimiento de un sitio web. El tutorial explora métodos como WebP y herramientas como Squoosh para reducir el tamaño de las imágenes hasta un 90%. 01:33:03 🎨 Mejorar la apariencia con líneas de fondo y gradientes. Se discute la implementación de líneas en el índice Astro y se experimenta con gradientes y efectos visuales. 01:35:26 ⚙️ Configuración detallada de diseño con Tailwind CSS. Ajustes en el código para centrar elementos, agregar blur y ajustar opacidades para lograr efectos visuales específicos. 01:38:11 🚀 Se aborda la importancia de los créditos y la originalidad. Discusión sobre cómo evitar la copia de diseños y cómo agregar elementos personalizados sin perder la autenticidad. 01:42:51 🖥 Herramientas útiles para la optimización de imágenes. Se presentan aplicaciones como ImageOptim, Squoosh y el uso de Brew para instalar WebP, destacando la importancia de reducir el tamaño de las imágenes para mejorar la carga del sitio. 01:45:28 🔄 Métodos automatizados para convertir imágenes a formatos optimizados. Se explora el uso de comandos en la terminal, como cwebp, para convertir múltiples imágenes a formatos como WebP de manera eficiente. 01:46:43 🧩 Integración de optimización de imágenes en flujos de trabajo. Se sugiere incorporar la optimización de imágenes como parte del proceso de construcción del sitio para mantener un rendimiento óptimo. 01:53:30 🚀 Utilizar "pnpm Ram build" en lugar de "pnpm build" puede mejorar el rendimiento en la ejecución de scripts en Astro build. 01:54:22 🌐 Se pueden realizar optimizaciones detalladas, como la optimización de imágenes y fuentes, para mejorar el rendimiento de la página web. 01:56:54 🖼️ Reducir el tamaño de las imágenes, especialmente con formatos como webp, puede tener un impacto significativo en el rendimiento de la carga de la página. 02:02:30 📊 Pre-cargar fuentes utilizando "font-display: swap" puede mejorar la visibilidad del texto mientras se carga la página. 02:05:49 🔄 La pre-carga de activos críticos, como fuentes, puede acelerar la carga de la página y mejorar la experiencia del usuario. 02:09:28 🖼️ Optimizar imágenes grandes y evitar animaciones en las primeras cargas puede ayudar a reducir el tiempo de renderizado del elemento más grande en la vista del navegador. 02:13:30 🏞️ Priorizar la carga de imágenes mediante "fetch priority" puede influir en el orden en que se cargan y muestran en la página. 02:16:40 🔄 Optimización de carga de recursos web en diferentes navegadores. 02:17:35 🖼️ Priorización de recursos con preload para mejorar la velocidad de carga. 02:19:22 📏 Estrategias para evitar cambios bruscos en el diseño y mejorar la experiencia del usuario. 02:20:15 🚀 Uso de preload y ajuste de prioridades para optimizar la carga de recursos críticos. 02:21:43 🔄 Experimentación con técnicas avanzadas de fallback para mejorar la consistencia visual. 02:25:47 🧐 Evaluación del impacto de las fuentes en la velocidad de carga y estrategias de optimización. 02:26:40 📊 Monitoreo del rendimiento y consideraciones sobre la optimización de imágenes. 02:29:18 📈 Compromiso con la mejora continua y exploración de contribuciones de la comunidad en GitHub. Made with HARPA AI
Que bacano que subas los videos de Twitch aqui en Yt. Aqui en Bolivia es dificil ver el Stream, es por la velocidad del lnternet; entonces lo que hago es descargarlos y guardarlos en un disco duro muy antiguo; el cual cuido como a un bebe
Hola Midu, Astro me esta pareciendo muy interesante y práctico, muchas Gracias por todo lo que aportas Dios lo bendiga, saludos desde Bogotá Colombia, ojalá se de el live con Código 369
SOS UN CRACK MIDU!!! me gusta como te emocionas cuando queres pillar algo a tu forma!! jajaja un abrazo siempre sumas cosas productivas aun que sea jugando
genial explicacion paso a paso.. sigue adelante.... si podrias compartir todas las extensiones que utilizas en Visual Studio Code, para asi simplificar el trabajo en el momento de picar codigo... gracias..
34:50 fffffck! se fue la luz en casa y después de que volvió olvidé que estaba esto puesto empezó a hablar de repente! que susto. Pensé que alguien se había metido a la casa T_T que buenas bocinas tienen las mac y que buen micrófono tienen mr Midu
Generalmente me caen mal dev que se dedican a ser streamer, pero debo admitir q de todos los q he visto, sos el que mas abarca codigo y terminología de la industria.
Hola Midu! Gracias por tus videos, sos un capo. Se que te consultaron varias veces, pero vengo siguiendo el curso de aprendiendo react desde 0 y para no quedarme atras, vi que faltan subir los vids del 8 al 11. Tenes mas o menos idea de cuando los subiras? Gracias!!!
He visto varios videos tuyos y eres muy bueno no solo desarrollando sino explicandolo, una pregunta, estoy empezando a retomar despues de un par de años el desarrollo web y dentro de los framework que he visto esta bootstrap y tailwind entre los mas usados cual me recomiendas entre esos 2 y porque. Gracias.
jajaja me cago de risa cuando la gente te pide cositas que les da TOC y vos lo arreglas quejandote 😂. Sos un cago de risa Midu, muchas gracias por el video
Empece a ver el video diciendo "voy a poner de fondo algo entretenido y que al menos aprenda algo" y me quede enganchada y ya quiero hacerlo! Será esta acaso mi oportunidad de aprender Astro?
Como vas a comparar algo que se hace desde cero, con que una persona copie ya un proyecto hecho? Es lo mismo que Un pintor puede durar 1 mes haciendo una obra, y llega otro y hace una copia de esa obra viéndola en dos horas Así que, no tiene sentido lo que dices
Hace unos días hice un script para descargar pdfs para ello tenía que hacer click en un botón por pdf y al momento de meterlo en un ciclo, no me descargaba todos. La solución fue crear una función de sleep, que esperara 3 segundos.
esta bueno, pero creo que hubiera quedado mejor si hubieras hecho unos div para marcar las imagenes, ya que si pones hover en las imagenes algunas imagenes son mas dificiles de apuntar que las otras
holaa midu, soy nuevo en todo esto, queria preguntar si esto se puede subir a github como una copia y presentar como "lo que se hacer" o es muy de pirata esto?
Oue bro siempre te veo mas tiempo tratando temas de calidad de código, pero en este video veo que tienes también muchas skills de UI/UX, como puede alguien mejorar para hacer diseños y web con estilos muy bonitos, elegantes y profesionales?
un momento me siento perdido, eso de poner solo class sin hacer el css y hacer todo el estilo en el html eso es gracias a tailwindcss u astro, vaya tengo mucho que aprender, me parecio entretenido imagino que asi se trabaja en el campo del desarrollo.
No entendí eso de [&>img]:clases en html, como se llama eso? como es que funciona, es algo de tailwind o de css? nosabía que se podia hacer eso en html, lo que hizo en section class={' clases'}, porque las llaves? Favor, sin ego que todo mundo empieza no sabiendo, que ya me he topado a cracks olvidandose que empezaron sin saberlo, estoy en las mismas.
Tengo 12 años, y en clase de Tecnología y Digitalización me miran raro por saber mucho, no se si es bullying, un halago o yo que se jajajaj. Lo que me impresionó, es que el profesor se quedó flipando pq le dije las potencias para calcular el paso de bytes a mb. Que es 2 elevado a x. Mi pregunta es, ¿cómo es profesor? jajaj
Top Midu! Siempre aprendo contigo. Muchas gracias!!!!
Gracias a ti!!
🎯 Key Takeaways for quick navigation:
00:00 🌐 En el tutorial, se busca mejorar una página web existente utilizando Astro build, HTML, TailwindCSS y JavaScript.
00:53 🖼️ Se identifican problemas en la página actual, como la calidad de las imágenes y el tiempo de carga, y se planea optimizar el rendimiento.
01:51 🚀 Se elige utilizar Astro, un framework sencillo, para el desarrollo web, con el objetivo de crear interactividad y una animación atractiva.
02:47 ⚠️ Se enfatiza que el proyecto es solo con fines educativos y no se buscará su publicación o compra de dominio.
04:34 💻 Se inicia la creación del proyecto con comandos para instalar dependencias como Astro y TailwindCSS.
08:29 🎨 Se comienza a diseñar la sección principal de la página, colocando imágenes de "boxeadores" en posiciones específicas con estilos personalizados.
19:18 🔄 Se plantea la necesidad de agregar animaciones a las imágenes para mejorar la presentación visual de la página.
21:23 🎨 Telwin CSS Animated es una biblioteca que facilita animaciones con Telwin de manera fácil y rápida.
21:49 🛠️ La instalación de Telwin Animated se realiza con `pnp install animated`, y es una dependencia de desarrollo.
22:16 🎭 Telwin CSS Animated ofrece un playground para probar animaciones con diferentes estilos y parámetros.
23:06 ⏰ Ajustar los tiempos de retardo (`delay`) en las animaciones es clave para lograr efectos deseados.
25:18 🚧 Problemas con `animate delay` se resuelven al aplicarlos a cada imagen individualmente en lugar de a nivel global.
26:44 🚀 Optimizar las animaciones para una experiencia de usuario rápida es esencial; evitar largos tiempos de carga.
28:12 🖼️ Agregar un logo al sitio web y estilizarlo con estilos y fuentes específicas.
30:02 🌈 Aplicar gradientes y efectos visuales para mejorar la estética del sitio.
35:21 📏 Utilizar gradientes radiales y colores oscuros para mejorar la apariencia de secciones específicas del sitio.
40:42 🌐 Crear una sección de información interactiva al hacer hover sobre elementos específicos del sitio, brindando detalles sobre eventos y enlaces relevantes.
44:12 🎨 Ajustando el diseño del sitio web, enfocándose en Flex display y colores para resaltar información clave.
45:33 🎟️ Personalización de elementos para destacar información sobre Twitch y la compra de boletos.
46:33 ✨ Agregando efectos de hover a los enlaces para una mejor experiencia visual.
49:16 🖼️ Exploración de ajustes visuales para el fondo y el logo del sitio web.
50:10 🖱️ Implementando una función de hover que destaca información específica al pasar el mouse sobre elementos.
51:56 🔍 Uso de JavaScript para gestionar eventos de hover y resaltar elementos relacionados.
55:38 🤔 Explicación detallada sobre la recuperación de imágenes y posicionamiento de elementos para efectos de hover.
57:57 🔄 Alternativa propuesta para la recuperación de imágenes y posición en lugar del uso de `array.from`.
59:43 🎭 Aplicación de efectos visuales al seleccionar imágenes específicas, mejorando la experiencia de usuario.
01:00:14 🎞️ Implementación de un efecto de ocultamiento y resaltado al interactuar con imágenes mediante eventos de hover.
01:07:19 🖌️ Se explora la aplicación de la propiedad `clip-path` para recortar imágenes en el tutorial.
01:08:52 🔄 Se muestra cómo ajustar la propiedad `clip-path` manualmente para lograr el recorte deseado en la imagen.
01:13:30 🔍 Se discute la posibilidad de implementar una función de detección automática para recortar imágenes de forma precisa.
01:14:53 🥊 Se comienza a trabajar en una interfaz de combate, explorando estilos visuales para indicar el enfrentamiento entre dos elementos.
01:17:12 📊 Se ajustan las propiedades de visibilidad y animación para mostrar y ocultar información específica durante el combate.
01:19:26 🛠️ Se utiliza JavaScript para dinámicamente cambiar los nombres de los luchadores en la interfaz de combate.
01:23:07 🎨 Se experimenta con la creación de un teclado visual para añadir un toque estético a la interfaz del juego.
01:30:49 🌐 La optimización de imágenes es crucial para el rendimiento de un sitio web. El tutorial explora métodos como WebP y herramientas como Squoosh para reducir el tamaño de las imágenes hasta un 90%.
01:33:03 🎨 Mejorar la apariencia con líneas de fondo y gradientes. Se discute la implementación de líneas en el índice Astro y se experimenta con gradientes y efectos visuales.
01:35:26 ⚙️ Configuración detallada de diseño con Tailwind CSS. Ajustes en el código para centrar elementos, agregar blur y ajustar opacidades para lograr efectos visuales específicos.
01:38:11 🚀 Se aborda la importancia de los créditos y la originalidad. Discusión sobre cómo evitar la copia de diseños y cómo agregar elementos personalizados sin perder la autenticidad.
01:42:51 🖥 Herramientas útiles para la optimización de imágenes. Se presentan aplicaciones como ImageOptim, Squoosh y el uso de Brew para instalar WebP, destacando la importancia de reducir el tamaño de las imágenes para mejorar la carga del sitio.
01:45:28 🔄 Métodos automatizados para convertir imágenes a formatos optimizados. Se explora el uso de comandos en la terminal, como cwebp, para convertir múltiples imágenes a formatos como WebP de manera eficiente.
01:46:43 🧩 Integración de optimización de imágenes en flujos de trabajo. Se sugiere incorporar la optimización de imágenes como parte del proceso de construcción del sitio para mantener un rendimiento óptimo.
01:53:30 🚀 Utilizar "pnpm Ram build" en lugar de "pnpm build" puede mejorar el rendimiento en la ejecución de scripts en Astro build.
01:54:22 🌐 Se pueden realizar optimizaciones detalladas, como la optimización de imágenes y fuentes, para mejorar el rendimiento de la página web.
01:56:54 🖼️ Reducir el tamaño de las imágenes, especialmente con formatos como webp, puede tener un impacto significativo en el rendimiento de la carga de la página.
02:02:30 📊 Pre-cargar fuentes utilizando "font-display: swap" puede mejorar la visibilidad del texto mientras se carga la página.
02:05:49 🔄 La pre-carga de activos críticos, como fuentes, puede acelerar la carga de la página y mejorar la experiencia del usuario.
02:09:28 🖼️ Optimizar imágenes grandes y evitar animaciones en las primeras cargas puede ayudar a reducir el tiempo de renderizado del elemento más grande en la vista del navegador.
02:13:30 🏞️ Priorizar la carga de imágenes mediante "fetch priority" puede influir en el orden en que se cargan y muestran en la página.
02:16:40 🔄 Optimización de carga de recursos web en diferentes navegadores.
02:17:35 🖼️ Priorización de recursos con preload para mejorar la velocidad de carga.
02:19:22 📏 Estrategias para evitar cambios bruscos en el diseño y mejorar la experiencia del usuario.
02:20:15 🚀 Uso de preload y ajuste de prioridades para optimizar la carga de recursos críticos.
02:21:43 🔄 Experimentación con técnicas avanzadas de fallback para mejorar la consistencia visual.
02:25:47 🧐 Evaluación del impacto de las fuentes en la velocidad de carga y estrategias de optimización.
02:26:40 📊 Monitoreo del rendimiento y consideraciones sobre la optimización de imágenes.
02:29:18 📈 Compromiso con la mejora continua y exploración de contribuciones de la comunidad en GitHub.
Made with HARPA AI
Te la rifaste hermano
Te pasaste xd
Este muchacho es lo uno quiere llegar a ser 😃
Quiero llegar a tu nivel, verte escribir código de esa manera solo me emociona, gracias por estos videos.
Midu! Gracias por todo el aporte que das a la comunidad, es Chevere como aprendo hasta de rendimiento contigo.
Este dia he mejorado mas en mi experiencia con web performance.. gracias midu ❤🎉
Que bacano que subas los videos de Twitch aqui en Yt. Aqui en Bolivia es dificil ver el Stream, es por la velocidad del lnternet; entonces lo que hago es descargarlos y guardarlos en un disco duro muy antiguo; el cual cuido como a un bebe
me gusta muchob la pasion que le pones a lo que haces, muy inspirador!
Vi que muchos preguntaban en el directo, la terminal que utiliza en el video se llama Warp. Actualmente esta disponible solo para Mac
Excelente como siempre. Ojalá hagas más videos como éste. Aprendo una banda. Saludos desde Argentina.
Midu eres la persona que siempre me hace seguir aprendiendo más, gracias crack!
Minimalismo y elegancia midu ❤️🔥
Gracias Midu por ayudarnos a mejorar! Te quiero un montón 🌻
Hola Midu, Astro me esta pareciendo muy interesante y práctico, muchas Gracias por todo lo que aportas
Dios lo bendiga, saludos desde Bogotá Colombia, ojalá se de el live con Código 369
Astro esta tremendo, creo que tiene un gran futuro
Astro está interesante
SOS UN CRACK MIDU!!! me gusta como te emocionas cuando queres pillar algo a tu forma!! jajaja un abrazo siempre sumas cosas productivas aun que sea jugando
Midu como siempre volandonos la cabeza excelente video brother.
Gracias! 😊
jajaja ese truquito me hizo la noche, y concuerdo, no se puede descargar de una forma si ya sabes una forma mejoor jaja
que buena
aunque ahora que lo pienso, tambien podria haberse guardado con el atributo "alt" de cada imagen, asi ya no lo renombrarias a cada una xd
El resultado de hacer el trabajo 👊
pensar que me entretengo mas viendo esto que una película
Porque aprendes más 😊
genial explicacion paso a paso.. sigue adelante.... si podrias compartir todas las extensiones que utilizas en Visual Studio Code, para asi simplificar el trabajo en el momento de picar codigo... gracias..
19:30 y pensar que enserió reventó a sus rivales 😂😂
que genio, bueno cada dia aprendo mas
Gracias!
Me ha gustado mucho el tema del script en consola para extraer las imágenes
Gracias! 😻
este es un pedazo de video ❤❤🙌🙌
34:50 fffffck! se fue la luz en casa y después de que volvió olvidé que estaba esto puesto empezó a hablar de repente! que susto. Pensé que alguien se había metido a la casa T_T que buenas bocinas tienen las mac y que buen micrófono tienen mr Midu
Astro la esta rompiendo 🎉
Estaria genial ver como se hace el mismo efecto de los boxeadores pero con react
El puto amo 🎉
Generalmente me caen mal dev que se dedican a ser streamer, pero debo admitir q de todos los q he visto, sos el que mas abarca codigo y terminología de la industria.
Que genio miduuu
che mid sos un capo loco, muchas gracias por enseñar
Hola Midu! Gracias por tus videos, sos un capo. Se que te consultaron varias veces, pero vengo siguiendo el curso de aprendiendo react desde 0 y para no quedarme atras, vi que faltan subir los vids del 8 al 11. Tenes mas o menos idea de cuando los subiras? Gracias!!!
Y si usas 2 cdn :1 Cloudflare y cómo segundo bunny y cargas las imágenes desde bunny eso podría ayudar
He visto varios videos tuyos y eres muy bueno no solo desarrollando sino explicandolo, una pregunta, estoy empezando a retomar despues de un par de años el desarrollo web y dentro de los framework que he visto esta bootstrap y tailwind entre los mas usados cual me recomiendas entre esos 2 y porque. Gracias.
Midu quiero ser como vos! Pero cuando quiero iniciar un curso se me abre solo el League of legends
jajaja seguro que se abre solo. JAJAJAJA
Brutal!! mil gracias por compartir
Vengo empezando con esto y he anotado varias cositas de este video, aunque no entiendo muy bien el tema de "Astro" tocará investigar.
Estaría genial verte a ti en la próxima edición de la velada del año! Al cabo eres streamer tambien! jejejejejejeje
Ojalá! Que me inviten! Ibai, hazlo.
que buenos recuerdos de cuando trabajaba optimizando imagenes :)
Nuevo sub, atrajiste mi atención
Esooooo
Que Framework recomendáis para empezar?
duda: si es buena practica agregar eventos atreves de un loop como se muestra en el video, en la parte de foreach mouseenter ?
Usó alguna extensión para ver los z-index?
jajaja me cago de risa cuando la gente te pide cositas que les da TOC y vos lo arreglas quejandote 😂. Sos un cago de risa Midu, muchas gracias por el video
jajajajaj esa es la idea, pasárselo bien mientras aprendemos!
Empece a ver el video diciendo "voy a poner de fondo algo entretenido y que al menos aprenda algo" y me quede enganchada y ya quiero hacerlo!
Será esta acaso mi oportunidad de aprender Astro?
grandes trucos! :)
varios trucazos
Como haces el zoom en el puntero midu?
Con suerte el año que viene tencintratan, tienes talento ahora te faltan contactos
me parece una idea increible como tarea de aprendizaje pero yo la llamare la huevada del año jaja
Los desarrolladores que cobraron 6 meses por hacer esa web viendo como la terminas (y mejor) en una hora 🫥
😅😅😅
Como vas a comparar algo que se hace desde cero, con que una persona copie ya un proyecto hecho?
Es lo mismo que Un pintor puede durar 1 mes haciendo una obra, y llega otro y hace una copia de esa obra viéndola en dos horas
Así que, no tiene sentido lo que dices
una maquina es este chabon
@@oxioxp cállese señora
@@oxioxp no leo lloros
nuevo suscriptor.. muy bueno
Lo veo a midu hipeado por las animaciones que esta metiendo y me siento identificado... ajajajajaja
jajajaja la pasión!
Es posible hacer un extracto de la fuente para que solo contenga las letras que necesitas ?
Midu como asi configuraste tu consola, danos un tuto porfavor maestro
Hace unos días hice un script para descargar pdfs para ello tenía que hacer click en un botón por pdf y al momento de meterlo en un ciclo, no me descargaba todos. La solución fue crear una función de sleep, que esperara 3 segundos.
Un crack hermano
esta bueno, pero creo que hubiera quedado mejor si hubieras hecho unos div para marcar las imagenes, ya que si pones hover en las imagenes algunas imagenes son mas dificiles de apuntar que las otras
No hace falta usar div. Eso lo ajustamos con clip path y quedó perfecto. :)
Nose no me interesa crear paginas web pero estoy aca mirando todo xd
Que grande
Estoy descargando por si acaso lo vuelven a demandar 😂
JAJAJAJAAJ
como podria optimizar más aun las imagenes en plan heavy creo que "avif" es el limite :b
Cargarla por tamaños diferentes dependiendo del dispositivo.
q a pasao q despue de la hora tiene autotune XDDD buen video bro bastante interesante todo esto😋
Alguien sabe cómo se llama la extensión que utiliza para hacer scroll en una sola parte del código ?
Se puede crear una pagina tipo blog solo con HTML, CSS y de pronto JS? (Me refiero, o sea, a publicarla y todo así?)
Como se llama la herramienta que usa para medir pixeles en pantalla?
holaa midu, soy nuevo en todo esto, queria preguntar si esto se puede subir a github como una copia y presentar como "lo que se hacer" o es muy de pirata esto?
Oue bro siempre te veo mas tiempo tratando temas de calidad de código, pero en este video veo que tienes también muchas skills de UI/UX, como puede alguien mejorar para hacer diseños y web con estilos muy bonitos, elegantes y profesionales?
Midu procede a ser demandado otra vez. Que crack
jajaja va a ser un hobby
2:29:00 Es verdad, es bastante grande
Alguien sabe cómo se llama el tema de iconos que usa en visual code ?
un momento me siento perdido, eso de poner solo class sin hacer el css y hacer todo el estilo en el html eso es gracias a tailwindcss u astro, vaya tengo mucho que aprender, me parecio entretenido imagino que asi se trabaja en el campo del desarrollo.
No entendí eso de [&>img]:clases en html, como se llama eso? como es que funciona, es algo de tailwind o de css? nosabía que se podia hacer eso en html, lo que hizo en section class={' clases'}, porque las llaves? Favor, sin ego que todo mundo empieza no sabiendo, que ya me he topado a cracks olvidandose que empezaron sin saberlo, estoy en las mismas.
estas locoooo
54:58 despues sigo dejo marcador ajdjajdjak
Tengo 12 años, y en clase de Tecnología y Digitalización me miran raro por saber mucho, no se si es bullying, un halago o yo que se jajajaj. Lo que me impresionó, es que el profesor se quedó flipando pq le dije las potencias para calcular el paso de bytes a mb. Que es 2 elevado a x. Mi pregunta es, ¿cómo es profesor? jajaj
deberias hacer mas videos asi
19:33 predict
tengo problemas con el fonts no me lo reconoce :C
El desarrollador de la pagina real viendo que midu la hizo en 2hs y el pidio un mes de presupuesto: ☠️
Si se puede hacer en dos horas entonces no vale el presupuesto de 1 mes....entendés?
Solo esta replicando algo ya hecho
¿Y si hubiésemos hecho un contenedor por cada fila? Es decir, por pares de contrincantes. De esa manera sería sencillo iluminar cada par, ¿verdad?
Que tryhard, me perdi a partir del minuto 1:45
xD Pues mal vamos
lo de las imagenes lo deberias sacar a un video aparte
hola bro por cuasualidad no vendes cursos
midu usa linux?
macOS
Me he enredado al ver que programaba diseños en el index y no entendí nadajajaja, soy nuevo y estoy aprendiendo, me enredé todo con el css 😂
Se nota que sabe quien es amoran minuto 12:11 hace las señas a visto el contendido de ella, 😂😂
Lo mejor ! La velada del ano es espectacular.
Desde que entré me parece que la página base está hecha con WordPress
Te kiero
2:28
ig de la minita?
😳
ese ASTRO no le veo nada de diferente q usar HTML, CSS y JS vanilla
Pues eso es bueno, no?
Esa es la parte buena 🤓
Si es bueno, pero de usar React se me olvida el vanilla js 😅😅
Entre a la pagina de la velada y cambiaron las imagenes xD
Quedaría mejor la "Helada del ano", grande Midu
Jajajajajajs
falto squosh en las img
Nop, lo usamos. De hecho en otro directo usamos imágenes responsive que mejoró el rendimiento hasta 99. :)
en *{user-select : none;
} nice
quienes son todos esos 😆
Ni idea jajaja
xD Cuidado miduuuuu !! Dalas viene por vos ! 😢
La pelada
Mandenle este video a Ibai