Alive and Kicking - Un Vistazo a Rock & Roll

Rate this content
Bookmark

El rock & roll está vivo y en plena forma, y en esta charla mostraré que Vue es tan versátil que se puede utilizar para hacer visualizaciones de audio mientras la guitarra eléctrica suena a través del navegador. La audiencia tendrá acceso a una aplicación Vue que les permitirá votar por una canción para que se reproduzca en vivo en el escenario. La pantalla muestra todos los votos y los reproduzco a medida que van llegando. Mientras toco música, se muestra información sobre los metadatos y se reproduce una visualización de audio mientras estoy en el escenario. Cuantos más votos reciba una canción, más alta aparecerá en la lista y más posibilidades habrá de que la toque. Toda la experiencia se crea utilizando Vue y Uniform. Además de despertar al público con un poco de rock & roll picante, explicaré cómo se construyó el software y por qué Vue es una tecnología tan importante para arquitecturas componibles con múltiples canales. Vue también se utiliza para controlar el sonido de la guitarra, directamente desde el navegador.

FAQ

Para el karaoke de guitarra se usan tecnologías como Vue, Nuxt, Supa Bass, Pignan, Cloudinary y WebMedia. Vue JS controla el sonido de la guitarra y reproduce la pista de acompañamiento, mientras que Supa Bass se utiliza para la autenticación y la votación.

Los participantes pueden escanear un código QR o visitar el sitio aliveandkicking.dev para votar por las canciones que desean que se toquen. Las canciones más votadas son las que se tocan, y los usuarios pueden ver sus avatares saltando en la pantalla cuando votan.

Uno de los problemas es que si la computadora portátil falla, todo el sistema de sonido se detendría, ya que la señal de la guitarra pasa digitalmente a través de la computadora. Esto representa un riesgo porque terminaría la presentación si hay fallos técnicos.

La pequeña caja roja convierte la señal analógica de la guitarra, generada por las vibraciones de las cuerdas, en una señal digital que es enviada a la computadora portátil para su procesamiento y amplificación.

El navegador comunica con el amplificador para cambiar los ajustes de sonido de la guitarra según la parte de la canción que se esté tocando, lo que permite que la guitarra emita sonidos adecuados para diferentes canciones.

Si no tienes una foto de perfil al votar, es posible que tu voto sea considerado como spam por el sistema. Esto es algo que se ha observado en presentaciones pasadas y aún necesita resolución.

Sí, después de votar por una canción, los participantes tienen la opción de compartir su voto en Twitter, lo que permite una mayor interacción y visibilidad de las preferencias de canciones durante el evento.

Tim Benniks
Tim Benniks
27 min
12 May, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La charla presenta FutS guitar karaoke, una experiencia virtual en el navegador que utiliza Vue, Nuxt, Supa Bass, Pignan, Cloudinary y WebMedia. La experiencia virtual visualiza el audio y permite a los usuarios votar y compartir sus votos en Twitter. El navegador interactúa con el amplificador para cambiar los sonidos de la guitarra, y el navegador se actualiza en tiempo real con los datos de votación. La señal de la guitarra se asemeja a la canción que se está reproduciendo, y los usuarios pueden elegir entre 'Johnny B. Goode' de Chuck Berry y AC-DC para la interpretación de la canción.

1. Introducción a la Charla

Short description:

¡Hola a todos! ¿Siguen despiertos? Veo muchas caras sonrientes y ojos grandes. Estamos bien. El hecho de que todos estén aquí es increíble y han aprendido mucho. Voy a usar esto hoy. Y luego, con esto, lo vamos a subir. Es una fiesta, básicamente. Soy embajador de muchas cosas. Y cosas de código abierto y startups y todo eso. Pero estoy tratando de incluir todas estas cosas en la charla. Y como dije, no será muy técnica. Pero todo esto se utiliza. Tal vez hayan escuchado mi acento. Es un poco extraño. Porque nací en los Países Bajos. Pero vivo en el sur de Francia. Y trabajo con estadounidenses. Y si mezclas estos quesos, no es bueno. Pero eso es lo que escuchan, básicamente.

