ha salido hace nada una nueva versión de Visual Studio Code, ¿vale?
Release Note. Hace nada, hace horas.
La de agosto del 2023.
Si os preguntáis por qué es la de agosto, es porque siempre van un mes después, ¿vale?
Entonces, entre todas las mejoras, que ahora las veremos, porque hay un montón,
hay bastante que están bastante chulas, por ejemplo, el Sticky Scroll lo han mejorado también
para que también lateralmente también funcione y tal.
Han hecho cosas muy chulas.
Este, por suerte, ya hacía tiempo que faltaba una,
pero han sacado una novedad que te va a volar la cabeza, amigos.
Os va a volar la cabeza.
Esta es la página de la midu.conf, ¿vale?
Y hacemos pnpm run dev.
Y esto levanta en el puerto 3000, ¿veis?
En el puerto 3000 levanta la página, ¿vale?
Pues hacemos esto, nos vamos a la página y aquí tenemos nuestra página local
de localhost 3000, con mi página, con mis cambios locales.
Bueno, pues ahora lo que han puesto la gente de Visual Studio Code
es una nueva pestaña aquí que pone puertos, no puercos, puertos, ¿vale?
Y esto, ¿qué hace?
Bueno, pues que le das a puertos y le puedes hacer aquí lo que haríamos muchas veces con Engrog.
Puedes compartir tu localhost y te genera una URL pública desde el editor.
¿Cómo lo haces?
Le das aquí a forward a port y le dices aquí, ¿qué puerto?
Pues le das aquí, el 3000.
¿Por qué el 3000?
Porque es el que tenemos aquí abierto en localhost, ¿ves?
Localhost 3000, ¿vale?
Le das 3000, le das al enter y aquí fíjate lo que ha pasado.
Dirección local y aquí ya me está poniendo como unos iconitos, me ha creado una URL
y le puedes dar aquí, ¡pum!
Esto te abre la página web, aquí te aparece un aviso, si no recuerdo mal, ¿vale?
Te debería decir, ah, no, ni un aviso me ha salido.
Y ya está.
Y ya tienes aquí la URL.
Y esta URL, si no me equivoco, podéis intentar a ver si os funciona.
Ah, ¿no tienes actualización para ver?
Vale, no pasa nada.
Esto es porque veis que pone visibilidad private.
Esto es porque la he liado yo, a lo mejor.
A ver, 3000, ay, 3000.
A ver, no puedo cambiar la visibilidad.
Ah, eso, visibilidad pública.
Vale, ahora os paso este, que es otro, ¿vale?
Ahora lo tendríais.
En esta sí que debería funcionar.
Pues claro, podéis hacer que la visibilidad sea pública o sea privada.
¿Y para qué funciona la privada?
Porque alguien dirá, bueno, ¿y la privada para qué es?
La privada es útil porque seguro que muchas veces te ha pasado
que necesitas tener en localhost un HTTPS, ¿no?
Que te dice, ostras, necesito que mi localhost esté en una URL con HTTPS.
Pues para eso lo puedes utilizar con visibilidad privada.
Así, desde fuera nadie tiene acceso,
pero tú tienes una URL con HTTPS que te puede servir para un montón de cosas.
Curiosamente, lento no.
Es normal que sea lento porque pensar que aquí se está haciendo un forwarding
y es un poquito más lento, ¿vale?
O sea, no está pensado para que tengáis que hacer,
para que sea rápido ni que sea para producción.
Al final lo que es necesario es como para ver cosas y ya está.
Importante que la visibilidad sea pública para que cualquiera lo puedas hacer
y que estoy haciendo stream también, claro.
A mí no me carga, ¿sí? ¿No carga?
Pues a ver, hay gente que...
Bueno, también es verdad que sois unos cuantos que a lo mejor estáis entrando, ¿eh?
Que también a lo mejor estamos tirando el servicio y la acaban de poner.
Que también puede ser, que a lo mejor la habéis tirado.
Es que, ¿sabes qué pasa?
Que no está pensado tampoco para eso, para grandes cargas.
Está pensado para...
Esto es por si tú estás trabajando en local
y quieres compartir tus cambios con una persona, cinco personas,
diez personas, con el equipo, con gente en concreto.
No para que lo lleves a internet, ¿entendéis?
Como para desplegar vuestro localhost.
Eso no tiene sentido.
No tiene ningún tipo de sentido.
Yo prefiero Glitch, pero es que no tiene que ver con Glitch.
O sea, ¿por qué vas a preferir Glitch si son dos cosas distintas?
Tú tienes tu entorno local.
El Glitch, que está muy chulo, por cierto.
A mí Glitch me gusta un montón.
Es una página en la que tú puedes crear proyectos, pero es en la nube.
No lo tienes local.
Esto, ¿para qué está pensado?
Pues vosotros, imagínate, estáis trabajando aquí y por lo que sea,
pues hacéis un cambio en vuestra página.
Yo qué sé, index page.
Hacéis un cambio aquí en la página y queréis ver,
queréis que la gente vea el cambio.
Mientras estáis, oye, Product Owner, mira lo que hemos hecho,
no sé qué, y ya está.
Y así, pues lo pueden ver mientras lo tienes en local,
sin necesidad de hacer un despliegue en otro sitio,
y lo pueden ver en un momento.
Y ahora lo tenéis totalmente integrado en Visual Studio Code,
lo cual, pues es maravilloso.
Además, podéis tener más de uno.
Una cosa súper importante, súper interesante,
porque mucha gente se creen que solo es para JavaScript,
se creen que solo es para el puerto 3000,
se creen que solo lo hace MiduDev.
No, a ver, una cosa.
El tema es, aquí podéis agregar cualquier proyecto.
O sea, imaginad que tenéis aquí un proyecto
que por lo que sea es un WordPress
y se levanta en el puerto 8080.
Podéis ir aquí y añadirlo sin ningún problema.
Podéis añadir el que queráis.
Bueno, lo he cerrado, ahora dejará de funcionar.
Podéis añadirlo y utilizarlo con cualquier servicio
que esté en un puerto.
Y no tienes que abrir puertos.
No tienes que abrir puertos, ¿vale?
Esto es importante porque mucha gente se cree
que esto es un problema de seguridad, que no sé qué.
A ver, esto es un problema de seguridad,
depende de muchas cosas.
No necesitas abrir puertos de tu ordenador,
porque esto es lo que hace el forwarding en local.
Lo que está haciendo es enviarle la información
como un proxy.
Lo segundo es que esta URL solo debería tener acceso
quien tú quieras, a la gente que se la pases.
Estas URLs, si te fijas, se generan cuando tú la creas.
O sea, cuando tú te pones a crear aquí.
Ah, bueno, ¿ves?
Como no tengo el puerto abierto.
Esto se está generando ahora,
no siempre en la misma URL.
Por lo tanto, esta URL solo la conoce.
Mira, ayer hablamos de un tema muy interesante.
Y os voy a comentar esto, que está muy interesante.
Mira, esta URL se está generando siempre que se crea un nuevo
un nuevo tunnel, un nuevo port forwarding.
Esta URL de aquí, ¿vale?
Pues mira, esto es un ejemplo que ayer estuvimos hablando
de por qué no se tiene que hacer autoincremental
y por qué no nos gustaría que la gente...
Porque las IDs autoincrementales pueden ser negativas.
Y pueden ser negativas porque si tú sabes que esto fuese,
por ejemplo, 1, 3.000 UKS y esto fuese incremental,
que cada vez que generas una URL fuese incremental,
entonces los hackers sabrían constantemente
cuándo se va a crear una nueva URL
y podrías ir probando y podrías ir descubriendo.
Por eso es importante que en este caso se genere un hash.
Y lo podéis hacer con cualquier servicio, ¿eh?
No hace falta que sea con JavaScript.
Puede ser una API, puede ser una API con PHP,
puede ser lo que queráis.
Pero bueno, que hay más novedades de esto.
Así que vamos a verlas, que siempre se aprenden cosas chulas.
Más cosas, el editor Sticky Scroll,
que ha mejorado Sticky Scroll.
El Sticky Scroll este está bastante chulo.
A ver si encuentro.
Es este.
Este de aquí.
¿Veis que se queda ahí pegado?
No sé si lo tenéis activado,
pero os lo recomiendo mucho
porque así entendéis un poco el contexto de la función.
¿Veis?
Ahí sabéis que esto es del componente Home.
Lo tenéis aquí.
Y está bastante chulo.
Y además lo podéis hacer pequeño.
Y podéis ir bajando.
Y además tiene más de una anidación.
O sea que está bastante chulo.
Y han hecho algunas mejoras también de hover y tal.
Sticky Scroll, ¿vale?
Ah, hostia, esto está muy chulo.
Esto, esto, esto es otro truco.
Este es otro truco, amigos.
Este es otro truco.
Esto es otro truco que tenéis que activar.
Bueno, a ver.
Depende, depende.
A lo mejor no lo queréis activar.
A ver si tengo un JSON.
Ah, en el curso.
Mira, en el curso de Node teníamos un JSON.
Fijaos que tenemos ID, title, year, director, duración y tal.
Ahora hay una novedad que la podéis activar.
A ver, aquí.
JSON sort.
A ver si encuentro.
Vale.
Que se llama sort on save.
Dice default sorting on save.
La podéis activar.
Y entonces, ahora en el JSON, cuando guardas, se formatea y además ordena las llaves.
Lo cual a mí personalmente me gusta bastante.
¿Por qué?
Porque no hay nada, no hay nada mejor a la hora de escanear la información que por el tema de orden alfabético.
Obviamente, esto antes lo podíais hacer por Pretier, no sé qué, no sé cuánto.
Aunque el sort de por alfabéticamente, yo diría que eso, el Pretier, a lo mejor hay algún plugin, pero de forma nativa no lo hacía.
Yo prefiero glitch.
Y yo prefiero darte una hostia.
Broma.
Me ha hecho gracia, Carlos, en realidad.
Está bien, pero ID debería ir arriba.
Bueno, depende, ¿no?
Depende.
Igual también lo que puedes hacer es que las ID sean así.
Entonces, siempre te quedará arriba.
Que esto lo hace MongoDB, por defecto.
Por si lo queréis activar, que lo sepáis.
Que le dais aquí sort on save y te hace un default sorting y además te lo formatea.
Lo cual está bastante bien.
Sticky scroll.
Vale.
El JSON.
Code actions and quick fix navigation vía keyboard.
¡Hostia!
¡Qué bueno esto!
Ahora, cuando tengas quick fix, puedes moverte aquí con la...
Puedes escribir para moverte más rápido.
Dynamic layout.
Button toggle stage.
Ah, mira.
Esto está chulo.
Que al menos ahora...
Ah, mucho mejor.
Este es el estilo antiguo.
Que esto era desactivado y activado.
Claro, este tiene más sentido.
Me gusta más el nuevo.
En la terminal.
Vale.
Que se restore.
Display bracket.
Nada.
Receive.
Ah, mira.
Ahora puede ser...
Se le puede cambiar el tamaño al find.
Vale.
A ver.
Esta se supone.
¡Ojo!
Esto es nuevo también.
Esto es nuevo.
Hostia, pues esto está chulo, ¿eh?
Me gusta porque así la puedes poner de pantalla completa.
Y así la tienes aquí arriba a la izquierda.
Súper bien.
Me gusta.
Ah, mira.
Trae TypeScript 5.2.
TypeScript 5.2.
Pues importante esto, ¿eh?
Importante porque tiene esto.
Con TypeScript 5.2 vienen algunas mejoras de refactorización como esta que habéis visto, ¿ves?
Puedes mover a un fichero cositas de TypeScript y te actualiza todas las referencias.
Esto a la tribu le gusta.
Esto le gusta a la tribu, ¿eh?
Mira.
Inline Variable Refactoring.
¿Vale?
A ver lo que hace esto.
A ver qué hace esto.
Inline Variable.
¡Ah!
¡Oh!
¡Qué bueno!
¡Qué chulo!
Vale.
Esto lo que tú puedes hacer...
Hostia, esto me parece muy chulo, ¿eh?
Const Timeout 1000.
Set Timeout.
Esto es chulo.
¿Vale?
Y aquí le ponemos el Timeout.
Y esto lo ponemos aquí también.
¿Vale?
Esto es chulo.
Esto es chulo.
Esto es chulo.
Esto es chulo.
Vale.
Pues lo que le puedes hacer ahora se supone es...
¿Ves?
Hay ahora una sugerencia que es Inline Variable.
Alineado.
Yo creo que esto de alineado está mal traducido, ¿eh?
Pero Inline Variable lo que hace es que va a tomar el valor de la variable y lo va a cambiar manualmente.
O sea, va a decir, este 1000 lo pongo aquí, esto lo pongo aquí y elimino la variable.
¿Para qué puede ser esto interesante?
Esto, pues, a veces para el tema de optimización, que a lo mejor no sea necesario tener una constante,
haces así, ¿veis?
Y te lo has cambiado.
A ver, esto puede ser interesante...
Yo evitaría, porque esto justamente es como lo contrario a evitar un Magic String o un Magic Number.
Lo que estamos haciendo es ponerlo a mano.
Pero hay veces que en temas de optimización pueden tener sentido.
Pero claro, a nivel...
Yo no lo haría, la verdad.
Molaría que fuese al revés, ¿sabes?
Lo que estaría chulo sería ponerte en el 1000 y poner...
Bueno, que esto...
Claro, pero no lo hace automáticamente.
Que eso sería increíble.
¿Ves?
Que pone New Local y que este también te lo cambiase.
Sería más interesante que de forma inteligente lo hiciese al revés.
Entonces sí que me volaría la cabeza.
A ver, mejoras de Gijaco Pilot.
Importante.
Vale.
Ahora puedes utilizar Create Workspace.
Bueno, esto os lo enseñé.
Oh, qué chulo.
Que ahora le puedes dar también aquí.
Esto es nuevo.
Esto es nuevo.
Esto es nuevo.
Eso es nuevo.
¿Qué es esto?
Por si no lo sabéis, tenemos ahora Gijaco Pilot Chat.
No todo el mundo tiene acceso todavía.
Sí, yo soy como un niño con estas cosas.
Soy como un niño.
Soy como un niño con estas cosas.
Pero hombre, es que esto es súper importante.
Que luego la gente me dice, ¿cómo te enteras de todo?
Pues mira, estas son las cosas que hago para enterarme de todo.
El tema es que ahora vamos a tener una nueva extensión que se llama Gijaco Pilot Chat.
Que es como tu chat GPT, ¿vale?
En tu propio Visual Studio Code.
Fíjate que hay ahora comandos.
Y uno de ellos, ves que pone Create Workspace.
Y entonces aquí le puedes decir, Create a Notepi you see next about to do's.
Le haces esto.
Y esto lo enseñé el otro día, ¿vale?
Pero lo que es increíble de esto es que, esto es lo chulo.
Es que le puedes pedir que te cree como toda la estructura de carpetas.
Y esto no estaba hecho el otro día.
O sea, aquí te ponía el botón que si le das al botón te va a crear toda la estructura de carpetas.
Pero, ¿veis?
Ahora puedes examinar la estructura de carpetas.
Le das un click y entonces puedes ver cómo sería por dentro.
Esto es nuevo.
Porque le puedes decir, ostras, voy a ver cómo es el Create to do de Teo.
Le das un click y entonces aquí puedes ver cómo te quedaría.
¡Ohala, tío!
¡Qué chulo, qué chulo, qué chulo!
Mira, los tipos, el app controller.
Ah, me lo ha creado con Angular.
Pero bueno, no pasa nada.
Le puedes dar a Create Workspace y te lo va a crear.
Mira, le puedes añadir más instrucciones para refinar.
¡Hostia, qué chulo esto!
A ver, a ver, a ver.
Vamos a ver.
Vamos a ver un momento esto, que lo tengo que ver bien.
Vamos a ver.
Imaginad que le digo que quiero crearme un portfolio.
Scaffold HTML CSS JavaScript Portfolio for a Web Developer.
¿Vale?
Vamos a ver.
Vamos a ver esto porque me parece...
Vale, esto está chulo, ¿no?
Pero ya tenemos aquí los estilos.
Le podemos dar click.
¿Ves?
Ya me ha creado como todos los ficheros.
Style, script, no sé qué.
Lo que es interesante aquí es que te dice que le puedes proporcionar...
Si veis aquí, te dice que le puedes proporcionar más información.
Por ejemplo, le podríamos decir...
Use Tailwind for Styles instead CSS.
A ver si lo va modificando.
A ver si lo va modificando.
Va modificando la estructura, tío.
No me lo puedo creer.
O sea, va modificando conforme le vas diciendo, te va modificando la estructura.
Y ahora está utilizando Tailwind.
Antes de que te lo cree, antes de darle a crear, le puedes ir diciendo...
Hostia, esto está muy chulo, ¿eh?
Esto está muy chulo.
Es verdad que tarda, pero eso es porque está generando todavía el fichero.
¿Sabes?
O sea, tú le das y cuando le das te lo va generando.
Put content in the index.html about all the nice projects I have on my GitHub.
Yo qué sé.
A ver qué hace.
¿Vale?
Ya, pero aquí no...
¿Vale?
Y fijaos que está utilizando Tailwind, ¿eh?
O sea, que ya...
A ver, voy a decirle ahora que me lo cree.
A ver qué tal, ¿eh?
Le voy a decir ahora que me lo cree.
¿Vale?
¿Veis?
Me ha creado todo esto.
Y ahora ya le podría dar a Create Workspace.
Tampoco espero nada del otro mundo.
Vamos a poner aquí...
Midudev Portfolio.
Yo qué sé.
Es solo para ver cómo hace la estructura.
¿Quieres guardar los cambios?
No.
¿Vale?
Creo que se ha roto.
Creo que se ha equivocado.
Sí, sí.
Se ha equivocado.
No me la ha creado.
No me la ha creado.
Me ha engañado.
Midudev Portfolio.
Creo que se ha...
Ah, bueno, sí que me la creo aquí.
Pero se ha equivocado.
¿Veis?
Ha habido un error.
Yo creo que todavía no está muy fino, ¿eh?
Creo que si hacemos aquí un Create Workspace...
O sea, si no lo mareas, le dices...
Scaffold a NoJS API...
Using Express about Pokemons...
Yo qué sé.
Algo así.
Yo creo que esto, si le damos de primeras a que nos lo haga...
Yo creo que va a funcionar.
Prueba Copilot.
Seguramente...
¿Vale?
¿Veis?
Esto sí que funciona bien.
Yo creo que cuando le he dicho lo del index.html, ahí se ha liado.
Y no ha sabido meter el fichero en la estructura de carpetas.
O sea, yo creo que ahí se ha liado.
Pero cuando vas más directo y lo primero que te pone aquí es la estructura de carpetas,
yo creo que ahí sí que funciona.
Y lo que está muy chulo es que le puedes dar a cada fichero para ver cómo sería el contenido.
Fijaos que le puedes dar y te va diciendo antes de que lo crea, te lo puede ir creando.
Bueno, pero fijaos, qué maravilla que nos ha hecho en un momento todo el código.
Todo el código.
Vamos a hacer aquí una que sea Create Workspace y le decimos Scaffold an Astro 3.0 Project.
Yo creo que igual no funciona.
¿Por qué?
Porque seguramente esto está utilizando GPT-4 y yo no sé si...
¿Ves qué pondré aquí?
A ver qué pone.
Ah, bueno.
¡Ojo!
¡Ojo!
¡Hostia!
¡Hostia!
Que sí que funciona, ¿eh?
A ver, no tiene mucho sentido porque al final Scaffolding de Astro lo haces...
Astro Copilot.
Lo haces con un...
Pero sí que lo ha hecho.
Oye, me ha sorprendido, ¿eh?
Bueno, que sepáis, porque mucha gente seguramente se os está preguntando,
que Copilot Chat no está abierto todavía de forma pública, ¿vale?
Es una beta pública y si queréis tener acceso hay que pedir acceso aquí, al waitlist.
Tenéis que estar pagando hija Copilot, si no, no funciona, ¿eh?
Así que nada, que lo sé.
¡Suscríbete!
¡Suscríbete!