Haz que la Web Sea Extraña de Nuevo

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

La web es capaz de mucho más de lo que podríamos pensar. Durante esta charla, exploraremos algunas partes menos conocidas de la web. ¿Sabías que puedes controlar la web a través de webHID o enviar y recibir notas a dispositivos a través de webMIDI? En esta charla interactiva podríamos hacer música juntos, controlando sintetizadores y explorando la amplia gama de extrañas API's web. Todo eso en JavaScript puro, sin necesidad de frameworks.

This talk has been presented at React Day Berlin 2024, check out the latest edition of this React Conference.

Elian Van Cutsem
Elian Van Cutsem
29 min
13 Dec, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Soy Elian, el desarrollador principal en React Bricks, y hoy hablaré sobre la web extraña y cómo nosotros, como desarrolladores, tenemos el poder de hacerla aún más extraña. Podemos usar APIs como la Battery Status API para manipular sitios web según los niveles de batería, pero también debemos ser cautelosos con su potencial de uso indebido. Otra API interesante es WebHID, que permite la interacción con dispositivos de hardware a través del navegador web. Tejas introduce WebMIDI y demuestra cómo se puede usar para controlar aplicaciones web usando dispositivos MIDI. Los ponentes enfatizan la importancia de abrazar la diversión y la rareza del desarrollo web y fomentan la experimentación. También discuten la tolerancia al fracaso y la alegría de llevar los límites en la construcción de proyectos no convencionales. En general, la charla destaca el potencial de creatividad e innovación en el desarrollo web.
Available in English: Make the Web Weird Again

1. Introduction to the Web and Myself

Short description:

Soy Elian, el desarrollador principal de React Bricks. También soy un mantenedor de Astra. Soy parte de BGS, un grupo organizador de conferencias. Si quieres seguirme en línea, estoy en Elian Codes en todas las plataformas. Hoy, les daré una charla que se adapta a mi personalidad alegre.

La web puede ser rara. De eso voy a hablar hoy.

En primer lugar, ya recibí una presentación increíble, pero lo haré yo mismo de nuevo. Soy Elian, el desarrollador principal de React Bricks, que es una empresa de CMS, Visual CMS con Componentes de React. Es muy genial. También soy un mantenedor de Astra. Solía trabajar en el equipo central durante un año. Soy parte de BGS, que es un grupo organizador de conferencias muy parecido a este. Hacemos React Brussels, React Paris, y ahora también React Africa, lo cual es increíble. Primera conferencia en África. Y soy de Bélgica. Vivo en Gante. ¿Tengo compatriotas belgas aquí? Uno. ¡Hola! Bien. Bien. Ya estoy. Me encanta. Está bien. Genial.

Si quieres seguirme en línea, estoy bastante seguro de que algunos de ustedes van a tomar fotos. Por favor, etiquétenme. Siempre lo encuentro muy divertido. Estoy en Elian Codes en todas las plataformas, solo BlueSkiesElian.Codes, que también es mi sitio web.

Así que antes de comenzar aquí, durante el último año, he hecho muchos eventos, muchas conferencias, muchas reuniones, y todas fueron sobre temas muy, muy serios como accesibilidad, rendimiento, CSS, lo que sea, JavaScript. Realmente genial, realmente genial, pero también muy serio. Así que pensé, no me malinterpreten. Me encanta dar todas esas charlas, especialmente sobre Astra y todo eso. Me encanta. Pero pensé que hoy les daría una charla que se adapte más a mi personalidad, que es alegre y divertida y todo eso, graciosa. Así que todos se van a divertir.

2. The Weird Web and My Inspiration

Short description:

Hoy, estoy aquí para hablarles sobre la web rara. Desde que era un niño pequeño, me encantaban los sitios web raros. Uno de mis favoritos era Eelslap, donde golpeas a alguien con una anguila. La rareza de la web me inspira a hacerla más divertida.

Ese es mi objetivo para hoy. ¡Diviértanse! Sí.

Así que hoy estoy aquí para hablarles sobre la web rara. Desde que era un niño pequeño, hace mucho tiempo, me encantaban los sitios web raros. ¿Alguien más tiene esa experiencia? Como cuando estaba en la escuela. Era un niño pequeño. Tenía una computadora con internet. Tuve la suerte de no ser ni tan viejo ni tan joven cuando me presentaron eso. Me encantó.

Y fui a este sitio web. ¿Quién recuerda este? Muchos de ustedes, ¿verdad? Y especialmente este. Este era mi favorito. Si está cargando. Sí. Ese. ¿Nadie lo reconoce? Se los mostraré rápidamente. Se llama Eelslap. Y básicamente lo que haces es golpear a alguien con una anguila. Así que esto es solo, son imágenes. Pero básicamente sigue el movimiento de tu ratón. Whoa. ¿Verdad? Sí, wow. No construí esto. Pero es bastante genial. Podría hacer esto durante horas.

Y así estaba sentado en mis clases sin prestar atención, pero solo haciendo esto. Y siempre, los maestros siempre estaban muy enojados conmigo porque estaba jugando. Pero no entendían que me encantaba la web rara y cómo esto todavía me inspira hasta hoy para hacer la web más divertida. Déjenme volver a poner mis diapositivas aquí. Así que depende de ustedes.

3. The Power to Make the Web Weird

Short description:

Como tenemos el poder. Somos desarrolladores. Podemos hacer que la web sea rara. Probemos algunas cosas raras y divirtámonos. Arc Browser inyecta variables CSS en cada sitio web, permitiendo la personalización. Las APIs de JavaScript en los navegadores ofrecen más posibilidades. Una de esas APIs es la battery status API.

