Mira, haciendo el café.
Hola.
¡Dios!
1.600 contribuidores, ¿eh?
1.600 contribuidores y nuestra equipo principal.
Desde que nos vimos el último octubre, el crecimiento de nuestra comunidad ha acelerado.
En seis meses, vimos un aumento de 50% en el número de NexJS downloads en NPM,
de 4.1 millones a 6.2 millones.
Hemos reducido el tráfico a todos los sitios y aplicaciones en la red Vercel Edge.
Crecimiento brutal, ¿eh?
Y el número de páginas que se construyen usando NexJS en el Alexa 2.0.
Top 10.000, grew by 50%.
Alexa, tampoco es que sea muy fiable en esto, ¿eh?
Pero bueno.
Wow.
You've been busy.
Well, after all, NexJS was built for scale.
Hostia, me voy a patear un café ahora.
Feedback en tiempo real, a ver.
Bueno, ahora con React Fast Refresh lo han mejorado un montón.
Exactamente.
Vamos a verlo.
Qué chula la taza de Vercel.
La quiero.
Claro, se queda todo el estado, se preserva.
Es lo increíble de esto.
Es algo que impacta el carousel.
Voy a ir al último item y notice que la caza de la derecha todavía está mostrando.
Lo esconderé por ahora.
Pero cuando hago un cambio, veo su reacción y el carousel no se resuelve.
Claro, mira, es que eso es tremendo, ¿eh?
Es que eso es tremendo, ¿eh?
Madre mía.
That's the time it takes to start a new dev session cold and start seeing my product on my screen.
Later, we improved the processing time of your changes.
The time it takes from a change on your editor to seeing it on your screen.
You've been getting these amazing improvements by just keeping NexJS up to date.
NexJS 11, vamos.
Más performance, es que...
100 milisegundos para ver el cambio reflejado.
Brutal.
¿Qué es esto?
Brand new dev server engine for NexJS with the Vercel platform to instantly share, comment,
annotate, and even edit from anywhere in the world, enabling true real-time collaboration.
Let's take a look at how that works.
I'm opening a NexJS live URL that I can share with anyone with a web browser.
This works for both static and dynamic NexJS applications.
Sharing and accessing this URL is always instant, no matter how many pages, because there's no build process involved.
The best part, again, is that this URL is not just for me.
I can share this URL with anybody in my team.
To demonstrate this, let me send this URL to the collaborators I'll have for today.
But this URL...
Oh, you're joining me, that's right.
This is like a Google Docs, basically, with the web.
No se ve por los subtítulos, pero...
¿Veis?
Esa es la barra, la de abajo, que aparece...
Next.js Live.
Next.js Live knows more than just X and Y coordinates.
It understands your application on the React component level.
A key ingredient of Next.js Live is its new development...
Next.js Live.
Yes.
...designed for real-time collaboration.
We overhauled Next.js to run entirely inside the web browser.
By leveraging cutting-edge technologies like Service Worker, Web Assembly, ES Modules,
Es en tu navegador.
Mira, Code.
¡Wow! Inmediato.
¡Wow! Esto era la demo de la NextConf, básicamente. Esto es espectacular.
¡Oh! Parece que Lidia puede ayudarme con eso.
Por supuesto, Guillermo. Como vimos en nuestra última conferencia, las imágenes son absolutamente
esenciales para la performance, y uno de los elementos más comunes utilizados en la web.
Vamos a ver qué es el problema.
Si miramos el código de esta página, parece que Guillermo usó el elemento no optimizado.
¡Ay, Guillermo! Estuvo utilizando una imagen no optimizada.
No es tan eficiente, performante o accesible.
Esto va a afectar a nuestras vidas de web, las metricas standardes que usamos para medir una buena experiencia de usuario.
En Next.js Live, puedo rápidamente cambiar la tag HTML para usar el componente de Next.js en vez.
Desde Next.10, es tan fácil importarlo de la herramienta de Next.js.
Images son la mayor parte de las páginas, especialmente en e-commerce.
La comunidad ha hecho un gran trabajo de mejorar el componente de Next.js desde que fue lanzado en octubre.
Nuestro foco ha sido en automáticamente implementar las mejores prácticas,
automáticamente implementar las mejores prácticas,
automáticamente para cada dispositivo de viewport que la imagen es entregada.
Lighthouse Test proporciona un montón de insights para mejorar tu performance de la carga.
El cien verde.
El cien verde.
Ah, parece que
que luego desplazó este proceso
a su network de edad muy rápida.
La comunidad ha tomado esto aún más
por añadir apoyo y partener
con Cloudinary, Cloudflare,
Alchemai y ImageX.
Estas son preparadas y disponibles hoy.
Lo más, ahora
apoyamos varios layoutes responsables
y montadores de optimización de imagen
custom, dando control
sobre la toda la pipeline.
Hoy, estamos emocionados de anunciar
algunos mejoramientos en cómo puedes usar
las imágenes.
Como Guillermo mencionó, siempre tratamos de
balancear una buena experiencia de desarrolladores
con grandes resultados para sus usuarios.
Empecemos con los desarrolladores.
Como en NextGS11, puedes usar
el keyword import para el SRC.
Puedes usar esto para referir
a imágenes esenciales que son parte
de tu repositorio.
Imágenes con una medida de width y height
reducen la muda cumulativa de layout,
un cambio de web vital.
Hombre, automáticamente.
Importar la imagen
y ya tienes WifiHeight.
NextGS11
Muy bien.
Improves la experiencia
del usuario.
Cuando un usuario
primero visite una página,
algunas imágenes
pueden tardar un tiempo
para descargar,
incluso cuando optimizadas.
Esto puede resultar
en un espacio temprano
en el que la imagen
está descargada,
lo que principalmente
afecta a los usuarios
con un port
en internet connexión.
Para mejorar
esta parte
de la experiencia
de usuario
y para facilitar
la transición
de un espacio
en el que va a descargar.
Oh, efecto Blur.
Plagueholders
para las imágenes.
To get this beautiful effect,
all you have to do
is import your image
and reference it
from the SRC property
in the image component.
We also support blurring
for dynamic images
by adding a placeholder
attributes
and providing
a custom blur data URL
provided by your backend.
We worked hard
to ensure
that the user experience
would be improved
with peak performance
and minimal effort.
O sea,
lo del blur
es automático también.
Sí,
sí,
haremos resumen después.
A ver,
a ver.
Gracias a ti.
Lidia.
Gracias, Lidia.
¿Qué tiene que ser
otro archivo?
Vale,
me he perdido ahí.
Ahora,
ahora iremos.
Guillermo.
Porque de su increíble
performance,
Next.js
y Vercel
ahora
powering
las nuevas
experiencias
de los pioneros
como Zapier,
GitHub,
GitHub,
GitHub.
A ver,
GitHub.
Next.js
A ver,
Subi,
es espectacular
el hecho de
ejecutar,
hacer la build
del proyecto
en el navegador.
Es lo de StackBlitz
que hicieron el otro día.
Madre mía,
¿eh?
¿Cómo se está metiendo
Google en Next?
Es brutal.
Bueno,
estaba hablando mucho
de la performance,
que es lo que le interesa
mucho a Google,
de que las páginas
vayan rápido
para que veáis más anuncios,
lo cual está bien,
¿eh?
En Google,
we shifted
this hard work
away from developers
and into
the framework.
This means
every developer
using these frameworks
gets all
of these solutions
baked right in
to every project
they build.
We also created
rules and checks
that serve
as guardrails.
These support
the business
and the product
as features
are added
and as teams
scale.
This is how
a high bar
of app quality
becomes a side effect
of building
for the web.
Claro.
En Google,
we care about
a thriving web
and we realized
that the best way
to share our insights
is to work directly
with the open source
framework ecosystem
and collaborate
with the web community.
Today,
we work with
some of the most
popular frameworks
such as Next.js,
Nuxt,
Angular.
Ojo,
they're doing
the competition
here.
What's so on
Next.js
that's a lot
of the competition
as soon as
Next.js.
A little bit of
promo
of Google
right now.
The open source
ecosystem
enables
the open source
that's very good.
Google
is able to
provide a lot
to frameworks
like Next.js
and in
terms of performance
and the individuals
alike
because building
custom
infrastructure
is cost
prohibitive
but no sé
el anuncio
que va a
hacer así
de repente.
Google Chrome
we are grateful
to open source.
Thank you.
Ah,
ya está.
Ah,
no.
A ver,
a ver,
ahora viene.
A ver,
ahora viene.
such as
JavaScript
images
CSS
each of
these
is a vast
topic
with complex
challenges
but these
are foundational
optimizations
for the web.
In Next.js
we've shipped
features such as
granular chunking
the polyfill
chunk
the image
component.
We are working
with Angular
and Nuxt
on image
optimization.
We recently
shipped
critical CSS
inlining
as a default
in Angular 12.
I'm happy
to see
that granular
chunking
has become
a default
in Webpack
which not only
powers Next.js
but many
granular chunking.
These foundational
optimizations
power the
trimming of bytes
the reducing
of round trips
separating out
what's needed
for first render
visual readiness
user interaction
such as
by extracting
critical CSS
or setting
the priority
attribute
on image.
I'm excited
for Hussein
to introduce
our work
on quantum
optimization
and just
on optimization
while we are developing
these foundational
optimizations
there are still
a lot of
right decisions
that the developer
has to make.
Al final
los desarrolladores
no haremos nada
son instalar
framework
y ya está.
No necesitaremos
pensar ya.
Some require
the developer
to opt in
such as using
the image
component
to properly
size
and scale
your images.
And some
require
opt-in
with customization
such as
setting
the priority
on images
for early
important images.
And finally
there are some
that aren't
features
but still
require
the developer
to make
decisions
such as
avoiding fonts
that delay
early rendering.
Optimizations
that require
any decisions
from developers
pose a risk
Vamos que no
sois de fiar
no sois de fiar
si tenéis que
hacer las decisiones.
As features
are added
in a steam
scale
even the most
experienced developers
are unable
to keep up
with best practices
nor is it
the best use
of their time.
This is why
today I'm excited
to announce
Confirmance
for Next.js
a system
that provides
carefully crafted
solutions and rules
to support optimal loading.
Vamos, te va a controlar.
As a developer
Confirmance means
that you are free
from having to memorize
lots of complicated rules
for loading performance
and keeping up
with the changing
landscape.
Uy, uy, uy.
You can think of
Confirmance
as a compiler
like TypeScript.
Following the rules
is constraining
but in a way
that builds confidence
because it ensures
predictable outcomes.
It makes teams productive.
Me está bien
porque así no nos tenemos
que preocupar
tanto de esto
y nos preocupamos
de hacer un buen producto.
Confirmance
is a combination
of ES-level
and runtime checks
in development.
Y checks runtime,
o sea, un linter
va a tener configuración
de linter.
¡Qué bueno!
¡Wow!
¡Qué bueno!
Bueno, habrá que probarlo, ¿no?
Confirmance.
Un linter
hipervitaminado.
Interesante, ¿eh?
No me gusta el control.
Pobre Supremo.
Our new conformance
system is enabled
for all new apps
starting with Next.js 11.
Ya tengo ganas
de utilizar Next.js 11.
All you have to do
is run
create next app.
For existing apps
we made it easy.
Upgrade to Next.js 11
and run
Next.lint.
Next.lint.
We made it both easy
and incremental
just like our
TypeScript integration.
I'm glad Lydia
reminded me
to use the image
component earlier.
Now that Next.js
is a conformance
system,
I know that I won't
forget that optimization
again.
Now,
Hussein will set up
conformance
for the app
we're collaborating on
and walk us
through how it works.
A ver,
conformance.
Me cae super bien
Hussein.
A ver.
A ver, a ver.
¿Qué hemos roto?
Bueno, esto se llama
lo más parecido
a un linter.
A ver,
esto, esto,
esto quiero ver
en el runtime check este.
¿Ves?
No incluyas
Starsheets manual.
Esto es
Slink también,
una regla de Slink.
Pero muy, muy bien.
No, no lo hice automático
o yo no vi
que lo hiciera automático.
Lo copió
y lo pegó.
Implemente
y ya está.
También revelamos
que hay una
tag de script externa
en uso.
Ahora,
websites necesitan
third parties
para su negocio.
Y esto puede incluir
analíticas,
ads
y support de clientes.
Totalmente heavy.
No bloques,
no bloques.
¡Anda!
Qué bueno.
un componente
como el de imágenes
pero para los scripts.
Incluso esto
para Google AdSense.
Before Interactive.
Interesante.
Hostia,
¿por qué no puede ser
fetched antes
pero ejecutado después?
No ha hecho
ni un ejemplo
sobre anuncios.
Es curioso.
Cuando es lo más típico.
Analytics y anuncios.
para mejorar
los usuarios
y usuarios.
Ese es.
Por ejemplo,
muchos usuarios
rely
a custom web fonts
para ayudar
a beautiful
web experience.
Overnos 80%
de web pages
usan
a custom web font
a parte de
branding,
design,
o incluso
para mantener
cross-browser
y de voz
consistencia.
La mejor web font
que puedes cargar
es la que no cargáis.
Esa es la mejor.
automáticamente
en línea
a build time.
Esto elimina
el rato
para obtener
declaraciones de font
para mejorar
los primeros
y los momentos
más contables.
Estamos felices
de compartir
que font
optimización
suporta
tanto
Google Fonts
y Adobe Typekit.
Hostia,
¿ese era el logo
de Google Fonts?
¿La han cambiado?
Que añadimos
la optimización
a Angular
para Google Fonts.
Entre 2 a 5 segundos
es un montón.
Así estarían
también las fuentes.
La verdad es que
es muy bonito
esta colaboración
que obviamente
hay intereses
pero...
Interesante.
Esto es interesante
pero Google
está poniendo
muchos huevos
en la cesta
de Next.js
porque por ejemplo
¡Ojo!
Aurora.
No hemos visto
este tipo
de colaboración
a lo mejor
tan cercana
con
con otras opciones
como puedes...
Bueno,
qué bien esto.
Qué gratis.
Uf,
ya quiero probar
el live,
este tipo.
Qué pasada.
Hay que tener
en cuenta
una cosa importante,
¿vale?
Hay que tener
en cuenta
una cosa importante
y es que
Next.js
no da dinero,
¿vale?
No da dinero.
¿Qué significa esto?
Watch the after party.
Yo estoy
en la after party,
¿no?
¿Qué significa esto?
Que cuando hemos visto
por ejemplo
que estaba hablando
de otras opciones.
Uy,
after party.
Esto es la after party.
Lee Robinson.
¡Ey!
¿Qué estás live?
Lee,
¿me escuchas?
Lee,
¿me escuchas?
¿Estás live?
Ya,
muy bien.
Pues entonces,
lo que estaba...
Sí, sí,
ready.
¡Ey!
Vale.
Vale.
Pues eso,
hay que tener en cuenta
que Next.js
no gana dinero per se,
¿sabes?
O sea,
tú te instalas Next.js
o lo que sea
y te quedas igual.
Pero Next.js
se fundamenta
su dinerito
en Vercell,
básicamente,
¿no?
En Vercell.
Vamos a poner
esto más pequeñito.
Seguro que lo que dice Lee
es súper interesante,
pero bueno,
me parece más interesante.
Aquí es donde está
ganando dinero
en esto,
en este tema,
¿vale?
y cada vez está teniendo
pues empresas
cada vez más grandes,
¿no?
Aquí tenemos el pricing
que sí,
que empieza a cero,
que es genial
porque te permite justamente,
te permite pues poder utilizarlo
en tus proyectos hobby
como lo tengo yo,
aunque yo ya estoy pagando,
ya os lo digo,
porque el COVID vacuna
que es un proyecto
que yo hice en Vercell
empezando gratis,
este ya he tenido que pagar
y estoy pagando
20 dólares al mes,
que no es mucho,
pero es que Vercell
no viene a,
no viene justamente
a por ti
o a por mí,
que también,
sino que viene
a por el enterprise,
viene a por GitHub,
viene a por Zapier,
viene a por grandes players,
¿sabes?
Y ahí es donde realmente
está sacándose el dinero,
Vercell.
¿Y qué es lo que quiere?
Que me parece súper interesante,
lo que está haciendo
es una estrategia
donde está poniendo
al desarrollador
en el centro,
la experiencia de desarrollo,
de forma que si todos
los desarrolladores,
todos los creadores
de contenido,
si todo se mueve
a Vercell,
esto lo que va a hacer
justamente
es que cuando
estos desarrolladores
sean contratados
por estas empresas,
¿tú qué vas a querer
trabajar?
Pues ya te lo digo yo,
voy a querer trabajar
con Vercell
y voy a querer trabajar
con NextDS
y esto es lo que,
ah,
por lo que viene.
Esta es la perita,
la perita en dulce,
ya lo digo yo
y es que fijaos,
todos los repositorios,
si una empresa
tiene los repositorios
en GitHub,
pues qué va a hacer.
A ver qué está contando
Luis Robinson.
¡Ey, hombre!
Nada, hombre,
un placer, Guillermo,
¿cómo estás?
¿Queréis enteraros
de lo que comentan?
¡Ay, qué bonito el fondo!
Bueno,
antes de que empecemos
con las preguntas,
a ver qué dice.
Una cosa más.
Va a anunciar
muy especial.
DropParty,
¡ojo!
¡Ojo, enlace!
Swap, drop,
no, live.
¡Ah!
Pero esto ya lo han anunciado.
Vale,
para quien lo sepa,
hay un swag,
ah,
Give,
Give,
pero ¿sabes que era el DropParty?
Es este.
Básicamente,
que vas a poder
comprarte unas camisetas,
¿no?
Unas camisetas por aquí.
Get the Drop.
Y puedes comprarte esto,
te puedes comprar,
90 pavos,
no te creas tú.
No creáis que esto
es súper barato,
¿eh?
Lo que esto,
el dinero que ganan,
se lo van a dar,
en este caso,
a WWWC,
y eso.
Bueno,
solo tienen dos,
¿no?
Tienen muchos más,
la verdad.
Este está bastante bonito.
Este está bastante bonito.
Me gusta,
me gusta.
A ver qué más se cuenta Guillermo,
va.
Está muy excitado,
está muy excitado.
Os digo una cosa,
os digo una cosa,
Guillermo me avisó,
Guillermo me avisó de esta feature,
Guillermo me avisó en mi entrevista de esta feature,
y lo podéis ver,
y me comentó esto,
que lo siguiente que querían hacer es lo que está comentando ahora.
Querían llevar la web a tiempo real y poder editarlo.
Os buscaré el extracto,
os buscaré el extracto.
Yo no tengo la taza de enseñaros,
pero os puedo enseñar esto,
y os puedo enseñar una planta,
¿vale?
Pero no tengo la taza de diversión.
Oye,
aquí están todos.
Muy bien.
Hola.
Me parece que yo soy parte.
Vamos a empezar con Shubi.
Hola a todos.
Soy Shubi,
soy el manager de la tecnología y ingeniería
de la tecnología de la tecnología y de la tecnología de la tecnología.
En realidad,
hemos publicado nuestro blog,
dando la iniciativa un nombre.
Ahora se llama Aurora.
Por favor,
ve a la web dev barra Aurora.
Introducción a Aurora.
¿Qué tal?
¿Qué tal, Hussein?
Aurora.
Frameworks.
Visual Studio Code,
Sublime,
TypeScript,
Slint.
Ahora voy yo,
ahora voy yo, creo.
Vipersel's announcement.
Like,
even when you think the next can get any better.
It's always better.
Hi,
Eli.
My name is Miguel.
I'm a web developer as well.
Thank you for having me.
Bueno,
creo que me ha saltado.
Bueno,
no pasa nada.
Bueno,
a ver,
vamos a mirar un momento esto de Aurora.
Básicamente esto de Aurora,
entiendo que lo que,
mira,
aquí dicen un poco los pasos.
Identificar,
algún tipo de falta de experiencia del usuario que esté,
o yo que sé,
que la web vaya lenta o lo que sea.
Prototipar soluciones para empatizar strong defaults.
Fijaos que lo que viene a buscar mucho,
mucho,
mucho Google es eso.
Es en el que el desarrollador no se equivoque y no puede hacer la web lenta.
Eso es lo que viene a hacer.
Es lo que quieren hacer.
Verificar la feature con otro framework stack.
Claro,
por ejemplo,
si esto lo recuperan en Next.js,
lo quieren mirar que en Gatsby,
sin ir más lejos,
aunque he visto que Gatsby,
pues por aquí no salía nada.
Y no han comentado nada de Gatsby.
Hay que tener en cuenta que Gatsby sí que es exactamente una competencia muy fuerte de Vercel y de Next.js.
Sí,
bueno,
Aurora,
a ver,
tampoco se parece tanto a mi logo.
No sé qué tiene.
Conformance.
Y vamos a ver el de Conformance for Frameworks.
Es para Frameworks en general,
no solo es para Next.js.
¿Ves?
Strong defaults,
actionable rules.
Interesante.
Automatic,
manual.
Es que quieren eso,
que sea todo automático,
que no quieren saber nada de que te puedas equivocar.
A ver,
vamos a seguir aquí.
We also try to make sure that we are,
you know,
telling developers what tools they can use,
how they should use it the right way.
¿Ves?
The right way.
Que no la caguéis,
vaya,
que quieren,
estoy de acuerdo con...
A ver,
todo lo que está haciendo Next.js
tiene sentido,
porque esto lo que va a hacer
es que tú te puedas enfocar realmente
en lo que es importante.
¿No?
O sea,
lo importante no es tanto que tú configures el linter
para el usuario final,
¿eh?
No es importante que tú configures el linter,
que tú te configures el webpack.
Fijaos que el camino del framework de Next.js
ha sido que tú cada vez vayas tomando menos decisiones
y de salida la herramienta,
la aplicación sea lo más rápida,
lo mejor posible,
sin que tengas que tú preocuparte de eso.
Que tú te preocupes en hacer un buen producto.
hacer acceso a la herramienta en sí mismo,
pero la capacidad de influenciar el futuro de esa herramienta.
Así que nuestro proceso de añadir cualquier herramienta
a Next.js ha siempre sido sobre
abrir RFCs,
escuchar el feedback,
engañar con los desarrolladores en Twitter,
en GitHub,
en Discord,
o en cualquier cosa.
¿Sabes?
Solo me encanta hacer la herramienta mejor
como respuesta a los feedback de los usuarios.
Así que eso es principalmente lo que estamos haciendo
en la aplicación de las RFCs también.
En términos de la relación con la plataforma,
siempre lo he visto como una relación muy natural
simbiótica,
donde se hace un herramienta que te da un modelo de programación,
y luego creas un trabajo que tendrá Next.js,
aquí seguramente hay un montón de ideas
que al final estarán.
Ideas.
En resumen,
ahora Next te va a decir
cómo hacer las cosas.
Casi, casi que parece.
Vamos a ver Next.js Next.org Live.
Vamos a ver la nueva feature esta de Live.
Vamos a ver si la podemos probar.
Me voy a poner otra vez en la esquinita,
ahora que ya no formo parte de la presentación.
Uy, ¿qué ha pasado aquí?
¿Os se ha roto?
Ah, Next.js.
Así, así, así.
Vamos a ver.
Code in the browser with your team.
Instantly shared.
Fijaos, esto, esto, es que esto me parece espectacular.
¿Os parece si migramos esto como, ah, get early access?
O sea, que todavía esto no está.
Venga, yo quiero mi early access.
O sea, esto todavía no está.
Pensaba que ya estaría disponible.
O sea, podríamos ver alguna demo y tal, pero no...
Try Next.js Preview Release.
Venga, ahora vamos a clonar y deployar.
Venga, ya he pedido esto.
Yo lo quería probar en una aplicación mía, pero venga.
Clone and deploy.
Vamos a darle.
Vamos a probarlo.
Create Git Repository en GitHub.
Venga.
Y commerce.
Vamos a poner en Midu commerce.
Create, create private.
Nah, private no hace falta que sea.
Crear.
Vamos a probarlo.
Vamos a probarlo.
¿Cómo le tomo access?
Esto, yo creo acceso.
How does real time technology?
Replica.che.
Esta gente se debe estar forrando.
Esto es una startup que el otro día estuve viendo.
Que es bastante sencilla.
O sea, sí, mucho real time y tal, pero es como una base de datos key value.
Bastante en tiempo real.
Y el precio no estaba mal.
500 era gratis, pero es dinero, dinero.
Vamos a ver.
Fetching, building.
Bueno, está haciendo...
Qué maravilla también esta idea de darle a un botón y hacer un clone and deploy.
Esto también está súper genial.
¿Qué tecnología utiliza NextGS Live?
Vale.
Para el que no se haya enterado de qué es esto de NextGS Live, que han presentado,
que es espectacular, ¿vale?
El NextGS Live viene a ser un poco la idea que vimos hace poco del...
¿Cómo era esto?
Node, Live, Vercell.
A ver si soy capaz de encontrarlo.
Esto, los web containers, ¿vale?
Los web containers era poder ejecutar Node.js de forma nativa en tu navegador.
Y esto es un anuncio que hizo StackBlitz.
Y StackBlitz justamente ya habló de Vercell.
¿Ves?
Estoy súper contento de hacer partnership con StackBlitz para hacer NextGS y Vercell más accesible a los desarrolladores.
¿Por qué?
Porque con esto tú podrías abrir un StackBlitz y lo que hacías es que sin necesidad de instalar Node en tu máquina y tal.
Sino todo se ejecutaba en tu navegador.
Todo, todo, todo.
Y estabas haciendo la build y todo en tu navegador.
Y iba súper rápido.
Pues esta tecnología que estamos viendo aquí es exactamente lo mismo.
Esto de NextGS Live utiliza exactamente lo mismo.
¿Qué es lo interesante de esto?
Bueno, pues utilizando WebAssembly, utilizando pues un montón de los service workers y todo esto.
Lo que consiguen es que no tengas que instalar nada.
Sino que en el propio navegador estés ejecutando todo lo que necesita Vercell para funcionar.
Lo que ahora tengo, la curiosidad que yo tengo es el hecho de cuando tú, y lo vamos a ver ahora,
cuando compartas la URL, ¿cómo funciona esto realmente?
Tiene que estar mi ordenador, o sea, mi ordenador tiene que estar online para que lo veas.
Uy, ¿qué ha pasado aquí?
Atentate to terminate.
Ay, ay, ay.
Ay, ay, ay.
Oh, no.
Oh, no.
Oh, no, no.
Aquí está dando algún tipo, no sé.
NextGS, ahora, bueno, telemetría anónima y tal.
Pero esto, atentate to terminate tracing spam.
I was already...
Esto, ah, vale.
Ahora, ahora.
Ahora sí, ahora sí.
Vale, ya está haciendo la uploading.
Ya está haciendo la uploading.
Vale.
Does NextGS Live require Vercell?
Vale.
The NextGS Live Development Server Engine, ¿veis?
Se ejecuta enteramente en el navegador y va a ser completamente open source.
Completamente open source.
Ni siquiera necesitas Vercell.
Y tienes features como autenticación, comentarios, cursores.
O sea, y va a ser totalmente, estoy alucinando, va a ser esto totalmente open source.
O sea, otra empresa podría recuperar esto y utilizarlo y ya está.
Brutal.
Brutal.
Bueno, pues ya tenemos esto.
Ya hemos hecho el develop, el no sé qué, el no sé cuánto.
Pues nada, vamos a clonarnos este proyectillo.
Mira, collaborate live.
Ni siquiera hace falta que lo clone tal cual.
Sí, ahora tenemos un nuevo botón aquí que es colaborar live.
Le voy a hacer un dismiss.
Collaborate live.
Y esto, ah, bueno, pues mira, authenticating.
Otra vez.
Pero si ya está authenticated.
Venga, os paso la URL y vamos a ver si esto funciona como dicen.
Vamos.
Vamos a ver.
Loading page.
Yo entiendo que este loading page, a ver, es aquí.
Oh, oh.
Tum, tum, tum.
Tum, tum, tum.
Ahora sí, ahora sí.
Vale, he tenido que refrescar, pero bueno, fíjate, ¿eh?
Aquí tenemos.
Ah, o sea, que esto no es total.
Totalmente abierto.
Mira, os voy a pasar un invite link.
A ver si con esa podéis.
Entiendo que entonces no es, no, no podéis.
No se puede.
O sea, esto es más que nada para gente que sea del mismo equipo o que sean del, o tener,
claro, yo es que lo he hecho desde una, de una cuenta pro.
¿Veis?
He hecho desde la cuenta pro.
Claro, tendría que hacerlo desde una cuenta personal, entiendo.
Si lo hago desde una personal, no estás autorizado para acceder la, vale, la cuenta.
Puedes hacer un send out o login con un diferente, con, claro.
Yo lo que tendría que hacer es daros permisos para que estéis y seáis parte del equipo y poder hacerlo.
Entonces tendrías el chat y aquí hay un chat, mira.
Es el mismo chat que me gusta en SGS.com.
Claro, esto es más para equipos y ya está.
Simplemente.
Y podéis dibujar aquí.
Vamos a poner aquí, pues, una personita.
Muy bonito.
Muy bien, vale.
No se puede cambiar el color.
O sea, tú tienes que quedarte con ese color y no puedes hacer nada al respecto.
Inspector, View Project.
A ver, lo del código.
Esto es lo que...
¡Hala!
¡Qué bueno esto!
¡Qué chulo!
¡Qué chulo!
Sí, a ver, creo que tiene sentido, pero creo que estaría genial poder invitar a cualquier persona, ¿no?
O sea, creo que sería genial poder tener, al menos, el tener permisos.
En el sentido de, mira, te paso esta URL, pero no tienes permiso para editar el código.
Solo tienes permiso para verlo.
Hostia, eso sería genial, ¿no?
Permiso anónimo, por ejemplo.
O, yo qué sé, o un permiso de, vale, puedes editar el código, pero no lo puedes comitear si no tienes dos Approve.
Cosas así.
Creo que sería todavía más brutal.
Bueno, pues aquí tendríamos esto.
A ver si somos capaces de cambiar algo.
Dessert, Headline, Dessert.
¿Y este Dessert de dónde aparece?
Este Dessert, Headline, este Dessert, Drague, no sé qué.
Se supone que yo aquí, si cambio aquí y pongo...
¿What?
¿Qué?
Pero sí.
O sea, es que ha sido muy raro, porque ha ido más rápido.
El verlo, el verlo, ha ido más rápido.
El verlo en el editor, o sea, ha sido tan rápido que por un momento no sé qué he hecho antes.
Vale, pues esta es la tienda de Midudev.
Pues fijaos, o sea, esto es live live.
Esto es magia potagia, o sea, madre mía, madre mía.
O sea, cambiamos el texto aquí.
Es que fijaos, es que es real time.
O sea, real time.
Básicamente, real time.
Real time.
Si yo ahora me pongo a poner cosas raras aquí, digo, venga, pues ahora quiero una imagen.
Voy a copiarme esta imagen mía, por ejemplo.
Por poner una.
Ah, pues ponga, toma, una imagen.
Pues ya está, una imagen así.
Guau, brutal, brutal.
Entiendo que puedo, ah, mira.
Me gusta mucho porque el editor es Visual Studio Code, pero lo han simplificado, ¿no?
Entiendo que sí que debería haber import, ¿ves?
Sí que tiene autocomplete, o sea, es un editor mónaco.
Esto, todo lo que veis, todo lo que estáis viendo es sin servidor, ¿vale?
Todo lo que estáis viendo es todo funcionando en mi navegador.
Es súper importante, ¿eh?
Esto no, o sea, no tiene ningún servidor detrás.
Aunque esto tire de algún servicio, pero todo lo que está, incluso si aquí tuviésemos APIs, que no lo sé, ¿eh?
¿Ves?
API, catalog, todo esto, todo esto se está ejecutando en mi navegador.
O sea, es que es espectacular.
Esto es lo de StackBlitz, pero ya a otro nivel.
A ver, vamos a ver qué APIs hay por aquí, por ejemplo.
Profile, Search, Search, GetStacked, Search.
Bueno, claro, es que esto, ¿quién sabe lo que hace?
Components, Page, API, Catalog, Products.
Claro, Products, es que los productos están aquí dentro en e-commerce, pero cualquiera entra ahí.
Claro, no puedes entrar ya a las dependencias.
Eso ya sería otro nivel.
Vamos a verlo.
Alguien dice, ¿y la RAM qué?
A ver, no debe ser algo gratis, desde luego.
De hecho, vamos a ver aquí, Google Chrome.
¿Dónde está la RAM?
No la veo.
Ah, está aquí, está aquí.
Memoria.
Google Chrome, bueno, a ver, tampoco...
Hombre, hombre, no está mal.
No está mal.
Desconozco si realmente es culpa exclusivamente de esto, ¿vale?
Pero, pero bueno, no me laguea el ordenador, ¿eh?
Si más o menos vemos eso, no me laguea.
Vale, aquí tenemos las APIs, Search, no sé qué, Product.
Tendríamos el Index, que es el que estábamos viendo antes.
Básicamente, no sé si tenemos alguna imagen.
Mira, aquí a ese botón le podemos dar y nos va todo el tema de...
O sea, tengo toda la estructura aquí, toda la estructura.
De hecho, aquí puedo ver el Package JSON.
No sé si se puede instalar alguna dependencia.
No.
Se pueden crear archivos y carpetas,
pero parece ser que no se puede instalar una dependencia.
O sea, yo si, por ejemplo, estoy aquí en...
Me voy a páginas, me voy al índice,
y me pongo a importar una dependencia que no existe,
¿creéis que esto me lo voy a instalar o qué?
No.
No.
Se queda igual.
O sea, dependencias y tal, eso ya sí que no funciona.
O sea, parece ser una herramienta muy interesante
una vez que ya tienes lo que sea el código más o menos y tal,
pero no sé si lo añadirán.
Me imagino que sí.
Pero no puedes ir añadiendo dependencias, ¿vale?
Luego, yo lo que quería ver era esto, ¿vale?
Quiero, por ejemplo, hacer un import de una imagen.
Porque antes han comentado que import de imágenes...
Vamos a ver.
A ver.
Ah, sí.
Sí que carga la imagen.
Fíjate, sí que las carga.
O sea, vale.
Lo que quiero hacer es un import,
que es una de las cosas que hemos visto nuevas,
que va a hacer el import.
Vamos a ver si tiene autocompletado de...
No.
A ver.
Import.
Import.
Y vamos a hacer from.
Y a ver si aquí tiene autocompletado...
No.
No tiene autocompletado de las rutas.
No tiene autocompletado de las rutas.
Ya le estamos pidiendo demasiado.
Pero ya hubiera sido genial, ¿no?
Tener IntelliSense, por ejemplo.
Pues no.
Y de hecho...
Ah, sí que se queda ahí.
Es un poco raro, ¿eh?
Cómo se guarda, ¿eh?
Las cosas.
Cart.png.
A ver.
Vamos a importar el cart.png.
Y esto se supone que sería source.
Y esto por aquí vamos a utilizar el...
Vamos a ponerlo por aquí.
El image.
Import image from next barra image.
Vamos a poner el image.
A ver.
Antes han comentado...
Image source.
Y esto era el cart.
Bueno, he puesto source, pero como puede ser cualquier cosa, ¿vale?
Vale.
He cargado alguna...
Esta.
¿Veis?
Esta cart.
Esto lo he cargado yo.
Aquí en medio.
Esto lo he cargado yo.
Pues inmediato.
Fíjate.
A ver.
Antes decían que habían hecho esto de playholder blur.
Poniendo así.
No creo que esto funcione tal cual así, ¿eh?
A ver.
Mira.
Además, los errores de cualquier error.
Oye, pues sí que ha salido, ¿no?
Mira.
¿Habéis visto eso?
El playholder.
Lo voy a poner más arriba para que se vea.
Para que se vea.
A ver.
Por aquí...
Lo vamos a poner aquí arriba.
A ver si soy capaz de que se vea.
Porque claro, es que esto va tan rápido que...
Pero sí.
Había hecho el blur, ¿no?
Mira.
Ostras.
Es que se ve muy poco.
Se ve súper poco.
Pero vaya.
Que sí que está ahí, ¿eh?
No sé si debería cambiar de network y tal.
Buah.
Pues es súper, súper interesante.
Además, mira.
Se van viendo los clics que vas haciendo.
O sea, tú le vas dando clic y te vas viendo...
Ah, bueno, no.
Es que esto estaba pintando.
Pero sí, se ven los clics.
¿Ves?
El clic.
Otra cosa que estoy viendo es que conforme tú navegas, va cambiando la página que se
te abre a la izquierda de forma automática.
O sea, yo si me voy a All...
¿Ves?
Me voy a la Home, me abre la página de la Home.
Si me voy a New Arrivals, pues me cambia...
Me va a la página de las categorías.
Fijaos aquí a la izquierda que me abre automáticamente la página a la que me interesa.
Eso me parece también...
A ver si, por ejemplo, busco algo.
Monitor.
O Share.
¿Ves?
Me ha abierto la página de la búsqueda.
¡Guau!
Está genial, ¿eh?
Está genial.
Bueno, ¿habéis visto el blur?
Ahí sí que se ha visto el blur.
En un momentito.
Brutal, ¿eh?
Y fijaos que lo más interesante de lo que acaba de ocurrir con esto del blur es que
el width y el height ya lo está dejando.
No he tenido que configurar nada.
¿Por qué?
Porque cuando haces el import de una imagen de esta forma, no hace falta...
Antes tenías que decirle, este el width es tal y el height es tal, ¿sabes?
Pues no, lo está detectando automáticamente.
Entonces ya no está haciendo un salto aquí.
Cuando tú vas de página a página, si no se ha cargado la imagen, deja ese hueco ahí
justamente para meter la imagen.
¡Oh, mamá!
¡Madre mía!
¡Madre, madre mía!
A ver...
¡Eh!
¿Qué ha pasado aquí?
Se ha unido una persona más.
Se ha unido una persona más aquí.
No, dos personas más.
Y no me han invitado.
Muy bien.
Bueno, ¿queréis que hagamos la migración de un proyecto aquí en vivo y en directo?
¿Migramos el COVID vacuna en un momento o qué?
¿Lo migramos?
¿Lo migramos?
Mira, yo tengo un proyecto que está utilizando justamente el NextGS10.
y lo tengo por aquí, ¿vale?
Pues vamos a mirarlo a NextGS11, si os parece.
Y además así vamos a ver también el linter, ¿vale?
Que me parece interesante.
Así que venga.
No sé si funcionarán todas las dependencias y todo esto.
Vamos a pensar que sí.
Porque ¿qué es lo peor que puede pasar?
¿Que se caiga todo al suelo?
Bueno, no pasa nada.
Next.
Mira, ya está disponible la 11.
Ya está disponible aquí.
Calentita.
Calentísima.
Que acaba de salir.
Next Images.
Esto no sé para qué es.
¿Qué es esto de Next Images?
Hemos utilizado With Images.
Esto es la que lo utilizamos.
Avatar Images.
Ah, esto es para importar de fuera, ¿vale?
Ok, ReactDOM.
Esto ya está en el último.
Bueno, me ha gustado la conferencia,
pero es verdad que al final
pues ha habido cosas que no han anunciado
que yo pensaba que anunciarían, ¿no?
Toma el tema de HTTP3 para versel,
para los servidores.
Pues eso no han dicho absolutamente nada.
¿Cómo se os ha quedado a vosotros el cuerpo?
¿Os ha gustado?
A ver, también el Next Images Live es muy brutal.
Yo creo que ahí sí que ha estado genial, ¿eh?
¿Por qué importan esas partes de Next Images aparte?
Porque son como plugins, ¿vale?
Tenemos este Next Compose Plugins,
para utilizar más de un plugin a la vez.
Esto es para hacer la Progressive Web App.
Esto es para hacer un tema de SEO.
Y esto para poder...
Esto, si no recuerdo mal,
era para poder soportar dominios externos.
Lo voy a mirar, ¿eh?
Este Next Images.
Creo que era para dominios externos de las imágenes.
Load Images from local computer.
Esto no es lo que estoy utilizando,
sino que lo que estoy utilizando es esto.
Load Images from remote.
Este es el que creo que estoy utilizando.
Para las imágenes de fuera, ¿vale?
Porque si no, parecía que no funcionaban y tal.
Si no, lo podemos ir probando.
A ver.
Ah, ¿qué ha pasado?
Mira.
No puede resolver, no sé qué, no sé cuánto.
Bueno, esto es porque estoy utilizando...
Llega así.
Peer Depths.
Estoy utilizando NPM 7.
Y parece ser que no...
Que no le gustan las peer dependencies.
Pero bueno, lo vamos a hacer.
¿Por qué pagas Vercell?
¿En qué te limita la versión gratuita?
Chico, migrania.
Limita en que tiene límites, hombre.
A ver, Vercell limits.
Tiene límites.
Y a mí me llegó un correo diciéndome,
oye, te estás superando los límites.
Por ejemplo, en Hobby tienes 100 deployments al día.
Esto no es un problema.
12 funciones creadas por deployment.
Esto normalmente tampoco es un problema.
El tiempo de ejecución tampoco suele ser un problema.
Pero, aparte de estos límites, hay más límites.
Que no aparecen por aquí.
Files.
A ver.
Function.
A ver si sale transfer.
Bueno, hay uno que es de transferencia.
Mira, aquí están.
Veis que aquí hay un montón más.
Deployments per day.
Pero veis que aquí hay un montón de límites y historias.
Pues hay uno que es la transferencia de datos.
Y otra que es el, si no me equivoco, es...
A ver si es de transfer service.
¿Cuál era el otro?
Es que yo estaba a punto de petarme dos.
Pero bueno, hay una que es eso.
Que el transfer size...
¿Será el usage?
No.
Usage no.
Limits.
Transfer.
No.
Size.
Bueno, ahora no me acuerdo de dónde está.
Pero uno es el transfer size y ese es tú a punto de petármelo.
Ah, y bank with.
Exacto.
Bank with.
Muy bien.
Bank with.
No, pero tampoco.
Bank with.
Tampoco está.
A ver si lo han quitado.
Y ahora de repente yo lo he pagado para nada.
Bueno, a ver.
Esto ya ha hecho la instalación.
MP en run.
Tengo una duda.
¿Cómo se instalará?
¿Sabes cómo migro yo uno que tenga justamente...
Claro, yo aquí tenía Next.js 10.
Quiero Next.js 11.
Next.js 11.
Y lo que quiero, esto.
Yo quiero conformance.
Eso es lo que quiero, el conformance.
Conformance es un sistema NPX NextLint.
¿Vale?
¿Y cómo lo migramos?
C-R-A-Migration.
Migration.
Claro.
Ah, mira.
Ostras.
Mira, esto no lo hemos visto, ¿eh?
Han sacado aquí como un Create React App Migration para migrar de Create React App a Next.js.
Ostras.
Qué fuerte me parece.
Qué fuerte me parece.
Vale.
Dice que aquí podemos ejecutar en COVID-Vacuna, podemos ejecutar NPX NextLint.
Tú uses Lint, necesitas ejecutar unas cuantas cosas.
Vale.
Hay que instalar save dev slint config next.
Pues vamos a instalarlo, ¿vale?
Esto es lo nuevo que habría que instalar, este nuevo paquete para la configuración de linter en Next.js.
Vamos a darle.
Y así también voy a configurar el linter.
¿Vale?
No se pretende.
Y NPX NextLint.
Vamos a ver si ahora esto funciona.
A ver de qué se queja.
Mira.
NPX NextLint.
A future webpack 5 Next.js config.
Has moved.
No sé qué, no sé cuánto.
Mira.
Y de cada fallo te da una URL.
Que esta URL, por lo que veo, no funciona.
Pues mira, aquí tenéis para hacer una pull request.
Vale.
Ahora que ya tenemos el linter instalado, lo podríamos...
Claro, yo tenía aquí estándar.
Esto ahora me va a fastidiar la marrana.
Porque ahora este slint context, slint config next.
Vamos a buscarlo en Geekhat.
Porque me imagino que está en Geekhat.
Es next.
Hostia, pero estos no son oficiales, ¿no?
Hay gente que ya había hecho este paquete.
Pero lo había hecho sin ningún tipo de pudor.
Mira, config next.
Packages.
Bla, bla, bla.
O sea, que es este.
¿Cómo lo harán, no?
Para mantener todo esto en...
Para mantener todo esto en...
No sé.
En silencio.
Claro, lo hacen todo en ramas privadas y tal.
Pero entonces de repente en Geekhat lo tienen que poner...
¿No?
Si miramos el historial de commits en next.es.
Me imagino...
¿Veis?
Hace dos horas, once.
De repente, pam, toma.
Aquí tienen todas las versiones.
Qué bueno.
Qué bueno.
A ver.
Entonces.
Slim config next.
Yo me imagino que este slim config next ahora, para yo poder utilizarlo en el editor, que es lo que quiero.
Vamos a buscar slim config next.
Y a ver qué config next.
Este.
Y sería el index.
A ver, que si no, lo que puedo hacer es simplemente utilizar esto.
Vamos a ver si esto funciona.
Aunque si os fijáis, hay una cosa que me ha sorprendido.
No se queja tanto de los puntos y coma.
O sea, el linter que están añadiendo no es tanto de estilos, no es tanto de cómo hacen las cosas, de si pones punto y coma, si nos pones punto y coma y tal.
Sino que es un tema más de si pones imágenes o no pones imágenes.
Me da la sensación, ¿no?
O sea, si aquí pones image, source.
En este caso todavía no he conseguido que funcione.
Pero ¿veis?
Si ejecuto aquí en epx next link, parece que no.
Tampoco.
O sea, no se queja de nada.
No sé cómo hacer que se me queje de algo.
No sé qué configuración tiene en realidad.
Slim config next este.
Vamos a mirar una cosa.
Vamos a buscarla otra vez.
Ahí.
Vamos a buscar next.
Next y es.
¿Has probado el next script?
No, no lo he probado.
Lo probamos.
Lo he intentado probar.
Mira, vamos a intentar primero levantarlo todo.
¿Vale?
Future webpack in next config has moved to the double level webpack 5.
¿Vale?
Primero vamos a arreglar esto.
Porque igual esto es lo que está haciendo que este future lo dejamos aquí.
Webpack 5 a true.
Le quitamos esto de aquí.
Y vamos a poner empy en randev otra vez.
A ver si esto funciona.
Usando webpack 5.
Soporte disable de la progresive web app.
Y está compilando.
Parece que no hemos tenido que hacer mucha cosa.
Compilando.
Venga, ya ha petado algo.
Tienes que usar import para cargar un S-module.
Esto es el D3Array.
Pues este problema no lo tenía antes.
Este problema es nuevo.
No sé si el D3Geo, este D3Geo, es un módulo en más script módulo.
Hostia, pero esto tiene pinta de ser una dependencia.
O sea, no es una culpa tanto del...
No sé si he tocado la versión de esto.
He tocado la versión de esto.
A ver.
A ver si sin querer.
No.
D3Geo.
D3Geo.
D3Geo.
A ver.
D3Geo.
Dónde lo estamos importando.
Import.
Y se queja de...
Tienes que usar...
Most use import to load S-module.
Que es justamente lo que está haciendo.
Of S-module is not supported.
Require of S-module is not supported.
O sea, es que este...
Esta dependencia...
Tiene algo chungo.
Instead rename index to end...
A ver.
Esto no es culpa...
O sea, esto no es culpa de NextDS.
Aunque me extraña que esto es una diferencia que...
Que antes no ocurría.
Pero...
A ver.
D3Array.
D3Array.
¿Cómo es esto?
D3Geo.
D3Array.
From use modu.
T4 Uzc-modul o no sé qué.
No sé cuánto.
Esto...
settings.
No.
Aquí.
Esto.
esto no sé por qué
lo está importando
de forma incorrecta
vamos a probar a hacer un MP en run
y vamos a hacer un build
antes de continuar
yo que sé, a ver si con las diferencias de web path 5
hay algo raro
y no sé, ah bueno mira
ahora sí que tengo aquí unos cuantos
me parece a mí, ¿no?
si en linter, puede ser
yo creo que sí
ahora lo miraremos
puede ser que el linter ahora me dé más
mira, yo creo que ahora el linter
me da más información que antes
pero mira, me da el mismo error este
must use import to load
as module
esto es súper raro
es como que hay una dependencia
aquí
next no puede ser
es linkconfig tampoco
es como que hay una dependencia
de estas de 3 y tal
que se ha actualizado recientemente
a lo mejor
esta, esta por ejemplo
desde hace 10 días
tiene mala pinta
pero parece que hay alguna
que a lo mejor ha tocado
¿ves? adopt type
mira, esta tiene muy mala pinta
y esta tiene muy mala pinta
this package no requires
no just 12 or higher
parece que tiene mala pinta
de que hay alguna dependencia aquí
hay alguna dependencia aquí
que con el tema de moverse
a smodules
igual la ha liado un poco
d3 geo
aunque aquí tengo la 2.01
fdt array
no sé qué
claro, igual es esta
la de d3 array
que se ha actualizado
esto nos ha pasado más de una vez
ya en el trabajo
últimamente
de que con la migración
a emma script modules
que hacen las
las dependencias
pues a ver
vamos a ver
adopt type module
mls
t3 array
¿veis?
3.0.1
está instalando la 3.0.1
aquí pueden estar pasando
dos cosas
¿vale?
una
que
la culpa sea de npm
que como está haciendo
la
la
como aplana
las dependencias
no lo está haciendo correctamente
esa puede ser una
voy a intentarlo con npm 6
y voy a ver si funciona
a mí me da la sensación
que es eso
que debería estar utilizando aquí
la 2.12.1
esta la debería estar utilizando aquí
y esta está instalando la 3.0.1
vamos a ver si es eso
y si no
pues
probaremos otra cosa
¿vale?
no modules
vamos a intentar con npm 6
la está liando bastante npm 7
también
últimamente
la está liando bastante la gente
la leche
venga
vamos a instalarlo
a ver
switch
npm install
nada
caca
estos son deprecated
esto igual es de nxts
todo esto deprecated
porque happy
es un
es un servidor
vale
vamos a probar
otra vez
bueno
voy a hacer el npm ls
para ver ahora
cual se está instalando
¿vale?
de 3 array
no
se está instalando la misma
a mí me parece que
el error va
va a seguir así
a ver si alguien
se está quejando
las issues
por ahora no
pero si
algo
algo ha cambiado
ahí a la hora de
de resolver
las dependencias
o se ha actualizado
la dependencia
de hecho esta
es de hace 10 días
esta
must use import
no sé qué
esta es de hace 10 días
y esta
parece que
que ha roto algo
muy mal
muy mal
una cosa que puedo hacer
para forzar esto
sería
esta dependencia
esta
del d3 array
esto
lo estamos viendo aquí
como podemos solucionar
estos problemas
de la vida real
estos son problemas
de la vida real
madre mía
esto
parece que estoy trabajando
ahora mismo
me siento trabajando
ya lo digo yo
vale
no tengo logs
no os preocupéis
usa yarn
porrate los logs
no tengo logs
logs de package log
básicamente
no no
no lo tengo
no lo tengo
porque justamente
por los problemas
que suele dar
no no creo
esto no es del
early adopter
esto no es un problema
lo que estamos viendo
no es un problema
de nxdx
parece más un problema
de las dependencias
del d3 array este
por cierto
se me escucha bien
cuando estoy instalando
o peta un poco
o tal
porque no descarga
la v7 de npm
justamente lo he comentado
hace un momento
que no es un tan
o sea que estaba probando
de ver si
ese era el problema
vale
veis que ahora
si que me están instalando
siempre la 2.12.1
pues a ver
ahora
esto es
un arreglo
no es el mejor
arreglo del mundo
pero es un arreglo
cuando descargas algo
ya
vale
veis
ahora si que funciona
el problema
es esta dependencia
d3 array
he puesto en la raíz
esta versión
para obligarle
¿por qué?
porque seguramente
una de estas dependencias
utiliza un caret
y por esto
amigos míos
no tenéis que utilizar
un caret en vuestras casas
porque
se rompen las cosas
por arte de magia
y esto es next 10.11
tachán
bueno
ya está funcionando bien
vamos a probar el linter
porque
cache strategy
invalid options
cache strategy
¿qué es esto?
cache strategy
a ver
cache strategy
he intentado ejecutar
el linter
y me pone
cache strategy
¿qué es un caret?
a ver
el caret
es lo que tú pones
en las dependencias
del package.json
por ejemplo
tú estás aquí
en estas dependencias
esto es un caret
mira
este
este
este bicho de aquí
este
ese es un caret
y ese caret
lo que hace
es que esto significa
que tú puedas instalar
la versión
si está disponible
la 11.1.0
te la instalará
o la 0.1
pero ¿qué pasa?
que a veces
claro
esto se va
va evolucionando
a lo mejor un día
es la 15.0
y ya
ya la he liado
¿vale?
pero este caret
no es que la tenga aquí
sino que seguramente
una dependencia
de estas
una dependencia
de estas
no sé
la de 3G
o puede ser
una de estas
la tiene
internamente
y es lo que
lo está liando
version lens
es la extensión
que estáis viendo
esta extensión
que te dice esto
version lens
hola
hola
¿cómo estás?
muy bien
oye
del roller shark
muchas gracias
por suscribirte
con prime
antes
gracias
bauman
por ese
ride
de 13 participantes
gracias a
jot93
que se ha suscrito
antes con prime
gracias a
vicasco
también se ha suscrito
con prime
y kikovitz
y todo
madre mía
kikovitz
que grande
que crack
kikovitz
vale
esto ya está funcionando
lo que no sé
es por qué no funciona
el linter
este catch strategy
esto me suena raro
la verdad
a ver
en vercel
si tienen vercel
vamos a ver
vamos a poner
catch strategy
mira justamente
justamente
es el mismo problema
que tengo yo
es el mismo problema
que tengo yo
not really applicable
anormal running
no sé qué
no sé cuánto
next yes
efectivamente
ah pues luchidev
muchas gracias a ti
también hombre
muchísimas gracias
catch strategy
eso
que dice
unknown options
o sea
es una opción
el catch strategy
que se le pasa
como al command line
a ver
o sea debe estar
esto no
esto no
no modules
ah pues este sí
este sí
este sí
este de aquí
catch strategy
sling catch
catch strategy
arcs
catch strategy
es como que
este catch strategy
no
no lo
no lo detecta bien
podríamos mirar más
a ver
catch strategy
en el repositorio
next client
catch strategy
aquí está
este es el que está petando
arcs
catch strategy
si no
metadata
pues esto es lo que
hace que no esté funcionando
correctamente el linter
pero bueno ya lo sabemos
no sé de usar en el tag script
no el catch strategy
este
eso es un
esto que estamos viendo aquí
este pedazo de
de código y tal
el problema
es que este
catch strategy
me da a mi
veis que pone
unknown options
puede ser
que sea por la versión
del linter
vamos a verlo
vamos a ver una cosa
el linter
va por la
7.28.0
vale
y
yo tengo instalada
la 7.13
es posible
que el linter
es lint
haya sacado una nueva versión
y se dé por supuesto
que está sacando
este
este catch strategy
entonces
el hecho que una persona
tenga este problema
no significa que sea
un problema seguro
sino que
efectivamente
mira ves
new implement catch strategy
desde las 7.21
yo tengo instalada
la
mira de hecho
se lo vamos a decir
al chico este
vale
que
ya que
you should install
a
slint
version
greater
than
7.21.0
estoy bastante seguro
que este es el problema
check
your local
slint
version
stolen
vale
no sé si este
es exactamente el problema
pero estoy bastante seguro
que es el problema
así que
en el packet json
que tenemos aquí
slint
slint config
no sé qué
vamos a poner aquí
las dep dependencies
que tiene de slint
con la 7.28
estándar
quería utilizar estándar
pero bueno
me lo voy a cargar
vamos a intentar utilizar esto
y nada
empie mis tolo
otra vez
¿qué pasa?
que esto seguramente
este tipo de
problema
no lo hubiéramos tenido
si hubiéramos creado
la aplicación desde cero
pero bueno
hemos dicho que íbamos a migrar
la que tenemos
y la vamos a migrar
y si encontramos problemas
pues los arreglamos
no la vamos a dejar mal
así que
npx
venga
npx
next length
a ver si ahora
bueno
pinta un poco mejor
¿no?
vale
ya lo hemos hecho funcionar
efectivamente
el problema era ese
esto es experiencia
experiencia de años
de tener estos problemas
¿sabes?
de por qué no funciona esto
pero si esta opción
por qué dan por hecho
que la tenemos
el hecho de que veas
una ISU
muchas veces vemos la ISU
y decimos ya está
seguro que ya la arreglarán
y a veces es culpa nuestra
así que
mira
le voy a pasar
de hecho
you could check
the change log
for S-Lint
vale
venga
ahora sí que funciona
el linter
pero mi curiosidad
del linter
es que veo que sí
que está muy bien
que tiene
do not use image
use image
no sé qué
esto en embed
vamos a la página
embed
y lo que quiero ver
es si soy capaz
de utilizarlo
¿ves?
aquí no
veo que no se utiliza
o sea
que no lo tengo en el editor
no tengo el slim config
y todo esto
no lo tengo aquí
si vamos otra vez
aquí a la
github
barra vercel
barra
vamos a ver
el
ahora no puedes usar
el live
para este proyecto
buena pregunta
lo puedo probar
a ver
tendría que deployarlo
primero
me imagino
lo pruebo
déjame que haga una build
para ver si funciona
todo correctamente
¿vale?
hago un mpn run dev
porque se supone
hago una build
porque la build
es más parecida
a producción
luego miro un dev
miro que todo funciona bien
hago un deploy
intentamos hacerlo
del live
ah pero no
no no lo puedo utilizar
porque me tienen que invitar
me tienen que invitar
por ahora solo se puede utilizar
en el e-commerce ese
me parece
porque cuando hemos visto
lo del live
¿veis?
aquí hay otro problema
pre-rendering page
AST
AST
este es el de Asturias
hostia
esto es de hace poco
esto
esto es de hace poco
a ver si es que no me trae los cambios
oh no
vale
es que no me trae yo los cambios
vale
data info
ah no
pero no
no es esto
locals
local
no
esto es un problema nuestro también
no te creas
no te creas
madre mía
que cosillas
saliendo por aquí
locals
local
y este local
¿ves?
aquí faltaría poner el asturiano
que es que alguien puso el otro día
la traducción al asturiano
lo cual me parece súper genial
asturiano
y zona
Asturia
y name
asturiano
no sé cómo se dice asturiano en asturiano
asturiano en asturiano
es que
si no eres de España
que sepas que
en
en España
tenemos un montón de idiomas
en un solo país
tenemos un montón
un montón de idiomas
bable
hostia no sé si poner bable
no voy a ir de listo
voy a poner asturiano
castellano
catalán
galego
bueno bable
es que es como
se diría
bable
bueno tenemos
mira todos los idiomas
que tenemos en España
es
bable es correcto
bable o babel
bable
vale
tenemos castellano
catalán
galego
euskera
bable
tenemos el valenciano
tenemos
¿qué más?
tenemos el andaluz
que es como un idioma
así mismo
tenemos un montón de cosas
pronunciado
babel
ya te digo
venga
probamos otra vez
hey
gracias por suscribirte
con prime
snz91
es verdad que he quitado
antes la
he quitado patrocinadores
he quitado las alertas
y
y esto está
que no se escucha nada
vamos a poner un poco
de music
venga
de fondo
te estás metiendo
en un jardín
¿sí?
¿por qué?
¿qué he hecho?
¿a qué problemas te referías
que dan los package lock?
ningún problema
o sea
no sé
problema
ah
bueno
es una historia muy larga
hostia
first load
JS
mira
258
un montón
¿no?
un montón
que fuerte
este next DS
no me está ayudando
¿eh?
¿dónde está el linter?
¿qué decía?
¿no me decía que el linter
me ayudaba?
no sé qué
yo quiero que esto baje
esto es todo
son imágenes
imágenes
no uses imágenes
no uses imágenes
esto que te falta
una dependencia
tampoco parece
que me está ayudando tanto
¿dónde está la magia?
es verdad
que alguien me decía
ostras
esto
fuera
alguien me decía
de utilizar el load script
¿qué estás haciendo?
a modo de resumen
hoy hemos visto
la next DS conf
¿vale?
la hemos visto en directo
la hemos comentado
de hecho aquí siguen
creo
ya se han ido
se han ido ya
se han ido
sí
ah no
está en ello
ahora
es que se le ponen
a hacer preguntas
y tal
cada vez hay más gente
conforme
entonces
el tema
hemos visto
la next DS conf
han anunciado
la next DS 11
estamos migrando
un proyecto
a next DS conf
11
segmentation fault
what
será por esto
vale vale
digo que es eso
la next DS conf
ha sido una conferencia
de esta
que es una conferencia
sobre next DS
donde han comentado
las novedades
de next DS
y han estado
bastante interesantes
una de ellas
ha sido la nueva versión
next DS 11
y como teníamos
un proyecto
con next DS 10
pues hemos pasado
el proyecto
a next DS 11
nos hemos encontrado
algunos
problemillas
que nada importante
los hemos ido solucionando
porque queremos
llevar esto
a producción
justamente
de hecho
quería ver
que todo estaba
funcionando bien
para llevarlo a producción
y efectivamente
parece que todo
funciona bien
se ven todas las gráficas
vale
los medios
estos contribuidores
vale esto es normal
esto es normal
esto es normal
porque necesita
la API key
para recuperar
todos los contribuidores
vale
pues esto es un proyecto
next DS 11
vamos a deployarlo
si os parece
vamos a ver
bubble
asturias
las dependencias
hemos puesto
el nuevo config
mi duda
del
del inter
mi duda
del inter
viene
en que no sé
no me ha quedado
muy claro
a ver si en el blog
nos lo dicen mejor
va
lint
conforme
si se asisten
no sé qué
no sé cuánto
me da la sensación
que el inter
como tal
no tiene
o sea
no se preocupa
por tu estilo
no
o sea
no se preocupa
si pones punto y coma
por lo tanto
debería ser necesario
todavía
instalar
por ejemplo
estándar
y utilizar
estándar
entiendo yo
y entonces
en el package
json
esto
se debería quedar
como estaba
estándar
config
y esto
extender
de esta forma
o sea
por un lado
vamos a necesitar
el que ya tenía yo antes
porque esto no lo ve
y otro
sería el slim config next
que este slim config next
mi otra duda
que me queda
y ahora probaremos
el next script
vale
que hemos dicho
mi otra duda
es cómo se utiliza
correctamente
por qué
porque
no me queda claro
vamos a ver
el create next app
que tiene que tener
por aquí
y vamos a ver aquí
como el template
para ver cómo crean
el package json
pages
vale
ah claro
es que esto no
es la interacción
mejor
claro
extends next
y next core
web vitals
este es nuevo también
o sea que son dos
en realidad
o sea
no solo es este
sino que hay otro
que es next
core
web vitals
vale
con esto
se supone que ahora
lo tengo integrado
correctamente
y ahora debería ser capaz
de ejecutar aquí
el slim
bueno no sé si
con el slim
me va a funcionar
tal cual
no
porque esto tendría
que ser source
a ver
ta ta ta ta
we're not found
ah es que no tengo
nada en source
perdón
components
ahora sí
vale
ahora sí
tampoco
components
we're found
no files match
no sé qué
no sé cuánto
vale
punto js
punto js
a ver ahora
poco a poco
poco a poco
vale
ahora
ahora lo tengo
bien integrado
vale
ahora sí que lo tengo
bien integrado
ahora tengo
por un lado
mi linter
que es el de
los puntos y coma
que es el que a mí me gusta
y tengo
el linter
de next
que es el que me va a decir
si estoy utilizando bien
las imágenes
y todo esto
o sea
si yo ahora pongo aquí
un punto y coma
pasa de mí
está bien
porque pasa de mí
a ver
vale
si pongo esto
va bien
si quito el de
core web vitals
ya no va bien
puede ser que este
lo tenga que poner al final
vamos a probar
es que esto me interesa
bastante
porque me gustaría
tenerlo bien
bien configurado
que pueda utilizar
los dos
pues no
extends
next
puede ser que no sean
compatibles entre sí
necesitamos todo eso
del slim para migrar
a next y s11
no
no
cuando se crea
fíjate
cuando se crea el slim trc
ya te pone esto
o sea
esto lo que te hace
es crearte aquí
un slim
rc
y te crea esto
vale
que pasa con eso
a mí
lo primero es que no me gusta
tener archivos aquí
separados
vale
y por eso tengo aquí
un slim config
no es por nada
en concreto
aparte de esto
el problema
que estoy viendo
es que
the keyword import
is reserved
pues eso
es que lo otro
que estoy viendo
o que estoy encontrando
es que
no estaba
no tiene toda la configuración
el linter este
sino que tiene una configuración
en concreto
para más
mirar si tienes las imágenes
y todo esto
vale
ves
es slim
no sé qué
sino que estas reglas
que veis aquí
ves
son solo estas
no tienen todas las reglas
del linter
que a lo mejor te interesan
lo cual es un poco
no es del todo
no sé
que le falta
vaya
le falta
le falta
chicha
pues ese es el tema
entonces lo que quería ver
justamente
era
pocket json
quería ver eso
si era capaz
de dejar
mi configuración
no sé qué me pasa
esta semana
con los linters
bueno
la semana pasada
también seguí con los linters
pero bueno
bueno
por ahora pues nada
lo vamos a dejar
voy a quitar estos
voy a dejar por ahora
el que tengo
ahora que ya he visto
cómo funciona el mío
y ya está
vamos a
deployar esto
deploy
next.js
11
si
ya tengo la versión
la versión 11
vale
vamos a probar
una cosa nueva
también de
de la versión 11
que es el script
que tiene aquí
next script
también el next image
ojo
es que el next image
es muy interesante
next image
porque es interesante
porque next image
veis que antes había
que poner el width
y el height
esto no sé
en este caso
seguramente
a lo mejor
sigue necesario
porque esta imagen
es externa
pero
ves este image
veis que
ahora estaba haciendo este
download.png
ahora
la idea
de este
download data
a ver dónde está
este download data
la idea
es que si tú haces
un import
de una imagen
por ejemplo
download
icon
from
load
claro
habría que ir
a public
¿no?
donde tengo
statics
donde tengo
a ver dónde sale
el download png
este
public
pues porque
no me lo encuentras
vale
download icon
download icon
src
pues se supone
que tú ahora
puedes hacer esto
así
y esto te lo puedes cargar
se supone
lo vamos a ver ahora
file type
undefined
supported file type
oye pues no le ha gustado
este
el public download
este
pero esto
sí que lo estaba
haciendo así
¿veis?
punto punto
public
punto png
a ver
public
download
punto png
pues no le gusta
a ver
a ver
porque no le gusta esto
punto punto barra
public
es que no aparece
download
punto png
esto debería funcionar así
¿veis que aquí está haciendo
el import
del author?
vale
un support
file type
undefined
file undefined
es como que no lo está
no lo está encontrando
que raro
pensaba que esto
iba a funcionar ahí
súper genial
download data
a ver
esto es donde está
¿vale?
punto punto barra
public
barra
download punto png
el tema
es que quitando esto
esto ya está configurado
para que te vaya
a la raíz
o sea que debería
encontrarlo también
el problema
es que me sorprende
que no
no lo encuentre
o sea es que dice
file type undefined
file to compile
ver page index
a ver
esto ha sido el linter
no ha sido otra cosa
table
esto que se está quejando
el linter de algunas cosillas
table
expect
indentation
122
a ver
vamos a probar otra vez
que raro ¿no?
eso
vale
table
el 122
122
esto aquí
platform 26
o sea que raro
esto también
a ver
a ver
aquí se me está
volviendo
esto de
tarumba
también
otra vez
con lo del linter
parece que este linter
checking validity
of types
este linter
es el del
next yes
y en cambio
está tirando
en el editor
estoy tirando
del otro
super raro
ahora no sé
qué ha hecho
con esto
que me los ha mezclado
ahora me ha hecho
ahí una mezcla
de los dos linters
bueno
super raro
bueno
a ver ahora
compile client
autoregister
service worker
fíjate que ahora
cuando detecta
que tienes una configuración
de linter
te la ejecuta
ves
un soporte file type
yo creo que esto
es un error
o sea
yo creo que esto
es algo que a lo mejor
next yes
no tiene
no tiene bien
vamos a mirarlo
si la gente se está
quejando de esto
type error
un soporte file type
esto es lo que tiene
que ser
de los primeros
¿no?
un expected token
fíjate en un momento
la de problemas
que se están contando
a la gente
es normal
o sea
es que es normal
vamos a ver
soporte file type
face
no sé qué
bueno
este es el mismo problema
que estamos encontrando
nosotros
test
esto puede ser
que más que un problema
de next yes
sea un problema
del plugin
puede ser
que sea el plugin
que teníamos por aquí
tenemos
a lo mejor
que cambie algo
por ejemplo
images
el with images
que haga alguna cosa
que no le guste
claro
esto ya lo deberíamos
ir viendo
para poder utilizar
el sistema nuevo
de importar las imágenes
y tener el alt
y el width
igual por ahí
van los tiros
pero bueno
está bien saberlo
estaré pendiente
miraré
el
el next image
es ese
porque me vi
que se están pegando
de hecho
es que estoy bastante seguro
el next image
es este
el next image
es este
creo que justamente
lo que se podía hacer
era esto
de importar
¿ves?
se podía hacer un require
y todo esto
¿ves?
import image
no sé qué
claro
este es el problema
el problema está
en este plugin
este plugin
ya no es necesario
este plugin
ahora está interno
en next 10
por lo tanto
ha quedado bastante
deprecated
así que
vale
pues ya lo tengo claro
ya me lo petaré
y ya está
vale
¿esto lo he dejado
como estaba?
sí
perfecto
muy bien
vamos a
esto es que sea
vale
vamos a probar
el next script
antes de pasar a esto
next script
para priorizar
automáticamente
no sé qué
claro
el problema es que
yo no tengo como tal
no tengo ningún script
por aquí
que yo recuerde
podríamos añadir uno
podríamos añadir uno
¿qué podemos añadir
de script?
así que sea algo
rápido y indoloro
bueno
le podríamos poner
ah sí
ahora que lo pienso
tendríamos
faz
faz
faz
por aquí
¿no?
el cliente de faz
a ver
esto es
el analytics
que tenemos
en este proyecto
use faz
faz
no sé qué
en lugar de utilizar
el use faz
este
que al final
hace algo muy parecido
ves aquí
cuando cambia
una ruta
pues
lo chequeaba
y tal
lo que podría intentar
sería en el header
vamos a quitar
el use faz
este
use faz
donde no está cargando
use faz
aquí en app
vale
vamos a quitar esto
vamos a quitarlo así
vamos a probar el nuevo script
import load script
from next script
vale
y hacemos un load script
y vamos a ver
cómo se puede cargar un script
load script
no
next script
aquí
ah
se llama script
tal cual
nada de load script
se acabó la conf
se han ido ya
source
venga
use faz
vais a ver aquí
analíticas
del COVID vacuna
es totalmente abierta
las analíticas
del COVID vacuna
podéis acceder
super fácil
mira
facilísimo.com
que bueno
UTM
facilísimo
y mailing
bueno
estas son las visitas
del COVID vacuna
son totalmente abiertas
de hecho se puede
si vais al COVID vacuna
abajo del todo
veréis estadísticas
y
veis aquí
estadísticas
y podéis entrar
por cierto
ahora ya está en producción
se supone
next yes
a ver
si vamos a
midudev
COVID vacuna
vamos a ver si
se ha deployado
sin problemas
en Bercel
mmm
algo ha fallado
algo no le ha gustado
algo no le ha gustado
múltiples espacios
ves
esto es otra vez
lo del linter
otra vez
lo del linter
que se está haciendo
se está volviendo
tonto con el linter
bueno
lo he arreglado aquí
ah que lo pienso
lo he arreglado
hace un momento
fix linter
problems
verdad
vale
ahora veremos
si se deploya bien
vale
hay 52 personas
ahora en directo
en COVID vacuna
espero no cargarme
la página
si
nada que ver
pero he notado
que tu nivel de inglés
ha mejorado
a ver
soy Jimmy Sainz
dice que mi nivel de inglés
ha mejorado increíblemente
en los últimos meses
se debe a algo en particular
gracias por compartir
soy Jimmy
muchas gracias
por notar
mi mejoría
increíble
de mi inglés
lo cierto es que
lo que he hecho
para mejorar mi inglés
en todo este tiempo
es no practicar mi inglés
no he hecho absolutamente nada
igual es que he visto
películas en inglés
y he estado jugando
a videojuegos en inglés
no he hecho nada
la verdad
lo que pasa es que
cuando he estado hablando
no es lo mismo
hablar en inglés
en una conferencia
en Rusia
con los nervios
en un país ruso
dar una conferencia
o sea
dar una charla
en inglés
es más complejo
a lo mejor
que hablar inglés
en mi casa
sentado
yo creo que es eso
yo creo que van por ahí
los tiros
pero no sé
dónde me ha visto
hablar en inglés
más allá de hace poco
en YouTube
y tampoco
que era muy la leche
de hecho
después tengo una entrevista
con un chico en inglés
a ver cómo va
deseanme suerte
que es una cosa
súper interesante
que ojalá que vaya bien
vale
a ver
vamos a ver
esto
si se deploya
y ya lo tenemos
verde
vamos a ver si no se ha roto nada
vale
parece que no se ha roto nada
y tenemos el bubble aquí
fíjate
que le ha puesto el icono
de Asturias
pues mira
ya tenemos el bubble ahí
seleccionable
ya tenemos todo esto
perfecto
pues ya tenemos
NextDS11 en producción
vamos a ver
lo ponemos en Twitter
ok
venga va
lo ponemos en Twitter
ya tenemos
ya tenemos
NextDS11
NextDS11
en producción
en
COVID vacuna app
o ya tenemos
en producción
NextDS11
NextDS11
con mejoras
de rendimiento
porque no he visto
ninguna mejora
con mejoras de rendimiento
y nuevas
funcionalidades
check
venga
check
por hacer publicidad
del COVID vacuna
total
es gratis
muy bien
pues nada
ya ha ido esto bien
no sé
no tarda casi nada
un minuto tarda
el deploy
vale
qué es lo que quería
mirar de esto
ah sí
quería mirar
no sé dónde se mira
la url
y cómo se añade
¿sabes?
cómo le puedo decir
que me dé la url
que tengo que añadir
la leche
qué difícil esto
la leche
la leche
vale
tutorial para configurar
la terminal
como la tienes
pues hicimos un directo
y la configuramos
desde cero aquí
yo también quisiera saber
cuál es el enlace
a la NextDSConf
podéis ver este mismo directo
y volver a verlo
y verlo desde el principio
y ya está
cuando termine
os lo guardáis
o le podéis dar para atrás
¿no?
yo creo que se puede dar para atrás
mira es este
este es el script
venga vamos a probar el script
script
source
pam
entonces
de script
¿qué más cosas tiene?
access key
area
como y todo esto de area
¿eso qué es?
¿eso qué es?
¿eso qué es?
script
se le pasa al source
¿vale?
hasta ahí bien
aquí se les ha escapado
me parece
el markdown
no les ha funcionado bien
hay tres opciones
before interactive
lazy unload
y after interactive
el before interactive
es para scripts críticos
que van a ser
se va a hacer un fetch
y ejecutados
antes que la página
sea interactiva
vale
este no es importante
after interactive
este es el que es por defecto
si no hiciésemos nada
se cargaría así
para scripts
que pueden hacer fetch
y ejecutarse
después de que la página
sea interactiva
¿vale?
como tag managers
y analytics
fíjate que
en la conferencia
no han dicho nada
de tag managers
y analytics
estos scripts
no han dicho
analytics
o bueno
tag managers
no sé si lo han dicho
pero no han dicho
nada de anuncios
por ejemplo
estos scripts
se han inyectado
son de client side
después de la hidratación
hidratación
y lazy unload
para scripts
que pueden esperar
cuando es idle time
como chat supone
en este caso
entiendo que es
after interactive
o sea
que con esto
ya debería estar
el script
optimizado
básicamente
vamos a ver
si es verdad
¿de dónde
obtienes la información
del COVID vacuna?
lo obtengo
del ministerio
de sanidad
de un excel
que publican
y lo que hicimos
lo hicimos en directo
aquí en twitch
también
hicimos como
una transformación
de ese excel
a un json
de hecho
esos datos
son totalmente abiertos
por si te interesa
puedes ir a
midudev
covid vacuna
y aquí
que es totalmente
de código abierto
verás que tenemos
public
y en public
tienes data
y en data
tienes todos los json
de todos los días
todos los días
así que
por si te interesa
de hecho
en la web
también lo puedes descargar
ves aquí
que pone
descargar datos
en formato json
ves
descargar fotos
pues ahí los tienes
ahí los tienes
mira
120 personas
están online
ahora
111
¿por qué?
porque lo he puesto
en twitter
y a lo mejor
la gente
pues lo ha visto
y ha dicho
ah que interesante
y se han metido
ahí a chelón
que ya ves tú
que solo
ah no
pensaba que
solo una persona
le había dado like
pero bueno
que bien
a ver
mostrar respuestas
estimación errónea
ya somos unos cuantos
que no nos metemos
esa mierda
estimación errónea
ya somos unos cuantos
que no nos metemos
esa mierda
joder
madre mía
Karl Marx
yo que le pensaba
que estaba muerto
el hombre este
y veo que sigue dando guerra
muy bien
pues
pues no te metas
esa mierda
joder
de algo hay que morirse
en esta vida
hace bien
Karl Marx
hace bien
eso sí
luego seguro que te metes
otras mierdas
esa no
pero otras
bueno
entonces
lo que quería ver
este es el modo desarrollo
lo que quiero ver aquí
es el script
script
míralo
fíjate
este es el script
este es
el de Fathom
y se ha cargado
o sea
me ha funcionado bien
alguien había puesto
en el chat
antes que no
no le había funcionado
esto correctamente
pues aquí
lo veis
está aquí
uy
aquí está
veis
se ha cargado
después de todos
los archivos
esto no sé
si es parecido
a como funcionaba antes
pero si no es parecido
igual lo dejo
¿por qué?
porque esto antes aquí
¿ves?
bueno
el script aquí
me lo está bloqueando
porque como
nota que es publicidad
bueno
es muy parecido
a como funcionaba antes
básicamente
muy parecido
muy parecido
igual es
ves
la raya está
antes del azul
que es el
don content loaded
y aquí
está
después
ah no
sí
sí
está
después del azul
no creo que tenga
un impacto
realmente importante
en este caso
en este caso
¿vale?
de hecho seguramente
será mejor
esta
porque no creo que
el script este
con lo chiquitito que es
impacte muy negativamente
pero
es una buena idea
si realmente
lo que hace este script
es muy tocho
y puede entrar en
como en conflicto
con evaluar
todos los scripts anteriores
de hecho lo podríamos ver
aquí en performance
le voy a dar aquí
a ver qué hace
una pregunta
¿los errores en consola
son importantes?
hombre depende
de lo que te diga
el error en consola
si el error en consola
te dice
no soy importante
claro
porque haciendo cosas
muy básicas
me salen 5 o 10 errores
que a veces no entiendo
hostia pues habría que ver
qué errores son
¿vale?
dependiendo del error
pues sí hombre
será importante
a ver
si te dice
mira
hola
qué raro esto
drop frame
drop frame
y todo por culpa
hostia pues sí que es
el analytics
el culpable parece
ah no
esto es el hdmr
el hot module replacement
a partir de aquí
y aquí
esto es la imagen
del COVID vacuna
hostia pues esto
seguro que se puede arreglar
porque esto
esta imagen
tiene pinta de que está ahí
o es muy grande
o algo pasa con esa imagen
este es el script
y el script
luego
descarga unas imágenes
y tal
bueno pues sí que tiene pinta
de que sea interesante
que lo haga ahí
porque si miramos aquí
el task
sí que parece que hace
unas cuantas cosas
de hecho fijaos
este es el script
del tag
parece
ah pues no
no
este no es el tag
esto es el render
del elemento
no
esto es una cosa
que no me gusta
del performance
de este tab
mira
una cosa que no me gusta
es que puede ser
un poco lioso
en el sentido de que
tú aquí arriba
te fías de
que este script
que está aquí
si yo bajo
hacia abajo
signifique que realmente
esto es lo que está evaluando
a ver
que no es culpa suya
porque en realidad
cuando se está evaluando
es cuando se descarga
que empieza a partir de aquí
de este
ves que aquí termina
pues es aquí
donde habría que buscarlo
realmente
o sea que
debería estar aquí
o sea me gustaría
poder darle al script
y que me diga
donde se está evaluando
porque
si lo haces de forma visual
es un poco difícil
y de hecho
no se suele leer muy bien
vale
animation
no sé qué
yo entiendo
que será
este
page
pero vaya
que es bastante pequeñita
que no
no tiene mucho
mucha historia
ese script
muy bien
pues nada
eso sería
el script
script
nuevo componente
script
muy interesante
bueno
enfocados
entre otras cosas
enfocados a sacar
el máximo provecho
de React
muy bien
tengo entendido
que es más fácil
usar el server
esa rendering
y que tiene
una empaquetadora
webpack 5
si no
nextds es brutal
en el sentido de que
es un framework
que ya lo tiene
todo hecho
vamos a revisar
rápidamente
a ver si se nos ha
escapado algo
image improvements
esto no hemos visto
automatic size detection
esto no lo hemos podido
utilizar porque tengo
el index images
como chulo esto
esto no
esto
ves
o sea lo hace automático
o sea lo hace automático
esto está súper increíble
lo hace automático
o sea si utilizas
lo del import
ves
lo hace automático
tú le dices
playholder
blur
y entonces
te crea
una versión
blur
de esa imagen
brutal
lo que pasa
es que también
tú le puedes decir
un blur data url
que entonces
es como que
sobreescribe
el que tú
le puedas pasar
pero esto
te lo hace automático
si haces el import
de la imagen
wow
súper chulo
súper súper chulo
qué bueno
esto del CRA migration
o sea
se acabó
cada vez
lo veo peor
el nextds live
que es lo que hemos visto
esto tiene súper buena pinta
súper buena pinta
esto es lo que me tendría
que haber leído
nextds introduce
abrir field breaking chains
que no debería
ah mira
está aquí
esto
esta es la guía
que me tendría que haber leído
y que no me he leído
esto lo he hecho
esto lo he hecho
cleaning the this deal
is now a default
vale
vale
vale
esto nada
nada
esto no
no me afecta
remove and size
esto ya no tiene sentido
remove modules
hit rewind
vale
esto nada
react 16
17
nada
nada
bueno pues ya está
según esto
lo que tenía que haber hecho
yo he hecho en falta aquí
que te diga
cómo tienes que utilizar
el inter
pero bueno
si dicen que esa es la forma
pues nada
ya le echaremos un vistazo
ya he mejorado
el refresh
100 milisegundos
madre mía
qué pasada
ah
integración del
del commerce
con shopify
qué bueno
o sea ya puedes hacer
tu e-commerce
con shopify
y next yes
esto lo tengo que mirar
esto lo tengo que mirar
para arreglarlo
sí como en gatsby
el blur es como en gatsby
pero hombre
la verdad es que está
súper bien
la API
es que es
súper fácil
me encanta
me encanta
vale
anda que no ha abierto cosas
ay mira
que le he dejado por aquí
el drop party este
this drop
ends in
si me lo he perdido ya
me lo he perdido
me lo he perdido
me he perdido
mi drop
no
ah no
ah no
es que tienes 3 días
o sea todavía queda tiempo
3 días
1 hora y 16 minutos
para comprar
lo que pasa es que
90 dólares
es tela
90 dólares
y esta es la camiseta
esta sería como la chaquetilla
y la camiseta
y tal
50 dólares
supongo que esta es
de hombre y de mujer
eso
y la camiseta
estabie
y la camiseta
y la camiseta
things
d
0
y la camiseta
donde nos
pede
ahí
conscié
kanske
la camiseta