Hoy voy a crear mi página Readme del perfil de GitHub y espero que entre todos, pues además os animéis y vosotros también hagáis la vuestra.
Lo que vamos a hacer al principio va a ser sencillo, va a ser crear nuestra página Readme para que salga en el perfil de GitHub,
que es una nueva funcionalidad que han añadido. De hecho, vamos a ver de dónde aparece esto para que veáis un poquito la historia.
El caso es que el 28 de mayo, Casey, que es una desarrolladora de GitHub, no sé si es desarrolladora o diseñadora, yo creo que es diseñadora de GitHub.
Bueno, pues estuvo hablando de que estaban probando nuevas cosas y una de esas cosas es lo que podemos ver aquí.
Lo que vemos aquí es que era el poder añadir un Readme en tu perfil de GitHub, lo cual es bastante interesante,
porque aquí podías mostrar todo tu trabajo, poner tus redes sociales, porque ahora cuando entras en el perfil de GitHub de un usuario,
pues bueno, salen sus repositorios y tal, pero no sale una presentación, no te deja mucha libertad para poder escribir.
Entonces, esta idea era qué pasaría si pudiéramos escribir un Readme para nuestros perfiles.
Y aquí venía la idea. Luego también Kat, que es Product Designer de GitHub, también hablaba de esto y también hicieron.
Esto era como una primera prueba, ¿no? Y quedó así como, jaja, qué risa.
Pues bueno, de repente, casi un mes y medio después, han sacado esta funcionalidad, ¿vale?
La han sacado esta funcionalidad para que cualquiera la pueda utilizar.
Entonces, ¿cómo se utiliza esta funcionalidad?
Bueno, he escrito un artículo en mi blog, por si te quieres pasar, donde te explico paso a paso.
Es súper sencillo. Ya, spoiler, es muy sencillo.
Entonces, lo que... ¡Ay! Se ha quedado pensando.
Bueno, es súper fácil.
Lo que tiene es que tienes que crear un repositorio con tu mismo nick.
Y ya está.
En ese repositorio vamos a crear un archivo readme.md,
de forma que cuando lo creemos, pues va a aparecer en nuestro perfil de GitHub.
Vamos a ver ahora mi perfil para que veamos luego la diferencia.
Todavía no lo he creado. O sea, esto lo voy a hacer desde cero.
Lo voy a trabajar muy poquito, porque tampoco os quiero aburrir.
Ya más adelante, pues ya lo arreglaré, ¿no? Y lo pondré más bonito.
Este sería mi perfil de GitHub.
Y ahora mismo, pues bueno, sí, se ven los repositorios y se ve todo esto.
Pero no tengo el readme y es lo que os comentaba, ¿no?
Que no se puede saber mucho de mí.
Vale, sí sale mi cara, salen las redes.
Pero bueno, estaría bien que tener esa facilidad, ¿no?
De explicar un poquito más sobre mí.
Entonces, si os parece, vamos a hacer todos juntos esto.
Este proceso de crear tu propio readme.
Aquí ya dice que puedes crear un nuevo repositorio.
Así que nada, vamos a volver aquí y vamos a crear un nuevo repositorio.
Aquí en GitHub, creamos un nuevo repositorio.
Y vais a ver que ya en el repository name,
si ponéis vuestro nombre de usuario de GitHub,
ya, ¡pum!
Aquí os dice que habéis encontrado un secreto.
Bueno, tan secreto no será si todo el mundo se lo está haciendo.
Pero claro, es que cuando dices en Twitter,
hombre, ya no creo que nadie se haya enterado, ¿vale?
Así que bueno, este secreto es que es un repositorio especial, ¿no?
Y que puedes añadir tu archivo readme.md
para que aparezca en tu perfil de GitHub.
Así que nada, te tienes que asegurar, eso sí, que no se olvide,
que tenéis que hacer que sea público
y ya que estáis, pues lo inicializáis con vuestro propio readme.
Así que eso es lo que vamos a hacer.
This is my personal repo for readme, ¿vale?
Así de fácil.
Vamos a crear el repositorio.
Me lo estoy creando con el readme.
Y a ver, a ver qué pasa.
Vale.
Pues por ahora nos ha creado ya un hider.
Hider.
Eso es todo.
Ahora, ya aquí también a la derecha nos está indicando
de alguna forma que es un repositorio especial
porque tiene nuestro mismo nombre
y que aparecerá en nuestro perfil público.
Pues vamos a ver si algo tan sencillo como lo que hemos hecho
ya aparece en nuestro perfil público.
A ver.
Pues ya lo tenemos aquí, ¿vale?
O sea, así de fácil.
Ya me da una carita sonriente.
MiddleDiv barra readme.md.
Tan fácil como esto, ya tenemos un hider.
Bueno.
Ahora podríamos empezar a personalizarlo.
El caso es que he encontrado un par de repositorios
que quería enseñaros para que tomemos algunas ideas
a ver qué os parece.
Uno es este, el de Awesome Profile Readme Templates,
que tiene diferentes tipos de readme,
de profiles que se ha hecho la gente.
Hay alguno que es CodeStyle, que están bastante bien.
Vamos a verlo un poco rápidamente.
Pero este sería un ejemplo de lo que se puede hacer.
De hecho, me gusta muchísimo esto de poner código, ¿no?
Para enseñar tus cosas.
Lo mejor es que esto, pues, nos lo podríamos copiar.
No lo vamos a hacer.
Pero al final, como se puede editar o ver en RAW,
pues, lo podríamos hacer en RAW.
Y esto nos lo copiaríamos y lo podríamos pegar directamente
y ya funcionaría.
O sea, ya teníamos esto.
Lo deberíamos, obviamente, editar con nuestra información.
Pero este me parece muy bonito y me gusta mucho la idea, ¿no?
Esta de enseñar código.
De hecho, pues, vamos a ir poniendo algunas ideas
que vayamos viendo.
Ya cuando lo editas, al ser este un repo especial,
ya veo que tiene como una plantilla.
Aquí podéis ver que tenemos como una plantilla
que te dice, ¿no?
Bueno, es un repo especial, pues, aquí tienes esto
y ya no se ha dejado aquí.
Estoy trabajando en esto.
Está muy bien.
Me parece que está bien porque así ya no empezamos de cero.
Pero, bueno, ¿qué os parece si esto nos hacemos algo así?
¿Eh?
Que me ha gustado mucho.
Vamos a poner que esto es JavaScript.
No sé si esto se ve.
No sé si lo puedo hacer un poco más grande.
Pero, bueno, voy a poner que esto es código JavaScript
y podremos hacer esto.
Vamos a ver, pues, esto es him.
Y JavaScript, bueno, Ruby no sé nada.
Python tampoco y Java tampoco.
Por ahora lo vamos a dejar así.
Y por ahora vamos a poner Redux.
Ya sabéis que no es lo mío.
Storybook, Start Components, Jest y Docker.
Bueno, sí, me parece bien.
Bueno, esto por ahora lo vamos a dejar así.
Vamos a dejar esto por aquí, así, por ahora.
Lo mejor es que, bueno, ya sabéis que podemos hacer
una previsualización por si no estamos muy seguros
de cómo está dejando esto.
Y ya vamos viendo cómo va quedando.
O sea, que esta idea está interesante.
Hay otros tipos que están súper bien.
O sea, podemos encontrar, bueno, este a lo mejor es un poquito
más, no sé, un poquito flojo, ¿no?
Pero podemos ver otros tipos como, por ejemplo, a ver,
el default debe ser el que tiene por defecto.
Vamos a ver Dynamic, Dynamic Realtime.
Este me gusta porque luego lo que vamos a hacer con el
GitHub Actions es intentar que nuestro también sea dinámico.
El que quiero crearme, quiero que se actualice de forma
automática.
Así que por aquí pueden ir un poco los tiros, ¿vale?
Así que, bueno, este está bastante bien.
Me imagino que lo dinámico, no sé si es que han puesto un GIF o
es que tiene esto, ¿no?
Que tiene estos stats de GitHub en los que te va dando una
puntuación dependiendo de las estrellitas y los cómics que
hayas hecho.
Bueno, no está mal.
A ver aquí.
No, esto también lo he visto en unos cuantos sitios y supongo
que es algo que te lo genera, ¿no?
Que te hace una imagen, lo típico, ¿no?
Sí, es este, ¿no?
El GitHub Stats.
Vamos a ver esto de GitHub Stats.
Sí, esto, vamos a ver si lo podemos usar nosotros.
El camo, no, aquí no está.
Bueno, ya lo encontraremos seguro.
Pero es eso, que te debe hacer con tu nombre de usuario,
te crea un hash y te lo dice.
Veo que todos están haciendo básicamente eso.
Mira, este está bien.
Si lo refrescas, puedes ver la imagen que va cambiando.
Así que lo vamos a refrescar y se ve otra imagen.
Bueno, está bien.
Lo interesante es eso.
Podríamos ver el código y ver cómo lo está haciendo.
Aunque este puede ser simplemente que la imagen va a una URL y ya está.
Vamos a ver alguno que pone que es elaborado.
Vamos a ver cómo son estos elaborados.
Bueno, elaborado en este caso significa mucho texto, ¿vale?
Vamos a ver otro.
A ver si es más elaborado.
Bueno, este está bien, así con sus emojis y tal.
De hecho, bueno, este me gusta.
Es simple, pero efectivo.
Uno de estos son los elaborados,
porque ya hemos visto que son como mucho texto.
Multimedia debe ser con muchas imágenes.
Short and sweet.
Aquí hay uno que es el que ha servido de referencia para mucha gente,
que es el de Mónica.
Aunque aquí no sale de bien del todo,
porque parece como muy simple, ¿no?
Pero si vamos aquí a Mónica,
aquí sí que podemos ver que es el que está utilizando muchísima gente,
que es el de hi, I'm Mónica, el saludo, el muñequito,
una imagen y luego, pues nada, un poquito una descripción
y te dice me puedes encontrar aquí, aquí y acá.
Bueno, pues este la verdad es que está bastante bien.
Podemos ir por aquí.
De hecho, yo tengo una imagen, que a ver si la encuentro.
A ver si encuentro por donde tengo la imagen.
Aquí.
Aquí está.
Vale.
Pues creo que si se puede, no, no nos va a pillar la imagen.
Pensaba que nos iba a dejar hacer un commit directamente,
porque cuando haces un repositorio,
sí que puedes hacer esto de subir una imagen directamente,
pero aquí ya veo que no.
La tendremos que subir a algún sitio y cuando tenemos una ISU.
A ver, un tricullo que podemos hacer es crear una ISU directamente, ¿no?
Vamos a crear una ISU, add image, y por ahora la vamos a añadir aquí.
Y ya está.
Pa, pa, pa.
Y nos vamos a copiar esa URL de esta forma,
pues ya tenemos una URL donde tenemos nuestra imagen subida, ¿no?
Vamos a crear la ISU para que no nos borre la imagen.
Mira.
Ah, no queda con el emoji.
Bueno, ya lo arreglaré.
Había añadido unos emojis fáciles, ahí súper rápido.
Pero bueno, pues nada, podemos crear aquí nuestra imagen.
Bien, esto lo vamos a dejar así.
Creo que esto era así.
No, esto es para...
Ay, me ha faltado el hash.
Aquí está.
Ay.
Bueno, que no soy capaz de crear una imagen.
A ver, a ver.
¿Lo he puesto al revés o qué?
¿Alguien se sabe el markdownflavor o lo tengo que buscar?
Madre mía.
Vamos a ver.
¿Cómo se ha creado una imagen?
A ver si alguien me lo dice en el...
Porque anda que yo también.
Bien, vamos a editar esta y ya está.
Vale, ¿eh?
Con el...
Si la había puesto bien, ¿no?
Bueno, bueno, no pasa nada.
Ya está, ya está.
A ver, a ver ahora sí.
Ahora sí.
Bueno, ahora tendríamos aquí.
Hi.
I'm Miguel.
Que es un poquito lo que ha hecho.
Y vamos a poner por ahora el muñeco.
Esto es súper interesante que sale mal esto.
Bueno, por ahora vamos a dejarlo así.
Y ya vamos a actualizar esto.
Vale.
Vale.
¿Alguien he comitado antes?
Bueno, ¿por qué he hecho esto?
Y al final no he puesto lo del JavaScript.
Bueno, por lo menos he puesto mi imagen.
¿Vale?
Entonces, vamos a volver a poner esto, que era lo del midu dev.
Por ahora, midu dev.
Voy a poner este así.
Esto, vamos a poner technologies.
Pues, voy a poner web.
Passions.
Vamos a poner array, performance, web.
Web development.
¿Vale?
Y por aquí, ya voy a añadir también, you can find me.
Y vamos a poner aquí, pues, mi blog.
Voy a poner mi Twitter, mi YouTube.
¿Vale?
Vamos a poner...
Voy a ir a mi página.
Y aquí tengo mis...
Mis redes.
Vale.
Pues este sería mi...
Esto sería mi Twitter.
Ta, ta, ta.
Uy.
Aquí me ha puesto un montón de cosas.
Aquí.
Venga.
Vale.
Pues vamos a poner este...
Esto por aquí.
Y mi Twitter.
Ay, es que tengo dos...
Es que tengo dos abiertos.
¿Vale?
Entonces, antes de que la líe, voy a cerrar...
Mira, si lo tenía aquí, ya he hecho.
Venga.
Vale.
Antes de liarla.
Venga.
Venga.
Ahí está.
Vale.
Tengo mi blog.
Mi blog.
Esto sí que se hace así.
HTTPS.
Mido.dev.
El Twitter.
Y ahora os explicaré un poco lo que quiero hacer así de especial.
Que me imagino que la gente hará con los GitHub Actions.
Y vamos a aprender a ver si lo somos capaces de hacerlo.
Vale.
Aquí youtube.com.
Que es donde estamos ahora mismo.
Y, bueno, también podemos poner nuestro Instagram.
Que es instagram.com barra midoodle.
Y cerramos aquí.
Vamos a hacer un preview antes de liarla.
Vale.
Bueno.
Poco a poco.
Poco a poco.
Vale.
Vamos a comitear directamente.
Y ya está.
Vale.
Pues ahora cuando entro a mi perfil, pues ya deberíamos ir viendo los cambios.
Está bien.
Este.
Este.
Este file unicone me encanta.
Pero bueno.
Ya va pillando un poquito de forma.
¿No?
Es verdad que esto de tener la misma imagen.
Esto igual también lo cambio.
¿No?
Porque es el mismo perfil y tal.
Pero bueno.
Al menos ya va tomando un poquito de forma.
Vamos a ver qué más ideas pillamos por ahí.
Y nos copiamos directamente.
Aquí tabular.
He visto que la gente pone aquí tablas y tal.
La verdad es que no sé esto.
Por ejemplo, el del chico este.
Este de dónde es.
From Chiao Luou Bouding.
Vamos a ver Chiao Luou Bouding.
A ver cómo es tal.
¿Ves?
Ha quitado las tablas.
O sea, en su perfil ya las ha quitado.
Porque claro.
Es que las tablas son muy problemáticas.
Porque dependiendo de esto, ¿cómo es de...?
No sé.
Puede quedarte muy chafado.
No sé si yo sí es buena idea.
Vale.
Ese era un repo, ¿no?
Pero hay otro que es este.
Que este además es bastante más interesante.
Luego os dejaré los enlaces, ¿vale?
En la descripción del vídeo para que veáis los dos repositorios.
Hemos visto uno y ahora este es otro.
Que este además es bastante más directo.
Así que genial.
Veo que tiene una categoría de GitHub Actions.
Que es un poco la idea que yo tenía.
Así que, mira.
Thomas Givert.
Pues podemos ver un poco...
Aquí podríamos ver su Ritmi.
Y ver lo que está haciendo con los GitHub Actions.
De hecho, aquí tiene los workflows.
No soy un experto de GitHub Actions.
Repito.
Lo vamos a ver en vivo.
Vamos a ver cómo lo hacemos.
Pero mira.
Por aquí va un poco la idea.
Las ideas que yo tenía.
Las que quería hacer.
Va a ser muy similar a lo que está haciendo aquí.
Por lo que veo.
Así que...
Igual este nos puede servir de referencia.
En el caso de que me pierda mucho.
Pero estaría bien.
¿Qué es lo que actualiza con los GitHub Actions?
Vamos a ver.
Claro, puede ser el número de estrellas.
Si se han hecho forks.
Claro, todo esto.
Tú lo que puedes hacer es que cada hora,
cada 10 minutos o lo que sea,
actualice el Ritmi.
¿Vale?
Con la información que tú quieres.
Vamos a ver si nosotros somos capaces de hacerlo.
Con la idea que yo tengo un poco.
Que yo lo que quiero es mostrar mi último post del blog.
O mi último tweet.
Y cosas así.
Vamos a empezar con el blog.
Que será más sencillo.
Pero bueno.
Vamos a ver si somos capaces.
Hay algunos que han puesto hasta juegos.
Esto me parece ya brutal.
¿Vale?
Han puesto...
Aquí puedes jugar al ajedrez.
Y entonces puedes decir dónde quieres mover.
En este caso, bueno.
Esto ya lo tiene bastante perdido.
Las blancas lo tienen bastante perdido.
Pero aquí le podríamos decir.
Quiero que lo muevas a la A3.
¿Vale?
Y entonces le crearías una ISU para que lo moviese.
No sé si va a ser la partida más dinámica del mundo.
¿Vale?
Vale.
Benzampika.
A ver qué juego ha puesto por aquí.
Bueno.
Mira.
Aquí ha puesto uno de rol.
O sea que si vamos a su perfil.
Aquí tenemos un...
Puedes elegir tu clase.
¿No?
Y puede...
Te da diferentes...
Diferentes...
Supongo que...
One más...
One to roll.
O sea que, claro.
Cada clase pues tiene diferentes habilidades.
En este caso vamos a ver el guerrero.
Entonces puedes escoger la clase.
Y aquí pues empezaría el juego.
Y aquí están ya en un poquito las puntuaciones.
Madre mía.
Madre mía la gente.
Las cosas que ha hecho.
Otro de código.
A ver este.
Bueno.
Este es el que hemos visto.
Este la verdad es que es muy bonito.
Tengo que decir.
Real time también.
Este...
Aunque este es de real time.
De nuevo.
¿No?
Me parece que es esto del GitHub stats.
Que está bastante bien.
Pero debe ser algo que está generado por alguna cosa.
No sé dónde lo están generando.
Mira.
Aquí.
Sabía que lo íbamos a encontrar.
Son estos.
GitHub.
Readme stats.
Está bastante bien.
O sea.
Al final.
Esto.
Vamos a ver.
Solo hay que cambiar el username que vemos aquí.
El username por el que tengamos.
Entonces.
Por ejemplo.
Pues yo aquí.
Este.
Voy a tomar primero la URL.
Vamos a ver cuál es mi...
Voy a poner aquí mi du-dev.
Y...
Mira.
Este soy yo.
Estas son mis stats.
500.
No sé qué significa esto.
Esto es un poco Apple Watch.
Pero bueno.
A más más.
Supongo que es algo bueno.
Quiero pensar.
Entonces.
Bueno.
Pues podríamos hacer...
No sé.
¿Nos hace ilusión hacer esto?
Venga va.
Vamos a añadirlos.
Solo para ver cómo queda esto.
Pero tenemos que editar el que tenemos aquí.
Que es el que tiene los últimos cambios.
Así que vamos a añadirlo.
Y vamos a poner.
Solo para ver cómo queda.
Esto.
Mi du-dev.
Aquí.
Username.
Mi du-dev.
Y esto ya estaría.
Mira.
Está.
Deployado en Vercell.
También.
Es que no para.
No para.
Mira.
Os pongo.
Os dejo en el...
Os lo iba a dejar en la descripción.
Pero os voy a poner también aquí en el chat.
Por si os animáis a hacerlo en vivo.
¿Vale?
Os voy animando.
Os voy animando.
Os paso aquí la url.
¿Vale?
Muy bien.
Voy a ver cómo queda esto.
Voy a comitar los cambios.
Y a ver cómo queda.
Bueno.
Mira.
No está mal.
No sé.
Creo que es un poco pretencioso.
Seguramente lo voy a quitar.
Pero bueno.
Es que.
Qué necesidad.
Además.
Ya en el resto del perfil ya sale todo esto.
Bueno.
Vale.
Vamos a ver.
Antes de seguir.
Voy a leer vuestros comentarios.
A ver qué me estáis comentando por aquí.
Y a ver qué.
Qué tal.
A ver qué vais poniendo.
Mira.
Xavi.
Me decía de poner el link.
Pues ya os lo he puesto.
Que es justamente el link que aparece en pantalla.
Solo tenéis que cambiar.
En lugar de username.
Mi du-dev.
Pues tenéis que poner el vuestro.
Vale.
Juan J López dice que llega tarde.
Pero nunca se llega tarde.
Se llega cuando se llega.
No pasa nada.
Y qué más.
Qué más.
En las settings del repo.
Creo que te deja poner una imagen.
Ah.
Mira.
Interesante.
Y puedes utilizar la URL para insertar la imagen.
Bueno.
Le hemos hecho el truco de la ISU.
Y con eso ha funcionado.
Yo hice eso hace justo 10 minutos.
Y lo subí al mismo repo.
Y solo puse en la referencia.
Vale.
Genial.
Gente que se está uniendo ahora por aquí.
Aquí hay gente.
Etcha SW.
Dice.
Hola, mi du-dev.
Saludos.
¿Cuál es la mejor forma de hacer una especie de repositorio de código fuente de ejemplo y guardarlas para tenerlos a mano?
Pues buena pregunta.
A ver.
Yo creo que depende, ¿no?
Si, por ejemplo, quieres tener de ejemplo una aplicación de React, por ejemplo, yo lo haría en un solo repositorio.
Seguramente.
Si te podrías animar a tener un monorepo multipaquete.
Tener diferentes carpetas y ahí dentro tener en cada carpeta un ejemplo.
Pero no sé si eso puede añadirte demasiado ruido para intentar ir más o si es información que quieres enseñar para tu marca personal o ya sea porque estás buscando trabajo.
No sé si el hecho de tener más de un repositorio incluso te puede beneficiar, ¿no?
Que no solo tener uno y llamarle de una forma demasiado genérica, ¿no?
Así que yo creo que puede estar bien que tengas más de un repo.
Igual, claro, si tienes una aplicación de React sí que puede ser interesante tener los componentes de React o el storybook dentro de ese repo, ¿no?
Pero, o incluso la API puede ser que te hagan sentido.
Pero no sé.
Igual hay que encontrar ahí un equilibrio, un balance.
Una herramienta muy buena para hacer Ritmys es Tipora.
Pues sí, es muy buena.
No sé si no conocéis Tipora.
Es una herramienta de un editor de Markdown muy bueno.
Aunque yo, yo por ejemplo, me voy a dejar por aquí para que lo veáis porque es muy, muy bonito.
Es súper útil.
Aunque yo utilizo, mira, aquí me hubiera ayudado porque hubiera visto al momento pues como a la imagen.
Tiene cosas muy buenas.
Además es totalmente gratuito.
Al menos por ahora en la beta de Macos en Windows.
No sé si sí que es de pago, ¿no?
Bueno, aquí también pone que está en beta.
Vale, vale.
Yo como solo utilizo el de Mac y pone que es gratis durante la beta,
pensaba que era el de Mac, era el que estaba en beta.
Pero veo que el de Windows también está en beta.
Me sorprende.
Me sorprende porque ya lleva tiempo Tipora haciendo este producto.
Pero bueno, mejor para todos nosotros.
Pues este es el editor.
Yo utilizo Visual Studio.
Me encanta utilizar Visual Studio.
Si no tienes el Ritmi, no eres cool, dice Kiko Beats.
Pues eso lo vamos a solucionar ahora mismo.
¿Vale?
Vale, perfecto.
Ya que me van diciendo gente por aquí, tú presume de tu excelente trabajo.
No pasa nada.
No, hombre, no.
Tampoco hace falta.
Además, en ese caso, creo que en el GitHub ya aparece demasiada información
respecto a los repositorios.
O sea, aquí, en el repositorio que aparecía antes, ya ante el tema de las contribuciones,
los repositorios y este gráfico tan extraño que veo que yo no creo Isus, no creo Isus.
Cero.
Yo solo hago comits.
Yo solo vengo a picar.
Pues yo creo que ya no hace falta poner más stats.
Que la gente se va a quedar ahí con muchos stats.
Vale.
¿Usas tu GitHub personal para trabajar, Xavi Wu?
Sí.
Utilizo mi GitHub personal para trabajar.
No solo porque tengo yo proyectos propios, como tengo este React Slidy, que es un slider de React
que os recomiendo mucho si os preocupa mucho la performance como a mí.
¿Vale?
Aquí este slider que dice React.
Que, bueno, está pensado para que sea bueno en términos de performance, ¿vale?
No en términos de animación, sino de performance y que funcione muy bien en móvil y tal.
Esos son proyectos más personales, pero también mi empresa tiene proyectos de código abierto
como Sweet Components.
Que estos...
Tenemos Sweet Components...
Ay, perdón.
Sweet Components.
Que son los componentes de React que utilizamos en todos nuestros proyectos.
Entonces, claro, tengo que trabajar sobre este repositorio y como es de código abierto.
Mira, aquí tenemos el botón, por ejemplo.
Y, bueno, está muy bien porque todos los proyectos utilizamos el mismo botón de React
y solo cambiando variables de SAS, pues, se adapta el estilo.
Y, bueno, está bien porque así solo lo escribimos una vez el botón, pese a que tenemos un montón de proyectos.
Así que sí, lo utilizo para trabajar en estos proyectos de código abierto.
Pero hay en otros proyectos que no, que no son de código abierto.
Ay, mira, hay alguien que ya me ha hecho un fork de mi DUDEF.
Genial, hombre.
¿Qué más?
¿Qué más me comentáis por aquí?
Y ahora que lo has dicho, ¿te animarías a hacer algo de Storybook?
Pues sí, hombre, sí, claro que me animaría, por supuesto.
De hecho, me animaré.
Xavi, te has perdido que he creado mi Ritmi para mi profile, para mi perfil.
Y que vamos por aquí ahora mismo, ¿vale?
Que básicamente lo único que he hecho es crear un repositorio con mi nombre y editar el Ritmi.
Tampoco he hecho mucha cosa más, ¿vale?
¿Podría hacer un vídeo para hacer pruebas unitarias en React?
Tengo un vídeo ya sobre eso.
Hicimos de hooks e hicimos sobre componentes.
Así que lo podéis revisar.
Lo hicimos con Jest y lo hicimos con React Testing Library.
Pero bueno, igual estaría interesante hacer más.
Bautista, sí, importante.
Yo creo que dice,
¿GitHub Ritmi Stats toma solo repos públicos?
Yo creo que sí, porque es imposible que tenga los accesos para pasar uno privado, ¿vale?
Así que sí, sí, tenlo en cuenta.
¿Qué más?
¿Cómo publicas un repo en NPM?
Bueno, no puedes publicar un repo, puedes publicar un paquete.
Porque un repositorio puede tener múltiples paquetes, puede tener un montón.
Así que lo que puedes es deployar paquetes, ¿vale?
Y bueno, para publicarlo, pues al final, si un repositorio se utiliza un paquete,
pues un NPM Publish y ya está.
Vale, pues nada, si os parece, vamos a continuar.
Vale, lo que quería hacer, ya que voy a ir cerrando,
que tengo aquí un montón de cositas, voy a ir cerrando, voy a ir cerrando.
Este me gustaba, ¿eh?
Esta cosa así que, bueno, veo que es la oficial, digamos.
Y también me gustan estos iconos, o sea, que estos iconos también me los podría copiar.
Vamos a ver el row del Twitter, porque este, esto, esto me gusta.
Esto, esto para mí.
Esto me lo voy a dejar aquí para acordarme de cómo lo quiero hacer, ¿vale?
Pero básicamente, esto es lo bueno, ¿eh?
De GitHub, tú ves el código ahí de cualquiera y ¡pam!
Por ahora me lo voy a copiar, no, espero que no borre ese fichero, pero venga.
Luego lo haré con el resto de iconos.
Voy a ir buscando los iconitos estos de GitHub, de Twitter, Instagram y todo esto,
y lo voy a hacer con todos, porque me parece, me parece bonito con los iconitos.
Vale, pues, uy, macho, se ha ido, se le ha ido, se le ha ido aquí el tema.
Claro, porque esto, vamos a ver, me, about, about me in code.
Y aquí, vamos a poner aquí también el you can find me, y ya está, ¿vale?
Para que haya una pequeña separación al menos.
¡Ay!
Cómo me ha ignorado, cómo me ha ignorado esto.
Esto normalmente, esto me da mucha rabia.
Vale, ¿veis?
O sea, es exactamente lo mismo, pero hay veces que si copias el carácter de espacio, no lo detecta bien.
Y, ¿ves?
Aquí, por ejemplo, aquí hay un espacio, pero si ahora voy aquí, lo único que voy a hacer es borrarlo y hacer un espacio,
ahora sí que sale en negrita y ahora sí que saldrá bien.
Esto es una cosa un poco rara, pero bueno, para que lo sepáis, que a veces pasa esto.
Vale, buenísimo.
Pues ahora que ya tenemos esto, que ya me pondré, bueno, esto tendré que dar un salto o algo, un dip.
La verdad es que esto de poner HTML es un poco raro, ¿no?
Vale, pero ahora no sé si este HTML se lo va a tragar.
Vamos a ver.
No.
Bueno, a ver, vamos a hacer el...
Vamos a hacerlo bien, venga.
Vamos a hacerlo bien.
Esto, esto, lo que queremos es que sea una imagen, ¿vale?
Así que vamos a copiarnos la imagen.
Ah, porque si no, no queda bien alineado.
Vale, bueno, mira, por ahora vamos a dejarlo abajo del todo y ya lo arreglaremos, ¿vale?
Para no estar aquí un rato con el iconito, ¿vale?
Venga, vamos a dejarlo ahí abajo, que quede más... no quede por ahí en medio.
Vale, entonces, ya que he puesto esto del blog, lo que quiero hacer es recuperar el último post y que aparezca aquí, ¿vale?
Entonces, por ejemplo, quiero poner algo así.
You can find me... you can find my articles about web development in my blog, ¿vale?
Y entonces, lo que quiero es poner aquí.
No sé si esto lo podemos poner así.
Latest article y aquí el nombre del artículo, ¿vale?
Voy a poner aquí unos puntos suspensivos.
Bueno, no sé si se ve muy grande.
Voy a intentar ahora...
Perdonad, ¿eh?
Que no he puesto aquí...
Vale, pues he puesto aquí latest article, ¿vale?
Y lo que quiero es justamente que aquí aparezca mi último artículo.
Esa es la magia.
O sea, lo que quiero es que este cómo crear tu perfil en Ritmi, bla, bla, bla, bla...
Esto aparezca aquí.
Así.
Bueno, que debería ser con el título...
O sea, lo que quiero es que aparezca esto así.
Y esto para hacer esto...
Así se hace el enlace, ¿no?
Pues esto es lo que quiero.
Vale.
Y quiero que quede así.
Algo así.
A ver, ya lo arreglaré.
Lo que quiero es que aparezca el último artículo.
Pero claro, por ahora, si lo hago a mano, esto va a ser un verdadero coñazo, ¿no?
Me puedo volver loco aquí haciendo...
Entonces, voy a hacer algo.
Por ahora voy a dejar el penúltimo.
De forma que vamos a ver si son más capaces de hacer el GitHub Action.
O voy a poner aquí esto.
La mejor música para programar.
No voy a cambiar ni siquiera lo otro.
¿Vale?
Entonces, voy a cerrar todas mis pestañitas.
Ya os he enseñado ahí unos cuantos profiles que me parecen interesantes.
Ah, os quería enseñar este.
Os quería enseñar este, que está muy bien.
Mira, esto es un Profile Rhythmic Generator, que está bastante bien porque así os quita
bastante trabajo.
Por ejemplo, aquí podéis poner Miguel Ángel, from Barcelona, Spain.
Aquí vais rellenando un poquito.
Y vais poniendo lo que queráis.
Estoy aprendiendo, por ejemplo, Next.js.
Me puedes preguntar sobre React, JavaScript, Performance Web, and anything about web development.
O sea, esto lo que te va a crear es como una plantilla, que está bastante bien.
I'm currently working on sharing web development content.
Y aquí vamos a poner mi canal de YouTube.
Espero que estéis suscritos.
Y bueno, aquí podemos poner un montón de cosas.
Y puedo escribir...
Esto está bastante bien, ¿no?
Porque es bastante rápido.
Además, aquí le podemos decir, vale, pues sé de esto, sé de esto, sé un poco de esto,
de esto...
Bueno, no los voy a poner todos, pero...
Y vuestro...
Bueno, es que esto está bastante bien.
O sea, puede servir para hacer rápidamente vuestro GitHub Profile.
Ahora os paso el enlace.
Mira.
Vale, este soy yo.
Bueno, podéis meter aquí un montón.
Pues esto es midu.dev.
Esto en Instagram, midu.dev.
Facebook es midu.dev.frontend.
Bueno, aquí tengo un montón.
Os paso el generator, ¿vale?
Mira.
¡Pum!
Y yo lo voy a poner también aquí para que aparezca.
Ese sería, ¿vale?
El Profile Generator.
Podéis ir poniendo aquí todo lo que queráis.
Display Visitors con Batch.
Bueno, esto no vale la pena.
Bueno, total, ¿qué podemos hacer?
Vamos a poner un Generate Readme.
Y esto nos debería devolver el Markdown que debemos pegar.
¡Buah!
Tal cual.
Bueno, me encanta que lo ha puesto como HTML.
Mira, ahí tenemos un preview.
Vamos a ver cómo quedaría.
Bueno, no está mal, ¿no?
O sea, está bastante bien.
Teniendo en cuenta que lo hemos hecho así a saco.
Vamos a ver.
Venga, vamos a ponerlo.
Ya que estamos, ¿no?
Vamos a ponerlo justo debajo de la imagen.
Aunque cuando se pone HTML justo debajo de la imagen,
creo que esto es un poco...
Bueno, no está mal.
Bueno, bueno.
No está mal, no está mal.
Creo que hay cosas aquí que no ha hecho bien.
No sé por qué.
Ta, ta, ta.
¿No?
Bueno, este enlace no lo ha hecho bien.
El del estoy aquí trabajando en tal.
Vamos a ver por qué.
Estoy trabajando...
Ta, ta.
Aquí.
Claro, es que aquí está mezclando...
¿Dónde?
¿Cuál es el que estaba fallando?
Estaba fallando este.
No sé por qué está fallando ese.
Pero puede ser que sea porque estoy mezclando ahí rápidamente.
Bueno, ahora se ha arreglado.
Bueno, debe ser el copy-paste.
Bueno.
Bueno, pues no está mal, ¿eh?
Ay, mira, y estos iconos me gustan, ¿eh?
No está mal, no está mal.
No está mal.
Me gusta.
Pues, ¿sabéis qué?
Vamos a dejar este.
Vamos a dejar este.
Vamos a quitar todo esto.
Ya me dedicaré a poner los otros que quedan.
Y vamos a poner aquí latest.
Vamos a poner el último artículo aquí directamente.
¿Vale?
Este, la imagen esta ya no vale la pena.
Está basado, lo que hemos visto, está basado en esto, ¿eh?
En el Ritmi por defecto.
Pero, bueno, está bastante bien.
Así que vamos a dejar este.
Y, bueno, a ver si os animáis.
Y podéis ir compartiendo.
Si os animáis, podéis ir compartiendo vuestro Ritmi, ¿vale?
Ay, no, otra vez.
Otra vez esto.
Es que he creado algo por ahí.
Cuando he empezado a editar.
¿Vale?
Bueno, ya está.
Ya está.
Perfecto.
Bueno, más o menos, más o menos.
Luego ya lo retocaré.
Es que falta retocar un montón de cosas.
Lo importante ahora es este, ¿vale?
El latest article es la mejor música para programar.
Ahí lo que quiero es que aparezca mi último artículo.
Vamos a ver si soy capaz.
¿Vale?
Luego os pasaré también este artículo que también, pues, enseña cómo hacerlo
paso a paso un poco lo que hemos visto.
Y, además, pues, da algunas ideas.
También, bueno, esto es mi Instagram.
Acabo de llegar a 5200.
¡Bravo!
¡Bravo!
¡Gracias!
¡Gracias!
Que, por si os lo habíais perdido, está este de CSS Media Queries.
Bastante bonito.
Que parece que a la gente le ha gustado.
Y, si lo queréis, pues, dadle un comentario que pondré más.
¿Vale?
Por supuesto, el YouTube.
Que esté, por supuesto.
Vale.
Hasta aquí.
Tenemos el...
Tenemos ya nuestro Ritmi.
Que, bueno, habría que editarlo y tal.
Entonces, vamos a ver cómo podemos iniciarnos en esto de los GitHub Actions.
Yo ya os digo, no tengo ni idea.
Así que puede pasar de todo.
Pero entre todos, todos juntos, lo podemos sacar.
Si estás viendo esto y quieres verme fallar estrepitosamente y quieres ver cómo, bueno, cómo poco a poco lo sacamos, seguro entre todos, dale un like al vídeo.
A ver, a ver, a ver, a ver, ahora.
Dale un like al vídeo y venga, y vamos a ello.
¿Vale?
Vamos a ello.
Lo primero que yo haría, que no tengo ni idea, sería darle aquí a Actions, ¿vale?
Vamos aquí en Actions para que, de alguna forma, me prepare que este repositorio pueda utilizar GitHub Actions.
Entonces, ya me dice por aquí qué workflows made for your repository.
Bueno, dice que podríamos empezar un workflow.
Yo entiendo que un workflow es, pues, los pasos que va, que queremos que dé GitHub Actions.
Al final, GitHub Actions lo que nos va a permitir es tener como un continuous integration en el que vamos a poder ejecutar comandos y hacer cosas, pues, en diferentes etapas que ocurran en nuestro repositorio.
Como cuando se merge algo, ¿no?
Que alguien haga merge, alguien haga un commit o en cron.
Que eso es lo que va a ser interesante, ¿vale?
Porque a mí lo que me gustaría es que esta acción, lo que ocurre, este workflow que hagamos, ocurra cada X tiempo.
Yo lo que quiero es que cada día, a lo mejor, ¿no?
Pues, lo que ocurra es que me actualice o me mire si he tenido un último artículo, un último tweet, una última foto en Instagram, ¿vale?
O sea, que creo que esto, aquí es donde vamos a ver lo realmente interesante.
Vale.
Vamos a ver.
Antes de darle a Setup this workflow, voy a ver qué opciones me da por aquí.
Porque me dice, deploy your code con estos servicios populares.
Bueno, esto es interesante porque yo lo quiero hacer con Node.
Así que, bueno, aquí me dice publish.
Yo no quiero hacer un publish.
Pero sí que quiero utilizar Node.
Eso sí que es algo que me interesaría.
Vale.
Creo que luego, a ver, si buscamos Node aquí, por ejemplo.
Node.
A ver cuántas, no quiero deployar, no quiero deployar ni publicar.
Esto sí.
Ojo.
Este me gusta.
Build and test a Node.js project with NPM.
Vale.
No voy a darle a Setup, pero voy a ver de qué trata este action.
Y voy a ver, vale.
Este sería el archivo con el que podemos hacer la acción, ¿no?
Le decimos el nombre de este workflow y le decimos cuándo tiene que funcionar.
Entonces, esto dice cuándo.
Se hace un push de la rama tal, tal.
Y estos son los trabajos que tiene que hacer, ¿no?
Y estamos en el step de build.
Tiene que funcionar en Ubuntu Latest.
La verdad es que se lee bastante bien, ¿eh?
Me gusta mucho.
Y aquí lo que está haciendo son los pasos que tenemos que dar, ¿no?
Tiene que utilizar action checkout, que esto supongo que es lo que nos va a permitir poder hacer un checkout del repositorio.
Y más adelante hacer commit y hacer un push de los cambios.
Espero, ¿no?
Porque lo que quiero es el RIM y lo quiero modificar.
Por lo tanto, espero que podamos tener estos cambios bien, ¿no?
El poder bajar el repositorio y subir los cambios que generemos, ¿vale?
Entonces, este nombre dice, esto es porque, claro, esto, ¿por qué tiene esta strategy matrix y tal?
Esto os lo voy a explicar.
Esto lo que va a hacer es que tenemos un array de tres posiciones.
Entonces, yo entiendo, y estoy bastante seguro que esto funciona así,
es que esta estrategia, que tiene tres versiones, la va a hacer tres veces.
O sea, estos pasos los va a hacer tres veces.
Uno por cada una de las versiones que tenga.
En nuestro caso, esto no va a ser tan importante porque solo queremos utilizar una versión en concreto de Node.
Pero veo bastante claro cómo quiero mi workflow.
Solo que aquí esto, esto de aquí lo vamos a cambiar porque queremos que sea un Chrome Job.
Queremos que ocurra cada X tiempo.
Luego hablaremos sobre lo que es un Chrome y cómo funciona y tal.
Y por otra parte, en lugar de hacer test y CI y todo esto, aquí lo que vamos a ejecutar es el script que vamos a hacer.
Vamos a ver un poquito de JavaScript con Node.js.
Vamos a ver qué sale de todo esto, ¿vale?
Pero, bueno, en principio no debería ser muy complicado.
Me gusta, me gusta este workflow.
Lo vamos a tener que editar un poquito, pero yo creo que podríamos empezar con este.
Así que le voy a dar a Setup this workflow, ¿vale?
A ver si entiendo.
Vale, además ya me deja editarlo.
Esa es cosa que me gusta.
Vale.
Por ahora no tengo muy claro cómo funciona el tema del Chrome Job, pero lo vamos a ver.
Workflow, mira, aquí tenemos Chrome, Workflow, on a Schedule.
Esto es lo que queremos hacer.
Vale.
No sé si conocéis el que es el...
Ah, mira, si es que se puede configurar visualmente.
Pues lo vamos a hacer así.
Si se puede configurar visualmente, pues una maravilla.
A ver, a ver.
O sea, si yo me pongo aquí encima...
No, no, me ha engañado.
No.
Pensaba que me iba a salir aquí súper fácil el editor de decir, ah, no, lo tienes que hacer cuando tal.
Vaya.
Eso será si lo hacemos un poco a lo mejor desde cero, ¿no?
Esto me...
Hombre, me gustaría, ¿no?
Setup a Workflow.
Ah, mira.
Podríamos hacerlo nosotros.
Sí, pero veo que no...
Setup, no sé qué.
Code Continuous Integration.
No, aquí es que directamente me está dando...
Ah, pero me gustaba más.
Cuando he visto eso, me he animado.
He dicho, ah, pues...
Igual mientras escribimos...
Igual es eso, ¿no?
Que mientras escribimos, puede ser que podamos ver el editor este, ¿no?
Vale.
Lo que estoy viendo en este artículo, básicamente, es que necesitamos el evento Schedule.
O sea, en lugar de ser on Push, lo que necesitamos es decirle on Schedule, ¿vale?
Así que voy a quitar este.
Voy a continuar con el que teníamos de Node.
Todo esto lo vamos a quitar y le vamos a poner on Schedule, ¿vale?
Alguien me dice, dale al Preview, ¿vale?
Dice, será en Preview.
Vale, en Preview veo que no.
No veo que me esté haciendo tampoco esto, ¿eh?
Pero bueno, no pasa nada, no pasa nada.
Si esto...
Esto lo vamos a poner Schedule.
Y...
Vale, bueno.
Aquí ya pone...
Vale, on Schedule básicamente es sobre el reloj, ¿no?
Y aquí ya nos dice que podemos utilizar un Chrome.
Aquí el Chrome, básicamente, ¿cómo funciona el Chrome Job?
El Chrome Job son cinco caracteres, ¿no?
Que esto...
A ver si me acuerdo bien, ¿eh?
Son minutos, horas, días...
No.
No, esto no es en días.
Este es el día del mes.
El mes.
Y el día de la semana.
¿Vale?
Vamos a tener al least one character.
Vale, vamos a ver por qué esto no me gusta.
Pero esto...
Eso tenía buena pinta, ¿eh?
Ah, vale.
Tiene que ser Chrome.
Vale, dos puntos.
Aquí lo que decíamos es Chrome, dos puntos.
Y veo que este Chrome se lo tiene que pasar directamente con string, ¿no?
Y a ver...
Claro, ¿qué pasa?
Porque un asterisco básicamente significa que esto va a estar ejecutándose cada minuto, ¿vale?
Entonces, el primero hemos dicho minutos, horas, día del mes, mes, día de la semana.
Creo que funcionaba así.
Si no lo podemos mirar...
Creo que en el artículo habla de esto.
Minutos, horas, día del mes, mes y día de la semana, ¿vale?
Entonces, si es asterisco, es todos los minutos.
Si es asterisco, es todas las horas.
Si es asterisco, todos los días del mes.
Si es asterisco, todos los meses.
Y si el último es asterisco, todos los días de la semana, ¿vale?
Básicamente es en cualquier momento.
Eso es interesante, ¿no?
Entonces, ¿cómo podríamos hacer que esto se ejecute cada X tiempo?
Pues lo que podríamos hacer, por ejemplo, a mí me gustaría que esto se ejecutase cada...
No sé, cada hora.
Pues esto sería...
A cualquier hora...
Ahora no debería ser así, ¿no?
A ver, cada 10 minutos debería ser así, ¿no?
¿Vale?
Vale, perfecto.
Y si lo hacemos cada 30, pues cada 30 minutos.
Cada first...
O 45.
Vale.
Bueno, podemos hacer algo así, ¿no?
Cada uno y 30 minutos.
Vale, perfecto.
Pues lo podemos hacer así.
Por ejemplo, aquí, ¿ves?
Aquí sería cada 10 minutos.
Aquí nos dice ya...
Lo podríamos hacer también una vez al día, que sería así, ¿no?
A la hora cero, al minuto cero, en la hora cero, pues se ejecutaría así.
Además ya nos lo dice, ¿no?
Ah, mira, está muy bien esto, ¿no?
Porque nos está diciendo, por si la lía es parda, ¿no?
Porque esto te puedes equivocar.
Entonces, esto sería, en el minuto cero, de la hora cero, se ejecutaría.
Por ahora creo que estaría bien si empezamos uno cada 5 minutos.
Por ahora lo voy a dejar, tata, 5, bueno, cada hora, cada 10 horas, a ver, cada minuto, oh, totó, las 10, las 20, vamos a dejarlo cada hora, ¿vale?
Por ahora vamos a dejarlo cada hora.
Pero a ver, ¿por qué?
Ah, no, claro.
Es a la cero, a la dos, a las cuatro, a las seis, vale.
Cada dos horas.
Vamos a dejarlo por ahora, sí.
No nos pongamos con eso ahora.
Ahora, lo que quiero aquí...
A ver, voy a mover mi cabeza porque creo que...
Ahora, me voy a poner ahí, ¿vale?
Entonces, lo que tenemos que hacer ahora es decirle la versión que queremos utilizar de Node.
Vamos a utilizar la 14x.
No sé si esto...
Vale, esperaba un array.
Vale, pues le dejamos un array.
Que en realidad esto tampoco es muy interesante.
O sea, este strategy, todo esto nos lo podemos romper.
Porque esto no lo necesitamos nosotros.
Lo que necesitamos aquí es decirle la versión que queremos.
¿Vale?
Y lo que queremos es la versión 14.x, que .x será cualquiera.
Entonces, esta estrategia matrix y tal, esto lo podemos quitar y así se simplifica.
Esto cada hora va a ser cada minuto, off, cero, dos, tal, tal...
Claro, es que si queremos que sea cada hora, tendríamos que ponerle el momento en concreto.
Debería ser el minuto cero, ¿vale?
Porque si no, eso sería cada minuto de cuando sea las dos.
¿Vale?
Si yo pongo esto...
Sí, sí, esto es importante, ¿eh?
Esto sería cada minuto que sea en cualquier hora, que sea la cero, el dos, el cuatro, el seis, el ocho, tal...
Entonces, aquí lo que deberíamos poner es el minuto cero, ¿vale?
De cualquiera que sea dividido entre dos.
Si queremos que sea las dos, sería así.
Si queremos que sea cada dos horas, debería ser así.
¿Vale?
Entonces, minuto cero cada dos horas.
Esto sería así.
Entonces, por ahora vamos a dejarlo así, pero esto luego lo cambiaremos porque nos gustaría que fuese bastante más...
Ahora para probar, que a lo mejor vamos a querer que sea cada cinco minutos o algo así.
Vale, entonces, en los steps, ya tenemos el checkout.
Vamos a usar aquí...
Esto no hace falta porque esto es el nombre que le da.
Vamos a tener aquí la versión que utilizamos y ahora aquí nos dice un poco lo que queremos que ejecute.
A ver, este...
Vamos a poner por ahora un install porque no vamos a tener package lock.
Y aquí vamos a poner update readme.
Ahora veremos de dónde sacamos esto, ¿vale?
Básicamente lo que estamos diciendo aquí es que queremos que en este paso haga el checkout, ¿vale?
Ahora veremos.
Este checkout es el que yo entiendo, no lo he visto.
Vale, checking out a repo.
Este es el que nos va a permitir hacer un checkout de nuestro repositorio, ¿no?
Tenerlo y poder hacer cualquier tipo de commit, a ver, commit, commit, commit, single.
Vale, dice que solo toma un commit, ¿vale?
Y aquí hay algunos ejemplos.
Vamos a ver si hay un ejemplo de lo que nos interesa.
¿Qué es esto?
Vale, esto es lo que nos interesa, ¿vale?
Lo que nos interesa es que...
Esto está haciendo algo muy similar a lo que queremos hacer nosotros, pero lo vamos a hacer de otra forma.
Aquí vamos a ejecutar nosotros cosas y aquí va a decir un date generate, bla, bla, bla.
Esto es un archivo que ha generado y luego haciendo esto lo está subiendo al repositorio.
Vamos a ver si es tan fácil o si realmente va a ser más complicado.
Luego la versión 2 que tiene aquí, esto porque de esta acción debía haber una versión 1.
A ver si lo pone por arriba.
No lo pone, pero debía haber una versión 1 que a lo mejor lo hacía de otra forma.
Al final las acciones de GitHub también tiene versiones.
Una versión 1, una versión 2.
Mira, aquí podríamos darle aquí y nos podría añadir esta acción, nos la podría añadir a nuestro repositorio.
Bueno, nosotros lo hemos hecho manualmente.
Pero lo interesante de esto es que lo que nos debería hacer es hacer un checkout de nuestro repositorio en el espacio de trabajo de esta acción, bueno, de este workflow.
Dice que por defecto solo toma cuando hace el fetch el último commit, pero bueno, esto para nosotros no es tan importante.
Y me extraña que no aparece por ningún sitio ningún tema del token.
Vamos a ver si descubrimos algo al respecto.
Yo creo que esto nos puede dar problemas y lo veremos más adelante.
Bueno, esto lo vamos a quitar.
Por ahora lo vamos a dejar así, aunque esto, ya os digo que esto nos va a reventar cosa mala, ¿vale?
Pero lo vamos a poner, lo vamos a añadir directamente a master, ¿vale?
Y vamos a ver, vamos a ver qué pasa con esto.
Mientras esto lo tenemos así, vamos a hacer una cosa.
Me voy a clonar este repositorio, ¿vale?
Me voy a clonar este repositorio en mi disco duro, ¿vale?
Y lo que vamos a hacer aquí es iniciar un proyecto con npm, porque lo que voy a querer es, pues nada,
tener un script que podamos ejecutar en la GitHub Action, ¿no?
Y de esta forma, pues el, anda, que la descripción está también.
Remake GitHub Profile.
Vale.
Entonces, el main está bien, que esté en el index.js.
Ese va a ser el punto de entrada de nuestro pequeño script.
Aquí lo que vamos a hacer es update readme.
Y aquí, a ver, os voy a explicar un poquito lo que estoy pensando, ¿vale?
Lo que estoy pensando es que voy a tener un template, una plantilla del readme, ¿vale?
Y voy a tener como unos placeholders que ahí los voy a cambiar por la información que me interesa.
De esta forma, el markdown del readme, eso va a ser siempre algo generado.
No lo voy a generar yo, yo no lo voy a tocar ahí, sino que lo que tocaré en realidad siempre será el template, ¿vale?
Entonces, lo que vamos a necesitar para esto, a ver, es que este readme que tenemos aquí,
este readme, que es el que teníamos, voy a crear otro que le vamos a llamar readme.tpl, por ejemplo.
Y este tpl lo vamos a dejar por aquí.
Y esto al final debería ser, me estoy pensando que esto, al final, esto debería ser markdown.
O sea, lo podemos dejar así, tal y como está.
Esto es un poquito difícil de leer, ¿no?
Vamos a poner esto.
Esto lo vamos a formatear.
No se puede formatear, no le gusta.
Bueno, no pasa nada.
No pasa nada.
Es que es un poco para que lo podamos leer, ¿no?
Que si no, aunque sea generado, después podemos tener...
Me encanta el hecho de que utilicen aquí atributos que están, este align, como para, ¿sabes?
Para trampear el poder, centrar directamente en GitHub.
Me parece muy curioso.
Vale, ahora cuando tengamos esto, lo que quiero hacer es aquí, esto es lo que sería el placeholder.
Aquí lo que debería venir sería last, por ejemplo, latest article.
¿Vale?
Esto sería el template.
Si os parece, voy a poner md.tpl.
Este es el template.
O sea, yo siempre que quiera hacer cambios, a partir de ahora, debería hacerlos aquí,
porque esto es lo que se va como a compilar.
Entonces, en nuestro index.js, lo que vamos a querer es leer primero el archivo, ¿vale?
Vamos a leer primero el archivo.
Vamos a ver en Node.js, Node.js, React, Files, Async.
Voy a ver qué versión tengo de Node, por cierto.
Una operación.
Vale.
A ver, que estamos por aquí, está la gente preguntando por el Chrome Job.
Dice, debería ser algo así.
Vale.
Eso, están comentando el tema del Chrome Job.
El tema del Chrome Job, el problema de ponerlo así, como comenta, ¿no?
De poner el asterisco al principio, es que si es el asterisco al principio,
eso significa que se va a ejecutar cada minuto.
Eso he sido yo al principio que tenía un error, ¿vale?
O sea, aquí, cuando hemos puesto el workflow, este,
esto debería ser cero o debería ser el minuto en concreto donde queremos que ocurra.
Porque si no, si aquí ponemos un asterisco, esto significa que cada minuto,
cada dos horas, o sea, cuando sean las dos, por ejemplo, ¿vale?
O sea, porque es cada dos horas, pero es en el cero, el dos, el cuatro, seis, ocho.
¿Qué pasa?
Que esto, si aquí dejamos un asterisco en el primer cero,
esto se va a ejecutar todos los minutos de la hora dos.
O sea, se va a ejecutar 60 veces.
A las dos se va a ejecutar 60 veces.
Y como solo queremos que se ejecutase una, ¿no?
Pues podemos hacerlo en el minuto cero.
A ver, esto aquí puedes poner el minuto en concreto que quieres que ocurra, ¿vale?
O sea, que no hace falta...
Y aquí dice, por la acción que ejecuta.
Esta va a ser el script que se va a arreglar y el cronjoe debería ejecutarse.
Vale, esto es muy bien, Andrés Lucas.
Eso, por ahí van los tiros.
Dice que los iconos salen muy pequeños, hay que ponerlos mínimo 48 píxeles.
Dice Luis.
Muy bien, Luis, muchas gracias.
Vamos a...
Lo vamos a cambiar.
Vamos, tal cual.
No sé a cuáles te refieres.
No sé si te refieres a todos en general.
O a...
O a algunos en concreto, pero los voy a cambiar todos.
Vamos a poner aquí 48.
Ah, y aquí se me ha olvidado uno.
De hecho, mira, luego haremos algo sobre esto, ¿vale?
Sobre esto vamos a hacer algo después para arreglarlo.
Vale.
Entonces, eso.
Estaba buscando cómo podíamos leer un archivo que ahora ya no me acordaba.
Pero esto, requirefs, fs.readfile.
Y vamos a ver si esto se lo traga así, tal cual.
TPL.
A ver, ¿cuál era el contrato que tenía?
El encoding.
El encode...
Este sería el...
Bueno, pero el callback...
A ver, vamos a utilizar las promesas, ¿no?
Fs.promises.no.
Debería tener promesas ya en la versión que estamos utilizando.
Así que vamos a utilizar las promesas.
Read.file.
Este.
Pa, pa, pa.
Promises.
¿Cómo se importaban las promesas?
Anda que...
Vale, eso.
Esto es .promises.
Exacto.
Es que antes, como hemos tenido tantos y uno era así, luego había que hacer el utils.promissify y tal,
ya uno ni se acuerda cómo se hace.
Vale, esta es la forma correcta, ¿vale?
Y como lo queremos hacer con promesas, pues ya está.
Vale, pues esto sería por un lado.
Vamos a ver.
Esto, el readfile, tiene el path y luego aquí en los options.
Ahí en los options.
Ya aquí le ponemos el content, como era el encoding, ¿vale?
Encoding y el encoding.
UTF8.
Vale.
Vamos a ver si esto...
Aquí tenemos esto.
Vamos a abrir aquí esto.
Y el index.
Vamos a ver.
Vale.
O sea, ya está.
Ya lo estamos leyendo.
No sé si tenemos...
A ver.
¿Qué versión he dicho que tenía?
La 12.13.
No sé si tenemos ya en Node 14.
Como vamos a utilizar la 14...
Voy a instalar la última de la 14.
Como vamos a utilizar la 14 en las GitHub Actions, voy a instalarme la última de la 14.
Porque además creo que la 14, Node 14 async await, top level, creo que tenemos el top level del async await.
Top level supongo 14.3.
Vale, fantástico.
Vale, pues vamos a fiarnos de que esto tiene ya esa async await.
Así que vamos a hacer esto, ¿vale?
Vamos a tener aquí el markdown template.
Hacemos una await de esto.
Y esto directamente nos lo petamos.
Ah.
Bueno, a ver.
Se está quejando, pero igual funciona.
O sea, igual esto es que no le gusta porque cree que no lo soporta.
Ah.
Pues no.
Nos han engañado.
Nos han engañado.
Nos han engañado.
Pero sí, yo pensaba que iban a poner soporte.
Double support.
¿Ves?
Es la 14.3, ¿eh?
Sí.
Qué versión estoy utilizando aquí.
La 14.5.
Pues yo pensaba que ya tenía soporte para...
Ah.
Vale, vale.
No, es que estaba detrás de un flag, ¿eh?
No fiarse.
No fiarse.
No fiarse.
Bueno, no pasa nada.
Quería hacerlo así, ¿eh?
Luego no me digáis.
No utilizas el async await.
Bueno, lo había intentado.
Markdown template.
Markdown template.
Vale, esto por un lado.
Ya tenemos el markdown template.
Hasta aquí, bien.
Esto está funcionando.
Esto cuando hacemos esto, perfecto.
Ahora, lo que necesitamos es tomar el latest article.
Para tomar el latest article vamos a utilizar un RSS parser.
Vamos a ver si este tiene buena pinta y si no, seguiremos buscando.
¿Qué es lo que vamos a hacer?
Mi blog, por suerte, tenemos aquí un RSS, ¿vale?
Yo tengo aquí un RSS y podemos leer, pues, todos los artículos y todo esto.
Y aquí ya puedo extraer tanto...
Bueno, no se ve mucho, pero aquí tengo el título y el link.
Pues es justamente lo que necesitamos.
Lo que podría hacer es utilizar RSS parser este, que vamos a instalar ahora mismo.
Vale, vamos a la terminal y aquí, pues, instalo el parser.
Y nada, lo único que tenemos que hacer es, pues, lo que está haciendo aquí, inicializarlo.
Vale, ya está instalado.
Vamos a...
Primero hacemos el require y luego hacemos esto.
Primero, esto sería para importar en la dependencia, ¿no?
El parser y esto es para iniciarla.
Que entiendo que aquí como parser igual puede recibir algún tipo de, no sé si de opción y tal,
pero no creo que tengamos nosotros ningún problema.
Nosotros seguramente podremos trabajar así directamente.
Bueno, mira, como tiene aquí la sync await, y sé que muchos os encanta.
¿Qué pasa?
Que, claro, como no tenemos top level await, no podemos hacer aquí una await directamente, ¿no?
Ya se está quejando.
Entonces, tenemos que hacer esta función que se ejecuta a sí mismo para crear...
O sea, esta sería la función que la estamos ejecutando, ¿no?
Una self-invoking execution method, bla, bla, bla.
O sea, una función que la estamos creando y a la vez que la creamos la ejecutamos, ¿vale?
Entonces, de esta forma podemos utilizar dentro de la await.
Así ya tendríamos el markdown template, ¿vale?
Aquí hacemos el await.
Luego aquí también...
Además, bueno, aquí igual sería mejor un promisor, ¿eh?
Pero bueno, lo vamos a hacer así.
Luego os explico lo del promisor, ¿vale?
Los problemas que podemos tener con eso y tal.
Vale.
Básicamente hacemos un await del parser.parse URL
y aquí estaría la URL nuestra, que en este caso, pues, es esta.
Bueno, de nuestro RSS, que es cortita.
Mi dudef la he pegado mal.
Vale, ahí está.
Así que se supone que ya aquí, en este feed, deberíamos tener mi feed.
O sea, mi RSS.
A ver que no le gusta...
No le gusta esto, ¿eh?
Vamos a ver si se queja.
Ajá.
Vale.
Este es uno de los problemas de no poner punto y coma.
Esto es súper interesante.
Vale, el problema que me está dando es que como esta línea...
Tengo un artículo sobre esto y lo quiero hacer y nunca lo termino.
Vale.
Como esta línea termina con un paréntesis y esta empieza con un paréntesis,
al no haber aquí un punto y coma, pues, se vuelve loco, ¿vale?
Porque se cree que esto es así.
Y no es así.
Así que tenemos que poner un punto y coma aquí delante.
¿Por qué se pone aquí delante?
Porque cuando no pones puntos y coma, pones el punto y coma delante de las excepciones.
Y las excepciones son líneas que empiezan con paréntesis o que empiezan con corchetes, ¿vale?
Bueno, también hay esta excepción, pero esta es más difícil que se vea, ¿vale?
Básicamente, en corchetes y tal, pues, debería empezar...
Cuando empieza una línea con estos signos, ¿vale?
Que son carácteres como que sintácticos, o sea, en la sintaxis no tendría sentido por sí mismo
y por eso tiene que ir a la línea anterior, pues, se le pone punto y coma.
Que si os gustamos punto y coma, pues los ponemos con punto y coma, ¿eh?
Pero bueno, para que sepáis, ¿no?
Que creo que es bastante interesante.
Ahora, esto sí que debería funcionar.
Bueno, ya está.
Tenemos aquí nuestro fit.
Esto ha sido un momento.
Bueno, es que esto, cuando uno utiliza dependencias, pues, nada, las cosas van voladas.
Vale.
Esto tiene que tener un array eventualmente, ¿no?
Tenemos items, o sea, aquí tomamos items y dentro de items, pues, tenemos que tomar el primero.
Así que vamos a article, bueno, latest article, esto lo tomamos de items.
Vale, esto es lo mismo, ¿eh?
Si esto lo ponemos que accedemos a la posición cero o hacemos esto, el de arriba, el de abajo, pues, es básicamente lo mismo.
Solo que aquí estamos haciendo una desestructuración y estamos accediendo directamente a la primera posición de items.
Entonces, también podríamos ir a saco, ¿no?
Y ya que aquí tenemos el último artículo, que es este objeto, este objeto de aquí, ¿vale?
Es lo que tenemos ahí.
Pues, podríamos acceder directamente a title y link.
Madre mía, ¿no?
O sea, locurón.
Locurón.
Bien, aquí estamos haciendo, es acceder al primer elemento del array items y del primer elemento estamos extrayendo title y link.
Que, a ver, tampoco hace falta que lo hagáis así, ¿vale?
Pero, bueno, que si queréis que sepáis que lo podéis hacer así.
Entonces, ya tengo title y link.
Pues, al final, lo que podría hacer ahora mismo, esto que había puesto así, igual deberíamos asegurarnos que esto no va a tener ningún problema.
Así que vamos a ponerle dos corchetes.
Esto es como muy típico, ¿no?
De poner algún tipo de contrato a lo que quieres hacer el replace.
Así que vamos a hacer esto y va a ser el latest article placeholder, por ejemplo, ¿no?
Y así, pues, los tenemos fácilmente, los tenemos, pues, localizados, ¿no?
Y es exactamente el mismo que tenemos aquí.
Así que, ahora, lo que deberíamos es construir el latest article markdown, que esto lo podemos hacer con un template string.
Con el template string lo que podemos hacer, a ver si me acuerdo, que siempre se me olvida, o sea, soy un desastre.
Vale, a ver, esto es así y esto es así.
Y aquí se pone el title y aquí se pondría el link, ¿vale?
Esto es lo que nos va a generar, os voy a enseñar un console.log para que veáis que no me estoy inventando absolutamente nada, ¿vale?
Voy aquí a la consola, node index.js, vale, fantástico.
Aquí tendríamos ya el último con markdown, ¿vale?
He creado un markdown con el título y el link.
Y ahora, lo que quiero hacer es coger y tomar este markdown template y lo que quiero hacer, pues, es un replace, ¿no?
Y el replace lo que tenemos que hacer es buscar el placeholder que hemos dicho y lo queremos cambiar por el que hemos creado.
Y con esto, ahora el markdown template, vamos a darle otro console.log para ir viendo paso a paso qué está haciendo, pues, me ha dejado fatal.
Ah, vale, me ha dejado fatal, ojo, ojo, me ha dejado fatal porque no he guardado los cambios aquí, en el readme.
No los he guardado, aquí está.
Los guardo y vamos a ver ahora.
Claro, porque aquí no me ha hecho el replace porque no lo ha encontrado.
A ver, intento dos.
¡Oh! ¡Pum! ¡Rotura!
Vale, ¿qué es que le ha pasado?
Ahora, ¿por qué no lo ha encontrado?
Hombre, esto sí que es lo que debería...
Este replace, le estamos diciendo esto.
A ver si lo he copiado mal, que soy capaz.
No, esto está bien.
Y esto, esto está bien también.
¿Vale?
Y este console... ¡Ay! Anda, que yo también.
Vamos a ver, es que el replace, esto devuelve un nuevo string, ¿vale?
Entonces, no es que muta.
Los strings no se pueden mutar, ¿vale?
Los strings... ¡Ay, que yo también!
A ver, los strings no se pueden mutar.
Por lo tanto, todos los métodos del string siempre van a devolver uno nuevo,
porque no lo pueden mutar.
No puedes mutar el valor de un string.
Si fuese un objeto o un array, pues sí podríamos haber tenido dudas
de si el método podría mutar o no.
Sobre todo en array, ¿no? Que hay el splice y el slice.
Entonces, en ese caso, como si se puede mutar, pues puede pasar.
Pero en los strings, no.
Todos los strings devuelven un string nuevo, ¿vale?
Vale.
Entonces, vamos a darle otra vez.
A ver qué pasa.
Ahora sí.
Ahora sí.
Ahora sí.
Ahora sí.
Vale.
Ahora sí que ya tenemos.
Pues ahora lo que deberíamos hacer es escribir este archivo, ¿no?
Vamos a hacer un write file y lo que vamos a escribir es el ritmi.md.
Y a ver cómo es el contrato de esto.
Ese es el path y el string que queremos escribir es new markdown.
Yo creo que así esto debería funcionar.
Quiero decir, no tengo claro si necesito el content encoding.
Pero vamos a ver.
Para asegurarnos que está funcionando.
Bueno.
A ver.
Voy a eliminarlo, ¿no?
O sea, voy a hacer que este ritmi.md esté vacío.
De forma que si lo genera, pues lo debería generar.
Y ya está.
Vamos a hacer node index.
Y vamos a ver.
Vale.
Pues aquí lo tenemos.
Ya tenemos el markdown.
Lo tenemos generado.
Esto es lo que va a hacer el script que queremos que ejecute el GitHub Actions.
Nuestra acción.
¿Vale?
Qué mono, Gabriel.
Solo pasé a darle like.
Saludos.
Qué majo.
Pues muchas gracias, Gabriel.
Te lo agradezco, hombre.
Tus likes son bienvenidos.
Los tuyos y los de todo el mundo.
Así que nada.
Dejad vuestro like si no lo habéis dejado todavía.
Muy bien, Sergio.
Efectivamente, el replace no devuelve el valor reemplazado.
No, no devuelve el valor reemplazado.
El replace lo que devuelve es el nuevo string con ese valor reemplazado.
O sea, no el valor reemplazado, sino todo el string.
Pero sí, sí.
Muchas gracias.
A eso estaréis súper atentos.
Lo que daría por tener la capacidad y la visión que tienes.
Eso sí que es un locurón.
Muchas gracias, Luis.
Pero qué va, ¿eh?
Pero si ya ves que voy poco a poco, hombre.
Voy ahí poco a poco.
Desestructuración.
Desestructuración.
Bueno, voy a leer.
Desestructuración.
Plus, plus.
Voila.
Te pasaste con ese tip.
Me imagino que el de la desestructuración, ¿no?
No sé si lo habéis entendido todos, ¿no?
Pero si lo habéis entendido, me lo comentáis y lo repasamos, ¿vale?
Toda esta información es oro.
María Angélica Useche.
Pues me alegro muchísimo y que le encuentres todo el valor del mundo.
Qué bueno el tip del punto y coma y al empezar la línea con paréntesis.
Sí, porque mucha gente no sabe por qué pasa eso, ¿no?
Pero era para que lo sepáis porque creo que es interesante entender cómo funciona el, ¿cómo se llama?
El JavaScript, no, el, ah, mira que he hecho un artículo.
El Automatic Semicolon Insertion, ¿vale?
Los semicolons, los puntos y coma en JavaScript, en realidad son obligatorios, pero a la vez opcionales.
Es un poco raro.
¿Por qué?
Porque son opcionales de que tú los escribas, pero son obligatorios de que estén ahí cuando se está evaluando el código.
Entonces, tiene un paso en el que añade automáticamente los semicolons.
El problema pasa cuando pasa esto, ¿no?
De que hay un paréntesis ahí que inicia la línea, porque cuando hay un salto de línea,
si la siguiente línea empieza por algo que en la sintaxis tiene sentido, entonces añade un punto y coma.
Pero, ¿qué pasa?
Un paréntesis si en la sintaxis no tiene sentido por sí.
Entonces, por eso, no le añade un punto y coma e intenta ejecutarlo con la línea anterior.
Es muy raro.
Pero, bueno, me alegro que os haya servido.
Bueno, punto a favor para el punto y coma en JavaScript.
Vale, punto a favor.
Y Luis Badiali dice, redes sociales quizá 24 píxeles.
Pues, ¿sabes qué?
¿Sabes qué sobre esto, Luis?
Porque con esto del tamaño me has dado una idea muy buena.
Y he pensado que estaría bien poner aquí size.
Y que podamos configurar...
Ay, no estoy enseñando mi pantalla, perdón.
Que podamos configurar los iconos, ¿no?
El tamaño de los iconos.
Y esto puede estar bien.
Así solo cambiamos en nuestro código en lugar de estar cambiando.
Y aquí podemos decir, pues, me has dicho 24 píxeles, ¿no?
Me fío, me fío de ti, ¿eh?
24 píxeles.
Pues ahora lo que podemos hacer es, igual que tenemos el playholder de esto, pues, los icons, size, placeholder...
Podemos hacer que sea esto.
Que, a ver, esto es totalmente innecesario y totalmente gratuito por mi parte, ¿vale?
O sea, esto lo hago.
Pero, ¿qué pasa?
Que puede estar interesante para no estar toqueteando todo el rato el 48, 48, 48, ¿no?
Y que eventualmente puede ser que de problemas.
Entonces, podemos hacerlo así.
Y, hombre, ya podemos decir, vale.
Por un lado, aquí tendríamos lo del markdown, ¿no?
Vamos a poner...
Esto sería put the latest article.
Y podríamos hacer aquí otro paso, que sería put the icon size to all icons, ¿no?
Entonces, aquí, pues, un poco lo mismo, ¿no?
A ver, que al final...
A ver, que lo pienso.
Los replace...
Mira, aquí tenéis otro tip.
Buenísimo.
Podríamos...
Voy a hacerlo de las dos formas, ¿vale?
Una forma sería esta, ¿no?
Podría hacer que esto fuese un let y el new markdown, pues, lo podríamos ir machacando.
Y el markdown template, pues, lo reemplazamos.
¿Y qué hacemos?
Buscar todos los playholders del icono y ponemos el icon size.
Y esto, pues, en principio, si no he hecho nada muy raro, esto debería funcionar.
Que no ha funcionado.
No ha funcionado porque...
Ay, ¿por qué?
Porque he puesto...
O sea, no he puesto el template.
Esto lo debería poner aquí.
Es que lo he puesto en el markdown.
¿Vale?
El icon size este, este playholder, debe ser en el template, ¿vale?
Que no se nos olvida.
Aquí.
Pam, pam, pam, pam, pam, pam, pam, pam, pam.
¿Vale?
Esto aquí.
¿Vale?
Entonces, ahora...
Ahora sí.
Ahora sí que debería funcionar.
Vamos al markdown.
Y no me lo ha cambiado tampoco.
¿Qué he hecho?
¿Por qué no me lo cambia esto?
Esto...
¡Ah!
Vale.
Me habrá cambiado el primero.
¡Ah!
Interesante.
Mira, interesante.
El string replace tiene un campo que ahora a ver si...
Bueno, podemos hacer dos cosas.
Uno, el replace y el replace all.
Seguramente sería más interesante utilizar el replace all.
Pero podríamos utilizar con el replace una regex para asegurarnos que cambiamos todos,
no solo el primero.
Claro que en este caso hay un fallo en el sentido de que estamos cambiando solo el primero.
Si os fijáis aquí, este width sí que me lo ha cambiado, pero el siguiente no.
Entonces, deberíamos utilizar el replace all.
Eso por un lado.
Eso podría ser una.
La otra podría ser...
Para tomar toda la...
A ver.
Lo que me gustaría...
Replace all.
La regex.
Vale.
Podríamos hacer una regex.
¿Vale?
Para buscar de forma global y además que sea en case insensitive.
No tengo dudas.
Bueno.
¡Hombre!
A ver.
El replace all.
A lo mejor no.
Soporta node.
Efectivamente.
Vale.
Pues lo vamos a tener que hacer con este.
Venga.
Vale.
Pues lo que podemos hacer aquí, en lugar de utilizar esto, si no me equivoco, es que podríamos...
¡Guau!
Es que ahora meterse con regex y yo también...
¿Cómo la lío?
Vale.
A ver si esto funciona tal cual.
Si esto le gusta.
Y si no, nos pelearemos un momento con las regex.
¿Vale?
Básicamente, con esto, la G sería global y la I sería case insensitive.
O sea, que sería...
Que machearía tanto...
Bueno, vamos a quitárselo.
Porque total, el placeholder debería ser...
Fuera.
Ya está.
Vale.
Vamos a ver ahora.
Vale.
Ahora sí que ha funcionado.
Pero, claro.
¿Qué pasa?
Que hemos tenido que utilizar la regex.
Ahora, además, veo que este sí que no ha funcionado.
En este caso, tampoco pasa nada.
Porque este se lo podemos dejar así.
Y debería funcionar sin problemas.
¿Vale?
A ver.
¡Uy!
No.
A ver ahora.
¿Por qué no me está cambiando esto?
Ahora no me cambia este.
A ver.
Aquí tengo el new markdown.
Y me reemplaza.
Y luego el new markdown.
A ver.
A ver.
¿Qué estoy haciendo?
¡Ay!
Es que...
Vale.
Lo que está pasando es que estoy tomando...
Cuando hago el replace, estoy tomando otra vez el template original.
¿Vale?
Igual me lo estáis diciendo todo esto en los comentarios.
¿Vale?
Y no...
Vale.
A ver.
¿Qué me dicen por aquí?
Si no...
Me dice...
Esto, sin comillas.
Sí, sí.
Lo he hecho sin comillas, ¿no?
El tema.
Vale.
Os referís al otro.
A este.
Bueno.
No.
O sea...
Al final lo podemos dejar así, sin comillas.
Y este...
Así.
También con el G.
Sin comillas.
¿No?
Perfecto.
Sí.
¿Qué más?
Sin comillas.
Tienes que encadenar la variedad del...
Exacto.
Aquí está Sergiedo.
Sergiedo está...
Está pila, ¿eh?
Está ahí.
Atento.
Muy bien, Sergiedo.
Muy bien.
Así...
Así mejor.
Fantástico.
Muy bien.
Efectivamente.
El problema es que aquí estoy utilizando el...
El primero, el original.
Debería utilizar otra vez este, ¿vale?
Entonces, ahora sí.
Si hago el node index.js y vamos al readme, ahora sí tengo los artículos y tengo los iconos
con el tamaño.
Perfecto.
Ahora sí.
Entonces, lo que os quería comentar es que esto puede ser un poco caótico, ¿vale?
Así que lo que se puede hacer es, básicamente, en lugar de tener un let y hacer el replace y todo el rato,
haríamos esto solo una vez.
De forma que lo que podríamos hacer es concatenar los replace.
Estos dos replace, como al final lo que devuelve el replace es un string, puedes concatenarle a un string,
un string que tiene el método replace.
Por lo tanto, puedes concatenar otra vez, llamar al replace, pero lo va a hacer con el string que está devolviendo.
De esta forma, pues, a ver, esto lo haríamos aquí, ¿no?
Y ya lo tendríamos.
Y así los replace, pues, quedan más limpios.
Además, solo utilizamos una constante y tal.
Vale.
Vale, pues esto, esto ya está.
A ver, esto es una prueba.
Esto es una prueba.
Lo importante de esto, ahora, lo importante es que no vamos a comitear el readme, ¿vale?
Y voy a crear un gitignore, porque ya veo aquí que me está metiendo de todo.
Vamos a poner el package.log.json también.
No me interesa que esté.
Vamos a ver ahora.
Vale, ahora está mejor.
Ahora esto, lo que, por cierto, no sé si se veía muy pequeño.
Espero que no, ¿vale?
Pero nadie me ha dicho nada, así que, vale, fantástico.
Entonces, lo que vamos a querer hacer es comitearlo todo menos el readme.md.
¿Por qué?
Porque el readme.md, aparte de que ahora, claro, ahora está arreglado, porque lo hemos probado en local
y esto lo que queremos es que nos lo ejecute GitHub Actions.
Entonces, esto lo vamos a dejar como estaba antes o mejor todavía, mejor todavía, ¿vale?
Voy a eliminar su contenido, ¿vale?
Voy a eliminar su contenido.
Voy a hacer que esté vacío de forma que sepamos con seguridad que si lo vemos con contenido
es que hemos ido nosotros y no otra persona.
O que ya estaba así, ¿no?
Que también es.
Vale, entonces, esto ya estaría.
Ahí estarían los playholders.
Aquí tendríamos esto.
Replace all playholders with info.
Vale, vale, vale.
Estoy pensando.
Vale.
Entonces, vamos a subir todo, ¿no?
El package.json.
Tiene todas las dependencias.
Solo utilizamos RSS parser.
Update.
Vale, aquí faltaría el script.
Importante.
Aquí faltaría el script.
Aquí vamos a llamar a node index.js.
O sea, tampoco tiene mucho.
Esto sería por un lado.
Aquí tenemos el index.js.
Aquí tenemos gitignore.
Todo perfecto.
¿Sí?
¿Sí?
Vale.
Pues lo subimos todo.
Vamos a ello.
Vamos a ello.
A ver qué pasa.
A ver qué pasa con mi primer GitHub Action.
Add new script to change or to update with me with a cron.
Yo.
¿Vale?
Sí.
Todo para arriba.
Venga, vamos a saco.
Hago un push.
¿Vale?
A ver qué comentan por aquí.
Ahora ya no es necesario el punto y coma.
Nunca.
Nunca es necesario un punto.
O sea, los puntos y coma siempre han sido.
O sea, es que es difícil.
¿Vale?
No son obligatorios de escribir.
¿Vale?
No son obligatorios de escribir.
Pero sí son requeridos para el engine, el motor de JavaScript que interpreta JavaScript.
Pero tú no estás obligado a escribirlos.
Y en este caso, pues por lo que he comentado antes.
En este caso sí, porque digamos que el motor que añade los puntos y coma automáticamente no es capaz de entender este caso.
Y ya está.
Por eso.
Vale.
Ya he subido el código.
Voy a ir cerrando todo esto.
Pam, pam, pam, pam, pam.
Fuera, fuera.
¿Y qué más?
Pues aquí GitHub y vamos a mi perfil.
¿Vale?
Por ahora esto debería estar igual, ¿eh?
Vale.
Está al ritmo y vacío, que es lo importante.
Bueno, importante, lo interesante.
Y ahora vamos a ver.
Me gustaría ver si se puede forzar.
¿Sabes?
O sea, ¿se puede ejecutar?
No.
No se puede ejecutar.
O sea, yo no podría decirle, oye, ejecútate.
Qué lástima.
Porque así al menos podríamos probar.
Bueno, igualmente creo que tenemos que modificar, ¿no?
Algo.
Me da la sensación.
Porque habíamos puesto ahí lo del script y todo esto.
Y creo.
Ahora, no sé.
Antes lo podía editar súper bien.
Y ahora.
Bueno, a ver.
A ver si ahora.
Ah, vale.
Aquí me lo deja bien.
Vale.
¿Por qué?
Porque este update readme lo he puesto bien.
El script.
El script update readme.
Vale.
Entonces, entiendo que va a hacer el npm install.
Voy a ejecutar npm run update readme.
Y qué, ¿no?
Porque, claro, esto...
Esto está muy bien.
Pero esto nos va a generar el archivo.
O sea, que lo va a generar, lo va a generar.
Pero el tema es, a mí lo que me gustaría, además, no es solo generarlo, sino es subirlo.
Es lo que habíamos dicho antes.
Vale.
Pues vamos a probar esto.
El actions checkout este.
Que habíamos visto por aquí un ejemplo del commit.
Y lo que no estoy seguro...
A ver.
Yo entiendo que sí, ¿no?
Porque aquí dice push up commit using the built-in token.
O sea, entiendo que el token ya nos vendría de gratis.
Vamos a ver si este...
Ay, sí.
No veis con mi imagen.
Me pongo arriba...
Pum, me muevo.
Gracias por avisar, Luis.
Vale.
Entonces, básicamente esto se generaría antes.
Entonces, mi pregunta, en este caso...
¿Sabes?
Porque yo hago el checkout.
Y esto es...
Uso esto.
Luego, lo que hago es un run.
Hago un run de todo esto.
Que esto, básicamente, me lo podría copiar casi igual, ¿no?
Aquí se pone esto para tener en multilínea.
Esto lo vamos a poner aquí.
Voy a poner ahora, evidentemente, mis campos.
Esto es username.
Esto sería...
A ver.
Que esto no le gusta.
Can read implicit mapping part.
A colon is missed.
Pues aquí no tiene ningún colon.
Ni nada.
Bueno.
Igual es que es uno más, ¿no?
O sea, es aquí.
Vale.
Sí, era...
Esto del jam.
Jam es peligroso porque los tabuladores y tal tienen bastante peligro, ¿vale?
Entonces, este sea mi nombre de usuario.
Este sería mi email.
¡Ay!
Me he ido.
Perdón.
Aquí.
Este sería mi email.
Entonces, añadiríamos...
A ver.
Aquí podemos decirle directamente que queremos añadir el readme.
Y aquí, pues, update readme with latest info.
Puedo poner bot.
No sé.
Aquí pone push como si el push ese lo hiciese como si nada.
Pa, pa, pa.
No sé hasta qué punto esto me lo va a hacer en cualquier sitio.
Esto me da un poco de grima, ¿eh?
No sé.
Bueno.
Vamos a ver.
Lo vamos a probar y ya está.
Ahora, lo importante es que yo entiendo que esto debería ir antes.
O sea, estos steps, este use, este, entre los pasos que queremos hacer, esto iría antes, ¿no?
O sea, primero, primero usamos Node con esta versión, hacemos un mpm install, ejecutamos el script mpm runup de readme, ¿no?
Esto nos debería generar el readme.
Lo que estoy pensando es, claro, si yo hago esto...
A ver, igual no hay ningún tipo de problema.
Entiendo, alguien me decía aquí origin master.
A ver, en principio, lo vamos a dejar, origin master, a ver qué.
En principio yo veo que todo esto está bien.
Lo que, cosas que me preocupan, que yo haga aquí un checkout, si esto me hace un checkout, que el readme que he creado aquí me lo quite, ¿sabes?
Me diga, ah, pues, adiós.
Adiós a este archivo que no sé qué es.
Eso, eso es una cosa que me preocupa, porque aquí, claro, aquí como este lo genera aquí, pues claro, fantástico.
Luego, otra cosa que no sé muy bien es si esta acción, el contexto de ejecutar código, solo puede ser dentro de esta acción.
Por ejemplo, este npm install y tal, es porque aquí sí que tengo node, pero si yo aquí ejecuto npm, ya no tengo node.
Eso no tengo ni idea.
Eso hubiera sido interesante saberlo.
Pero bueno, por ahora, lo que vamos a hacer, aquí vamos a decir que lo ejecute cada dos minutos.
Porque ya que veo que no me...
Joder, me lo he hecho.
Eso es que cada dos minutos lo va a ejecutar.
Esto puede ser un locurón, ¿eh?
Porque, pero bueno, vamos a estar atentos a ver si está haciendo lo que debería estar haciendo.
¿Vale?
Lo estoy comitando a master, aquí a saco, a ver qué pasa con todo.
Y ya está.
Aquí lo que he hecho en falta y me extraña, la verdad, es el no poder, pues, decir, oye, quiero ejecutar este workflow.
¿Sabes?
Es obligar a que se ejecute el workflow.
Eso creo que hubiera estado bastante bien.
Y me sorprende que no se pueda hacer.
Porque esto es para crear otro, claro.
Y me sorprende no poder forzarlo.
Pero bueno, vamos a ver.
Vamos a ver.
Vamos a ver si en dos minutitos...
Bueno, madre mía.
Aquí.
Muchas gracias, Sergio.
Sergio Serrano.
Madre mía, todos los viernes no fallan ni una.
Hola, crack.
Cada viernes se aprende algo nuevo.
Y muchísimas gracias por aportar.
Te lo agradezco un montón.
Todos los viernes no fallan ni una, Sergio.
No sé qué hacer.
No sé cómo agradecértelo.
Bueno, te lo agradezco de corazón.
Muchísimas gracias, Sergio.
Eres muy crack.
Ya queda menos.
Ya queda menos para el gato.
El gato stream deck.
Quedan ahí menos.
Ya estamos...
Creo que faltaba...
A ver.
Voy a poner por aquí.
No sé.
30 dólares.
Una cosa así.
Ya queda muy poco.
Este.
Justamente para tenerlo aquí e ir cambiando de cámara.
Cuando me vaya moviendo y tal.
Y bueno, mostrar más cosas.
No sé.
Es que tiene tantos botones.
Esto le puede hacer de todo.
Bueno, vamos a ver si esto se ha ejecutado.
Pero que veo que no.
Veo que esto no se está ejecutando.
No se está ejecutando.
Y vamos a ver por qué.
¿Vale?
Vamos a ir al GitHub Action este.
Vamos a ver qué...
Porque dos minutos...
Mira, justo han pasado dos minutos.
O sea, o está a punto o qué.
A ver.
A ver, ¿alguien?
A ver, Sergio.
A ver.
5 dólares de Sergio.
Solo falta el Patreon.
Muchas gracias, Sergio.
La verdad es que sí.
Me quiero hacer un Patreon.
Y quiero hacerlo con cosas que puedan ser interesantes.
Hacer mentorías y cosas así.
Y me lo voy a añadir.
Muchas gracias, Sergio.
Eres muy crack.
Y de verdad no sé cómo agradecértelo.
Muy pronto el Patreon.
Para que me podáis apoyar.
Y además, pues, ayudaros con lo que sea.
Muchas gracias, Sergio.
Eres muy crack.
Te lo agradezco.
A ver, ¿qué me comentáis?
Andrés Lucas dice...
Ya estás trabajando en Master.
Lo pone al principio del Workflow.
Origin Master tendría sentido si quise hacer Workflow para todas las ramas.
Efectivamente.
Aunque tengo que decir que nuestro Workflow no lo pone.
No pone que es para todas las ramas.
Eso...
O sea, si lo vemos...
Por aquí.
No hemos puesto nada que sea solo para Master.
¿Vale?
O sea que...
A ver si este puede ser un problema.
Cosa que dudo.
Esto por un lado.
También es un poco problemático que...
Claro.
Han pasado tres minutos.
No sé si es que no ha coincidido exactamente.
Vamos a darle un poquito más.
A ver de tiento.
A ver si esto funciona.
Pero si no, hombre.
Estaría bien el poder ver mejor el tema de los Geekha Packs.
O sea...
Cuando se ejecutan realmente...
O sea...
A lo mejor el Chrome Job no ha coincidido.
Y puede ser.
O sea...
Sería muy raro, pero...
No sé.
Si no, ahora lo miramos e intentamos ser un poquito más...
Eh...
Bueno.
Forzarlo más.
¿Vale?
A ver.
Creo que solo...
Creo que solo puedes poner al final el run con lo del git.
Creo que puedes solo poner al final el run con lo del git.
Con lo del git.
O sea que no puedo poner run con lo de...
Eso no lo he entendido.
Con el otro...
Sí, no.
Con el otro sí.
Yo creo que sí, ¿eh?
A ver.
Mirad.
Esto todavía no funciona.
Vamos a darle un poquito más de tiempo, pero...
A ver.
El otro era actions note, ¿no?
Setup note.
Que en este caso es el que estamos utilizando aquí.
Que es el setup note.
Versión 1.
Bueno.
Entonces...
A ver.
Este setup usa esto con la versión 12.
Vale.
Con la versión 12.
Bueno, yo he puesto 14.
Lo voy a poner exactamente igual a esto.
Por si pasase algo.
Y de paso vamos a cambiar un poco lo del schedule, ¿vale?
Vamos a poner que sea cada minuto.
Vamos, a saco.
Estaremos atentos ahí para cambiarlo.
El node version, que he puesto 14.x, vamos a ponerlo como un string, ¿vale?
A ver si es esto.
Y esto del run que antes hemos visto.
A ver.
Aquí sí que se puede utilizar el run.
Usage.
Check.
Claro.
Es que yo creo que esto debería poder...
Claro.
Run con la versión...
¿Ves?
Esto es un ejemplo utilizando justamente los dos que queremos.
El checkout y el otro.
Y yo entiendo que al final tú arriba del todo pones los usos, entiendo, y ya estaría.
O sea, eso lo deberíamos tener.
Así que, a ver.
Por otro lado, vamos a ver si esto...
Nada.
Esto no ha funcionado nada, ¿eh?
No sé qué ha pasado, pero...
Vamos a ver una cosa.
Teníamos por aquí este ejemplo.
Que este justamente hablaba de hacer el cronjob.
Jobs stale.
Bueno, stale, ya ves tú.
Runson.
Esto lo tenemos.
Steps.
Bla, bla, bla.
Eso lo tenemos.
Esto, por ejemplo, pues sería un poco lo mismo, ¿no?
Que tiene el cron.
A ver si nos hemos equivocado.
No.
Schedule.
Con el cron.
Es que el yaml, como es tan...
Es tan pijo a veces de que te puedes equivocar con una cosita y la lia a schedule.
Bueno, aquí dice que se ejecutaría cada minuto.
Luego, los steps.
A ver si aquí los steps los hemos puesto también.
Steps debe estar uno a la derecha.
Ojo.
Steps.
No, esto está bien, ¿no?
El uses.
A ver, a ver.
A ver.
Porque steps pone.
El uses tiene que estar a la derecha.
O sea.
Este.
Así.
Así.
Esto debería ser así.
Según he visto también aquí, ¿no?
Dice steps.
Y justo debajo tenemos uso y tal.
Uso.
Y el with version.
Esto sí que no tiene ningún tipo de tal.
Y ya tenemos el run.
Y ya tenemos esto.
Decimos usamos.
Y esto.
Esto sería lo más problemático.
Entre comillas.
Pero yo veo que está bien.
Vale.
Hacemos que el cron ahora sea todo el rato.
Y tal.
Venga.
Vamos a ver.
Si esto.
No sé.
Una cosa que se me ocurre.
Claro.
Es que yo me he fiao del hombre este.
Yo me he fiao del hombre este.
De.
¿Sabes?
Yo he pensado.
Vale.
Esto funciona seguro.
Pero.
No sé.
No vaya a ser que esto no funcione tan.
Tan fácil.
Como dice el hombre este.
¿Sabes?
Y no funcione el cron.
Ah.
Mira.
Ojo.
Ojo.
Ojo.
Que sí que ha funcionado.
Ojo.
Ojo.
Lo tenemos.
A ver.
Hace dos minutos.
O sea.
Que ha funcionado anterior.
Bueno.
Algo ha petado.
No importa.
Al menos ha funcionado.
El workflow que ha ejecutado es el de antes.
O sea.
Que sí que funciona esto.
O sea.
Ha funcionado el de antes.
Vale.
Pero ha petado con.
¿Qué ha petado?
Ha petado.
Online one.
Process completed.
O sea.
En la línea uno.
Check failure online one.
En el build.
Mira.
Cuando ha ejecutado el mp on run update readme.
No ha encontrado el archivo.
No ha encontrado el archivo para hacer el package json.
Claro.
Y esto.
A ver si es.
Claro.
No switch file.
No.
Es que no ha encontrado nada.
Claro.
No vaya a ser.
Esto es lo que estaba pensando antes.
Pero he pensado.
Bueno.
No.
No puede ser.
Porque antes lo he visto aquí.
En el de note.
Que hace aquí un checkout antes.
Y estaba pensando.
A ver si es que.
Tiene que hacer primero el checkout.
Que es lo que os he comentado.
¿No?
Porque si no encuentra el archivo.
No encuentra que tiene un package json.
¿Cómo puede ser?
¿No?
O sea.
Esto no tiene mucho sentido.
Así que.
A mí lo que me da.
Es que.
Vamos a cambiar esto.
Y este paso que estaba haciendo aquí.
Esto.
Lo vamos a hacer arriba del todo.
Aquí.
Porque yo creo que esto lo tiene que hacer antes.
O sea.
Yo creo que sí que esto tiene un mismo contexto.
Y al final.
Lo que nos está diciendo con esto.
Es.
Primero hago el checkout.
Luego pues puedes ejecutar note y tal.
Esto da igual un poco el.
El orden.
Pero lo que no podemos hacer es un npm install antes.
Eso es lo que me da a mí la sensación.
¿Vale?
Que no lo podemos hacer antes.
Así que.
Venga.
Vamos a ver si esto funciona ahora.
Este es el que hemos visto antes.
Voy a eliminarlo.
Pero me sorprende que tiene como cierta latencia.
¿No?
Como que.
Yo pensaba que sería más.
Como Travis.
Que es más inmediato.
Y no lo es.
No lo es.
Bueno.
Mientras esperamos.
Vamos a comentar por ahí.
Por ahí dice que no se puede esforzar.
Vaya por Dios.
Efectivamente.
¿Qué más?
¿Qué más?
¿Estaría genial el Patreon y el mentoring?
Pues sí.
Muy pronto.
Me voy a poner con esto.
Cuando llegue a los 10.000.
Me hago el Patreon.
Ya lo dije.
Y será así.
Sí, Patreon.
Dice Emanuel Villanueva.
Oye, muchas gracias por esos 200 ARS.
ARS.
¿Qué eran?
¿Qué eran los ARS?
A ver.
Eran los...
Eran argentinos.
Pero eran...
Eh...
¿Pesos?
Vale.
Los argentinos son los pesos.
Pesos argentinos.
200 pesos argentinos.
Muchas gracias, Emanuel.
Te lo agradezco un montón.
¿El alineamiento debajo de steps es correcto?
Buena pregunta.
Porque se hace difícil, ¿eh?
Pero creo que sí, que era correcto.
Porque al final sí que se ha ejecutado el workflow.
Lo que veo es que le cuesta como arrancar, ¿no?
O sea, le cuesta...
Ah, mira.
Se puede hacer un rerun.
Pero claro, solo cuando ya se ha ejecutado una vez.
Y lo raro es eso, ¿no?
Que aunque he puesto que sea cada minuto, o sea, no lo hace.
O sea, es muy raro.
No sabía nada de lo que explicas.
Ya me pica las manos para replicar todo.
Jejejeje.
A ver.
Sí.
Como habéis visto, yo tampoco lo tenía preparado.
Y, bueno, prefiero que lo aprendamos juntos porque me parecía interesante.
Y, bueno, porque así surgen cosas nuevas que también de vez en cuando está bien.
Igual falla por la paralelización.
Buena observación.
Yo creo que es porque hay que iniciarlo antes, ¿no?
Me parece.
Exacto.
Sergio, que están todas, por lo que veo, dice, el check-up no debería ser el primer paso.
Primero está la node y luego ejecuta el script.
Pues vamos a probar eso.
Bueno, me refiero al user, no tiene que ir antes del run que ejecute los commands.
¿Puede ser?
Así.
No entiendo qué estás haciendo, pero se he vertido.
Bueno, básicamente lo que estamos intentando es actualizar el Ritmi que hemos creado al principio,
pero de forma dinámica.
De forma que no tengamos que estar pendientes y cada minuto, bueno, cada minuto en este caso,
pero mejor cada seis horas, pues actualice toda nuestra información en el Ritmi.
¿Vale?
¿Qué más?
¿Qué más?
Ah, a la izquierda.
Mira la build.
A la izquierda, mira la build.
A ver, ¿a la izquierda de qué?
No veo.
Veo aquí releases, packages, veo en actions, node, que además me extraña.
Esto me tiene sorprendidísimo, ¿eh?
Lo que tarda, por más que dice, que parece que dices, ¿no?
Uno cada momento, o sea, cada minuto.
Y tarda bastante.
Es como raro, ¿no?
Bastante extraño.
A la izquierda de la build, euroca, es el check-out, no tiene código, va primero, eso mismo.
Y sí, Luis, son pesos argentinos.
Vale, entonces, pues nada, estoy esperando aquí porque no, tarda como un montón.
O sea, el hecho de que no te dé feedback, este es el que, bueno, ahora porque lo he borrado, el anterior.
No sé si es porque hay algún tipo, vamos a verlo, actions, cuando ha soltado el error en la pestaña build.
Vale, ahora, pues cuando haga el nuevo, que espero que lo haga eventualmente, si no hemos roto nada.
De hecho, estoy pensando, una cosa que estoy pensando es en cambiar el cron.
En lugar de utilizar un cron, podríamos hacer el push al hacer master.
O sea, por ejemplo, un push, un push, tú, tú, tú, pues hacerlo un push, ¿no?
Y al hacer un push, pues como tengo que hacer un push del propio workflow, esperar que eso lo vaya a tomar, ¿no?
Y ver si funciona.
Luego, yo me imagino limit free, que hay algún tipo de límite.
Dice concurrent jobs 20.
Hombre, no, yo no estoy haciendo 20 concurrent jobs.
O sea, que esto supongo que también para lo que son gratis, esto está limitado en el sentido de que a ver cuando se puede utilizar, ¿no?
A lo mejor la máquina, mira, ahora está funcionando.
Que cuando la máquina esté lista, o sea, y acaba de empezar, y hace un buen rato.
O sea, me estoy bastante sorprendido.
Esta schedule, o sea, esto de que esté schedule no lo puede decir inmediatamente para no ponernos tan nerviosos.
Bueno, ahora está haciendo el MPM install y petar no ha petado de primeras.
Ojo, ojo, ojo, ojo.
Ha funcionado.
Ha funcionado, ha funcionado, vale, ha funcionado, ha funcionado, ha funcionado, ha funcionado, ha funcionado, ha funcionado, ha funcionado, ha funcionado, ha funcionado.
Ha funcionado, vale.
Vamos a ver.
Que ya es que pensaba que no confiaba a mí mismo.
Vale, la imagen la tengo que arreglar.
Pero aquí podemos ver cómo lo de crear tu perfil en GitHub, este es el último artículo y lo ha creado al vuelo.
Lo ha creado al vuelo, ¿vale?
O sea, ha funcionado todo perfecto.
Venga, ha hecho, este es el, este es básicamente el workflow que ha funcionado bien.
Tengo que eliminar ahora porque se está ejecutando cada minuto.
Pero lo que ha hecho es hacer el checkout, ¿vale?
Importante, hemos aprendido algo.
Yo no tenía ni idea, os he avisado, no os he engañado, de que no tenía ni idea de GitHub Actions.
Entonces, os prometo, el primero que hago, o sea, que lo hemos hecho juntos, pero bueno, me ha parecido súper interesante y he aprendido algunas cosillas de cómo funciona.
Entonces, las acciones, al final, tú puedes hacer un run de las acciones, aquí como lo hemos hecho, a ver, para enseñar el workflow y explicar un poco cómo está esto.
Claro, claro, aquí en Steps, tú aquí puedes poner todo lo que tienes que utilizar.
No significa que tienes que decir, uso esto, hago esto, uso esto.
No, no funciona así.
O sea, que al final aquí, cuando dices uses, esto al final lo que hace es una acción en concreto.
Y de esta forma, el checkout, lo que vas a tener es todos los archivos del repositorio disponibles en esa acción.
O sea, ese workflow.
Así que lo primero que tenemos que hacer es el checkout.
Entonces, ha hecho el checkout, ha tomado el último commit, que es este que había hecho.
Al final, como no necesitamos un histórico, pues bueno, ha hecho el fetching de todos los archivos.
Perfecto.
Luego, ha ejecutado el setup node.
Me encanta lo rápido, lo rápido que es.
Es muy rápido.
Lo ha hecho en muy poco tiempo.
Vale.
Al final, ha hecho el setup node, que nos ha instalado npm y node, por supuesto, la 14.5.
Ha hecho el npm install.
Rapidísimo.
Ha ejecutado nuestro script, el que hemos hecho antes, ¿no?
El update readme.
Ha hecho el node index.js, como hemos hecho antes en local.
He configurado para que aparezca que es mi commit.
De hecho, debería aparecer mi cara.
Aquí está.
Aquí está.
Aquí estoy.
He hecho yo este commit, pero desde un GitHub Action.
Me parece brutal.
Dentro de lo que cabe, no ha sido tan, tan complicado.
Entonces, ¿esto qué ha hecho?
Esto ha creado un readme.md utilizando la plantilla que hemos visto antes, ¿no?
La plantilla esta que tenemos aquí, esta plantilla.
Vale.
Ha recuperado el último artículo, que aquí podría recuperar el último tweet, recuperar el último vídeo de YouTube, que lo pienso hacer.
Todo esto lo voy a hacer.
¿Vale?
Y al final, bueno, he configurado todo el tema de cómo quería hacer el commit con mi información.
Ha hecho el commit.
Y ya está.
Esto ha hecho una limpieza.
Me imagino de cachés y cosas así.
No tengo ni idea.
O de la configuración de GitHub.
Y ya está.
Y por lo que veo, ha tardado.
Claro, ha tardado.
Esto también es un poco, entre comillas, ¿vale?
3, 4, 8, 13, unos 20 segundos.
Claro, ha tardado 20 segundos.
El problema es que ha tardado 3 minutos en empezar.
O sea, mira, aquí lo pone.
O sea, aquí pone 19 segundos ha tardado en ejecutarse.
Pero, claro, ha tardado 3 minutos.
O sea, bueno, no.
Aquí no pone cuánto ha tardado en empezar.
Pero lo que sí que sé es que ha tardado.
De hecho, esto hemos dicho, que lo ejecute cada minuto.
Y aquí cada minuto esto no se está ejecutando ni en broma.
No sé realmente por qué.
No sé si hay algún tipo de límite o de cola.
En el sentido de cuando hay una máquina libre, entonces esto está en una cola.
Sinceramente, me gustaría que hubiese mejor información.
Que yo fuese a Actions y dijese, oye, esto está en cola, por ejemplo.
Y me sorprende que no aparece.
Pero, bueno, lo que me parece brutal es que aquí lo tenemos.
Este es el readme con el template.
Y aquí podemos ver el latest article.
Pues esto tiene el nuevo.
Y esto lo podríamos hacer con cualquier cosa, con cualquier información.
Incluso con las estrellas de GitHub, seguidores de GitHub.
Al final les llamaron a API, recuperar esa información y mostrarla.
Decidme si no estáis contentos.
Vamos, decidme si no estáis contentos como yo.
Porque ha sido un camino para estar juntos.
Mira, Luis, le has tallado la cabeza.
A Emanuel Villanueva, sale el wash hands, wash hands.
Porque el programa que tengo cuando sale el chat no aparece en los emojis.
Joe Frank, crack, crack tú, por acompañarme.
Muchísimas gracias.
Sergio Serrano, aplausos.
Victoria, dice Miguel Gil.
Más aplausos por aquí, aplausos por acá.
Todos estamos felices, me alegro.
Muchísimas gracias, muchísimas gracias.
Me alegro que estemos contentos.
¿Qué cosa se puede hacer hoy con GitHub Actions?
Pues la verdad es que se pueden hacer muchísimas cosas.
Porque con esto me ha sorprendido la sencillez de comitear en el propio repositorio.
No hemos tenido que configurar token.
No hemos tenido que configurar token.
No hemos tenido que hacer nada.
Eso me tiene un poco impactado.
La verdad, me ha gustado mucho eso.
Pensaba que tendría que ir al GitHub token y tal.
Eso estaba muy bien.
Luego, ¿qué de cosas se pueden hacer?
Yo creo que el límite ahora mismo está en tu imaginación.
Esta página, que por cierto creo que está hecha con React.
Esta página, a ver.
Next, no.
A ver, no.
Pues esta igual no es.
Pero creo que hay, yo creo que sí, eh.
Esta página está hecha con...
Tenía una página de GitHub Actions que está hecha con React.
Pues tiene un potencial brutal porque si los exploramos y vemos lo que tienen, aquí tienes todas las categorías.
¿Qué cosas podrías hacer?
Desde crear tickets en Jira, como podemos ver aquí, hasta, yo qué sé, crear comentarios en el propio GitHub.
Crear imágenes de Docker y pushearlas, ¿no?
A, pues al repositorio de Docker.
Podríamos hacer temas de logs.
Podríamos enviar trazas.
Podríamos, mira, esto está muy bien, ¿no?
El hecho de manejar tu repositorio.
Bueno, vale, pues si detecto que se ha hecho un merge de una pull request que tenía esta issue, pues la cerro automáticamente.
O, no sé, es que me parece que tiene tantas...
Estos son todo acciones, ¿no?
Todo esto son acciones, igual que hemos utilizado nosotros el checkout y el denote.
Pues aquí tenemos acciones.
Mira, Code Quality, para ver la calidad de tu código.
Este de Sonar, sé que hay gente que lo utiliza, que básicamente te dice cómo de complejo es tu programa.
Y te dice, tiene complejidad 14, 15.
Y te salta un error.
Dice, oye, tu código es demasiado complejo, por ejemplo.
La cobertura de código, ¿no?
Pasar los tests y decir la cobertura de código.
Al final es algo muy similar, ¿no?
A Travis, aunque le veo mucho potencial.
Porque esto de los actions lo hace muy reusable, ¿no?
Y muy sencillo de reusar, incluso más que Travis.
Está mejor integrado, pero bueno, veo que a mí el problema este de la información me...
No sé, me resulta que es algo que tienen que solucionar, ¿no?
Bueno, publishing, por supuesto.
Publicar un paquete de NPM.
Podríamos publicar un tweet, si quisiéramos, también.
Cada vez que se ha actualizado el Ritmi, pues publicar un tweet.
Oye, ha actualizado mi Ritmi.
Podríamos hacer...
Bueno, hacer una release de GitHub, por supuesto.
Testing, seguridad también para auditar, ¿no?
Podríamos auditar todos nuestros paquetes.
La verdad es que tiene muchas cosas, muchas cosas.
Veo que tiene bastante...
Bueno, claro, debe tener de pago también.
Algunas de pago.
Mira, para encontrar problemas de accesibilidad.
Y imagínate poder crear...
Hacer un link, ¿no?
Y que te diga los errores.
O que te los arregle.
Y que te haga el commit automáticamente para arreglarte los errores de link.
Not bad.
Está bien, está bien.
Me gusta, me gusta.
Le veo futuro.
Le veo futuro.
Mira, esto también está bastante bien.
Por ejemplo, una cosa que se podría hacer es...
Esto tiene mucho potencial, ¿eh?
El hecho de que tú tengas un archivo con todos tus idiomas,
todos tus textos traducidos, tus cadenas de texto, tus literales, ¿no?
Y digas, bueno, yo no lo puedo traducir, ¿no?
Yo tengo como el lenguaje base, que sería castellano en nuestro caso, o inglés.
Entonces, lo que podrías hacer es...
Tú creas este archivo JSON con todos tus literales y lo que haces es que cuando lo subes,
vaya a un servidor, envíe ese literal y pague a alguien para que traduzca ese literal.
Eso se podría llegar a hacer porque hay un montón de servicios que puedes enviar literales para que te los traduzcan.
Entonces, seguro que con un webhook lo que podrías hacer al final es que te lo devuelva traducido
y que te haga el commit y tal.
Brutal.
Brutal, brutal.
No, muy bien, muy bien.
Marcas de agua en las imágenes, dice Luis.
Juan Solid dice, excelente canal.
¿Alguna posibilidad de hacer un curso de envío de mail con React?
Guau, tela, ¿eh?
Tela, tela.
No lo veo en el corto plazo, no te voy a engañar, Juan Solid.
Pero puede ser porque aquí más que React, al final lo importante es el servidor que envíe los mails.
Y eso es una cosa totalmente aparte.
Al final React es la UI y tampoco sería mucho en la parte de React.
Por ser más nuevos los actions, quizás es más lento que otros pipelines o hooks, pero está perfecto, tiene mucho potencial.
Estoy totalmente de acuerdo, yo, Frank.
¿Qué más?
La necesidad que viene a cubrir actions es el continuous integration, continuous deployment, para no depender de Travis, CircleCI, por ejemplo.
Sí, y esto es interesante, ¿no?
A ver qué pasa, a ver qué ocurre.
Me da un poco de miedo de que, a ver cómo dejan esto a Travis, ¿no?
Porque Travis a mí me gusta mucho como pipeline de continuous integration, pero me da miedo de que le haga la competencia desleal.
De hecho, me gustaría hacer algunos vídeos sobre Travis, porque me parece muy potente, ¿no?
Y claro, cuando no existen los GitHub actions, pues será lo que se utilizaba y ya está.
Pero claro, ¿ahora qué pasa?
Pues que quizás GitHub le pone más barreras o no tantas facilidades como sí que van a tener las GitHub actions, que está súper integrado.
Así que vamos a ver cómo queda esto, ¿eh?
¿Se puede comparar con los pipelines de Bitbucket?
Pues no los conozco, Paulo.
Pipelines, Bitbucket, pero me imagino que por el nombre debe ir por ahí, ¿vale?
Sí, exactamente.
Es un continuous integration, continuous deployment, exactamente lo mismo.
Sí, debe ser muy similar.
De hecho, es que se parece hasta visualmente, ¿eh?
O sea, esto está...
Es lo mismo.
Es lo mismo, pero con otro nombre de otro producto y ya está.
Es exactamente lo mismo.
Esteban, nos vemos en Next.Yes.
Efectivamente, la semana que viene, ¿vale?
María Angélica dice, demasiado potencial tienen los actions.
No los había usado, pero ya se me ocurren un montón de usos.
Pues yo tampoco, los había usado nunca y ya ves.
Leandro, gracias a vos, gracias a ti por estar aquí.
Excelente, como siempre, dice Paulo.
Pues haz algo de Travis, me dicen por aquí.
Pues haré algo de Travis, me gustaría.
Me gusta mucho.
Lo malo de Travis, aunque veo que GitHub Actions tampoco está arreglado, es cuánto tarda, ¿no?
En hacer, en ver si algo falla o no sé, que haya una facilidad de validar que el YAML está bien escrito o que vaya a hacer lo que esperas.
No sé.
Creo que tienen que sacar algo ahí.
¿Qué opinas de CircleCI?
No lo he utilizado mucho, pero le he visto bastante potencial, aunque, ¿qué pasa?
Que como estoy tan acostumbrado a Travis, la sintaxis es muy similar, pero reaprender cosas, bueno, no lo he utilizado casi.
Me parece que si te funciona, pues debe estar bien.
Pero bueno, es verdad que Travis ha tenido bastante, o yo le veo que tiene bastante más tracción.
Ahora veremos, ¿eh?
He visto que cada vez más hay más repos de CircleCI, pero a ver con los GitHub Actions cómo quedan estos, ¿eh?
Me dan un poquito de penita, a ver cómo queda su mercado.
Pues nada, chicos, chicas, muchísimas gracias a todos por acompañarme un vídeo más, una semana más.
Sé que hoy ha sido un vídeo extraño, quizás hay gente que esperaba que hiciese un vídeo de React,
pero sinceramente no he tenido tiempo de hacerme mi página de README.
Me hacía mucha ilusión hacerlo con todos vosotros, me hacía muchísima ilusión probar los GitHub Actions
y además hacerlo en vivo sin haberlo tocado antes, aprender juntos.
Muchísimas gracias de haberme ayudado.
Antes de irte, deja tu like si te ha gustado, si te gusta que siga con los viernes y si has aprendido algo,
deja tu like que me anima para continuar haciendo vídeos y dale un like si te gustaría la semana que viene,
que empecemos con el proyecto de Next.js para nuestra aplicación de React, ¿vale?
Volvemos a React la semana que viene, que eso no quiere decir que no hagamos vídeos de otras cosas
porque creo que muy pronto vamos a hacer más vídeos.
Ahora que voy a tener más tiempo, ya estoy terminando la mudanza de montar muebles.
Si vais a mi Instagram, podéis ir viendo, por ejemplo, mi último story.
Así es como estoy, ¿no? Estoy montando un montón de muebles
y no me da tanto tiempo a prepararme cosas, a hacer vídeos y tal,
pero bueno, intento sacar el tiempo, así que os agradezco un montón vuestro apoyo,
que para mí es súper importante.
También compartid el canal si os gusta para que más gente se una.
Cuanto más seamos, más contenido podremos hacer.
Y una vez más, os deseo a todos y a todas que tengáis un feliz fin de semana.
Muchísimas gracias por acompañarme.
Me lo he pasado genial, me encanta aprender, sobre todo temas de Frontend, pues son una maravilla.
Así que un abrazo, gracias a todos los que habéis estado en el chat.
Gracias, Emanuel Villanueva, sobre todo por todos esos superchats,
que por supuesto no estáis para nada obligados, pero para mí, pues me tocáis el corazón.
Sergio Serrano, que no falla ni un viernes, es brutal.
Te lo agradezco mil, eres brutal, así que muchísimas gracias.
Emanuel también y a todos los que me apoyáis con vuestros comentarios, vuestros likes.
Cada vez que lo compartís sin vosotros, esto no funciona.
Así que muchísimas gracias, nos vemos la semana que viene.
Aquí, en Mirudev, más Frontend, como siempre.
Más y mejor Frontend, para no parar.
Hasta luego, cuidaos mucho.
Chao.