Como tenemos el poder. Somos desarrolladores. Podemos hacer que la web sea rara. Así que puede que no sepamos todo. Así que tal vez solo intentemos un par de cosas raras hoy para que realmente podamos probar cosas y divertirnos. Y espero que se diviertan, supongo. Yo me voy a divertir.

Así que, en primer lugar, ¿quién usa Arc Browser? Eso es bastante gente, ¿verdad? Sí. ¿Saben que en realidad inyecta variables CSS en cada sitio web que tienen? Como estas son las que hay. No me importa mostrar mis diapositivas. No me importa. Es un poco más fácil para mí de esa manera. Básicamente inyecta una paleta de colores CSS en cada sitio web.

Tengo un sitio web simple aquí, que solo dice la palabra Arc. Y es negro sobre blanco. Bueno, blanco sobre negro, en realidad. Y no muestra ningún color porque esas variables no están ahí. Y establecí valores de respaldo para eso. Pero, ¿qué pasa si voy a mi Arc y abro ese mismo sitio web? Si abro ese mismo sitio web, en realidad también es verde. Y eso es porque mi esquema de color en Arc es verde. Así que si cambio eso, creo que está en algún lugar aquí, editar colores del tema. Y quiero que sea púrpura, por ejemplo, mi sitio web reaccionará a eso. Así que esta es una personalización que puedes hacer en la web. ¿Es realmente útil? Bueno, no realmente, pero no todo tiene que serlo. Si es divertido, eso es más que suficiente para mí. Pero esto era solo CSS.

Y CSS es una cosa, pero ¿y si podemos programar, como en JavaScript, podemos hacer muchas más cosas porque un programa que todos usamos es el navegador y el navegador en realidad tiene muchas APIs que no conocemos? Así que echemos un vistazo a algunas APIs que quizás no hayas escuchado. La battery status API, ¿quién ha oído hablar de ella? Sí, un par. ¿Quién la está usando activamente? ¿Más o menos? Realmente nadie, y eso es algo bueno. Pero es muy simple.

4. Exploring Battery Status API

Short description:

Puedes obtener información de la batería desde el navegador y mostrar los niveles. Es fácil adjuntar controladores de eventos y agregar oyentes. La página desaparece a medida que se agota la batería, según el nivel de batería. No se requiere permiso para leer la batería, y se pueden agregar oyentes de eventos para monitorear los cambios de nivel.

Básicamente está en el navegador, puedes simplemente, oye, dame la información de la batería, y luego puedes mostrar, ves los niveles. También puedes verificar si está cargando o no. Pero en realidad también puedes adjuntar controladores de eventos a eso. Agregas oyentes.

Así que voy a hacer eso rápidamente. Bueno, ya preparé la demostración, obviamente. Y todo está en JavaScript puro. Primero construí esto en React, pero luego pensé, tal vez necesito mostrar más el poder de la web porque esto es solo un archivo HTML. Bueno, se sirve con Vites, pero es un archivo HTML con un script, y ese script está haciendo todo. No hay realmente React o un framework en funcionamiento.

Entonces, ¿qué tengo? Solo tengo un div con un título, tengo un elemento P, y tengo el nivel. Y básicamente hace lo que dice. Esta página desaparecerá a medida que se agote tu batería. Así que tienes un 100% de batería, la página es 100% visible. Si tienes cero batería, bueno, tu laptop se apagará, pero el sitio web tampoco estará allí. Y es muy simple de hacer, porque solo le pido a la batería, bueno, al navegador, oye, ¿puedo usar la batería, por favor? Y no se requiere permiso para leer la batería, por cierto. Eso es bastante extraño, en mi opinión, pero así es como es.

Y luego solo agrego un oyente de eventos al cambio de nivel. Así que si muestro esto visualmente, debería tener eso aquí. Así que tengo la batería. Así que ahora está en verde. Es texto verde. No expliqué qué es eso. Bueno, básicamente, es mi cable aquí. Así que si desconecto ese cable, está en rojo. Porque no está cargando. Lo que sea que fuera eso. Eso no era la batería, espero. La batería murió. Así que esta página ahora es 89% 98% visible.

5. The Power and Dark Side of Battery Status API

Short description:

La Battery Status API es simple pero puede ser útil. Está disponible en la mayoría de los navegadores principales, pero no en Safari. Se puede usar para detectar el nivel de batería del dispositivo del usuario y hacer ajustes en consecuencia. Sin embargo, también puede usarse para propósitos más oscuros, como lo demuestra la aplicación de chat Die With Me que solo permite su uso cuando la batería está por debajo del 5%.

Gracias, Tejas. Y es muy simple, y estoy haciendo muchas cosas tontas con ella. Como esto realmente no es útil, ¿verdad? Pero puede ser útil. Está disponible en la mayoría de los navegadores principales, no en Safari. De hecho, está disponible en Firefox, pero lo falsifican con datos falsos, porque piensan que es una violación de la privacidad. Y en cierto modo, estoy de acuerdo.

¿Es útil? Sí. De alguna manera. Porque imagina que tienes mucho trabajo de GPU realizándose en tu sitio web. Ahora realmente puedes detectar, oye, el sitio web de esta persona, bueno, la laptop de esta persona, no está tan llena. Tal vez deberíamos reducirlo y usar menos batería. Sí, wow, exactamente. Pero en realidad, también tiene cosas muy oscuras. Como por ejemplo, este es un proyecto de un compatriota belga mío, Dries de Poorten, y básicamente se llama Die With Me. Así que esta es una aplicación de chat, pero solo puedes usarla si tu porcentaje está por debajo del 5%. Así que puedes chatear con tus amigos o con personas al azar en todo el mundo que también tienen un teléfono que se está muriendo. Así que es divertido, pero la cuestión es, ¿y si tomamos un giro realmente oscuro?

6. The Dark Side of Battery Status API and WebHID

