Curso JavaScript: 90. DOM: Ejercicios Prácticos | Responsive con JavaScript -  

Buenos días, aquí te dejo mi solución al ejercicio. Como comentan más abajo VS Code te marca como un método en desuso a .addListener y leyendo la documentación que pasaste de MDN lo sustituí por breakpoint.addEventListener("change", responsive) con lo que conseguí el mismo resultado. Un saludo, muchas gracias

gracias hermano 2024 y esto sigue funcionando

Me encanta cuando un docente comparte libros ya leídos, para que sus alumnos afiancen sus conocimientos. Denota la calidad, entrega y compromiso que tiene con su formación y con la de los demás. Un fuerte abrazo desde Colombia Jon.

Es realmente impresionante el conocimiento que tiene, unas de las deciciones por la que elegi estudiar con usted antes que los miles de cursos que hay en internet, es el enfoque hacia las buenas practicas y la optimizacion al programar.

Vengo del futuro y a la verdad que me han servido muchísimo. He aprendido cosas interesantes.

Todos los días se aprende algo nuevo con jhon.

wao, querer es poder definitivamente mr Mircha the goat

¡ Qué nivel profe ! Todo el mundo enseña a programar, pero no todo el mundo lo hace con buenas prácticas. Excelente material.

Otra vez dando cátedra. Felicitaciones y Benidiciones Jon.

Me puse a hacer cuentas y este curso tiene una duración aproximada de 68 hrs. y al llegar a este video tan solo van 33 hrs. aproximadamente. Eso quiere decir que lo bueno apenas está por venir 😎 y eso que ya he aprendido muchisimo. Gracias por el curso profe Jon!

Es demasiado conocimiento y cada dia que veo un curso del profe Jon, se aprende y se da cuento que uno esta lejos de llegar a tener todo ese conocimiento. Excelente video como siempre Jon!

Cuando consiga mi primer trabajo, obtendrás el 10% de este Jonathan, eso te lo prometo. Sin duda el mejor profesor que haya yo tenido.

Ejemplo genial para aligerar la carga de datos del usuario. Aunque yo vengo del futuro, sigo disfrutando mucho de sus enseñanzas Sr. Mircha. Muchas gracias

Que clase Jon, muchas gracias voy por acá y con todas las ganas de terminar tu curso

Muchisimas gracias! he logrado aprender mucho resolviendo estos ejercicios. Me funciona mucho lo que aprendo aqui, con lo que me enseña la documentacion. Gracias a eso he logrado solucionar la mayoria de los ejercicios antes de ver el video, y despues de ver el video mis conocimientos se refuerzan aun mas y he logrado que mi codigo sea mas simple y siga funcionando.

Excelente solución. Me encantó como lo hiciste; no se me había ocurrido.

Donde dice network en el navegador por igual pueden ver todo lo que se le podria descargar al usuario al tratar de ingresar a tu web y pueden tomar referencia de ahi para optimizar el sitio

muchas gracias, cada día los cursos son mas interesantes :-)

Gracias jon, muy bueno esto de diseño responsable, los que hemos sufrido la escases de datos en el movil sabemos lo importante que puede ser. Saludos

No maestro su "choro" es lo que más me gusta de como nos enseña porque nos refresca la memoria, un grande ❤️ aprenderé como funciona Paypal solo para apoyarlo 🔥 usted es un gran maestro, lo admiro mucho ✨💞

Buenas noches , Jon . estoy muy agradecido por esos cursos, gracias a ti eh comprendido mucho de JavaScript y todas esas clases han sido de mucho aporte … Excelente forma de explicar y hacer entender lo justo para aprender todo 🤗🤗🤗

El mejor curso de #javascript

Otro fantástico tutorial Jon, realmente agradecido, no solamente por la excelencia con la que impartes cada curso, sino más aún, por tu sencillez al contar aspectos de tu vida que nos animan, pues nos recuerdan que los comienzos no siempre son fáciles, pero que el esfuerzo y la disciplina, traen su recompensa.

Mircha eres mi youtuber de programación favorito ❤.. Saludos para ti, para tu esposa y para tu cachorro 🐶.

Excelente video Jon! Gracias!

🍎 Que genialidad es terminar este año tan duro con este curso, lo mejor del 2020 es Mircha!!🍎🍎🍎

Que buen dato lo de responsible responsive design y que mejora el performance

🧙‍♂Muchas gracias, buen curso!!!

jon, se que ya te lo han dicho pero, quiero recordarte que eres una gran persona, lo puedo notar aun que estemos entre pantallas y simulacion social; y por ende un super buen profesor y programador, graciassss infinita veces....ojala que algun dia publiques tu tesis para poder leer ese gran contenido

Me encanto esta clase, muchas gracias por este valioso :)

Me ayudaste mucho Bro , por ti y tus videos salí bien del cole .

Impresionante clase, Jon!. Muchas gracias

Hola Jon!!! Ya fuimos dos, lo mismo hacia, descargaba contenido para verlo en casa, kekeke... Saludos...

Una clase magistral!!

Espectacular, gracias

