1. Catálogo de componentes de gráficos
de ShadCN
tenéis gráficas, pero vamos
están basadas en Recharts
las podéis personalizar con Tailwind
son componentes de React, podéis copiar
fácilmente el código, de hecho lo podéis copiar
aquí y lo podéis ver
aquí por ejemplo tenéis el componente
hay un montón, pero un montón
de componentes, fijaos aquí que también tenéis
este, tenéis para Grid
para Laxis, cuál es la...
a ver si os encuentro, porque aquí
Charts, esta sería la
página de presentación donde podéis ver
los diferentes gráficos
que tenéis, de área, tenéis
también aquí, buah, súper
bonito, es que son muy muy bonitos
está chulo porque con muy poca cosa
ya tienen los gráficos hechos
y ya, y fíjate que encima están animados
y las animaciones son muy chulas
ah mira, ahí no tienen animación
pero entre este y este
bueno, hay como un salto raro, hay como
un salto raro, mira, podéis ver el código también
aquí tendrías todo el código
hay diferentes tipos de
de gráficas y hay un montón
es espectacular, o sea, si necesitáis hacer gráficas
en React, no tenéis tiempo
y os gusta una de las que aparezcan aquí
no perdáis el tiempo, le echáis un vistazo
le dais a Big Code y aquí tenéis el código
y además las podéis personalizar
en colores que son
totalmente personalizables, las podéis poner
los colores que queráis, tienen diferentes temas
así que echadle un vistazo
que están espectaculares
os voy a explicar una cosa, porque
alguien ha creado un proyecto, o sea
menos de 24 horas
o sea, han sacado este catálogo de gráficas
y en menos de 24 horas
han sacado ya una aplicación
que es sencilla, pero bueno, está muy chula
es una aplicación donde ves
una gráfica con las acciones
todo lo que veis está hecho
con ShackCN, es de código abierto
para ver el precio de diferentes
acciones y hombre, como ejemplo
está muy chulo, fijaos que además
se animan entre las diferentes
veis como se adapta cada uno
está muy bonita y aquí podéis tener
un buen ejemplo del poder que tendrían
estas gráficas y como las podéis utilizar
también tiene modo oscuro, modo claro
¡ah! modo claro
el proyecto está muy bien porque además
se utiliza también React Server Components
así que le podéis echar un vistazo
para ver como podríais hacer un proyecto
en XDS con React Server Components
y también con ShackCN y con los gráficos
además de esto, una biblioteca
muy interesante
si seguro utilizas
Loadash, seguro que utilizas Loadash
o has usado Loadash o algo
Loadash ha sido una biblioteca
que nos ha acompañado durante mucho tiempo
y que ha estado muy chula
pero el problema que tiene Loadash
tiene diferentes problemas
lo primero es que ocupa mucho espacio
aunque por suerte de Loadash
sacaron versiones optimizadas
para que solo importases lo importante y tal
pero aún así le faltaban un montón de cosas
como por ejemplo tipos
o le faltaba utilizar JavaScript más moderno
y cosas así
pues has sacado como una colección de utilidades
muy parecida a Loadash
que se llama ES Toolkit
Enmascript Toolkit
que sería como una serie de herramientas
y utilidades a Loadash
además con una documentación bastante bonita
que la tenéis aquí
que utiliza TypeScript
que por lo menos va a tener tipos
y que además utiliza un JavaScript
mucho más moderno
que hace según ellos
que sea de dos a tres veces más rápido
y un 97% más pequeño
si actualizas desde Loadash
es diferente a una que a mí me gusta mucho
que se llama Just
que está muy chula
Just es como...
no es esta
perdón
es esta
es lo mismo que Loadash
pero que cada dependencia
o cada utilidad
es una dependencia independiente
de forma que solo instala lo que necesitas
esta me gusta mucho
y además hace poco
le añadieron las definiciones de TypeScript
lo cual hace que fuesen perfectas
para mí esta es mi favorita
pero a mí esta de Toolkit
me llama bastante la atención
de nuevo
son utilidades como Loadash
pero que está bastante
bastante
bastante chulo
con tipos
con código moderno
así que si necesitáis
o queríais utilizar algo
como Loadash
echarle un vistazo
porque la verdad
tiene muy buena punta
dependencia independiente
sí
es cada dependencia
es independiente
¿y esto qué quiere decir?
pues lo que quiere decir
es que las dependencias
se instalan
de forma separada
por ejemplo
si tú necesitas
solo la utilidad
de
por ejemplo
omitir
¿vale?
pues tienes que hacer un
npm install
Just omit
por eso digo que son dependencias
independientes
porque se tienen que
instalar de forma independiente
no las instalas todas
en la colección
¿vale?
así que
mucho
pero esta
me ha llamado mucha atención
y me gusta
me gusta
ese toolkit
fijaos que ya tengo un montón
de estrellitas en un momento
ah bueno
la habéis puesto estrellitas
¿eh?
la habéis puesto estrellitas
y nada
están actualizando ahí a saco
y tienen muy buena pinta
las cosas como son
más cositas
ah
proyectito que el bueno de Feralpa
ha estado recomendando
en su twitter
son como
flechas
con SVG
esto está bien
porque ahora está muy de moda
sobre todo para portafolios
o landing pages
el hecho de poner una
no sé
una flecha
así como dibujada
y tal
son SVGs
así que va a quedar súper bien
te puedes copiar aquí
el componente de React
o el SVG
también te lo puedes descargar
y si te copias el SVG
pues nada
te lo llevas a cualquier proyecto
aquí por ejemplo
y aquí lo tienes
¿vale?
aquí tendrías el SVG
se puede optimizar un poco
el SVG
fijaos que
no está muy bien optimizado
porque todavía se puede bajar
un poco más el tamaño
pero están bastante
bastante bonitas
ahora que ya sabemos esto
os voy a enseñar
una demo
a ver que os parece
esta demo
la ha compartido
Guillermo Rauch
en twitter
y
está muy bien
porque tiene
es totalmente de código abierto
utiliza
el SK
AI de Vercell
que mañana lo vamos a utilizar
porque
vamos a empezar una hackathon
y
vamos a ver
cómo funciona esto
a ver
ask me anything
ah me debería estar escuchando
¿no?
start talking to chat
ah ya me está
vale ya me está escuchando
¿cuál es la capital de Francia?
la capital de Francia
es París
me encanta
como
como ha comentado
como ha comentado
a ver que le decimos
¿me puedes decir
qué modelo
estás utilizando?
estoy utilizando
el modelo
de lenguaje Lama 3
es Giddy
que tiene 8 millones
de parámetros
y es hospedado en Grok
en Grok
mi modelo de texto
es Sonic
creído y hospedado
por Cartesia
¿qué es tu nombre?
la verdad es que en inglés
se nota que tiene
mejor acento
es una pena
que no tiene la voz
como en español
con acento español
pero está bastante chulo
además os pone ahí
cuánto tiempo ha tardado
y tal
si queréis saber más
que sepáis que
todo el proyecto
es de código abierto
que eso es lo más interesante
para entender
cómo se ha hecho
utiliza Whisper
Llama 3
utiliza el modelo
de voz
que escucháis
se llama Sonic
es una aplicación
de Next.js
así que
y es bastante
bastante rápida
así que
si queréis aprender
cómo hacer algo similar
no os lo perdáis
echarle un vistazo
que es un proyecto
muy bonito
y además
y esto es lo que
te va a llamar
realmente la atención
mañana
aquí vamos a empezar
una hackatón
con la gente de Vercel
sí
la gente de Vercel
vamos a tener
más de mil dólares
en premios
más de mil dólares
en premios
así que
si quieres
hacer un proyecto
con Vercel
AI
con inteligencia artificial
algo parecido a esto
o lo que sea
mañana 20
porque vamos a hacer
un pequeño proyecto
que te puede servir
como idea
con inspiración
y vas a tener
un tiempo
para crear
tu propio proyecto
lo entregas
y los mejores
cinco proyectos
van a tener
un premio
así que mañana
aquí en directo
lo voy a estar comentando
voy a explicar
vamos a hacer un poco
de código
para que os sirva
de cómo funciona
y todo esto
y mañana
junto con Vercel
vamos a hacer
este pedazo
de hackatón
así que
mañana veremos
un poquito más
de la toolkit
de AI
como el proyecto
que hemos visto
vamos a ver
cómo está hecho
cómo lo podemos
hacer nosotros
algo parecido
cómo podemos utilizar
este SDK
que es súper fácil
cómo lo podemos
desplegar a producción
para que podáis
participar en la hackatón
y un montón
de cosas más
así que mañana
a las seis de la tarde
hora peninsular española
ahora que siempre
hacemos directo
vamos a estar
haciendo esto
os voy a explicar
cómo podéis participar
es totalmente gratuito
participar
pero yo creo
que es un momento
muy interesante
para que podáis participar
que podáis ganar
uno de los premios
y si no
pues al menos
para que tengáis un proyecto
que podéis añadir
al portafolio
que podéis compartirlo
en LinkedIn
que podéis aprender
una tecnología nueva
así que si queréis
una
no sé
la oportunidad de aprender
NextGS
por ejemplo
pues lo podéis hacer
pero no es necesario
utilizar NextGS
¿vale?
no es necesario
utilizar NextGS
mañana os lo explico
y mañana
os digo los premios
que hay
pero ya os digo
son más de mil dólares
en premios
así que mañana
ya sabéis