Short description:

La Battery Status API puede usarse para propósitos más oscuros, como manipular precios en sitios de comercio electrónico basándose en el nivel bajo de batería de un usuario. Sin embargo, también puede usarse para propósitos prácticos, como enviar notificaciones a los usuarios para que guarden su trabajo cuando su batería está baja. Otra característica interesante es WebHID, que permite la interacción con dispositivos de interfaz humana a través del navegador web. Puede usarse para controlar dispositivos y activar acciones, pero se debe tener precaución para evitar el mal uso.

eBay, whatever, Amazon, y de repente puedes detectar, oye, esta persona solo tiene un 10% de batería que debería durar alrededor de tal vez 20 minutos. Vamos a impulsar algunas ventas y vamos a hacer que los precios sean un poco más altos, porque tal vez todavía necesita comprar algo, pero su teléfono va a morir. Bueno, ese es un giro muy oscuro, pero es totalmente y técnicamente posible. Espero que todos ustedes no hagan eso. No lo usen para eso.

Lo que yo uso, por ejemplo, trabajo en una empresa de CMS. No tenemos autoguardado para eso. Así que puedo enviar una notificación, oye, tu sitio web está, bueno, estoy detectando que tu batería está casi muerta. Tal vez deberías guardar.

Por ejemplo, WebHID, Web Human Interface Devices. ¿Quién lo ha usado? Nadie. Wow. Bien, genial. Entonces les voy a mostrar algunas cosas geniales. Es muy simple. Son solo dispositivos, un navegador web, obtén los dispositivos HID, y luego simplemente obtienes el dispositivo y puedes interactuar con ese dispositivo. Y les mostraré algunos ejemplos. De nuevo, estoy haciendo cosas tontas con él, pero explicaré después si realmente es útil y dónde lo es.

Así que tengo esta interfaz de audio aquí. Eso es lo que hace el sonido, ¿verdad? Esa es mi interfaz de sonido que uso para el sonido, pero también es un dispositivo WebHID. Así que solo me estoy conectando a ese porque era más fácil. Como pueden ver, ya tengo un par de cosas conmigo. Así que Volt 2, así es como se llama. Voy a conectarme a él. Y ahora realmente voy a apagar el sonido, porque si lo toco y se apaga, eso es molesto para todos ustedes. Este título de WebHID está realmente poblado con variables, HSL, que es una forma de CSS de calcular colores en un gran círculo. Pero lo que puedo hacer, tengo cuatro botones aquí. Y si los toco, realmente puedo alterar esos colores porque es solo un event listener en algunos botones de hardware. Lo estoy usando para cosas tontas. No hagan eso.

7. Exploring WebHID for Hardware Interaction

Short description:

Puedes usar WebHID para interactuar con dispositivos de hardware a través del navegador web y controlar acciones en tu sitio web. Al agregar event listeners y manipular registros, puedes cambiar colores y realizar varias tareas usando JavaScript. Esta característica no solo es útil para agregar interactividad a los sitios web, sino que también tiene aplicaciones potenciales para accesibilidad e integración de hardware, como usar controladores de PlayStation con WebHID.

No hagas eso. Pero es algo genial sobre cómo realmente puedes hacerlo. Así que ahora no es visible porque ninguno de mis colores está encendido. Ahora enciendo el rojo. Enciendo el azul, lo que sea, todos esos colores. ¿Es difícil de hacer? Para nada. Déjame mostrarte mi código. Así que WebHID, ahí vamos. Hay algo molesto, y es que tienes que leer registros porque estás interactuando con hardware. A veces es un poco más avanzado, pero afortunadamente hoy en día tenemos IA para resolver eso por ti. Lo hice manualmente y principalmente presionando los botones y viendo qué funciona. Así que solo agrego un event listener al clic, que se conecta al dispositivo, bla, bla, bla. El dispositivo se abre. Entonces realmente puedo usar el dispositivo de entrada. ¿Y qué hago? Simplemente hago un on input algo, básicamente. Obtengo el número de registro y todo. Y cómo hago eso no es realmente interesante. Es principalmente este código, y es muy malo. Pero lo que puedo hacer es que puedes ver que hay equals número aleatorio, B equals número aleatorio. Así que cada vez que presiono un botón, me va a devolver un valor aleatorio, y yo inyecto ese valor en mi color HSL. Y ese código está justo aquí. Y es bastante fácil. Así que básicamente solo tomo el estilo, agrego el estilo, y lo hago todo con JavaScript. Y de repente tenemos un sitio web que puede cambiar colores. ¿Es útil? Por supuesto que lo es. ¿Es útil para la mierda que hago? No. Pero definitivamente es útil porque ¿y si tienes 3D en tu sitio web o tal vez alguien que tiene problemas de accesibilidad? Tal vez puedan usar hardware para interactuar con la web directamente sin un teclado o con algo más. Por ejemplo, controladores de PlayStation. Si alguna vez has hecho algo, sí, puedes conectarlos a WebHID. Buen Tejas.

8. Introducing WebMIDI and Personal Reflections

Short description:

Tejas introduce WebMIDI y pregunta a la audiencia sobre su familiaridad con MIDI. Conecta su teléfono y cambia a su hotspot para una experiencia más fluida. A pesar de algunos problemas de internet, comparte un poco sobre sí mismo como DJ y su amor por las fiestas en Berlín.

Tejas sabe de lo que habla. Pero luego WebMIDI. ¿Quién conoce MIDI en general? OK, bien, bien. Un par de personas. Sí, ahí. Genial. OK, bien.

WebMIDI. Bueno, voy a conectar mi teléfono de nuevo para esto. Rápidamente. Esperando que el Wi-Fi funcione. OK, voy a cambiar rápidamente a mi hotspot. Eso va a ser un poco más fácil.