Excelente como explicas, eres grande, sigue así

Gracias por tanto!!!

Muy buena clase, en especial desde lo conceptual para tener en cuenta como ayudar al usuario a cuidar su plan de datos, gracias!

Increíble este tema me bolo la cabeza, osea el hecho de ahorrar recursos del usuario y cosas que pasan siempre y no notamos 🧐🍷 esta clase jaja admito que no me llamaba la atención porque pensé que se refería más a adaptar cajas, pero quitar y poner elementos que locooo, Gran clase maestro 💞✨

Excelente contenido,gracias por compartir tus conocimientos, de los mejores cursos de javascript que he tomado

excelente maestro

1 dia del año con tremendo curso, exitos profe para este nuevo año

que buen video profe, muchas gracias en estos momentos estoy creando mi propio negocio y haciendo mi propia pagina web y este video fue perfecto para darle el mapa de la ubicación y un video de bienvenida a mis posibles cliente muchas gracias profe

¡He vuelto, gracias Jonh por aportar conocimiento a nuestras vida. Muy interesante esta práctica para optimizar recursos!

¡¡¡Excelente...!!! muy buen contenido

Ahora entiendo mucho mejor la importancia del Responsible responsive design gracias a tu curso de Responsive y Arquitectura CSS

Excelente ejercicio Responsive! Extraordinario!!!!!!!!!!!!

Excelente video y excelente explicacion !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Dios mio cuanta informacion y de calidad. Profe se ha tomado la tarea de mirar cuanto dura este curso?. No he visto otro curso tan completo nisiquiera en el idioma ingles. ❤

Realmente muy interesante no tenia idea de esta técnica

Jejejeje en el pasado me tocó realizar esta mala practica de ocultar contenido =,S. Gracias Jon, ya puedo corregir este tipo de problemas.

Muchas gracias por los ejercicios, muy útiles. Seguimos aprendiendo.

Hola Jon ... Primero que nada quiero agradecerte por todo tu esfuerzo y todo el contenido que nos estás compartiendo de manera gratuita... Simplemente eres un crack explicando y el contenido de tu curso es simplemente el mejor, acabando este tomaré el de node y posteriormente php ... Pero quisiera saber si no está en tus planes hacer uno sobre git yo soy nuevo en la programación se para que sirve git y me se algunos comandos pero no logro entenderlo del todo bien ya que jamás lo he usado en práctica y simplemente no se cómo hacerlo o almenos no me doy una idea de como lo pondría en práctica ya que jamás e trabajado en equipo ... Ya que eres una persona muy explícita en tus cursos me gustaría que contemplaras dar un curso git para nosotros tus fieles seguidores debido a que es una herramienta básica y es necesario entenderla ... De ante mano gracias 🙏

event.matches es una propiedad de MediaQueryList,que es distinto al element.matches donde se verifica si coincide con un selector css, cierto??? y addListener es un método de MediaQueryList, creo que te faltó explicar eso

Muy bien explicado Jonathan, gracias :)

Gracias Jon! Muy buena clase!

Muy buenas noches profesor!, quisiera saber si hay otros metodos que puedan usarse para el responsive ya que lo que usted uso esta en desuso, en un comentario vi sobre el evento change pero creo que según lei (corrijame si me equivocó) era solo para inputs. ¿Que otras opciones de eventos tengo para hacer responsive?

55% del curso hecho! >:3

@jonmircha básicamente con eso y solo eso se aplica el Responsive a una pagina web en general? es decir, con el simple uso de un matchMedia, un listener y un condicional, ya podemos aplicarle ese "ajuste de formato" a cualquier elemento del HTML cambiando su contenido o sus estilos haciendo totalmente adaptable nuestra pag a diversos dispositivos???

Hola Jon y compañeros, agradezco infinitamente tu hermosa labor de enseñarnos tus conocimientos y más aún, compartirlos con nosotros, después de agradecer tu notable labor, quiero pedir ayuda sobre este ejercicio. Cuando pongo en el archivo de objeto_responsivo.js la comparación lógica de e.matches no me da ningún valor (ni false, ni true) y como comentan abajo el addListener me marca como si estuviese en desuso, espero puedan ayudarme. Les envío un cordial saludo

14:44 qué tiene que ver el e.matches con el w.matchMedia? no entiendo por que devolveria booleano el primero, contra qué compara? No entiendo cómo están relacionados

Para yo hacer el responsive hice lo siguiente: cuando el usuario esté en móvil remuevo los y de estos saco sus "src", creo etiquetas "a" dinamicamente y las inserto en el DOM, y de los hago un "importNode()" y si el usuario cambia de tamaño de pantalla o ingresa en PC pues los que cloné los inserto en el DOM asi evito que los consuman ancho de banda, ya que estos solo lo harán cuando sean insertados al DOM, que opina de mi solución? jejeje

Que puedo poner en cambio de addListener?

Hola, antes de arrancar a ver el video, una pregunta para Jon, en algun capitulo mas adelante se ve como mover un boton con el mouse? o se puede hacer con una variante del ejercicio del teclado y todavia no averigue como?