¡Hola a todos! ¿Siguen despiertos? Veo muchas caras sonrientes y ojos grandes. Estamos bien. Wow. Hemos estado allí arriba todo el día viendo a todos nuestros amigos hablar. La cantidad de información es ridícula. Así que el hecho de que todos estén aquí es increíble y han aprendido mucho.

Así que decidí que hoy sería diferente. Esta soy yo en la llamada telefónica, como pueden ver. En lugar de hablar sobre Vue y navegadores y todas esas cosas, lo voy a usar. Y luego, con esto, lo vamos a subir. Porque después de esto, hay cervezas. Así que estarán listos para las cervezas.

Pero antes de comenzar, les daré algunas diapositivas para que entiendan por qué estoy haciendo esto y de qué se trata. Y después de eso, es simplemente... Oh, no debería dejar caer esto. Después de eso, es una fiesta, básicamente. Soy embajador de muchas cosas. Y cosas de código abierto y startups y todo eso. Pero estoy tratando de incluir todas estas cosas en la charla. Y como dije, no será muy técnica. Pero todo esto se utiliza. Muy bien.

Tal vez hayan escuchado mi acento. Es un poco extraño. Porque nací en los Países Bajos. Pero vivo en el sur de Francia. Y trabajo con estadounidenses. Y si mezclas estos quesos, no es bueno. Pero eso es lo que escuchan, básicamente.

2. FutS Guitar Karaoke

Short description:

Hoy les presento FutS guitar karaoke, una experiencia virtual en el navegador. Quería redimirme de mis malas habilidades para cantar, así que creé este karaoke de guitarra en lugar del karaoke tradicional. Utilizaré Vue, Nuxt, Supa Bass, Pignan, Cloudinary y WebMedia para esta experiencia virtual. Vue JS controla el sonido de mi guitarra y reproduce la pista de acompañamiento.

Y así, hoy esto es una vida en movimiento. Y toda mi vida, he sido guitarrista. Pero durante los últimos 10 años, no hice nada de eso. Así que todas las fotos que ven son de un Tim muy joven. No pude encontrar otras. Así que pensé, vamos a hacer un meme de mí mismo y mostrar algunas de estas fotos.

Y esencialmente, lo que vamos a hacer es usar FutS para el rock and roll. Y esencialmente, esto es un karaoke de guitarra FutS. Y se me ocurrió esto porque todos mis colegas, al menos muchos de ellos, viven en Berlín. Y cuando voy allí por trabajo, todos dicen, amigo, vamos al karaoke. Pero soy tan malo cantando. Es lo peor. Y así que durante mucho tiempo seguí diciendo que no. Y luego pensé, tengo que redimirme de alguna manera. Y eso es lo que esto es. Así que tenemos karaoke de guitarra en su lugar. Y todo esto está en el navegador.

Y lo divertido aquí es que quiero un poco más de interacción con ustedes. En un segundo, les daré un código QR. Van a su teléfono, van allí y pueden votar por las canciones que toco. Las que tengan más votos, las tocaré. Y así veremos. ¿Cuál es mi siguiente? Y así quería hacer esto porque uso Vue todo el tiempo y un montón de herramientas en todas partes. Y así quería hacer todo esto completamente virtual en el navegador. Y lo que he usado hoy son, por supuesto, Vue, por supuesto, Nuxt, también Supa Bass, Pignan, Cloudinary y WebMedia. Ese puede ser el extraño, pero hablaremos un poco de eso más adelante.