Entonces, ¿cómo están todos hoy? ¿Bien? Mejor que mi internet, parece. OK. Con un poco de suerte, debería aparecer ahora. No lo hace. OK, bueno, oh, aparece justo cuando lo necesito. OK, perfecto. Es muy lento, y no sé por qué. Pero lo haré así. Así que este soy yo. Para las personas que me conocen mejor, esto es de hace cuatro, cinco años. No sé.

Las personas que me conocen un poco mejor, soy DJ. Saben que me encanta ir de fiesta. También me encanta Berlín. Buenas fiestas. Me gustan. Es muy divertido.

9. Tejas's Hobbies and Discovering MIDI

Short description:

Tejas habla sobre sus pasatiempos y cómo comenzó a trabajar a tiempo completo. Comparte su amor por los vinilos y las guitarras, y su creciente colección. Tejas menciona su interés en el mundo del techno y su compra de un 303 y un RD-6. Explica su necesidad de una groove box y un teclado para controlarlos. Finalmente, se da cuenta de la importancia de MIDI en el contexto del navegador web.

Así que tengo pasatiempos, como todos ustedes. Y en 2022, comencé a trabajar a tiempo completo. Y estaba pasando ocho horas al día detrás de mi computadora. Bueno, al menos, porque estaba muy activo en open source. Así que, por supuesto, como, bueno, no, haces mucho más de ocho horas al día porque te encanta o lo odias, lo que sea. Aún haces más.

Así que decidí dedicarme por completo, bueno, no necesariamente por completo, pero usé más vinilos porque no quiero estar ocupado con pantallas y todo eso. Así que luego compré una guitarra porque pensé, oye, es muy divertido poder tocar. No sabía cómo, pero aprendí. Y haces lo que todo guitarrista hace. Si puedes tocar una guitarra, compras otra. Así que esa es mi segunda guitarra. Y luego compré una tercera y un par de altavoces adicionales. Y luego compré una cuarta, creo. Bueno, tengo un par. Pero quería más porque, bueno, por muy geniales que sean las guitarras, no es realmente lo mío. Soy belga, así que soy muy del mundo del techno.

Así que compré un 303, que es como una típica línea de bajo muy ácida, techno, principalmente, y un RD-6, que es una caja de ritmos. Compré esos, y luego pensé, hmm, probablemente necesite una groove box. Así que compré la groove box, y ya puedes ver como mi apartamento se está transformando un poco. Mi novia no está muy contenta con eso, pero ese es su problema. Así que luego compré un Keylab, que es un teclado muy grande para poder controlarlos a todos y mantenerlos sincronizados.

En resumen, tengo que mudarme porque mi apartamento se está quedando un poco pequeño. Eso pasó. Pero no hay pantalla. Eso era lo importante para mí. No hay pantalla, solo hay una cosa. Y eso es un reloj. Y lo genial es que ese reloj se llama MIDI, y podemos usarlo en el contexto del navegador web, lo cual es bastante loco. Porque cuando leí por primera vez, oye, puedo hacer esto a través del navegador, no tenía sentido.

10. Setting up Devices and Connecting MIDI

Short description:

Tejas explica la configuración de los dispositivos y cómo están conectados. Menciona la conexión USB-C de la interfaz de audio a su laptop y el uso de un cable MIDI entre dispositivos. Tejas destaca la funcionalidad del cable MIDI para sincronizar los beats por minuto. También menciona agregar un video y la compatibilidad de la configuración con la mayoría de los navegadores.

Necesitas una caja como esta, por cierto. No es que puedas simplemente conectar un USB. Y te mostraré cómo está conectado para que tenga un poco más de sentido. Solo voy a ver si puedo usar OBS para eso para verificar si mi teléfono puede hacerlo.

¿Qué quiero? ¿Puedo ver mi pantalla? No. No parece. Bueno, eso es triste para ti. No puedes verlo. Lo explicaré. Así que cómo funciona esto, básicamente todos estos dispositivos, no hay USB. Hay puertos USB, pero no los estoy usando. Hay uno, y está en la interfaz de audio. La interfaz de audio está conectada vía USB-C a mi laptop. Y básicamente, recibe dos líneas de entrada de audio, sonido, y ese sonido de audio va a ir a esos dos altavoces.

Cómo está conectado, ese es su problema, no el mío. Y parecía funcionar. Lo probamos antes. Y de hecho tengo un cable MIDI aquí, que está conectado de este dispositivo a este dispositivo. Y básicamente, lo que hará es decirle, como, oye, estoy tocando a tantos beats por segundo o por minuto BPM. Y este reaccionará a ese y sabrá qué tan rápido debe tocar las notas. Eso es básicamente todo lo que hace. Lo genial es que puedo conectar esto a internet así, y lo voy a hacer. Lo primero que hice fue agregar un video. Y el video es Mr. Rick. Y Mr. Rick, oh, por cierto, eso es algo que debería haber mencionado. Creo que lo tengo en algún lugar aquí. Funciona en la mayoría de los navegadores. Eso no importa, bla, bla, bla.

11. Controlling the Web with MIDI and Flashing Colors

Short description:

Tejas explica cómo puede controlar la web presionando botones MIDI, reproduciendo un video en bucle y manipulando datos del reloj. También describe cómo conectar sus canales para crear sonidos y los colores intermitentes resultantes.

Colores intermitentes. Así que si tienes algún tipo de enfermedad de convulsiones, ten cuidado. Lo que sucede es que puedo conectarme a ese reloj. Y ya estoy en mi navegador, bueno, en la consola. Pero cuando presiono play, puedo reproducir un video de Rick Astley. Así que puedo controlar la web solo presionando botones MIDI.

