He visto esta demo y me ha parecido increíble.
Es que me parece brutal, me parece brutal
la de cosas que se pueden hacer con JavaScript.
¿Veis? Es un león que está viendo como el cursor
y el cursor este que veis aquí, eso es un ventilador.
Y mira, si le das un clic, madre mía,
es que me parece brutal que detecta la inclinación y tal
y es como que le hace viento.
O sea, está súper chulo, está súper chulo.
Y bueno, está chulo porque obviamente está hecho con 3GS
y tenéis aquí todo el código.
Y a ver, no se ve un código sencillo
y hay bastante matemática, geometría y tal.
Pero me ha parecido muy chulo porque al final
es que con tan poco, porque a ver, sí que es verdad,
pero son 500 líneas de código.
Y veo muchas líneas que yo creo que se podrían...
Bueno, 500 son 700 líneas.
Y está bastante chulo, no sé.
Me ha llamado bastante la atención.
No sé si sabéis que hay una competición
de crear juegos de JavaScript con 300K, 300KB.
Y han salido los ganadores.
Entonces, yo he aprendido cosas muy locas
viendo el código de estos participantes.
No de este año, que no me ha dado tiempo, ¿vale?
Pero sí que muchos años he estado viendo,
es una competición anual,
y muchos años he estado viendo, pues,
oye, cómo han hecho.
Porque claro, 13Ks.
Y hay otras competiciones que son de un K.
Y a veces le he hecho un vistazo como para aprender,
porque es muy interesante.
El hecho de cuando tienes muy poco espacio,
como la inventiva y tal,
pues a ver, es curiosidad.
Y en este caso han salido los ganadores de 13Ks.
El ganador me parece una salvajada.
Este es el ganador.
Como todos los años, siempre hay un tema.
Este año era el siglo XIII.
Y han tomado los 13 primeros, ¿vale?
Porque son 13Ks.
Bueno, el ganador me parece una salva.
El Paz to Glory este.
Además, es totalmente de código abierto.
Está hecho con JavaScript.
Lo tenéis por aquí.
Todo el código y tal.
Le podéis echar un vistazo.
Pero sinceramente, es que me parece una verdadera salvajada.
Primero, porque tiene audio.
Tiene audio, ¿vale?
Que le voy a quitar para que no nos moleste todo el rato.
Pero el audio es espectacular.
Tiene audio en esos 13Ks.
Luego, fijaos que lo podéis mover, ¿vale?
Mover para arriba, para abajo, para la derecha.
Tiene efecto de lluvia.
Tiene también...
Mira, voy a hacer el skip para saltar.
Para saltar.
A ver si puedo...
Sí, venga.
Skip intro.
Venga, ya me...
O sea, tiene un tutorial.
Tiene un tutorial.
Luego aquí ya tienes como para...
Pero es que, fijaos, que tiene efectos de agua.
Que son 13Ks, ¿eh?
A ver si encuentro...
Oye, ¿qué ha pasado?
Ah, que tengo que ir por aquí, por el camino, me parece.
Mira, hay un malo.
Hay un malo.
Bueno, te puedes...
¿Ves?
Puedes cubrirte.
Puedes bloquear.
Puedes luchar.
Tienes barras.
Tienes...
O sea, es que me parece increíble.
Sí, sí, sí.
Es brutal.
Es brutal, ¿eh?
Está bien chulo.
Y esto es solo uno de ejemplos de todos los que hay.
Porque fijaos que hay un montón.
Este es increíble también.
Este yo no sé.
No sé cómo lo han hecho.
Hay un montón que...
13Ks, amigos.
13Ks.
Hay algunos que son en 3D.
Mirad este.
Fist and Night.
Que hay algunos hasta de hecho.
De miedo.
Hay algunos que os vuelan a la cabeza.
Os recomiendo mucho que le echéis un vistazo.
Porque la verdad es que son muy curiosos.
Y sobre todo porque aprendes.
Mira este.
Este, una cosa que tiene muy interesante.
Es que es un puzzle.
También tiene música.
También tiene música.
Y fijaos.
Lo que detecta es que tienes que como mover todos los objetos que son amarillos.
Fijaos.
Lo bajamos.
Y entonces tienes que ir resolviendo.
O sea, me parece brutal.
Me parece brutal.
¿Ves?
Aquí tienes que mover y entonces puedes llegar aquí.
Pero fijaos que tienes los dibujos.
Tienes los gráficos.
Lo tienes todo.
Y son fases que también tienes como...
Mira, y este es hasta 3D.
Que tienes que moverte.
¿Vale?
Tienes que ir moviendo y tal.
Bueno.
Os recomiendo que le echéis un vistazo a los ganadores.
Y que le echéis un vistazo al código.
Porque se aprende un montón.
De hecho yo voy a intentar esta noche echarle un vistazo a los ganadores.
Porque me parece tremendo.
¿Vale?
Para comentaros una novedad que va a llegar a CSS.
Que está muy chula.
Que es un nuevo método.
Porque ya sabéis que para hacer un modo oscuro en CSS.
Hasta ahora.
Había que hacer una media query.
Por ejemplo.
Imaginad que tenéis.
Esto es una variable de CSS.
Una custom property.
¿Vale?
Y teníais que poner que este es el valor por defecto.
El valor por defecto sería el modo claro.
¿Vale?
Imagínate que en el modo oscuro.
Dices.
Vale.
Pues para modo oscuro.
Esta custom property.
Quiero que sea más clarito.
Entonces hacías esto.
Para hacer el modo oscuro.
Hacías esto.
Pero tenías que utilizar una media query.
Y finalmente tenías que hacer esto.
Mira.
Os lo voy a poner.
Todo el código que había que hacer.
Para conseguir que el body tuviese dos modos.
Yo creo que esto.
Esto está mal.
Porque esto le falta a esto.
Pero bueno.
O sea.
Habría que hacer todo este código.
La nueva forma de hacer lo mismo.
Vais a flipar.
Es que aquí lo que hacéis es color.
Y hacéis light dark.
Y le ponéis los dos valores.
Este valor sería para el modo claro.
Y este valor sería para el modo oscuro.
Punto.
Lo que está pasando son los dos valores.
Donde tienes por un lado el modo claro.
Y el modo oscuro.
Ojo.
Porque el light dark solo funciona para las propiedades que son de colores.
¿Vale?
Lo malo.
Que esto.
Solo lo soporta por ahora Firefox.
¿Vale?
Por ahora solo está soportado por Firefox.
Pero bueno.
Esto es una cosa que va a llegar seguro.
Seguro.
A todos los navegadores.
Ay.
Por cierto.
Perdón que he puesto light dark sin el guión.
Es con guión.
¿Vale?
Pero fijaos que con esto os quitáis 13 líneas de código.
13 líneas de código.
Y solo lo tenéis con dos líneas de código.
Solo funciona para el modo claro y el modo oscuro.
¿Vale?
Por desgracia.
O sea.
No podéis tener más de un modo.
Y esto funciona solo para que sea como un formato binario.
Todavía podéis seguir utilizando todo esto si queréis.
Que sepáis que en Can I Use lo podéis ver.
Podéis buscar el light dark.
Light dark.
Y este nuevo método por ahora solo lo tiene Firefox.
Fijaos que tengo un 0% aquí.
Solo Firefox lo está añadiendo.
Pero ya os digo que he estado leyendo que tanto Chrome en la versión 122 como Safari y Edge lo van a añadir también.
Porque bueno.
Esto es una cosa que va a ser parte de la especificación.
Y al parecer pues va a llegar seguro.
Está en el CSS Working Group.
¿Lo ves?
CSS Working Group.
Y el resultado es este light dark.
O sea.
Es una cosa que ya está asegurada.
Llegará eventualmente.
Llevan tiempo trabajando en ello.
Y aquí están hablando justamente de esto.
Y ya lo tendríamos.
Pero bueno.
Bastante interesante.
Porque si no.
Era bastante complicado.
Tener que escribir constantemente media queries y tal.
¿En Firefox no cuenta o qué?
No.
No cuenta.
No cuenta.
Por eso es un 0.
Es un 0 porque Firefox no cuenta.
No.
Es broma.
¿Por qué Firefox?
¿Ves?
Que está aquí en verde.
Porque es un 0.
Porque es un 0%.
Es que Firefox 120.
Si vamos aquí.
Vamos aquí.
Tú, tú, tú.
Y nos vamos aquí.
Vamos aquí.
La última versión de Firefox es la 118.
¿Vale?
Es la 118.
Y si te fijas.
La única versión que tiene soporte es la 120.
Y tú dirás.
¿Pero cómo la 120?
Si todavía no hay usuarios que tengan 120.
Bueno.
Porque obviamente.
Tanto Firefox como Chrome.
Tienen versiones Scannery, Beta, modo desarrollo y tal.
Que van un poquito más adelantadas.
Y digamos que son las que tienen las características que van a llegar en los próximos meses.
Hay muy pocos usuarios que utilizan estas versiones.
Por eso es un 0%.
Porque todavía la estable.
Está a punto de salir la 119.
Ahora es la 118.
Y cuando llegue a la 120.
Estará soportada.
Por eso va a llegar en las siguientes versiones.
¿Vale?
O sea que ahora lo entenderás.
Ahora lo entiendes.
No es que no valga Firefox.
Sino que esa versión que está en modo Beta.
Todavía no la tiene casi.
Ese es el tema.
Ese es el tema.