Y lo que estoy haciendo es que Vue JS, JavaScript, en realidad controla el sonido que sale de mi guitarra. Envía señales por todas partes para asegurarse de que suene bien para la canción correcta en el lugar correcto. Y luego Vue JS, por supuesto, también reproduce la pista de acompañamiento.

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

Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Top Content
Cuando pensamos en Vuex, Pinia, o tiendas en general, a menudo pensamos en la gestión de estado y los patrones Flux, pero no solo las tiendas no siempre siguen el patrón Flux, ¡hay mucho más en las tiendas que las hace valer la pena usar! Plugins, Devtools, renderizado en el lado del servidor, integraciones TypeScript... Vamos a sumergirnos en todo más allá de la gestión de estado con Pinia con ejemplos prácticos sobre plugins y Devtools para sacar el máximo provecho de tus tiendas.
Bienvenido a Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Bienvenido a Nuxt 3
Top Content
Explica sobre la refactorización del código base de NuxtJS y los desafíos que enfrenta para implementar Vue 3, Vite y otros paquetes.
Un Año en Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
Un Año en Vue 3
Top Content
Vue 3 puede sonar aún nuevo para muchos usuarios, pero en realidad ya ha sido lanzado hace más de un año. ¿Cómo evolucionó Vue 3 durante este período? ¿Por qué tardó tanto en ponerse al día el ecosistema? ¿Qué aprendimos de este proceso? ¿Qué viene después? ¡Discutiremos estas preguntas en esta charla!
Utilizando Rust desde Vue con WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilizando Rust desde Vue con WebAssembly
Top Content
Rust es un nuevo lenguaje para escribir código de alto rendimiento, que puede ser compilado a WebAssembly, y ejecutado dentro del navegador. En esta charla se te guiará sobre cómo puedes integrar Rust, dentro de una aplicación Vue, de una manera que es sencilla y fácil. Con ejemplos de cómo interactuar con Rust desde JavaScript, y algunas de las trampas a tener en cuenta.
Vue: Actualizaciones de Características
Vue.js London 2023Vue.js London 2023
44 min
Vue: Actualizaciones de Características
Top Content
El creador de Vue js da una actualización sobre las nuevas características de la tecnología.
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Vue.js London Live 2021Vue.js London Live 2021
24 min
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Top Content
¿Cuántas veces has implementado el mismo flujo en tu aplicación: verificar si los datos ya se han obtenido del servidor, si es así - renderizar los datos, si no - obtener estos datos y luego renderizarlos? Creo que lo he hecho más de diez veces yo mismo y he visto la pregunta sobre este flujo más de cincuenta veces. Desafortunadamente, nuestra biblioteca de gestión de estado predeterminada, Vuex, no proporciona ninguna solución para esto.Para la aplicación basada en GraphQL, había una alternativa para usar el cliente Apollo que proporcionaba herramientas para trabajar con la caché. Pero, ¿qué pasa si usas REST? Afortunadamente, ahora tenemos una alternativa de Vue a una biblioteca de react-query que proporciona una buena solución para trabajar con la caché del servidor. En esta charla, explicaré la distinción entre el estado de la aplicación local y la caché del servidor local y haré algo de codificación en vivo para mostrar cómo trabajar con este último.