Y cómo funciona eso, en realidad, bueno, no es fácil, pero tampoco es tan difícil. Es solo un video en bucle muy simple, que tiene una fuente, Rick.mp4, lo que sea, con el ID Rickdance. Y lo que voy a hacer, todo este código es solo conectarse al dispositivo, asegurarse de que puedas interactuar con el dispositivo y todo. Pero básicamente puedo conectar aquí el Rickdance, bla, bla, bla. Y puedo verificar qué datos están llegando.

Y en el caso del reloj, el reloj comienza en 250. Ese es el código binario, lo que sea. Y 250 para detenerlo. Así que cuando voy, ves que hago un console log allí. Así que lo que hago es que cuando presiono play, verás que envía 250. Cuando detengo, va a hacer 255. Si detengo de nuevo, va a hacer lo mismo. Así que muy fácil. Pero lo interesante es qué pasa si estoy en una discoteca y quiero mis propias luces. Tienen luces bastante buenas, pero en realidad puedo llevar las mías.

Así que lo que hice fue conectar mis seis canales aquí, tengo seis, a HSL de nuevo, y voy a ampliar y usar ese espectro para crear sonidos. Así que si ahora... Ahora debería tener sonido. Bien, esto es solo un simple hi-hat. Y puedes ver colores intermitentes, por cierto. Te estoy haciendo consciente. Si luego agrego otro sonido, los colores están cambiando. Puedes ver los canales. Eso es un snare.

12. Sequencing and Controlling Web Applications

Short description:

Tejas explica cómo puedes usar un teclado para secuenciar cosas y cambiar la representación visual de tu página web según la música que estés tocando. También destaca la diversión y flexibilidad de conectar varios dispositivos para controlar aplicaciones web, como cambiar la opacidad del color o la exposición en Photoshop. Estas capacidades son solo la punta del iceberg, ya que hay muchas más APIs disponibles para el desarrollo web avanzado.

Pero también podemos usar un teclado. Entonces, ¿qué pasa si los conectamos todos juntos y realmente comenzamos a secuenciar cosas? Toda tu página web puede cambiar visualmente y representar la música que realmente estás tocando. En este caso, en vivo. Así que déjame encontrar algo aquí, como una buena línea de bajo belga.

Está bien, está bien, no está mal, no está mal. Puedo usar eso. Déjame poner un secuenciador. Y ahora de repente tenemos mucho más bajo. Ah, ahí vamos. Y Rick estaba bailando con nosotros. Gracias, Rick. Gracias, gracias. Pero tal vez... Gracias por los aplausos. Pero tal vez también demos un aplauso al equipo de AV porque hicieron esto posible conmigo. Gracias.

Entonces, ¿es útil? Pero es muy divertido, sin embargo. Es muy divertido. Porque todo esto está conectado y puedo conectar básicamente con un cable USB-C y una interfaz de audio. Pero imagina que realmente puedes llevar eso a la web. Por ejemplo, Photoshop en la web es una realidad ahora. ¿Qué pasa si puedo presionar una nota y realmente cambiará la opacidad del color de algún filtro? O puedes cambiar tu exposición. Algo así. Es mucho más barato que un Elgato Stream Deck, por ejemplo. Pero es bastante genial. Y estas son solo algunas de las APIs. Hay muchas, muchas más. Y la web es muy avanzada y sabemos que algunas cosas funcionan en Chrome y no funcionan de otra manera. Pero eso no es importante. Normalmente, y especialmente cuando yo...

QnA

Abrazando la Diversión y Rareza del Desarrollo Web

Short description:

Elyon comparte la importancia de mantener el desarrollo web divertido y el valor de los proyectos de código abierto. Anima a publicar bibliotecas y a abrazar la rareza de la web. Elyon también discute la tolerancia al fracaso al construir proyectos no convencionales y enfatiza la alegría de la experimentación.

Bueno, se relaciona mucho con mi trabajo en Astro. Yo digo usa la plataforma. Como, Astro es muy una cosa de plataforma primero. Es divertido y eso es lo que hace que nuestros trabajos sean divertidos. Porque esto se relaciona mucho con mi historia de código abierto. Como, el código abierto es increíble y es divertido.

Pero el problema es que muy a menudo, como organizamos un panel al respecto, puede empezar a sentirse como una carga. Y la cosa es, lo que siempre digo, publica tus bibliotecas. Deja que otras personas se diviertan con ellas. Haz algo, como por ejemplo el de eelslap. Es tan simple. Bueno, me hizo sonreír. Me hizo feliz. Se supone que nuestro trabajo debe ser divertido. Estamos ocho horas al día haciendo nuestro trabajo. Por favor, mantengámoslo divertido también. Es muy importante para mí. Mantén la web rara.

Soy Elyon. Muchas gracias. APLAUSOS La primera es, ¿encuentras que tienes una tolerancia diferente al fracaso al construir proyectos raros o tontos? ¿Alguna vez te rindes? Y si es así, tal vez... Todo el tiempo. ¿Cuáles son algunos de los proyectos que fallaron? Básicamente, uno es estos. Acabo de mostrárselos y lo encuentran divertido porque es una charla de conferencia. Pero si estás en casa, nadie va a usar esto. Y eso no importa porque me divertí construyéndolo y si luego lo publico y nadie lo usa, esa no era mi expectativa. Así que no me importa tanto. Pero no solo en términos de publicar, sino en términos de construir cosas. ¿Alguna vez tienes ideas y simplemente dices, bueno, eso no funcionó. Deséchalo.

Tolerance for Failure and Pushing the Limits

Short description:

Elyon discute la tolerancia al fracaso al construir proyectos no convencionales y la alegría de la experimentación. Comparte ideas sobre cómo encontrar inspiración y usar plataformas y APIs web para generar ideas. Elyon también aborda los desafíos de compatibilidad al implementar características únicas como arcos y variables de color en diferentes navegadores.