En el protocolo "file:///" no funcionan los módulos por una restricción CORS de requisitos de seguridad. Como el evento "DOMContentLoaded" del tema oscuro se está ejecutando aparte del evento de los elementos "a" de la versión de móvil que coloco, no he podido hacer que interactúen con el tema, no sé cómo resolver ese problema, estaría bien que me ayudara. Excelente explicación.

cosmico!!!!

En estos momentos, Visual studio me marca que ya addListener, esta en desuso F

Hola Profe Jon, disculpa, ya no tienes la lista de reproducción del Curso Responsive Designe? No la encuentro por ningún lado :c

jon me puedes decir que a que te refieres con e.target, ósea como podría entenderlos?

saludos Jon. Una pregunta. Que tan buena practica o que tan optimo es resolver esta prueba creando los elementos desde Js?? Lo pregunto por el tema de la descarga de los recurso, y el ahorrar el tema de los datos de navegación en caso de móviles??

Profesor excelente capitulo del curso podria hacer un curso sobre WPO suena algo interesante e importante de aprender. Saludos.

11:14 y para que sirve el metodo matchMedia del objeto window ? edit: creo que para comprobar si se cumple o no el media query que se le pasa xD

Buenas siguiendo el ejemplo del video en el momento que utilizo addListener() me da error de @deprecated. No encuentro otra forma de solucionarlo, si puedes ayudarme.

Hola Jon, es necesario o recomedable pasar los parametros como el de la media query? yo me siento mas comodo poniendola directo en la programación

Una pregunta amigo, en tu función de responsive minuto 14:53 la (e) que le pasas como parámetro se supone que es del evento del mediaQuery, pero tengo una duda, ¿Cómo es que sabe que es un evento de tipo mediaQuery?, lo único que se me ocurre es que busca dentro de los parámetros de tu función y el que sea un evento, pues se lo trae, la verdad esa parte no me queda muy claro.

Magia \o/

18:18 addListener me dice que está deprecado y lo tacha pero aún así en chrome me está funcionando

el vsCode me da la advertencia que addListener esta en desuso, pero busque la referencia en W3 y MDN y aparentemente aun esta vigente, ¿error del vsCode, la van a eliminar pronto, no es recomendable su uso o ya esta en desuso pero los navegadores aun le dan soporte?

profe donde están esos cursos responsive web design

Disculpen: Tenía el mismo problema. Cambié por breakpoint.addEventListener("change", responsive)ya que vi los comentarios. Mi ejercicio es más sencillo, solo trato de insertar el video. Pero siguen los problemas... Ayuda por favor.

Aplico todo lo indicado por los buenos participantes y el docente, pero aun no logro que al hacerlo pequeño pase a ser responsive...AYUDA!!!

Hola Jon, como siempre gracias! puede ser que en el server de github no me funcione debido a un error de carga de recursos? me da un error ERR_ABORTED 404, te mando un saludo, disculpa las molestias!

igual guardaba los website y a estudiar en mi casa, solo que yo empece con Java y MySQL

Profe, el curso que tenía de responsive design Ya no está disponible?? No lo encuentro...

export default function responsiveMedia(id, mq, mobileContent, desktopContent) { if (window.matchMedia(mq).matches) { const divContenedor = document.getElementById(id); divContenedor.innerHTML = mobileContent; } else { const divContenedor = document.getElementById(id); divContenedor.innerHTML = desktopContent; } } esta es otra forma de hacerlo y mas sencillo por si les interesa, Saludos :')

Jon. ¿Podrías resolver un ejerciciod de carrusel o slider en vanilla js?

23:08 como hacen para que no se salga del viewport el codigo que estamos escribiendo en visual studio? a mi me queda supero largo y no se pasa a una nueva línea

Una sola palabra: "WOW".

👏👏👏 🙏🙏🙏

tengo problema con menu hamburguesa agregue mas secciones no se desaparecer

Muy bueno, yo lo hice con recize, el unico "inconveniente" es que me tira unos warnings en la consola que no se que significan... a alguien le ha pasado?. Es algo que dice [Violation] 'unload' handler took 362ms

Probé y sale una pestaña de lounch.json

No se si es consciente Jon de todos los conocimientos que transmite en esos momentos de "charla liviana", las cosas que cuenta basadas en su experiencia, son algo que no podriamos adquirir hasta dentro de mucho tiempo de estar programando

Me sale el siguiente error al intentar embeber el video pero sin embargo me lo permite visualizar en la página cuando está en contenido Desktop con normalidad: www-embed-player.js:561 GET googleads.g.doubleclick.net/pagead/id net::ERR_BLOCKED_BY_CLIENT

🧙‍♂️🧙‍♂️🧙‍♂️

En el menu, cuando le doy en el menu hamburguesa solo me deja tener hasta la seccion 7, ya la otras se salen del contenedor y me aparecen en la cabecera. Ayuda porfa!!!

25:12 esta perdido solucion: buscar un vídeo de jonmircha jajaja

Tienes voz de niño xd

Execelente capitulo jon ,gracias por compartir tu conocimiento.