- 809
- 563 811
ManzDev
Spain
āđāļāđāļēāļĢāđāļ§āļĄāđāļĄāļ·āđāļ 27 āļ.āļĒ. 2019
ðĻâðŧ Canal secundario de ManzDev. Directos resubidos de Twitch y fragmentos con contenido de desarrollo web: HTML, CSS, Javascript, terminal de Linux y mucho mÃĄs.
ÂĄNuevo en CSS! Controla tu CSS con @scope
En el pasado CSS estaba muy limitado. La mayorÃa de la gente piensa que las cosas no han cambiado y desconoce que en CSS ya tenemos mecanismos super potentes para limitar el rango de alcance de CSS a las partes del DOM que nos interesen. En este video te explico como, utilizando la regla nativa @scope.
ÂĄTe lo explico!
TIMELINE:
00:00 El problema del alcance en CSS
03:10 La regla @scope
05:05 LÃmite de alcance en HTML
06:45 LÃmite de alcance inicial en CSS
08:00 LÃmite de alcance inicial y final
09:10 LÃmites mÚltiples
09:50 Reemplazando BEM con @scope
LINKS:
ð HTML: lenguajehtml.com/html/
ð CSS: lenguajecss.com/css/
ð Javascript lenguajejs.com/javascript/
ÂĄNo te olvides de seguirme en mis otras redes sociales!
⥠links.manz.dev
---
ðđ Twitch: www.twitch.tv/manzdev
ðĪ Twitter: Manz
ð· Instagram: manz.dev
ðŽ Tiktok: tiktok.com/@manz.dev
ðķ MÚsica: music.manz.dev/player
#html #css #javascript #programacion #frontend #svg #react #vue #angular #desarrolloweb
ÂĄTe lo explico!
TIMELINE:
00:00 El problema del alcance en CSS
03:10 La regla @scope
05:05 LÃmite de alcance en HTML
06:45 LÃmite de alcance inicial en CSS
08:00 LÃmite de alcance inicial y final
09:10 LÃmites mÚltiples
09:50 Reemplazando BEM con @scope
LINKS:
ð HTML: lenguajehtml.com/html/
ð CSS: lenguajecss.com/css/
ð Javascript lenguajejs.com/javascript/
ÂĄNo te olvides de seguirme en mis otras redes sociales!
⥠links.manz.dev
---
ðđ Twitch: www.twitch.tv/manzdev
ðĪ Twitter: Manz
ð· Instagram: manz.dev
ðŽ Tiktok: tiktok.com/@manz.dev
ðķ MÚsica: music.manz.dev/player
#html #css #javascript #programacion #frontend #svg #react #vue #angular #desarrolloweb
āļĄāļļāļĄāļĄāļāļ: 281
āļ§āļĩāļāļĩāđāļ
CSS Cascade Layers: OlvÃdate de los !important
āļĄāļļāļĄāļĄāļāļ 59812 āļāļąāđāļ§āđāļĄāļāļāļĩāđāļāđāļēāļāļĄāļē
Las CSS Cascade Layers son un mecanismo similar a las capas de programas de ediciÃģn grÃĄfica como Photoshop, que sirven para agrupar especificidad CSS y fusionarla en una capa, de modo que no tengamos los clÃĄsicos problemas que tienden a resolverse con un !important. ÂĄTe lo explico! TIMELINE: 00:00 CSS Cascade layers 00:30 Sintaxis @layer 02:18 Reordenar capas 03:15 Capas anÃģnimas 03:37 Subcapas...
ÂŋPor quÃĐ SIEMPRE termino usando !important en CSS?
āļĄāļļāļĄāļĄāļāļ 62316 āļāļąāđāļ§āđāļĄāļāļāļĩāđāļāđāļēāļāļĄāļē
Hay mucha gente que tiene problemas con CSS, pero la mayorÃa usa un !important para solucionarlo sin investigar demasiado. La ESPECIFICIDAD CSS es la forma en la que el navegador calcula a que elemento dar estilo cuando hay conflicto o ambigÞedad. En este video aclaramos muchas cosas. TIMELINE: 00:00 Especificidad CSS 01:10 CÃģmo se calcula 02:10 Calculadora de Especificidad 03:04 Algoritmo de e...
Importaciones: AÃąadiendo CSS desde CSS
āļĄāļļāļĄāļĄāļāļ 712āļ§āļąāļāļāļĩāđāļāđāļēāļāļĄāļē
La regla @import tiene muy mala fama en CSS. No es un mecanismo malo, pero hay que saber sus puntos fuertes y sus desventajas. En este video las comentamos y descubrimos muchas cosas desconocidas sobre las importaciones CSS. TIMELINE: 00:00 La regla @import 00:49 ImportaciÃģn en cliente 04:08 Novedades en @import 05:15 Media queries en @import 06:11 Fallbacks en @import 06:35 MÃģdulos CSS con imp...
No uses estilos en linea ni !important en CSS
āļĄāļļāļĄāļĄāļāļ 58914 āļ§āļąāļāļāļĩāđāļāđāļēāļāļĄāļē
Curiosamente, los estilos en lÃnea y el !important en CSS son recursos muy conocidos y utilizados. Su uso no siempre es malo, pero desgraciadamente, el uso que suele darse de ellos suele desembocar en malas prÃĄcticas. En este video explicaremos por quÃĐ y cuando son malas prÃĄcticas, y casos donde estarÃa bien utilizarlos. TIMELINE: 00:00 Estilos en lÃnea 00:55 Desventajas 02:15 Cuando usarlos 04...
En busca del componente perfecto
āļĄāļļāļĄāļĄāļāļ 2.1K14 āļ§āļąāļāļāļĩāđāļāđāļēāļāļĄāļē
ÂŋCuÃĄl serÃa tu sintaxis de componente perfecta? ÂĄDÃĐjala en los comentarios! La mÃa, serÃa una sintaxis donde puedas mezclar marcado HTML, estilos CSS y funcionalidad Javascript, de forma nativa, y compatible 100% en navegadores. En este video te explico un poco a donde parece que apunta la futura compatibilidad de la plataforma. TIMELINE: 00:00 IntroducciÃģn 00:50 Sintaxis general 02:04 "Mini li...
La C de CSS: Conflictos
āļĄāļļāļĄāļĄāļāļ 89621 āļ§āļąāļāļāļĩāđāļāđāļēāļāļĄāļē
ÂŋTienes claras las bases de CSS? Cuando ocurre un conflicto... ÂŋSabes por quÃĐ ocurre? Para ser un buen desarrollador de CSS hay que ENTENDER el problema, para luego, saber solucionarlo. En este video te explico que tipo de conflictos CSS nos podemos encontrar. TIMELINE: 00:00 Formas de aÃąadir CSS 01:14 Desarrollador vs DiseÃąador 03:05 Conflicto vs Cascada 05:20 Conflictos de diferentes fuentes ...
La herencia en CSS
āļĄāļļāļĄāļĄāļāļ 1.2K21 āļ§āļąāļāļāļĩāđāļāđāļēāļāļĄāļē
La herencia es uno de los primeros problemas de CSS. En general, no se conoce ni se sabe a ciencia cierta como funciona. Comprender la herencia es una primera parte para dominar la cascada de CSS. En este video te explico las bases y resolvemos algunas dudas. TIMELINE: 00:00 IntroducciÃģn 02:22 La herencia en CSS 03:45 Forzar la herencia 04:28 La propiedad all 05:08 Reseteo CSS 06:56 Dudas del c...
El problema al aprender CSS
āļĄāļļāļĄāļĄāļāļ 4K28 āļ§āļąāļāļāļĩāđāļāđāļēāļāļĄāļē
Este es el primer video de la serie "El problema al aprender CSS". Hablamos de la polÃĐmica de un tweet de Tailwind (y otros) que publiquÃĐ que estÃĄ muy relacionado con lo que considero el gran problema que existe al aprender CSS. En los prÃģximos videos explicaremos las diferentes partes de la cascada. TIMELINE: 00:00 IntroducciÃģn 00:17 PolÃĐmica sobre Tailwind 06:32 Otros tweets 07:00 Base fundam...
El mito de ÂŦEl DOM es lentoÂŧ
āļĄāļļāļĄāļĄāļāļ 1.6KāļŦāļĨāļēāļĒāđāļāļ·āļāļāļāđāļāļ
Algunos puntos sobre el drama de WebComponents vs Frameworks del post de Ryan Carniato (creador de SolidJS). Aunque SolidJS no tiene Virtual DOM, generalizamos en casos como el de React y hablamos de la abstracciÃģn del DOM (que si que existe en general en la mayorÃa de los frameworks). TambiÃĐn comentamos algunos posts y tweets relacionados, que les dejo mÃĄs abajo. TIMELINE: 00:00 El mito "El DO...
El problema de los frameworks vs WebComponents
āļĄāļļāļĄāļĄāļāļ 2.7KāļŦāļĨāļēāļĒāđāļāļ·āļāļāļāđāļāļ
En el reciente drama de los frameworks Javascript vs WebComponents, se hablÃģ mucho de Interoperabilidad, un concepto abstracto que es muy importante en este tema. Lo explicamos junto a la evoluciÃģn de los frameworks y algunas opiniones y reflexiones personales que creo que son importantes para tener contexto. TIMELINE: 00:00 IntroducciÃģn 01:39 EvoluciÃģn de los frameworks 03:00 Interoperabilidad...
ÂĄNadie usa webcomponents!
āļĄāļļāļĄāļĄāļāļ 1.5KāļŦāļĨāļēāļĒāđāļāļ·āļāļāļāđāļāļ
Hace algunos dÃas, Ryan Carniato (creador del framework SolidJS) escribiÃģ un artÃculo titulado ÂŦWeb Components no son el futuroÂŧ, que ha desatado todo tipo de comentarios alrededor del ecosistema de Frameworks Javascript y los WebComponents. Uno particularmente que leo de forma muy habitual es: ÂŦNadie usa WebComponentsÂŧ. Comento mi opiniÃģn y muestro algunos datos. TIMELINE: 00:00 La piramide 01...
He migrado a Astro
āļĄāļļāļĄāļĄāļāļ 4.4KāļŦāļĨāļēāļĒāđāļāļ·āļāļāļāđāļāļ
He migrado las pÃĄginas de contenido de LenguajeCSS, LenguajeJS, LenguajeHTML y TerminalDeLinux de Eleventy a Astro. En este fragmento de un directo, explico los detalles tÃĐcnicos de la migraciÃģn y como he ido gestionando y despiezando todo para implementarlo con Astro. TIMELINE 00:00 IntroducciÃģn 10:20 Colecciones Markdown 41:00 WebComponents 52:00 Generador de sprites SVG 58:20 Generador de mi...
Experimento: Javascript + ollama + mtmi + pesimistas del chat
āļĄāļļāļĄāļĄāļāļ 3832 āļŦāļĨāļēāļĒāđāļāļ·āļāļāļāđāļāļ
Experimento: Javascript ollama mtmi pesimistas del chat
Astro (DÃa 4): Creamos la web de la librerÃa mtmi
āļĄāļļāļĄāļĄāļāļ 3352 āļŦāļĨāļēāļĒāđāļāļ·āļāļāļāđāļāļ
Astro (DÃa 4): Creamos la web de la librerÃa mtmi
Aprende HTML y WebComponents con la encuesta (explicada) StateOfHTML 2024
āļĄāļļāļĄāļĄāļāļ 5962 āļŦāļĨāļēāļĒāđāļāļ·āļāļāļāđāļāļ
Aprende HTML y WebComponents con la encuesta (explicada) StateOfHTML 2024
Astro (DÃa 3): Creamos la web de la librerÃa mtmi
āļĄāļļāļĄāļĄāļāļ 3352 āļŦāļĨāļēāļĒāđāļāļ·āļāļāļāđāļāļ
Astro (DÃa 3): Creamos la web de la librerÃa mtmi
Vinilos retro CSS (DÃa 14): AsincronÃa Javascript y Cascada CSS
āļĄāļļāļĄāļĄāļāļ 1752 āļŦāļĨāļēāļĒāđāļāļ·āļāļāļāđāļāļ
Vinilos retro CSS (DÃa 14): AsincronÃa Javascript y Cascada CSS
Astro (DÃa 2): Creamos la web de la librerÃa mtmi
āļĄāļļāļĄāļĄāļāļ 4532 āļŦāļĨāļēāļĒāđāļāļ·āļāļāļāđāļāļ
Astro (DÃa 2): Creamos la web de la librerÃa mtmi
Astro (DÃa 1): Creamos la web de la librerÃa mtmi
āļĄāļļāļĄāļĄāļāļ 2.1K2 āļŦāļĨāļēāļĒāđāļāļ·āļāļāļāđāļāļ
Astro (DÃa 1): Creamos la web de la librerÃa mtmi
DÃa 4: Creando un Editor de cÃģdigo (Monaco, core de VSCode)
āļĄāļļāļĄāļĄāļāļ 1842 āļŦāļĨāļēāļĒāđāļāļ·āļāļāļāđāļāļ
DÃa 4: Creando un Editor de cÃģdigo (Monaco, core de VSCode)
DÃa 3: Creando un Editor de cÃģdigo (Monaco, core de VSCode)
āļĄāļļāļĄāļĄāļāļ 1372 āļŦāļĨāļēāļĒāđāļāļ·āļāļāļāđāļāļ
DÃa 3: Creando un Editor de cÃģdigo (Monaco, core de VSCode)
DÃa 2: Creando un Editor de cÃģdigo (Monaco, core de VSCode)
āļĄāļļāļĄāļĄāļāļ 1962 āļŦāļĨāļēāļĒāđāļāļ·āļāļāļāđāļāļ
DÃa 2: Creando un Editor de cÃģdigo (Monaco, core de VSCode)
DÃa 1: Creando un Editor de cÃģdigo (Monaco, core de VSCode)
āļĄāļļāļĄāļĄāļāļ 6872 āļŦāļĨāļēāļĒāđāļāļ·āļāļāļāđāļāļ
DÃa 1: Creando un Editor de cÃģdigo (Monaco, core de VSCode)
Vinilos retro CSS (DÃa 13): Animaciones
āļĄāļļāļĄāļĄāļāļ 3232 āļŦāļĨāļēāļĒāđāļāļ·āļāļāļāđāļāļ
Vinilos retro CSS (DÃa 13): Animaciones
Especial Nostalgia: Simulador del Defrag.exe Win98 con CSS/Javascript
āļĄāļļāļĄāļĄāļāļ 1432 āļŦāļĨāļēāļĒāđāļāļ·āļāļāļāđāļāļ
Especial Nostalgia: Simulador del Defrag.exe Win98 con CSS/Javascript
Spotify (DÃa 8): Clon de la UI del reproductor de mÚsica Spotify
āļĄāļļāļĄāļĄāļāļ 3052 āļŦāļĨāļēāļĒāđāļāļ·āļāļāļāđāļāļ
Spotify (DÃa 8): Clon de la UI del reproductor de mÚsica Spotify
Sabes hacer Media Queries, pero... ÂŋY Container Queries?
āļĄāļļāļĄāļĄāļāļ 2782 āļŦāļĨāļēāļĒāđāļāļ·āļāļāļāđāļāļ
Sabes hacer Media Queries, pero... ÂŋY Container Queries?
Vinilos retro CSS (DÃa 12): DOM (Javascript)
āļĄāļļāļĄāļĄāļāļ 1732 āļŦāļĨāļēāļĒāđāļāļ·āļāļāļāđāļāļ
Vinilos retro CSS (DÃa 12): DOM (Javascript)
Vinilos retro CSS (DÃa 11): Git
āļĄāļļāļĄāļĄāļāļ 1652 āļŦāļĨāļēāļĒāđāļāļ·āļāļāļāđāļāļ
Vinilos retro CSS (DÃa 11): Git
ManzDev, excelente hermano. Gracias. Saludos.
MaÃąana css ya serÃĄ un lenguaje ð
ÂŋPor quÃĐ maÃąana y no hoy?
La frase: "Esto no va a crecer" me pasÃģ que la dije hace unos dÃas. Un proyectito en bash para ejecutar comandos simples de node en funciÃģn del package manager que use el usario. Ya lleva 18 archivos (uno por funciÃģn) y aparte un "servicio" para colorear los msjs en consola, de error, warning y de ÃĐxito. :v
ÂĄEs tan comÚn!
Hola, este ejemplo lo saque de tu pÃĄgina, es un breve ejemplo de como centrar con CSS verticalmente, pero lo copio tal cual y no centra, sera que le falta algo o algo que yo no veo? gracias. Centrar verticalmente 1âĢLe damos un alto de 100vh a <html>. OcuparÃĄ exactamente el tamaÃąo de alto de pantalla. 2âĢ Le damos un alto de 100% a <body>. TomarÃĄ el alto del padre, o sea, de <html>. 3âĢ Asegurate de tener reseteado el margen de <body> con margin: 0. <div class="container">ManzDev, tu streamer de CSS de confianza</div> html { background: hotpink; height: 100vh; } body { margin: 0; height: 100%; background: black; } .container { width: 300px; min-height: 250px; margin: auto; background: indigo; color: white; padding: 2rem; }
Te faltarÃa aÃąadirle un mecanismo de layout al body (si lo que quieres es centrar el cuadrado). Por ejemplo: body { display: grid; place-items: center; }
ManzDev muchas gracias hermano por tu conocimiento y deseo de enseÃąar. Saludos.
Muchas gracias, me has aclarado un montÃģn de dudas que tenÃa cuando lleguÃĐ a tu vÃdeo!
No te lo puedo creer!!!, que genial concepto, bien!!! literalmente una soluciÃģn para una necesidad
ÂĄMuchas gracias Manz! ÂĄExcelente explicaciÃģn! Siempre aprendo contigo. Un abrazo, saludos desde Venezuela ðŧðŠ
Que felicidad enterarme de esto, no sabÃa nada del tema y las broncas que me doy con Bootstrap cuando me lo encuentro en un proyecto. Ahora lo voy a aislar dÃģnde quiera que lo vea. Y sin discriminar ehh ððððð
@manzdev l, serÃa posible algÚn vÃdeo de min-content max-content y fit-content pero OJO,aplicado a HEIGHT, no a width. No he visto un sÃģlo tutorial donde se explique quÃĐ hace en la altura y no en el ancho
Habitualmente se suele utilizar para los anchos, no tanto para los altos. Mi consejo es que los altos los intentes dejar siempre que sea posible sin `height` exacto, o como mucho con `min-height` o `max-height` si lo requieres. Lo ideal es que el contenido fluya y se adapte a lo que contenga. ÂĄMe anoto la idea!
Increible!
Manz una duda, hace unos dÃas estaba viendo tu repositorio de Mtmi y vi algo en lo que podÃa contribuir a la web, es decir al cÃģdigo, no era gran cosa era un detalle. El punto es que en las herramientas de desarrollador encontrÃĐ el .css que querÃa "mejorar", luego en el repositorio de Github me fijÃĐ y no encontraba el .css en ningÚn lugar ni siquiera compilado o generado por terceros (eso creo). Me preguntaba si tu repositorio de Github no es directamente la web de Mtmi y solo tinenes subido una parte del cÃģdigo pero no todo, pensÃĐ que tu web era un repositorio de github pero al parecer es una web ajena a Github jaja en fin, Me encanta que hables de CSS, gracias por tanto ð
FÃjate que tenemos varias ramas. Una rama es la que usamos para GitHub pages y la web. Otra rama es la que usamos para el cÃģdigo de mtmi (la aplicaciÃģn en sÃ). Saludos!
hola compa, recien acabo de encontrar tu pagina web y es increible tienes todos los datos para iniciar, me gusto tu tabla periodica jajajaja muy buena esa organisando
Hola, mkweb me da estas advertencias, como los soluciono o es normal eso y trabajo asÃ? gracias âWARNâ deprecated eslint 8.57.0: This version is no longer supported. Please see .... âWARNâ 6 deprecated subdependencies found: humanwhocodes config-array 0.11.14, humanwhocodes object-schema 2.0.3, ....
Actualmente, mkweb tiene la versiÃģn de ESLint 8 y por eso salen esos warnings (aunque funciona correctamente). Pronto la actualizarÃĐ a ESLint v9. Si quieres adelantarte, por aquà tienes algunas pruebas que estoy haciendo para migrar a ESLint 9 (la versiÃģn alpha) www.npmjs.com/package/eslint-config-manzdev?activeTab=versions
ð
god
desarrollador { por-favor: "NO use !important" !important; }
ðð
Es frustrante trabajar en un proyecto y darme cuenta que no sÃĐ mÃĄs que lo bÃĄsico y ver como el CSS se me va de las manos, ojalÃĄ pueda instalarlo en el proyecto antes de dividir en CSS en 100 archivos
yo por suerte jamaz use important! y creo que nunca lo voy a usar
por cierto el otro dia tenia un problema de especificidad en donde una clase2 estaba aplicando estilos en cascada despues de otra clase1 y sin embargo se superponian los estilos de la clase1 por mas que este mas arriba... asi que mire y si: la clase uno tenia (0,2,0) de especificidad mientras que la clase2 tenia (0,1,1) y tuve que recurrir a usar un selector de atributo y valor para que considere los estilos. Estaria bueno que asi como exista como una especie de z-index, pero para la especificidad :P , entonces cuando queres subirle un poquito la especificidad a un elemento simplemente aumentas la "z-specificity" (?
Es casi literalmente lo que vamos a ver en el siguiente video :-P
@@ManzDev perfecto!!!!!!! jajaja que sincronia , voy para allà entonces!!
No sÃĐ si lo vas a creer, pero terminÃĐ de ver tu vÃdeo, me puse con mi cÃģdigo... ÂĄy me encontrÃĐ con un problema de especificidad! Gracias a ti, lo solucionÃĐ. âš ÂĄQuÃĐ grande eres! ðð DejarÃĐ los !important para Bootstrap. ð
ðð
Si tengo 5 imÃĄgenes que no caben en horizontal y dos de ellas generan una nueva fila colocÃĄndose debajo de las otras tres quedan evidentemente pegadas a la izquierda. Como puedo colocar esas dos imagenes centradas con respecto a las otras tres de arriba? Si alguien puede ayudar, soy novato. ð Gracias. Buen video!!!
Muy prÃĄctico.
Como se hace en tailwind no? En el index css los imports vendria siempre algo asi como importar el index,css pero con lo heredado o importado no?
Realmente, en Tailwind es algo mÃĄs complejo, porque se preprocesa el cÃģdigo. Tailwind al fin y al cabo es un plugin de PostCSS (al menos lo es aÚn), por lo que muchas veces aunque uses un `@import` puede que se comporte diferente. Pero si te refieres a la sintaxis, sÃ, es parecida. Eso sÃ, "En Tailwind se hace como en CSS" (y no a la inversa :P)
âĪâĪâĪðŪðŪ
ð
Se le puede pasar props a los webcomponents?
SÃ. Los webcomponents se guÃan por las normas de HTML, CSS y Javascript, por lo que se adaptan ellas. Las props de los frameworks realmente son una mezcla de "propiedades de Javascript" y "atributos HTML". En vanilla se pueden hacer ambas, pero por separado.
@ManzDev gracias por la respuesta ð intente ver porque no se usan mÃĄs los webcomponents junto con Lit pero no comprendo porque no tienen mÃĄs popularidad si son increÃbles. EstarÃa genial un video sobre el estado de Lit y su futuro ðð―
â@@code1866 Yo creo que es una mezcla de varias razones: 1) Desconocimiento: Simplemente no estÃĄn de moda o no tienen el hype que tienen los frameworks de Javascript. 2) Experiencia de desarrollo: Los Webcomponents en sÃ, tienen menos DX que los frameworks de JS, que suelen innovar haciendo mÃĄs cÃģmodo y mÃĄs automÃĄtico todo. 3) Curva de aprendizaje: Hay que saber mÃĄs sobre HTML, CSS y Javascript, por lo que a nuevos desarrolladores le echa atrÃĄs. Pero coincido, ÂĄson geniales! Me apunto la idea de Lit!
Yo lo uso para pasar variables css y esta super genial
ÂĄQuÃĐ interesante! Siempre me ha parecido un desafÃo saber cuÃĄndo usar important en CSS. ðĪ Una vez me volvà loco tratando de arreglar un diseÃąo por abusar de ÃĐl. ÂŋAlguien mÃĄs ha pasado por eso? Ahora estoy aprendiendo en ŅÐūdigo hÐĩroÐĩ y me encanta. ð
Dreamweaver, traumas de Vietnam me trajo :v
SÃĐ que este video ya tiene un aÃąo. Pero lo de las tablas que dice al principio, me enterÃĐ el otro dÃa que hay smart TVs actuales que sus sistemas operativos a dÃa de hoy aÚn es necesario usar tablas y float como fallback para ese tipo de dispositivos ðð
Y en email marketing tambiÃĐn se usan bastante por compatibilidad con clientes de correo, desgraciadamente...
@@ManzDev DespuÃĐs que comentÃĐ seguà mirando el video y lo mencionabas a eso. Pasas que cosan :v
Gracias por el contenido. Se agradece tu expresiÃģn natural Manz. Espero puedas integrar desde tu mirada la caracterÃstica sub-grid. Saludos.
No podrÃĄs impedir que convierta el mantenimiento de mi CSS en una pesadilla! âĒSale corriendo pero se golpea con la puerta al salirâĒ
Tremendo
empecÃĐ a maquetar webs html/css en el 2005. y despuÃĐs de muchisimo tiempo haciendo las cosas de la Única manera que habÃa (estilos globales en uno o varios archivos css) me siento muy cÃģmodo usando tailwind o modos de encapsulamiento o scoping en frameworks como react, angular o vue. porquÃĐ? sencillamente porque ya he padecido mucho el mantenimiento infernal que supone la cuestiÃģn 'global' de css. de cualquier forma es importantÃsimo estar al tanto de estos conflictos que mencionas, el tema de la casada, la especificidad etc.
SÃ, lo que comentas es una realidad, pero tambiÃĐn creo que actualmente, en CSS nativo ya hay formas de manejar el scope y la cascada que no son puramente globales, como lo era hace aÃąos. Nuevamente, usar Tailwind no tiene porque ser malo. El problema viene, como con cualquier herramienta, cuando la utilizas principalmente para evitar aprender otras cosas que se deben aprender primero o para usarlo en entornos forzados donde no aplica. Saludos!
@@ManzDev correcto, ya existe @scope (y :host para quienes usen web components) aunque segÚn can i use le falta al menos dos aÃąos para que su soporte empiece a acercase a lo pleno (94-95%) y podamos usarlo sin preocupaciones de cobertura. de hecho safari ios reciÃĐn comenzÃģ a soportarlo en la iOS 17 (actualmente v18, y ya sabemos que hay muchisimos iphone viejitos activos). tambiÃĐn tenemos css nesting (veo que ya has hablado de eso en algÚn video), otra cosa que en su momento hemos disfrutado mucho utilizarlo en sass/scss. lo demÃĄs que comentas es super vÃĄlido, el primer paso deberÃa ser aprender fundamentos y uso de la tech vanilla, y luego reciÃĐn comenzar a usar alguna lib o framework. a partir de ahà queda claro que herramientas como tailwind o react o angular suponen un gran avance en dx con sus abstracciones, con respecto a tener que escribir todo plain vanilla a mano. lo que me gusta de tailwind es que marida muy bien con libs headless UI como shadcn o primitivas tipo radix ui. pd: no se si lo has visto pero unocss supone un avance respecto a tailwindcss, lo estoy mirando con muy buenos ojos.
Saludos ! Precisamente ando viendo todos estos temas y me tope con tus videos, gracias por el aporte y tÚ anÃĄlisis. Tengo un proyecto SaaS clÃĄsico hecho con puro js vanilla y me apoye en jQuery en su momento cuando hice las bases. El problema es que yo manejo mucho mi cÃģdigo js con POO, y parte del render lo tengo en PHP, digamos que es hÃbrido realizÃģ con un motor de plantilla en PHP un pre-renderizado de los componentes muy estrictos y mayormente estÃĄticos y en el front js hago el render de lo dinÃĄmico, es verdad que sin una herramienta como lo son componentes pues se trabaja un poco mÃĄs con puro js vanilla entonces andaba viendo si me conviene migrar a un framework como React, he estado probando muchos y lamentablemente aÚn no me convence, son muchas dependencias se vuelve mÃĄs complejo y no he encontrado uno que me permita tener adaptar sin problema a mi esquema de trabajo. Los frmaworks tienen un paradigma muy aislado que en lo personal no me gusta tanto. Y por ellos andaba viendo si mejor Ãntegro micro librerÃas como para el uso de WebComponents nativos como Preact, y que no requieras necesariamente compilaciÃģn no muchas capas de traspilacion. Pero veremos quÃĐ sale de todo esto..
Si estÃĄs usando PHP, al ser una aplicaciÃģn backend, cambiar a React quizÃĄs se siente muy agresivo y por eso no te convence. Por lo que dices, entiendo que lo que no te gusta o no encaja contigo es la filosofÃa de transpilar el cÃģdigo y buscar mÃĄs algo directo. Creo que quizÃĄs, algo que te podrÃa interesar es usar Lit.dev. Encaja con la filosofÃa de OOP, se puede usar sin transpilar (usar la modalidad sin Typescript) y trabajas con clases de JS y WebComponents. Echale un ojo: lit.dev
Parece una estructura de lit element ðŪ
SÃ, lo comento en el video, la estructura es prÃĄcticamente la misma que usan en Lit, con algunos cambios de caracterÃsticas modernas que creo que Lit aÚn no utiliza, pero que sin duda utilizarÃĄ en el futuro.
@ jeje si es lo que vi mas adelante en el video, pero ya habia comentado xd, buen video amigo
Buenas! Muy bueno los videos de CSS, donde puedo ver el video completo? Porque parecen recortes de una otra transmision. Saludos!
En el VOD de Twitch permanece durante 60 dÃas: www.twitch.tv/videos/2282570673
@@ManzDev Gracias!
<script setup lang="ts"></script> <template> </template> <style scoped> </style>
Los SFC (Single File Components) de Vue, realmente son una derivaciÃģn de WebComponents. En Vue 1 los componentes de Vue eran una especie de "fork" de como se crea un WebComponent, pero con una filosofÃa mÃĄs centrada en objetos. En la versiÃģn 2 lo hicieron mÃĄs "transpilable", y en la versiÃģn 3 metieron composiciÃģn para no tener que usar mixins y reutilizar mejor el cÃģdigo. Me encanta tambiÃĐn.
Que nuevas caracterÃsticas tan interesantes... Gracias ð
muy interesante y muy a tener en cuenta todo lo que comentas. Yo el !important intento usarlo lo minimo posible, y en general suelo poner muy pocos id, a menos que sea para algo muy concreto.
Hola Manz! En quÃĐ casos se usa mayormente el id como selector?
En general, te dirÃa que en CSS no es aconsejable utilizar id para dar estilo, ya que lo habitual es que lo que al principio piensas que es Único, deje de serlo con el tiempo. Mejor usar clases para dar estilo.
sÃģlo dirÃĐ que con Tailwind esos conflictos no pasan... ð
Siendo justos, tienes parte de razÃģn, pero no es completamente cierto. En Tailwind pueden ocurrir conflictos tambiÃĐn. Por ejemplo, si aplicas clases que internamente usen varias propiedades CSS (que las hay) existirÃĄn conflictos. Si usas librerÃas de terceros (algo habitual) o cÃģdigo global, es fÃĄcil que hayan conflictos tambiÃĐn.
ððððð
El Único caso donde uso !important es cuando estoy manipulando un componente externo que no tiene opciÃģn de personalizaciÃģn y la especifidad que lleva es medio tricky para usar sÃģlo cascada
La cascada ahora tiene algo super interesante que se llama "Cascade layers" que es ideal para eso. Muy pronto saco video sobre ello, mientras: lenguajecss.com/cascada-css/especificidad/regla-layer/
Pronto vendrÃĄ un video sobre las CSS Cascade Layers, que es ideal para esos casos. Si quieres adelantarte: lenguajecss.com/cascada-css/especificidad/regla-layer/
Justo lo ando aprendiendo y son una tremenda chulada. Lo malo es que mi stack es Next y cuando las uso con mÃģdulos de css se comportan medio raro, pero en vanilla me han solucionado un sin fin
@@ManzDev Y tambiÃĐn en Codepen es muy prÃĄctico para separar los reset/base con el cÃģdigo exclusivo del demo. Eso se lo vi al Jhey y desde entonces tambiÃĐn lo aplico
Que interesante, muchas gracias
ÂŋHay alguien con quien pueda trabajar en proyectos? Estoy aprendiendo PHP y JavaScript
TÚ tÚ, si, tÚ backend que estÃĄs ahà callado pensando CSS a mi no se me da... me asuste! dije ÂŋManz me estÃĄ hablando? ðĪĢ