Just in time de tailwind, yo vengo de bootstrap fue mi primer framework de estilos, pero tailwind me gusto mucho lo considero mas simple en todos los asepctos.
La comparacion mas bien seria entre el que Hizo la Pagina de Testla y el que hizo el framework Tailwind. Es decir alguien que NO hizo buenas practicas contra alguien que Si hizo buenas practicas.
Se puede optimizar con sass para cargar en la página solo los estilos que se usa en esa página, tailwind es bueno, yo prefiero usar css, no me gusta tener elementos html con un montón de clases.
claro, pero yo prefiero hacerlo con CSS, con tailwind te queda un HTML con un montón de clases que de solo verlo da sueño, con CSS haces lo mismo con 1 a 2 clases y el HTML queda mas limpio y fácil de entender.
@@jimmymontenegro8517 claro que se puede, pero yo me voy al factor tiempo; si mi jefe me pide maquetarlo con tailwind lo voy maquetar con tailwind, aclarándole que mi productividad va bajar enormemente claro, lo que me tomaba 2 horas lo hare en 5 horas, si aun así me pide tailwind no hay problema, lo hago con tailwind, como dicen: donde manda capitán no manda marinero
Alguien que nos ayude a diferenciar: Si se utiliza Tailwind ya no se usa Sass (el del logo estilo Barbie)?? O sea, el uno cubre las funciones del otro? O se complementan?
Es que sass en sí no es framwork es como una ayuda a escribir css más rápido pero realmente si puedes utilizar sass con tailwind porque tailwind es el framwork
Si, pero todo lo que te ahorras en el css lo perdés en el html agregando un montón de clases que vuelven más pesado ese archivo o el javascript en caso de que estés usando un framework
Solia usar tailwind pero ahora prefiero css puro con sass, sass tiene un montón de funcionalidades que te ayudan a agilizar el desarrollo de css y más con la modularizacion que me permite, con tailwind se ensucia demasiado el HTML.
Depende, es más práctico diferenciar el css del sitio por página para no caer en ese tipo de problemas, aunque si apoyo el uso de tailwind para sitios sencillos
Tailwind son los ruedines de la bici para los que no son frontends, de primeras es exactamente como usar estilos inline style="display:flex" es igual a class="flex" y de simpre estilar inline ha sido mala practica, pero ahora por lo visto no...
eso tal vez haria la diferencia hace 20 años. Con la potencia de los ordenadores y la velocidad de internet modernos no hace ninguna diferencia significativa
No soy experto en css, pero por qué usar tailwind y no clases css, si quiero darle un estilo a un botón puedo crear una clase con todo los estilos necesarios? y si lo hago con tailwind debo poner todas las clases en cada botón de forma independiente?
El tema de tailwind es la rapidez, muchas veces nos sorprendemos a nosotros mismos escribiendo estilos inline (aunque sea mala practica) para prototipar algo de forma rapida. Tailwind convierte esa mala practica en algo decente y aunque tiene puntos en contra se pueden solucionar
@@Zokram_Crossam vamos que de serie es exactamente como usar estilos inline style="display:flex" es igual a class="flex" y de simpre estilar inline ha sido mala practica, pero ahora por lo visto no...
No entiendo muy bien esto. Quiero decir, si tu importas Tailwind en un HTML, el navegador esta cargando todo el CSS. Lo que puede reducir la carga como han dicho sería utilizar postcss con algun plugin de eliminación de css que no usa o algo así, pero vaya, corregidme si me equivoco.
Esa forma de usar tailwind es para probarlo, al igual que puedes probar react poniendo el react y reactdom directo en un script-src en el html. Necesitas un build-system como vite para que se encargue de todo el proceso.
Es que Tailwind usa PostCSS por debajo. Detecta qué clases usas en tu HTML y sólo carga las que carga el usuario. Esto hace que cargues sólo el CSS que necesitas.
@@midulive y si tengo varias páginas que talvez utilicen diferentes clases css? Es posible cargar un diferente archivo css por página de forma automática con tailwind?
Lo que pasa es que tailwind usa la metodología de css llamada atomic css, lo cual son clases utilitarias. Tailwind está pensado para ser usados en compañía de otros frameworks basados en el estándar de "componente", lo cual es dejar todo en una sección de código y usarlos en la aplicación con un nombre más corto. En este caso no te quemas por pensar tanto el nombre de las clases, puesto que el "nombre" de todo es el mismo componente
Yo creo que estas ideas están MUY a contramano de la actualidad. En 2005, me hubiera encantado optimizar el CSS lo más posible, según la vista que se presentaba y sus recursos. El 3G que andaba cuando quería, las conexiones de 3Mb a 10Mb por el viejo ADSL a traves del cablado del teléfono y tantas cosas que hubieran hecho una diferencia no imaginable en aquella época. Hoy, cuando menos me venden 100Mb y casi todos andan con 150, 300,500 Mb, si es que encima son simétricos y con la fibra hasta la ficha de tu PC (Y eso que habla de un país tercer mundista como Argentina, no me quiero imaginar por el resto del 1º mundo). ¿De qué me sirve que mi site pese 300kb en vez de 1,5 Mb, si tengo 4G cuando menos, que tiene una latencia inferior a la del ADSL de 2010, y con casi 150Mb de ancho?. Prefiero meterle un loader-spinner, que espere 1 segundo extra y cargar 'casi todo'. Luego, en un SPA recargo un marco central. 'Casi todo', es todos los recursos que necesitará un usuario promedio (que de hecho, luego con statics se puede afilar mejor). Si luego, necesito recursos extra como cargar un CSS externo y librerías externas tal como Leaflet, lo hará inyectar después. Hay varias cosas como tables, dropdowns, list, button, switch, etc. que por más que no esté en el primer "form", como por ejemplo un 'switch', de nada me sirve no enviarle los 80kb del switch para ahorrarme diezmil milésimas de segundo.
Pienso todo lo contrario. Hoy tenemos mejores herramientas para cuidar la experiencia de usuario. Se trata de evitar hacer y enviar cosas innecesarias. Así de sencillo. Hacerlo porque piensas que “ya tendrá buena conexión” el usuario, además de no ser verdad siempre, es simplemente una cuestión de dejadez y falta de ingeniería de software.
@@midulive Coincido que hoy, las herramientas están. Lo que justamente digo, es que; - llegaron 'tarde' y han perdido el sentido. El usuario no puede percibir si su celular carga 1,5MB o 300KB. El recurso de ancho de banda, hoy, hasta en países de latino américa el HSDPA+/3.5G, 4G o 5G, son un overkill para incluso webs del año 2010 que están ahí porque el hosting está pago hasta 2035, pero no tiene un byte de actualización. ¿Por qué habríamos de forzar cosas como cuidar el CSS de forma extrema?. No digo; "no cuidar cargar 99% de clases que no serán usadas JAMÁS". Como dije al principio, son cosa que no afectan a la experiencia del usuario porque el hardware así como la infraestructura, aún en países de LATAM, están 'overkill' sobre lo requisitos deseables. Entiendo que el CSS si esté optimizado en su diseño. Que no haya esas herencia sobre herencias con overwrite de propiedades a montones (en eso Tailwind me parece que lo hace más que excelente). Al procesador resolver ese mal diseño de herencia y dependiendo si es un equipo gama-entrada puede que sí lo vea el usuario y golpee su experiencia. Pero ¿el tamaño?. El recorte del CSS por tema de tamaño, me parece más como jugar a los "13KB game challenge" que a diseñar un juego. Entiendo, que hay cosas maravillosas en esos awards. Al verlas se te salen los ojos si uno ve los challenge de los años pasados pero para la práctica ninguno terminó siendo un juego de cara al público real. Recortar el tamaño del CSS que recibe el usuario par mezquinar 1MB ó inclusive hasta 2 MB, no le veo el sentido. El usuario no lo verá, no lo notará y ni siquiera sabrá que tuvo una carga tal. Entiendo que si por cada vista tuviera que cargar 1,5MB por más que no lo 'perciba' me parece un despropósito si fuera EL MISMO CÓDIGO. Pero sigo sin ver la ventaja de si cargo un CSS de 1MB en vez de uno uno de 300kb para luego ir cargando el resto en parte. Si ese 1MB me queda cacheado. Hasta hago que mis siguientes vistas ni se molesten en traerme el CSS.
@@code1866 ¿Y se nota?. Mirá que en Argentina, en el Norte, donde muchas veces se toman las fotos que se ven de las zonas muy muy muy pobres, yo he estado hace 5 años y la conexión es fluida. Hay lugares muy particulares en medio de la 'nada' en la montaña que directamente pasas de tener 3.5G/HSDPA+ a no tener ni señal de teléfono. Aún así, en los largos tramos de ruta, la señal no es la mejor pero la conexión hasta permite escuchar radios online. En general, la señal o está o no está, cuando no está es obvio que no carga nada, pero cuando hay señal, una página web que pese 2Mb carga casi al momento. Más aún, si es una web qua ya está cacheada.
Creo que decir que tailwind no es profesional deja muy en duda tu profesionalismo, es como decir que una persona que se moviliza en carro es menos profesional que una que camina 3 horas diarias para llegar a su trabajo
Ahora la mayoría de mis trabajos son hechas con tailwindcss, me gusta mucho > bootstrap
Tailwind: Pasar el peso del CSS al HTML.
La verdad 🤣
No, si usas muy repetidamente grupos de estilos, puedes crear en tailwind tu propia regla y asi en el html sólo usas un estilo. Ya se fue el html.
@@jimmymontenegro8517 Esto tambien es cierto pues. Pero lo que dice carlos tampoco esta muy lejano de la realidad...
Just in time de tailwind, yo vengo de bootstrap fue mi primer framework de estilos, pero tailwind me gusto mucho lo considero mas simple en todos los asepctos.
Aséptico
Estos Reels son la bomba
La comparacion mas bien seria entre el que Hizo la Pagina de Testla y el que hizo el framework Tailwind. Es decir alguien que NO hizo buenas practicas contra alguien que Si hizo buenas practicas.
PurgeCSS o analisis de calidad estáticos como SonarQube, etc suelen ayudar ;)
Nunca he usado Bootstrap pero desde que comencé a usar Tailwind se me ha hecho más fácil editar los estilos aunque aún me falta sacarle más provecho.
Yo suelo usarlo para que mi Pokemon carry tenga el doble de velocidad... va bastante bien para pokes que no son muy rápidos en su tier.
Se puede optimizar con sass para cargar en la página solo los estilos que se usa en esa página, tailwind es bueno, yo prefiero usar css, no me gusta tener elementos html con un montón de clases.
No es necesario , tailwind ofrece la solución a eso
claro, pero yo prefiero hacerlo con CSS, con tailwind te queda un HTML con un montón de clases que de solo verlo da sueño, con CSS haces lo mismo con 1 a 2 clases y el HTML queda mas limpio y fácil de entender.
@@oscarrapray no, con tw puedes evitar poner mil clases.
@@jimmymontenegro8517 claro que se puede, pero yo me voy al factor tiempo; si mi jefe me pide maquetarlo con tailwind lo voy maquetar con tailwind, aclarándole que mi productividad va bajar enormemente claro, lo que me tomaba 2 horas lo hare en 5 horas, si aun así me pide tailwind no hay problema, lo hago con tailwind, como dicen: donde manda capitán no manda marinero
Excelente!
Alguien que nos ayude a diferenciar:
Si se utiliza Tailwind ya no se usa Sass (el del logo estilo Barbie)??
O sea, el uno cubre las funciones del otro?
O se complementan?
Es que sass en sí no es framwork es como una ayuda a escribir css más rápido pero realmente si puedes utilizar sass con tailwind porque tailwind es el framwork
Pero con las nuevas funciones de css sass se está ya dejando de usar un poco pero yo lo sigo usando
bueno saberlo gracias!
Eso es por no manejar bien la descarga y habría que ver el framework, la página descarga todo y listo y eso está mal seguramente no está modilarizado
Si, pero todo lo que te ahorras en el css lo perdés en el html agregando un montón de clases que vuelven más pesado ese archivo o el javascript en caso de que estés usando un framework
No
Cual es la extensión para ver el css que no se utiliza?
Pestaña de coverage como puedes ver en todo el vídeo man
Creo que es el f12, en el inspección
En el inspector a la derecha los 3 puntos , more tools, coverage
Optimizar el archivo css no es exclusivo de tailwind, se puede hacer con cualquier css
Nunca se dijo que no se pudiera
pero es mucho más rápido, menos engorroso y más natural hacerlo con tailwind 🍃
Solia usar tailwind pero ahora prefiero css puro con sass, sass tiene un montón de funcionalidades que te ayudan a agilizar el desarrollo de css y más con la modularizacion que me permite, con tailwind se ensucia demasiado el HTML.
Xd casi siempre es al revés
@@Cristian-gi4bs puedes explicar un poco tu respuesta? Estoy aprendiendo y me parece razonable lo que dice, lo tuyo no entiendo porque lo dices
Cómo maneja eso tailwind no me imagino que tenga css sin archivos a menos que sea un cdn
Un comando que busca tus estilos y deja los necesarios. Node.js
postcss seria en todo caso, lo que te ayuda a suprimir bloques en desuso y no tailwind en si, no?
Tailwind usa PostCSS por debajo y lo hace Tailwind por ti automáticamente.
eso es valido solo para css? o tambien en los js de mi angular? lo el unused del navegadoe
Cómo se podría cargar el css para solo la sección que necesites?
Programando por componentes
Depende, es más práctico diferenciar el css del sitio por página para no caer en ese tipo de problemas, aunque si apoyo el uso de tailwind para sitios sencillos
Tailwind son los ruedines de la bici para los que no son frontends, de primeras es exactamente como usar estilos inline style="display:flex" es igual a class="flex" y de simpre estilar inline ha sido mala practica, pero ahora por lo visto no...
Igualmente se puede usar purge css para eliminar esos estilos del bundle
como se utiliza el purge css?
Miren en programación, si funciona dejenlo así... El mayor consejo que puedo darles
y luego se hace un refactor de 3 meses que atrasa otros proyectos
Se trata de optimizar el código
mi amigo el que reutiliza su propio código en problemas diferentes y deja lo que esta de mas aunque funcione xd
@@Fran-wk1wj le pagan a el y le dan trabajo a otro, mira el lado positivo
No seas mediocre
Eso es literalmente mi código, no se que tengo en los CSS😂
Team tailwindcss 😎
eso tal vez haria la diferencia hace 20 años. Con la potencia de los ordenadores y la velocidad de internet modernos no hace ninguna diferencia significativa
No soy experto en css, pero por qué usar tailwind y no clases css, si quiero darle un estilo a un botón puedo crear una clase con todo los estilos necesarios? y si lo hago con tailwind debo poner todas las clases en cada botón de forma independiente?
De primeras si. Pero puedes usar algo que se llama "@layer base" para crear estilos globales para elementos como button, h1, img, etc ....
El tema de tailwind es la rapidez, muchas veces nos sorprendemos a nosotros mismos escribiendo estilos inline (aunque sea mala practica) para prototipar algo de forma rapida. Tailwind convierte esa mala practica en algo decente y aunque tiene puntos en contra se pueden solucionar
@@Zokram_Crossam vamos que de serie es exactamente como usar estilos inline style="display:flex" es igual a class="flex" y de simpre estilar inline ha sido mala practica, pero ahora por lo visto no...
No entiendo muy bien esto. Quiero decir, si tu importas Tailwind en un HTML, el navegador esta cargando todo el CSS. Lo que puede reducir la carga como han dicho sería utilizar postcss con algun plugin de eliminación de css que no usa o algo así, pero vaya, corregidme si me equivoco.
Esa forma de usar tailwind es para probarlo, al igual que puedes probar react poniendo el react y reactdom directo en un script-src en el html. Necesitas un build-system como vite para que se encargue de todo el proceso.
Es que Tailwind usa PostCSS por debajo. Detecta qué clases usas en tu HTML y sólo carga las que carga el usuario. Esto hace que cargues sólo el CSS que necesitas.
@@midulive Aaaah, eso tiene sentido jaja
@@midulive y si tengo varias páginas que talvez utilicen diferentes clases css? Es posible cargar un diferente archivo css por página de forma automática con tailwind?
@@leolr111eso se llama carga lazy y sirve para cargar solo la página que el usuario está viendo y no toda la aplicación
Buenísimo
La pagina utiliza tailwind? O tailwind seria una opcion para mejorarlo?
No usan tailwind y tienen mucho css sin usar
@@alvarobencosme5348 entiendo gracias por la aclaración
y sass?
a mi no me gusta, te deja htmls inmensos, con clases toda horrendas que luego no se como encontrarlas cuando tengo que buscar algo,
Lo que pasa es que tailwind usa la metodología de css llamada atomic css, lo cual son clases utilitarias. Tailwind está pensado para ser usados en compañía de otros frameworks basados en el estándar de "componente", lo cual es dejar todo en una sección de código y usarlos en la aplicación con un nombre más corto. En este caso no te quemas por pensar tanto el nombre de las clases, puesto que el "nombre" de todo es el mismo componente
I hate Tailwind...
TailwindCSS para haters xd
Yo creo que estas ideas están MUY a contramano de la actualidad. En 2005, me hubiera encantado optimizar el CSS lo más posible, según la vista que se presentaba y sus recursos. El 3G que andaba cuando quería, las conexiones de 3Mb a 10Mb por el viejo ADSL a traves del cablado del teléfono y tantas cosas que hubieran hecho una diferencia no imaginable en aquella época.
Hoy, cuando menos me venden 100Mb y casi todos andan con 150, 300,500 Mb, si es que encima son simétricos y con la fibra hasta la ficha de tu PC (Y eso que habla de un país tercer mundista como Argentina, no me quiero imaginar por el resto del 1º mundo).
¿De qué me sirve que mi site pese 300kb en vez de 1,5 Mb, si tengo 4G cuando menos, que tiene una latencia inferior a la del ADSL de 2010, y con casi 150Mb de ancho?.
Prefiero meterle un loader-spinner, que espere 1 segundo extra y cargar 'casi todo'. Luego, en un SPA recargo un marco central.
'Casi todo', es todos los recursos que necesitará un usuario promedio (que de hecho, luego con statics se puede afilar mejor). Si luego, necesito recursos extra como cargar un CSS externo y librerías externas tal como Leaflet, lo hará inyectar después.
Hay varias cosas como tables, dropdowns, list, button, switch, etc. que por más que no esté en el primer "form", como por ejemplo un 'switch', de nada me sirve no enviarle los 80kb del switch para ahorrarme diezmil milésimas de segundo.
Pienso todo lo contrario. Hoy tenemos mejores herramientas para cuidar la experiencia de usuario.
Se trata de evitar hacer y enviar cosas innecesarias. Así de sencillo.
Hacerlo porque piensas que “ya tendrá buena conexión” el usuario, además de no ser verdad siempre, es simplemente una cuestión de dejadez y falta de ingeniería de software.
@@midulive
Coincido que hoy, las herramientas están. Lo que justamente digo, es que;
- llegaron 'tarde' y han perdido el sentido.
El usuario no puede percibir si su celular carga 1,5MB o 300KB.
El recurso de ancho de banda, hoy, hasta en países de latino américa el HSDPA+/3.5G, 4G o 5G, son un overkill para incluso webs del año 2010 que están ahí porque el hosting está pago hasta 2035, pero no tiene un byte de actualización.
¿Por qué habríamos de forzar cosas como cuidar el CSS de forma extrema?.
No digo; "no cuidar cargar 99% de clases que no serán usadas JAMÁS".
Como dije al principio, son cosa que no afectan a la experiencia del usuario porque el hardware así como la infraestructura, aún en países de LATAM, están 'overkill' sobre lo requisitos deseables.
Entiendo que el CSS si esté optimizado en su diseño. Que no haya esas herencia sobre herencias con overwrite de propiedades a montones (en eso Tailwind me parece que lo hace más que excelente).
Al procesador resolver ese mal diseño de herencia y dependiendo si es un equipo gama-entrada puede que sí lo vea el usuario y golpee su experiencia.
Pero ¿el tamaño?.
El recorte del CSS por tema de tamaño, me parece más como jugar a los "13KB game challenge" que a diseñar un juego.
Entiendo, que hay cosas maravillosas en esos awards. Al verlas se te salen los ojos si uno ve los challenge de los años pasados pero para la práctica ninguno terminó siendo un juego de cara al público real.
Recortar el tamaño del CSS que recibe el usuario par mezquinar 1MB ó inclusive hasta 2 MB, no le veo el sentido.
El usuario no lo verá, no lo notará y ni siquiera sabrá que tuvo una carga tal.
Entiendo que si por cada vista tuviera que cargar 1,5MB por más que no lo 'perciba' me parece un despropósito si fuera EL MISMO CÓDIGO.
Pero sigo sin ver la ventaja de si cargo un CSS de 1MB en vez de uno uno de 300kb para luego ir cargando el resto en parte.
Si ese 1MB me queda cacheado. Hasta hago que mis siguientes vistas ni se molesten en traerme el CSS.
@@mgbertiaux vivo en España en zona rural y cada Mega que me puedo ahorrar es notable para mi conexión. No todo el mundo tiene buena conexión.
@@code1866 ¿Y se nota?. Mirá que en Argentina, en el Norte, donde muchas veces se toman las fotos que se ven de las zonas muy muy muy pobres, yo he estado hace 5 años y la conexión es fluida. Hay lugares muy particulares en medio de la 'nada' en la montaña que directamente pasas de tener 3.5G/HSDPA+ a no tener ni señal de teléfono. Aún así, en los largos tramos de ruta, la señal no es la mejor pero la conexión hasta permite escuchar radios online. En general, la señal o está o no está, cuando no está es obvio que no carga nada, pero cuando hay señal, una página web que pese 2Mb carga casi al momento. Más aún, si es una web qua ya está cacheada.
¡TAILWIND no es profesional!
OpenAI usa Tailwind. Ah, no deben ser profesionales esta gente.
Nada cambia con respecto a mi declaración.
esto no se puede discutir, el tiempo te responderá
@@jeffwoodyart3255 La palabra clave: tiempo.
Creo que decir que tailwind no es profesional deja muy en duda tu profesionalismo, es como decir que una persona que se moviliza en carro es menos profesional que una que camina 3 horas diarias para llegar a su trabajo