CSS en el 2021 - ¡No utilizarás Bootstrap! | la función CodelyTV 47
HTML-код
- Опубликовано: 7 сен 2024
- Aprovechamos que se acaba el año para ver qué futuro le viene al CSS. 🎨
Además le vamos a echar un ojo a Tailwind, media queries, styled components… ¡Y mucho más!
🔗 Links relacionados
├ 🎨 Estado del CSS: 2020.stateofcs...
└ 🔖 Curso de Arquitectura CSS: pro.codely.tv/...
{▶️} CodelyTV
├ 🎥 Suscríbete: ruclips.net/user/c....
├ 🐦 Twitter CodelyTV: / codelytv
├ 🌶️ Twitter Núria: / nuria_codes
├ 💂🏼 Twitter Rafa: / rafaoe
├ 📸 Instagram: / codelytv
├ ℹ️ LinkedIn: / codelytv
├ 🟦 Facebook: / codelytv
└ 📕 Catálogo cursos: bit.ly/cursos-...
La discusión entre tailwind y bootstrap es justo lo contrario que dice Rafa (creo q se llama así, soy nuevo acá) fue bootstrap el framework que le permitió a todo mundo hacer algo decente para el front, cualquier que hacía backend cuando llegó bootstrap lo recibió con brazos abiertos, gran parte de la base de usuarios de bootstrap no saben mucho de css, y la gente que sabe no está del todo conforme, es bastante discutido, esto también explica el fenómeno de alto nivel de adopción, baja satisfacción. Es una excelente herramienta para los que no saben mucho, para el que sabe está más divida la cosa, en mi opinión personal es un excelente framework para desarrollo ágil, prototipado, pero tiene sus puntos mejorables.
Corrijo, fue bootstrap lo que permitió a quienes desconocen en profundidad css hacer algo decente. Lo bueno de css es que es reutilizable de forma muy sencilla en todos tus proyectos. Ya hoy día con el adelanto que nos ha supuesto SASS, no encuentro sentido alguno a frameworks de CSS donde tengas que memorizar nomenclaturas que puedan pasarse de moda, cuando ésto realmente no te ahorra tiempo de desarrollo si hiciste los deberes creando tus propios prefabs css.
Para producción de webs genéricas o ejemplos, me parece perfecto el uso de tailwind o bootstrap, pero no son lo más indicado cuando buscas escalabilidad y mantenibilidad. Internet está plagado de webs desarrolladas con éstos frameworks css que no se diferencian en nada de caóticas hojas de estilo css puras a lo espagueti.
Si se domina bien css y se usan buenas prácticas, los frameworks css bajo mi punto de vista sobran. Casi siempre se instalan esas pesadas librerías para usar solo unas pocas características de las mismas.
50:04 la cancion es Ruby - Kaiser Chiefs
Acabo de caer en cuenta que este canal lo genial que tiene es que hace parecer que hay gente que le gustan las tecnologías y que es normal hablar de estos temas es genial no sentirte solo en el mundo por tener tentáculos ver otros seres mutantes es genial
Yo uso Tailwind desde que estaba en alfa. Fue amor a primera vista.
Igual compadre.
Me gusta como explica Nuria
Chicos, genial el video! Son muy buenos. Y yo personalmente si estoy contento con bootstrap, pero no con la comunidad y con cómo lo usan en general, la mayoría hace desastre con bs y te dicen "bootstrap theme",... Yo en lo personal lo uso a partir de los scss y creo mi propio theme modificando variables y agregando mis estilos y variaciones, ejemplo: si quiero un estilo particular de btn modifico las variables que entran en juego, y si no es suficiente, creo .btn-custom... Para evitar conflictos. Así no he tenido problemas y hasta puedo actualizar bootstrap.
Estoy estudiando el superior de DAW y en la asignatura de lenguaje de marcas no se da ni de cerca lo que explicáis vosotros, ellos me darán un titulo pero vosotros el conocimiento(|| work) :)
La verdad yo uso CSS puro!! Claro que con Angular que trae ya varios componentes. Pero en la maquetación ahora con grid y flexbox ya no veo necesario un framework CSS. Además con las variables ahora es más fácil
El próximo Día de San Valentín RUclips debería destacar este vídeo
Bueno, y la lección súper adorable y útil también :)
Internet Explorer le da Soporte a Aplicaciones MSHTA Aplicaciones HTML de escritorio de Windows. Si no me equivoco es la forma más sencilla de hacer una App de Escritorio con Html,Css,javaScript,JScript, comandos de Windows etc ...
MicroSoft Hiper Text Aplication?? XD que significa mshta??
Joder disfrute tanto de la quimica que hay entre los dos :D
Entre para ver de que se trataba y lo terminé viendo todo 🤣
ya somos dos jajajaja
Yo entré para verlo todo y terminé viendo de que se trataba
Tres
Excelentes aportes Nuria, una genio sin intención de serlo....
Siento que vengo de la era de los dinosaurios...para ver este vídeo!! XD. Una dura la tía...mis respetos!! En teoría, no uses frameworks css...y es una excelente propuesta!!
Es el primer video que veo de ustedes o de su canal, pero se me ha hecho muy entretenido. Tienen mi like y mi follow.
Lo primero que hay que tener en cuenta es el tipo de proyecto, si el prototipado está basado de verdad en algun framework entonces le veo sentido usar ese framework pero sino, muchisimo mejor NO usar frameworks y picarse uno mismo el código os evitará muchisimos problemas. Por otro lado, el futuro es CSS-in-JS y tema Grid le veo sentido pero aun no veo ninguna librería que lo use así que mmmm cuestionable por la compatibilidad entre navegadores
Primer video que veo de ustedes, muy bueno! Quedé enamorado de Nuria ❤️
xD dios, lo vi entero, que ganas me dan de hacer ese curso de arquitectura
QUIERO MÁS VIDEOS DE CSS!!!!!!
Gran streaming! Por cierto, la canción de Ruby es de Kaiser Chiefs y sí que dice Ruby jeje
Yo uso scss + bootstrap + material design angular en proyecto angular. Y me va de maravilla.para los customs lo hago con scss.
Pensar en cuanto veo el código: "que hago yo aquí", y luego, "ah sí, transformar mi pensamiento en objetos digitales..." ( mientras los seleccionais, sonrío :3) ¡Viva Codely, parser!
Chicos amo sus videos! Son mi compañía en esta pandemia ❤️
Me encantó este duo. Una genia Nuria
Estaba buscando como meter a postgresql en var de entorno, no se desde que carpeta meter en el path y acabe acá, 7am arg me dieron vida abrazo para los dos guapos!
quiero ver este video y entenderle para el 15 de junio 2021.
1a vez que los veo. Muy buenos sus videos gracias. Hasta ahora aprendí que el template de admin que compre (Metronic) usa Tailwind
Tailwind es genial para prototipar, pero para usarlo en un proyecto real no lo veo. Supongo que se pueden crear componentes aplicando o extendiendo.. como @extend en sass, no he usado tailwind, pero en bootstrap me pasa con las utility classes, si abusas mucho, cuando reutilizas un bloque lleno de utility clases y quieres cambiar algo se hace inmanejable, entonces creas una clase custom que extiende a todas esas utility. No sé si entiende.
40:49 Yo no estoy de acuerdo con esta opinion:
Con tailwind puedes generar el CSS a partir de las utility class que estas usando y puedes volver practicamente a CSS puro.
En mi opinion una estrategia para evitar a la vez el problema de exceso de utility classes inline y la mantenibilidad es utilizar clases específicas tradicionales con la directiva @apply. Y dentro de @apply utilzas utility clasees de tailwind sustituyendo CSS tradicional. Esto se pudede compilar para generar CSS puro que quearía estructurado dentro de tus clases y ya estarías de vuelta en un proyecto full CSS. Es lo mejor que aporta Tailwind y sus directivas.
No es un framework restrictivo por diseño como lo ha sido Bootstrap, y creo que su arquitectura va a inspirar cambios profundos en el ecosistema CSS en cuanto a buenas practicas y mantenibilidad.
Es muy facil hacer prototipar con tailwind, organizar con @apply y hacer tree shake a produccion .
Muy buena charla no quiero hacer pensar con este comentario que no se deba opinar de una manera sino que se pueda discutir sobre ciertas practicas o limitaciones :D
Para mi lo único realmente apreciable de tailwind, es el tema de los breakpoints. Da mucha libertad el poder aplicar cualquier especificación css en diferentes breakpoints de pantalla.
Son geniales !!! mas videitos porffaaa. Suerte con todo :)
Me has hecho reir mucho. Pero lo más importante, aprender sobre las nuevas tendencias.
me podrían recomendar una web, para aprender códigos de css, porque muchos los ponemos pero no sabemos exactamente que hacen, ya que no tenemos la preparación suficiente para poder hacerlo bien, se los agradecería mucho!!
CSS tricks es una buena página y con un diseño hermoso 💖
La canción es de Kaiser Chiefs, Ruby
Excelente video es la primera vez que escucho del canal y ya me suscribí... Sigan con más materiales así!!! 😄 😄 😄
Bootstrap, para un viejo como yo que viene del mundo de los sistemas corporativos en desktop y ahora me tire al SAAS, aguante Bootstrap! hehe
bootstrap y material tienen para rato, porque muchos proyectos están hechos con eso
@@javico1127 Y ojala siga por siempre y mejorando, del mundo del que vengo a nadie le importa si es css puro u otra cosa, sino que funcione.
@@DAMusicPY De hecho así es, hay gente que si se fija en eso, cuando en realidad cuando uno comienza a hacer un sistema lo ultimo que hace uno o al menos así lo hago yo es pensar en css :P
Te entiendo, bootstrap es sencillo para pasar de desktop y además puedes customizar y descargar los archivos, así no importa que pasé en el tiempo.
40:46 Por fin algo interesante y con visión.
Pues en pleno julio del 21 la última entrevista que hice me aseguraron que continuaban trabajando con bootstrap.
Bootstrap es menos invasivo y mucho más fácil de personalizar cuando solo extiendes sus mixins.
ew
La unidad ex se refiere al alto de la letra x para la tipografía aplicada. Aquí tenéis un enlace donde explico cómo se puede usar, para obtener un line-height óptimo, sin tener que cambiar el line-height manualmente con cada cambio de font-size:
hugogiraudel.com/2020/05/18/using-calc-to-figure-out-optimal-line-height/
Like por las cortinas de los paquistaní xD
Queremos más videos de CSS porfa
Amé este video, Nuria soy tu fan 😄
Buenísimo! Fan de nuria. Más vídeos de estos ♥️
curioso que hoy julio 2022 bootstrap sigue siendo fuerte y el mas usado en marcos de trabajo de diseño web.
Buen análisis, y aunque la (casi) hora que dura el vídeo no se siente por hacerlo también entretenido (al salirse un poco de contexto), creo que interrumpe demasiadas veces a Núria con cosas irrelevantes, es bueno que el vídeo sea ameno con otros temas, pero no tanto, y sin tantas interrupciones. Felicidades.
la cancion se llama "Brother louie" de modern talking
Nuria ✌️
Queremos atomit!! Gran vídeo muy buen trabajo gracias!!
Muchas gracias por la info que nos dais en cada vídeo...trabajo con vue y uso quasar, que opinión me podéis dar??
Con sass, además de compass se usaba Bourbon
Eeesoooo, qué recuerdos!!
Muy buen video!
Yo soy uno que está muy conforme con Bootstrap, pero usando la versión con JS vanilla.
Los amo
El usuario no siempre quiere lo mismo. Lo lógico es, o bien preguntarle, o bien dejarle elegir.
A mí sí me gusta el tema de Github ah acabo de caer en cuanta es que tengo pantalla oled en el PC debe ser por eso que se ve genial
me encanta el trabajo que hacen, muchas gracias
Es absurdo el initial_letter de Safari... Fav de z-index el 1. Clip-path mola. Media-query para el json. Pdata: A veces utilizo código experimentando, sin tener ni puñetera idea. Buen día beios ;-*
Están muy geniales!! Maaaaaass
Nuria una pregunta he proabdo los tres principales framewoks de js para frontend y me gusatria quedarme con vue seria buena opcion??
Bueno yo creo que que depende mucho del presupuesto no? O sea en Bootstrap puedes hacerlo rápido, poco original pero rápido y si no tienes tiempo ni necesitas algo ultra original pues está bien me gusta tailwind css es genial creo que tiene sus casos puede servir para algo más original que con Bootstrap y mas rápido que css puro
CSS puro es la onda.
Hacer eso ...no es nada práctico además de Google lifehouse los penaliza para todo y SEO, así que está muy bonito usar lo último en CSS pero lamentablemente no hay compatibilidad en algunos navegadores ....
Yo use boostrap y foundation antes de salir de la universidad y un par de años al salir de esta. Pero lo tuve que dejar porque sentia que en vez de ayudarme solo hacia mas lento mi trabajo.
Así es, bsp es bueno para personas que son nivel medio en css, pero conforme vas mejorando y adquiriendo conocimientos, te vas dando cuenta que ciertas cosas se hacen más rápido de otra manera, al final terminas haciendo tus propios códigos.
@@boeck2011 De otras maneras te refieres a css puro?
Súper interesante 😍
uff super video un nuevo suscriptor
y ahora me lo dicen !!!!
Que buen video y página, gracias por los tips.
Muy buen video! En lo personal amo tailwindcss saludos
¿Se puede hacer un propido diseño con CSS? Claro que se puede, si se sigue un "atomic desing".
Genial lo mejor del css
Vamos Nuria, haz la documentación, falta algo bueno jaja
Aguante Nuria :D
Nuria.. no personalizaste los colores de tailwind...
El autor insiste que los personalices... tienes disponibles 5 tipos de grises desde cálidos, fríos y neutro.
tailwindcss.com/docs/customizing-colors#color-palette-reference
Gracias por toda esa información
interesante vídeo y muy ameno
Cada uno puede crear su propio framework
Bueno pues a mi me encanta boostrap
pero me pueden decir, explicar y más allá del "no me gusta"
por que no?
Out of context codelytv: 10:39 al 10:43
Nuria, porqué no les gusta bootstrap? yo lo encuentro muy elegante
CSS de 0 o Bootstrap buena combinación...
Me gustan las propuestas, pero CODELY para Argentina (no se el resto de latinoamerica) esos precios en euros son un poco caros :) las ofertas en ude... son de 10 dolares (todos los meses sacan ofertas).
FreeCodeCamp
Me gusta
He intentado que me guste Tailwind, pero es que me queda más fácil de leer todo si lo meto directamente en una archivo css que ir enguarrando el html, al final no le acabo de encontrar el sentido.
Tema luz **inserte acá gato mostrando dientes**
Hola chicos, codelyTv donde podría escribirles para invitarlos a un evento, para ver si me facilitan un correo para enviarles la info, quizás estén interesados; y aprovecho para felicitarles por ese gran trabajo que hacen, un saludo.
solo al inicio... ahora solo flex :) con js :)
Buenas tardes ¿Qué diferencia hay entre "div" y "grid"?
Gracias
Hasta donde mi conocimiento da, div es una etiqueta de bloque para crear secciones. Una etiqueta div puede tener un estilo css grid y generar divisiones invisibles y acomodar sus child elements como uno desee. Con etiquetas div se pueden generar divisiones pero es más código. Con css grid te ahorras ese tiempo y visualmente queda mejor.
Rarito Vostros si no pinta en safari para una gran población maquera, no existe o pinta con errores ... esperad a Mac. Jaja por eso digo, que Rico sólo hablar sobre lo nuevo.
10:42 a mi me gusta un poco menos negro para mi gusto.
Huele funado xD
Flipa
Al gun libro de css que recomienden porfa son los mejores
No se porque, pero de vez en cuando se escucha un pitido muy muy fino y molesta😅
Hacen podcast? No los he podido encontrar :(
Y que tal esta el W3.CSS ??
Que buen mas de los mismo en vivo delujo
Mierda, bootstrap es lo mas!!!
Bootstrap.min.css
Saquen un tema para Visual studio code como el de jetbrains, esta super bueno .d
line-clamp estaba antes con otro nombre
Me gustaría un curso de postcss