Hace unos días, o hace una semana y tal, hice este vídeo donde hablo de cómo hacer un calendario con solo tres líneas de CSS
y en los comentarios había gente que me preguntaba un poco de, oye, esto está muy bien.
Alguien me preguntaba que si se podía hacer este calendario realmente con JavaScript.
Y yo dije, hombre, claro, pues es que ¿dónde está el límite de esto?
Al final yo lo hice el HTML y el CSS, pero aquí se puede hacer un poco de todo.
Se podría intentar hacer esto con JavaScript a saco.
De hacer con JavaScript el calendario entero, con traducciones y con todo.
A ver lo que sale.
Creo que vamos a aprender un montón de cosas, porque se va a ver cosas del Date, Time, Format.
Vamos a ver también, bueno, sobre todo quiero hacer el calendario en JavaScript y lo quiero hacer que se pueda traducir, o sea, que venga traducido.
Así que a ver, a ver qué sale de todo esto.
Voy a copiarme el HTML, si es que lo tengo en algún sitio.
¿Tenía el HTML por algún lado?
A ver, de todo esto.
Ah, no, claro, porque aquí ya lo estaba.
No sé si habéis visto mi vídeo de este, pero voy a copiarme el HTML este que tenía.
Básicamente, estábamos cargando el stylesheet, stylesheet, con href, y esto venía del styles.css.
Esto creo que hay que cerrarlo.
Aquí teníamos un div.
Y lo que hacíamos era una lista de números.
Y aquí ya podemos poner todos los números.
En este caso, pues vamos a poner que esto era enero del 2021.
Y aquí, ¿esto cómo era?
Esto era... ¿Cuántas veces? ¿Cómo se podía escribir esto?
Voy a ver mi propio vídeo para ver cómo se escribía esto.
¿Lo podéis creer?
¿Lo podéis creer?
No, vale, esto, 31.
Por 31.
Y creo que aquí se le ponía el número.
No, no es la N.
¿Cómo era esto?
¿Cómo era para poner el número?
¿Contenido de la etiqueta?
Ah, y eso...
Yo también.
Venga, ya está.
Bueno, más o menos.
Tendríamos esto por aquí.
Esto va afuera.
Esto no va aquí.
¿Veis?
Con esto ya tendríamos el calendario, súper bien.
Lo que aquí, este, tendría que ser el first day.
¿No?
Y esto es lo que...
No, no me acuerdo del estilo.
First day.
Clase first day.
Bueno, pues esto lo que debería hacer era ponerme correctamente el día que era viernes.
¿Vale?
Mira, claro, es que aquí habíamos hecho esto.
Pero esto sería...
Vamos a poner que por ahora esto lo vamos a comentar.
Esto...
Vamos a ver el column start.
Column start.
Y esto tenía que empezar el 4.
A ver cómo es el calendario.
El calendario de enero de 2021.
¿Cuándo empezaba el primer día?
El primer día empezó en viernes.
Viernes.
Vale.
Pues...
Se empezó en viernes.
Vamos a dejar...
Vamos a guardar.
Grid column start.
¿Soy yo?
¿O está ignorándome totalmente?
A ver, ¿qué es lo que me está escapando por aquí?
A ver si de verdad me voy a tener que ver mi vídeo.
Grid column start tendría...
Bueno, no es el 4.
Debería ser el 5.
Pero aún así no veo que esto se mueva.
A lo mejor es que...
Bueno, el mío.
¿Qué estás haciendo?
Mira, estoy haciendo...
Tengo aquí el vídeo que hice de cómo estilar un calendario con tres líneas de CSS.
¿Vale?
Entonces, lo que quería hacer es este calendario, básicamente, pero con JavaScript.
Y quería hacer 2021.
Además, un calendario que se pueda traducir en diferentes idiomas.
Y así teníamos que ver diferentes APIs del navegador muy interesantes para hacer traducciones.
Y vamos a conseguir tener el calendario de enero a diciembre de 2021 todo generado.
¿Vale?
Porque ahora aquí tengo enero y lo tengo aquí puesto a mano.
¿Vale?
Voy a poner los días de la semana.
¿Vale?
Días de la semana.
Esto sería lunes.
Esto sería martes.
Básicamente, lo que quiero es que todo esto que estamos generando todo, ¿eh?
Hasta los nombres de los días.
Los...
Todo, todo.
Los nombres de los meses.
Todo venga hecho con JavaScript.
Porque alguien me preguntaba.
No, que no habéis llegado tarde.
Sí, que llegáis al momento, Daniel.
No ha llegado tarde.
Así que eso.
Josef, Jesús.
Estoy haciendo un calendario con JavaScript.
A ver qué es lo que sale de todo esto.
Uy, igual esto queda un poquito pequeñito, ¿no?
Podría hacer que los días...
Gracias por seguirme, Daniel Suárez.
Muchas gracias.
No ha llegado tarde.
Ha llegado al momento justo.
Dayname.
Vale.
Así que vamos a ponerle el estilo.
El cómo estilar este calendario.
Que ya veis que lo tengo hecho.
Esto es porque viene de...
Uy, la he liado ahí en medio.
Se me ha colado.
Este.
Vale.
El cómo estilar un calendario con CSS.
Esto lo tengo en mi canal de YouTube.
Que...
Que...
Bueno, tuvo bastante buena acogida.
Y lo podéis ver.
Son cuatro minutos y medio.
O sea, cortito.
No...
Va bastante a saco.
Y entonces se ve cómo se estila.
Pero esta vez lo que quería hacer.
Era ir más allá.
Porque en los comentarios, aunque no he encontrado.
Alguien me decía.
Oye.
Que...
Que esto está muy bien.
Pero claro.
Esto tú has puesto aquí un HTML.
Y lo has estilado.
Pero...
¿Cómo puedo hacer esto mismo con JavaScript?
¿Vale?
Y entonces yo le dije.
Pues me parece muy bien.
Me parece buena idea.
Y vamos a verlo.
¿Vale?
Así que...
Que vamos a hacerlo.
¿Por qué?
Porque creo...
Estoy seguro que es posible.
Por supuesto.
De hecho, intenté hacer alguna cosilla ya.
Y lo vamos a hacer con JavaScript.
JavaScript vanilla.
O sea...
JavaScript.
Porque, bueno.
Con JavaScript se debería poder hacer esto.
Así que...
Venga.
Vale.
El único problema que tengo...
Este first day...
A ver si es que...
Lo he escrito mal.
First day.
Este first day debería ser la clase que tenemos aquí.
Pero no entiendo por qué no me la está pillando.
Es que no entiendo por qué...
¿Qué se me está perdiendo?
¿Qué se me está pasando?
A ver si me ayudáis mientras.
Gracias por seguirme, Hackze.
Muchas gracias.
Y bienvenido, bienvenida.
Te lo vas a pasar pipa aquí con la programación web.
Pues eso.
Me falta...
Este uno debería empezar en viernes.
Entonces tengo aquí en los estilos...
Gracias por seguirme, Alejito.
Este grid column start.
Que esto es lo que quiero hacer después.
Y lo tengo en el 5.
Y esto ya debería funcionar.
Y no sé qué se me está escapando.
A ver si lo que se me está escapando es cómo funciona Safari.
Y esto en Safari no funciona como espero.
Por X motivo.
No se me extrañaría, ¿eh?
No me extrañaría.
A ver, he guardado los cambios.
Sí, he guardado los cambios.
Vamos a...
¿Cuánto tiempo tarda uno en aprender JavaScript?
Pues uno no para nunca de aprender JavaScript.
Tardar por aprender...
Mira, aquí sí que sale bien.
Aquí sí que sale bien.
O sea que es un tema de Safari.
Bueno, vamos a seguir aquí.
Aprender lo puedes aprender en una semana.
Depende de lo que consideres aprender.
Gracias por seguirme, Pablo Zick.
Lo más básico.
Pero claro, depende mucho de...
Tienes ya conocimientos, por ejemplo, de programación.
¿Sabes algo de programación?
Porque entonces a lo mejor el problema no es aprender JavaScript.
A lo mejor el problema es aprender los conceptos de la programación.
Que es un bucle, que es un condicional.
Pues se tarda más en eso que en aprender JavaScript.
Porque JavaScript al final no deja de ser un lenguaje.
Entonces, si te refieres más bien a cuánto tiempo tardo en aprender a programar JavaScript,
igual ya ahí sí que estamos hablando de mínimo un mes.
Empezar a hacer cosas lo puedes empezar a hacer desde el primer día.
¿Por qué?
Porque abres la herramienta de desarrollo y ahí ya puedes darle caña al JavaScript.
Mira, abre la herramienta de desarrollo estas y aquí ya te puedes quedar muy...
Bueno, sale un montón de cosas raras, pero aquí ya puedes poner JavaScript.
Dices, hola, alert, hola.
Y este es tu primer JavaScript que vas a escribir.
O puedes hacer una función o 2 más 2 y ya está.
Ya tenéis JavaScript.
Vale, pero a partir de ahí obviamente se va complicando.
Bueno, vamos a seguir con esto.
Habréis visto que me salían aquí unos acentos súper extraños, ¿vale?
Eso es porque no tenía el chart set y le he añadido al HTML este chart set.
Gracias por seguirme, CronoSap.
Gracias por seguirme.
Pues eso.
Alejito le decía que mucho.
Pero sí, o sea, es que si al final terminar de aprender no terminas nunca porque es un no parar, ¿sabes?
O sea, JavaScript está vivo.
Está vivo y no para de evolucionar.
Voy a hacer esto un poquito más grande, ¿vale?
Para que lo veamos bien.
Entonces, si te acabas de apuntar qué es lo que quiero hacer, esto ya lo tengo estilado.
Es un calendario estilado con CSS que el vídeo está en mi canal por si lo quieres ver.
Pero lo que quiero hacer, voy a cerrar Safari, lo que quiero hacer ahora es generar los calendarios con JavaScript, ¿vale?
A ver si somos capaces de generarlo.
Así que vamos con eso, vamos con eso.
Vale.
Venga.
Lo primero, lo primero que debería hacer...
A ver, tengo por aquí cosas abiertas que me están por aquí.
Esto por aquí.
Venga.
Lo primero que debería hacer es escribir JavaScript, ¿vale?
O sea que mira, esto te va a servir ya.
Lo voy a hacer a saco en el index.html porque de esta forma pues vamos más rápido y no tenemos que ir cambiando de archivo si está todo en el mismo archivo.
Lo primero que vamos a hacer es un poco cuál es el año en el que quiero extraer, que voy a decir el 2021.
Luego haremos que esto se pueda parametrizar de forma que podamos crear el calendario de 2022 o el que queramos.
Y luego lo que voy a decir es en qué idioma lo quiero porque esto también lo vamos a poder parametrizar.
En este caso pues esto sería Spanish y 2021 pues es este año que por si te pasa como a mí que cuesta a veces saber en qué año uno vive, ¿vale?
Entonces, lo primero sería recuperar los meses.
Yo creo que es lo primero que tendríamos que hacer.
Para recuperar los meses tendríamos que crear...
Vale, vamos con... vamos a abrir la documentación ya.
A saco.
Intel Date Time Format.
Vale.
Mira, si es que ya he abierto.
Lo primero que deberíamos hacer sería recuperar los nombres de los meses.
Pero una cosa que podemos hacer aquí al respecto sería empezar y crear un array, ¿no?
Es decir, ¿cuántos meses tiene un año?
12.
Ya sé que esto es bastante perurallada.
Pero entonces lo que deberíamos poder crear es un array de 12 elementos.
De 1, 2, 3, 4, 5, 6.
Pero, claro, esto podemos hacer así, pero esto no mola nada, ¿vale?
Lo que podemos hacer, si no me equivoco, sería hacer esto.
Y esto.
Y aquí deberíamos tener, si no me he equivocado, vamos a verlo.
Si no me he equivocado y guardando los cambios y vamos a la consola, que veo que la consola no me devuelve nada.
Aquí.
¿Vale?
Ya hemos creado un array.
No sé si este truco lo sabíais.
Hemos creado un array de 12 posiciones del 0 al 11.
Y creo que esto ya nos va bien porque, si no me equivoco, para recuperar el nombre de un mes...
A ver, State Format.
Un truco que se puede hacer...
Vale, sí, con el format.
Para recuperar el nombre del mes.
Vale.
Aquí tenemos las opciones.
Pa, pa, pa.
Vale.
Lo primero que voy a crear ya es esto, que lo vamos a necesitar, ¿vale?
Que básicamente es crear una instancia de la internacionalización.
Aquí hemos dicho que el local que vamos a utilizar es el de España.
Y en las opciones lo que le podemos decir es que el estilo de los meses sea...
A ver, estoy dentro del formato.
Month long.
Esto.
Yo creo que con ese debería ser suficiente.
Eso está muy bien porque esto lo que nos hace es decir, no sé, el nombre del mes de la forma larga.
Así que tengo ya los números de los meses.
Sí, sigo programando, Ana.
Es que esto es un no parar porque hay que darle.
Si yo hoy no he programado todo el día.
Hoy estaba súper tranquilo en casa y no he programado nada.
Así que...
Vale.
Entonces, lo que podemos hacer para crear el calendario sería...
Vamos a tener un calendario, ¿vale?
Y el calendario...
Bueno, es es...
Arguello me dice que el local debería ser así.
Bueno, ya verás que es es funciona perfectamente y sería como el general.
No habría ningún problema.
Si da algún problema, pues nada.
Lo veremos y lo cambiamos y ya está.
Entonces, los meses.
Vamos a ver.
Los meses.
Los meses.
Entonces, aquí tendríamos el month key y ahora lo que tenemos que hacer básicamente es para cada uno de los meses recuperar el nombre.
Así que month name sería utilizando el intel.format y ahora en el format lo que espera como... es la fecha.
Vale.
Y esta fecha la podemos crear fácil porque fíjate aquí que pone new date y esto es el año que es justamente el que tenemos.
Y luego se le debería pasar el mes.
Vale.
Pues vamos a ver.
El año sería el actual year y el mes sería justamente el month key que tenemos.
Y vamos a ver qué nos ha devuelto este calendar.
Vamos a ver qué tiene esto.
A ver si ha hecho la iteración más o menos.
Como debería.
Vale.
Esto no ha hecho absolutamente nada.
A ver.
Ah, vale.
Vale.
Es que no estoy devolviendo el month name.
Yo también.
Month name.
Pero tampoco entiendo muy bien por qué.
No sé si es este console.log que me la está jugando.
Porque no sale nada.
¿Sabes?
O sea, le doy aquí y no sale en consola y no sale nada.
A ver.
Vamos a ponerlo aquí.
No, no pone nada.
A ver.
He hecho está bien, ¿no?
O sea, tampoco tiene mucho misterio esto.
Vamos a ver.
No sé por qué no me salta nada en la consola.
Sí, ya sé que ha sido limpiada.
¡Ay!
He refrescado toda la página.
De golpe.
Vamos a ver.
Vamos.
Vamos, consola.
O sea, la consola no devuelve nada.
No.
¿Por qué?
Bueno, a ver.
Lo único que se me ocurre es que haya habido un error o algo.
Pero before...
Yo creo que no hay ningún error, ¿no?
O sea, en la consola no funciona directamente.
Ah, ya nos está complicando esto el tema, ¿no?
A ver.
Voy a comentar esto.
Un momento.
A ver si...
Como no tengo el Inter ni tengo absolutamente nada, es un poco raro.
Pero no, no.
Es que me ha dejado esto de funcionar.
¿Alguien ve un error o algo que tenga...?
Si te imaginas que es el local este, lo voy a poner solo para estar seguro, ¿vale?
Lo voy a poner solo para que estemos seguros.
No, pero es que no me funciona...
Ah, bueno.
Ahora sí que es verdad que es que no tengo ningún...
No tengo nada.
Pero ¿por qué no sale en la consola?
No sale nada en la consola.
¿Sabéis lo que vamos a hacer?
Gracias por seguirme...
Arkin Bauer.
Gracias por seguirme.
Pero ahora es lo que vamos a hacer.
Vamos a crear esto directamente en un proyecto.
Aquí porque lo quería hacer aquí por hacer un poco la gracia.
Pero ya veo que...
No sé.
No sé por qué no funciona.
Y me da bastante mal rollo.
La verdad que no me dé feedback.
Calendar.
Ey, ey.
¿Quién me está siguiendo por ahí?
BetoroDev.
Gracias por seguirme.
Crack.
Muchas gracias.
Error de course.
Pues es que en problemas tampoco hay ningún problema.
Y no debería ser nada de course.
Es que creo que al code sandbox este se le ha ido bastante la cabeza.
A ver.
Calendar.
Touch.
Index.html.
Code.
Index.html.
Lo que pasa es que mira que me gustaba.
Porque quedaba...
Ah, ah, ah.
Quedaba bastante bien.
Vamos a poner esto aquí, a izquierda.
Vamos a pegar todo lo que tenemos aquí.
Gracias por tu ayuda, Code Sandbox.
No me has ayudado en nada.
No me has ayudado en nada.
Vamos a pillar los estilos.
Es que al menos así me aseguraré que no es un problema.
Como Code Sandbox utiliza service workers y cosas súper raras.
Mira, vamos a quitar esto.
Además así se ve un poquito mejor el...
Le ponemos ahí los estilos.
Y por otro lado aquí lo que vamos a hacer es abrir desde aquí.
Open.
Vale.
Ya está.
Me fío más.
Que igual sigue sin funcionar, ¿eh?
Pero mira, se está ahí a la primera.
O sea, madre mía, no sé por qué.
A veces es una cosa que tiene Code Sandbox y me pone bastante los nervios.
Que parece que no funciona y no sabes si es que no se ha actualizado o qué le pasa.
No sé.
Bueno, el caso.
Para las calidades yo reinicio el directo.
Bueno, no sé.
Vamos a ver si cuando sea afiliado ya no debería dar ningún problema.
Gracias por pasarte, Ana White.
Muchas gracias.
Cuídate y que vaya genial.
Buenas noches.
Un punto y coma, me dicen por aquí.
¿Cómo va a ser un punto y coma, hombre?
Si ya...
¿Veis cómo ya está funcionando?
Que no era el punto y coma.
Ya está.
Ya lo tenemos aquí.
Venga.
Pues ahora que ya tenemos console.logs otra vez, ya podemos seguir programando.
No se puede programar sin console.logs.
Es imposible.
Bueno, voy a hacer un poco esto más pequeño.
Decidme si lo veis bien.
Pero es que ocupa demasiado espacio y...
A ver, puedo hacer esto más pequeño para acá.
Y esto lo voy a hacer aquí un poquito más grande.
A ver si así.
¿Vale?
Vale.
Pues ahora que tenemos esto, lo que voy a ver es si tengo todos los meses.
Ya.
Venga.
Venga.
¡Ja, ja!
Tengo todo de enero.
Muy bien.
Month key.
Month key.
Pero month key.
Tenemos todos los meses.
Pero el month key...
Month key...
¿Esto por qué?
No, si los tenemos todos aquí.
Ay, perdón.
Fíjate.
Es que el format este que he puesto aquí...
He puesto aquí mal esto, ¿no?
He puesto los dos...
He puesto actual year y month key.
Pero aquí lo que hay que pasarle es una fecha.
Que creo que es new date.
Y le tenemos que pasar el año actual y luego el month key.
¿Vale?
Vamos a ver ahora.
Venga.
Enero, febrero.
Ahí ya tenemos todos los nombres, ¿eh?
Ahí tenemos ya todos los nombres.
Vamos a hacer que esto poco a poco vaya tomando vida.
Lo que vamos a hacer en este div...
Vamos a poner aquí un...
Que para cada...
¿Cómo hacemos esto?
Creamos el HTML aquí, primero.
Tenemos el calendario.
Con el calendario lo que vamos a hacer es devolver un objeto.
Y vamos a ponerle month name.
Y aquí el calendario lo vamos a recorrer.
Y vamos a recuperar el month name.
Y aquí lo que vamos a hacer es crear el HTML que tenemos que crear para cada mes.
Lo vamos a meter directamente en el div.
Así que esto seguramente va a desaparecer.
Pero la estructura básicamente sería document.getquerySelector.
Vamos a pillar el div y meteremos dentro el HTML que estamos generando.
Y este HTML que estamos generando, lo que vamos a hacer es poner el nombre del mes en el h1.
Eso bien.
Y con el actual year.
Así que h1.
Month name.
H1.
Y el actual year.
Actual year.
Venga.
Bueno.
Ahí hay un error.
Ahora lo arreglamos.
Pero bueno.
A ver.
Ya esto pinta, ¿no?
Esto pinta.
Esto pinta.
Vamos, vamos, vamos.
Que esto pinta.
Enero del 2021.
Febrero del 2021.
Venga.
La coma esta es porque aquí tendríamos que hacer un join.
Así.
Porque si no por defecto cuando intentas renderizar un array pues...
Bueno.
Ya tenemos todos los días de...
Hay todos los días.
Todos los meses del año.
Algo es algo.
¿Qué dice por aquí?
Oye, una pregunta.
¿Algún día harías una guía para la entrada al open source?
La tengo pendiente.
Y la vamos a hacer.
La vamos a hacer.
Dabgons.
La vamos a hacer seguro.
Vamos.
Te lo puedo asegurar que lo vamos a hacer.
Vale.
¿Qué más información necesitamos?
Lo que necesitamos de cada mes es...
¿Qué necesitamos?
¿Cuántos días tiene?
Days of month, ¿no?
Y el día que empieza.
Starts on.
Tenemos que saber en qué día de la semana empieza el mes.
Ahora a ver cómo sacamos esta información.
¿Cómo sacamos?
Days of month.
Bueno.
Days of month.
Vamos a poner por ahora 31.
Y Starts on.
Vamos a poner que todos empiezan en la posición 0.
para que al menos así podamos pintar todas las cosas.
¿Qué es JSX?
Pues no estamos haciendo JSX aquí.
No nos tienes que preocupar.
Pero básicamente JSX es un azucarillo sintáctico para que no escribas JavaScript a saco.
Cuando en tus componentes de React tendrías que escribirlos con JavaScript.
Y lo que haces es tener una sintaxis parecida a HTML que en realidad a su vez se compila en JavaScript.
Lo que te recomiendo para entenderlo mejor es que te vayas al Babel Playground.
Gracias por seguirme JJBalrl.
Mira.
Aquí te vas a Babel.
Y haces esto en el tryout.
Aquí puedes hacer return, h1, hola mundo.
Cerras aquí.
Bueno, porque ahí he puesto fuera una función.
Pero bueno, directamente es esto, ¿no?
Uy.
Uy, ¿qué ha pasado con mi...?
¿Ves esto aquí?
H1, no sé qué.
Esto parece HTML.
Esto es JSX.
Porque esto en un archivo de JavaScript con las transformaciones de JSX te lo transforma en esto de la derecha.
Pero claro, esto es un ancoñazo escribirlo.
Entonces mejor utiliza JSX.
Porque cuanto más se complica esto...
Uy, no sé por qué no me deja escribir.
Ahora.
Cuanto más se va complicando esto, pues escribirlo en JavaScript es imposible.
Se va haciendo muy, muy difícil.
Muy difícil.
Muy difícil.
¿Ves?
Aquí el churro que empiezas a tener.
Entonces es más fácil entenderlo con JSX.
Que está basado en XML y que está bastante bien.
¿Vale?
Te devuelvo el favor.
¡Ostras!
Pero eso es muy...
Eso no me gusta, Dorian.
Eso no me gusta.
A mí me gusta más...
Eso está demasiado a saco, ¿eh?
Vamos a ver.
Seguro que hay una forma programática de conseguirlo, ¿eh?
Seguro.
Porque es que para entrar...
Para hacer eso...
Para eso lo hacemos de otra forma, ¿no?
A ver.
Hay un truco, yo creo, con el tema del date.
Son dos funciones.
Ya, pero es muy manual.
Me gustaría algo programático.
Algo que digas...
Sabes que yo no tuviera que saber esa información.
Creo...
Hay un truco que creo que cuando haces un new date y lo que le pasamos es el 2021,
le decimos el mes...
El mes siguiente, ¿no?
Por ejemplo, queremos recuperar los días que tenemos en febrero.
No, en enero, ¿vale?
En enero.
En enero sería el cero.
Pero vamos a preguntar por el uno y le vamos a decir que es el día cero.
Porque creo que el día cero es el día anterior.
¿Ves?
Es el día anterior.
Entonces, como es el día anterior, ahí puedes recuperar cuál es el último día del mes anterior.
Hemos puesto febrero, el mes de febrero.
Pero al poner el cero nos da el día anterior, que sería el 30 de junio.
31 de junio, no.
De enero, perdón.
Entonces, esto ahora...
Get date.
¿Ves?
Y entonces con el get date tendría el día exacto, el número de días que tiene ese mes.
Creo que con esto ya nos serviría, ¿no?
A ver.
Al final esto se podría calcular y hacer lo que comentas, ¿eh?
No sé hasta qué punto vale la pena.
Pero bueno, entiendo que esto debe ser menos código.
Es verdad que el tuyo a lo mejor es más entendible.
En el sentido de que...
Lo que pasa es que, claro, lo bueno es que esto te quita los años bisiestos, ¿no?
Porque el otro, supongo que tienes que hacer cálculos de cuál es el año bisiesto.
Ah, no sé.
No sé si va a acabar esto en el mismo nivel del calendario de JSX, ¿eh?
A ver, pero creo que estaba interesante.
El de Airbnb lo bueno que tiene, digamos que es más el tema de que es en React y, bueno, que es bastante interactivo.
Eso está bien.
Vale.
Entonces, para recuperar los días del mes, lo que vamos a hacer...
Y gracias por seguirme, teco barrubias.
Muchas gracias.
Lo que vamos a hacer es...
Hacer el truco este.
Habrá que hacer una cosita con esto del truco, ¿eh?
Ya también os digo.
Gracias por seguirme, Angelisco.
El truco este tiene un problemilla que calcularemos ahora en un momento.
Pero Days of Month...
¿Por qué?
Claro, cuando es el 12...
Así también funciona.
Bueno, pero eso es lo que he hecho yo, ¿no?
¿Creesco?
¿Qué significa esto?
Claro, esto lo que te da es lo de diciembre del año pasado.
Claro, claro que funciona.
Por eso es lo que he explicado.
¿Qué me estáis contando?
Sí, claro.
O sea, aunque sea del año pasado...
O sea, es el día anterior.
Aunque sea 0, 1, 2, 3...
Lo que pasa es eso, que es del...
Si pongo 12 de diciembre...
O sea, el mes 12...
Ahora aquí, ¿por qué me sale esto?
No.
Es que el 12, claro.
El 12 no es...
El 12, claro.
Sería el 11.
Vale.
Si es el 11, pues sería noviembre y tal.
Claro, es del 0 al 11.
Vale.
Me han liado, ¿creesco?
Me han liado.
Vale.
Entonces, lo que tenemos que hacer es recuperar...
El nextMonthIndex.
Que en principio debería ser MonthKey más 1.
Pero...
Bueno.
Claro, para enero...
Ahí es donde está el problema.
Para enero.
Vale.
Por ahora vamos a poner.
Para que...
Para que salga.
Y lo que vamos a hacer es ya crear todos los días, todo el churro de días.
Y ya veremos a ver qué sale por ahí.
¿Vale?
Por ahora lo importante sería crear todos estos li, li, li, li.
A ver, esto lo puedo crear, lo puedo añadir.
Bueno, lo añado después, ¿vale?
Por ahora todos estos li's.
Que lo que vamos a hacer para crear esto...
Podemos...
A ver, se podría hacer de un montón de formas esto, ¿eh?
Yo lo voy a crear así, pero...
Lo podríais hacer, pues...
De una forma con menos código y tal.
Pero me parece interesante hacerlo directamente en Vanilla JavaScript y se aprenden cositas.
¿Vale?
Por ejemplo, el número de días.
Pues, aunque lo ideal a lo mejor sería hacer un loop.
Pues, utilizando esta técnica de los months que hemos hecho aquí, podríamos añadir el número de días.
Aquí le...
Teníamos los days.
Y utilizando el days of months que tenemos aquí, podríamos utilizar ese número de días del mes para hacer el mismo sistema.
Que va del 1 al no sé qué.
Aunque creo que este days of months...
Claro, si esto empieza en 0, ¿no?
Bueno, ahora lo veremos.
Si no, cuando rendicemos, lo veremos.
Sería chévere hacer algo como asignar recordatorios o algo así.
¿Se puede con solo Vanilla?
A ver, espérate que estamos con el calendario.
Estamos con el calendario.
Todo se puede hacer con Vanilla.
Todo se puede hacer.
Todo.
Pero vamos con calma.
Que todavía tenemos que sacar los números ahí.
Sí, a ver, si lo conseguimos...
Quién sabe hasta dónde llegamos.
Pero vamos a hacer que se rendicen primero los números y ya veremos.
Qué bueno.
Vale, tengo los días.
Entonces, ahora que tengo este array de días...
RenderDays, los días.
Los mapeamos.
Y esto, básicamente, tendría que ser el Lee.
Lee que hemos hecho aquí.
Y aquí le vamos a poner el día.
Vamos a ver este RenderDays.
Que, como hemos visto aquí, tendría que ser...
En el H1, justo después del H1, aquí tendríamos la lista ordenada y aquí tendríamos el RenderDays.
RenderDays.
O Rendered, ¿no?
Mejor, más correcto.
RenderedDays.
Y terminamos la lista ordenada de números.
A ver qué pasa con esto.
Vale.
Otra vez.
El Join.
Pero bueno, no tiene mala pinta del todo.
No tiene mala pinta del todo.
Ya veo que empieza en 0, lo cual está mal.
O sea, vamos a sumarle 1.
Eso para empezar.
O sea, este Day, pues hacemos Day más 1.
Y luego, además, esto aquí vamos a hacer...
Este Map, lo que vamos a hacer es un Join.
Aquí vamos a hacer Join.
Y ya está.
Y a ver qué.
Vale.
Pinta mal, ¿vale?
Pinta mal porque veo aquí que todos los días tienen 31 días, lo cual no está bien.
Vale.
Pero es por esto.
Es por esto.
No pasa nada.
Que nadie se preocupe.
Se me ha olvidado utilizar aquí la variable DaysOfMonth.
A ver ahora.
Ahora sí que pinta bien.
Mira.
Enero, 31 días.
Febrero, 28.
28.
Marzo, 31.
Abril, 30.
Ahí está.
Bueno, voy a asegurarme.
A ver, abril, 30.
A ver si hemos pillado del año correcto.
Abril.
Abril.
Vamos.
Abril llega a 30.
O sea, que está bien.
Ahora, lo que está mal es el día que empieza, ¿vale?
O sea, el día que empieza todavía lo tenemos que recuperar.
El día que empieza.
El día que empieza.
A ver eso, ¿cómo lo podemos hacer?
Voy a poner esto un poco más legible, ¿vale?
Si os parece.
Me gusta que las cosas queden un poco...
A ver, title.
Que queden en una sola línea.
Además que así, pues, lo vais a entender mejor.
Si alguien se acaba de apuntar, o hace poco que se ha apuntado, le comento que lo que estamos
haciendo es un calendario con Vanilla JavaScript y que está estilado porque hemos seguido, bueno,
mi calendar, este.
Hice un vídeo en mi canal de YouTube donde hacíamos un calendario, bueno, maquetábamos
un calendario con tres líneas de CSS.
Y a partir de ahí, mucha gente me preguntó, oye, ¿pero qué pasa con esto?
Que esto está muy bien, que la maquetaba tú aquí, pero tienes ese chorro de HTML.
Esto no se podría hacer con JavaScript.
Y yo dije, a ver, con JavaScript se puede hacer todo.
Todo se puede hacer con JavaScript.
Todo.
Lo que tú quieras se hace con JavaScript.
Entonces, lo estábamos intentando hacer con JavaScript y lo bueno de esto es que vamos
a hacer además que esté traducido a diferentes idiomas.
Y para que veas que ya pinta que sí, si aquí le pongo en y refresco, fíjate que ya
vienen con idiomas.
O sea, no me digas que esto no empieza a estar bien.
Pues dices, no, lo quiero en alemán.
Pues toma en alemán también.
January, February, March, April, May, Juni, Juli.
Que lo quiero en chino.
Pues en chino lo tienes también.
Que lo quiero, creo que eso es chino.
Que en japonés.
Pues esto no es japonés, pero hubiera estado bien.
Mira, esto es japonés.
Pues lo tienes en japonés.
Así que, bueno, con una sola línea.
Esto es brutal, hombre.
Y en catalán, claro que sí, en catalán también.
También utensa en catalán.
Jané, Fabré, Mars, lo que quieras.
En gallego también.
No, gallego no sé si es este.
Bueno, pero ya entendéis la idea, ¿no?
Ya entendéis la idea.
¿Qué piensas sobre INEGRAHTML o DOCUMENTFRAGMENT?
Bueno, pues que el INEGRAHTML es bastante bestia.
Pero que en este caso lo tiene sentido.
Oye, alguien me decía antes lo del ES o ES-ES.
En este caso habéis visto que es lo mismo.
O sea, hacemos ES-ES o ES.
¿Veis cómo funcionan los dos?
Lo que puedes hacer esto...
Lo que pasa es que el nombre de los meses no es algo que vaya a cambiar en México.
Aunque sería bastante chingón.
¿Sabes?
Que de repente febrero fuese Tomatito o algo así.
¿Sabes?
Sería muy extraño.
Pero bueno, que da igual que en este caso añadamos el territorio donde está sobre la localización.
Vale.
Entonces, ¡guau!
Ahora se me ocurrió una cosa.
Se me ocurrió una cosa para el tema de...
Claro, que ya teníamos hecha.
Bueno, nos faltan los días de la semana.
Así que los días de la semana...
Vamos a ver los días de la semana.
Los días de la semana vamos a seguir este weekdays.
Vamos a seguir este truquito.
Vamos a poner que son siete.
Como esto sí que sabemos que es así.
Los días de la semana.
O sea, vamos a necesitar uno de estos.
Pero que solo sea para weekday.
Porque si no, también nos devolvería el tema del mes.
Entonces, ¿ves?
Aquí tenemos el weekday.
¡Ey, ey!
¿Quién se ha apuntado?
Andrés Fezadaza.
No sé decir los nombres de la gente.
Lo siento, pero es que tenéis que saber que os ponéis nicks muy chungos.
No sé si es que en Twitch están pillados.
Pero hay aquí un hombre que se llama Dabgonz25643.
Que parece que tiene su contraseña en el nombre.
O sea, es muy raro.
¿Qué tema de Visual Studio tienes?
Buah, Daniel Suárez.
Tengo el mejor tema de Visual Studio del mundo.
Pero voy a decírtelo después de esta pausa publicitaria.
No, de esta pausa para beber.
Voy a beber dos veces.
Vale.
Qué rica está la agua.
Está así como hacía Ronaldinho, ¿sabes?
Para que ahora no se vea lo que estás haciendo.
Mira, a ver.
Ahora me sale mal el hype que te pegaba ahí con el tema del theme.
Pero, de verdad, yo creo que está muy, muy, muy chulo.
Aunque también te digo que es muy típico.
Se llama...
Ah, no.
Vale.
Dicen los user names.
Vaya por Dios.
¿Qué tema de VS tienes?
¿No has dicho VS?
Para mí VS es Visual Studio.
Ah, vale.
Es que me lo está preguntando otra persona.
Es que veo el chat muy rápidamente.
Vamos a ver.
Visual Studio.
Tengo OneDark Pro.
El típico es OneDark.
Y OneDark Pro tiene unas cositas que lo hacen bastante único.
Por ejemplo, tiene este modo Vivid y las itálicas.
Y bueno, tienes como diferentes...
Aquí tienes un montón de posibilidades.
Entonces...
Ah, las Ball también.
Y bueno, pues por eso está bastante chulo.
Es como más vivo.
Me gusta que sean vivos.
Está bastante bien.
Así que...
Que eso.
OneDark Pro.
Totalmente gratuito.
Está genial.
Ya no sé por dónde iba de por aquí.
Vale.
Sí, estamos haciendo los días de la semana.
Y entiendo que para los días de la semana, igual que la técnica esta que hemos hecho,
pues deberíamos hacer esto.
Esto.
Entonces, lo que tenemos que hacer para los días de la semana...
A ver, que esto lo podemos haber mapeado directamente, pero...
Weekdays...
WeekdaysNames.
Weekdays.map.
Y aquí teníamos el WeekdayIndex.
Y aquí tendríamos que utilizar este Intel Weekday.
Vale.
Igual que hemos hecho aquí antes.
.format.
Y aquí teníamos el WeekdayName.
Y con este format...
Claro.
Aquí hay un truco.
Bueno, aquí hay un truco.
Aquí hay un problema.
Que...
A ver, no es un problema.
Podríamos hacer unas cuantas cosas.
A ver.
Tenemos que formatear una fecha.
En concreto.
Entonces, podríamos buscar una fecha, por ejemplo...
Mira.
¿Qué pasa con esto?
Que queremos recuperar de lunes a domingo el nombre de todos los meses.
Pero claro, para hacerlo fácil, necesitaríamos un mes que empiece en lunes.
¿Por qué?
Porque el lunes es el índice cero.
Entonces, si así preguntamos del cero al seis, tendría que ser el lunes, el cero, el uno, el martes.
La única forma que podríamos hacerle es buscar un mes, por ejemplo, noviembre de 2021, ¿vale?
Entonces, new date.
Ya decimos, 2021.
El mes sería...
Iba a decir 12, pero 12 no tiene sentido.
Sería 10, ¿vale?
El 10 es el noviembre.
Y aquí le pasamos el weekday index.
Porque queremos preguntarle por el cero.
Que ya sabemos que es el lunes.
Nosotros sabemos que ese es el lunes.
Sé que es un poco raro, ¿vale?
Pero es que es la única forma.
Porque no puedes, al menos por ahora, a JavaScript no le puedes decir, dime cómo se dice lunes.
No.
Lo que sí que podemos hacer es formatear la fecha.
Que sepamos que el cero, el día cero, es lunes.
Y así nos recuperaría el weekday name.
Nos lo debería dar bien.
Bueno, esto soy yo suponiendo mucho, ¿eh?
No sé.
Yo he metido aquí la charla y a lo mejor la lío parda.
Pero bueno, no sé.
Si no, lo miramos ahora.
A ver qué sale de todo esto.
Bueno, casi.
He estado cerca.
He estado cerca.
Domingo, lunes, martes.
Esto ahora no sé si es más bien que me he equivocado con la fecha o que no he hecho bien algo.
Vamos a mirar esto.
Voy a crear aquí la date.
Voy a hacer un console.lot de la date.
Y voy a refrescar aquí.
Vale.
¿Ves?
Me dice el cero, el 31.
Claro.
Porque el día cero, como os he dicho, nos da el anterior.
Ahí está.
Entonces, lo que tenemos que preguntarle es el weekday index más uno.
Y ya tendríamos lunes, martes.
Porque de esta forma estamos creando el...
Ah, bueno.
Voy a ponerlo otra vez el console.lot del date.
¿Vale?
Un momentito.
Y os lo enseño.
¿Veis?
Estamos creando...
¿Eh?
¿Otra vez?
Me ha dejado mal esto.
No, pero estoy creando ahí el 31 otra vez.
No.
No.
Pero si esto debería ser...
A ver.
El 1.
Esto es el 1.
Weekday index 1.
1.
Vamos a ver qué ha pasado ahí.
Weekday index más 1.
Ah, por...
Anda, que yo también.
Porque tengo el console.log una cosa y en el otro sitio otra.
Ahora, ya está.
Ahora.
Ahí, ahí.
Perdón.
¿Quién se ha suscrito?
Ay, que no lo veo.
Zane0042.
Muchas gracias por suscribirte.
Está puesto que la semana que empieza el domingo, ¿no?
No, no, no.
No está puesto eso.
No está puesto...
O sea, me he equivocado, ¿eh?
Con esto.
Daniel Suárez.
Estoy utilizando Twitch Studio Beta.
Así que en cualquier momento todo esto puede petar.
Tened cuidado.
No, he sido yo que me he equivocado, Yousef.
Porque en realidad tenemos que la semana empieza el lunes.
Lo que pasa es que si...
Es lo que hemos hecho antes, ¿no?
Si hacemos un new date y le pasamos el día cero, nos da el último día del mes anterior.
Y no es lo que queremos.
Por eso, aquí, cuando creamos la fecha, tenemos que hacer esto.
Weekday index, porque cuando hacemos aquí las keys y tal, estamos creando a partir de cero.
Pero cuando creamos el date, tenemos que empezar a partir de lunes.
Ahí creamos la date y ahora sí, si refresco, ahora sí empieza el lunes.
¿Vale?
Pero es súper importante que sepamos que el primer día de ese mes es lunes.
Este truco solo sirve si sabemos que el día del mes empieza...
El primer día del mes empieza el lunes.
A ver, que no pasa nada.
¿Por qué?
Porque esto lo podemos dejar así.
Esto ya se queda así.
Esto es tal cual.
Una vez que ya sabemos esa información, la dejamos así.
Este 2021 que hemos puesto aquí, este no se tiene que cambiar por este.
Porque este es, digamos, los meses que queremos hacer.
¿Ves?
Ahora voy a poner aquí y refresco.
Estos son los que queremos crear.
Y este de aquí lo estamos usando solo para recuperar los días de la semana.
Sé que es un poco raro, pero bueno, funciona, funciona.
Tenemos ahí los días.
Así que ahora que ya tenemos los weekdays name, los tenemos ahí, lo que podemos hacer es poner la parte de arriba que teníamos aquí con el lead class day name.
Así que vamos a renderizar, render days, esto donde, render days, vale.
Y aquí vamos a poner, claro, porque, de hecho lo podríamos renderizar una vez, es que ni hace falta, mira, lo podemos hacer aquí.
Hacemos rendered weekdays, aquí tenemos el weekdays names punto map y aquí teníamos el weekday name.
A ver, que todo esto se podría hacer a saco en una sola función, pero bueno, para que vayamos separando que lo estamos haciendo poco a poco.
Vale, así que aquí lo que tenemos que hacer es crear básicamente esta clase que hemos puesto que está day name.
Aquí ponemos el weekday name y aquí cerramos un lead y hacemos esto, y hacemos esto, y hacemos esto.
A ver, yo creo que con esto sería suficiente.
Cerramos esto aquí.
Esto debe trabajar sin linter tela, ¿eh?
Vale, entonces, ahora que tenemos los días aquí de la semana y los días, lo ponemos aquí, vale, vale, pinta bien, sí, sé que sale una coma, no os preocupéis, porque eso es el join, ¿vale?
Entonces, ¿qué pasa? Que cuando tú estás haciendo este map e intentas renderizar una lista de elementos, esto te lo transforma directamente en un string, lo que he estado intentando hacer es transformarte en un string y te lo separa por coma.
Entonces, lo que queremos hacer es que todo esto, en realidad, nos lo separe por un espacio vacío y de esta forma nos queda así.
No está mal.
Ya tenemos ahí nuestro calendario, lunes, martes, miércoles, jueves, viernes, sábado, domingo, y todo esto localizado, localizado.
¡Pam! Ahí está, con todos los idiomas que podemos cambiar.
Que esto podríamos hacer una función, ¿eh? Que le podríamos poner en alemán, qué bonito.
Oye, esto está como mal, ¿no? Esto... ¡Ah!
Es que pone ahí... ¿Sabes? O sea, no está centrado, claramente, ese H1, ¿no?
Pues cosa mía.
Es como que tiene... Claro, esto tiene un máximo. Esto tiene un máximo. Vamos a quitarle el máximo.
Vamos a refrescar. Ahora mejor. Vale, ahora mejor.
Ya... Y vamos a volver al inglés porque...
Ich bin an vision of Deutsch, pero no creo que ahora mismo sea el momento de hablar alemán.
Venga, febrero. Febrero, marzo.
Este día, el 12 de febrero, es mi cumpleaños, ¿eh?
Lo digo porque ya que está aquí, para que os sepáis, si me queréis hacer un regalo, pues ese día yo acepto todos los regalos que queráis.
¿Qué tal? ¿Os está gustando? O ahora mismo estáis muy callados.
Digo, a ver si alguien se me ha perdido.
¿Qué estáis haciendo? ¿A qué os dedicáis?
¿Os está gustando? ¿Sabíais las cosas que estábamos haciendo aquí?
¿Lo tenéis ya controladísimo?
Porque yo estoy descubriendo cosas mientras lo estoy haciendo, así que comentadme, comentadme alguna cosa.
A ver qué tal, cómo va esto.
Solo nos queda, para hacer nuestro calendario, como veis, ahora están mal los calendarios.
El calendario este, ahora mismo está empezando todos el lunes y esto no es correcto.
Lo que podemos hacer en este aspecto sería recuperar el weekday, ¿no?
El getday, que esto es una cosa súper rara de JavaScript, pero es lo que nos va a salvar en este caso.
Mira, cuando creas una fecha en JavaScript, primero pones el año, luego pones el mes, vamos a poner febrero, ¿vale?
Que es raro, pero febrero es el 1, ¿ok?
Y luego pones el día, ¿no?
Por ejemplo, vamos a poner el 12 de febrero, ¿ok?
Si ahora tú pones un punto getdate, esto es Ricardo Jarkin, gracias por seguirme.
Si ponemos este getdate, lo que nos da es el día, el día del mes, que tiene sentido, ¿no?
Bueno, tiene sentido, pero el nombre getdate es muy raro.
Tenemos también un getday.
El getday, lo que nos dice el getday es el día de la semana que es, ¿vale?
Entonces, entiendo que 5 sería, bueno, ahora no sé exactamente si es viernes o es sábado, pero una de las dos sería.
El caso es que te dice el día de la semana.
Por ejemplo, si fuese, mira, vamos a este, ¿vale?
Este, este que estamos haciendo aquí, este, pam, hacemos el getday.
Y como getday index, este le vamos a poner 1, pues esto nos devuelve 1, porque es lunes, ¿sabes?
Entonces, el lunes es el 1, el martes es el 2.
Es muy raro esto del getday de JavaScript.
El truco de los días del mes me lo apunto, muy bien, Egucito.
Muy interesante, la verdad, muy bien.
Yo he llegado a la tarde, ¿qué hace la línea 91?
No sabía que podías hacer array keys, pues, yellow win.
Esto lo que hace es crearte un array del 1 al 7, del 0 al 6, perdón, del 0 al 6, ¿vale?
De esta forma, mira, lo podemos hacer aquí, hacemos esto, ¿ves?
Del 0 al 6.
Es bastante útil, porque también puedes hacer esto, pero ¿qué pasa con esto?
Que esto te ha creado un array de undefines.
A ver, ¿qué otra opción que podríamos hacer?
Lo que pasa es que, bueno, es un poco raro.
Era hacer esto, tendríamos 7 posiciones, y luego en el weekdays, en lugar de utilizar este parámetro,
sería utilizar este, weekday index, weekday index.
Y este, pues, no utilizarlo, por ejemplo.
Y esto, pues, debería funcionar igual.
Bueno, de hecho, funciona igual, ¿vale?
Esto nos crea un array de 7 posiciones.
Bueno, que es que, de hecho, eso lo podríamos hacer también con este.
Bueno, con este creo que da problemas.
¿Puede ser que este no funciona?
Vamos a ver.
Sí, efectivamente, este no funciona.
Sí, sí, sí.
Sí, ese es que te hace un, es raro, pero te hace un length de 7, pero no te crea 7 elementos.
De esta forma los estás creando con undefined, y con esta forma los estás creando con los índices.
Y, hombre, está bien, porque así tienes del 0 al 6 y es bastante más fácil de dominarlo.
Este mismo truco lo hemos utilizado aquí para los meses, y creo que ya está.
Pero, bueno, que eso es lo que hace.
Ricardo dice que me empezó a seguir por Twitter por recomendaciones.
Muy bien, pues, muchas gracias.
También tengo Twitch, ya ves, es que tengo de todo.
Saludos desde México.
Pues yo, saludos desde Barcelona.
Y que estés muy bien, Ricardo.
Os digo una cosa.
Estamos súper cerca en YouTube de llegar a los 20.000.
Que si tenéis amigos, colegas, o lo que sea.
Mira, Brian Cano.
Justo ahora has entrado en el mejor momento.
Estamos casi de celebración.
Mira, 19.900 suscriptores.
Estamos, nada, ahí tocándolo.
Lo estamos tocando con las manos casi.
A ver, os digo justamente cuál es el número en concreto.
948.
O sea, lo estamos ahí acariciando.
Acariciando.
Faltan 52.
Dale cañita.
Afcanop.
Dale cañita, Afcanop.
Ya que me estás siguiendo.
Y te mando un abrazo.
Gracias por seguirme.
Está ahí, está ahí.
Está ahí.
Estamos a 52.
Así que nada, lo podéis compartir con vuestros amigos,
en foros, en discords, no sé, colegas en el trabajo.
No sé, que hacemos cosas muy chulas en el canal.
Mira, hoy hemos hecho este vídeo que dura menos de un minuto
y te enseña cómo hacer un texto degradado.
Que parece una tontería, ¿verdad?
Pero mira.
Este texto que veis aquí, pues con el CSS.
En menos de un minuto.
Madre mía, qué cosas.
Pues, bueno, que tenías cursos de React, de Svelte, de Next.js
y un montón de cositas interesantes.
Y una entrevista con Guillermo Rauch, el creador de Bersel.
Argentino.
Un crack.
Un crack.
Bueno, ya he terminado la promo.
¿La semana no empieza el domingo o estoy loco?
¿Cómo que empieza el domingo?
No, las semanas empiezan el lunes.
Bueno, en principio empieza el lunes.
A ver, depende del país, también es cierto.
Egocito, nos vemos.
Cuídate.
Mi buena es entrevista con Guillermo.
Gracias, Pablo.
Mi canal favorito.
Joder, qué majos sois.
Más buenos.
Pues a ver si engañáis a vuestros amigos ahí en tromba.
A punto de llegar a los 20.000.
Así que ayudadme vosotros y vosotras.
Y a ver si lo compartís ahí con un montón de gente.
Gracias por seguirme.
Cuadros Code.
Gracias por seguirme.
Sí, bienvenido a Twitch.
Aquí estoy.
Pues, ¿qué?
¿Volvemos a lo que estábamos haciendo?
Que nos lo estábamos pasando pipa.
Bueno, vosotros no sé.
Yo me lo estaba pasando muy bien.
El caso es que estábamos maquetando un calendario que hice un
vídeo en YouTube donde hablaba cómo maquetar el calendario
con tres líneas de CSS.
Alguien me dijo, bueno, sí, esto está muy bien,
pero ¿cómo lo haces esto en JavaScript?
Y yo le dije, a ver, sujétame el cubata, ¿vale?
Me sujeto el cubata.
Me tomé un poco un sorbo de cubata.
Y dije, vamos a hacerlo en Twitch.
Y aquí estamos haciéndolo en Twitch.
Entonces, hemos dicho que lo último que habíamos comentado es
que necesitamos, ya tenemos el mes con JavaScript totalmente traducido.
Podemos poner aquí el idioma que queramos y no lo traduce.
Y lo que nos falta es en qué día empieza.
En qué día empieza, justamente, ¿vale?
Y para saber en qué día empieza, vamos a utilizar el getDay,
que es muy raro, que el getDay es que los nombres de JavaScript
tendrían que ser getWeekDay, ¿no?
O algo así.
Pero bueno.
¿Dónde hacemos esto?
Aquí habíamos puesto el startsOn0.
Por ahora vamos a poner aquí...
¿Cómo haríamos esto?
Ahora estoy pensando, ¿eh?
A ver, tiene que ser algo parecido a esto.
StartOn.
Tenemos el día del mes.
Vale.
Esto habrá que arreglarlo, ¿eh?
Ojo, ojo.
Esto habrá que arreglarlo.
Todo.
Arreglar esto y explicar por qué.
Claro, porque aquí hay...
Creo que hay un error, ¿eh?
Luego lo miramos.
Pero...
Pero eso.
GetDay, GetDay.
Vale, entonces, en lugar del GetDate,
utilizamos el GetDay.
Y como es el día,
en lugar del 0 tiene que ser el 1,
porque es el primero del mes.
Y entonces el startsOn va a tener
el nuevo día,
o sea, el día del mes.
El día que empieza ese mes.
Venga, vamos a ver.
Vale, ahora no vamos a ver ningún cambio
que se renderice.
Y ahora te explico por qué, claro.
Y vamos a utilizar las Custom Properties
para darle sentido a esto.
Ahora no vemos ningún cambio,
pero lo que voy a hacer
es poner un Console.log del Calendar.
Calendar, aquí.
¿Vale?
Y vamos a ver qué tengo por aquí.
Vale, MonthName,
va, va, va, va.
Lo que quiero ver es el StartOn.
¿Vale?
Ya veo que cada uno tiene el suyo.
Por ejemplo,
Enero empieza en Lunes.
Vamos a ver si esto es cierto.
Vamos al calendario.
No, empieza en Lunes.
Ni de coña, vamos.
Ni de coña.
Vale, puede ser que Enero esté mal.
Puede ser que Enero esté mal.
Y ahora os explico por qué.
Y esto es lo que os tenía que explicar
de por qué creo que estaba mal.
Vale, Febrero dice que empieza en Lunes
y esto es Lunes.
Marzo dice que empieza en Lunes
y es...
Esto también está mal.
Ahora miramos.
Gracias por seguirme, StickFigure.
¿Por qué está esto mal?
¿Por qué está esto mal?
Gracias, Stoner, por seguirme.
¿Por qué está esto mal?
¿Por qué está esto mal?
Ah, ya sé por qué está mal.
Es que la he liado pardísima.
Gracias por seguirme, Zabiloz.
No sé,
ahora estáis aquí de todo.
Todos de golpe.
Ya sé por qué está mal, claro.
El Starts On no tiene que ser del siguiente mes.
Este lo hemos hecho antes
para el truco
para el truco de pillar el día
el último día del mes anterior.
Tiene que ser el mes de ahora.
Para que hacemos el Starts On
tiene que ser del mes de ahora.
¿No?
Vale.
Venga.
A ver, Febrero.
Empieza en Lunes.
Marzo.
Empieza en Lunes.
Esto está bien.
Abril.
Empieza en Lunes, Martes, Miernes.
Jueves.
Empieza en Jueves, Abril.
Empieza en Jueves.
Ahí lo tenemos.
Enero.
Enero, a ver.
Enero dice que empieza en Viernes.
Y esto está bien.
Empieza en Viernes.
Pero vamos a ver Diciembre,
que creo que es el que puede estar mal.
Diciembre de 2021 empieza en Miércoles.
Ah, no.
Esto va a estar bien.
Todos estos van a estar bien.
Bueno, ya tenemos el día en el que empieza la semana.
Y con esto ya vamos a poder dejar nuestro calendario casi, casi finísimo.
Pero voy a leeros antes, ¿vale?
Voy a leeros antes.
Porque he leído, he visto ahí por el rabillo del ojo cosillas.
Me encanta que hagas estos directos explicando código.
Me enriquecen un montón.
Gracias.
Yellowwin.
Una pregunta muy cliché.
¿Vale la pena Macos para desarrollar?
Yo creo que sí.
Yo creo que totalmente.
A ver, claro, me dices, quitando el lado costo.
Claro, es que el costo pica.
Pica, pica.
Tengo que decir que los M1, ojo, tienen muy buena pinta
y que están bien de precio para la potencia que tienen.
Eso sí, hay que tener cuidado de que realmente funcionen todos los programas que necesitas.
Pero si no necesitas pantalla, o sea, tienes un desktop y necesitamos un desktop y tal,
el Mac Mini sale a un precio interesante.
El más chiquitito, 799.
A ver, no lo puedes utilizar para jugar, por ejemplo, lo cual es un poco fail.
Pero ojo, ojo, cuidado, ¿eh?
799.
Y el MacBook Air, que además he estado viendo vídeos y tal en YouTube y funciona bastante bien.
Creo que para desarrollo web, desarrollo en iOS e incluso en Android seguro que funciona bastante bien.
1129, no está mal.
Entonces, a mí sí que me gustan mucho los dispositivos Mac para desarrollar, para jugar.
Por ejemplo, soy un gamer brutal y no me gustan para jugar.
Los odio.
Los odio a muerte.
Pero para desarrollar sí, porque tiene, creo que ese equilibrio perfecto entre temas de desarrollo, ¿no?
Un poco el Unix, que tiene un poco por debajo.
Y por otro lado, pues lo bonito y lo bien que va, está bastante bien optimizado.
Y para desarrollar en iOS, eso lo necesitas.
Así que, bueno.
Vas a poner el repo, ¿verdad?
Es que me perdí un cacho.
Bueno, a ver, el vídeo este todo se graba.
Bueno, os pasaré, si queréis, luego lo subo en CodeSandbox y os comparto la URL.
Así que, perfecto.
¿Qué último parámetro?
Dices, crezco.
¿Qué último parámetro?
Decías que no sabes para qué sirve.
El último parámetro del New Date.
No sé si te refieres a esto, pero básicamente esto...
A ver, ¿qué te explico?
Este es, este es...
Uy, gracias por seguirme.
A Cruz01.
Gracias por pasarte por aquí.
Y aquí estamos, con JavaScript.
Mira, esto es el año.
Este es el mes y este es el día.
Entonces, queremos ver el Starts On.
Lo que queremos hacer es, dime en qué día de la semana empieza el 1 de este mes del 2021.
Por cierto, que aquí he puesto 2021, pero teníamos que utilizar Actual Year.
Y aquí también, ¿eh?
Actual Year, que tenemos esta constante aquí arriba.
Mira, tenemos aquí arriba.
Y tiene más sentido.
Vale.
Entonces, ¿habrá enlace al Discord para los que estamos en Twitch?
Madre mía, pero si...
Pues claro.
Eso me lo tenéis que pedir.
Si soy más fácil de convencer.
La respuesta correcta al último post de Instagram que subiste es una rey de promises, ¿no?
Que me ha generado dudas.
Lo he probado, pero el resultado que me da no me aclara si es una rey de promises o de dos.
Sí, es una rey de tres promises.
Para el que no sepa de lo que habla, nuestro amigo Irrafael está hablando de este...
También tengo un Instagram, ¿eh?
Por si os queréis pasar.
Madre mía, 3.314 reproducciones.
Madre mía, la gente se ha enganchado a esto.
Bueno, esto también lo subí en YouTube.
Lo suelo subir a YouTube y lo subo también a Instagram.
Y básicamente es un reto y al final te dice cuál es la solución.
No vamos a ver spoiler por si queréis pasaros en instagram.com barra midu.dev.
Midu.dev.
Ojo que midu.dev es mi clon malo de la India, ¿vale?
Es este hombre de aquí.
Es mi clon malo.
El caso...
Os voy a explicar una historia que sé que no tiene nada que ver con programación, pero lo voy a explicar.
Yo me puse en contacto con este hombre, me puse en contacto con este hombre y le dije, oye, que tengo...
Mientras voy haciéndolo de Discord, ¿vale?
Para pasaros la invitación al canal.
Vale, pues le dije, oye, que es que tienes este nombre en Instagram y ¿sabes qué pasa?
Que me gustaría un montón tenerlo porque es que es mi apodo y es el que utilizo.
¿Qué te parece?
Y me dijo, ay, amigo, sí, amigo, claro, sí, mil euros.
¡Ja, ja, ja!
¡Qué rata!
¡Qué rata!
Mil pavos me quería vender por el clon.
El clon indio me quería vender.
Me quería vender su cuenta de Instagram por mil euros.
Y le dije, a ver, a ver, no te pases, ¿sabes?
Además le dije, le dije, que ponemos diez usos.
Diez usos, va.
Diez usos.
Diez usos.
Mil pavos.
Y le dije, hombre, tío, que no cobro por lo que hago en Instagram, que soy pobre, ¿sabes?
¿Cómo que eres pobre?
Que no sé qué, que, bah, mil pavos.
Y yo, joder.
Pues eso, ahí se quedó la cosa.
Me quedé, bueno, y tuve que hacer midu.def, que al final es como mi web y no pasa nada.
Pero esperaba que mi amigo de la India, pues, no sé, se enrollase un poquito.
Y no me diese mi cuenta.
¿Qué más le da?
Le digo, oye, pero ¿qué más te da?
Si midu.def parece un nombre de desarrollador y tú no eres desarrollador.
A ti te gustan los coches, las motos.
Porque empecé a seguirle y tenía fotos de eso.
Y me dice, ¿cómo que no?
Es mi nombre.
Y yo, ¿ah, sí?
Dice, sí.
Dice, me llamo midu.
Una cosa súper rara.
Dice, midu.
Y yo, ajá, sí.
Claro.
No podía ser otro.
Vale, pues venga, que seguimos con esto.
Me quedé a las puertas.
¿Qué le hice a Moment Yes?
¿Qué le hice?
No, hombre, eso no lo voy a hacer.
Eso no lo voy a hacer.
Bueno, que solo nos queda lo de Starts On.
¿Vale?
Solo nos queda lo de Starts On.
Esto no tengo muy claro si esto funciona bien.
Lo dejamos para el final.
¿O no?
Lo hacemos ahora.
¿Por qué?
A ver, esto.
Voy a quitar Console Logs, que solo nos queda eso.
Este Calendar lo voy a quitar.
Y voy a mirar un momento este Next Month Key.
Claro, ¿por qué digo que esto seguramente está mal?
Porque, a ver, si hago New Date, el mes cero es enero.
Vale.
Vale, es enero.
Entonces, cuando digo que quiero el siguiente mes del anterior, claro, lo que va a pasar aquí es que diciembre, si yo aquí pongo 12, digo cero, ah, pues ya está, sí que funciona.
Sí que funciona.
Os digo una cosa.
Estoy alucinando realmente.
Pero claro, tiene sentido.
Pero claro, estoy alucinando que cuando le pones 12, o sea, tú puedes poner aquí, es que está, JavaScript está muy loco.
Vamos a ver, o sea, tú, cuando creas una fecha, le dices el año, ¿no? 2021.
Y aquí le dices, vale, empieza desde cero.
Esto sería el 1 de enero de 2021, que no sé si se ve, pero está por aquí.
Vale, entonces, si tú le dices, vale, el 1 es febrero, pa, pa, pa, entonces llegas a diciembre con el 11.
Dices, vale, el 11. Venga, bien.
Diciembre 2021.
Dices, pues, ¿sabes qué? Ahora dame el mes 12.
Y JavaScript, que es más chulo que un 8, dice, claro que sí, el mes 12 es enero del 2022.
A ver, tiene sentido.
Pero claro, tú aquí puedes poner el mes, dame el mes 48, y te da enero del 2025.
Ostras, no tenía ni idea que esto existía, pero bueno, lo bueno de esto es que hace que este código que decía que tenía que arreglar, ya no lo tengo que arreglar.
Porque esto lo que va a hacer, justamente, es lo que necesitaba.
Pensaba que iba a tener que hacer una lógica de decir, vale, si estoy en diciembre, por favor, me subes el año y me recuperas el de enero.
Pero ya veo que JavaScript sabía que iba a tener este problema y ha dicho, bueno, pues ya te lo arreglo yo.
Vale, muy bien, pues, vamos a arreglar lo de... sé que he dicho esto hace un rato, ¿vale?
Pero ahora mismo todos los meses empiezan en lunes. Esto está mal.
Vamos a hacer que empiecen en el día correcto.
Para eso, teníamos aquí el primer día. Teníamos que decirle que el primer día tenía que tener una clase.
No sé si es tan importante que tenga una clase.
First day, por ejemplo.
First day.
Vale, podemos hacer que tenga una clase. Venga, sí, vamos a hacer que tenga una clase.
Class, vale, class.
¿Qué pasa? Que esto solo lo queremos para el primer día.
Por lo tanto, vamos a utilizar ahora también el índex del map este.
Y aquí lo que vamos a poner... a ver, podríamos hacer más cosas.
Esto va a complicar un poco el tema, pero...
Johnny Masurek, muchas gracias por seguirme. Te lo agradezco.
Crack.
Por cierto, feliz año y felices reyes a todo el mundo. Espero que os hagan entre ahí un montón de cosas y todo cosas buenas.
Vale, lo que vamos a hacer aquí es que aquí vamos a crear first day... bueno...
First day class. Vale.
Attributes. Attributes, mejor, ¿vale?
Y aquí lo que vamos a tener es un class, que esto sería el first day, y le vamos a poner el atributo aquí, que vamos a ponerle un estilo.
¿Veis? Con esto, esto es muy interesante.
Porque con esto lo que se puede hacer justamente sería utilizar una custom property y cambiarle el valor al vuelo.
O sea, con un estilo en línea.
Esto no se suele ver mucho y la verdad que está muy bien.
¡Ostras! ¡La rata primigenia!
¡La rata primigenia! ¡La primera rata ha llegado a Twitch!
¡La primera rata primigenia! ¿Cuántos años tienes? Cuéntanos.
Parece muy interesante saber cuántos años tienes.
¡Rata primigenia!
¡Ostras! ¡Qué bueno!
Vale, dice, sí, pero cambiaslo desde JavaScript.
Pero es más interesante, me parece mucho más interesante no hacer...
Mira, con JavaScript lo podríamos hacer.
Pero me parece más interesante hacerlo así.
Porque si se lo cambio por JavaScript, el scope es un poquito más complejo, Doria.
De esta forma, gracias por seguirme, Crisys Josue.
Crisys Josue.
De esta forma es mucho más fácil porque para cada mes le decimos, vale, toma, toma, toma, toma.
Y está mejor, ¿no?
¿Sabes? Está más scope de ese elemento.
Bueno, vamos a hacerlo y ahora veremos a lo que me refiero.
FirstDayStart, vale, lo que vamos a decir es que el FirstDayStart va a empezar con el StartOn, ¿vale?
Esto lo tenemos aquí, StartOn.
Tenemos que decirle a partir de qué día empieza.
Y estos FirstDayAttributes, la clase y este nuevo valor para esta CustomProperty es para el primer día.
Por lo tanto, esto, index, cuando es cero, ponemos los FirstClassProperties y si no ponemos un array vacío.
Ay, un array vacío. Un string vacío, perdón.
Si guardo los cambios...
Vale, pues ya está, ya funciona.
No, pero ¿por qué funciona esto?
No, no, no, no, esto no funciona.
Vale, funciona...
Vamos a ver, claro.
Esto funciona porque está esto, ¿vale?
Dice GridColumnStart y ahora todo se empieza en 5.
No, no, no.
Lo que justamente queremos con esto es indicarle que tiene que empezar con el FirstDayStart.
¡Ostras!
¿Cuántos guiones ha puesto?
Ahora.
Ahora sí.
Ahora sí.
Sí, sí, sí, ahora sí.
¿Veis?
Ahora, lo que estamos diciendo es que en esta clase va a leer la variable FirstDayStart,
la CustomProperty FirstDayStart, y eso va a ser el valor para el GridColumnStart.
De esta forma, ahora enero empieza en viernes, que si no me equivoco, y vamos aquí a enero,
empieza en viernes, febrero debería empezar en lunes, que aquí lo tenemos,
y en marzo también empieza en lunes.
De hecho, podría poner todo el año aquí, ¿no?
Ir revisando, a ver, pam.
Bueno, abril empieza en jueves, perfecto.
Esto empieza en fin de semana.
Bueno, que tiene buena pinta.
Y diciembre empieza en miércoles.
O sea que, perfecto.
De esta forma, es súper sencillo, ¿no?
El hecho de decir, vale, pues este mes empieza en tal, este mes empieza en otro, y ya lo tendríamos.
Solo con esto, ponemos un estilo en línea y le cambiamos el valor de la CustomProperty para cada mes.
¿Te sabías este truco?
Si no te lo sabías, dale like.
Ah, no, que no se puede dar like a Twitch.
Bueno, ¿qué le vamos a hacer?
Si no lo sabías, se lo cuentas a todos tus amigos y amigas y le dices dónde las aprendió.
Y si ya lo sabías, pues seguro que estás pensando, bueno, va de chorrada.
Pero bueno, no me digas que no valió la pena.
Y creo que con esto, pues tendríamos estilado un poquito nuestro calendario.
Bueno, a ver, todo esto ya no lo necesitamos porque justamente nuestro calendario, pues, es dinámico.
Lo estamos creando al vuelo, para que veáis.
Por GitHub, pues como Midudev.
Si me puedes encontrar por todos los sitios como Midudev.
Excepto en Instagram, que ya he dicho que está el clon indio.
Mira, este soy yo.
Este soy yo.
Este soy yo, Midudev.
Mira, aquí están mis últimos artículos, mis últimas fotos en Instagram, mis últimos vídeos de YouTube.
Y si quieres hacerte un Ritme tan chulo como el mío, porque todo lo que ves está generado automáticamente para recuperar Instagram, YouTube y todo esto.
Pues te vas a YouTube, Midudev.
Y aquí, ¿dónde dice?
Midudev, Ritme.
Hice un vídeo aquí.
Que bueno, también estuve un buen rato charlando.
Pero que hice mi Ritme ahí en directo para que todo el mundo viese cómo lo hacía.
Hicimos GitHub Actions, que es bastante interesante y tal.
Las Custom Properties enemigas de Style Component.
Bueno, pero en este caso, mira qué bien nos ha venido las Custom Properties.
Son súper poderosas las Custom Properties.
¿Te gusta más GitHub con...?
Sí, me gusta más GitHub con el tema claro.
A mí sí.
No sé.
Intenté el tema Dark y no...
Sí que es verdad que lo he activado alguna vez.
Cuando, por ejemplo, he estado, no sé, en la cama de noche y he dicho,
ah, quiero ver una cosa de Guija por un momento y tal.
Y sí, pues va bien.
Pero no sé, en general me gusta más el clarito.
Además me recuerda a mi web, que es toda clarita.
Tampoco tengo un modo oscuro todavía en mi web.
Pero, ¿qué os gustaría que hiciese en Twitch el modo oscuro de la web?
De mi web.
Y así lo hacemos entre todos.
Vale.
Bueno, pues lo interesante de esto sería todo esto que hemos hecho,
sacarlo a una función, ¿no?
Hacer un Create Calendar, que le pasamos el Local y el Year.
Y todo esto...
Pa, pa, pa.
Pa, pa, pa.
Hacemos así.
Hacemos el Salsa.
Y ahora ya podríamos crear Create Calendar y le ponemos el Year,
que podríamos decirle 2050...
2077, como Cyberpunk.
Y el Local, que sea, pues, catalán, por ejemplo.
Vale, ha apretado algo porque...
Claro, ya...
Ya lo ha liado con los nombres.
El Local es que lo deja igual, pero el Year era Actual Year.
Pues voy a poner Year, Year, Year.
Y...
¿Me he dejado algún Actual Year por aquí?
Actual Year.
Aquí.
Importante también.
Y bueno, ya está.
Mira, 2077.
Anda, un calendario con JavaScript, con traducciones.
Finísimo.
A ver, hemos estado una hora y 20, pero hemos estado charlando,
lo hemos estado aplicando.
Lo hemos estado haciendo paso a paso.
Yo creo que no está mal, no está mal.
Mira, Stoner y Rafael votan porque hagamos el modo oscuro de la web un día en Twitch.
Pues lo vamos a hacer, lo vamos a hacer.
¿Qué?
¿Alguna cosa que creáis que podamos hacerle al calendario?
¿Qué le podemos hacer?
No sé.
La verdad es que aquí ya...
Alguien dijo lo de los recordatorios, pero ostras, los recordatorios aquí ahora creo que no está mal.
La verdad es que me sorprende el tema.
Marcar en rojo el día de hoy.
Hombre, sí, eso puede ser.
¿Cómo podríamos pillar el día de hoy?
New date.
Esto sería el día de hoy y aquí podríamos recuperar el CSS.
Teníamos que recuperar...
Bueno, el día de semana no sería tan importante.
Get...
Bueno, claro, get date.
Teníamos el día.
Get month.
Teníamos el mes.
Y get...
Bueno, el year se supone que no debería ser...
A ver, debería, claro, debería ser importante, sí.
Que solo se vea en un mes en la vista y cambiar de mes con flechas.
¡Ostras!
¡Ostras!
Me parece interesante.
Me parece interesante ese, ¿eh?
¿Tienes pensado resumir estos directos, aunque sea un canal secundario?
Hostia, Nacho, es mucho trabajo.
Mucho trabajo.
Me gustaría, ¿eh?
Me gustaría hacer algo así.
Lo que pasa es que si ya mi canal principal, el de YouTube, me gustaría darle cariño
y llegar a los 20.000 y tal...
¡Ostras!
Imagínate si tuviera uno secundario.
Si me dedicase solo a esto, ¿sabes?
Si no tuviese trabajo y solo me dedicase a esto, lo haría, ¿eh?
Porque me parece bien.
Pero hacerlo tal y como ahora mismo estoy, que es trabajando, creando contenido y tal...
Lo veo complicado.
Bueno, me ha gustado este de pasar de un mes al otro, ¿vale?
Me ha gustado.
El solo mostrar uno y que se vayan pasando uno tras otro.
Además, con esto lo podríamos hacer con scroll snap.
Y, bueno, puede ser interesante.
No sé qué puede salir de esto.
O sea, podemos empezar a hacerlo.
Muchas gracias, RaRapture, por seguirme.
Gracias por pasarte.
Vale.
¿Cómo podríamos hacer esto?
Estoy pensando.
Por ejemplo, si yo aquí pusiese que esto...
Esto es esto.
Y esto.
Vamos a poner que sea todo.
Mira, esto me gusta.
Esto me gusta.
A ver, una cosa que se podría hacer rápidamente, que me parece interesante.
Oye, porque aquí hay un margen.
¿De dónde ha salido ese margen?
¿De aquí no será?
¿De dónde ha salido ese margen?
Sí que haré directos en YouTube.
Sí, pero voy a hacer más en Twitch.
Directos seguramente haré más en Twitch.
Porque así son más informales.
Me tengo que preparar menos cosas.
Voy un poco a mi bola.
Aprendo cosas.
Hablamos un poco.
Paramos.
Además, el problema es que YouTube, como tal, penaliza, en realidad, hacer directos largos.
No es algo que a la gente que consume en YouTube le guste.
O sea, a vosotros os gusta y lo sé.
Y os lo agradezco un montón.
Pero, por ejemplo, el de Frontend.
Hicimos uno de Frontend del 2001.
Que ha ido súper bien.
Que yo estoy súper contento y tal.
Pero, por ejemplo, hay cosas como, por ejemplo, hice este segmento de top 5 de los lenguajes de programación.
Y es un segmento súper interesante que lo podría sacar.
Pero si hubiese sacado ese vídeo, que bueno, ya sea, ya la gente lo ha sacado con el mismo contenido.
Pero lo ha sacado, ¿no?
Como un vídeo aparte tendría más éxito que no haber hecho un directo.
Que seguramente de información es bastante potente porque se habla de muchas cosas y muy interesantes.
Pero solo ese vídeo hubiera mejor tenido más éxito que todo el directo.
Que está genial que la gente, o sea, hay gente que aportó dinero y todo.
O sea, brutal.
Porque tengo una comunidad brutal y que sois geniales.
Pero, no sé, creo que en Twitch los directos, o sea, Twitch de alguna forma premia los directos.
Y además, cuanto más largos, mejor.
En cambio en YouTube el directo está bien, pero luego como que penaliza un poco.
Me da la sensación a la hora de buscar y tal.
Aunque este vídeo de YouTube tiene 10.500 visualizaciones y está tremendo.
Y estoy súper contento y tal.
O sea, que no descarto que haga vídeos en YouTube.
No descarto directos.
Vídeos voy a seguir haciendo seguro.
Pero seguramente directos los voy a enfocar más a Twitch.
Seguramente.
Ya veremos.
Ya veremos.
A ver cómo.
Oye, esto.
Sí, mira.
Estamos ahí a punto, ¿eh?
Estamos a punto.
Estamos, estamos...
Miren.
Yo, yo, yo, yo.
Ahí estamos, a punto de los 20.000.
Bueno.
Vamos a hacer esto.
Que comentamos un poco de...
Si hago directos cada día.
No hago directos todos los días.
Pero voy a intentar estar bastante activos.
Sobre todo ahora que necesito para ser afiliado que me...
Que hacer 8 horas, creo.
Pues voy a darle bastante caña.
Y voy a intentar, por ejemplo, voy a hacer directos como este.
De programar cosas que quiero probar y a ver cómo salen y a ver qué pasa y eso.
Eso sería un tipo de directo que quiero hacer.
Luego va a estar un tipo de directo que será más de yo trabajando en cosas que no puedo enseñaros.
Porque son de trabajo.
Ah, está en el body.
Este.
Y entonces...
Ah, pues he puesto Martín.
Ahora.
Vale.
Pues eso.
Trabajaré en mis cosas.
Y que puede ser mi trabajo del día a día.
Y quien quiera acompañarme.
Y entonces de vez en cuando charlar.
Y así trabajar juntos.
Y tal.
Trabaja y estudia conmigo.
Y eso es una cosa que quiero hacer.
Porque eso también me obliga, de alguna forma, a estar bastante más en el trabajo.
Y qué más.
También me quiero hacer entrevistas y quiero hacer cosas así.
Así que, bueno.
Voy a darle bastante gañita.
Vale.
Pues ahora que tenemos esto.
Ahora solo se vería uno en concreto.
Pero, ¿ves?
Esto sería como...
A ver, se podría hacer de otra forma.
Pero ahora mismo solo se vería uno.
Lo que me gustaría es...
Se puede hacer con flechas o se puede hacer con el scroll, por ejemplo.
Estaría bien si se pudiese...
A ver.
Ahí tengo...
Justamente tengo una cosa sobre esto.
ScrollSnapMiduDev.
La solución definitiva.
Podríamos utilizar el ScrollSnapType.
Esto en lugar de X.
Sería Y.
Porque es en el eje de la Y.
Sería de forma vertical.
Vamos a decirle que...
Esto debería estar...
A ver.
Flujo y hidden.
De esta forma.
Si aquí ponemos que la altura sea de 100.
¿Vale?
Y en All le vamos a decir que esto se alinee en el centro.
No sé si esto lo vamos a poder...
No.
¡Ay!
La lia parda.
La lia parda.
Claro, es que esto además...
A ver.
Vamos a ponerlo en modo tal.
¡Hostias!
Esto se ve muy pequeño.
Lo que quiero ver es si podemos hacer...
Si podemos...
Ostras.
Esto...
Overflow...
¿La Y es hidden?
No.
La Y debería ser scroll, ¿no?
Y la X es la que debería ser hidden.
Overflow hidden.
Mira.
Todavía tendríamos que afinarlo.
Vale.
Con el scroll se queda.
Aunque lo que podríamos hacer es que esto se hiciese con las flechitas.
Ahora que tenemos esto, sería más fácil añadirle flechitas.
Oye, todavía veo...
Esto no sé.
Es esto del body.
El margen ese.
Ahora.
¿Vale?
¿Me das permiso para descargarme el directo cuando acabes para tenerlos como biblioteca de recursos?
Claro.
Claro que sí.
Pero si el directo está para que lo utilicéis cuando queráis y como queráis.
Así que...
Claro que sí, hombre.
No os tenéis ni que...
No tenéis ni que preguntar.
Vamos.
Sí, sí.
Podéis hacer lo que queráis con el directo.
Claro.
El problema de este...
A ver.
Es que esto...
Vamos...
Para que sea todo...
Seguramente esto...
Se lo tenemos que poner a este.
Section.
Entonces vamos a tener un deep.
Un deep.
Lo podría hacer al revés.
¿Vale?
Para que se siga viendo dónde es.
Y me parece interesante lo de las flechas porque creo que podemos hacer el scroll to y ver eso como podría funcionar para que haga la animación y todo.
Entonces tenemos el section y tenemos el deep.
Entonces a esta hora le llamamos section y este sería el deep.
¿Por qué?
Porque el section tiene que ser también...
Vale.
Ahora la estoy leyendo aquí.
Esto es lo que tiene maquetar en directo, amigos.
Es que...
Claro.
El all este tendría que...
Deep.
Claro.
El deep es que al final tiene que ser de cada uno.
No puede ser de...
O sea, tendría que...
Esto, claro.
Esto lo tendría que...
Lo tendría que cambiar a nivel de cada uno.
O sea, tendría que poner un deep que englobase todo esto.
Aquí tendría que poner deep class...
Deep, deep...
¿Cómo le podemos llamar a esto?
Calendar, por ejemplo.
O month, ¿no?
Porque esto sería un mes.
Month.
Y hacemos esto.
Entonces ese es el mes.
Ese sería el que tendríamos que hacer.
Ahora voy a romper un montón los estilos, ¿eh?
Ya lo digo yo.
Este debería ser el que lo pongamos de esta forma.
O sea, que tenga esto.
Esto.
Que es lo que tendríamos abajo.
Y esto.
A ver.
Eso por un lado.
Vale.
Esto.
El problema ahora que tenemos...
Ta, ta, ta.
Tenemos el mes.
Pero el mes...
Claro, el grid.
No le...
No le mola.
Oye, esta musiquidad.
Está guay.
Un div por mes.
Sí, eso es lo que estoy intentando.
Buenísimo que comparta esto con todos.
Pues claro.
Ahí compartiendo.
Mientras estoy maquetando, pasando pipa.
Esto ya no está en JavaScript.
Pero...
Pero bueno.
Claro, los siete días de la semana.
Ta, ta.
Tenemos cada una de las fracciones.
Lo que pasa es que esto me la lía un poco parda, ¿no?
Claro, porque como lo tengo también ahí en ese...
Claro, cuando se ponen grandes sí que caben bien.
Pero si no...
Además, no queda del todo bien el...
¿Sabes?
Como que le sobra...
Le sobra ahí un poquito de...
Vamos a hacer esto.
Vamos a hacer esto y lo vamos a ver mejor.
Pam, pam, pam, pam.
Exacto.
Venga, vamos a ver qué le sobra.
Tenemos aquí...
Claro, el h1...
Claro, cuando hacemos que...
Esto es que no puede ser todo.
Porque si es todo, pues ya la liamos.
Tiene que ser así.
Lo que pasa es que este all no puede ser todo.
O sea, que tendríamos que hacer a su vez un grid que tuviese este.
De esta forma podríamos llegar a hacer que cada cosa ocupase lo que tenga que ocupar, ¿no?
Y aquí lo que le podríamos...
Vale, esto ya empieza a pintar un poco mejor.
Lo que podríamos decirle...
No sé si le decimos aquí directamente...
No.
Porque...
Le tendríamos que decir que esto es un grid...
Autocomum scripting plate...
Column...
Vale, y le decimos...
Column no.
No.
Algo así.
Vale.
Ahora sí que esto está fino.
Esto ya pinta mejor.
¡Visto!
Vale.
Esto para el mes.
No sé si he roto alguna cosa más.
Vale.
Lo que...
Ya vemos que podemos ir scrolleando.
Y esto que estamos haciendo lo podríamos hacer también con unas flechas.
De hecho, lo vamos a intentar hacer ahora.
¿Vale?
Le damos aquí, para arriba, para abajo.
Pim, pam, pim, pam.
No está bien porque haces un poco de scroll.
A ver, esto lo que queda bien...
De hecho, podríamos hacer que el scroll no funcione.
Pero mira, esto hace este efecto de pasar de un mes a otro.
Bueno.
Estoy viendo esto.
Esto en realidad lo podríamos cambiar también.
Podríamos hacer que fuese más chiquitito.
No hace falta que los day names tengan justamente la misma altura.
Claro.
Lo que pasa es que como es un grid, si hacemos esto, al final no tiene mucho sentido.
Tenemos que hacerlo a nivel de este grid.
Y hacer grid template rows.
Vale.
Place content.
No.
Esto no es lo que quiero.
Vale.
Pero al menos esto sí.
No, para hacer más chiquitito el tema de los días de la semana.
Con esto...
No quede tan...
¿Vale?
Entonces, mira.
Ya podríamos pasar de uno a otro.
¿Vale?
Voy a dejar esto así, con el grid template rows a 90.
Para que quede un poquito...
Este en el all.
Y lo que podemos hacer...
Porque decías, vale, pues quiero que unas flechas.
Vamos a ver si somos capaces de hacer esto en las flechas.
Voy a poner aquí, por ahora, a saco un botón que sea next.
Y vamos a llamar aquí que el document.queryselector a saco.
Le ponemos que escuchamos el evento de click.
Y que cuando hacemos click, ¿vale?
¿Qué es lo que tenemos que hacer cuando hacemos click?
Vale.
Saca el small name de los meses mejor que así en la pantalla de móvil.
Da como toque.
Sí, ya te digo.
Argueelo.
Arguello.
Arguello.
Lo podríamos cambiar aquí.
Justamente teníamos...
Weekday.
¿Dónde está?
Estamos en Intel Format.
No.
En los Intel que estamos creando.
Estos los días de la semana.
Podríamos poner short.
Y aquí ya tendríamos, pum, cortos y pequeños.
Pero bueno, ha quedado bastante bien el calendario este.
No está mal.
No está mal.
Lo que quiero...
No sé si hacer algo así.
Sí, ¿no?
Queda un poquito más...
¿Cómo me gusta más?
¿Con el center o arriba?
No sé.
Sí, ya estamos haciendo un Google Calendar aquí en un momento.
A ver, vamos a buscar el Google Calendar.
A ver, faltarían cositas, pero no está mal.
No está mal, ¿eh?
¿Arriba os gusta más?
Bueno, sí, arriba es como lo tiene...
Vale, pues lo dejamos arriba.
¿Está centrado arriba?
Sí, venga.
Pues vamos a ponerle, si os parece, para que sea más Google Calendar.
Vamos a ponerle ese bordecillo, ¿no?
Que tiene.
No sé si esto...
Ay, aquí no.
No sé si esto quedará muy bien.
Claro, es que va a tener como un doble...
Claro, y los que están separados, ¿qué?
¡Ah!
¡Ah!
Esto no lo habíamos pensado, ¿eh?
Cuando hicimos el columnar estar aquí.
¡Ah!
Claro, aquí se ven los días anteriores.
A ver, lo podríamos llegar a hacer, ¿eh?
Los días anteriores.
No...
Es tedioso, pero no sería imposible, porque ya lo hemos visto, ¿vale?
Y además...
Bueno, no queda mal.
Pero bueno, lo vamos a quitar, porque sí que es verdad que entonces se ve la vergüenza.
Se ve la vergüenza.
¿Qué decís?
De poner esto de sticky.
Bueno, esto lo podríamos poner sticky.
Lo que pasa es que entonces deberíamos no utilizarlo en cada mes, ¿no?
Podría ser una forma...
¿Quién utiliza esto?
Mira, React Calendar.
React...
No, React Dates creo que utiliza esto.
Ese efecto de dejar los días de la semana, dejarlos ahí, creo que los hace React Dates.
¿Puede ser?
Sí, mira, ¿ves?
Están ahí fijos.
La verdad es que está muy bien pensado.
Le da un efecto bastante chulo.
Pero a ver, vamos con el botón.
Tenemos el botón este.
Vamos con el botón.
Vamos con el botón.
Bien, el CH...
Alguien me preguntaba, ¿qué es el CH este?
El CH, que lo estoy utilizando con los números, el CH lo que significa es el espacio que en este tipo de letra ocupa el número cero.
¿Vale?
Es un poquito especial.
Pero lo que te hace es el ancho que utiliza el número cero es el que se utiliza para la fuente.
Tú le dices cuántas veces lo tengo que utilizar.
Hola, Moonshape.
Muchas gracias por seguirme.
Bienvenido o bienvenida.
Espero que te lo pases genial.
Vale.
Entonces, ¿por qué es útil esto?
Porque si tú pones en números, pones que tenga un font size normal, cuando se utilizan dos números puede ser que uno ocupe más que el otro.
Pero de esta forma los dos, el 15 y el 16, ocupan de ancho lo mismo.
Y queda bastante bien visualmente.
Si no, lo que te puedes encontrar es que ocupen un poquito más, un poquito menos y tal.
Y es un poco raro.
Sobre todo esto va bien con los contadores para que no den saltos.
Y con eso queda bastante bien.
La idea del calendario, básicamente, no sé si os acabáis de entrar, quien se acabe de incorporar, que sepa que lo que hemos hecho es que yo tenía un vídeo en YouTube.
Que era de maquetar un calendario con tres líneas de CSS.
Con tres líneas de CSS se podía maquetar un calendario.
Y era utilizando Grid y estaba bastante bien, pero mucha gente me dijo, oye, ¿qué pasa?
Es que tú has creado aquí el HTML y esto es un coñazo crear HTML.
Vale, pues lo que hemos hecho hoy, que hemos estado aquí un ratito, es que lo estamos haciendo todo con JavaScript.
De forma que el HTML se genera automáticamente.
Así, de esta forma, pues tenemos aquí un calendario que dices, vale, pues esto es de enero de 2077.
Y ahora le podemos pasar el año y el idioma y nos genera el calendario.
Y todo esto con JavaScript, puramente JavaScript.
Y le podemos decir también, pues en japonés.
Lo pone en japonés.
Qué chulo, ¿no?
En japonés.
Súper guay.
Muy chulo.
Bueno, pues eso.
Y ahora lo que estamos haciendo es un efecto de que solo salga un mes y que se pueda pasar de uno al otro.
Y bueno, que tenga este efecto y está bien.
Pues eso.
Pues eso.
Pues nos quedamos ahí con el botón que queríamos que al seleccionar este botón, vamos a destilar el botón un momento.
Y vamos a poner que tenga un Position Absolute.
Bueno, podríamos poner que sea Fix o Sticky.
Pero vamos a poner y que se quede siempre a 10.
32 píxeles, 32 píxeles, Border Radius.
Vamos a poner esto de este color mismo, de este color mismo.
Vamos a ver por dónde sale este botón.
Vale.
Borde 0, Padding 32 píxeles.
¡Hostia!
¡Ostras!
Nuestro botón.
Vale.
Y pon TextOnline.
Bueno, tampoco es muy importante cómo se vea, ¿eh?
Era por...
De hecho, vamos a poner aquí Down.
Como para el siguiente, básicamente.
La idea.
With.
¿Ya había puesto With?
¿Cómo lo estoy imaginando yo?
Ah, ¿no?
Vale.
Bueno, esto es nuestro botón.
¡Uy!
Short.
Vale.
Lo que queremos es que cada vez que le demos, vaya al siguiente.
Entonces, ¿cómo podemos hacer esto?
Y esto es interesante porque...
¿Qué es lo que se supone...?
Tendríamos que utilizar, yo creo, el Scroll To.
De esta forma, vamos a ver cuál es el que tiene el Scroll.
El que tiene el Scroll es el Section, ¿no?
Section...
No, es el Deep.
Vale.
Pues el Deep.
Bueno.
Pues el Deep.
Vamos a Document, Query, Selector, Deep.
Scroll To.
A ver qué pasa con esto.
No pasa nada.
Vale.
Vamos a ver una cosa.
O lo podemos ir probando más fácilmente si lo abrimos aquí y vamos haciendo cosas.
No, es que Scroll To...
Es que no es Scroll To.
¿Esto cómo es?
A ver.
Query Selector.
El Deep.scrollBy...
No, no sé qué tiene Scroll To.
¿Por qué me ha dicho que no?
Vale.
X.
Vale.
X es indiferente.
Uno.
¿Menos uno?
No.
Bueno, pero al menos ya esto sí que tiene Scroll To.
¿Qué he puesto aquí?
Document Query Selector.
Deep.
Pero me ha dicho...
Tu Dictionary at HTML's Button.
Vale.
No sé por qué aquí se me está quejando de este Document Query Selector al recuperar el Deep.
QuerySelector.scrollTo.
Add Listener.
No debería haber más.
Ah, sí, claro.
Tiene razón.
Igualmente el Query Selector me debería devolver uno.
Porque si yo pongo esto, esto debe ser un elemento solo.
Solo tiene que ser un Deep.
¿No?
Y aquí...
Y aquí...
Shup.
Hacemos esto.
Y esto solo es cuando le damos al siguiente.
Está ahí abajo.
¿Ves?
Aquí tenemos este.
O sea que esto lo está haciendo bien, ¿eh?
Está recuperando bien el que queremos y tal.
Lo que no...
Hombre, César Vidal 2002.
Muchas gracias por pasarte.
ScrollTo.
ScrollTo.
ScrollTo.
Funcionar debería funcionar.
Pero, ¿qué es lo que queremos decir?
Le decimos las coordenadas a las que tiene que ir.
Vale, claro.
Esto...
Vale, vale, vale, vale.
Claro, claro.
Las coordenadas.
Efectivamente.
Claro.
Entonces, en este caso, si nosotros hacemos el documento.querySelector y recuperamos el Deep, que es el Deep que queremos, y le hacemos ScrollTo, esto lo dejamos igual y hacemos menos 2000, esto está sudando de nosotros.
Ah, ahora sí.
Ahora sí.
Vale.
Vale, vale.
Entonces, si ahora le...
Claro, mejor si utilizamos esto y además...
Porque se entiende mejor, es que al final el top es lo que queremos.
Lo que queremos aquí cambiar es el top, que sea 2000.
Por poner un ejemplo, Behavior Smooth.
Vale, esto es que ya estaba.
Bueno, el Behavior, no sé si es que lo he escrito mal.
Sí, lo he escrito mal.
Lo he escrito en la forma...
Vale, aquí está.
Bueno, ahora este ya lo teníamos aquí.
¡Madre mía!
Pues ahí tenemos.
Claro, el tema ahora es saber cuánto ocupa cada uno.
Pero bueno, que esto es lo que tiene buena pinta.
Vamos a ver por qué esto no nos funciona.
Dime por qué no me funciona.
A ver, si hemos visto ya que esto está bien.
Vale, Deep.ScrollTo.
Vale, entonces le decimos...
Por ahora vamos a ir a saco.
Vamos a poner top 5000.
Que ahora lo calcularemos.
Esto se puede calcular.
No pasa nada.
Behavior Smooth.
Vale, para que haga el efectito.
Vamos a refrescar.
Le doy al botón este pequeñísimo que tenemos aquí.
Bueno, a ver, puedo hacer esto así para que veamos el botón.
Vale.
Ha hecho un salto, pero lo importante es que sí que va.
Ahora, lo que podríamos hacer es que vaya siempre al siguiente.
Para hacer esto, creo que lo que tenemos que poner aquí...
Podríamos poner un estado.
A ver.
Podríamos hacer un montón de cosas aquí.
Podríamos recuperar el scroll actual.
Podríamos recuperar el scroll actual.
Hacer un intersection observer.
Podríamos hacer tantas cosas.
Podríamos tener un estado para guardar en cuál estamos.
O ir informando en ese intersection observer.
Y ir actualizando en qué posición nos estamos encontrando.
Para que haga el correcto.
Por ahora lo que voy a hacer es que siempre vaya hacia abajo.
Y entiendo que para eso.
Vamos a utilizar el inner height.
Que es lo que ocupa window.
Window.
Es lo que ocupa.
Entonces, cada vez que le demos window.inner height...
Esto debería ser el scroll top más...
Vale.
Document.
Query selector.
Vamos a ver si me devuelve esto el scroll top.
Vale.
Vale.
Eso es cuánto ha scrolleado ya.
Más.
El siguiente.
Si empezamos en el 1.
Vamos al 2, al 3, al 4.
¿Qué te parece?
Vale.
Ahora el problema.
Vale.
Pues ya está.
Es que ni siquiera hace falta guardar en la variable.
Porque como estamos utilizando el scroll top.
Y siempre decimos que queremos ir al siguiente.
Pues ya está.
Ya tenemos aquí una flecha.
Que nos va siempre al siguiente.
Qué bien pensado, ¿no?
Mira que...
Estaba pensando.
No, si hago esto.
Pues seguro que no sé qué es lo cuento.
Y claro.
Con esto ya nos lo arregla.
Claro, claro, claro.
Y además, hacer algo al revés no debería ser muy complicado.
Mira.
Vamos a poner aquí app.
Bueno.
Vamos a ponerle una idea.
Por hacer app.
Y...
Bueno.
App.
Yo también.
Yo también soy dislésico.
Soy dislésico.
Vamos a ver.
App.
Esto.
Para arriba o para abajo.
Venga.
Venga.
Claro, el app al principio no tendrá mucho sentido.
Pero bueno.
El query selector.
Get element by id.
Y recuperamos el down.
Aquí.
Recuperamos el app.
A ver.
Que esto se podría reutilizar mejor.
App.
Aunque sea para no volverme muy loco.
Vamos a poner esto así.
Lo que me falta ahora.
Claro.
Tenemos el botón.
Pero claro.
Al botón.
Ahora el app.
Voy a querer que esté un poco por encima.
Así que vamos a poner que el bottom está...
Bueno.
Voy a ver cómo queda esto.
Ahora lo arreglamos.
Más o menos.
Está chulo.
Está chulo.
Ha quedado súper bien.
Drop the mic.
Mira.
Hemos creado un calendario con javascript.
Una hora cincuenta.
Tampoco nos tarda tanto.
Tampoco nos tarda tanto.
A ver.
Mira.
Le puedes dar un montón de veces.
Y no se rompe.
A lo mejor te va.
Pero tampoco hace nada extraño.
¿Sabes?
Pues si le das dos veces.
Y todavía no ha calculado suficiente.
Pues bueno.
A ver.
Podríamos hacer.
Podríamos hacer.
Desactivar el botón.
Y tal.
Además.
Mira.
Es súper accesible.
Además.
Porque mira.
Tenemos.
Podés scrollear si quieres.
Puedes ir con las flechitas.
Si estás con el móvil.
Puedes hacer el swipe.
Y vas al siguiente.
Para arriba o para abajo.
Tienes los botones para ir.
¡Ostras!
¡Máximo!
¿Qué?
¿Qué?
¿Qué?
¿Qué?
¿Qué?
Madre mía.
Ya hay gente que está alucinando de tal forma que hablan japonés.
Es increíble.
Un poquito de performance.
En vez de buscar con selector.
Puedes sacar el scroll con window scroll y window inner height.
Un poquito de...
En vez de buscar con selector.
No, ¿eh?
Lo que comentas arguello, aunque arguello, aunque tiene buena intención, no.
No porque...
Bueno, al menos por ahora, ¿eh?
Porque el window...
No tenemos el scroll y del window.
No lo tenemos.
Está en el elemento, que es el que funcionaría.
Que sí que podemos optimizar, ¿eh?
Hemos hecho aquí cosas a saco para ir avanzando.
Seguro que, por ejemplo, esto de recuperar el dip este cada vez que hacemos el click.
Esto no tiene mucho sentido.
Este dip seguramente...
Bueno, vamos a ponerlo así.
Lo podríamos sacar una vez.
Esto ya lo quitaríamos.
Esto también lo quitaríamos.
Luego, aquí abajo, esto también ya sería en el innerHTML este.
Por cierto, voy a formatear esto porque está mal formateado.
Y, bueno, funcionar seguiría funcionando.
¿Vale?
Luego se podrían hacer más cosas.
Por ejemplo, esta función...
El window este también se podría poner una vez.
Vamos a recuperarlo.
InnerHight.
Esto que sea en Height.
O Window.
¿Vale?
Pero esto es lo que nos obligaría, aunque es más performante, lo que deberíamos hacer es tener un AddEventListener
para asegurarnos que recuperamos la información correcta si se hace un resize de la ventana.
Esa podría ser una.
Tampoco, a ver, como es al hacer clic, tampoco sería tan problemático.
Tampoco me parece muy grave.
Luego, otra cosa que se podría hacer, pues reutilizar lo de la función.
Esta parte de la función, reutilizarla también.
La diferencia sería multiplicar por menos uno, uno de los dos y ya está.
Ya estaría.
Bueno, Arguello, pues nada.
Un abrazo.
Un abrazo.
Bueno, el viernes por la noche hacemos streaming otra vez aquí en Twitch, así que apúntate.
No sé si mañana estaré.
Sí, igual, sí que me animo, a saco.
Y nada.
Pues nada, yo creo que ha quedado brutal.
Muchas gracias a los que os habéis quedado hasta aquí.
Estamos cerca de los 20.000 en YouTube, ya sabéis.
Y compartiendo en vuestras redes sociales, en donde sea, para que todo el mundo no se pierda mi canal de YouTube o Twitch.
Vamos a irnos a descansar, que creo que hemos hecho un trabajo fabuloso y que ha quedado genial.
Ya subiré en Code Sandbox.
Os lo subo ahora, antes de que nos vayamos todos a por ahí.
Venga, os lo subo ahora, ¿vale?
Y os lo dejo en el chat, que no se diga que esto no se ha creado, que nunca ha existido.
Bueno, vamos a crear un Sandbox.
Y el Index HTML, os lo dejo aquí.
Al final lo hemos hecho todo en un Index HTML, así que no es lo ideal, ¿vale?
Pero os lo saco.
¡Wow! ¡Qué guay!
Ha quedado de lujo.
La verdad es que ha quedado de lujo.
Calendario con JavaScript.
Ha quedado de lujo.
No sé, no sé de muchas cosas de estas todos los días.
Vamos a ver.
Copy Sandbox link y os lo paso, ¿vale?
Y ahí lo tenéis, para vuestro disfrute.
Te vas contenta, ¿eh?
Porque has aprendido cosas nuevas.
Genial.
Pues yo también me voy contento por haber compartido con todos ustedes.
Pues cuidado mucho y nos vemos en el siguiente directo, en el canal de YouTube, en Instagram,
o en Twitter o en cualquier sitio, en cualquier lado.
Bueno, venga, un abrazo.
¡Chao!
¡Chao!
Gracias.