Deséchalo. ¿Es esa tolerancia diferente? Sí, totalmente, porque te estás divirtiendo mucho más. E incluso averiguar si va a funcionar es muy divertido para mí. Porque solo estaba tocando música y en realidad no me importaba tanto que todo fuera increíble, se viera bien o funcionara. Solo me divertí. ¿Has tenido algún proyecto que simplemente haya fracasado? No realmente, en realidad. La mayoría de las veces, encuentro una manera de hacerlo, incluso si es muy improvisado.

Pero sí, principalmente encuentro mi camino. Encantador. Gracias. Siguiente pregunta. ¿Cómo te inspiras? La persona que lo envió dijo, siento que me falta creatividad. Sí, es algo difícil, pero creo que típicamente me llega cuando no estoy necesariamente aburrido en el trabajo, pero cuando estás sentado allí, sin divertirte, entonces pienso, oh, sabes qué sería divertido. Y luego empiezo a desarrollar esa idea y esa idea se convierte en otra idea y esa se convierte en otra idea. Pero inspirarse, quiero decir, lleva mucho, no sé, suerte. Noté en tu charla que hablaste mucho sobre usar la plataforma y las APIs web, incluso si no hay un gran soporte para ello. ¿Es esa una herramienta que usas para crear ideas?

Depende. Porque, por ejemplo, con Azure, no vas a publicar APIs que nadie use y que generalmente no estén bien soportadas. Pero para proyectos divertidos, realmente no importa si no funciona en mi teléfono. O tal vez sí, pero no en ese teléfono móvil. Eso no importa mucho, pero en mi vida diaria, sí, no voy a... Bueno, ahora conozco todas esas APIs y de hecho uso algunas de ellas en mi trabajo. Así que creo que eso es algo genial. Sí, y por supuesto diste el ejemplo de la batería en la Cache API, ¿verdad? Realmente aprecié que diste un ejemplo del mundo real no tonto, ¿verdad? Sí, sí, sí. Bien, así que abordaste esto un poco en tu charla, pero vale la pena preguntar de nuevo. Incluso si tus ideas son raras, ¿cómo te sientes sobre cosas como arcos, variables de color, cuando no están soportadas en ningún otro lugar? Sí, bueno, primero que nada, tu sitio web debería ser, bueno, si es como un sitio web de producción, debería ser accesible y la misma experiencia en todas partes, idealmente. Pero en el caso de arc, es algo divertido, ¿verdad? Es personalización de una manera divertida y solo está inyectando variables CSS. Eso no está tan mal, pero el problema es cuando, por supuesto, eso comienza a diferir mucho entre diferentes navegadores y no hay un estándar, entonces se vuelve muy molesto. Pero afortunadamente en el caso de arc, puedes simplemente detectar también, como si es arc o es otra cosa. En ese caso, podría simplemente hacer un fallback normalmente. Realmente nunca, bueno, en realidad una vez hice mi sitio web personal con eso, pero luego lo quité de nuevo porque quería que todos los usuarios tuvieran la misma experiencia y creo que esa es generalmente la mejor manera antes de divertirse, explótalo al máximo.

Performing at the Afterparty and Weird Projects

Short description:

Elyon discute sobre no tener un SoundCloud y el objetivo de divertirse mientras toca música sin grabarla ni publicarla. También comparte su idea de construir un setup en casa para controlar su flujo de trabajo y menciona los proyectos extraños que ha realizado, como el WebMidi e instalar un Raspberry Pi Zero en un Furby.

Bien, una pregunta de Christina aquí. ¿Vas a actuar esta noche en la afterparty? Daria, ¿lo haré? No, no lo sé. No, no lo haré, pero puedes pedírmelo para el próximo año. La gente lo quiere. Lo escucho. Muy bien hecho. Bien, hay algunas similares. ¿Podrías compartir tu SoundCloud? En realidad no tengo uno. ¿Qué? ¿Qué pones bajo todos tus tweets virales? Bueno... No tu SoundCloud resulta ser. No, en realidad no publico música. Creo que solo hay una persona aquí que ha escuchado mi música y es Attila. No sé dónde está. Pero él ha escuchado algo de mi música y eso es todo. Realmente no la publico porque ese no es mi objetivo. Mi objetivo es divertirme mientras toco y eso es lo que tiene que ver con la cosa de no tener pantalla. No estoy grabando nada realmente. Solo estoy ahí en el momento disfrutándolo y luego después lo dejo y empiezo a hacer otra cosa. Eso también me recuerda un poco a una pregunta en la charla anterior sobre si vas a hacer open source este trabajo que has hecho. Porque en realidad hay mucho más que va en eso y ese no es nuestro objetivo. El objetivo es que lo estamos usando para nosotros.

Bien, ¿cuál es la cosa más rara que has construido por diversión? Honestamente, creo que esto es. Como el de WebMidi es bastante raro. En realidad quería lo que quería hacer es asegurarme de que todo mi setup en casa que pueda conectarlo con un cable y luego pueda controlar todo mi flujo de trabajo como aprobar PRs presionando botones o tocando una cierta melodía. Eso parece muy divertido pero no he tenido tiempo de construirlo completamente pero tengo ideas. ¿Has visto al TikToker creo que está construyendo como una alfombrilla de corte con una superposición encima y lo están llamando Jarvis y pueden hablarle y cambiar el tamaño de las cosas. ¿En serio? Eso suena genial. Súper genial. Una vez construí una cosa que consistía en desarmar un Furby e instalar un Raspberry Pi Zero en él y luego hacer que dijera cosas obscenas. Sí. Hay muchas cosas divertidas por ahí especialmente como una vez que empiezas a entrar en el mundo del hardware como Raspberry Pis y Arduinos y todo.

