Hacks que no conoces de HTML sin una línea de JavaScript
HTML-код
- Опубликовано: 25 июл 2024
- Conocerás algunos trucos/hacks para que puedas mejorar en HTML sin depender de JavaScript para siempre
▶ No te pierdas más directos en: / midudev
0:00 Intro
0:15 Acordeones exclusivos
3:32 Interruptores personalizados (input + label)
5:00 Lista de datos (auto-completado)
6:05 selector de color
6:20 Fecha y hora LOCAL
7:30 Crear Modales
No necesitas JavaScript para esto: www.htmhell.dev/adventcalenda...
DateTime-Local: developer.mozilla.org/en-US/d... 
Наука
Este tipo de vídeos son super importantes, porque hay gente que literal pone solo divs en HTML y transforman el div en cualquier cosa que quieran en vez de ahorrar horas usando la etiqueta nativa y que encima sea mucho más legible el código. Yo era de esos, y por suerte salí de esa mala práctica.
Soy yo, siempre intento pensar en que etiqueta sería correcto poner ahí pero nunca me llega a la mente, y termino poniendo un div para no perder tiempo e ir avanzando :(
@@greimilnunez5179lo mejor que podes hacer es el proceso inverso: sentarte 20-25 min por día a curiosear los artículos de MDN o W3 School e ir conociendo de antemano los componentes disponibles y sus posibilidades, sin presión ni objetivo fijo. Vas a ver como cuando aparece la necesidad te viene a la mente esa info.
El dialog tiene 2 modos: (1) Como modal, donde agrega un cuadro (backdrop) para impedir interactuar con otros elementos, y se lanza usando "showModal()" y (2) Modo "No-modal" que si permite interactuar con otros elementos, para esto no usa un backdrop y se lanza usando `show()`. Cuando se coloca el atributo "open" en HTML el dialog se abre usando este segundo método
Muy bueno lo del dialog, ni idea que existía. Gracias !!
Gracias a ti!
Wow que interesante ya pronto lo prodré aplicar solo esperar un poco a que ya este disponible en los navegadores de más uso... también funciona en Firefox 121. Gracias por mantenernos al día con estas novedades...
OMG, las veces que para hacer un toggle hice malavares con librerias o incluso programandolo manualmente, y habia un simple CSS que lo hacia😅😅
Yo hice un calendario super bonito y ahora voy a tener que ver si lo hago con el otro calendario
Esta muy bueno el video a parte habia cositas que no sabia haci que las voy a ir probando
que conveniente fue esto justo esta pensando en formas de hacer unos details que se vieran mejor, que grande
Interesanteeee, gracias Midu 😆
Gracias Midu por existir!!!💜
Este video está genial para gente que esté empezando a mirar cosas de formularios en HTML! Muchas gracias Midu :)
Gracias a ti!
Videos que valen oro ❤
El selector open es demasiado! Que se pueda poner transitions a la altura y opacidad a esos elementos y GOD o si se puede D:! Cada día uso menos JS y más CSS
Este tío es un máquina programado
Me das mucho trabajo Midu, ahora voy a tener que hacer refactor de varios sites para aplicar todo esto T_T
Nada, todo coña. Muchas gracias por estos tips, crack! 👏
Y yo preguntandome porque no reviven el tag marquee 😢
❤
midu tus thumbnails son un teatro haahaha estan buenos hahaha
Siempre trato de hacer todo vanilla, gracias a eso sabia sobre estas cositas, buen video
Es una gran práctica para no hacer overkill y mejorar criterios. Yo después de años enviciado con resolver cuestiones menores con jQuery salí de la enfermedad y estoy a full metiendo vanilla todo lo que puedo jajaja Cuesta al principio pero ya le agarre el gusto
Voy a tener que aprender de nuevo html, estaba viviendo en la antigua era
Que grande
Gracias midu
El date time local además tiene min max required...
Voy a ver si pones el slider nativo.
4:46 ojo con esto, igual. El tema con la explicit/implicit labels es que algunos screen readers tienen problemas para leerlas cuando nesteas un dentro de un . Habría que ver si sigue pasando
A mí no me funciona 😢
@@antonio2046 qué es lo que no te funciona?
Gracias por tu(s) clase(s) :P
El ejemplo de *details* no funciona ni en Opera ni en Firefox
interesante
Lo del dialog es una locura, justo ayer me tomé el trabajo de hacer un dialog a mano y me quedó horrible, gracias midu
amé
Lamentablemente el efecto del details no funciona en Firefox Dev 123.0b9 (64-bit) y tampoco en Firefox Browser 123.0 (64-bit). Lo acabo de probar....En chrome si, toca esperar hasta que lo estandarizen, pero muy buenisima info, gracias como siempre.
Intente utilizar datetime pero no soporta hora en formato 24h :(
Midu enojado con los que usan javascript para resolver problemas que pueden ser resueltos con css, es god JAJJAJA
El problema con el input de fecha es que hay veces que se necesita un rango de fecha.
No sabía que se podía meter un checkbox en una label 😅
Pero todo eso es recomendable de hacer o no
Lo malo de los modales de diálog es que solo se pueden usar una sola vez.. o eso recuerdo 🤔
Solo sé que no sé nada
jajaja solo me sabia 1 de esos
Primer comentario.
*_Psicológicamente hablando, en la miniatura del video pusiste el 6 grande arriba del ícono de HTML para hacerles creer a la gente que el video se trataba de HTML6 y a su vez tachabas el JS para que crean de que lo reemplazaría o que muchas cosas que antes se hacían con JS ahora se podrían hacer con HTML_*
*_No importa cuanto trates de ocultarlo, la verdad siempre sale a la luz_*
psicología
Ya la cambiaron jaja
@Q89qika Yo creo que quiere tener su fuente de ingresos, ya demasiado hace compartiendo conocimiento gratis