Entonces, conforme voy haciendo, pues voy viendo cómo va quedando y si me gusta bien y si no, pues le doy la vuelta a otra cosa y tal.
Lo primero que voy a hacer, he estado pensando un poco cómo hacer esto y he pensado que para empezar voy a utilizar como un color,
en lugar del blanco, que es como muy típico, voy a utilizar un amarillo más rollo JavaScript y a partir de ahí, pues lo que podemos hacer es ir viendo qué vueltas le damos.
Quiero que sea algo bastante simple y minimalista. Ya sabéis que soy muy fan de hacer las cosas minimalistas porque es muy fácil.
Midu, ¿estás en RTL? No, me he puesto esto a la derecha porque si yo salgo encima de los archivos no pasa nada,
pero si yo salgo, mi muñeco, este que veis aquí, si sale encima del código, pues sí que molesta.
Entonces, lo que he hecho es básicamente poner aquí esto para que en los streams se vea mejor. Por eso he hecho esto, ¿vale?
Vale, pues vamos a empezar con esto, con el tema del color, que aquí estaba pensando, estaba pensando, de hecho estoy pensando una cosa,
en NextDS se puede destilar, ¿ves? O add class name, body add class name, se puede añadir custom class on body.
La verdad es que nunca lo he hecho. Body class, no, pero esto no lo quiero hacer, hombre, eso no tiene bits.
No, con un efecto no, no quiero hacer estas cosas. Body class, esto es una guarrada, esto es una guarrada, esta cover flow, eso es una guarrada.
Yo me imagino que sí que se puede, pero debe ser un rollo, esto tampoco funciona, esto tampoco funciona.
Bueno, a ver, no pasa nada si no se puede, era para evitar justamente hacer un dip aquí.
Era para evitar esto. Pero bueno, por ahora no pasa nada, lo podemos hacer. Siempre se aceptan PRs, así que si en algún momento veis otra forma de hacerlo mejor,
pues mejor que mejor. ¿Vale? Voy a quitar esto por acá. Ah, espera, voy a abrir más archivos, por ejemplo, voy a abrir este que es el index.
Y ahora sí, vamos a quitar esto, vamos a dejar esto por aquí. Y lo que quiero hacer, lo voy a hacer a nivel de app, porque sería como el layout que tendría.
Ahora, vamos a empezar a poner cositas, por ejemplo. Ah, vale, digo, ostras, que no tengo, pensaba que no tenía Tailwind.
Pues nada, lo que os decía, yo estaba pensando más en un amarillo de fondo. Sé que suena muy raro que haya un amarillo de fondo, pero creo que lo voy a probar, ¿vale?
Lo voy a probar, como lo tengo en la cabeza, y si veo que queda muy mal, le doy otra vuelta, ¿vale? No nos preocupemos, no nos preocupemos.
Entonces, dicho esto, esto sería para empezar, vamos a poner también que esto, como mínimo, la altura, como veis, Tailwind para estilar,
empiezan a ser clases así un poco enigmáticas, ¿vale? Pero VG es background, yellow, 400, y aquí, por ejemplo, pues ahora lo que quiero hacer es que
la altura sea todo el viewport, y ya me ha dejado mal. A ver, min, ¿cómo era este? No, max, no, screen, ¿vale? Min, h, screen, ¿vale?
Vale, pues ya está. Además, como has visto, me los ha ordenado. Esto es porque tengo una, tengo como una extensión que me los ordena, ¿vale?
Si ves que cuando guardo cambian de orden, pues que sepas que es esto, ¿vale? Vale, por aquí ya vamos más o menos bien.
Aquí tenemos el header, yo aquí voy a empezar a crear esto, bota las mejores tecnologías del desarrollo web, ¿vale?
Ponemos el h1, vamos a poner que esto tenga el texto en blanco, ¿vale? Y vamos a hacer que esto tenga font-bolt y font-size, vamos a hacerle...
Hostia, ¿sabéis una cosa que me pasa? Que mezclo los... Hostia, pero esto es muy pequeñito, habrá más grande, ¿no?
6xl creo que había, sí. ¿Y más? No sé si hay más, a ver. Sí, 9xl, pues más grande. Vale. ¡Tum!
¿Cómo podemos hacer que esta frase sea más corta? ¿Qué le ponemos?
Bota, bota... A ver, decime vosotros, ¿cómo podemos hacer esto que sea más... más corta?
La extensión... ¿Qué extensión me interesa? La extensión es... Creo que es la oficial de Tailwind.
Tailwind, si buscas Tailwind... Esta, Tailwind CSS IntelliSense, y creo que tengo otra más para el tema de ordenar.
Quita mejores, vale.
Bota...
Del desarrollo web. Vamos a hacerla un poquito más pequeña.
Vale. Bota las tecnologías del desarrollo web.
Vale.
Y esto lo que vamos a hacer, más o menos, lo vamos a centrar también.
Vale. Y esto lo vamos a empezar a poner aquí. Vamos a poner aquí un P. Vamos a poner un Lorem Ipsum, por ahora.
Igual menos, un poquito más corto.
Vamos, más o menos así.
Klasne. Y vamos a poner...
El color tiene que ser blanco, pero no tan blanco. O sea, tendría que ser como...
No sé si hay un tema de opacidad. Sí. Vale.
Pues vamos a poner que tenga un poquito de opacidad.
Más opacidad, que casi no se ve.
Y más grande.
Vamos a ponerlo esto más grande también.
No sé si ponerlo todavía más grande, ¿eh?
Hostia, no es que... A ver si la opacidad hay un 95.
Solo para que se diferencie un poco.
Y vamos a hacerle un pelín más grande.
Y también lo vamos a centrar.
Vale.
Y vamos a ponerle esto, que tenga un margen.
4.
Y vamos a hacer que sea un pelín más grande esto.
Y aquí podríamos poner como...
Decide...
¿Qué tecnología de desarrollo de web son las mejores para tu empresa?
Más o menos.
Más o menos.
A ver, podrías...
WebDev.
¿Lo haces por componentes?
Sí, lo haremos por componentes.
Estamos empezando.
Vota las tecnologías del futuro.
No, pero del futuro no.
Porque vota por la mejor tecnología web.
Vale.
Vota por...
Bueno, es que vota por la mejor tecnología web.
Vota por la mejor tecnología web.
Vale.
Es un poquito más corto.
Vale.
Me gusta.
Bueno, pero el amarillo.
Tened en cuenta que el amarillo va a ser solo un trozo.
Que va a ser la parte de arriba.
Y luego...
Luego, el amarillo no es muy fuerte.
Ya, igual el amarillo es de...
O sea, ¿qué decís?
Que lo hagamos un poquito más oscuro.
El amarillo a lo mejor.
Quería que fuese como el amarillo de JavaScript.
Pero no sé si seremos...
Por las mejores sería.
Porque serán varias, creo.
El amarillo está bien.
Vale.
El amarillo está bien.
¿Cómo lo dejamos?
¿Cómo estaba?
Con el 400.
El contrast ratio va a dar mal en el Lighthouse.
Ya, la verdad que sí.
Tailwind se siente como si llenara style en HTML.
Parece.
Es perfecto amarillo.
Vale.
Lo dejamos así en amarillo.
Venga.
Esto lo vamos...
El header, por ahora, también lo voy a abrir.
Header.
Vamos a dejarlo por aquí.
Uy, ¿qué dice?
¿No puede leer el archivo?
¿Cómo?
¿What?
¿Header?
Ah, pues ahora sí que me lo he abierto.
Bueno, vamos a hacer que el header también...
Vamos a hacer esto.
Header.
Flex.
Vale.
Vamos a empezar también con el header este.
Vamos a poner por un lado...
Vamos a poner, por ejemplo, como si esto fuese el logo, ¿vale?
Vota.dev, que luego ya haremos el logo.
Class name font vault.
¿Vale?
Vamos a hacer el pseudologo, ¿vale?
El pseudologo.
Tu, tu, tu, tu, tu.
Text.xl.
Vale.
Vamos a separar esto.
¿Ves?
Aquí siempre se me olvida.
Space.
Between.
¿SpaceX?
No.
Vale.
Justify content.
Justify.
Between.
Around.
Vale.
Justify between.
Eso es lo que queremos.
Pam, pam, pam, pam, pam, pam.
A ver, porque no es autocomplete.
Full width.
¿Vale?
Esta sí.
Y hemos dicho justify between.
Vale.
Igualmente.
Vale.
Vale.
Porque esto lo tenemos aquí separado.
Y aquí tenemos que ponerle un div.
Y ahora quedaría...
Poco a poco.
Poco a poco.
Hay que ir dándole vida.
Vidilla.
¿Vale?
Bueno, ahora tenemos más o menos esto.
Pero obviamente aquí tenemos que ponerle un max width.
Y le vamos a poner...
Esto que son 576.
Vamos a hacer que como máximo sea de 896.
Queremos que esté recogida la...
La cosa.
Vale.
Y esto además...
¿Veis que ahora me ha salido como más a la izquierda?
Esto lo que queremos es que se quede todo centrado.
Así que en la app...
Aquí también.
Vamos a hacer flex call.
Vamos a hacer que sean columnas.
Justify...
Center.
No.
Eso no es lo que quería.
Esto tampoco es lo que quiero.
A ver, a ver.
A ver que le ha aireado.
Un momento.
Que he quitado esto.
Vale.
Esto se queda.
Vale.
Venga, conle un momento.
¿Qué vas a utilizar para autenticación?
Ya estoy utilizando NextSouth.
¿Vale?
Pues Mobile First no es.
Bueno, que estamos empezando.
Ay, sí.
MX Auto.
Claro, le puedo poner.
Tienes razón.
Muy bien, ¿eh?
Me gusta que estéis ahí atentos.
Muy bien, muy bien.
Cierto.
Claro, más fácil.
Más fácil.
Estaba pensando en centrarlo todo desde el contenedor.
Pero bueno, no pasa nada.
Podemos hacerlo en MX Auto.
Muy bien, ¿eh?
Bien pensado.
¿Y por qué dónde está el SyncIn le pones directamente el botón de GitHub así como en AppVentGIS?
Porque es lo que vamos a hacer.
De hecho, mira.
A ver, estamos...
Tened en cuenta que no está hecho todavía, ¿vale?
O sea, que nos quedan un montón de cosas por hacer.
Pero que sí, que está bien que vayamos diciendo y que vayamos viendo.
Una de ellas es esta.
Que sí que tengo aquí el botón, pero todavía no tenemos...
O sea, cuando está en SyncOut todavía no aparece bien.
Vamos a hacer también aquí en el header esto...
Vamos a hacer que sí que se centre.
Align...
No.
Center...
Una cosa que odio de esto es que muchas veces...
Ahora, ¿vale?
Ahora he centrado esto.
Ahora lo que vamos a hacer con esto también es darle un poquito de espacio con la parte de arriba y vale.
Y luego lo que sería aquí el contenido...
Vamos a ponerle aquí un section, ¿vale?
Para tener como el disclaimer este, ¿eh?
Grande.
Grande y fuerte.
¿Vale?
¡Ostras!
Que lo he puesto dos veces.
A ver, acá dice...
Vota por la mejor tecnología web.
Por las mejores, ¿no?
Las mejores tecnologías web.
Al final es demasiado parecido, ¿eh?
Vota las...
Vota por los mejores...
Vota los mejores del desarrollo web.
Algo así, ¿no?
¿Qué os parece más...?
Vota lo mejor del año.
Ya, pero lo mejor del año es demasiado...
En estos 30 minutos se ha aprendido más que un semestre de carrera.
O sea, joder, pues mira que todavía lo único que hemos estado haciendo es más bien como estilar.
O sea, tampoco estamos haciendo nada del otro mundo.
Vale.
Esto lo tenemos que...
Lo tenemos que bajar bastante, ¿eh?
Esto...
Vamos a ponerle aquí...
Classname...
MT20...
Vale.
Más.
40.
Vale.
Por ahora vamos a dejarlo por aquí.
Más o menos.
¡Ay!
Que ese no existe.
Ese no existe.
48.
Venga.
Vamos a dejarlo por ahora, sí.
Luego ya iremos...
Luego nos iremos encontrando problemas.
Seguro que van pasando.
Pero bueno.
Mira, el votadev este además, para que quede más claro que es el logo.
Vamos a ponerle esto de votar.
Y ya está.
Votar.
Ponlo.
Que no me lo pone.
Me lo ha puesto donde le ha dado la gana.
Ala, ahí lo tienes.
Votadev.
Vale.
Vale.
Vamos en ello.
Vamos en ello, ¿eh?
¿Qué más?
Está quedando genial.
Bueno, o sea, acabamos de empezar.
Webtechpool.
Vota los mejores desarrollos web.
Vota por lo mejor de la web.
Es que lo mejor de la web...
Vota tecnología web top.
¿Queréis...?
A ver, ¿vota los mejores del desarrollo web?
Yo creo que ya está bien, ¿no?
Vota por la tecnología presente.
Vota por tu futuro.
Joder, eso parece ya de política, ¿eh?
Eso parece política.
Vale.
Vota lo mejor de desarrollo web.
Y aquí, un poquito más abajo, lo que podemos hacer...
Eh...
Tete, tete...
Desarrollo web.
Decide...
Con...
Eh...
Decide...
¿Cómo podemos decir?
Decide...
Decide...
Los ganadores del año...
Eh...
¿Qué tecnologías y frameworks?
Decide...
¿Qué tecnologías y frameworks han sido los mejores del año?
Bueno...
Cada voto...
Cada voto...
Cuenta.
¿Vale?
Y esto, en realidad, tenemos que ponerle un max width más pequeño.
Porque lo que queremos, en este caso, es que sea bastante...
Tu, tu, tu, tu, tu, tu...
Sea bastante chiquitito.
Igual nos hemos pasado un poco.
Max width LG.
¿Vale?
Y esto lo vamos a centrar también.
Y vamos a darle más separación todavía.
Vale.
A ver.
Estamos en modo todavía...
Empezando, ¿eh?
Vota las mejores tecnologías web.
¿Cómo el curso del teclado se mueve tan rápido?
Porque va solo.
Va solo.
¿Vale?
JQuery está muertísimo, pero lo pondremos, ¿eh?
Decide qué stack.
Ah, qué stack.
Decide qué stack.
Vota los mejores desarrollos web.
Decide qué tecnologías y frameworks han sido los mejores del año.
Cada voto cuenta.
¿Qué stack tecnologías y frameworks?
Creo que podemos poner los tres, ¿no?
Todavía tengo dudas, ¿eh?
Sobre el tema del color de fondo, ¿eh?
No sé si...
Es que el amarillo este igual es demasiado amarillo.
Es demasiado amarillo.
Bueno, si fuese un más azul, ¿sabes?
O más oscuro.
Pero claro, es que qué color podríamos...
Lo quería hacer así para que tuviese como un color muy característico.
Pero bueno.
Vale.
Más o menos podemos ir siguiendo mientras.
Y luego ya me pongo con esto.
Porque es que es verdad que esto...
O sea, el contraste, esto no pasa en lo de contraste ni en broma.
Oye, me da mucha rabia que no se pueda mirar el tema del contraste si no tienes un valor aquí.
Esto es una cosa que creo que debería mejorar la gente de Chrome.
Vale.
Tenemos lo de iniciar sesión.
Esto al menos por ahora funciona.
Vamos a ver.
Y ahora nos faltaría esto, ¿vale?
Pues vamos a arreglar un momento esto y ya está.
Es amarillo muy JS.
Ya, pero...
Las letras pueden ser negras.
Es verdad.
Podríamos hacer que las letras fuesen mejor negras, ¿no?
Para que se pareciese mejor al tema de...
Que se pareciese al logo de JavaScript.
Porque el logo de JavaScript...
Lo que pasa es que JavaScript tiene como dos colores.
Este amarillo y tiene otro amarillo.
Tiene como dos colores.
Tiene dos colores.
JavaScript, logo, color.
Tiene como uno más...
Este es como más amarillo fuerte.
Debe ser este, me imagino.
Que es este color.
A ver, creo que lo podemos...
No sé si lo sabéis, pero en Tailwind se puede hacer.
¿Es la página oficial de JavaScript?
A ver.
Podríamos seguir un poco el estilo de JavaScript.
La verdad es que eso estaría bien, ¿no?
No sé si este color...
Y al final lo que podríamos hacer...
Lo que podremos hacer es que sea todo eso amarillo.
Pero vamos a poner en esta parte de aquí abajo...
En esta parte de aquí abajo...
Mira, lo voy a dibujar.
O lo voy a dibujar.
Mira, mira, mira.
Mira lo que voy a hacer.
Aquí abajo vamos a hacer...
Una...
Como una cosa así que sobresalga y que tenga sombra, ¿vale?
Y aquí que tenga cositas.
Aquí es donde vamos a tener las cositas.
¿Vale?
Y va a tener como una sombrita y tal.
Entonces...
Y eso será blanco.
El fondo ese será blanco.
¿Vale?
No sé si hacerlo en un momento para que lo...
Letra negra mejor.
Hace una votación.
Del amarillo.
A ver.
Vamos a probar un momento con el...
Con el negro.
Que sería aquí black.
Y aquí también sería black.
Hombre, yo creo que mejor en negro, ¿eh?
Yo creo que mejor en negro, ¿eh?
Sí, sí, sí.
Tienes razón.
Tienes razón.
Cuando tienes razón, tienes razón, ¿eh?
¿Por qué tiene que tener vota en el texto principal si ya entiende que va a de votar la web?
¿Vale?
Pues, ¿qué le ponemos en lugar?
Sí, ¿no?
Mejor negro, ¿no?
Y es más JavaScript todavía.
Estoy de acuerdo.
Estoy de acuerdo.
Cuando tenéis razón, pues tenéis razón.
Y yo lo único que puedo decir es...
Tenéis razón.
Eso es todo lo que puedo decir.
Pero no os acostumbréis, ¿eh?
A tener razón.
Tampoco es eso.
Tampoco es eso.
Sí, si no, es lo que dice Iván L'Olivier.
Podríamos poner aquí en el extend.
Podríamos poner un color en concreto.
Colors.
Podríamos poner...
¿Se pone así directamente el color?
Creo que no, ¿no?
Creo que...
Bueno, aquí ha puesto Iván que pone brand y luego el default y el color.
Tailwind Extend Colors.
Customizing Colors.
Vale.
Vamos a ver cómo...
A ver que no hace falta que sea el amarillo exactamente de...
¿Sabes?
O sea, aquí podemos poner Colors.
Colors.
No hace falta que sea Colors y poner el de JavaScript.
O, bueno, puedo ponerle JS.
¡Hostia!
¡Hostia!
¿Ha puesto el color correcto?
¿Ha puesto el color correcto?
Estoy flipando.
No.
¡Se lo ha inventado!
¡Qué cabrón!
¡Se lo ha inventado!
Ha dicho...
Bueno, yo más o menos...
Más o menos va por aquí.
¡Hostia!
Sí, saco el dibujo.
Perdónate.
Perdónate que he dejado el dibujo, ¿eh?
Sí, será multidioma, ¿eh?
Que también lo hacemos.
Sí, perdónate.
Perdónate que lo había dejado.
Me estaba emocionando con el tema este.
Vale, vale.
Entonces, se supone que con esto...
No sé si esto hay que volver a hacerlo y tal, pero entiendo que luego ya podemos hacer esto
y hacer aquí que el VG...
No sé si lo tenemos por aquí.
El VG, pues en lugar de Yellow 400 sea JS.
Y esto debería ponernos ahora aquí el color...
Ah, mira.
Pues este es el color de JavaScript.
¿Qué os parece?
¿Qué os parece?
¿Os gusta más este?
Este es el color de JavaScript.
Literal.
Se supone que es el oficial.
Me parece bien.
Vale, pues dejemos este.
Me gusta.
Os gusta.
Pues ya está.
Vale.
Pues dejemos ese.
Vale.
Vamos a poner...
Entonces ahora...
Yo creo que es verdad que se ve bastante mejor.
Y creo que esto puede hacer que podamos ver esto.
Y aquí vamos a hacer que esto...
Vamos a poner...
Aquí...
Vamos a poner ya...
Mejor framework.
Por decir algo.
¿Vale?
Y aquí habría que votar diferentes opciones.
Tendríamos React.
Teníamos React.
Esto sería Vue.
Esto sería por decir algo Angular.
Yellow JS.
Venga.
Es que no le puedo poner un guión.
No se le puede poner un guión.
Tendría que ser así, ¿eh?
Yellow JS.
Que alguien ha pagado para que pongamos...
Que amarillo se llame Yellow JS.
Pero no se le puede poner...
Bueno, a ver.
¿Lo podríamos poner?
No sé si esto funciona.
Mira.
Así aprenderemos algo nuevo.
Yellow JS.
Pues sí.
Sí que funciona.
Con guiones.
La primera vez que lo pruebo.
Vale.
Pongamos que tenemos esto por aquí.
Entonces.
Aquí vamos a tener un max width también.
Rollo así.
Con mix auto.
Rounded.
Vamos a ponerle...
Rounded.
Tampoco hace falta que sea mucho.
Y esto vamos a ponerle que el...
Ah, porque esto ya es el section.
Vale.
Vamos a hacerlo un poquito más grande.
Un poquito más grande.
Vale.
Un poquito...
Un poquito más grande.
Tiene que ser más grande.
O sea, tiene que ser como lo de arriba.
Un poquito más pequeño.
Vale.
Y vamos a poner un top así bastante bestia.
Menos bestia.
Vale.
Y vamos a ponerle por ahora un...
Una altura bastante grande.
Más que nada para ver cómo va quedando.
¿Vale?
Luego ya le...
Ah, no.
No me deja ponerle.
Ah, sí, sí.
Vamos a poner esto.
Ah.
No.
No.
Sí, sí, sí, sí.
Vamos a ponerle esto.
Solo para que siga hacia abajo.
¿Vale?
Poco a poco.
Poco a poco.
Vamos a ponerle el padding también.
Padding.
Vamos a ponerle 4.
No.
Padding tiene que ser más.
Vamos a ponerle un padding bastante generoso.
¿Vale?
Y ahora...
Incluso menos, ¿eh?
Algo así.
Pues esta es un poco la idea, ¿eh?
De...
¿No?
Que quede como muy limpio.
Quiero que sea como muy minimalista.
Y que aquí, pues tú vayas bajando.
Y que vayas viendo las votaciones.
Lo que tienes que hacer.
Vota a los mejores desarrollos web.
Guapo 10, 10, 10.
Joder.
Ya estamos empezando, ¿eh?
Ya veréis que le daremos muchas vueltas y lo iremos mejorando.
Pero esto es un poco el proceso que yo hago.
El ir haciéndolo poco a poco, ir haciéndolo minimalista.
Así empecé las Benji.
¿Sabes?
Como un poco las ideas.
Y luego, pues bueno, no.
A ver, cambié muchas cosas luego al final, ¿vale?
O sea, al final tampoco es que se quede exactamente así.
Pero bueno, ya iremos dándole cañita.
Cuando hagas scroll puede tener un efecto parallax.
Bueno, podemos hacerlo más adelante.
Vamos.
¿Te cambiarías de hacer web a hacer mobile?
Pues sí.
Me da más dinero la Valdi.
De hecho, me gustaría.
¿Qué tipografía estás usando?
Estoy usando la del sistema.
Seguramente tendremos que poner la de Inter.
¿Para qué se suele utilizar esa altura con divisor?
No sé qué altura de...
¿Qué altura dices?
The Best Stack Web 2022.
Ah, bueno, pues mira.
Eso tampoco está mal, ¿eh?
Lo que pasa es The Best.
Es que no es una llamada a la acción.
Tenemos que llamar a la gente.
Yo cambiaría los mejores por las tecnologías.
Vota las tecnologías del desarrollo web.
¿Vale?
Las tecnologías del desarrollo web.
Lo que pasa es que queda un poco largo, ¿eh?
Queda un poco largo.
Vota las tecnologías del desarrollo web.
O sería más decide...
Bueno, a ver.
Vamos a dejar esto por ahora.
El tema del copywriting.
Ya le daremos una vuelta.
No pasa nada.
No pasa nada.
O sea, lo podemos ir cambiando.
No pasa nada.
Profe, ¿por qué Tailwind lo consideran bastante complejo?
No lo he usado, pero donde sea que leo expresan eso.
No es complejo.
De hecho, tampoco es tan difícil.
Tampoco es tan difícil.
Lo que sí que...
Bueno, pues no es complejo.
Es que te hace la lectura...
Te la puede hacer compleja.
Entiendo que van por ahí los tiros, ¿eh?
Yo entiendo que pueden ir por ahí más los tiros.
Vale.
Entonces, sigamos un poco en este...
Sí.
El copy ahora mismo es lo de menos, ¿eh?
Lo que sí que me gustaría...
A lo mejor este bota...
No sé si puedo ponerle...
Un font bolder.
No.
O sea, esto tiene...
Ay, ¿qué ha pasado ahí?
Ah, es que este...
Qué cabrón.
¿Cómo es esto?
Extra bold.
Creo que iría más por un extra bold.
Porque si no, ¿qué sería?
Bold, semi-bold...
Está, bold, semi-bold y extra-bold.
O, ¿cómo era?
Black.
Font black.
Black es la más.
Yo creo que un extra-bold, ¿eh?
Le puede quedar bien.
Hostia.
Font.
Extra-bold.
Extra-bold.
Bolder, extra-bold.
Creo que era.
¿No?
Pues creo que le puede quedar esto bien.
No sé.
Yo ahí ya tocando.
Bold está bien.
Vale, lo dejo...
Extra-bold o bold?
Venga, os hago una encuesta, va.
Os dejo una encuesta, va.
La fuente debería ser...
Bold.
Extra-bold.
Dragon-bold.
Venga.
Ahí lo tenéis.
Semibold no, semibold no puede ser.
Esta tiene que ser bold, seguro, ¿eh?
Tiene que ser bold, fijo.
Vale.
Venga, vamos a seguir un poco para ir dándole identidad.
Vamos a arreglar esto para que vaya quedando con cositas bonitas.
Por ejemplo, en OpenGS...
Ah, mira, Freak.
Freak, Freak dice extra-bold.
Ya.
Freak, Freak ha votado ya por ello.
¿Veis?
Esto había quedado bastante bonito.
No sé qué opináis, pero a mí me gustaba, así que me lo voy a ir a copiar.
Vamos a ir al OpenGS.
OpenGS...
Ah, no, que claro.
Bueno, no pasa nada.
No os iba a decir que no podéis ver el repositorio.
O sea, el repositorio está privado.
Pero bueno, lo podemos ver juntos.
Vale, a ver.
No, no pasa nada.
Components.
Nap user...
Nap user profile.tsx.
Vale, me lo copio.
Ahora esto se va a quejar de todo, obviamente.
¡Ay, que petó algo!
Hostia, lo siento, eh.
La luz.
¿Petó la luz?
Volví, volví.
¿Qué pasó?
¿Que petó por algo?
Hola.
Hola, estoy aquí.
Estoy aquí, estoy aquí.
Apaga la VPN.
Si no, tengo la VPN puesta.
De hecho, me parece...
Pone aquí que va todo súper bien.
No sé si es un tema más de...
Me du volvió.
Estoy aquí.
Estoy aquí.
Perdónate.
Cierra el browser.
¿Qué browser?
Si no le echo yo nada al browser.
¡Ay, hostia!
Mira este, que se ha quedado aquí penchado.
Estaba ahí...
Ya está.
¿Ya está?
Vale.
Perdónate.
No sé qué ha pasado.
Ha habido un apagón de un minuto.
Qué raro, ¿no?
No sé, necesito un nuevo ordenador.
Necesito un nuevo ordenador ya.
Vale, vamos a comprar, iba a decir.
Vamos a instalar el Headless Suite.
No sé si sabéis qué es esto.
Bueno, es Headless UI, como debería ser.
No sé si conocéis...
No sé si este es mejor.
Twitch ha petado un poco.
Vale, vale.
Yo no he sido entonces.
Ha sido Twitch.
No sé si probar Radix.
¿Habéis probado Radix?
Yo no he probado nunca Radix.
Y me han dicho...
Me han hablado súper bien de Radix.
Pero como no lo he probado nunca...
Bueno, también es verdad que nunca había probado Radix, Headless, CSS...
Primitives, Radix UI.
Ahora todo ok.
Vale.
Genial.
Gracias.
Usa Redux.
A ver, Redux.
Sí, voy a usar Redux.
Que no tiene nada que ver.
No.
A ver.
Este Headless UI...
Hostia, no sé qué le pasa.
Que se me quedan pinchadas las webs.
Se quedan como pensando de rato.
Vale.
Headless UI, para el que no lo sepa, lo estaba utilizando para el tema del menú.
Headless UI es como unos primitivos en los que al final tú no tienes la parte visual,
sino tienes la parte funcional de la UI.
Por ejemplo, para hacer un drop down, toda la gestión del estado, de darle click, no sé qué.
Y los componentes que tendrían esta lógica, lo tendrías todo arreglado.
¿Vale?
Y entonces tú lo puedes estilar como tú quieras.
Que está bastante bien.
Y entiendo que este Redux, ves que pone...
Why waste time reinventing UI components.
Y dale con lo de Daisy.
Pero es que Daisy son visuales.
O sea, Daisy no es lo mismo.
Daisy son componentes ya visuales que están hechos.
Y no quiero tener...
No quiero que estén hechos.
¿Entendéis?
Una cosa es Chakra o Daisy.
Pero esto lo que son, son componentes que ya están hechos visualmente.
En el cambio, Radix o Headless UI no están hechos.
Son más...
Son solo la funcionalidad.
¿Ok?
Son cosas distintas.
No es lo mismo.
Y de hecho no quiero...
No me gustaría tener que ponerme aquí a meter este tipo de cosillas.
Si lo puedo evitar, lo voy a evitar.
La verdad.
Tanto utilizar Chakra y Daisy y estas cosas.
Entonces.
Porque quiero que...
Prefiero que se parezca más a Tailwind.
Y que yo lo pueda maquetar y tal.
Que no que se parezca demasiado a algún tipo de catálogo de componentes.
Que ya haremos alguno con el catálogo de componentes.
Tengo un proyecto pendiente con NextUI.
Que lo quiero hacer.
Así que...
Mira.
NextUI.
Que es de nuestro colegi.
Y este lo vamos a utilizar para el proyecto de MNADEF.
Os lo prometo que lo vamos a hacer.
Que además tiene un montón de componentes por aquí.
Y cada día que vengo a verlos, tiene cada vez más.
¿Vale?
Diría Headless más enfocado con trabajar con Tailwind.
Bueno, Radix también.
O sea...
Por ejemplo.
Mira.
Dropdown menú.
Este sería.
A ver.
Voy a instalar Headless.
Porque al final...
Así me puedo copiar el App en GS.
Y ya está.
Mido.
¿A ti qué te parece el hecho de que...
Ves lo que pasa con los paquetes que se instalan con Caret?
¿Vale?
Que los carga...
Los carga el diablo.
Así que no lo hagáis con Caret.
Vale.
Esto ya lo tenemos.
Ahora el Use User este.
¿Esto cómo lo hemos hecho?
Esto del usuario.
¿Cómo sabemos que tenemos usuario?
Buena pregunta, Miguel.
O sea, esto...
Esto de que estés logueado y tal.
¿Cómo...?
Esto lo tenemos que saber de algún sitio, ¿no?
Pues tenemos aquí el Session Provider.
Y aquí en el UserOlet...
Vale.
Teníamos el Use Session.
Vale.
Use Session.
Que esto viene del...
Vale.
Pues esta información es la que vamos a traer con el...
¡Ay!
Esto aquí no es.
El Use Session.
Aquí tenemos el Profile.
Nos traemos esto.
El Sync Out.
¿Puede ser?
¿Puede ser?
Sí, sí, sí.
Que lo necesitamos.
Todo esto entiendo que no lo necesitamos.
El Chevron Icon este lo vamos a dejar por aquí.
El Use Session nos lo traemos por acá.
Vamos a ver qué más tendríamos por aquí.
El Owlet.
Vale.
Si está Loading con el Loading Icon.
Esto me parece bien.
Vamos a hacer esto.
Vale.
Lo Loading Icon lo tenemos que importar.
Vale.
Esto hasta aquí bien.
Y si el Status...
Ya es que lo tenemos.
O sea, tendría que ser Authenticated.
Entiendo.
Authentic...
A ver si lo rellena.
No.
Vale.
No lo rellena.
Vale.
Si es Authenticated.
Y si no.
Por si acaso.
Vamos a poner que esto sea un Null.
Por si acaso.
Vale.
Esto del Picture y todo esto lo vamos a traer por aquí.
Vamos a mover todo esto.
Esto es porque estoy básicamente recuperando la información de la sesión.
Y esto lo vamos a enseñar.
Ahí está mi configuración de Slim funcionando.
Estoy orgulloso de mi primera PR.
Qué grande, hombre.
Muy bien, muy bien.
Felicidades.
Gracias por participar.
Vale.
User, Username.
Vale.
Ahora tenemos que ver...
Porque todo este Handle Logout, todo esto no lo necesitamos.
Solo llamamos al Singout este.
¿Dónde está Handle Logout?
Vamos a llamar al Singout.
Hostia.
On Click.
Ah, bueno.
Es que esto...
Esto no le gusta.
No le gusta.
Porque esto tendría que ser Handle Click.
Esto tiene el evento.
Recordad que estamos utilizando...
Estamos utilizando TypeScript.
Entonces por eso se me queja.
¿Vale?
¿Qué es Caret?
¿Qué es Caret?
Pues es básicamente el simbolito que te han puesto por ahí.
¿Vale?
Eso es el Caret.
Vale.
Entonces sí que Handle Sync Out.
¿Vale?
Vamos a poner Handle Sync Out.
Para que cuando hagamos click en ese botón pase eso.
Hasta aquí bien...
¿Este es su VG?
¿Qué será?
¿Y por qué lo puse aquí?
Vamos a intentar...
Ahora intentaré mejorar un poquito.
Voy a intentar mejorar un poquito el código.
O sea, este tipo de cosas lo extraeremos.
Lo haremos un poco mejor que el AppGIS.
Que le estamos dedicando un poco más de tiempo.
Vale.
En la sesión...
Esta información que tenemos aquí de la sesión...
¿Qué tenemos en la sesión?
¿Sabes?
Porque deberíamos tener sesión...
En el User Outlet...
Sesión.user.
¿Vale?
Sesión.user.
Bueno, vamos a poner User directamente.
Ah, porque esto le venía por aquí.
Bueno, a ver.
Tiene sentido porque...
Estoy pensando en una cosa.
Bueno, por ahora voy a quitar.
A ver.
¿Qué es lo que estoy pensando?
Lo que estoy pensando es que...
Aquí este Sync In...
No sé qué.
¿Veis que se le pasa la información?
En lugar de estar todo el rato...
A ver.
Ni Prop Drilling ni Magic Hook.
¿Vale?
Es como un término medio.
En el que al final lo que podríamos hacer aquí también...
Es utilizar este AppUserProfile y pasarle el usuario.
Entonces...
Que con Props pueda funcionar.
Sin necesidad de utilizar un Hook mágico y todo esto.
Así que vamos a darle cañita.
¿Vale?
Vamos a darle cañita.
Y lo vamos a hacer justamente por...
Es que creo que tiene más sentido.
¿Por qué?
Porque este status y todo esto al final ya lo estamos manejando aquí.
Tampoco tiene mucho sentido.
¿Cómo que nuestro?
¿Qué pasa con el nuestro?
¿Qué ha pasado ese con el nuestro?
¿Cómo protegen las páginas de Snacks Out en caso de que no esté logueado?
Buena pregunta.
Lo miraré.
Lo veremos.
Aunque no lo necesitemos como tal.
Pero lo veremos.
Tienes una...
La posibilidad de...
En el GetServerSiteProps.
Puede justamente hacer que chequee si tiene sesión.
¿Vale?
Si nos vamos a Next Out.
Si nos vamos a la documentación.
Veremos que hay un método.
En el...
Provide Desconfiguration Client API.
Creo que aquí.
¿Vale?
Este sería el Hook.
Que esto sería en cliente y servidor y tal.
Y...
RequireSession.
¿Ves?
Mira, aquí tendríamos RequireSession.
Bueno, esto sería para el cliente.
Porque veis aquí.
Unaauthenticated RequireTrue.
Esto lo que quiere decir.
Es que si no está autenticado...
O sea, ¿sabes?
Esto sería...
RequireTrue significa...
Vale.
Si el usuario no está registrado o autenticado.
Pues aquí lo puedes...
Le puedes enviar a donde tú quieras.
Pero...
También lo que puedes hacer.
Aparte de esto.
Porque esto lo he visto yo.
Es esto.
¿Ves?
Tú lo que puedes hacer es...
El nombre de la página.
Le pones .auth.
Y le puedes decir...
Vale.
Si no está autorizado...
Pues que a esta página.
¿Vale?
O sea, tú ya le puedes enviar esto.
Ahora, que para que esto funcione...
Que aquí no lo pone...
¿Ves?
Tienes aquí como un componente...
Auth.
No, pero ese no es.
Que no estén...
Because of how...
Get session...
Espérate.
Vamos a verlo.
Session provider...
Pues aquí no está, ¿no?
Pues yo lo he visto.
Bueno, lo veremos.
Le echaré un vistazo y lo vemos.
Porque no parecía muy difícil.
Lo vi en algún momento...
Y no parecía muy difícil, ¿eh?
Y se podía hacer...
Se podía mirar si tenía la sesión directamente...
Y creo que está aquí.
O sea, este get session.
¿Ves que pones server site?
Yes.
Pues tú puedes hacer este get session...
Y lo puedes utilizar...
En las llamadas de la API.
Lo puedes utilizar también en las páginas.
Entonces...
Mira, pero que...
Puedes hacer un get session...
Y al final...
Con esto ya sabría realmente...
Si el usuario está logueado o no está logueado.
Y...
Ahí pues dirías...
Pues voy a redirigirlo...
O no lo voy a redirigir.
Y ya estaría.
¿Vale?
No le gusta que le hablen de Redux.
A ver, tampoco es que no me guste.
Como tal.
Que sí que me gusta.
Pero que tampoco...
No sé.
Tampoco hay que darle tanta importancia al tema.
Vale.
Venga, sigamos amigos.
Vamos con ello.
Que esto si no, no lo vamos a sacar nunca.
Y eso no lo puedo permitir.
Venga.
Vamos a darle aquí.
El user.
Le podemos pasar el de session user.
Aquí se supone que ya tenemos sesión del usuario cuando mostramos esto.
Este nap user profile.
Esto lo quitamos de aquí.
Import.
Nap user profile.
From.
Nap user profile.
Jsx.
Creo que esto hay que quitarlo.
Hostia.
Vale.
Tsx.
Nap user profile.
Nap user profile.
Vale.
Y aquí lo tenemos que exportar.
Vamos a exportarlo así.
De forma nombrada.
Y hacemos que esto se le pase por props.
¿Vale?
Vamos a poner que esto sea Lenny mismo.
Luego ya le daremos una vuelta.
El use session este ya no lo necesitamos.
Y vale.
Con esto ya estaría.
Tanto tema loading y todo esto no lo necesitamos.
Porque al final eso ya lo estamos haciendo en otro componente.
Así lo simplificamos y le quitamos cosas.
Que si no este componente como que tiene que saber demasiadas cosas.
Y creo que tampoco tiene mucho sentido.
Vamos a ponerle aquí un console log del user.
Más que nada para acordarme la información que tenemos disponible.
Y de esta forma ahora sí deberíamos.
Bueno.
Tengo que iniciar sesión otra vez.
Vale.
Está roto.
No pasa nada.
Es correcto.
Porque seguro que está mal lo que he puesto.
Lo importante es que este objeto tiene tanto el email como la imagen.
¡Hostia!
Tiene una imagen directamente.
Vale.
Y tenemos el nombre.
O sea que en lugar de username.
Mira.
La imagen.
O sea.
Perfecto esto.
Mira.
Tenemos aquí.
El name y el image.
Y como tal.
O sea.
Tenemos el name y el image.
Pero el email no lo necesitamos.
El image podría ser el picture.
Mira.
Esto fuera.
Vamos a poner aquí image.
Vale.
User.username.
Pa, pa, pa.
Esto estaría bien si el nextAuth este lo pudiera.
¿Sabes?
O sea.
Si esto se pudiera.
Bueno.
Porque lo que tenemos que hacer es.
User.
NextAuth.
User.
Es que no me sé cuáles son los.
Klein.
Handle.
User.
NextAuth.
Es que no sé si tiene un tipo.
Si no.
Lo haremos.
O lo buscaremos.
Pero estaría bien que tuviese un tipo.
Y entonces ya sí que tendríamos el autocomplete.
Que sería la.
Vamos a poner.
Unknown.
Vamos a poner.
User.
Unknown.
¿Qué le pasa?
Can't find.
Ant.
¿Cómo que ant?
Ah, vale.
Property name.
Does exist.
Vale.
Venga.
Vamos a poner por ahora.
Name string.
Image string.
Ya lo.
Lo haremos con un tipo mejor.
¿Vale?
Pero al menos por ahora.
Para que tengamos autocomplete.
Esto fuera.
Vale.
Y aquí.
Ta ta ta.
Luego le haremos la interfaz.
Si hace falta.
Y la pondremos por ahí.
El loading icon.
Lo quitamos también.
Fuera.
Y ahora.
Si volvemos a nuestra página.
Ahora ya tenemos esto.
Mucho mejor.
El chevron este.
Además.
Que pone text gray.
No sé qué.
Entiendo que esto.
Si le ponemos esto.
Ya lo tendríamos.
Bueno.
Bueno.
Bueno.
Vale.
Algo hemos avanzado.
No se puede decir.
¿No?
Eso.
Una interfaz.
He dicho una interfaz.
¿No?
Antes.
No he dicho.
No he dicho la interfaz.
¿Te gusta el mobile?
Bueno.
Poco a poco.
Bueno.
Lo importante es que ya tenemos esto.
Y además tendríamos lo de cerrar sesión.
Con esto debería cerrar la sesión.
¿Vale?
Y con esto debería iniciar la sesión.
Lo que no me gusta es que no salga un loading o algo ahí.
Cuando le damos al botón.
Pero bueno.
Vale.
Gracias.
Gracias.
Chavimon.
¿Qué me ha pasado esto?
Pero.
Adapters.
Adapters.
Ta ta ta.
Sí.
Pero no sale.
O sea.
Lo que quiero es el tipo del.
Este.
La interfaz del user.
Gears on the more common interface.
No sé qué.
User.
O sea.
Es user.
Literalmente.
Pero antes la he buscado.
Y no.
No.
No.
No.
No.
No.
No.
No.
No.
No.
No.
No.
No.
No.
No.
No.
No.
No.
No.
No.
No.
No.
No.
No.
No.
No.
No.
No.
No.
No.
No.
No.
No.
No.
No.
No.
No.
Gracias.
Gracias.
Gracias.
Gracias.
Gracias.
Gracias.
Gracias.
Gracias.
Gracias.
una pr y lo arregla y le quita el tipo y ya está porque si no vamos a estar aquí peleando con esto
a seni no no vamos a hacer eso es la seni ya está la idea de prisma no pero a ver el tipo
que estamos utilizando aquí no tiene sentido que sea el de prisma porque el tema es que este
property y ves name null and define para recaer en type user es que este type user no puede ser
el de prisma si no se lo he dicho en ningún sitio que es el de prisma de hecho lo que le he dicho aquí
es que este es el de él debería ser el de next out no ves aquí este es el de user next out no es el
de prisma de hecho si vamos aquí al user bueno veo que no tiene ninguno default user así que tiene
aquí en stream pero es que entonces este no es el que está devolviendo exactamente el mismo no entonces
es que este este user no es el mismo porque el que me está devolviendo en la sesión no tiene ese
o sea está mal el tipo de este este no es el tipo correcto entonces que queremos sesión
sesión y user sesión
options state sesión
no
a ver vamos a entrar mutuo sesión record default sesión ves es que no está tipado es que no
está tipado que cabrón o sea no tiene su propio tipo o sea que tenemos que
como que no existe o sea tenemos que mirar si existe si no está si ella está así
sabéis que no
ya me pelearé
mejor luego me decís para extraerlo sí sí ya lo puedo extraer lo puedo extraer así pero entonces
como es opcional pues entonces aquí me dice que no existe en el tipo porque como puede ser nulo
undefined pues entonces no lo extrae y ya está pero bueno me da igual que no
deja de quejarte ya con el tema
o sea el tema es que molaría que estuviese mejor tipado esto porque al final tienes que extraer en
la propiedad de la sesión para el usuario porque usuario no es el mismo usuario que el otro usuario
pero bueno da igual ya está si lo de sacar el user ya lo estamos haciendo aquí
de la sesión o sea que aquí ya se estaba haciendo
bueno ya ahora ya está bien vale porque básicamente lo que estamos haciendo es que si user es un define
pues le ponemos un objeto a ver porque hace esto está escrito todo esto lo hace para que al final no te pete el código
lo cual está bien vale o sea al final lo que hace de taiskip es vale ten en cuenta que este user puede ser un define por lo tanto no
puedes yo hago esto y user resulta que es un define pues la lía espalda pero sabes qué pasa que claro yo ya
ese control yo ya sé que lo estoy haciendo aquí pero claro está bien no sé qué sabes está aquí está aquí
pero está bien está bien que no se fía de mí lo entiendo lo entiendo que no se fía no puedo entender yo tampoco me
decía yo tampoco decía creo que esto debería poder funcionar también mejor vale pues ahora ya ahora sí
ahora sí vale ahora sí vale esto ya funciona que es lo importante votamos mejores vamos con un poquito con esta parte de aquí abajo a ver si
que os parece esta parte de aquí abajo vamos a ver
estoy buscando porque tenía por aquí las fotillos tenía como las fotillos de
de de esto vale de ría que todo esto pero nada la voy a tener que buscar vamos a buscarlas un momento ríaz logo vamos a poner aquí también una carpeta nueva donde vamos a tener
esa sexo public hostia no nunca me acuerdo como le cambiaron esto al principio public
está aquí el ser de valen ex imax en public vale
tu public si es que ya hay una carpeta public no hace falta que pregunte
venga vamos a poner
los logos
bueno mira vamos a hacer una cosa vamos a voy a mandar deberes ok en public gracias hombre
pues
si hubiera usado si hubiera usado type script de inicio en un proyecto mío me hubiera ahorrado dos días de búsqueda de por qué rompía
si o sea está claro yo creo que al final es una una inversión a la larga
es una inversión a la larga
midu cuando nos das una clase de day clean arquitectos que muy muy palo un poco palo me da
a mira qué bonito esto muchas gracias jamel muchas gracias
ya me gustaría podérmelo copiar ya sabes sin necesidad de tener que descargarlo pero bueno se lo vamos a perdonar
no esto como era ese svg r sube gr esto es una cosa que te transforma el es su eje
a un componente de react que estoy pensando si esto tiene mucho sentido
porque al final podríamos utilizar las imágenes y quedarnos bien a gusto lo que sí que me gustaría es que fuesen cuadrados
pero bueno bueno no pasa nada
es que tiene más sentido que utilicemos directamente los subejes la verdad
venga vamos a intentar utilizar directamente los subejes
svg angular
este es el bueno
pensaba que ahora ya no tenía esto
angular logo
pensaba que ahora todo era todo rojo
como hace tiempo que no veo
que no veo nada de angular que ya ni siquiera me acuerdo
como son los
venga angular icon
react
que más
tenemos
view
vale y tenemos svelte
y tenemos
que más tenemos
cuál creéis que deberíamos poner aparte va
creéis que deberíamos poner jquery
pero a ver que no quede troll
vale que no quede troll
flutter
priak
priak
otros dicen flutter
no remix lo vamos a poner en frameworks
o sea vamos a poner
por ejemplo para que lo veamos
vale vamos a probar vamos a preparar un poco esto para que tengáis un poco de
es que puesto mejor framework mejor biblioteca
y por ejemplo
y esto
ahora veremos cómo le llama este jes
mejor frame
mejor es
mejor framework
mejor framework
es que no sé cómo llamarle
ahora veremos este jes como le llama
tendríamos next
tendríamos next
tendríamos
svelkit
tendríamos
por ejemplo
qué más tendríamos
es que angular
angular
es efectivamente un framework la verdad
ah mira aquí lit
lit sí que me parece interesante
lit
vale
qué más
a ver lit
aquí si lo tiene
lit
oh qué bueno
muy bien
lo tiene
lo tiene
fantástico
lit icon
vale
cerramos esto
vamos a ver
state of jes
los tienen que tener
saben
deben estar
preguntando por ello
text de survey
continuar encuesta
frontend frameworks
dice react
view
angular
priak
ember
svelte
alpine
punto js
a ver
realmente alpine
tiene más que lit
que crees
que alpine
alpine
alpine js
vamos a ver alpine
si tiene
vamos a compararlos con estos
hola
ahora
alpine
ni sale
alpine
o sea es que no
tiene
lo voy a poner
igual
vale
alpine está
muy
muy lejos
y lit
lit
vamos a ver
lit
vale
vamos a comparar
con
el naranja
es alpine
y el amarillo
y el rojo
están igual
o sea están
básicamente
están empatados
alpine
y lit
están empatados
y
view
tiene como
angular
básicamente
vale
stimulus
js
a ver
es que tampoco
vamos a poner
unos
muy random
alpine
es una mini librería
pero de verdad
en state of yes
next yes
lo toman como framework
backend
no tiene sentido
eso tampoco
o sea
a mí me gustaría diferenciar
entre
la que
solo te da
la solución
o sea
que no tiene
o sea
sería full stack
yo no le llamaría
backend
le llamaría
full stack
o sea
yo llamaría
mejor framework
full stack
¿por qué?
porque tienes
frontend
y backend
entonces
sería next yes
tenía snacks
spell kit
y
no sé
cuál más
esto ya me lo iréis diciendo
y pensando
mejor biblioteca UI
hombre
react
view
angular
react otra vez
dos veces
aquí falta
sbelt
muy bien
sbelt
a ver qué me dice
geah copilot
ember
y qué más
polymer
sí
polymer está
zapper
si zapper
next yes
sí sí
ve inventando
que algo queda
next yes
express
vamos a poner aquí
mejor framework
mejor
framework
backend
yo aquí
sí que pondría
por ejemplo
pondría
next yes
next yes
pondría también
express
express
pondría también
aquí
cómo se llama
este
que es muy pequeñito
ahora no me acuerdo
que es una alternativa
fast API
¿vale?
fast API
se llama fast API
fastify
fast API
no me suena
apolo server
bueno yo
apolo server
y esas cosas
más que
un framework
backend
le llamaría
un
algo de
graph coil
más pensado
¿no?
express no sé
dónde abriría
backend
yo no lo considero
un framework
¿cómo que no
consideras un framework?
¿cómo que no
consideras un framework
express?
vamos a ver
¿cómo no va a ser
un framework express?
¿cómo no va a ser
un framework?
es una infraestructura
infraestructura
¿cómo se pone esto
en inglés?
infraestructura
joder
web framework
lo pone aquí
todo
web application framework
a ver
yo creo que sí
que es un framework
lo que pasa es que
es un framework
en la parte
del backend
¿no?
o sea
solo de backend
no es full stack
como si lo puede ser
por ejemplo
en SGS
ah
fast APIs
de Python
bueno
lo vamos a enfocar
más con
creo que
desarrollo web
es que
también es verdad
que
a ver
no podemos poner
todos
por ejemplo
aquí mira
pone stimulus
solid
claro
vamos a tener
que poner
otras
otras
otras opciones
porque claro
aquí la gente
no sé si poner
solid
porque solid
yo que sé
se puso tan de moda
que todo el mundo
que a mí al final
me parece una
simple copia
de
creo que es
solid yes
parece un poco
una copia
de
de
react
pero intentando
con el tema
de la reactividad
no sé
de solid yes
o solid
yes
sí
o sea
sí
solid yes
solid yes
tiene
10.000 descargas
o sea
tiene menos
incluso
7 veces menos
que elite
o sea
yo no lo considero
un framework
tampoco
es una librería
para manejo
de ricos
no más
a ver
express
de toda la vida
se ha considerado
que es un framework
o sea
pero es que
no es mi opinión
es que lo dice
su documentación
y todo
de hecho
many popular
frameworks
based on express
a ver
es que es verdad
que el tema
de biblioteca
o
framework
puede ser un poco
distante
pero un framework
que al final
en este caso
el tema
del manejo
el tema
del manejo
de la ruta
es solo
una parte
de express
es una parte
porque tiene muchas
cosas más
no solo hace eso
el tema
del manejo
de rutas
de hecho
es esto
router
o sea
tú puedes tener
objeto router
y ya está
y con esto
te manejarías
perfectamente
podrían manejar
de hecho
hay bibliotecas
que solo hacen esto
y luego
al final
tienes un montón
de cosas más
que quieras o no
el tema
todo el tema
de
bueno
tienes hasta
lo de los archivos
estáticos
eso está ahora
en express
es una cosa
totalmente de express
o sea que no es
lo que pasa es que es
si lo piensas fríamente
es un framework
para hacer APIs
lo que pasa es que
es de backend
estoy trabajando
con Yago
o sea
no es full stack
tiene middleware
bueno
a ver
pronuncia
infrastructure
infrastructure
infrastructure
es difícil
puedes hacer templates
puedes hacer templates
también
no es un framework
lo tienes que hacer a mano
bueno
que tienes que hacer a mano
a ver
que tienes que hacer a mano
el que
es como si me dices
que next.js
no es un framework
porque tienes que hacer a mano
los endpoints
ah mira
remix
muy bien
remix
ese me gusta
full stack
remix
ves
o sea
remix
es full stack
es que claro
si nos imaginamos
remix
y solo pusiéramos
solo el tema
de backend
al final
lo podría reducir
a bueno
es solo
solo se encarga
de manejar rutas
¿no?
sería un poco así
Blitz.js
Blitz.js
este también sería
lo que pasa es que
Blitz.js
es un poco raro
porque Blitz.js
en realidad
hasta ahora
ahora van a pivotar
pero hasta ahora
era como
es verdad
que es un full stack
framework
pero porque es como
un envoltorio
de next.js
era una cosa
un poco rara
Blitz.js
Blitz.js
eso está
más muerto
ya
muy muerto
Blitz.js
me parece
yo al menos
de hecho
Blitz.js
si no me equivoco
ah bueno
ojo
que igual sigue vivo
ojo
que parece
que lo han revivido
vaya vaya
me callo
me callo
hostia
que ha pasado
ostras
no tenía ni idea
que lo han revivido
lo han revivido
que fuerte
si si
porque antes
claro
me imagino que por eso
han hecho dos versiones
porque la 3
la tenían ya
este
este estaba
pues si si
boya
muy bien
muchas gracias
por compartir
no tenía ni idea
hasta los propios
ingenieros
de loopback
estaban decepcionados
con como funciona
loopback
ya te digo
si si
ya te digo
hostia
pues que interesante
no tenía ni idea
falta
gquery
a ver
pero que gquery
no usa nadie
o sea
seamos realistas
vale
o sea
no lo usa nadie
ahora
es como
aquí
tenemos aquí
frontend frameworks
y claro
dice
frontend frameworks
y librerías
y dice
react
view.js
vale
pues estos
tienen sentido
vamos a poner
también aquí
que es view.js
angular
svelte
aquí ha puesto
priac
ember
alpine.js
uy
es que esto
se los ha empezado
a inventar
vamos a poner
también este
va
yo que se
para que la gente
alpine.js
y que más
alpine.js
svelte
esto lo tenemos
ember lo he puesto
priac
priac
me parece que a mi
que poco
alpine.js
lit
lo hemos puesto
stimulus
stimulus
yo la verdad
que
stimulus
suena a morrar
muy mal
stimulus
me da miedo
buscarlo y todo
porque me puede salir
un rabo ahí
en cualquier momento
entonces
a ver
no es cuestión
de poner
todos los que existen
bueno
pero es que
stimulus
es que esto
lo utiliza la gente
de basecamp
y ya está
no se trata
de poner
todos los que existen
se trata de poner
todos los que son
basados en javascript
y que realmente
que realmente
tengan un impacto
en la comunidad real
sabes
o sea
no que
porque si no
al final
si tenemos que poner
todos los que han salido
a ver
lo vamos a poner
igualmente
pero
ya veremos
por ahora
vamos a ponerlos
vale
3
4
5
yo quería
poner menos
pero bueno
vamos a ponerlos
satisfacción general
bla bla
vale
luego vamos a ver aquí
cuáles son los back
en frameworks estos
que yo no estoy muy de acuerdo
en ver
express
joder
luego me decís
no es un framework
sale aquí el primero
la leche
express
next 10
ves
pero es que mezclar
next 10
contra express
no tiene sentido
no tiene mucho sentido
o sea
una cosa es express
fastify
next 10
que next 10
incluso
está hecho con express
que al final
es como una forma
adornada
para adornar
yo los pondría
por ejemplo
más en
es que en backend
por ejemplo
full stack
por ejemplo
sería más astro
también
vamos a poner por aquí
happy
happy sería
happy
happy
happy
sería aquí
¿no?
mido
aunque haya algunos
que consideres
que ya están muertos
podrías ponerlos
puede que nos den
una sorpresa
quién sabe
bueno
los estoy poniendo
a ver
no voy a poner aquí
jquery
y que no
no lo va a petar
y si lo peta
va a ser un poco raro
porque lo que queremos
es como la
cuál es la mejor
de ese año
¿no?
no sé
entonces que la gente
por troll
diga esto
express
es un framework
progresivo
bueno
como view
justamente
jquery
haría troll
claro
es que ya os conozco
os conozco
spell kit
spell kit
lo he puesto aquí
está puesto aquí
¿vale?
está en mejor framework
full stack
que es que es lo que es
es lo que es
y el
inax
también está aquí
y es full stack
vale
por ejemplo
más cosas
mejores
empaquetadores
de código
¿vale?
aquí tendríamos
obviamente
hostia
que bueno
guiha copilot
vamos
tú puedes
vamos
qué bien
lo estás haciendo
no
Babel no es un empaquetador
de código
error
error
cambio el rumba
error
5
¿cómo es?
¿cómo dice?
revise la rueda derecha
del rumba
es que me he acordado
de los errores
del rumba
que K2PT me pone
vale
es build
tenemos
bit
también
tendríamos
¿qué más tendríamos?
bit
vale
eso he dicho
hay copilot
se la ha ido
de las manos
mejores librerías
también
muy bien
eso eso
me podéis decir
también secciones
mejores
mejor librería
mejor
librería
CSS
en JS
ul
venga
puedes decir
Faker
Faker JS
que bueno
Stitches
H2
mejor
catálogo
de componentes
mejor
framework
CSS
aquí podremos
poner también
Tailwind
Tailwind
vale
¿dónde entra Babel?
Babel en realidad
es que no tiene
mucha competencia
solo tiene una
de competencia
realmente
estoy ansioso
por ver
cómo lo guardas
todo esto
en una base de datos
yo también
Víctor Cote
estoy bastante ansioso
a ver cómo lo guardamos
pero sí
hombre
sí
algo haremos
vale
aquí tenemos
style components
emotion
vale
radix UI
radix UI
pero si
radix UI
esto es
esto no
esto son primitivos
no es
no es un catálogo
de componentes
o sea
podemos poner
una sección
de primitivos
si queréis
pero bueno
puede quedar
un poco raro
yo creo
mucha gente
ni se va a enterar
porque es que
es esto
habría que estilarlo
porque no están estilados
un style
como catálogo
de componentes
suena un poco raro
react
bootstrap
sas
chakra
bueno mira
chakra es
por ejemplo
vamos a poner chakra
catálogo de componentes
tendríamos chakra
UI
tendríamos por ejemplo
material UI
tendríamos
next UI
también
sí hombre
sí
vamos a incluir CSS
también
sí sí sí sí
sí
de hecho
estoy pensando
que cuando llegue
la sección del CSS
igual podemos cambiar
el fondo
al azul del CSS
cuando se va haciendo scroll
¿sabes?
podemos hacer
and
d
chakra
sería una librería de CSS
hombre
es un catálogo
catálogo
es un catálogo
de componentes
chakra
material
next UI
estos son catálogos
de componentes
también me habéis dicho
daisy UI
que a ver
luego haremos un poco
de criba
react semantic UI
luego
luego miraré
si realmente son
tienen impacto
esto
porque
testing
también
mejor herramienta
de testing
mejor
no sé cómo llamarlo
este
mejor
test
end to end
vamos a poner aquí
por ejemplo
vamos a poner
cypress
y vamos a poner
también
playwright
vale
con qué lenguaje
de teclado
programas
castellano
react testing library
bueno
testing library
sería más en general
o sea
herramienta de testing
tendríamos aquí
no voy a poner
react testing library
pondríamos en todo caso
testing library
que los tiene todos
luego aquí
también podemos poner
bitest
que es nuevo
podríamos poner
jest
enzyme
no me digáis
que enzyme
está entre
los mejores
papetier
que a ver
papetier
en realidad
hostia
creo que es así
papetier
ah
mejor
bus
hostia
que bueno
muy bien
mejor
bus
backend
as
a
service
vamos a poner
aquí
firebase
supabase
air table
bueno
ya no sé
se nos irá ocurriendo
se nos irá ocurriendo
hey
uriberma
gracias hombre
a ir regalando
regalando
hombre
muy bien
así me gusta
muy bien
que grande
regalar
regalar da vida
gracias pabece
también por renovar
suscripción
gracias a
gengis khan
que renovó
wanchirazin
huangs
patata nocturna
patata nocturna
ay que risa
ya son 700 subs
nada sois los mejores
las cosas como son
gracias michael
midu
haz un hot tap
un hot tap
que bueno
mejor documentación
eso también puede ser
ah
aws
bueno esto sería
como se llama esta de
uy
dando vida
dando vida
ahí muy bien
dando vida
ahí está
aws incógnito
no
como se llama
el de aws
que ahora no me sale el nombre
ah que no me sale el nombre
os acordáis
ahí isma
también dando vida
azure no
cognito no
cognito
el de aws
amplify
amplify
amplify
amplify
es el que lo tiene
sería el bus
en este caso
¿no?
miduasa service
¿os imagináis?
eso sería increíble
no
dinamo sería la base de datos
sería la base de datos
mejor empaquetador
ya lo hemos puesto
ya hemos puesto
mejor empaquetador
ah no
no lo he puesto
si
esto por aquí
no
mira webpack
rola
parcel
beat
vale
vi que faltaba un sub
para los 700
que bonito
pues ahora queda un 100
para los 800
dale cañita
no se repite la palabra
mejor
si
a ver
esto es
ya le daremos una vuelta
no os preocupéis
con los textos
igual luego
no pasa nada tampoco
buenas
¿qué es un state of javascript?
una encuesta para saber
cómo está el estado
de javascript
donde la gente
dice cuál es lo que más le gusta
¿qué falta de respeto
en este style components?
falta de respeto
es que no hables
hay que no hables
que no leas
hombre
está ahí
mejor blog de desarrollo
bueno
eso no creo que lo pongamos
pero
pocas suscripciones
para la calidad de contenido
que ofrece
gracias
gracias
mongodb
stitch
pero eso no es tanto
bueno
stitch
la verdad
no conozco
¿qué es esto?
serverless platform
hostia
es la primera vez
que he escuchado esto
stitch
es que estaba pensando
en atlas
pero atlas es la nube
¿qué es esto?
stitch
query anywhere
function triggers
coño
curioso esto
oye oye
oye
interesante
code frontend
using single
no lo conocía
lo voy a apuntar
por si acaso
vale
más o menos
a ver
lo importante ahora
mongo
stitch
ahora lo importante
es tener bastante información
así que si os parece
le damos una vuelta y tal
vale
librerías en 3D
hostia
en 3D
si
ponemos en 3D también
no sé si quiero llegar
a tal punto ya
bueno
más o menos
vamos a
volveremos con el tema este
pero ahora vamos a destilar
un poco
vale
que lo que quería era darle
un poco vida a la web
y al final nos hemos liado
aquí con un montón de cosillas
ay
he quitado lo del SVG porn
espero que Twitch
no me escuche
la palabra esta
y se piense que realmente
estamos haciendo cosas guarras
vale
vale
lo mejor de desarrollo
de desarrollo web
vale
vamos que aquí con el index
votan los mejores
votan los mejores
de desarrollo web
vamos a ponerle también
max width
m
x auto
vale
los mejores
del desarrollo web
vale
vamos a destilar un poco esto
vale
que es que hemos estado aquí un buen rato
y
con javascript
sexualidad.js
o sea
es que es muy delusor
tener que ponerte a chupar cosas
para que sea
no
no hace falta
no hace falta
eso con mi voz natural
lo consigo
si es verdad
enemarulo dice
a eso se le llama fiebre
pues tienes razón
siempre estoy brilloso por eso
porque
estoy caliente
es broma
es broma
vale
venga
vamos a darle cañita a esto
mejor biblioteca
no se que
y ahora vamos a
compenetrar
ya estoy diciendo guarradas
amigos
estoy diciendo guarradas
section title
vale
vamos a poner section title
h2
class name
y aquí
bueno pues el children
no
pues el children
tampoco
children
y el children
vamos a decir que el children
sea un string
ti ti ti
mido de mala influencia
la verdad es que si que soy mala influencia
soy bastante mala influencia
tened cuidado conmigo
mirad
mirad como de mala influencia soy
solo os lo recuerdo
vale
que hoy a un chico
que le caía mal
a un chico que le caía mal
no se porque
desde hace tiempo
me caías mal
pero después de ver este video
de webpack
paso a paso
te digo que fue en extremo
bueno total
que ahora me ama este hombre
me ama
así que imagínate
si eso lo he hecho con un video
si se ve una lista de reproducción
que
si se ve una lista de reproducción
se toca
y todo
pensando en mi
espero que no
espero que no
vale
h2
section title
h2
vale
y ponemos aquí
font
volt
mejor biblioteca
vamos a ver text
ojo
mi madre siempre decía
que del amor al odio
hay un paso x
de gracias por los aportes
midu
gracias a ti hombre
es verdad
del amor al odio
hay un paso
pero también del odio al amor
también
mejor biblioteca
UI
vale
y ahora
pues lo que tendríamos que hacer
es el tema de las imágenes
esto como lo quiero hacer
como quiero hacer esto
sabes
como
como llamo además a esto
voy a ponerle por ahora
box
por decir algo
box
y
react react no
no
es que quiero que
forzosamente esto sea un string
y vamos a hacer que esto sea un div
por ahora
vale
uy dios mío
que grande copilot aquí
intentando escribir
mi
intentando escribir
vamos a ver lo que ha intentado
este
este copilot
vamos a ver
que ha intentado hacer
que
que me veo
que ha debido ser esto
una locura
vamos a ver
que me está intentando hacer
vale
lo que quiero es que cada cosa
de estas
sea una cajita
vale
eso para empezar
hostia
la estoy liando
lead
solid
vale
vale
vamos a ver
tengo por aquí las
por las imágenes
vale
el box
vamos a ver
que me ha hecho aquí
bueno esto me ha hecho una mierda
pinchado en un palo
obviamente
eso no es lo que queremos
vamos a hacer
algo mejor
hostia
tengo aquí un montón de cosas abiertas
¿verdad?
esto por aquí
vamos a poner esto
rounded
para empezar
vamos a ponerle así
que sea
flex
flex
column
vamos a centrar
todos los elementos
todo en el centro
justify
center
y vamos a ponerle un shadow
lg
por decir algo
un pequeño borde
y borde
de
grey
100
voy a cerrar todo esto
que tengo para que abierto
y donde tengo mi
aquí
vale
más o menos
ahora iremos poniendo las imágenes
children
vamos a hacer que sea cualquier node
o podríamos ponerle title
y la image
podríamos hacer eso
por ahora la image lo vamos a quitar
vamos a pasar aquí el react
lo vamos a hacer así
mejor
no soy muy fan del tema este
de tener
children
que al final tenga demasiadas cosas
así que vamos a hacer esto
title
que sea un string
y el title
y
vamos a
mover todos estos
title
vale
hostia
que le ha pasado
children
real node
hostia
todo el children
o null
hostia
espérate
pero que le pasa a este
section title
ay dios
es que lo estoy tocando
donde no es
lo estoy tocando
donde no es
dios
dios
dios
dios
dios
dios
dios
dios
joder
es que ahora he hecho todo esto
a ver
miguel
céntrate
céntrate
midu
este no es
vale
este te lo comes
vale
si esto es el children
ay ay ay
este es el del title
ya decía yo que estaba alucinando
digo que está
pasando aquí
vale
este es el string
y por ahora vamos a hacer esto
y ahora le pasaremos las imágenes
y ahora vale vale
ya decía yo
estaba flipando
vale
se ve exactamente igual que antes
o sea parece que no has hecho nada
miguel
muy bien
vamos a pasarle ahora la imagen
que
a ver
claro aquí podríamos
podríamos hacer dos cosas
porque
a ver vamos a poner
lead
vamos a poner aquí
angular
sbelt
bueno aquí espero vuestras PRs
espero que trabajéis
vale
y fuerte
con el tema de añadir todos los logos
que nos va a faltar
lo mismo decía un amigo
que no le gustan los streamers de España
hasta que conocí a mi dude
oh dios que bonito
que bonito
me encanta
es que mi dude no es cualquiera
hombre solo hay uno
eso es verdad
mejores lugares para publicar sitios
ah mejor hosting
que bueno
si si bien pensado
muy bien
muy bien
mejor sitio para hospedar
para hosting
de tu proyecto web
vale
vamos a poner
nea y verser
la verdad que
netlify
aws
bueno a ver que
ya los iremos
ajustando
vale
pero bueno
para que
aws
azure
yo que sea
google
pollas
lo que sea
polimer me parece un framework
muy interesante
aunque no es popular
pero polimer
yo creo que
está deprecated
ya no
o sea con todo mi cariño
no lo digo de malas
en serio
ay
polimer
con y
quiero decir
no se han enfocado
ahora más
en
en lead
mira
it's in maintenance mode
for a new development
we recommend lead
o sea
polimer
está muerto
básicamente
o sea
con todo mi cariño
polimer huele a tabla
huele a tabla
no hace falta tipar el children
si pones que el componente
devuelve un rc
react fc
tienes toda razón
typescript
react
cheat
shit
la verdad es que hacía tiempo
que no me ponía con esto
pero
ves
el tema es
que no
no recomiendo
utilizar react fc
para el tema de
de los componentes
de react
bueno react fc
es la forma corta
al final es lo mismo que esto
uy
polimer huele a crematorio
a crematorio entero
huele
huele
huele muy mal ya
vale
entonces
que es lo que dicen
minor pifers
mediator mark props
o sea
using react void function
o react void instead
o sea yo creo que ninguno
o sea
es que básicamente
lo que recomiendan
básicamente es hacer esto
o sea tener
el
bueno en este caso
el type
no sé si será mejor
bueno en este caso
no pasa nada
se puede hacer con un type
pero
es esto
aquí te explican
bastante bien
cuáles son las
los problemas
con los que te encuentras
por hacer esto
y
y claro
el tema también
claro
habla de esto
del tema
de los children
pero a mí me
o sea
no sé por qué
me estaba
se estaba quejando
de eso
del children
bueno se estaba quejando
porque lo estaba usando mal
o sea yo
si no quiero usar el children
no quiero
que esté
o sea sea parte
del contrato
entonces yo lo que quiero
es que el section title
pues sea justamente esto
children
children string
yo creo que es mucho mejor
pues ponerle
bueno a ver
que si queréis
pues se puede poner section
title props
vale y podéis poner aquí children string
y le ponéis esto aquí
que queda mucho mejor
esto lo haremos así
cuando lo separemos
vale ahora lo estoy haciendo aquí
en el mismo fichero
pero esto lo separaremos
y esto lo mismo con este
vale type box props
separaremos esto en otros ficheros
y cuando lo hagamos
pues lo haremos mejor
vale
pondremos los tipos
en condiciones
bueno
le he puesto type
como que podría ser interface
pero bueno
para que os hagáis a la idea
vale
entonces
yo prefiero que el box
me diga exactamente
las props
que sí que utiliza
que no que me empieza a poner ahí
que si tiene un children
que si no sé qué
porque no es verdad
o sea
no lo quiero utilizar
y no quiero
que se vea
o sea que sea parte del contrato
en este caso
porque es que no lo
no lo acepta
no acepta
o sea
podría
si yo le pongo el fc
pues al final va a decir
ah sí acepta children
pero es mentira
porque no lo acepto
vale
esa sería un poco la idea
¿cuál es la diferencia
de utilizar type o interface?
es una muy buena pregunta
y aunque realmente
parecen muy similares
sí que tienen diferencias sutiles
por ejemplo
las interfaces
aparte de que los types
no se pueden extender igual
o sea no puedes heredar
sí que puedes heredar
bueno no puedes heredar
literalmente hablando
no puedes heredar
con un type
sí que puedes hacer
una unión de types
y cosas así
pero no heredar
no puedes heredar
lo que sí que puedes hacer
con la interfaz
y otra cosa que tiene
la diferencia
es que el type
de hecho el otro día
alguien decía esto
que era bastante interesante
typescript performance
type versus interface
las interfaces
al final
es como que
se reutiliza siempre la misma
en cambio
los tipos
se crean
¿vale?
no se reutilizan
eso sería un poco
la diferencia entre ambos
hay que tener un poco
de cuidado con eso
por lo que he estado
leyendo de performance
yo nunca me he encontrado
este problema de rendimiento
y hombre es verdad
mira
hay incluso una regla
en sling
que dice esto
de usar interfaces
en lugar de types
bueno
no se
al final
es bastante parecido
lo que quieras más
es que es tan fácil
es verdad que las interfaces
tienen como más posibilidades
en general
tienen más posibilidades
como eso
lo de decir
que quieres extenderlas
y todo esto
pues seguramente
igual hacemos esto
que todos sean interfaces
y ya está
creo que al final
como las diferencias
es verdad que las types
normalmente lo haces
con cosas más pequeñas
pero
al final
se te pueden mezclar
interfaces no se pasan
a javascript
las interfaces
se pueden extender
claro
eso es lo que he dicho
que las interfaces
se pueden extender
lo que no se pueden extender
son los types
puedes unir types
y cosas así
la consistencia
es más importante
sí
también es verdad
que a lo mejor
la intersistencia
es interesante
midu
ya pusiste mejor
framework de backend
de javascript
también se puede poner
mejor entorno
de ejecución
de javascript
ay que bueno
muy bien
me gusta
jkselexander
eso también me gusta
me gusta
me gusta
sí sí
luego
tendremos que hacer
seguramente algún tipo
de selección
vale
mejor entorno
de ejecución
de javascript
y ahí vamos a tener
una lucha
entre
node.js
node.js
y vamos a tener
también
dino
vale
y no sé
qué más
vamos a tener
aquí
pero
si se os ocurre
alguno
me lo decís
era
tener aquí
la imagen
el suvg
claro
en un mundo ideal
lo que estaría genial
es tener el suvg
ahí directamente
pero bueno
si no al final
pues podemos hacer esto
image
luego este image
se lo pasamos aquí
image
image string
vamos a ponerlo así
que a mí me gusta
ordenar un poco
las cosas
este es el title
vamos a poner la imagen
encima
por ahora vamos a utilizar
este
esto
como alt
vamos a poner el title
que tiene bastante sentido
esto por aquí
vamos a ver
vamos a ver
font vault
p4
esto al final
ahora no lo vamos a editar
esto igual
lo que necesitamos
es separar
la imagen
vale
vamos a ver esto
bueno
vale
más o menos
más o menos
va tirando
va tirando
vamos a poner esto
el texto este
un poquito más grande
vamos a necesitar
tener diferentes
vale
image
diferentes estilos
por ahora
me estoy enfocando
en este
que será como el más
importante
image
punto svg
y aquí vamos a tener
por ejemplo
esto sería view
esto sería view
esto sería angular
esto sería
svelte
esto sería lit
y creo que no tenía más disponibles
por ahora
vale
bueno
vamos tirando
vamos tirando
ah
espérate
porque aquí también había puesto
lo de la
la
en la aplicación había puesto
el min
este screen
hostia pero es min
porque lo
si le pongo mínimo
como mínimo
o sea esto debería seguir para abajo
¿no?
ah vale
ya sé lo que está pasando
es que aquí también
la había puesto antes
el
esto
la altura
la había puesto a mano
porque quería ver
cómo quedaba
vale
vale
y aparte de esto
aquí ahora vamos a poner
también
el
shadow
shadow
2xl
no se puede poner más grande
vale
shadow
white
que white
no se nota nada
yellow
shadow
a ver
vale
me gusta
pero un poquito menos
me parece un poco bestia
me parece un poco bestia
me parece un poco mejor
vale
pues eso
por aquí iría un poco los tiros
igual la hacemos un poquito más gordita
creo que sí
la vamos a hacer un poco más gorda
porque no gustan las cosas más gorditas
hostia
igual demasiado gorda
demasiado
vale
creo que así bien
vale
por aquí van un poco los tiros
vamos avanzando
el polvito
el polvito
bueno aquí
más que polvito es elevación
te vamos a llamar elevación
el polvillo
esto es lo que
esto lo que haríais
más de uno
que os conozco
esto lo que haríais
esto lo que
lo que haríais vosotros
que os conozco
si fuese vuestro
haríais esto
así
lo haríais así
que se vea
que se hacer
un box shadow
que se note
que hay una sombra ahí
una sombra
que realmente
vamos
hasta
le da miedo
a Voldemort
a Sauron
y a la madre
que los parió a los dos
mentira
no va a ser
¿verdad Feral?
no va a ser
que os conozco
luego en el
tu web a juicio
me venís con unas sombras
que
ves
mucho mejor
casi no se nota
sutil
pero bonita
vale
sobra contundente
Luby dice
nunca he hecho eso
ni lo volveré a hacer
ni lo volveré a hacer
ya te digo
nunca lo he hecho
ni volveré a hacerlo
vale
¿qué más?
¿qué más?
bueno a ver
ahora el tema
obviamente esto
no lo vamos a dejar así
lo que estoy pensando
estoy pensando
hostia
hostia
¿cómo funcionará
el tema de grid
en Tailwind?
nunca he hecho
grid con Tailwind
¿cómo se hace?
vale
grid calls
¿sabes?
¿cómo le puedo decir?
ah
le dices directamente
el número de
es que estoy pensando
que podríamos hacer
algo así
¿no?
o sea
hostia
que chulo esto
o sea
le dices el número
de columnas
y ya está
grid calls
la primera vez
que estoy utilizando
grid con
vale
lo digo porque
entonces aquí
lo que podríamos hacer
es decirle
grid
número de columnas
4
un poco la separación
y tal
y aquí
bueno un poquito
hay que darle una vuelta
hay que darle una vuelta
todavía
hay que darle una vuelta
porque aquí en el box
por ejemplo
esta imagen
que hay aquí
esta imagen
vamos a ponerla aquí
class name
vamos a poner
padding 4
esto va a empezar
y además
vamos a poner
que todo esto
siempre tenga
cosa que sea cuadrada
un poco más grande
40
menos grande
20
y 32
hostia
que me ha puesto aquí
me ha mezclado aquí
los números
venga aquí
vale
igual incluso
no sé si hacerla
un poco más pequeña
pero bueno
ya
vais viendo
por dónde van
un poco los tiros
¿no?
box
function
section title
2xl
3xl
4xl
vale
m bottom
4
no
10
vale
menos
me parece demasiado
6
esto es lo que me gusta
de tailwind
la verdad
las cosas como son
esta sombra
también la vamos a cambiar
las imágenes alineadas
arriba o centradas
yo las dejaría centradas
yo las dejaría centradas
lo que le voy a quitar
es un poco de espacio
que me parece que es un poco
exagerado
pero
pero sí
seguramente centradas
estoy pensando incluso
en no ponerle sombras
y hacerlo más
con borde
borde de
el cursor pointer
lo hacemos ahora
tenemos que hacer
enlace
cosas así
que raro que el next image
no esté dando rojo el código
sí
me imagino que es más por
por algo que hemos tocado el linter
cuando hagas hover
ponerle sombra
puede ser
estoy pensando
que en lugar de utilizar sombras
que las sombras
a ver
están bonitas
pero
para darle ese toque minimalista
creo que puede venir muy bien
el tema de ser un poco brutalista
que mierdas digo
brutalista
me inventa esa palabra
hola ricardo desde colombia
bienvenido
espero que estés muy bien
espero que estés muy chévere
qué bacano
qué bacano
que estés aquí amigo
si existe el brutalismo
bueno
perfecto
pensaba que me había inventado
alguna mierda
mira
os lo voy a enseñar
a ver
he puesto hasta nervioso
ay
se creyó que era
ya te digo
ah lo del polvito
cierto
gracias
el polvito
hola andrés
muchas gracias
por regalar una suscripción
eso ha sido por la poesía
espero que sí
mi corazón bailó de tanto amor
la verdad es que paloma eruda
es muy crack
está muy chulo
está muy muy
ese es mi
mi poesía favorita
el emote llorando
qué grande
qué grande
qué grande
vale
lo que quería hacer
básicamente era quitar los shadows
vale
si vemos que queda mal
pues le damos para atrás
y ya está
y hacer esto
como un poquito más brutalista
que no se le puede quedar bien
por ejemplo
aquí
podríamos incluso tener un borde
que fuese de dos
y el borde
que fuese black
¿sabes?
pam
algo así
¿qué os parece?
¿sabes?
que vayan por este
por este
este camino
algo así
algo así
de hecho
se podría
no sé
es que me gusta
creo que
creo que sí
creo que lo vamos a dejar
creo que lo vamos a dejar
esto le da como un toque muy brutal
y a lo mejor la de dentro
lo que
mis ojos
a ver
se ve más bonito
yo creo que sí
¿no?
yo creo que sí
le puede dar
a ver
todavía falta de que estilemos por dentro
y todo esto
pero yo creo que le puede dar un toque
vamos a ver cómo le quedaría
el boss
le quedaría el black
el black
pero de uno
este ya queda demasiado bestia
a este sí que vamos a poner más un grey
lo que podemos jugar
en este caso
sería más con el
el fondo
sí, sí
a ver
vamos a ponerle primero un grey
un poquito más claro
no, todavía más claro
tiene que ser más claro
más claro, más claro
más claro
más claro, más claro
más claro
de hecho incluso
bueno
tampoco nos pasemos de claro
vale
pues creo que lo vamos a hacer así
y vamos a ir por este caminito
el borde de fuera más claro
queda mejor yo creo
sí, yo creo que el de fuera mejor
si le vamos
vas un directo estirando
y ya está mucho mejor
que el state of yes
bueno, yo he ido haciendo
he ido haciendo
porque no sé por qué diseño
por el momento me recuerda a tu blog
llámame loco
hombre, no, no se parece a mi blog
yo creo que no
sí, tú dices
lo que no sé
si a lo mejor tiene más sentido
en lugar de hacerlo en cajitas
hacerlo como en pastillas
pon línea de puntos
y lo haces recortable
ya que estás
ya te digo
mido
¿no crees que hay mucho padding top
en el texto principal
en la napbar?
lo podemos bajar
lo podemos bajar un poco
pero tampoco
o sea
quería que había
de hecho la idea sería
poner una estrellita por aquí
bueno, yo es que tengo
mis ideas en la cabeza
que luego alucináis
o sea, yo es lo que tengo en la cabeza
y luego
luego lo que quiero hacer
pero luego voy haciendo
mientras
mientras voy escribiendo
y luego
me van saliendo cosas diferentes
una cosa
es lo que
es lo que al final
es capaz de hacer
bueno, le he quitado un poquito
le he quitado un poquito
y ya está
mejor biblioteca
midu
firmame el libro de git
pero si está al final
ponle confeti
sí, sí, le pondremos confeti
al final
en el hover
cada tecnología
ponerle una sombra
sí
yo creo que pastillas
mejor
yo creo que pastillas
mejor
voy a pagar con pastillas
¿vale?
vamos a dejar
voy a comentar este
voy a comentar este
me lo voy a copiar
y voy a probar
con pastillas
si es que funciona
o sea, vamos a ver
básicamente
en lugar de call
tendríamos que hacer
row
¿vale?
en lugar de
esto lo tendríamos que hacer
bastante más pequeño
y aquí
tenemos que hacer
aparte
que el align
hostia
que el align
¿items?
no
es
es que siempre
siempre me confundo
align
es que align center
no es el align center
que yo quiero
está el justify
es que el tema es
la culpa es de
de tailwind
joder
que nunca me acuerdo
a ver
que seguro me lo estáis diciendo
seguro me estáis diciendo
la gente
no, que es con no sé qué
item center
joder
item center
pero no acabo de poner
item center
o lo he intentado
ahora
no, no es item center
me has engañado
es content center
sí
es content center
¿vale?
content center
bueno
content center
a ver
esto no me está centrando
en la mierda
ah, sí, sí
sí que me está centrando
lo que pasa
a ver
que lo vea esto bien
lo que pasa
es que esto tiene una
claro, claro
vale
ya sé qué está pasando
por un lado
es que esto tiene esto
esto fuera
por otro lado
es que esto tiene esto
por ahora
fuera
vale
por otro lado
vale
hostia, pues no
no era item
ni content center
ni item center
ni la madre que nos parió
center, eh
justify center
pues ese es el que hemos puesto antes
justify center
no, a ver
justify center
es para centrarlo
en el que estaba
ese centrado
me daba toque
el content center
no es
justify content
sí
item center
que otra vez
con el item center
que en item center
pero por lo que no está centrando
no lo está centrando bien esto
no lo está centrando bien
parece que sí
ahora sí
o sea
es más visual
es más visual
al parecer
es más visual
vale
vamos a poner el gap
vamos a ponerle un padding
padding
de 2
rounded
3
3
3
3
3
3
incluso más
diría de rounded
incluso más
porque tiene que ser esto
full
bueno
full no hace falta
o igual sí que
no
tiene que ser 3xl
vale
y lo que vamos a hacer
claro
esto ahora
tiene que ser
vamos a quitarlo
del grid
vamos a quitar
el padding
este padding
vale
vamos a hacer
más pequeño esto
y lo vamos a tirar
es que ves
es que el justify center
no lo quería
porque
y tampoco quiero que ahora
tengan todos
claro
por eso tengo que quitarlo
del grid
porque no quiero
ahora quiero que se amontonen
vale
algo así
lo que pasa es que
quiero que
esto
sea un poco más
de hecho
como tiene que ser
como un botón
tenemos que hacer
que sea bastante
por aquí
pi2
por ejemplo
o incluso un poco más
y
aquí algo
algo
se me está escapando
de que la
esto
no está centrado
no centra
voy a quitar
estos por ahora
para que no me distraigan
con el tema
de que están rotas
las imágenes
vamos a ponerle aquí
un gap
también
4
esto tenemos que hacer
flex
grab
no grab
flex
no grab
uy
uy
que me equivoca
me gustaban las tarjetitas
bueno
lo hemos probado
había que probarlo
no pasa nada
no pasa nada
gracias Fabio
hombre
por desear un feliz año
hasta
hasta qué momento
está bien
felicitar el año
si no sé
a mí también me gustaban
las tarjetitas
si se parecen más
ahora sí que
ahora sí que se parecen más
a las pastillas
me gustan más las pastillas
bueno a ver
todavía tendríamos que mejorarlo
porque ya os digo
que aquí hay algo
que no está bien del todo
porque no se están
centrando
es que las imágenes
ves claro
es que
que pasa
que al hacerlo así
las imágenes que pone esto
esto al final también necesito
que tenga por ejemplo
un object
contain
y esto que tenga
class name
auto
ay
object
contain
es que la verdad
es que ahora que estoy pensando
ni siquiera hace falta
poner esto
no sé por qué
lo he separado antes
no sé en qué estaba pensando
esto
pero podemos poner esto
lo ponemos aquí
quitamos esto
le dejamos el object
contain
quitamos esto también
y vamos así
y ahora sí que está bien
luego
otra cosa que podemos hacer
vale
entiendo
esto
vale
y ahora sería un poco así
este sería un poco el tema
como quedaría
con SVG
no puedes usar
el image
de next
creo que sí
creo que sí que se puede
centrar el div
del SVG
bueno ahora ya está
¿no?
¿no?
ya está
eh
Madibald dice
para las PR
prefieres ideas visuales
tipos de TypeScript
o te gustaría alguna otra cosa
pues cualquiera
estaría bien
cualquiera estaría bien
cualquiera de las cosas
mira vamos a hacer
box
eh
box box
voy a hacer box box
para que lo veáis
más visual
vamos a hacer esto
y aquí vamos a poner
pop pop
box box
y de esta forma
lo que pasa es que
claro
este
tendría que ser
grid
grid
calls 4
vale
por aquí irían los tiros
¿qué es lo bueno?
las tarjetas me gusta
pero lo malo
es que
bueno
a ver
me faltaría hacer
separaciones
historias
que tampoco quiero que
que uno u otro
quede mal
por el tema
de las separaciones
bastante tema
de separación
m12
y m12
vale
entonces
el tema sería
se va a poder elegir
uno o más
en principio
solo se debería
elegir uno
hay demasiado scroll
con el grid
y las tarjetas
claro
el tema
es que tienen
demasiado espacio
las tarjetas
otra opción
es hacerla
mucho más pequeñas
las tarjetas
podríamos hacerla
bastante más pequeña
¿sabes?
o sea
por la mitad
y aquí
bueno
es que esto
ni siquiera hace falta
y entonces
el padding
este que habíamos
puesto por aquí
vamos a hacerlo
un poco más pequeño
o sea
sería un 50-50
sería un 50-50
hacerla así
un poquito más pequeña
¿no?
¿por qué no me deja
usar mi coins
para que tomes agua?
seguramente se han agotado
las formas de agua
pues esta sería la idea
un poquito
las podremos hacer
más pequeñas
o las podremos hacer
con las pastillas
darle una vuelta
pensadlo
mientras
mientras
me voy a comer
y mañana
volvemos al directo
¿vale?
entonces
m