Astro and Web HID API

Short description:

Astro es generalmente la mejor manera de construir sitios web. Web HID es una API cableada que es más fácil de usar y más soportada en comparación con Web Bluetooth. El soporte para Web HID en hardware está aumentando, pero no está ampliamente soportado en todos los navegadores.

Puedes hacer mucho. Sí, absolutamente. Muy bien. Tenemos tiempo para un par de preguntas más y tenemos más de las que podemos preguntar. Esta pregunta, no estoy seguro de cuán relevante es y siento que podrías estar sesgado, pero ¿es Astro la mejor manera de construir cualquier cosa en la web? Depende de lo que estés construyendo, por supuesto, pero generalmente si construyo un sitio web iré con Astro. Sí. Si fuera tú también para ser honesto.

Muy bien, entonces esta es una pregunta sobre una de las APIs de las que hablaste. ¿Cómo es Web HID diferente de Web Bluetooth? Ambos se conectan de forma inalámbrica a dispositivos externos. No, Web HID es cableado. ¿Oh, sí? Sí, funciona sobre USB básicamente y Web HID como creo que es simplemente mejor y generalmente más soportado, pero Bluetooth es viejo e inestable y difícil de hacer, mientras que Web HID es realmente bastante fácil como en las APIs. ¿Cuál es el soporte para Web HID en términos de hardware? ¿Es común o tienes que buscarlo? No, depende. Se está volviendo más y más común especialmente los controladores de Playstation ya lo tienen. Xbox no. Está llegando más y más, pero el problema sigue siendo que no está generalmente soportado en todos los navegadores, así que ¿por qué lo soportarían en todos los dispositivos?

Muy bien, última pregunta que realmente me gusta de hecho de Christos aquí. ¿Cuál es la API nativa más extraña que has usado en el trabajo hasta ahora? No para proyectos divertidos en casa. En el trabajo no me lo permiten. No, estoy bromeando. Puedo, pero sí, creo que la API de batería es la que descubrí de esa manera pero generalmente no uso muchas APIs extrañas en realidad en el trabajo ya que es un CMS así que tienes que asegurarte de que funcione de lo contrario tendré quejas. Ahora es el momento de hacerlo raro. Muy bien, únanse a mí para darle a Elliot un gran aplauso por la última charla del día. Muchas gracias. Gracias.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

No resuelvas problemas, elimínalos
React Advanced 2021React Advanced 2021
39 min
No resuelvas problemas, elimínalos
Top Content
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
Los Átomos de Jotai Son Simplemente Funciones
React Day Berlin 2022React Day Berlin 2022
22 min
Los Átomos de Jotai Son Simplemente Funciones
Top Content
State management in React is a highly discussed topic with many libraries and solutions. Jotai is a new library based on atoms, which represent pieces of state. Atoms in Jotai are used to define state without holding values and can be used for global, semi-global, or local states. Jotai atoms are reusable definitions that are independent from React and can be used without React in an experimental library called Jotajsx.
Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
El Epic Stack
React Summit US 2023React Summit US 2023
21 min
El Epic Stack
Top Content
This Talk introduces the Epic Stack, a project starter and reference for modern web development. It emphasizes that the choice of tools is not as important as we think and that any tool can be fine. The Epic Stack aims to provide a limited set of services and common use cases, with a focus on adaptability and ease of swapping out tools. It incorporates technologies like Remix, React, Fly to I.O, Grafana, and Sentry. The Epic Web Dev offers free materials and workshops to gain a solid understanding of the Epic Stack.
Una Mirada al Futuro del Desarrollo Web en 2025
JSNation US 2024JSNation US 2024
32 min
Una Mirada al Futuro del Desarrollo Web en 2025
Top Content
Today, Wes Boss introduces the new features of the web, including customizable select and temporal, a standardized API for working with dates, time, and duration. The current date API in JavaScript has some problems related to time zones and date manipulation. With the temporal API, you can create dates without a time zone, specify dates without a year, and create durations without being attached to a specific date. The API also provides features for finding the difference between two dates. Invokers is a declarative click handlers API that eliminates the need for JavaScript. Speculation API enables pre-rendering and pre-loading of pages, improving performance. The CSS Anchor API allows positioning elements based on another element's location. Web components are encapsulated, framework-agnostic, and easy to use, offering a standardized approach for building reusable UI components. Building media UI components, like video players, is made easier with web components like Shoelace. Transformers JS allows running AI models in JavaScript for tasks like emotion detection and background removal. Python doesn't run in the browser, but JavaScript does. Small AI models can be loaded and executed faster in the browser using technologies like WebGPU. Animate height auto transition using calc size. Apply starting styles to elements for smooth animations. Use Vue transition for CSS and JavaScript animations. Syntax website with Vue transition for smooth page transitions. CSS relative colors allow for lighter or darker shades. Scope CSS ensures styles only apply to specified div containers. Web primitives facilitate modern JavaScript code. You can create web requests and receive web responses using the same primitives on both the client and server. There are many new web standards that work everywhere and frameworks like Hano and Nitro are built upon them. The select and Popover elements are accessible by default. Most of the discussed features will be available in all browsers by 2025. The future of web development with AI is uncertain, but web developers should embrace AI tools to improve efficiency. Implicit CSS lazy loading depends on whether it's prefetching or pre-rendering. Wes Boss discusses the specific features he is excited about in web development, including starting style, calc auto, and allowed discrete. He shares his preferred way of staying informed on new web development discoveries, emphasizing the importance of being part of the community and keeping up with industry discussions. Wes also mentions reading W3C meeting notes and recommends following the Twitter account Intent2Ship to stay updated on upcoming CSS features. Lastly, he discusses the potential impact of the new Scope CSS feature on developers' management of styles.
Luchando contra la Deuda Técnica con la Refactorización Continua
React Day Berlin 2022React Day Berlin 2022
29 min
Luchando contra la Deuda Técnica con la Refactorización Continua
Top Content
This Talk discusses the importance of refactoring in software development and engineering. It introduces a framework called the three pillars of refactoring: practices, inventory, and process. The Talk emphasizes the need for clear practices, understanding of technical debt, and a well-defined process for successful refactoring. It also highlights the importance of visibility, reward, and resilience in the refactoring process. The Talk concludes by discussing the role of ownership, management, and prioritization in managing technical debt and refactoring efforts.

