Vamos a ver la web, vea.
Vamos a ver la web.
Bueno, la web empieza por todo lo alto
porque ya me pide que me logue y tal.
Bueno, entiendo que esta web...
Voy a intentar...
Me dieron feedback de mi primera...
De la primera...
Del primer programa.
Y voy a intentar ser lo más positivo posible, ¿vale?
Voy a intentar ser honesto y positivo.
Aquí tenemos el código.
Vale, esta es la web.
Entiendo que esto ha sido un poco para ir probando, ¿no?
Que Héctor...
Aquí tenemos el creador.
Héctor Vargas, ¿vale?
Ah, mira, ha estado andándole cañita aquí, hija.
Esto es para ir probando.
Pues vamos a hacer login.
Va, vamos a jugárnosla y hacemos login.
Puede pasar de todo.
Voy a hacerlo con una cuenta de correo que tengo por ahí.
Vale.
Miguel Ángel Durán.
Logout.
New entry.
Vamos a poner aquí.
Título Aprendesville.
What happened today?
He tocado un gato
y me he tomado un café al estilo coreano.
Es que hoy he ido a un coreano.
Optional Image.
O sea, puedo subir imágenes.
A ver.
¿Se la arrastro?
Si la arrastro, no.
Si la arrastro, no me deja.
Optional Image.
Vale.
Le doy y no ocurre nada, ¿no?
Picture.
Hay que darle aquí.
Ah, hay que darle aquí.
Vale.
Venga, vamos a subir esta.
A ver qué pasa.
A ver si se puede subir la imagen.
Sí.
Ah, pero ¿qué ha pasado?
O sea, he subido la imagen y ha dicho, ah, pues toma.
Vale.
O sea, cuando subes la imagen ya te hace el submit.
Bueno.
Venga.
Vamos a empezar un poco de feedback, ¿vale?
A ver.
Bien.
La funcionalidad tiene buena pinta en el sentido de que parece que todo funciona.
Pero de UX, a ver.
Este verde habría que darle un toquecito.
Yo os digo, es normal.
O sea, hacer temas de colores es complicado.
Y estas cosas pasan.
Entonces, si os cuesta el tema de colores, una de dos.
O buscáis algún color palette.
Mira.
Este está muy bien.
Esta aplicación os la recomiendo un montón.
En la que tiene paletas de colores.
Esta parece que es como por países.
Mira, Portfolio Expiration, no sé qué.
Pero bueno.
Que busquéis una paleta de colores que tenga un poquito de sentido.
Porque es que esta paleta de colores es todo verde.
Y además este rojo aquí es un poco rara, ¿vale?
Luego, este estilo de las sombras, uff, es un poco chungo.
Mira, ya Harrison nos dice otro.
Este, Colored Hunt.
Mira, este a mí me gusta mucho.
Hay un montón.
O sea, podéis tener...
Hay de todo.
Mira, populares.
Del mes, del año, pues del año, ¿no?
Que sería un poco más de tendencia.
Hostia, mucho pastel, ¿eh?
Pero no sé.
Pues buscar uno así.
También es verdad que estas paletas, yo lo que os diría es que prime más un color
que sea fácil de leer, ¿no?
Porque si es algo de lectura...
Esto, por ejemplo, aquí, esto está complicado, ¿no?
Vamos a ver.
De hecho, vamos a ver si esto tiene...
Mobile First.
Esto no tiene ni mobile ni nada.
El mobile es...
O sea, obligatorio.
Porque es que ahora mismo, ¿quién no utiliza el móvil para navegar?
A ver, vamos a ponerlo en modo móvil.
Refrescamos.
No.
O sea, no tiene modo móvil ni nada.
Esto hay que arreglarlo, ¿eh?
O sea, esto tenía que ser Mobile First como mínimo.
Porque es que ahora todo el mundo utiliza el móvil.
Luego aquí, a ver si yo...
Esto...
Estos botones...
Esto es muy raro, ¿vale?
Esto lo puede decir Salomón, que para eso está por aquí.
Mira, nos dicen otra.
Pues Colors.
Esta también la conozco.
Es súper chula.
Esta también está genial.
De hecho, creo que esta lo que podéis hacer es decirle un color y os genera el resto, ¿no?
Así que...
Mira, Salomón dice algo que yo estoy totalmente de acuerdo.
Dice, importante antes de logarte mostrar cuál es el servicio que vamos a acceder.
Claro, es que a ver, si yo entro aquí, me dice Login, mira, como esto no sea un club privado muy importante, yo no sé de qué va esto.
Yo no me logueo, vamos, ni harto, ni harto de cerveza.
Entiendo que es un ejercicio y por lo tanto, pues nada, es lo que hay, ¿vale?
Pero, claro, a mí me dice Login, es que es como si me dice, págame 20 euros y ya vas a entrar a una cosa aquí que...
Ah, sorpresa.
Claro, imagínate que yo hago Login y me dice, no, ya te estoy robando todos los datos.
No sé, pues aquí te faltaría pues una landing, ¿no?
Que creo que puede ser interesante, una landing.
A mí el verde este en general no me gusta mucho, así que le echaría un vistazo a este verde.
No está mal, esta sombrita de los inputs no está mal, pero es como que siempre estás con la sombrita en todos los lados.
Este azul, por cierto, no tiene mucho contraste, ¿eh?
Ahora vamos a mirar el código, echaremos mejor un vistazo al código a ver qué tal.
Pero yo diría que este azulito no tiene suficiente contraste, ¿eh?
Hay que darle...
Esto es súper fácil.
Normalmente se le...
Ah, bueno, es que además como esto tiene súper complejo, pero normalmente es muy fácil ver si el contraste está bien o no.
Tienes herramientas aquí, si tienes un color, normalmente te lo dice.
¿Ves?
Te dice el contrast ratio, ¿ves?
Te pone tal.
Pues búscate un colorcito.
Aquí tú te vas moviendo hasta que el color ratio sea bueno.
¿Es blanco?
¿Tampoco bueno?
Pues nada, más oscuro.
Pues negro, aquí ya vemos que está bien, pues le pones eso.
Vamos a ver el código.
Vamos a ver el código porque no nos vamos a quedar un poco con el tema este del UX.
Aunque ya os digo que era solo para poner en práctica la autenticación en Redux.
Claro, está bien, ¿eh?
Está bien.
Pero bueno, ya que estás, pues le das ahí cariñito.
Vamos a ver, vamos a ver.
Vamos a probar a poner el git 1s este.
Y así lo miramos bien.
Vamos a ver el proyectito.
Vale.
Actions, components, Firebase, helpers.
Hostia, me encanta la carpeta helpers porque la carpeta helpers tiene de todo.
Siempre.
O sea, no en este proyecto, sino en general.
En general.
Mira, me gusta este diccionario, ¿eh?
Muy bien, me gusta.
Me gusta.
Me gusta.
Me gusta.
Load notes.
Async UID.
Vale.
Notes for each.
Para cada nota.
Mira, esto.
Esto, pero esto es un map, ¿no?
Que se me ha perdido aquí.
Esto es súper típico, ¿vale?
Mira, esto que hacéis así, esto en realidad, esto es un map de manual, ¿eh?
Tú pillas aquí un notes y le dices notes.snap.map y ya con el item, tú lo que puedes hacer,
en lugar de tener que hacer un push en cada iteración, pues lo que haces ya es devolver esto.
Que igual se me escapa algo, ¿eh?
Pero, y esto ya os queda finísimo, ¿vale?
En lugar de hacer un for each aquí, pues le hacéis un map y ya está, ¿vale?
Esto es súper típico, ¿vale?
Cuando veis un array vacío y lo que hacéis en un for each es un push, pues ya está.
Ahí lo tenéis, el map.
Y queda mucho más fácil de leer y entendible.
No está mal, pero bueno, para que tengáis en cuenta.
¡Hostia!
Una función generadora ha hecho aquí el hombre este.
Pero bueno, pero bueno, guayco.
Bueno, bueno, bueno.
Una función generadora.
Show dates.
Que cuando la llama...
A ver dónde está utilizando esto, porque esto me parece muy, muy, muy interesante, ¿eh?
Hostia, este, esto es...
Esto es telita, ¿eh?
Esto es telita.
Porque tengo interés de ver qué será Redaxaga.
Puede ser que haya utilizado Redaxaga.
Pero qué necesidad aquí de utilizar Redaxaga.
Si al final este show dates puede devolver...
Mira, ya tiene...
Además, en este caso, el yield no tiene mucho...
Bueno, no sé.
Guayco está aquí.
Que, por cierto, gracias por acompañarnos.
Y nos puede explicar mejor.
Pero no sé hasta qué punto tiene mucho sentido un yield cuando tú aquí ya has calculado el valor.
A lo mejor la gracia del yield sería calcularlo solo cuando lo necesitas.
Pero bueno, que ya os digo que esto tampoco es que sea muy complejo de calcular.
Así que tampoco es que sea...
Pero el yield puede ser interesante para no calcular todavía el valor hasta que no lo necesitas.
Pero claro, como ya lo has hecho aquí...
No sé si alguien sabe cómo funcionan los generators.
Pero cada vez que ejecute el show dates, la primera vez ejecutará, devolverá el fecha día.
Y la segunda vez devolverá el fecha num.
¿Dónde lo está utilizando esto?
Por aquí no está.
No sé si se...
Ah, ¿se puede buscar?
Uh, esto es muy bueno.
Ah, no.
No parece.
The Cosearch, Habilities...
Bueno, no sé si es que no se está utilizando...
Solo se está utilizando aquí y tal.
Deberíamos levantar el proyecto en local y verlo.
Si no, guayco que nos diga.
A ver dónde lo está utilizando y lo veremos.
Vale.
Un trace.
Ta, ta, ta.
Forma pen.
Bueno, esto parece...
Este helpers...
Index helpers...
Yo creo que este helpers se podría mejorar, ¿eh?
Este helpers es muy general.
Y veo que tiene cosas realmente de lógica, ¿no?
Este load notes igual se podría...
Y este file upload no sé si se podría mejor poner en algún sitio.
Este file upload veo que es contra la API de Cloudinary.
Esto es justamente para subir la imagen, ¿eh?
Hooks.
Vamos a ver qué hooks tiene.
Ah, mira.
Este hook es muy...
Este creo que uno muy parecido hicimos en su día en el bootcamp, ¿no?
Que esto, básicamente, use for, initial state.
Entonces, bueno, este está muy bien.
Este custom hook es muy, muy, muy interesante.
Hay gente que pregunta que qué hace el asterisco.
Lo pregunta Juan86.
Mira, el asterisco este que habíamos visto, esto es una función generadora, ¿vale?
Lo que significa la función generadora, esto, es que cada vez que ejecutes el showDates este,
podrás recuperar el siguiente valor.
O sea, tenés un iterador y en este iterador podrías ver, primero, cuando se ejecute, te devolverá fecha vía
y la siguiente vez que tú ejecutes showDates, te devolverá fecha num.
O sea, que es una función generadora.
Eso es lo que es.
Por eso es un poco especial.
Entonces, cuando lo...
Al final puedes ver si te quedan valores, ¿ves?
Generator.
¿Ves que lo pone ahí?
Te podría decir si quedan valores para devolverte y cosas así.
Es un recurso interesante.
Lo hemos visto en algún directo y hemos hecho alguna práctica.
Pero en este caso, veo yo, no creo que no...
El generador lo usa en el componente NodeSatBar.
Vale, gracias.
Perfecto.
Así le echamos un vistazo y vemos, ¿vale?
Muchas gracias.
Guayco.
Vale, lo utiliza por aquí.
Vamos a ver.
Me gusta este...
Me gustan los componentes.
Tienen buena pinta los componentes.
Tienen buena pinta.
Fecha completa.
¿Ves?
Este fecha completa igual también, ya que tenías por ahí un helper para las fechas,
pues no sé si tendría sentido sacar todo lo que sea fechas por ahí y tal.
A ver, ¿dices que está aquí el show dates?
Vamos a ver.
Show dates es en NodeSatBar.
Vale, vamos a buscarlo.
Ah, pues aquí no me sale, ¿eh?
Show dates.
Yo creo que es que a lo mejor aquí no lo terminaste de poner o está en otro sitio.
Porque aquí a mí no me lo encuentra.
Al menos en master.
A lo mejor lo tienes por ahí.
Porque parece que aquí lo haces así.
Fecha completa.
Y a lo mejor lo hacías de otra forma.
No lo sé.
Ah, en journal entry.
No pasa nada.
En journal entry.
Aquí.
Muy bien.
Show dates.
Init gen.
¿Veis?
A ver.
Está bien, ¿no?
Guayco.
O sea, es interesante que a lo mejor lo has hecho para aprender sobre generadores.
Funciones generadoras.
El tema es que en este caso yo no lo recomiendo.
Esto no tiene mucha historia, ¿vale?
En este caso yo os recomendaría que en lugar de tener un init gen.
Es que aquí no tenéis ningún.
Esto no os está dando ningún valor.
Solo os está complicando.
Entonces, en lugar de hacer este show dates así.
Tal y como lo veo aquí.
O sea, yo lo que haría aquí más fácil, ¿vale?
Esto está interesante por el show dates y bla, bla.
Bueno, si le quito el export.
Vale.
Vale.
Aquí.
Fecha num.
¿Cómo que semicolon?
¿Qué le falta semicolon?
¿Qué ha pasado?
¿Qué?
Me ha quitado.
Es que el run.js este no va muy bien, ¿eh?
Ahora.
Vale.
En lugar de hacer una función generadora, que a ver, está bien, ¿eh?
No pasa nada.
No pasa nada.
Pero yo creo que aquí sería mejor.
Sería en lugar de show dates, no queremos show dates, sería get date with, get date, incluso, get date, a ver, date frame.
Esto es el day y el with date.
Date info.
Pues yo aquí directamente devolvería esto, ¿eh?
Pues yo aquí directamente devolvería esto, ¿eh?
Devolvería el fecha num, que a lo mejor le podéis poner date, day number, no sé.
Para no mezclar castellano con inglés, yo pondría algo así.
Que bueno, esto ya cada uno.
Y date...
Bueno, que es que no sé si esto devuelve el solo...
No sé qué devuelve exactamente.
A ver, ¿qué devolvía?
Fecha día, fecha num.
Sí, yo creo que sí.
Date number y date weekday.
Bueno, pues algo así, ¿vale?
Date number y date weekday.
Y lo bueno de esto es que ahora, cuando tenéis esto, si cuando lo utilicéis, lo podéis utilizar de una forma más declarativa y ya...
Bueno, declarativa o expresiva y ya no necesitáis comentar el código.
Porque claro, las funciones generadoras son que complicadas de entender.
Que yo creo que Waiko lo ha hecho para practicar, ¿sabes?
Voy a probar a ver qué pasa.
Que me parece bien, ¿eh?
Pero bueno, ya que estamos, para deciros.
Las funciones generadoras tienen casos de uso muy específicos.
Y este no es uno de ellos.
Y en este caso, yo lo que haría sería algo más así.
¿Para qué?
Pues para saber exactamente lo que estoy devolviendo.
Y ya está.
Así en este caso.
Pero ya os digo, ¿eh?
Yo estoy seguro que Waiko no lo hizo más que...
No es que dijo, este es el caso perfecto.
Sino que dijo, ah, pues voy a probarlo para entenderlo.
Ya está.
Que me parece genial.
Muy bien.
En general, bien, una recomendación que yo os haría, ¿vale?
Que veo muchas veces que la gente hace.
Y en este caso, Waiko veo que también lo hace mucho.
Bueno, yo, está utilizando React Redux y está muy bien.
Y el tema es que yo, estos Use Dispatch y esto, este Use Dispatch,
yo intentaría esto de alguna forma, a lo mejor tener un custom hook
y separarlo más por el producto en sí.
O sea, por ejemplo, en lugar de tener aquí el Dispatch,
el Use Dispatch, y este Dispatch lo que tienes aquí es el Activate Node,
lo que yo crearía en algún sitio sería un custom hook, ¿vale?
Un custom hook que sería Use Journal Info, por ejemplo, ¿vale?
Y este, que tuviese más el Use Dispatch, y entonces que tuvieses aquí,
por ejemplo, Activate Node.
Y al activar la nota, pues que le tengas que pasar todas estas cosas, ¿vale?
ID, no sé qué, no sé cuánto.
Y esto, pues, Activate Node.
A ver, que esto tendría que ser un Use Callback para evitar problemillas, ¿vale?
Que esto dependería de unas cuantas cosas, y devolver el Activate Node.
O sea, ¿por qué haría esto?
Porque si al final lo tienes, esto es como un detalle de implementación de tu estado
que no es tan importante que sepa o debas saber el Journal Entry.
Si el día de mañana, por lo que sea, os cargáis el Real Redux,
ahora ya tendréis toda esta información aquí, ¿veis?
Que es como, esto se le llama, a ver, esto se le dice más a las carpetas,
lo de Screaming Architecture, ¿no?
Porque la arquitectura la ves en las carpetas.
Pero en este caso pasa un poco lo mismo, ¿no?
Es como que en todos tus componentes yo sé que estás utilizando Redux.
Una buena, un buen smell, ¿no?
Una cosa que dices, esto tiene buena pinta,
es cuando cuanto menos sabes de qué estado global utilizas
y cómo lo utilizas y tal, ¿vale?
Porque así el día de mañana, si tú lo tienes en un Custom Hook,
solo tendrás que tocar este Custom Hook.
Y además, al tenerlo modular, imagínate, el Use Journal Info este
podría utilizar Redux y a lo mejor otro Custom Hook
lo puedes migrar a otro estado global
o empiezas a utilizar React Context o lo que sea.
Y te puede ayudar a hacer esta migración sin que sea tan complejo.
Entiendo que esto muchas veces se hace porque es mucho más rápido,
pero además, al tenerlo en Custom Hook,
toda la lógica de cómo hacer el selector y todas estas cosas te puede ayudar.
Pero bueno, eso entiendo que hay veces que no puede ser posible
porque pillas más estado o lo que sea y tal.
Pero bueno, para tenerlo en cuenta, ¿eh?
Que os puede ayudar, que os puede ayudar.
Vale, he visto por ahí una cosa.
Vale, Handle Logout.
Veo que esto no sé si es Tailwind.
No, Tailwind no será o se parece.
No sé.
No sé qué es.
Vale, Firebase Config.
Bueno, esta Config es normal.
Aquí.
Hostia, es raro que esto te funcione.
Es raro que te funcione, al menos en modo Dev.
Porque en modo Dev hay veces que tienes que hacer esto de...
Tienes que poner aquí.
Firebase.apps.length.
Porque en modo desarrollo, como tienes el ver los cambios y refrescar automáticamente,
a veces se vuelve un poco tonto.
Pero bueno, si te funciona así, pues nada, fantástico.
Muy bien.
Use Font.
Aquí tenemos los Reducers, ¿vale?
Con Switch.
Ya sabéis que hay otras formas en lugar de utilizar el Switch.
Pero bueno, Switch está bien también.
Action, Payload, no sé qué.
Vale.
Default.
A ver este.
Notes Reducer, que este a lo mejor es un poco...
Vale.
Bueno, son Reducers normales y corrientes.
Yo una recomendación que os hago en los Reducers es que...
Los Reducers que además quedan muy, muy, muy largos.
Al menos a mí me gusta más así, ¿eh?
En los Reducers que son muy largos.
Cuanto más largos son, son como demasiado densos.
Y cuanto menos te repitas, casi que mejor.
Entonces, la Action.
En lugar de estar todo el rato Action Type, no sé qué, Payload y tal.
Yo todo lo que me pueda quitar de no repetir, ¿sabes?
Yo lo...
Vamos, lo tengo clarísimo.
Entonces, por ejemplo, en la Action, yo aquí ya haría esto de Payload.
El Type total solo se utiliza una vez.
Pero el poder quitarte el Payload de todos los sitios, es que en lugar de estar repitiendo todo lo que sea que te puedas repetir, por poco que parezca, a mí ya me parece que se hace un poquito mejor, más legible.
Pero bueno, que tiene buena pinta, ¿eh?
Que son pequeños detalles que al menos yo, a mí me ayudan.
Mira, aquí la he hecho.
Bueno, muy bien, vale, vale.
Está bien, está bien.
Routers.
App Router.
Cuando hay 5B South, cuando cambia, tal, dispatch, check-in, espere, vale, las rutas.
Hostia, ¿esto es de Next.js?
No, no utiliza Next.js, vale.
Utiliza, pensaba que era Next.js y tal, pero no.
O sea, que tiene las rutas por ahí, vale.
Mira, rutas que tengan autenticación.
Hombre, la verdad es que parecía un proyecto que es muy sencillo y, hombre, tiene su historia.
Tiene su historia, mira, con rutas protegidas y todo, está bien.
Mira, aquí tenemos la Store para DevTools.
Bueno, todo esto lo hemos visto en el FullStat Bootcamp, ¿eh?
Muy bien, muy bien.
No sé si ha sido por eso, pero mira, aquí tiene Tailwind.
Muy bien, muy bien.
Craco, Craco.
Vale, para Tailwind, auto-prefixes.
Muy bien, bueno, pues ha tenido buena pinta.
Yo creo que de diseño hay que darle un poquito de cariño, ¿vale?
Este verde hay que darle cariño.
Ha sido un poco raro el tema de que yo al poner la imagen, en cuanto he puesto la imagen,
pues ha dicho, ah, pues lo voy a guardar.
Esto ha sido muy raro.
De hecho, esto ya es un tema de UX, ¿eh?
Pero yo, los botones aquí, es un poco complicado, ¿eh?
Es un poco complicado.
Yo los tendría, lo tendría todo.
Es que este header debería ser, ¿no?
Si aquí no aparece nada, que ahora de repente aquí te aparezca esto, es un poco raro.
No sé si lo tendría abajo, lo tendría dentro del formulario o algo así.
Soy daltónico.
Bueno, pues eso, no sé, lo pondría de otra forma.
También labels, ¿vale?
Hacerlo más accesible.
Ahora ya no me acuerdo, ¿ves?
Yo estoy editando esto.
Ya no me acuerdo.
Esto era el título, ¿era qué?
Un poco de padding por aquí.
Bueno, un poquito de todo, ¿eh?
Pero bueno, muy interesante.
A ver, logout.
Muy bien, muy bien.
Muy bien, muy bien, Guaico.
Muy bien.
Venga, vamos con el siguiente.
A ver qué tal.
A ver qué tal.
Vamos a ponerle a Guaico su check.
¿Vale?
Ese proyecto me pareció verlo en Udemy.
Puede ser, ¿no?
Que a lo mejor sea algún proyecto de Udemy que lo haya hecho...
Se parece a uno de Fernando Herrera.
Está re bien.
Felicitaciones.
Bueno, pues ahí hay que darle todo.
Y a mi porfolio lo hice en Next10 y Firebase.
Dice Cars.
Y tiene traducción.
Soy nuevo en esto y es la primera página que hago.
Así que hasta el momento he realizado puros challenges.
Venga, vamos a por Carlos.
Carlos, vamos a ver tu porfolio.
¡Oh!
Hay una cosa que no entiendo muy bien.
No tiene nada que ver con Carlos, pero lo he visto.
Ya refrescando.
Muchos porfolios de gente que está empezando, os encanta animar las cosas.
Como que os encanta.
Yo creo que, no sé por qué es.
No sé si es por el tema de que empezando dices, hostia, es que animando la gente.
Se cree que no sé qué.
No animéis tanto, ¿sabes?
O sea, porque cuando se anima tanto, parece que, no sé, a mí me parece que más un videojuego y te...
¿Sabes?
Como que te abruma mucho.
Pensad que este tipo de cosas tiene que ser más natural.
Puede haber animación, pero no tan bestia.
Podéis animar una cosa.
Pero fíjate que yo he entrado a la de Carlos y es que yo ya, de primeras, es como...
¡Pum!
¡Pum!
¡Pum!
¿Sabes?
Me ha animado.
Es que lo único que no me ha animado es esto de lo de español, ¿no?
Pero me anima el muñeco de aquí.
Esto.
Luego, de repente, van apareciendo aquí las cosas.
Digo, vale, vale.
Ya ha terminado.
Ya ha terminado.
Y voy bajando y siguen apareciendo cosas.
Y me atacan por todos los lados y por el otro y tal.
Y él conta a mí ya al final.
Dice, toma.
¡Pum!
En toda la boca.
Pues eso.
Que no.
No hace falta.
No animéis tanto.
Si es que...
¿Sabéis lo que pasa?
Que cuando se anima tanto, parece que se aprecia menos.
Porque si solo animáis una cosa, se aprecia más.
Porque dice, esta animación, ¿sabes?
Con más cuidado y ahí...
Pues eso.
Bueno, Carlos.
Vamos a empezar.
Esto no era...
Bueno, Carlos obviamente lo ha hecho porque me lo ha recordado.
Pero, pero...
Pero es un comentario general, ¿eh?
Que veo mucho en porfolios de gente que está empezando que le gusta animar.
Vale.
Hola y bienvenido.
Esto, Carlos, te lo puedes quitar.
Vale.
Hola y bienvenido.
Soy Carlos Ferreira, desarrollador webfrontend y me encanta a la innovación.
Mira...
¡Carlos!
Vamos a ver.
Carlos.
Si vas a poner un texto, ese texto tiene que estar para lamerlo, ¿vale?
No me puedes poner que hola y bienvenido.
Soy Carlos Ferreira, desarrollador webfrontend.
Que dice, bueno, bien.
Y luego dice, y me encanta a la innovación.
Mira algunos proyectos.
No, hombre, pon cuatro líneas, pero que sean las cuatro líneas.
Joder, que ilusionen al guionista del diario de Noah.
O sea, no, me puedes poner esto.
Y me encanta la innovación y mira algunos proyectos.
No, Carlos, venga.
Hay que poner un texto mejor.
Soy Carlos Ferreira.
Soy Carlos Ferreira.
No sé, si no, no pongas tanto.
Mira, mira algunos proyectos esto fuera.
Y me encanta la innovación.
Bueno, me encanta la innovación.
Suena tan vacío.
¿Sabes?
Suena como...
Tenía que poner alguna cosa.
Oye, muchas gracias por la write.
Desarrollo útil.
Te mando un abrazo.
Muchísimas gracias, hombre.
Y bienvenidos a todos los que os acabáis de apuntar.
Estamos haciendo revisión de porfolios.
Estamos con el de Carlos Ferreira.
Y estamos aquí intentando ayudarle para que mejore su porfolio.
Estamos con su texto.
Que le encanta a la innovación.
Hombre, a ver.
Es que esto...
Me encanta la innovación.
¿Ok?
Bueno, me encanta la innovación.
Es que como suenaba muy general.
Muy general, ¿no?
Me encanta la innovación.
Luego, es que aquí hay demasiado texto.
¿Sabes?
Y cuando se hace muy grande y tal.
Además, tiene el salto de Frontend.
Soy Carlos, desarrollo web Frontend.
Y a lo mejor luego...
Es que hay más texto aquí todavía.
Soy una persona muy comprometida con mis trabajos.
Organizado y listo para nuevos retos.
Que amplí mis conocimientos por lo que busco.
¿Carlos?
¿No?
¿No?
No puedes tener fallos de ortografía, ¿vale?
No.
No, no.
No puede ser.
O sea, al menos te lo tienes que leer.
Te lo tienes que leer.
O que te lo lea alguien.
Dice, oye, busca...
Léetelo a ver si está bien.
Además, es que...
Mira, ¿y cómo que...?
¡Carlos!
¿Cómo que JavaScript sin T?
Te como.
Te como.
Me da igual lo demás.
Vamos a ver.
Me da igual lo demás.
Pero que me pongas JavaScript y te comas la T.
No puede ser.
Y Spring Boot.
Pero...
Pero, hombre.
Pues búscalo.
Pero si mira, fíjate.
Spring Boot.
Carlos.
Amigo Carlos.
¿Vale?
Mira, si es que tienes aquí hasta la chuleta que te dice que tiene T.
Hay que darle una revisada a esto.
¿Vale?
El texto hay que revisarlo.
Me gusta que es minimalista, blanca, no tiene estridencias.
Estos iconos es un poco raro, ¿vale?
El mobile...
Uf.
Muy regular.
Muy regular.
Esto...
O sea...
Yo incluso lo haría...
Esta letra no se lee móvil.
Vamos.
Ni usando lupa, ¿eh?
A ver.
No.
No, no, no, no.
A ver, está bien porque me imagino que has aprendido NextGS y tal.
Pues eso.
Quitamos esto.
Quitamos toda la falta de ortografía.
Le devolvemos su T a JavaScript.
CSS.
Hay mayúsculas.
HTML también.
Frameworks.
No le ponemos la mayúscula.
¿Qué he usado?
Son ReactGS, coma...
¿Pero por qué ReactGS no merece la coma?
NextGS, coma...
Bustra...
Punto final.
¿Vale?
Es súper...
Esto no es por Carlos, ¿vale?
Pero la ortografía...
Eso entra por los ojos, ¿vale?
Entonces, no cometáis faltas de ortografía en vuestro portfolio.
Jamás, nunca, never, ni se os ocurra.
Y devolverle la T a JavaScript, ¿vale?
Vale.
Aquí, ya te digo aquí que hay estos iconos.
Sobre todo este, yo creo que le quedaría mejor.
Le quedaría mejor seguramente sin el...
Hay algunos...
O sea, si la cosa es a blanca.
O sin el fondo.
No sé.
Está como un poco desordenada, ¿no?
Aquí podrá ver algunos proyectos que he realizado con fines educativos.
Actualmente sigo realizando más proyectos.
Vale.
Muy bien.
Bueno, no está mal.
Ahí unos proyectillos.
Muy bien.
Bueno, un montón además.
Oye, este parece bonito.
Este icono...
Estos iconos no se entienden mucho.
Los haría un poquito más grandes.
Y ya que está, que sea clicable toda la card.
¿Vale?
Que sea clicable toda la card.
Ah, es que además es un slide infinito.
Este contact me, más simple.
¿Esto qué es?
Esto es...
Esto es como...
¿Cómo se llama?
Joder, ¿cómo se llaman las noticias estas que te hacen un clickbait?
Click me.
Click me.
Ah.
¿Qué esconderá este botón que hay aquí?
Hay aquí debajo.
Click me.
Hazme clic.
Hazme clic y lo descubrirás.
Ah, no sé si hacerlo.
¿Le doy?
Vale.
A ver.
No hagas esto.
Si tú quieres que la gente te contacte, no le pongas un click me.
¿Vale?
No le pongas un click me porque da miedo.
Yo, al click me aquí me parece como que me va a dar algún regalo o algo.
Yo, este formulario, pues lo dejas siempre disponible.
Te quitas esto, quitas este botón, dejas aquí este formulario aquí y no lo pongas
en...
No sé por qué está esto en inglés, pero si no estás utilizando inglés en toda tu
página, pues no utilices aquí inglés.
No tiene mucho sentido.
¿Vale?
Y algunas imágenes se ha obtenido.
Esto me parece muy bien.
Esto.
Aquí hay un texto.
¿Qué ha pasado aquí?
Follow me.
Está en mensaje.
No lo veis.
No lo veis, pero hay un...
Justo detrás mí hay un mensaje escondido.
Y aquí, esto no hace falta, ¿vale?
O sea, bueno, el enlace al repositorio puede ser interesante, pero que no hace falta que
pongáis el año donde lo habéis hecho.
Pero hay mensajes ocultos.
Mira.
Os voy a enseñar el mensaje oculto.
Hay mensaje oculto aquí.
Aquí.
Ah, mira.
Ahora se ve bien.
Si lo hace muy grande, llega un momento que no se ve bien.
Mira, ¿ves?
Y entonces tienes que...
Follow me.
Y me ha convencido.
Le voy a seguir.
Le voy a seguir.
No, pero bueno.
Bueno, pues eso.
Que hay que simplificar.
Está bien que sea una sola página.
Está bien los iconos.
Yo los cambiaría.
Yo...
Mira, otro consejo.
Esto no sé si está Solomón por ahí.
Todavía se ha ido ya a descansar.
Pero algo mejor.
No hay nada mejor que texto.
¿Vale?
Entonces, esto, los iconos son muy difíciles a veces de entender.
No sabes a qué te refieres.
Vale.
Este es contacto.
Pero esta carpeta, ¿qué quiere decir?
Ah, son los proyectos.
Bueno.
Y esta mano así, que es que me va a dar un guantazo.
¿Qué pasa, no?
Bueno, pues lo mejor, yo creo, y además te ayuda a hacer la web más grande, ¿no?
Con más texto y más fácil de escanear.
Pues poner aquí, inicio, sobre mí, proyectos, contacto, ¿vale?
No hay nada mejor que un texto.
Mejor que cualquier icono que os podáis echar a la cara.
¿Vale?
English.
Bueno, bien.
Está traducida, lo cual está bien.
Vale.
Bueno.
Aquí veo que sí que tiene este texto.
¿Vale?
Bueno.
Vamos a ver un momento un poco el código, ¿vale?
Que nos hemos enfocado mucho en el diseño.
Un texto dice más que mil iconos.
Muy bien, Asdolo.
Totalmente de acuerdo.
Totalmente de acuerdo.
Venga, vamos a verlo con el GitHub 1S.
Este.
Y vamos a revisarlo.
Bueno, veo que tiene Firebase.
¿Pero para qué tiene Firebase?
¿Tiene Next.js?
¿Tiene Firebase?
Framer Motion, claro.
Next Translate.
Swiper.
SaaS.
No sé si el porfolio da...
A ver, está bien que vaya pillando, pero...
Message About Me.
Vale.
A ver, una cosa.
Mira, una cosa que ya he visto.
He entrado ya al primer archivo y ya he visto algo, ¿vale?
No tiene linter.
Esto está prohibido, ¿ok?
Un proyecto sin linter, bueno, pues es como una ducha sin agua, ¿vale?
O sea, no tiene mucho sentido.
Tú te enjabonas, pero empiezas...
Yo aquí ya veo cosas que mi talk, pues me pone nervioso.
De hecho, ¿ves?
Me está ya...
Vamos a ver.
Yo es que veo unas líneas con punto y coma y otras sin punto y coma.
Y yo qué sé, esto es como si pones el pan de la hamburguesa, abajo le pones pan y arriba no se lo pones y lo pones también abajo.
Yo qué sé, es que no tiene sentido.
Y lo mismo con los espacios, ¿vale?
Estas cosas...
Es que esto es gratis.
Esto es muy fácil.
Le instalas un linter y se lo pasas.
Y estas cosas, pues te las arregla.
Y el estilo de tu código, pues ya es más homogéneo.
Lo mismo aquí, ¿no?
Esto no tiene espacios.
Entonces, no sé si es que no quiere que tenga espacios.
Aquí muchos espacios.
Este return aquí en la misma línea.
Esto te lo arregla un linter.
Aquí dos espacios, porque, bueno, en motion necesitan espacio para oxigenarse.
Vale, pues podéis utilizar...
Mira, si no queréis configurar slint, porque es muy complejo, utilízate estándar.
Sobre todo si no vais a utilizar puntos y coma.
A mí estándar me encanta.
Se configura en un minuto.
Un minuto y lo tenéis.
Así que ya sabéis, ¿vale?
Módulo CSS.
Pero tiene módulo CSS, pero también utiliza SAS.
También CSS también puede tener un linter.
Y te puede evitar tener aquí espacios vacíos y cosas así.
Y seguro que detectar algunos errores.
Este all es que no es necesario.
Esto lo puede eliminar, ¿eh?
Con el max width ya lo tendrías.
Vale, a ver.
A ver, yo esto nunca...
Esto es una cosa que muchas veces gente que empieza lo hace.
Y entiendo que es porque...
Bueno, por lo que sea, ¿no?
Pero no hace falta dejar tantos espacios.
No...
¿Sabes?
O sea, el coronavirus no es algo que afecte a las líneas de código.
Y no necesitan una separación para, yo qué sé, para que no se contagien.
Así que nada, las dejáis juntitas y ya está.
Las dejáis juntitas.
Que no les pasa nada.
Esto os lo arregla el linter sin ningún problema.
O prettier y ya lo tenéis.
¿Veis?
Aquí un poco lo mismo.
De hecho, ¿veis?
Esto.
Esto también os lo arregla el linter.
Y esto no tiene mucho sentido.
Lo tenéis así.
Y esto al final se puede cerrar.
Y se puede cerrar a sí mismo y queda mucho mejor.
Y ya está.
Así que nada.
Darle un...
Darle una vueltecita.
A ver, body and head.
¿Vale?
Head.
Aquí tiene estilos.
Aquí...
Es un poco rara la mezcla, ¿no?
De jsx con lo otro.
Pero bueno.
Si el estado aquí...
Vale, aquí...
Use for xgeragdo.
Tía.
Cuando haces submit.
Validation error.
Vale.
A ver qué más hay por aquí.
Follow me con dos es ahí.
Vale.
Vale.
Aquí, si tienes un target blank, aquí te falta esto.
Esto hay que arreglarlo, ¿eh?
Esto que lo tienes así.
Y esto habría que ponerle un rel nofollow...
Ahora no me acuerdo del otro.
Nofollow no...
No me acuerdo del otro.
Pero hay que ponerle el rel, el nofollow y el otro, ¿eh?
Cuando es un blank...
El noreferrer.
Eso.
Muchas gracias, Thor.
Muchas gracias.
No, el noindex no.
Noreferrer.
Esto lo podéis...
Esto del 2021.
Nada de falta.
Así la gente no hace falta que sepa el año que lo hiciste.
Vale.
Mucho...
¿Ves?
Mucho...
Mucha animación.
Yo me petaría la mitad.
Que a ver, que está bien, se ha aprendido.
Configuraciones, URL...
Bueno, está bien.
Estas configuraciones aquí.
A ver, JavaScript aquí.
JavaScript con la S en mayúscula, ¿eh?
Que queda...
Que es el nombre oficial.
Proyecto, Firebase...
No entiendo muy bien para qué utiliza Firebase.
Para loggearse.
Vea, ¿no?
No sé para qué es esto.
No sé si es para los proyectos.
Ah, sí.
Para los proyectos.
Esto lo podéis hacer en estático, ¿eh?
No opener, no referer.
Muy bien.
Menos mal que tenemos gente aquí en el chat.
¿Vale?
Esto.
Lo que tienes que poner aquí es esto.
No opener, no referer.
Vale.
Sí, yo los proyectos...
A ver, si es que...
¿Cuándo vais a actualizar esto?
Pues si...
Igual que habías hecho esto, aquí puedes tener los proyectos perfectamente.
Y te quitas de complejidad...
Vamos.
Buah.
Buah.
Te quitas un montón de complejidad.
Use near screen.
Mira, este...
Este hook es bastante...
Bastante chulo.
Una API.
Hombre, el hello.
Quítalo, ¿no?
Si no vas a utilizar la API del hello este.
¿Vale?
Buah.
Mucha separación.
No me entero.
Tanta separación.
Es muy difícil escanear.
¿Vale?
Así que...
Fuera.
El...
¿Por qué se ha de usar el...
El...
El...
Esto es un tema de...
De seguridad.
¿Vale?
Esto es un tema de que el no opener, no referer, es porque podías hacer que al seguir...
No sé cómo es esto.
A ver.
No opener.
No opener.
¿Te lo explica Lighthouse?
Es un tema de seguridad.
¿Qué es el no...?
Mira.
Vamos a leerlo.
Va.
Es un atributo de HTML que nos ha habido hasta protegido de cualquier vulnerabilidad
que se produzca al colocar un enlace externo dentro de nuestra página web.
Porque a través de esa página pueden atacar la tuya propia.
O sea, que es un poco...
¿Ves?
Están preguntando.
¿Qué es el no referer?
El no referer básicamente es que no envía el referer.
Es otro atributo de opinión no opener para evitar que nuestra información personal
a la nueva pastaña que dirigimos.
Esa es la no opener.
Y la no referer...
No referer...
Entiendo que es para que no indique el referer.
Que al referer al final es que le pone la URL desde la que viene.
Claro.
Es que imagínate que tú tienes un enlace y estás en una página que es privada o lo
que sea.
En el referer le puedes enviar información sobre lo que tengas.
La búsqueda que ha hecho el usuario.
Puedes tener bastante información en la URL con el referer.
Y por eso, si vas a irte a otra página, pues no tienes por qué exponer.
Básicamente, esos serían los motivos.
A no ser que controles la página a la que va.
Bueno, Carlos.
Pues ahí te hemos dado un montón de feedback.
No sé.
Aquí se le ha colado el use state.
Set, show, dialogue, false y true.
Como un archivo.
Pero bueno.
Muy bien, Carlos.
Ahí te hemos dejado.
Espero que te haya ayudado.
Que te haya ido bien.
Gracias por compartirlo.
Vamos con Martín Devaluado.
Hostia, ese nombre Martín.
Buen día.
¿Cómo andan?
Les dejo una web que hice para recompilar información.
Recompilar.
O sea, es compilarla dos veces.
Recopilar.
Sería recopilar.
Vale.
Información, recursos, canales, comunidades y más de Fronten.
FrontenHell.versell.app
Que tenga un buen día.
Bueno, bueno.
Aquí hay mucha gente que le ha dado muchos likes y muchas historias.
Vamos a ver.
FrontenHell.
Vale.
Ya sé cuál es.
Esta la he visto por ahí.
Vamos a ver si tiene XCAP también para revisar.
FrontenHell.
Para revisar, ¿no?
El FrontenHell.
Pues me parece que no.
FrontenHell.
¿Cómo se llama?
Martín.
FrontenHell.versell.app.
A ver si la encontramos así.
No.
Mate.
No tiene el código abierto.
¿Por qué?
¿Por qué FrontenHell?
Martín.
No sé.
Si alguien encuentra el repo, que lo pase.
Vale.
Vamos a ver.
Primero.
Ah, capaz está en GitLab.
Buena FrontenHell.
GitHub.
Bien visto.
Parece que no.
Parece que no.
Bueno.
Si alguien lo encuentra, que me lo diga.
Venga.
Vamos a ver primero.
Vale.
Bueno.
Al menos es mobile.
O sea, que se puede ver en mobile.
Creo que un poquito pequeño.
Un poquito pequeñito.
La verdad.
FrontenHell.
¿Por dónde empezar?
Recomendaciones acerca de cómo, cómo, cómo, cómo.
Creo que tiene acento.
Cómo comenzar y o avanzar en el mundo de Fronten.
¿Vale?
Comienzo.
HTML.
¿Qué le pasa a esto?
Vale.
Ya he visto una cosa que a mí al menos me pone...
Veo que está hecho con Chakra.
Cuando son botones, si son botones, tenéis que cambiarle sí o sí el cursor.
Porque si no me cambies el cursor...
De hecho, claro, estos son DIPs.
Los DIPs no son clicables.
Por lo tanto, ya semánticamente no está bien esto.
Si esto me lleva a otra URL, ¿veis?
Que me ha llevado a otra URL que pone aquí Start.
Pues no hay nada mejor.
No hay nada mejor que un Anchor.
Si esto es una URL, pues ¿por qué le ponemos un DIP?
Pues en lugar de un DIP le ponemos aquí un Anchor.
HRF barra Start.
Ya está.
Beneficios que tiene esto.
Ya el cursor cambia al Pointer.
Justamente.
A ver, lo podemos hacer en un momento.
Obviamente puede ser que se rompa el estilo.
Pero vamos a ver.
Mira, fíjate.
O sea, solo he hecho esto.
Solo he hecho esto, que sea un Anchor.
Y ya está.
Fíjate.
Si ya me sale aquí mi cursor en condiciones, ya sé que me va a llevar a algún lado.
Y, hombre, ya entiendo mejor que esto...
Es que si no, si yo me pongo así...
Y además me sale el cursor del texto.
¿Ves?
Me sale el cursor del texto.
Me sale este cursor.
Es muy raro.
Yo no sé que esto es clicable.
Por más hover que tenga.
De hecho, el hover puede ser como...
Ah, bueno, qué divertido.
Pero veis, este ya es otro rollo.
Porque ya ves ahí el...
Bueno, ahora es porque lo estoy haciendo grande.
Pero cuando haces eso, ves que ya tienes...
Ah, vale.
Pues todo a algún lado.
¿Vale?
Pues bueno.
Muy bien.
Vale.
Bueno.
Frameworks.
Bueno, son todos el mismo para atrás.
Además veo que no es una SPA, lo cual no sé por qué.
No sé por qué no ha hecho una SPA.
¿Veis que se recarga todo?
Mira, si yo le recargo aquí y entro a Framework y me veo aquí y le doy atrás, ¿ves?
Se ha recargado todo otra vez.
Esto es un poco raro, ¿eh?
Esto se puede arreglar.
Esto se puede arreglar.
Esto se puede mejorar bastante.
¿Por qué?
A ver, no hay mucha necesidad de que vuelva a recargar.
Si esto es una SPA, si total, la Home ya estaba cargada.
O sea que yo lo que haría justamente es...
Este...
De hecho, este botón.
Este botón de aquí, ¿qué hace?
Mira.
A este sí que le pone un Anchor.
Es que tiene delito.
A este sí que le pone un Anchor.
Vale, pues este podría no ser un Anchor.
Este incluso podría hacer un Window Back.
No, History Back, creo.
A ver, que a lo mejor no...
Esta no es la mejor forma, ¿eh?
Esta no es la mejor forma.
¿Ves?
Pero ahora no se ha recargado.
Al menos hemos mejorado un poco la experiencia del usuario.
Si ya sabes que solo pueden entrar a partir de la Home,
pues haces eso y ya está.
Bueno, el diseño me gusta.
A ver, es sencillote.
Yo lo del enlace, o sea, lo veo clarísimo.
Canal de YouTube.
Muy bien, ¿eh?
Mi Dudez fue el primero.
Ahí está, bravo.
Bravo, se ha ganado.
Mis respetos.
Muchas gracias.
Muchas, muchas, muchas gracias.
Mira, y Twitch.
Qué grande, hombre.
Más majo.
Más majo.
Sitios de práctica.
Twitter.
Mira, mi Dudez.
Ahí salgo.
Ey, aquí estoy.
Qué grande.
Bueno, está bien.
Yo lo que cambiaría es eso, ¿eh?
Lo de la SPA.
Eso está interesante.
Me hubiera gustado ver el código.
Ah, mira.
Han encontrado el código.
Lo han encontrado.
Lo han encontrado.
Venga, vamos.
Venga, vamos.
Vamos a trabajar.
Vamos a trabajar.
Git clone.
¿Queréis que codeemos un poco?
Sí, podemos.
Que no sé si esto necesitará configuración de lo que sea.
Venga, vamos a intentarlo.
Vamos a ver si somos capaces de levantarlo y le echamos un vistazo al código.
Venga.
Mientras se instalan las dependencias, vamos a ver.
Claro que sí.
Me refiero, hombre, de nuestro TypeScript y todo, ¿eh?
Muy bien.
TypeScript.
Y esto es como para optimizarlos, ¿vale?
Estos son los estilos.
Los tiene separados.
Imágenes estáticas.
Páginas.
Guau, un montón de páginas.
Un montón de páginas.
Igual se me corta un momento, ¿eh?
Porque cuando se aconseja usar un botón y cuando una A.
Súper fácil.
Una A es cuando tú quieres dirigir al usuario a una ruta.
Punto.
Ya está.
Un botón es cuando tú no quieres dirigir a un usuario a una ruta,
pero estás accediendo a una acción.
Pues ya está.
Un botón.
Hay veces que puede ser que a través de una acción luego se redirija al
usuario y puede tener sentido.
Por ejemplo, un formulario de login.
Primero hace el inicio de sesión, ¿no?
Cuando inicias sesión, pues le das al botón.
Y una vez que ha iniciado sesión, lo rediriges programáticamente a otra ruta.
Pero si tú lo quieres llevar directamente a una ruta, tienes que utilizar un Anchor.
Ya está.
Es así de sencillo.
No tiene más.
Vale.
Mucho TypeScript.
TypeScript, pero tampoco tiene mucho TypeScript.
O sea, es una cosa extraña, ¿no?
TypeScript, pero sin TypeScript.
A ver otra cosa.
¿Ves?
Es que tampoco tiene un linter.
Pero ¿por qué no os gustan los linters?
¿Pero qué os pasa con los linters?
Que si es que no lo cobran.
Mira, esto ni siquiera lo está usando, el head.
Vale.
Yo creo que React, esto no hace falta importarlo, ¿eh?
Estoy bastante seguro.
Me lo voy a cargar, a ver qué pasa.
A ver qué pasa.
Vamos a poner un pie en randev.
Pero ya os digo que yo creo que no es necesario.
Esta video has been deprecated.
Bueno, tiene cosas deprecadas aquí, bla, bla, bla.
Vamos a ver si esto lo levanta.
Parece que sí.
Vamos a ver.
¿Sí?
Súper raro eso.
Habéis visto que ha salido primero un fondo.
Es que parece que carga un fondo sin ninguna necesidad.
Un poco raro.
Bueno, me he cargado en recursos.
Me he cargado...
¿Veis que me he quitado React y tal?
Y funciona todavía correctamente.
¿Veis este box?
Yo este box veo que se repite constantemente.
¿No?
Pues esto no tiene mucho sentido.
Sí, mira.
Entramos aquí en Twitter y este box aquí.
Aquí.
Todo el rato, todo el rato, todo el rato.
A ver.
Para eso utilizamos composición.
Desde la 17 ya no es necesario importar React.
No.
No es verdad eso.
No es verdad.
Es casi verdad.
Pero no es cierto.
React 16, React 0.15, punto lo que sea, también...
No es un tema de React.
Es un tema de Babel.
Es un tema de Babel.
Pero en NextDS ya hace tiempo que lo tiene.
Y React 17 no es necesario tampoco.
Si utilizas el Babel JSX Runtime.
Que es el que hace...
Que en Impor React lo hace automáticamente.
Entonces, yo una cosa que veo es que aquí en Components...
Que además tiene un montón de componentes.
Aquí tiene un montón de componentes.
Pero luego...
Que además los ha puesto todos a mano y tal.
Vale.
Que me parece bien, ¿eh?
Pero...
Ah, estos componentes además son los de la Home.
Pero fijad...
¿Veis?
Aquí no se está utilizando bien la composición.
Porque fijaos que cada vez que necesita crear...
Esto no está bien, ¿vale?
Por eso es importante mirar el código en estas cosas.
Cada vez que quiere añadir cada una de estas pastillas...
La está creando otra vez.
¿Veis?
Aquí la está creando.
Este hover...
Si yo lo busco...
Mira.
¿Cuántas veces lo tiene?
Pues esto...
Esto no estamos...
Esto no es utilizar React.
¿Vale?
Esto no lo podemos hacer.
Así que vamos a ayudar a nuestro amigo...
Para que utilice React en condiciones.
Y además este tipo de componente está tirado.
Porque mira...
Podéis crear componente UI...
Y aquí...
¿Cómo le podemos llamar a este tipo de pastilla?
Bueno, le pongo pastilla por ahora.
Y pastilla.tsx, ¿vale?
Y luego vosotros me decís como le...
Otro nombre.
Venga.
Que os espero.
Y me decís otro.
CarHome.
CarHome no me gusta.
¿Por qué?
Porque...
Harrison.
¿Por qué no me gusta CarHome?
Porque eso significa que solo lo voy a utilizar la Home.
Un componente de UI...
Tú no pondrías HomeButton.
¿Vale?
O sea, un componente de UI tiene que ser un componente que...
Tiene que ser agnóstico del sitio donde lo usas.
Así que...
Vamos a ver si os imagináis otro...
Qué abrumado me deja todo el conocimiento para desarrollar una web.
¿Qué va?
Mira, ShitCard.
Venga, eso no está mal.
CarGrapper.
Bueno, Car y Grapper.
CarCategory.
Bueno, Car no está mal.
Pero bueno, hay otra...
ShitCard.
ShitCard suena a Car de mierda.
ShitCard.
Pero ShitCard no me desagrada.
CategoryCard.
Vale.
ShitCard.
ShitCard.
ShitCard.
Fenamente.
A ver, que me pasa aquí el enlace este.
Haz de buen semaneta.
Yo no...
Sí, pero esto no es de...
Esto es lo que os decía, ¿eh?
Esto no es de React 17.
Mirad.
Si lo pone aquí, además.
Esto es que aprovechando el lanzamiento de React 17 se hizo esto.
¿Pero ves?
Tiene soporte para React 16, React 15, React 0 o 14.
Si lo pone la documentación, de hecho.
Y esto, para hacer esto, esto no es una cosa de React.
Esto es una cosa de Babel.
Que ya sé que es raro, ¿vale?
Pero esto no es de React.
Es de Babel.
Que por aquí también lo pone.
Que veis que pone todo esto.
Tú puedes utilizar React 17.
Y si no utilizas este, esto, que es una transformación de Babel,
vas a tener que importar React.
Si utilizáis Vite, lo habréis visto.
Que tenéis que importar React.
Porque no tiene esta transformación.
No sé si la han añadido, ¿eh?
Ahora Next, por suerte, lo hace automáticamente.
¿Pero veis?
Te dice Manual Babel Setup.
No tiene nada que ver con React.
Es un tema de Babel.
Vale, venga.
Pues a ver, que habéis puesto Card Container.
Es que otra vez, con Home Card no tiene sentido.
Home Card, eso te indica que va a ser en la Home.
Y no tiene por qué ser en la Home.
Chips.
Chip.
Chip me gusta.
Chip Card.
Chip Card.
Venga, va.
Chip Card.
Pues la Chip Card tiene que ser bastante sencilla, además.
Porque podemos hacer que sea Children.
Mira, como ya estaba utilizando este buen hombre.
Estaba utilizando React TypeScript, perdón.
Vamos a poner React.
Vamos a utilizarlo.
Vamos a utilizarlo.
Vale, React Children.
¿Qué le pasa?
It's the client, it's the file, but never used.
Vale, vale.
Ahora lo uso, no te preocupes.
Vale.
Pues tenemos esto.
Pero sí que tiene un linter, ¿eh?
Lo cual me parece maravilloso.
Pues algo tan sencillo como esto.
Export, default, chip, card.
¿Vale?
Algo tan sencillo como esto.
Esto es un momentito.
Esto es un momentito.
Y esto, esta tontería que, porque alguien dirá,
¡Buah, menuda cosa has hecho más tonta!
O sea, esta es la magia de React.
Si no hacéis esto, no estáis, no sabéis utilizar React.
Lo siento, ¿eh?
Con todo mi amor.
¿Por qué?
Porque la gracia de React es que está basado en componentes
y está en la composición de componentes.
Y esto es básico.
O sea, esto es la esencia de React mismo.
Esto es lo que hay que utilizar.
Yo, por cierto, esto, yo lo pondría sin evaluación.
Esta es la gracia.
Luego, además, si esto es una constante, pues...
Chip, card, hover, styles.
Esto lo podrías sacar para que no cree un objeto cada vez.
Porque esto, si lo utilizas 80 veces,
pues se estará creando todo el rato los estilos.
Bueno, al menos el objeto es lo que te quitas.
Export, default, no sé qué, no sé cuánto.
A eso no se le llaman los templates.
Esto no es un template.
Esto es un componente reutilizable de UI.
Que, además, podemos hacer que cambie de una forma u otra,
dependiendo de lo que le pases por props.
Por props esto podríamos hacerlo customizable, además.
Podríamos poner que sea white, que sea no sé qué.
Esto no es un template.
Esto no es un template.
Una cosa, amigo, ¿tiene alguna ventaja el default,
además de la forma de importarlo?
No.
La única ventaja es la forma de importarlo, básicamente.
Que le puedes poner el nombre que quieras.
En este caso, pues podríamos poner aquí el export.
Y a lo mejor, incluso mejor.
En el sentido de que siempre le llamaríamos de la misma forma en todos los sitios.
Y ahora fijaos que con la tontería que hemos hecho, ¿vale?
Porque alguien dirá, bueno, pues es que esto, esto es un momento.
Hacemos esto.
Importamos la pastilla esta.
Bueno, le hemos llamado pastilla al final.
Pastilla de freno.
Vamos a poner chip card.
Chip card.
¿Vale?
Sí.
Actualizo.
Replace.
Con esta tontería ya te quitas todo esto de aquí.
Te quitas todo esto.
Chip card.
Lo pones aquí.
Y, hombre, pues ya tiene mucho más sentido, ¿no?
O sea, es como una tontería.
Una tontería así tan fácil.
¿Qué pasa?
Bueno, es que encima, fíjate que si me pongo a mirar,
ya veo que el hstack y todo esto...
Bueno, el box este no.
Esto ya es otro rollo porque cada uno tiene un color.
Pero, bueno, que podríamos seguir porque este box...
¿Ves que siempre se repite el box?
Siempre, siempre se repite.
Siempre se repite la misma estructura.
Esto también podría ser estar dentro del chip card
y que el VG gradient, el borde radius...
Bueno, el borde radius no, pero el color y esto sea...
Sea customizable.
¿Vale?
O sea, que en lugar de ser esto tan sencillo,
pues todavía complicarlo un poco más.
O sea, meter todo esto...
Porque esto también es igual siempre.
Meter esto aquí...
Entonces a esto pasarle el icono, pasarle todo esto, ¿vale?
Y empezar a cambiar.
Aquí, pues a lo mejor solo cambiar el VG gradient,
que es lo único,
y el color, que es lo interesante,
pero el padding y el borde radius
siempre debería ser el mismo.
Entonces se podría empezar a cambiar así.
Claro, aquí es que podría estar media hora cambiándole esto,
pero al menos este cambio, que parece tan sencillo...
O sea, que es un momentito...
Oye, ahora...
Esto yo desde luego que lo haría.
O sea, lo haría sin ninguna duda, vamos.
Porque es que si hacemos unos cuantos...
Mira, vamos a hacerlo.
Vamos a hacer esto.
Vamos a hacer esto.
Y se los vamos a cambiar todos estos
por el chip card.
Chip card.
Pam.
Ahora, en todos los sitios que esté el chip card,
claro, lo malo, pues que...
Ah, mira, me lo ha importado.
Ah, digo, coño.
Digo, me lo ha importado, la leche.
Pues nada, se lo importamos.
Y aquí el chip card, pues en el box.
Chip card.
Vais a ver la cantidad de código
que este buen hombre se va a ahorrar.
Chip card.
Chip card.
Este es el framework.
Este es hostings.
Importamos chip card.
Chip card.
Hostia, estoy viendo que hay algunos...
Hostings.
Estoy viendo que algunos sí tenían el link,
pero hay otros que no.
O sea, ¿ves?
Este sí que tiene el link.
¿Por qué?
Ahora vamos a mirar eso un momento.
Ahora miraremos eso un momento.
Chip card, chip card, chip card, chip card.
Chip card.
Chip card.
Me quedan uno, me parece.
Con este, uno.
Chip card.
Y...
Chip card.
Bueno.
Con esto, vamos a ver un poco lo...
El código que hemos limpiado.
Pero fíjate, ¿eh?
Pam, pam, pam.
Vamos a ver si todo afín suena.
A ver si no me he cargado ninguno.
Eso es súper raro lo que hace ahí.
Pero, ¿veis?
O sea, no se ve nada.
No hay ninguna diferencia de...
Ah, lo que veo es que ha dejado de funcionar, ¿no?
Los clics.
Ah, este sí que funciona.
A ver.
Hostings.
Este ha dejado de funcionar.
Cursos.
Porque igual ya no funcionaban, ¿eh?
¿Cuál era?
Este le he dado proyectos, open source.
Y este, proyectos, open source.
Ah, este sí que funciona aquí.
Igual me lo he cargado yo, ¿eh?
Projects.
Ya me parece raro que me lo haya cargado yo, la verdad.
Porque veo que tiene el link.
Bueno, igual me lo he chafado.
Bueno, no sé.
Bueno, pero con esto, luego le dejaré la PR para que lo revise y tal.
Pero con esto ya vemos que, mira, todo el código que se ha quitado y ya está.
Pregunta sería, si ese código fuese para un puesto de junior, ¿lo contratarías?
Sí, a ver.
Lo que he comentado es importante que lo sepáis.
Pero, bueno, se lo podría pasar.
Me quedo con todo lo demás, ¿no?
O sea, es un poco raro que utilice TypeScript porque, como tal, veo que no está utilizando.
Es que tampoco he visto mucha, no tiene mucho código, ¿sabes?
O sea, todo lo que está utilizando es un componente que lo tiene todo y ya está.
O sea, no veo que haya reutilización y, por tanto, utilizar TypeScript no veo que le esté dando, en realidad, ninguna ventaja.
De hecho, tiene un montón de código aquí sin utilizar y eso.
Pero no está mal.
A ver, está bien, ha utilizado NextDS, el proyecto tiene buena pinta, es mejorable, como todo.
Pero no entiendo muy bien, todavía no sé muy bien este link porque no le funciona.
O sea, tiene aquí unos links.
Este link, este Nextlink.
¿Estos links?
Ah, a ver.
Claro, es que hay una cosa con el link de NextDS.
No sé si es que tiene una versión antigua, ¿eh?
Pero, NextDS, Next10.1.3.
A ver, Nextlink.
Vamos a mirar una cosita, ¿vale?
Nextlink.
Nextlink.
Claro, Nextlink.
¿Ves que aquí tiene un anchor?
Optional decorator for the path, the division, the browser URL.
Eso es el as, passref, prefetch, tala, tala.
Claro, yo es que creo que hay que poner el anchor.
If the child is a custom component, that grabs an acta.
If the child is a custom component, that grabs an acta.
If the child is a custom component, that grabs an acta, then we'll add passref to link.
Claro, eso en el caso que...
Pero eso no lo está haciendo porque el chip card no es un enlace.
Ese es un componente, bla, bla, vale.
O sea, que debería él poner la A.
O sea, en todos los que ha hecho esto, debería poner aquí una A.
Y entonces, con esto, ya lo tendría arreglado.
Entiendo que este es el problema.
¿Ves?
Esto hemos arreglado el channels.
Si vamos aquí a channels, canales...
¿Dónde está?
¿Cuáles canales?
Tú, tú, tú, tú, tú, tú.
Aquí.
¿Veis?
Ahora sí que sale el cursor.
Este es el problema, mijo.
Este es el problema.
O sea, ha utilizado el link, pero no ha utilizado los anchos.
¿Ves?
Ahora sí le da.
Ahora sí que debería llevar correctamente.
¿Vale?
Y aquí encima en el canal, porque veo que este channels...
Si vamos a la página, vamos a arreglarle también esto de channels que tiene...
¿Ves?
Todo esto que se repite totalmente.
Esto se tendría que arreglar.
¿Dónde está el volver atrás?
Por aquí tiene que tener isExternal, href...
Es que...
Ah, ¿ves?
Aquí sí que los tiene.
Aquí...
¿Dónde tiene el botón este de ir para atrás?
Gente que genera contenido en el page title.
¿Ves?
Que pone aquí ir atrás, heading, no sé qué.
Link, href.
Hostia, pero este href, ¿por qué no va...?
¿Por qué no funciona como SPA?
Además, aquí esto...
Aquí estoy un poco sorprendido.
Y además porque aquí sí que sale el cursor.
Y aquí sí que...
Pero...
Es porque...
Vale, el cursor debe aparecer porque él lo ha puesto.
Porque él lo ha puesto en algún sitio, me parece.
¿Sabes?
O sea...
Ah, no.
Aquí está el anchor.
Porque se me...
Link...
Ah, es que este link no es suyo.
Vale.
O sea, este link no es el de Next.
Este es el de Chakra.
Claro.
Pues ya está.
Ahí está el tema.
El tema es que este link no es el de...
Claro.
Es el de Chakra.
Yo entiendo que aquí lo que debería hacer...
Mira, vamos a intentarlo.
No lo he intentado nunca, ¿eh?
Link Chakra.
Import link from next link.
Si no, mira, aprenderé a hacerlo yo también.
Yo entiendo que esto, lo que debería hacer, es lo que acabamos de ver aquí.
Next link.
¿Veis que pone if the child is a function component?
Este.
No.
Coño, si lo habéis visto hace un momento.
If the root...
No.
If the child is a function...
The graphs anacta.
Este.
Este, exactamente, ¿no?
Entonces, lo que debería hacer aquí es tener este, el link href, luego pass href.
Esto tendría que ponerlo aquí.
No sé hasta qué punto esto tiene sentido.
No sé si esto le gustará al de Chakra, pero bueno, vamos a probarlo, a ver si funciona.
Con esto, estamos utilizando el de next yes y el link de Chakra, ¿vale?
Y ahora con esto...
Vale, algo que no le ha gustado.
Se me ha olvidado aquí una coma.
Venga.
Vale, ahora sí que ha funcionado como una SPA.
Pues ya está, era esto, ¿vale?
Todo funciona.
Ahora sí que está utilizando.
Fíjate, ahora si yo quito esto y le doy para atrás, pues no está recargando toda la página.
Bueno, pues esto le vamos a hacer.
Y en vez de crear cada chip car a mano, se creará un array de objetos con las propiedades title.
Sí, yo creo que es lo mejor.
Es que el problema es como está montado, que son componentes.
¿Veis?
Es todo componentes.
Y todo esto, en realidad, esto es información que habría que extraer.
Por ejemplo, esto, este...
Yo lo que tendría sería home chips cars, ¿no?
Es un array donde cada objeto, pues aquí tendríamos el título title.
Y aquí lo tenemos, canales de YouTube Twitch, ¿vale?
Ay, perdón, que he quitado lo del string.
Aquí está.
Luego, ¿qué más tendríamos?
Pues la descripción, ¿no?
Description.
Y ahí es donde está también la gracia de hacerlo más dinámico, ¿no?
Description.
Luego podría tener, porque claro, cada uno puede tener styles.
Entonces puede ser background color.
El background color puede ser esto de aquí.
Pam.
¿Vale?
Luego, ¿qué más le podríamos hacer?
Cg screen.
El icono.
Vale.
Pues el icono debería ser esto.
Cg screen.
¿Vale?
Vamos a reemplazarlo con todo.
Pa, pa, pa.
Y esto yo creo que sí que se podría reutilizar.
Y no sé si se me escapa...
Bueno, el color este.
Color, porque entiendo que cada color también puede ser diferente, ¿no?
Color white.
¿Vale?
Vamos a ver qué más.
Font size.
Yo creo que esto es igual.
Todo esto es igual.
Este hover creo que puede ser diferente, pero bueno, yo lo haría de otra forma.
Text style, description y tal.
Con esta información, en realidad, teniendo un array con este tipo de información, ya podrías hacer todos estos componentes, todos, de forma dinámica.
Y los podrías tener en la página directamente.
Con esto, pues, te pondrías a renderizarlos y ya está.
Yo haría esto.
El icono dentro de styles.
Bueno, sí, lo podemos poner fuera, ¿eh?
Lo he puesto porque lo había creado ahí, pero bueno, lo podemos poner así y ya está.
Y con esto ya lo tendríamos.
De hecho, estoy pensando si nos faltaría algo más.
Pero sí, yo haría esto.
Esto con todos los componentes estos y ya estaría.
Y con estos componentes, pues nada, ya hacemos, haces un punto map cart info y esto lo renderizas el chip cart pasándole todo el cart info y ya te los, ya los tendríamos todos.
Eso sería, yo creo que lo ideal.
Creo yo.
Eso creo yo que sería lo ideal.
¿Vale?
Ah, claro, también la ruta.
Exacto, la ruta.
Se me había olvidado.
URL, channels.
La ruta, claro, la ruta es importante.
Cada uno tiene una ruta distinta.
¿Vale?
Muy bien.
Perfecto, venga, va.
Vamos a por el siguiente.
Vamos a por el siguiente.
Martín Devaluado, check.
Espero que le haya gustado.
¿Cómo estáis?
¿Va gustando?
¿Bien?
¿Estáis bien?
Madre mía, mañana tengo fiesta, pasado tengo fiesta, domingo tengo fiesta y me voy a ir a la playa.
Que voy a volver y me vais a ver negro.
Así que preparaos para el cambio.
Vais a alucinar.
Porque me voy a tostar.
Check.
Usa as const.
Vale, mira.
John.soy es su primera...
Pues sí.
Puedes hacer as const.
Y ya está.
Además así, pues no lo...
Así utilizamos un poquito de TypeScript y de esta forma le hacemos que todo sea solo de...
Solo lectura.
Así nadie debería hacer un chips.cars.0.
Punto, punto, lo que sea.
Description.
Hola.
¿Ves?
Ya no podría porque sería retorle.
Es un poco raro el const as const porque se volvió un poco...
Dice const y terminas con const.
Pero bueno, esto hace que sea de lectura.
Y está bastante interesante.
Mañana no habrá stream.
Mañana no.
Pero el domingo creo que sí.
El domingo creo que sí.
Creo que sí.
Creo que vamos a ver React Native.
Si no me equivoco.
¡Madre mía!
David Punk.
Vamos a ver David Punk que nos da un montón de cosas.
¡Hostia!
Que se me ha olvidado darle las gracias a todo el mundo si has suscrito.
¡Madre mía!
Beto, muchísimas gracias.
Para Messi del front.
Muchas gracias.
Cinco meses ya.
¡Qué crack!
Muchas gracias también.
Juan Semprun que me ha pagado hidratación.
Vamos a por ello.
Null and Define.
Muchas gracias.
Muy buenas.
Otra buena charla por aquí.
Muchas gracias Null.
Muchas gracias JS Code.
¿Te has cambiado el nick?
¿Te has puesto una barra baja al final?
Cinco meses más.
Saludos a todos.
Muchas gracias crack.
Y Wifodos.
También muchísimas gracias por suscribirte a OnPrime.
Y Juan Vázquez.
Y muchas gracias a todos.
Sois unos cracks.
Vale.
Pues les comparto el típico to-do list.
Venga.
Vamos a por el típico to-do list.
A ver qué.
A ver qué hay aquí.
A ver qué hay que rascar.
Lista de...
¡Oh!
¡Oh!
¡Oh!
¡Oh!
¡Oh!
¡Oh!
¡Oh!
¡Oh!
¡Oh!
¡Oh!
¡Oh!
¡Oh!
David sabe que me gustan los diseños bonitos.
Me gustan.
¿Vale?
Muy bien.
Muy bien.
Inspirado en Dona.
Vamos a ver Dona.
¿Qué es?
Pues Dona está sin terminar y ya se ha inspirado en ello.
David Ponce.
Muy bien.
David.
Tiene buena pinda.
Crea tus tareas diarias.
Has sido de la misma categoría.
Mantén organizadas tus tareas.
Me gusta la jerarquía de títulos.
Esto no sé si es su logo o es el logo del to-do.
Esto es un poco...
Parece un tatuaje, la verdad.
Pero bueno.
Bien.
Me gustan los botones.
Muy bonitos los botones.
Y mira.
Modo oscuro.
Muy bien.
Muy bien.
Muy bien.
Me gusta.
Ingreso.
Vamos a ingresar.
¡Oh!
Fíjate.
Qué bonito.
Únete a nosotros y organiza tu lista de pendientes de la mejor manera.
Vale.
Registro.
Que no puedo ingresar.
Bueno.
Me gusta mucho que las transiciones...
Muy bien, ¿eh?
¿Veis?
Una animación en un punto en concreto.
Que no son tres animaciones distintas.
Es una.
Y, hombre.
Se ve limpio.
Se ve interesante.
Es un poco raro que a veces va para arriba o para abajo.
O sea, entiendo que siempre va hacia un lado.
Pero cuando vuelvo...
Hace a la derecha.
Pero luego sale hacia arriba.
Pero bueno.
Detallito de nada.
La transición está muy bien.
Únete a nosotros también y mantén tus tareas bajo control.
En este minuto mail.
Venga.
Vamos a hacer un mail de esto.
No sé mentira.
Primer nombre.
Vamos a poner...
J...
O...
Santi...
Tobi...
Javascript...
Santi...
Ejemplo de dominio...
Venga.
Ejemplo arroba dominio.com...
Y si pongo...
Ah, muy bien, ¿eh?
Mira.
Con validaciones y todo.
Muy bien, ¿eh?
Clave de seguridad.
Hostia.
Clave de seguridad.
A ver, una que nadie pueda aprender nunca.
Un, dos, tres, cuatro, cinco, seis, siete, ocho.
Vaya.
La contraseña de canter en al menos una mayúscula.
A ver.
Vamos a que nos sugiera las contraseñas.
Sugerir contraseña.
Muy bien.
La copio.
Termina el registro.
Muy bien.
Muy bien.
Me gusta.
Este es un estilo que me gusta mucho de los botones.
Me gusta mucho.
No está mal lo que está tardando, ¿eh?
Está tardando lo suyo.
Vale.
Ya me estaba asustando.
Bueno, qué bonito.
Santi, Tobi, Javascript.
Has terminado tu registro con éxito.
Te hemos enviado un correo electrónico para confirmar tu cuenta.
Ya puedes cerrar esta pestaña.
Si no quiero cerrarla.
Confirmación de correo electrónico.
Mira, aquí tenemos...
Está súper bien.
Incluso el mail que te envía, ¿eh?
Muy bien.
Sí, está levantando el Oroku totalmente en bonete.
Gracias por registrarse.
Confirmar cuenta.
Venga, confirmamos la cuenta.
Vale.
Qué raro que este esté en inglés, ¿no?
¿Por qué ahora me ha pasado en inglés?
¿Qué ha pasado aquí?
¿Por qué en inglés?
¿Qué he hecho yo?
¿Qué he hecho?
¿Por qué?
¿Habéis tocar a inglés o algo?
Vale.
El email debería ser este.
Este es nuestro email.
Y el mail ya lo tengo guardado.
Remember Credentials.
No sé por qué me ha cambiado esta en inglés.
Pero bueno, vamos a tope con ello.
No puede ser el lenguaje del navegador.
Pero si yo estoy con otro idioma.
Le he dado login.
¿Qué ha pasado aquí?
Ah, está cargando.
Vale.
Oye, qué bonito.
Me gusta mucho el diseño.
Es una idea sencilla.
Pero bueno, con los detalles justos.
Es que veis que en diseños sencillos es donde está el gusto.
Porque lo poco que hagas destaca.
Por ejemplo, si todo estuviese lleno de este tipo, de estos colores, pues no llamaría la atención.
Pero como todo es limpio y de repente tienes esto, pues ya llama la atención.
Yo tengo que decir que este, este, o sea, es demasiado recargado.
O sea, me hubiera gustado más una transición entre dos colores.
Más a lo parecido a lo de Next 10.
¿Vale?
Que son, vaya, ahora no lo voy a ver.
¿Versel?
O sea, o a lo Apple.
Apple lo utiliza mucho.
¿Vale?
Intentar utilizar la transición entre dos colores.
Vale, ahora nadie utiliza ya la transición.
O sea, me lo he inventado.
Me lo he inventado.
O sea, ¿qué pasa aquí?
Ya nadie lo utiliza.
O sea, cuando lo quiero ver, ya nadie sabe nada.
O sea, ¿qué pasa aquí?
El iPad Pro, que es nuevo.
A ver, ves esto.
Pero veis que la transición es entre dos colores.
Que parece que me lo han quitado.
Es entre dos colores.
Yo creo que entre dos colores es mucho mejor.
Porque se hace más fácil de leer y no parece tanto pegote.
¿Sabes?
Cuando es de tantos colores, veis que pasa entre tantos colores que al final es un poco raro.
Yo creo que este Goodnight, si llega un color más, solo la parte esta de Santi y Toby, creo que quedaría mejor.
Creo yo.
¿Por qué?
Porque creo que la gracia de este Goodnight, no sé qué, es que sean como si es de noche, pues que está oscureciendo y tal.
Y creo que si solo fuese una parte quedaría mejor.
Aquí me parece como que esto es el día y luego la tarde y luego la noche.
Es un poco raro, ¿no?
Pero bueno.
Me gusta la idea.
Le daría una vueltecita.
Vamos a crear una tarea.
Voy a hacer un nuevo Twitch.
Es genial.
Debo seleccionar la categoría.
Vale.
Esto es muy...
Está muy, muy, muy...
Las animaciones están muy bonitas.
Me gustan un montón.
Esta me molesta un poco.
A ver, si yo le he dado un clic, no es para que cuando salga se me quite.
Pero bueno, no está mal.
Se ve...
Se ve un poco...
Se ve muy poco.
Yo esto lo haría un poquito.
Es que se ve demasiado, demasiado...
Parece desactivado.
O sea, desactivado como que no lo puedo utilizar.
Trabajo, hogar, personal.
Esto es personal.
Esto es personal.
Venga.
Vale.
Tienes una nueva pareja.
Pues vamos a ver.
Conseguir 400 suscriptores en Twitch.
A ver si podemos.
Esto es trabajo.
Es un...
Uy.
Cuando le das aquí sí que se ve...
Hogar, trabajo.
Esto sería genial que se pudieras customizar, ¿no?
Es decir, lo quiero hacer de tal.
Venga, trabajo.
Y entonces cuando le damos aquí...
¡Cring!
Qué bonito ese efecto.
Y fuera.
Muy bien.
Muy bien.
Me gusta.
A ver.
Es una idea sencilla porque es el típico to do.
Uy, ¿qué ha pasado?
Ah, eso es salir.
¿Veis lo importante que es lo que os decía, no?
Pero está muy bien.
Me parece que es un proyecto sencillo pero bonito.
Me parece que es un proyecto que es sencillo.
No se pueden editar.
No.
No se puede.
No se puede editar, creo.
Es un proyecto que es sencillo pero esto sí que es una cosa que la puedes tener en el porfolio.
Y dices, ostras, mira que bien lo hice y tal.
A ver.
¡Pum!
Mira el de anoche.
Está muy bonito.
Creo que el modo noche...
No.
Pensaba que estaría hecho con un...
Cambiando los colores y tal.
Bueno.
Pues muy bonito.
Me gusta.
Vamos a ver si tiene un modo móvil.
Parece que tiene.
Sin ningún problema.
También.
Súper importante.
Bueno.
Sin ningún problema.
Esto Mobile First no es.
Mobile First no es.
A ver.
Aquí esta separación.
Esto es porque no está pensado para en ningún momento que se vea desde un móvil.
Esto lo ha hecho Desktop Only.
Vamos.
¡Buena noche!
Que tengas buena noche.
La traducción también ha sido un poco extraña.
Hoy es jueves 24 de junio.
Tienes una tarea pendiente.
Pero bueno.
Sí.
Se nota que hay un montón de cosas aquí por arreglar en móvil.
Yo lo haría Mobile First.
O sea.
Primero empezar con móvil.
Además es un diseño muy fácil.
Aunque bueno.
Esto sí que lo ha hecho bien.
Bueno.
Son detallitos.
Pero esto no...
Lo demás no lo ha hecho Mobile First.
Luego...
Vamos a ver.
Alguien decía que tenía un modo offline.
Pero a mí no me aparece aquí para...
Ni siquiera para instalarla.
No me...
No tiene una...
No es una Progresive Web App.
Al menos no aparece ni para instalarla.
No.
O sea que...
Debería aparecer por aquí un icono para instalarla.
Pero no aparece.
No sé si has todo desactivadas o lo que sea.
Pero yo creo que no.
Bueno.
Pero muy bien.
Muy bien.
¿Queréis que veamos el código?
Veamos el código de nuestro compañero.
A ver qué.
A ver las cosas.
A ver si el código está a nivel.
Mira.
Tiene tanto el front como el back.
Si queréis el código podéis entrar en el Discord.
Ahí podéis ver el código y lo veréis genial.
Ah, mira.
Tiene NextDies.
Mira.
El último hace 19 días le ha petado.
Te ha petado.
Te ha petado el commit link.
Te ha petado.
Vamos a verlo.
Mira.
¿Sabes qué?
Voy a abrir un Codespace.
Que no lo suelo abrir.
Voy a abrir un Codespace.
Y lo voy a hacer desde Codespace.
Ahí está.
A ver si funciona.
Codespace.
¿Sabéis lo que es Codespace?
Es una funcionalidad de GitHub que te abre un editor con el repositorio ya clonado y todo.
Y se supone que lo puedo utilizar aquí ya el repositorio.
O sea que podría hacer aquí un npm install.
Que esto está en internet.
Reload.
Ah, bueno.
Y encima utiliza toda tu configuración del editor.
Lo vais a ver.
¿Ves?
Ahora me dice please reload.
No sé qué.
Yo ya tengo todas mis extensiones y lo tengo todo aquí.
Source.
Vamos a ver.
Componentes.
Alert.
¿Ves?
Muy bien.
Muy bien.
Tiene aquí sus componentes.
Componentes React Icons.
Grapper.
Arrays.
Array del content.
Bueno.
¿Ves?
El botón.
Esto es lo que hemos visto antes.
Que tiene el botón de la UI.
Lo tiene justamente aquí.
Y este botón ya lo utilizan en todos los sitios.
Y ya no se tiene que preocupar.
A ver.
Yo separaría a lo mejor los componentes de UI mejor que de los otros componentes.
Pero bueno.
Me gusta que tiene componentes de UI reutilizables.
Que es algo que no hemos visto antes.
Mira las categorías.
Lo tiene un array con objetos.
Genial.
Esto es justamente la idea que estábamos comentando antes.
Visible.
SetCategory.
Ah.
SetCategory.
Yo setCategory este.
No me gusta mucho pasar props.
De setState.
Como props.
Pero bueno.
No pasa más.
Esto creo que lo he visto más de un sitio ya.
Esta construcción.
O muy parecida.
Pero bueno.
Vale.
Muy bien.
Footer.
Bueno.
Footer era lo del donut y todo esto.
Icons.
Bueno.
Los iconos esto no es necesario.
Por si os queréis evitar unos bytes.
Pero eso no es necesario.
Vale.
SendToJoin.
Bueno.
El código tiene buena pinta.
Parece que utilizan linter también.
O sea que genial.
Vamos a ver.
Ay.
Hostia.
Claro.
Es que no tengo aquí mis...
Start.
Vamos a ver si podemos levantar esto en el Codespace.
A ver qué os parece.
Vale.
Se supone que esto se ejecuta en una máquina.
Mira.
Fíjate.
Lo he levantado en una máquina.
O sea.
Esto es un...
Esto que estáis viendo aquí.
Es un Visual Studio Code que está corriendo en una máquina.
En la nube.
Y estoy levantando el proyecto en la nube y tal.
Y encima puedo acceder a él.
O sea.
Esto está genial.
Esto está genial.
Oye.
Pues muy bien.
Muy bien.
Bueno.
Me gusta.
Me gusta el proyecto.
Me gusta.
Me gusta.
Imagen.
No sé qué.
Esto me imagino que he utilizado en Next Image.
Es un proyecto con Next Yes.
Me extraña que el backend...
No sé cómo será el backend.
Pero que no lo ha hecho aquí en las páginas.
¿No?
Aquí se podría hacer en Pages.
Aquí se podría hacer la API.
Por si hubiera querido.
Pero ya veo que no.
Que lo ha hecho como aparte.
Hostia.
El GetInitialProps lo ha machacado.
Para el AuthToken.
Pues mira.
Esto.
Mira.
RedirectUser.
Esto básicamente es para autentic...
Para tener rutas protegidas en condiciones.
Dashboard.
Mira.
Esto dependiendo del día.
Para...
Lo tiene traducido al inglés y al castellano.
Como hemos visto.
Y cada cinco segundos...
Ostras.
Esto tiene detallazos.
¿Eh?
Cada cinco segundos revisa.
Revisa.
Si tiene que cambiarle este...
El saludo ese de buenos días.
Buenas tardes.
Y tal.
Ve cómo implementa el Dark Mode.
Venga.
Vamos a ver.
Dark.
Dark.
Bueno.
Tiene un tema.
Theme Context.
Aquí tiene Styles.
Shim.
Dark.
Está muy bien.
¿Veis?
Aquí tiene los imports estos que están geniales.
Y esto sería todo.
Lo que tiene son dos temas separados.
¿No?
Mira.
Vamos aquí a Source.
Styles.
¿Veis?
Tiene Light.
Con todas las...
Lo que sean las Custom Properties.
O los valores.
Que tiene todo esto.
Y en Dark.
Pues tiene también todos los valores que deberían tener.
Lo cual me parece que está genial.
Aunque es verdad que a veces esto puede ser...
O sea.
Puede ser difícil de...
Como de sincronizar.
¿No?
O sea.
Porque aquí de repente tú pones otro color.
Y cómo sincronizas que este color también lo tienes en el otro.
Este token.
Eso puede ser un poco peligroso.
Ya que he estado utilizando Custom Properties.
Igual lo interesante.
En lugar de utilizar...
O sea.
Sería utilizar siempre Custom Properties.
¿Sabes?
Y solo que las Custom Properties fuese como la fuente de la verdad a la hora de estilar.
Eso ya sería la bomba.
¿Sabes?
Pero bueno.
Me gusta.
Me gusta bastante.
Me gusta bastante como lo ha hecho.
Tiene el Dark Light.
Y además podría hacer el día de mañana un tercer color.
Y sería copiarse uno.
Cambiarle los valores.
Y ya lo tendría.
Lo cual está perfecto.
Variance.
¿Qué es esto de Variance?
Variance.
Estos son las animaciones.
O al menos veo aquí un montón de animaciones.
Sí, sí.
Son las animaciones.
Variance.
Claro.
Por los estilos.
¿Vale?
Tiene los estilos.
Que utiliza Style Components.
Pero en otros sitios he visto que en lugar de Style Components también he utilizado JSX, creo.
JSX.
No.
Pues utiliza solo Style Components.
¿Vale?
Pues no sé dónde he visto.
Sí, sí.
Utiliza solo Style Components.
Nada.
Estaba mezclando del otro.
Pues es un proyecto bastante bonito.
La verdad es que muy bien.
Mira.
Servicios.
De la API.
Mira.
El DestroyCookie.
Este no lo está utilizando.
Response.
Con el Fetch.
Muy bien.
Me gusta.
Bueno, aquí.
Este Register.
Response.
Aquí le falta un TryCatch.
Esto es como muy optimista, ¿no?
Si peta al hacer un login.
Bueno, aquí sí que veo que tiene más historia.
Aquí sí que tiene un TryCatch.
Pero el Register está súper optimista.
Del palo.
Sí, sí.
Esto va a funcionar siempre.
Lo cual, bueno.
Puede ser.
Puede ser.
No está mal.
Promise Resolve.
Promise.
Promise.
Vale.
TryCatch.
Bueno.
Pues está muy bien.
Mira.
Los servicios los tienen separados.
No tienen dentro de los componentes.
Muy bien.
Muy bien.
Tiene.
Se lleva.
Vamos a ver.
Se lleva mi.
No sé.
Es que iba a darle un premio.
Pero ahora no sé.
Venga.
Ya sé.
Se lleva mi.
Se lleva mi planta de plástico de oro.
En el proyecto de hoy.
Tenemos el proyecto de.
Tenemos el proyecto del to-do list de.
Iba a decir de Santi Tobi.
Pero no es de Santi Tobi.
Es de David Pong.
No sé si está David entre el chat.
Pero se ha llevado el, el, la planta de plástico de oro.
Así que es.
Muy bien.
Felicidades.
Está muy chulo.
Me ha gustado bastante.
Y bueno.
Ya que estamos con.
Ya que se ha ganado el cebollino de oro.
Vamos a.
Oye.
Yo no me llevo el premio.
Bueno.
Eso.
Es premio.
Premio.
Premio.
Ya sabéis.
Mira.
Tiene un porfolio.
A ver si el porfolio está al nivel del resto.
Ah.
Mira.
Ese era su logo.
Ah.
Mira.
Me gusta mucho ese fondo.
Muy bien.
David.
David.
Ha entendido que en la.
En el espacio está el gusto.
Veis.
Este detallazo.
Solo se mueve esta flechita.
Muy bien.
¿No?
O sea.
Muy sencillita.
Luego David Ponce.
David Vargas.
Web developer.
Punto.
Ya está.
David va a flipar.
¿No?
Con la.
La.
Lo que le estamos diciendo.
Pero muy bien.
Muy bien.
Además en inglés.
Significa que.
Bueno.
Pues quiere.
Yo creo que.
Si tuviera que decidir entre el inglés y un castellano.
Seguramente ahora mismo.
Lo haría en inglés.
Solo.
Porque tiene más sentido.
Además.
No voy a marear a la gente.
Toma.
LinkedIn.
Botón de guija.
Punto pelota.
Porque yo lo que quiero.
Es justamente.
Que me contrates.
Pues perfecto.
Aquí.
Aquí está.
Con dos enlaces.
Claros y directos.
Mira.
Además.
Es conexión.
La tengo.
Lo tengo conectado.
Lo tengo.
Lo tengo.
Lo tengo en el punto de mirar.
Un chico feliz.
Además David.
Un chico feliz.
¿Ves?
Aquí está sorprendido.
Por las cosas que hace.
De vez en cuando.
Pues me parece genial.
Vamos a bajar.
A ver aquí.
Si le damos.
Muy bien.
Detallazo además.
Muy bien.
Mira aquí.
Para seguir navegando.
Fantástico.
No me extraña que sea feliz.
Este about me.
Si a mí me preguntáis.
Este about.
Esto ya.
A ver.
Cuando se trabaja con este tipo de diseños.
En el que.
Hay mucho espacio.
Hay que evitar.
Mandar las cosas.
A la conchinchina.
¿Vale?
¿Por qué?
Porque veis este título.
Este título.
Mi pantalla es muy grande.
Y este título.
Como que.
Se ve desubicado.
Yo.
Lo centraría.
Todo.
Lo dejaría centrado.
O.
Tenéis dos opciones.
Uno.
Centrarlo.
Otro.
Que esto sea una caja invisible.
Que está centrada.
Y en about me.
Quede alineado.
Con esto.
¿Vale?
Me gusta mucho el efecto de esta imagen.
Con.
Sabes.
Con esa forma ovalada.
Está bien.
Con ese fondo.
Está muy bien.
Profile.
El texto justificado.
No lo justifiquéis.
¿Vale?
Porque veis.
Yo he leído aquí.
El I am.
Y me parecía que.
Que en algún momento.
David.
Se había dormido encima del teclado.
Y ha puesto ocho espacios aquí.
El texto justificado.
Muy pocas veces.
Tiene justificación.
Y en este caso.
Cuando es lectura.
Nosotros los humanos.
Leemos de izquierda a derecha.
Y necesitamos.
Cuando son muy pocas líneas de código.
De texto.
Mejor dejar que.
Sea a la derecha.
Que.
Que tenga.
Una caída normal.
No justifiquéis.
Bueno.
Si queréis lo vemos.
Pero vais a ver.
Que es.
¿Veis?
Aquí es todavía peor.
Es como peor.
Ese.
Ese.
No sé.
Esa forma de leerlo.
Yo.
Creo que se lee.
Mucho mejor así.
Mucho más normal.
Yo recomiendo que lo dejes así.
¿Vale?
Profile.
Education.
Y estos saltos.
Yo esto lo evitaría.
De los saltos.
Aparte de evitar los saltos.
Yo creo que.
A ver.
Está muy bien el espacio.
Ya sabéis que a mí me encanta mucho lo que es el blanco.
Pero.
En este caso.
Este profile.
Education.
Experience.
Yo esta información.
No la ocultaría.
Intentaría que fuese.
Veis que aquí hay mucho espacio.
Entonces.
Podéis dejar.
Profile.
Tal.
Education.
Le ponéis esto.
Experience.
Y le dejáis esto.
Y se lo dejáis.
Se lo dejáis ya listo.
Que no tenga que hacer clic.
¿Vale?
Porque si no hay gente que eso no lo va a ver ni nadie.
¿Veis?
Skills.
Esto se queda aquí.
El skill se queda ahí como colgado.
Pobre.
Que bonito.
Que bonito.
Muy bonito.
Este me gusta mucho.
Me gusta mucho.
Creo que es el mejor que hemos visto.
Y es que ese fondo.
Así como difuminado.
Que yo no sé si lo hace con un box shadow.
Me imagino que sí.
Que sea.
Algún tipo de box shadow.
O no.
O es una imagen.
Vale.
Eso es lo otro que estaba pensando.
Me hubiera gustado que fuese un box shadow.
Pero estaba pensando.
A ver.
Bastante complicado.
Esto es un difuminado ahí.
Y ya está.
Pero bueno.
Me hubiera gustado que fuese un box shadow.
Box shadow.
Que dependiendo de cada imagen.
Lo hiciese.
Ya hubiera sido brutal.
Pero me gusta igualmente.
Queda muy bien.
Este projects.
Vale.
El del to do.
Muy bien.
Me encanta.
Súper bien.
Súper bien.
¿Por qué?
Porque le está dando la importancia.
Que merece cada proyecto.
Si es que este.
El to do.
En lugar de ponerle un slider.
Que no lo entienda nadie.
Pues está bien.
Ahora.
También es verdad.
Que me sorprende la imagen.
Que ha elegido.
Bastante regular.
Lo que.
En lugar de dejar estos huecos.
Lo que debería haber hecho.
Es utilizar imagen más.
Que se vea más.
O sea.
Eh.
Hacéis algo así.
¿Sabes?
Bueno.
Igual no tanto.
Pero no hace falta que.
Por ejemplo.
No hace falta que salga el footer.
Yo que sé.
Una cosa así.
Esta imagen.
¿Veis?
Esta imagen.
Sin tanta.
Sin tanto espacio.
¿No?
Que se vea más la web.
Pero bueno.
La idea está bien.
Porque.
Este full stack.
Es muy pequeñito.
Parece como.
¿Ves?
Aquí no lo tiene justificado el texto.
Y se lee mucho mejor.
No sé si ha sido.
Porque lo he modificado arriba.
Pero.
Pero se nota que se le ve mucho mejor.
Pero muy bien.
Ver el código.
Y visitar el sitio.
¿Veis que es mucho mejor el texto?
Si es que queda mucho más claro.
Hay veces nos liamos.
De poner un icono.
Oh.
¿Qué icono podemos poner para el código?
¿Qué icono?
Ni qué hostias.
Pon el texto.
Que el texto se entiende como nada.
View code.
Punto.
Ya está.
¿Quiero ver el código?
Pues nada.
Ahí lo tenéis.
El código.
Perfecto.
Visitar el sitio.
Pues nada.
Y además siempre.
Siempre.
Te lleva a otro sitio.
Este color difuminado parece que es una imagen.
¿Ves?
Son imágenes.
Este efecto se puede hacer con CSS.
Se podría llegar a hacer con CSS.
Al menos similar.
Igual.
Igual.
Vale.
COVID-19 countries list.
Muy bien.
Con una API que ofrece información global y tal.
¿Ves?
Son dos proyectos.
Pero son dos proyectos que dices.
Hostia.
Estoy orgulloso de estos dos proyectos.
En lugar de haber hecho 80.
He hecho dos proyectos.
Y mira.
Te los explico.
Pues mira.
Este proyecto está muy bonito también.
Es que veo que David.
Chico con gusto.
Muy bien.
Muy bien.
¿Y esto qué es?
Para filtrar.
Pero el filtraje no funciona.
Este filtrar no funciona.
Pero muy bien.
¿Veis?
No ha dejado ahí el copyright.
No sé si lo ha quitado David.
Porque se ha dado cuenta.
Fijaos en una cosa.
Que no tiene ni contactar.
¿Vale?
¿Por qué?
Y me parece muy interesante.
Y yo el contactar.
A ver.
No es una cosa que.
Que os diría.
Quitadlo.
No.
No os diría que lo quitéis.
Pero si es que lo primero.
A lo mejor.
Lo que podéis hacer abajo del todo.
Es incidir.
En dónde me puedes encontrar.
O sí.
Dónde puedes contactar conmigo.
Pero.
¿Dónde me puedes encontrar?
Oye.
Pues estoy en Linkedin.
Y estoy en Github.
¿Vale?
O sea que.
Ahí tienes.
¿Quieres saber más de mí?
¿Quieres hablar conmigo?
Pues toma.
Linkedin.
Y envíame un mensaje en Linkedin.
Y estar encantado de hablar contigo.
Un formulario de contacto.
A veces.
Es un poco.
Y lo tienes que hacer bien.
Vamos a ver la versión móvil.
Aunque la versión móvil.
Yo creo que.
Uy.
Uy.
Vale.
Bueno.
Le falta un poco de espacios.
Por ahí.
La versión móvil.
Se ve incluso mejor.
Se ve incluso mejor.
Se ve mejor.
Porque tiene menos espacio.
Y ya menos.
No tiene tanto hueco.
Y mira.
Tiene el efecto.
Además con el blur.
Muy bien.
Muy bien David.
Muy bien David.
Se ve mejor en móvil.
Todavía.
Aunque yo.
Este.
Este profile education.
A mí este.
Es seguramente.
Lo que menos me ha gustado de todo.
Este.
Estos botones.
Dentro de botones.
Pero.
Muy bien David.
Me ha gustado.
Me ha gustado.
No sé hasta qué punto.
Hay una cosa que sí que es verdad.
Que veo que.
Esta carga.
Inicial.
Eso.
Igual.
Puede ser.
Yo esta carga.
Me la intentaría evitar.
A lo mejor.
Pondría la página en blanco.
Y que este logo aparezca.
O algo así.
Pero.
Bueno.
No sé.
No sé.
Veo que utiliza Next.
Next.
Tampoco parece que Next.
Next.
Next.
Next.
Next.
Next.
Next.
Next.
Next.
Next.
Next.
Next.
Next.
Next.
Next.
Next.
Next.
Next.
Next.
Next.
Next.
Next.
Next.
Next.
Next.
Next.
Next.
Next.
Hoy se ha ganado el cebollino de oro, David.
¿Qué puedes hacer si te gusta programar pero no sabes de diseño?
Claro.
Dice Xander, ¿no?
Todos los porfolios que veo por aquí siempre tienen una pinta increíble y yo sin saber qué
hacer.
Hombre, Xander.
Hemos visto de todo.
Con todo mi cariño a todo el mundo.
Hemos visto porfolios muy bonitos.
Hemos visto otros menos bonitos y tal.
Yo lo que te diría.
Cuando somos programadores es verdad que no sabemos de diseño.
Y por lo tanto no podemos hacer el porfolio más bonito del mundo.
Pero sí que podemos copiarnos.
Y las cosas son así.
Hay que copiarse.
Y en la copia pues está el homenaje.
Así que una cosa que podéis hacer es, uno, buscar porfolios que gusten.
Pues como el de David, ¿no?
Y pillar ideas.
Otro sería...
Ay, ahora me sale Binance, pero no Binance.
Dribble.
Esto.
Podéis ir a proyectos como Dribble.
Que ahora, por desgracia, hay que iniciar sesión.
Antes no era necesario.
Ahora hay que iniciar sesión para buscar la inspiración.
Y podéis buscar aquí...
Antes se podía buscar, pero es que ahora...
A ver, voy a intentar loguearme y os lo enseño.
Mira, en Bonet.
Ya le envío una solicitud a David por LinkedIn para tenerlo en cuenta para la próxima.
Muy bien, muy bien.
Qué grande, ¿eh?
Oye, pues en Bonet, si alguna vez le decís, pues dile dónde le encontraste.
Pues mira, porfolio.
Y aquí podéis pillar ideas.
A ver, es normal que no salga exactamente igual, pero podéis decir, mira, pues Michael Thompson.
Y puede ser un reto justamente el hecho de intentar copiar, inspiraros en diseños que estáis viendo.
Mira este.
Este es muy bonito.
A veces hay algunos que son demasiado bonitos, ¿eh?
También os digo.
Pero decís, mira, me gusta de este, pues me gusta el menú.
Pues voy a hacer este menú porque me parece un menú interesante y tal.
Ir picoteando sobre algunas ideas.
Este, por ejemplo, está muy bien, que tiene una foto bien grande.
Esto es lo que os digo muchas veces, ¿no?
Una foto que diga, este soy yo.
Hola, ¿qué pasa?
Esto soy yo.
Pues mira, aquí otro.
Este tiene el efecto, mira, a lo mejor, no lo sé, pero a lo mejor David se ha copiado esto de aquí.
¿Quién sabe?
A ver, esto es un...
Aquí lo que podéis ver también, qué cosas se llevan en el diseño.
Esto se lleva ahora mucho.
Este tipo de nubecita degradada, ¿no?
Esto se lleva ahora mucho.
Pues eso, pues mira, ¿veis?
Aquí tiene estas nubecitas.
Oye, pues ¿cómo puedo hacer el neogloss morfismo este?
¿Vale?
Con la nubecita y todo esto.
Bueno, pues vais picoteando un poco las ideas que vayáis viendo.
Este también está muy bien.
¿Veis?
Aquí es que tenéis ideas, pero para aburrir.
Otra recomendación, de verdad, y esta es súper importante.
Este es muy bonito, ¿eh?
Este es muy, muy bonito, aunque esto no sea un porfolio.
Hay veces que no son porfolios exactamente, pero bueno, esto podría adaptarse a un porfolio.
Una recomendación súper importante es que intentéis...
O sea, en la sencillez está la magia, ¿vale?
Aquí en Cataluña, en mi país, en España, tenemos un...
Bueno, sobre todo en Cataluña, tenemos un dicho que es en el pote pequeño está la buena confitura.
Que confitura creo que en castellano es confitura, ¿no?
Sí, confitura, sí.
Pues en el pote pequeño es donde está la buena confitura.
¿Por qué?
Porque en el pote grande, que tiene muchas cosas, normalmente si tiene mucha cantidad, no va a ser en la que esté la calidad.
Pero veis en este diseño que dices, ah, es bonito, ¿pero por qué es bonito?
Pues porque tienen las pocas cosas que tienes también.
Y destacan, ¿no?
Porque lo que...
Si tú le quitas este fondo, este diseño es súper simple.
Pero le pones un detallito y ahí lo tienes.
Los buenos perfumes vienen en frascos pequeños.
Ah, mira.
En Cataluña decimos eso.
En el pote pequeño viene la buena confitura.
Pues eso, páginas así, yo creo que os puede ayudar un montón.
Mira, este también está bastante bien y también sencillo.
Sencillo.
Esto sería para enseñar ya proyectos, pero bueno.
Connect with me.
Y esto ya te lleva a LinkedIn.
Punto.
Plam.
Directo.
Pim, pam.
Pues eso.
Y que si el día de mañana mejoráis como diseñadores, pues siempre podréis volver a hacer lo que sea y mejorar.
O sea, que no os preocupéis si al final todo es iterable.
Pero bueno, mientras no tengáis ese pedazo de gusto, pues nada.
Lo copiáis un poco y ya está.
No, yo me copié de esa.
¿Qué dices?
¿La confitura engorda?
Vale, vale.
Y los perfumes matan.
¿No has visto la película del perfume?
Muy bien, David.
Espero que David...
Vamos a darle el check.
Mira, vamos a hacer algo.
Vamos a darle el check.
Y le vamos a dar el trofeo.
El trofeo.
¿Cuál es el trofi?
¿Qué trofi le damos?
Este trofi.
Venga.
El trofeo.
Dribble con tres Bs.
¿Debería poner copyright en mi porfolio?
No.
No, Leonel.
No.
No hace falta.
No pierdas el tiempo en poner copyright.
No tiene sentido.
Nadie te va a copiar la página y si te la copian, pues vale.
Pues mejor.
No hace falta.
A ver, ¿qué pasa con lo del copyright?
Lo primero es que poner el copyright en el porfolio es muy raro.
Es muy raro porque parece que sois una marca o que es muy raro.
Es muy raro.
Luego, lo segundo es que en realidad no tenéis el copyright así.
O sea, que no lo habéis registrado en ningún sitio y tal.
Y para eso, si queréis, en el repositorio lo que podéis hacer es ponerle la licencia y ya está.
No ayuda.
O sea, no hace poner el copyright ahí que vaya a evitar ni que os lo copien, ni es una cláusula, ni es nada.
Si queréis, en el repositorio de código abierto, pues ponéis una licencia y fantástico.
Y es que queda muy raro.
Queda muy raro que una persona diga que su porfolio tiene copyright.
Es muy raro.
Así que no.
No lo hagas.
No lo hagas.
Y que seguro que tú te has copiado en algo.
¿Yo?
Yo me he copiado un montón de cosas.
A ver.
En mi página, ¿ves?
Es que es muy sencilla mi página.
Que le quiero dar un meneo.
Pero que me he copiado.
¿Qué me he copiado?
A ver.
Cosas que me he copiado.
Estoy pensando.
Seguro que me he copiado, pero ahora no me acuerdo de dónde.
Ahora no me acuerdo de dónde.
Pero seguro.
Esto sí que me lo copié.
Esto me lo copié de Ejet.
Mira.
¿Veis?
Eso me lo copié de Ejet.
De Ejet.
A lo mejor no de este diseño.
Pero no sé dónde lo vi.
Igual.
Pero creo que es de Ejet.
Más o menos parecido.
Creo que es de Ejet.
Y de hecho, el otro día lo estaba viendo y dije.
Y ya lo quiero arreglar porque no me gusta mucho.
Sí.
Sí.
Mira, dice.
El copyright es para poner un footer a la página.
Ejet es una plataforma de cursos.
De programación y tal.
Que no es tan mal.
Está bastante bien.
Pero es carito.
Es carito.
Si queréis poner un footer.
Lo que podéis poner en el footer es más bien.
¿Ves?
Yo no tengo aquí copyright.
Es que, ¿ves?
Pues puedes poner enlaces.
Por ejemplo.
O puedes poner tu nombre completo con tu apellido.
Pones tu nombre completo con tu apellido.
Y pones enlaces.
Twitch, GitHub, YouTube, Twitter.
O no pongas un mapa.
Tampoco no pongáis un mapa, ¿vale?
Que eso también lo hace mucha gente.
No.
Los mapas no valen la pena.
Vale.
Venga.
Vamos.
Vamos a por otro.
Vamos a por otro.
Que David nos ha dejado un...
¡Nesty!
Vamos, Nesty.
No me falles.
No me falles, Nesty.
No me falles.
¡Ojo!
¡Oh, ya!
¡Oh, yes!
Mira, copyright.
Lo primero que hemos visto ya.
Copyright.
Ahí tenemos Nesty.
Ahí tenemos Nesty.
Muy bien.
Me encanta el fondo.
Me gustan mucho los colores.
Me gusta mucho que te has atrevido con algo diferente.
Yo, por ejemplo, soy muy soso.
Y lo hago todo en blanco.
Porque soy muy malo diseñando.
Pero me gusta muchísimo como te has atrevido.
Has dicho, no, no, no, no.
Yo me la juego.
Y Néstor se la ha jugado.
Se la ha jugado con un color así...
No sabría decir si es un rojo-marrón.
Pero queda súper bien.
Me gusta mucho.
Con un fondo así, con el detallito de los puntitos.
Hay una cosa rara que hay con la fuente.
Que además cuando...
Esto tiene que ser los breakpoints.
Pero bueno, ya luego se lo iremos.
Que lo arregle.
A ver...
Bueno...
Bien, bien.
Bien, bien.
Muy bien.
Vale.
Venga, vamos a ver qué más tiene por aquí.
Hay algo raro con las fuentes.
Las fuentes no sé qué le pasan a veces.
Creo que...
Creo que...
¿Ves que va pegando?
Esto de que se anime esto.
Cuando se hace más pequeño.
Esto normalmente es porque has puesto un transition alt.
Yo lo evitaría también.
Yo pondría aquí el transition solo de lo que necesitas.
Que seguramente es el background.
Para evitar ese tipo de...
Normalmente queda mejor el...
¿Ves?
El transition alt.
Que me imaginaba.
Bueno, que igual está hecho a posta, ¿eh?
Pero...
¿Ves que queda un poco raro ver cómo se van haciendo esas cosas?
Ah, sí.
Se parecen los colores de la casa de papel.
Es verdad.
El problema de la fuente lo tengo pendiente todavía.
Aún no me he fijado por qué es.
Esto puede ser porque...
Tengas diferentes style sheets y en cada uno se cargue para según qué media query.
No lo sé.
Pero bueno.
Muy bien.
Building software for humans.
Me gusta mucho el título.
Me encanta.
Hello, I'm Nestor.
Passionately fully start software developer.
Genial.
Aquí mi recomendación sobre este texto.
¿Ves que te ha quedado con el developer ahí suelto?
Pues que...
Una de dos.
Que mires los anchos donde queda bien.
Porque, por ejemplo, aquí queda bien.
Pues...
Y...
Vale.
Pues como máximo...
Como máximo que este texto en concreto tenga un width...
Bueno, ya veo que lo tienes.
Pues igual todavía más bestia.
Para que...
Está.
Algo así.
Algo así yo...
Yo intentaría hacerle, ¿eh?
Para que no quede nunca el developer ahí suelto.
Y a partir de ahí que se va haciendo más pequeño, pues tal.
Porque es que...
Que quede developer justamente en esta.
Un poco raro.
Pero bueno.
Es una tontería.
Me gusta mucho el botón este.
Say hi.
Say hi.
Hostia.
Este...
Este estilo es un poco raro.
Este estilo...
A ver.
Está bien que luego se pone...
Le falta un poco de padding, ¿eh?
Yo le pondría padding a esto.
Le daría un poquito de espacio, ¿eh?
Le daría espacio.
Está interesante que me ha llevado a otra página.
El contact.
No sé si eso lo haría o intentaría dejarlo aquí.
Más que nada porque, ¿ves?
Yo cuando estaba aquí en el contact he dicho...
Hostia.
Quiero subir.
Quiero...
Pero bueno.
Oye.
Está muy bien el logo, ¿eh?
De espacio.
Feature project.
Instagram clone.
Mira.
Un clone de Instagram.
A simple clone of Instagram.
A simple...
With very basic functionality.
Made with React, Tailwind, CSS and Firebase.
Including tests with testing library, Jess and Cypress.
Vale.
Me gusta.
Me gusta.
A ver este enlace.
Hostia.
Hostia.
¿Qué ha pasado?
¿Qué ha pasado?
Vale.
Esto es un...
Vale.
A ver.
Esto ha sido un poco raro, ¿vale?
O sea, le he dado aquí.
Me ha llevado al proyecto.
Pero me ha llevado...
Bueno.
Vale.
Ahora lo entiendo más o menos.
Bueno.
Me gusta que aquí está toda la explicación.
Prefiero que esté aquí.
Que no esté en el otro sitio.
Todo ese tocho, ¿eh?
Eso está bien.
No me he esperado muy bien el que me llevase a esto.
Pero bueno.
Está bien.
No.
No está mal.
No está mal.
Si Code Open...
Este tío dice...
Bueno.
Si no me das trabajo, al menos págame el café.
Si no...
Hostia.
Qué bueno esto.
Me ha gustado.
Me ha gustado, ¿eh?
Esta está muy bien.
Me hace recordar...
¿Cómo puedo mostrar los proyectos que he desarrollado pero que son propiedad de mi anterior empresa
y no se pueden apreciar porque para acceder a ello requieren de pago?
Con imágenes.
Con imágenes.
Con imágenes si puedes.
Y si no, al final, pues...
Puedes poner el logo o alguna parte de la empresa que no te da información sensible
y explicas el proyecto.
Y ya está.
¿Vale?
¿Puedes mencionar lo que se hizo en dicho proyecto?
¿Lo que hace?
¿Las tecnologías que se usan?
Y poco más.
Vale.
Esto está bien, ¿eh?
Me gusta.
10's my second clone.
A form of a form of a form of a form of a form of a form of a form of a form of a
Netflix clone.
The sole purpose.
Está bien.
O sea, me gusta que des toda esta explicación.
Hostia, lo de la newsletter.
No utilizo.
Vamos a ver.
En Steam.
¿Cuántos suscriptores de newsletter tienes?
¿Y cuántas newsletters envías?
Yo, personalmente, no...
O sea, no sé si es un blog.
Ahora me hace dudar, claro.
Si realmente quieres hacer un blog.
O si quieres hacer...
¿Sabes?
O sea, si tienes una newsletter...
A eso me dejan por chocado.
Oye, muy bien que utiliza Vite.
Pero si tienes una...
O sea, yo quitaría la newsletter.
O si no, dime tú.
Si a lo mejor realmente tienes un montón de suscriptores en la newsletter y estás enviando
un montón de newsletters.
Si hasta yo estoy pensando en quitarla.
Y tengo que si dos mil y pico suscriptores...
Porque casi no envío newsletters.
Es que como que se diluye lo que a lo mejor queda desde aquí.
Queda mucho mejor.
Pero bueno.
Es mi idea.
Linkedin, Gihab...
Mira, ves la idea que hemos dicho antes.
No sé este espacio por qué está.
No sé si es que Twitter e Instagram no se llevan bien y han dicho no, no.
Una separación.
Pero bueno.
¿Vale?
Muy bien.
Con el Dep2.
Eso está bien.
De hecho, de Dep2 igual aquí podrías poner los últimos artículos.
Que te los traiga y poder mostrarlos aquí.
Aquí en Latest Projects yo te digo una cosa.
Yo el Seamore este yo lo quito.
Y una de dos.
O pongo los que quiero que la gente vea realmente.
O sea, a lo mejor son estos.
Este lo puedes quitar aquí.
O sea, no gaste.
Ah, claro.
Es que esto ahora está en otro sitio otra vez.
Ah, porque el Seamore me lleva a otra página.
Es que se parecía mucho.
Vale, vale.
Vale.
Vale, ya decía yo.
Pero ves, en Latest Projects, pues quita este si lo tienes aquí.
Que estás desaprovechando un puntito aquí de lujo, ¿no?
Y este está muy bien.
Ya te digo una cosa, ¿eh?
No sé si prefiero que pongas Future Projects, el Instagram Clone, el Netflix y pongas ver
el resto de proyectos o que te salgan todos los proyectos en chiquitito y ya está.
Pero, hostia, es que el de Netflix también está muy bonito, ¿no?
Que igual le puedes dar el mismo cariño que el de Instagram.
Digo yo, ¿eh?
Porque veo que el resto, a ver, no digo que sean feos ni mucho menos, pero que no tienen el mismo...
Claro, este...
Pues este está muy chulo.
Mira, Seacode, esto está muy bien, ¿eh?
Seacode, no sé qué.
Vamos a ver el de...
Muy bien, muy bien, muy bien.
Muy bien.
¿Y uno puede loguear así todo?
Bueno, bueno.
Pero con mi cuenta de Netflix me puedo loguear.
Ya sería la bomba.
Muy bien, muy bien.
Vale.
Vamos a ver el de Instagram.
Tengo curiosidad.
Instagram Clone.
Vamos a ver.
Vamos a ver.
Fotos, punto...
Pero bueno, pues...
Dime que hay un...
Un usuario de prueba o algo.
User.
No hay usuario de prueba.
Bueno.
Bueno, es que si me tengo que loguear...
Pues ya...
Pero bueno, muy bien.
Me ha gustado...
¡Ay!
Que lo cerré.
Perdón, perdón, perdón.
Venga.
Instagram Clone.
Muy bien.
Pues me gusta, me gusta.
Say hi.
A lo mejor...
No sé si esto...
A lo mejor estos puntos...
O sea, esta barra te puede sobrar y tal.
Pero bueno.
Ah, es que...
Se supone que es como está centrado.
Yo es que este espacio aquí es un poco raro.
Porque ves que no está ni centrado ni nada.
Yo sé.
A lo mejor lo quitaría.
Y ya te digo.
Latest Projects.
Pues este.
Lo quitas.
Yo este lo pondría feature también.
Porque tiene muy buena pinta.
Y...
Y nada, ya está.
Ah, claro.
Es que aquí cuando lo haces pequeño no aparece.
Ah, pues yo haría que apareciera.
Imagínate abajo, ¿eh?
Yo eso no lo quitaría.
Vale, vale.
¿Debería poner cuál es mi trabajo actual y dónde trabajo?
Sí.
¿Qué hay del footer?
El footer nada.
Footer con el copyright.
Además, esto...
Es como...
Entre el copyright del 2021.
Y el With Love From Nestor.
Que esto lo pone todo el mundo también.
Que yo no sé qué pasa con esto.
Que esto también lo he puesto yo en alguna tontería, ¿eh?
También te digo.
Pero...
No sé.
O sea, es que no...
No sé si mejor quitar esto y juntarlo con esto.
Poner a la izquierda a Nestor, no sé quién.
Y poner todos los enlaces y ya está.
Es que With Love From Nestor esto lo pone todo el mundo.
Todo el mundo.
No sé.
No sé.
Alguna empresa a lo mejor lo hizo.
Hombre, Nestor está aquí.
Aquí tenemos a Nestor.
¡Nestor es de Barcelona!
¡Vecino mío!
Es verdad, Nestor, que es una cosa que he echado en falta, ¿no?
En la home.
El hecho de verte a ti.
Que a lo mejor hubiera estado bien.
No sé si tenerlo en el about.
Ahora, Nestor, también te digo.
Mucho texto, ¿eh?
Además, este texto es demasiado largo, ¿sabes?
Es que cuando tú ve...
La gente lo que hacemos...
Bueno, esto verás que lo haces tú también.
Que nos escaneamos el texto.
Cuando veamos un texto de izquierda a derecha.
Ah, no.
Aquí pone que es de Galicia.
Pero esto...
Yo juraría que esto es Barcelona, ¿eh?
Yo juraría que esto es Barcelona.
No sé si se lo ha hecho aposta.
Pero aquí pone que es de Galicia.
El problema es de este texto es que cuando son muy largos
ya lo escaneamos y decimos...
No lo leo.
Entonces, yo lo que te recomiendo es que esto
pues intentes condensarlo un poco y ya está.
Tengo experiencia con...
Bueno, este tipo de cosas no está mal porque es colorido.
Pero claro, yo también iría seleccionando.
Yo no hago esto de que Macos, Imsonia...
¿Sabes?
Pon las que te van a dar dinero y ya está.
Porque es que Macos...
Bueno, pues se han utilizado Macos.
Macos.
Y el Contact Me.
Bueno, muy bien aquí los enlaces.
Súper bien.
Eso los he visto antes y me han gustado mucho.
Así que muy bien.
Muy bien, muy bien.
A ver.
¿Para qué sirve el Instagram clone?
Bueno, pues para hacer un clone de Instagram, ¿no?
Si alguien necesita esa info, la puede ver en LinkedIn.
¿Vale?
A ver, voy leyendo.
Buen punto.
Quiero escalarlo a un blog, pero lo estoy dando vueltas.
Pero creo que es algo prematura.
Sí.
Quítale el newsletter ese por ahora.
A un blog.
Bueno, pero si tienes Depth2, lo que puedes hacer, si esto es tu porfolio, pues que aparezcan ahí tus últimos artículos.
Es un proyecto que hizo para sumar puntos y demostrar la capacidad del desarrollador.
Para eso sirve su porfolio.
Ahí muestra su trabajo, sean clones o no.
Ahí está.
Muy bien, loco.
Muy bien.
Que fuera dinámico, el que está solo, ¿no?
Siempre está el mismo.
El signo perfecto para hacer phishing.
Ah, mira.
Esa es muy buena idea, lo que han dicho por aquí.
Otra idea de aquí podría ser que el feature project este vaya cambiando.
Eso puede estar bien.
Ah, mira.
Esta animación me gusta.
Está bien.
Pero veis que aquí también, en este screenshot, como que, hostia, no hace falta poner el fondo.
O sea, se puede poner un poco de fondo, pero mola más si se corta hacia donde se ve el producto.
No hace falta que pongáis este...
Queda muy desaprovechado.
El diseño perfecto para hacer phishing.
Estaba pensando en ponerlo porfa, haz uno más que va el mío.
Vale.
Vamos a intentarlo.
Creo que tienes el With Love en el blog.
Ah, no jodas que tengo el With Love en el blog.
No, mentira.
Yo no lo tengo.
¿Cómo me engañan?
No tengo el With Love en el blog.
No me engañáis.
Pero es que esa foto es mazo bonita.
Sí, está chula la foto esta.
Ah, que es bonita, pero que es de Galicia.
Pero sí, es bonita porque eso es de las ramblas de Barcelona, de Cataluña.
Vamos.
Súper bonito.
Github siempre hace lo del corazón.
Sí.
Mucho texto.
Sí, mucho texto aquí.
Hay que intentar como...
Seleccionar lo importante.
Y el Hello There, si ya le has dicho hola aquí.
No digáis tanto hola, hombre.
Hola, hola.
Nada, ya está.
Hola una vez y punto.
Midu, ¿piensas que habiendo terminado el JavaScript Bootcamp ya estoy preparado para buscar trabajo?
Depende.
¿Lo has seguido bien?
¿Me has hecho caso en todo lo que te he dicho?
¿Wyzar?
¿Ya has hecho proyectos por ti mismo?
A ver, si lo has entendido todo, yo creo que sí.
Si lo has entendido todo y encima has hecho proyectillos con todo lo que hemos aprendido en Fullstack Bootcamp JavaScript, yo creo que sí.
Cars, no llega tiempo para ver el mío, pero por lo que he visto creo que me centraré en hacer uno o dos proyectos propios que tengan buena pinta y luego me preocupo en crear un buen porfolio.
Creo que sería mejor.
Sí.
Yo creo que dos proyectos, ¿verdad?
¿Veis?
Aquí Néstor ha hecho más proyectos, pero ha hecho dos que dices, hostia, o como lo que hemos visto antes del chico este de David, ¿no?
Ojo, que ya me contacté con David y está postulando.
Madre mía, que vamos a encontrar trabajo a la gente.
Creo que el código es mejorable, ¿no?
¿Has visto el código?
Pero bueno, ya que lo has dicho, ya que lo mencionas, pues vamos a ver tu código, Néstor.
El mejor OS para tener gripe.
Mac Mocos.
Hostia, Dios.
Dios locor.
Todos tienen buenos proyectos de muestra.
Yo soy todo challenge.
Bueno, Cars, pues nada.
Siempre hay trabajo.
Rush Mode, pon tu proyecto en Discord, que ahí es donde tenemos.
Tienes que ponerlo en el Discord de la comunidad.
Yo opino que debería existir más proyectos originales.
Hello there, siempre es necesario.
Si me hiciste caso, hiciste proyectos.
¿Cuál era la página de David, por favor?
Hostia, no me acuerdo.
Pero todos los proyectos que estamos viendo los podéis encontrar en Discord, ¿vale?
Si no, era David Pongme.
Os lo dejo por ahí, ¿vale?
David Pongme.
Vale.
Venga, vamos a ver.
Hombre, aquí tiene Husky.
Pero Husky, esta carpeta debería...
Yo creo que esta carpeta no debería estar en el repositorio, creo.
Me va a dar problemas probarlo en local.
Bueno, al menos le echaremos un vistazo así un poco por encima.
Backend y frontend.
Mira, un monorepo.
Muy bien, un monorepo.
Qué grande.
Comic-link, fantástico.
Nada de link.
Y ahora es todo por Midu, el juez de la web.
Venga.
A ver, packet.json.
Vale, la parte de frontend.
Es linked.
Muy bien, muy bien.
Vale.
Components.
Back to top.
Index.
Vale.
Hostia, cuidado con esto, ¿eh?
Cuidado con esto.
Este efecto.
Cuidado con esto.
Esto chupa.
Esto chupa lo que no está escrito, ¿eh?
Este toggle visibility.
Para esto ya vimos un truco que era el del chivato.
Entonces, así no haces un ATM list en scroll.
Esto chupa que da gustito.
Esto chupa que da gustito.
Se va a subir, sí.
Tengo un canal secundario donde subo directos de Twitch.
Se llama Midulife.
¿Ves?
Midulife.
Que tenemos ya 2.170 suscriptores, como sigamos así.
Y de hecho ya subí el anterior, que es este.
Tu web a juicio.
Subimos este, que ha triunfado bastante, ¿eh?
Triunfa más que algunos vídeos que tengo en el canal principal.
Madre mía.
Y...
Uy.
Mejor que nos digas los errores tú y que queden los fallos en familia.
Ya te digo.
Eso sí.
Eso siempre.
Pues eso.
Midulife, que es mi canal secundario.
Y ahí lo subiremos, ¿vale?
Vale.
Voy a quitar esto.
Pues eso.
Esto.
Esto.
Hay mejores formas de hacerlo para evitar hacer este ATM listener.
Podéis utilizar un chivato con Intersection Observer y todo esto.
¿Vale?
Biography Styles.
Bueno, pero está bien, ¿no?
Se ve bien.
Hostia, con los componentes, pues, compuestos y tal.
Vale.
Feature Styles.
Buah.
Tengo que reconocer que esto, este tipo de patrón, no soy muy fan, ¿eh?
No soy muy fan.
Pero bueno.
Ya os lo contaré.
Ya os lo contaré.
Porque es que además, vamos a ver la página donde usas estos.
Por ejemplo, entiendo que aquí en About, ¿no?
Claro.
O sea.
Me parece interesante, pero es que para hacer algo así.
Esto es recomendación, ¿eh?
Para hacer algo así, ¿por qué no?
¿Qué pasa con esto?
Esto lo que está pasando es que estás mutando el componente.
Biography.
Tú estás mutando una propiedad de ese componente.
Le estás metiendo punto title.
Y, bueno, es verdad que es un patrón y, de hecho, Considot a veces habla.
Pero en este caso, yo no veo que haya una diferencia con, por ejemplo, que hagas algo así, ¿no?
Cons biography title.
Y esto sea justamente este function, no sé qué, que quieras children, rest, props, ¿no?
Pero, bueno, que lo entiendo.
Lo que pasa es que también, viendo un poco todo el tema de cómo está
de atado, no sé hasta qué punto, en lugar de hacer demasiada children, rest, props,
todos los props, le pasa hacia abajo y tal, que al final, si te fijas, es como muy repetitivo.
No sé si molaría más la composición directamente dentro del biography, pues que ponga el title y tal.
Porque encima esto, un problema que tiene, que al menos a mí no me...
Es una de las razones por las que me echa normalmente para atrás.
Es que tú esto, esto lo podrías repetir aquí perfectamente.
¿Y qué pasa con esto?
Y si te equivocas y haces esto así.
¿Sabes? O sea, el problema es que esto es muy repetitivo y, además, este contrato es súper débil.
Porque el orden en el que lo pones puede afectar negativamente, lo cual es un rollo.
Y, por otro lado, puedes repetirlo y tampoco te lo controla, no te da ningún error.
Por eso es un patrón que a mí no me suele gustar, solo en casos muy concretos.
Por ejemplo, que tengas un select option.
Solo tienes un tipo de option y es independiente del orden en el que lo pones.
Porque el option solo puedes poner uno.
Vale, pues puede tener sentido en ese caso.
Pero no es un patrón que utilizaría en este caso.
En mi humilde opinión.
No lo sé.
Bueno, mira, ya que he encontrado el footer...
Le hemos quitado el copyright.
Ya está.
Nada, broma.
Broma.
Si queréis poner copyright, está bien.
No pasa nada.
Pero veis, yo esto, para hacer algo así, ya te digo que yo en el project...
Oye, pues lo podría poner aquí, todo aquí.
Yo aquí ya pondría.
Oye, pues el group, pues es este group.
Es así.
Y que le quieres pasar las props o lo que sea.
Pues las pasas directamente como props o lo que sea.
A no ser que sea algo muy bestia.
No sé hasta qué punto tiene mucho sentido.
Es que además este title, entiendo que es el title que es el mismo...
Ah, del project.
Ya.
Es que igual lo que te falta es que este title del project...
También qué diferencia tiene este title del project con otro title, ¿sabes?
A lo mejor los titles deberías pensarlos como al revés, ¿sabes?
Deberíamos como pensar en cuántos títulos tienes en tu proyecto.
Por ejemplo, este latest...
Ah, por cierto, como se nota que la bebas, newe, está.
Ver cuántos títulos tienes y unificarlos todos, ¿no?
En lugar de pasar tantas props, crear tantos proyectos.
Porque este About Me, este título, por ejemplo...
Ay, espera que tengo esto abierto y este no es.
Este About Me que tenemos aquí...
About Me...
Vale.
About.title.
Vale.
No.
Venga, vamos a verlo.
Aquí...
Vamos a buscar About...
Pages...
Biography...
Title...
Este Biography...
Este Title...
Este...
Si lo buscamos...
¿Sabes qué diferencia hay este título con otros títulos a lo mejor que quieras utilizar?
Yo lo haría más al revés.
Porque ves que se parecen mucho.
Porque al final lo que estás haciendo es un título en concreto para cada una de las páginas.
O sea, hay que pensarlo como al revés.
Es todos los títulos que tengo en mi página los unifico y utilizo ese título en concreto.
No es que tenga un título para el proyecto, un título para no sé qué, un título para no sé cuánto.
Que a lo mejor cambian por equitmotivo.
Pero el problema que te pasa a veces es que entonces los estás como repitiendo.
¿Ves?
Este Title...
Este Title de aquí es muy parecido al de la New Letter.
Pero no es exactamente igual porque el Letter Spicing, aunque ves, el font size es un poco más pequeño.
Es como...
Yo lo haría al revés.
En lugar de poner el título donde lo usas, sino...
Tener como un design system, aunque sea pequeñito.
¿Vale?
Y esto te simplificaría un montón el tema y te unificaría los estilos.
De esta forma, este título sería como este título y sería como este título.
Y sería como a lo mejor, pues, este título de aquí.
Que además ya se nota, ¿no?
Que tienes como diferentes títulos.
Pues eso te puede ayudar.
Y creo que te puede venir bien y te simplificaría el código.
En lugar de repetir que cada página tenga su Title y eso.
Vale.
Muy bien.
Pues me sabe mal porque el siguiente proyecto era del chico este que tenía muchas ganas.
Que a ver que lo había puesto por ahí.
Bueno, alguien decía...
¿Viste el bug que hay en la página del portfolio?
No lo he visto.
Vamos a verlo.
¿Dónde está el bug del portfolio?
Lo siento, Diego.
Lo siento.
Lo siento, pero creo...
Bueno, que se ha quedado negro esto.
Se oculta.
Ah, mira.
Ay, ¿qué ha pasado?
Había salido...
Uy.
Vale, ya hemos visto el bug, ¿no?
Que esto no está...
Está Position Absolute o algo raro.
Y sale fuera el título.
Bueno.
Esto pasa hasta en las mejores familias.
¿Olvidaste quitar el With Love?
No, no he olvidado.
Lo he quitado, ¿no?
Lo eliminé, pero...
Yo creo que lo quité.
Yo creo que lo quité.
Creo que era el Copyright, ¿no?
Footed.
Ah, no.
Sí.
No, pero creo que este Copyright es el que tenía...
Copyright, Copyright.
Bueno, no sé dónde estará.
Footer Copyright.
A ver, footer punto...
Footer.
Footer, footer...
Hostia.
Footer punto content, punto group, punto no sé qué.
Footer punto text link.
¿Ves?
Es que cuando empiezas a hacer como muchos componentes que son de dónde se usan, te pasa esta cosa.
Es que lo que molaría mucho es tener un text link que se pueda utilizar en cualquier sitio, ¿sabes?
Que sea en el footer o no sea en el footer.
Y entonces eso te simplifica bastante la historia.
Si no...
Si siempre vas creando componentes de dónde lo usas, pues es...
Mira, un sitio donde te puede ayudar bastante a entender esto es Eversell, que lo tiene súper bien.
Porque aquí tú dices, ostras, es que aquí el field sheet, pues es que esto lo puedo utilizar en cualquier sitio.
No es footer, field sheet y tal, sino que lo tiene un poco así.
Que sé que esto es más complejo.
Pero, por ejemplo, el text, pues aquí ves, tiene diferentes títulos, pero es un número limitado de títulos.
Lo cual está bastante bien.
Porque dices, bueno, tengo este título que puedes tener tantos títulos como quieras, pero no son infinitos y allí lo veo utilizando y ya está.
¿Vale?
Creo que esto puede ser interesante.
Cada vez tiene más esta gente, ¿eh?
Tiene un montón ya de componentes.
Están genial.
Genial.
La página de Nesty...
La paso por ahí.