Workshops on related topic

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
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
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
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Vue.js London Live 2021Vue.js London Live 2021
117 min
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Top Content
Workshop
Daniel Roe
Daniel Roe
Construiremos un proyecto Nuxt juntos desde cero usando Nitro, el nuevo motor de renderizado de Nuxt, y Nuxt Bridge. Exploraremos algunas de las formas en que puedes usar y desplegar Nitro, mientras construimos una aplicación juntos con algunas de las restricciones del mundo real que enfrentarías al desplegar una aplicación para tu empresa. En el camino, dispara tus preguntas hacia mí y haré lo mejor para responderlas.
Embarcándonos en una aventura con Nuxt 3, Motion UI y Azure
JSNation 2022JSNation 2022
141 min
Embarcándonos en una aventura con Nuxt 3, Motion UI y Azure
WorkshopFree
Melanie de Leeuw
Melanie de Leeuw
¡Nos encantan las aplicaciones web fáciles de crear y desplegar! Entonces, veamos qué puede hacer una pila tecnológica muy actual como Nuxt 3, Motion UI y Azure Static Web Apps. Podría ser perfectamente un trío de oro en el desarrollo web moderno. O podría ser una hoguera de errores y problemas. De cualquier manera, será una aventura de aprendizaje para todos nosotros. Nuxt 3 se lanzó hace apenas unos meses y no podemos esperar más para explorar sus nuevas características, como su compatibilidad con Vue 3 y el Motor Nitro. Agregamos un poco de estilo a nuestra aplicación con la biblioteca Sass Motion UI, porque el diseño estático está pasado de moda y las animaciones vuelven a estar de moda.Nuestra fuerza impulsora de la pila será Azure. Las aplicaciones web estáticas de Azure son nuevas, casi listas para producción y una forma ingeniosa y rápida para que los desarrolladores desplieguen sus sitios web. Así que, por supuesto, debemos probar esto.Con algunas Azure Functions esparcidas por encima, exploraremos lo que puede hacer el desarrollo web en 2022.
TresJS crea experiencias 3D de forma declarativa con componentes Vue
Vue.js London 2023Vue.js London 2023
137 min
TresJS crea experiencias 3D de forma declarativa con componentes Vue
Workshop
Alvaro Saburido
Alvaro Saburido
- Introducción a 3D- Introducción a WebGL- ThreeJS- Por qué TresJS- Instalación o configuración de Stackblitz- Conceptos básicos- Configuración del lienzo- Escena- Cámara- Agregar un objeto- Geometrías- Argumentos- Props- Slots- El bucle- Composable UseRenderLoop- Callbacks antes y después de la renderización- Animaciones básicas- Materiales- Material básico- Material normal- Material Toon- Material Lambert- Material estándar y físico- Metalness, roughness- Luces- Luz ambiental- Luz direccional- Luces puntuales- Sombras- Texturas- Cargar texturas con useTextures- Consejos y trucos- Misceláneo- Controles de órbita- Cargar modelos con Cientos- Depuración de tu escena- Rendimiento
Construyendo formularios Vue con VeeValidate
Vue.js London Live 2021Vue.js London Live 2021
176 min
Construyendo formularios Vue con VeeValidate
Workshop
Abdelrahman Awad
Abdelrahman Awad
En este masterclass, aprenderás cómo usar vee-validate para manejar la validación de formularios, gestionar los valores de los formularios y manejar las presentaciones de manera efectiva. Comenzaremos desde lo básico con un formulario de inicio de sesión simple hasta el uso de la API de composición y la construcción de formularios repetibles y de múltiples pasos.

Tabla de contenidos:
- Introducción a vee-validate
- Construcción de un formulario básico con componentes vee-validate
- Manejo de validación y presentaciones de formularios
- Construcción de componentes de entrada validables con la API de composición
- Arrays de campos e inputs repetibles
- Construcción de un formulario de múltiples pasos
Prerrequisitos:
Configuración de VSCode y un proyecto Vite + Vue vacío.
Construyendo aplicaciones GraphQL de pila completa con Hasura y Vue 3
Vue.js London Live 2021Vue.js London Live 2021
115 min
Construyendo aplicaciones GraphQL de pila completa con Hasura y Vue 3
WorkshopFree
Gavin Ray
Gavin Ray
El ecosistema frontend avanza a un ritmo frenético. Este masterclass tiene como objetivo equipar a los participantes con una comprensión del estado del ecosistema Vue 3 + GraphQL, explorando ese ecosistema - prácticamente y a través del desarrollo de aplicaciones de pila completa.

Tabla de contenidos
- Los participantes utilizarán Hasura para construir una API GraphQL en tiempo real respaldada por Postgres. Juntos recorreremos su consumo desde un frontend y haremos que el frontend sea reactivo, suscrito a los cambios de datos.
- Además, analizaremos las herramientas comúnmente utilizadas en el stack Vue GraphQL (como Apollo Client y Urql), discutiremos algunas alternativas menos conocidas y abordaremos los problemas frecuentemente encontrados al comenzar.
- Se describirán varios patrones para gestionar datos con estado y sus compensaciones durante el masterclass, y se mostrará una implementación básica para cada patrón discutido.
Nivel del masterclass

NOTA: No se requiere experiencia previa con GraphQL, pero puede ser útil para ayudar a la comprensión. Se cubrirán los fundamentos.