Workshops on related topic

React, TypeScript y TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript y TDD
Top Content
Featured Workshop
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.
Masterclass Web3 - Construyendo Tu Primer Dapp
React Advanced 2021React Advanced 2021
145 min
Masterclass Web3 - Construyendo Tu Primer Dapp
Top Content
Featured Workshop
Nader Dabit
Nader Dabit
En esta masterclass, aprenderás cómo construir tu primer dapp de pila completa en la blockchain de Ethereum, leyendo y escribiendo datos en la red, y conectando una aplicación de front end al contrato que has desplegado. Al final de la masterclass, entenderás cómo configurar un entorno de desarrollo de pila completa, ejecutar un nodo local e interactuar con cualquier contrato inteligente usando React, HardHat y Ethers.js.
Fundamentos de Remix
React Summit 2022React Summit 2022
136 min
Fundamentos de Remix
Top Content
Workshop
Kent C. Dodds
Kent C. Dodds
Construir aplicaciones web modernas está lleno de complejidad. Y eso solo si te molestas en lidiar con los problemas
¿Cansado de conectar onSubmit a las API del backend y asegurarte de que tu caché del lado del cliente se mantenga actualizada? ¿No sería genial poder utilizar la naturaleza global de CSS en tu beneficio, en lugar de buscar herramientas o convenciones para evitarla o trabajar alrededor de ella? ¿Y qué te parecería tener diseños anidados con una gestión de datos inteligente y optimizada para el rendimiento que simplemente funciona™?
Remix resuelve algunos de estos problemas y elimina completamente el resto. Ni siquiera tienes que pensar en la gestión de la caché del servidor o en los conflictos del espacio de nombres global de CSS. No es que Remix tenga APIs para evitar estos problemas, simplemente no existen cuando estás usando Remix. Ah, y no necesitas ese enorme y complejo cliente graphql cuando estás usando Remix. Ellos te tienen cubierto. ¿Listo para construir aplicaciones más rápidas de manera más rápida?
Al final de esta masterclass, sabrás cómo:- Crear Rutas de Remix- Estilizar aplicaciones de Remix- Cargar datos en los cargadores de Remix- Mutar datos con formularios y acciones
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Top Content
Workshop
Mikhail Kuznetsov
Mikhail Kuznetsov
Vue3 fue lanzado a mediados de 2020. Además de muchas mejoras y optimizaciones, la principal característica que trae Vue3 es la API de Composición, una nueva forma de escribir y reutilizar código reactivo. Aprendamos más sobre cómo usar la API de Composición de manera eficiente.

Además de las características principales de Vue3, explicaremos ejemplos de cómo usar bibliotecas populares con Vue3.

Tabla de contenidos:
- Introducción a Vue3
- API de Composición
- Bibliotecas principales
- Ecosistema Vue3

Requisitos previos:
IDE de elección (Inellij o VSC) instalado
Nodejs + NPM
Desarrollando Blogs Dinámicos con SvelteKit & Storyblok: Una Masterclass Práctica
JSNation 2023JSNation 2023
174 min
Desarrollando Blogs Dinámicos con SvelteKit & Storyblok: Una Masterclass Práctica
Top Content
WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
Esta masterclass de SvelteKit explora la integración de servicios de terceros, como Storyblok, en un proyecto SvelteKit. Los participantes aprenderán cómo crear un proyecto SvelteKit, aprovechar los componentes de Svelte y conectarse a APIs externas. La masterclass cubre conceptos importantes incluyendo SSR, CSR, generación de sitios estáticos y despliegue de la aplicación usando adaptadores. Al final de la masterclass, los asistentes tendrán una sólida comprensión de la construcción de aplicaciones SvelteKit con integraciones de API y estarán preparados para el despliegue.
De 0 a Autenticación en una hora con ReactJS
React Summit 2023React Summit 2023
56 min
De 0 a Autenticación en una hora con ReactJS
WorkshopFree
Kevin Gao
Kevin Gao
La autenticación sin contraseña puede parecer compleja, pero es simple de agregar a cualquier aplicación utilizando la herramienta adecuada. Hay múltiples alternativas que son mucho mejores que las contraseñas para identificar y autenticar a tus usuarios, incluyendo SSO, SAML, OAuth, Magic Links, One-Time Passwords y Authenticator Apps.
Mientras abordamos los aspectos de seguridad y evitamos errores comunes, mejoraremos una aplicación JS de pila completa (backend Node.js + frontend React) para autenticar a los usuarios con OAuth (inicio de sesión social) y One Time Passwords (correo electrónico), incluyendo:- Autenticación de usuarios - Gestión de interacciones de usuarios, devolviendo JWTs de sesión / actualización- Gestión y validación de sesiones - Almacenamiento seguro de la sesión para solicitudes de cliente posteriores, validación / actualización de sesiones- Autorización básica - extracción y validación de reclamaciones del token JWT de sesión y manejo de autorización en flujos del backend
Al final del masterclass, también exploraremos otros enfoques de implementación de autenticación con Descope, utilizando SDKs de frontend o backend.