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.

27 min
12 May, 2023

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.

Available in English

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.

3. Detalles de FutS Guitar Karaoke

Short description:

Y visualiza el audio. Es un montón de cosas divertidas con Vue. Estoy usando Supa Bass para iniciar sesión y cosas de la base de datos para la votación. Puedes compartir tu voto en Twitter. Ve a tu teléfono, escanea el código QR o ve a aliveandkicking.dev. Siéntete libre de iniciar sesión.

Y visualiza el audio. Lo verás en un segundo. Es un montón de cosas divertidas con Vue.

También solo mira, aquí estoy a los 18 años con pantalones de cuero y mucho cabello. ¡Compara eso con esto, ¿verdad? Estoy usando Supa Bass para iniciar sesión y cosas de la base de datos para la votación. Y tienen esta hermosa conexión en vivo. Verás que es muy divertido.

Una última cosa. Oh, eso fue rápido. Entonces... Muy bien. Sí. Entonces, si has votado por tu canción favorita, si quieres, puedes compartir ese voto. Y ponerlo en Twitter. Y es como... Este soy yo que voté por esta canción. Pero también podrías hacerlo por ti mismo. Y quiero inundar Twitter con todas estas imágenes. Así que si estás dispuesto, adelante.

Muy bien. Esta es mi diapositiva favorita. ¿Estás listo? Muy bien. Lo que quiero que hagas es ir a tu teléfono, escanear este código QR o ir a aliveandkicking.dev. Y mientras haces eso, voy a configurar todo esto aquí para que podamos comenzar. Siéntete libre de iniciar sesión. En realidad, esta mañana tenía Twitter como inicio de sesión. Y luego el querido Elon decidió suspender mi cuenta. Así que no hay inicio de sesión con Twitter. Pero deberíamos estar bien. De todos modos.

4. Comprobación del navegador y amplificador de guitarra virtualizado

Short description:

Echemos un vistazo a mi navegador. Puedes ver tu propio avatar saltando en la pantalla cuando votas. Siéntete libre de inundar mi punto final y ver cómo funciona Next Serverless más SuperBase. Todo esto se ejecuta a 60 FPS con Canvas y Vue. Hay muchos votos, especialmente de los fanáticos de Guns n' Roses. Voy a comprobar rápidamente si hay sonido saliendo de mi guitarra y hacer una afinación. Este amplificador de guitarra virtualizado es una tecnología moderna genial que suena muy bien. Presta atención a la configuración del amplificador, Top Hat Solo, que cambia según ciertas partes de la canción.

Vale. Ya estoy viendo algunos votos. Y la idea es que cuando votes, veas tu propio avatar saltando en la pantalla. Y los más observadores entre ustedes se darán cuenta de que cuando votan positiva y negativamente, aparecen mucho en la pantalla. Así que si quieres inundar mi punto final y ver cómo funciona Next Serverless más SuperBase, dale caña a esto. Y todo esto se ejecuta a 60 FPS con Canvas y Vue.

Oh, hay muchos votos. Me gusta. Tenemos muchos fanáticos de Guns n' Roses. Muy bien. Mientras siguen votando, voy a comprobar rápidamente si realmente hay sonido saliendo de mi guitarra. Hacer una rápida afinación y luego listo. Muy bien. Afinación rápida mientras votan. Siéntete libre de compartir tus votos en Twitter también. Porque estoy aquí bajo estas luces muy calientes, así que esta guitarra me va a suplicar piedad en este momento.

Muy bien. Solo echa un vistazo rápido. Este es en realidad un amplificador de guitarra virtualizado. Puedes ver que no hay altavoces aquí. No hay nada. Solo soy yo y una computadora portátil. Y esto es una tecnología moderna realmente genial. Que suena muy bien. Eso es lo que escucharás. Cómo funciona en realidad, te lo diré más tarde. Pero hay una cosa a la que debes prestar atención aquí, si muevo el ratón aquí, verás que hay esta configuración de amplificador. Top Hat Solo, que es, por supuesto, Slash. Esto cambia según ciertas partes de la canción.

5. Fuji S y Votos

Short description:

Fuji S le indica a mi amplificador de guitarra que cambie el sonido. ¡Vamos a por ello! Acabo de ajustar el volumen de la guitarra. ¡Mira estos votos! Cuando alguien no tiene una foto de perfil, es posible que estén enviando spam a los puntos finales. Pero Super Bass puede manejarlo. La canción de Michael Jackson es especial con Eddie Van Halen en la guitarra. ¡Vamos a divertirnos con ella!

Entonces, Fuji S le indica realmente a mi amplificador de guitarra que cambie el sonido. Porque a veces necesita ser más fuerte o lo que sea.

Muy bien. ¡Vamos a por ello! ¿Estás listo? ¿Estás listo? ¿Estás listo? Acabo de bajar un poco la guitarra, mi querido técnico de sonido. Es muy directo. Es genial. Sin embargo, cuando estoy aquí, se va. Así que lo siento mucho, pero shh, deberíamos estar bien.

Mira estos votos. Vale, esto es lo que pasa, ¿verdad? Cuando alguien no tiene una foto de perfil, creo que están enviando spam a los puntos finales de alguna manera. Y cada vez que doy esta charla, esto sucede y no lo he resuelto. ¿Cómo puedes votar tanto? Pero bueno, Super Bass, bien. Hicimos esto en una conferencia con aproximadamente 5 veces más personas. Sin problema.

Muy bien. Oh, Michael Jackson, ahí vamos. Muy bien, esta es bastante especial. Porque tiene a Eddie Van Halen en la guitarra, y no pretendo ser Eddie Van Halen. Aunque me voy a divertir con ella. De nuevo, necesito hacer una afinación rápida, solo para estar seguro. ¿Quién ha estado compartiendo sus votos? Muy ocupado votando. Muy ocupado votando. Sí, exactamente. Mira a Mark aquí. Voto positivo, voto negativo, voto positivo, voto negativo. Me gusta esto. Vale, suficiente de jazz. Aquí vamos.

6. Flujo de Señal y Equipamiento

Short description:

¿Qué está sucediendo? Soy la última charla y tocaré todas las canciones. Hablemos de cómo se construyó esto. El flujo de señal es importante. Una guitarra entra en una caja mágica y luego en una computadora portátil. Los músicos suelen tener mucho equipamiento en el escenario, pero yo solo tengo un sistema de sonido, una guitarra y una computadora portátil. La pequeña caja roja toma la señal analógica y la convierte en digital. Todo va a la computadora portátil y luego a la caja de arriba. Dentro, suceden algunas cosas.

¿Qué está sucediendo? Entonces, cuando tú... Bien, esta es la mejor vez que he hecho esto. Mira esto. El hecho de que se mantenga. Increíble, increíble, increíble.

De acuerdo, sé que soy la última charla y dije que solo tendrías tres canciones, pero voy a tocar todas porque ¿por qué no? Estaré a tiempo porque estoy mirando y tengo 10 minutos. De acuerdo, no es tan intenso, amigo. No tanto.

De acuerdo, antes de continuar, quiero hablar un poco sobre cómo se construyó esto. No entraré en muchos detalles técnicos, porque ya han tenido mucha tecnología hoy, pero al menos sobre el flujo de señal, cosas así. De acuerdo, aquí vamos.

Bueno, esto ya lo has visto. Correcto, hablemos un poco sobre la señal de lo que está sucediendo aquí. Por supuesto, para tener algún tipo de sonido, necesitas una guitarra, ¿verdad? Y luego esa guitarra, en este caso, entra en una pequeña caja mágica roja. Que en realidad está aquí abajo, pero no puedes verlo. Y luego va a la computadora portátil. La cosa es que normalmente, cuando ves a músicos en el escenario, no todos, pero la mayoría, tendrán un montón de cosas en el suelo en las que pisan y luego el sonido cambia. Tienen amplificadores enormes. En este caso, solo tengo esto, el sistema de sonido del lugar, mi guitarra y una computadora portátil. Es un poco extraño. No se ve eso.

Y lo que hace esta pequeña caja roja es tomar mi señal analógica, que son solo unos cables de cobre y un montón de imanes que generan una señal que sale con la vibración de la cuerda, que va directamente de manera analógica a esa pequeña caja. Y la convierte en digital. Y eso se ha utilizado durante mucho tiempo. Esto puede que no sea la forma de hacerlo, porque si haces esto en vivo y tu computadora portátil dice que no, todo está terminado. ¿Verdad? Pero aquí corro el riesgo. La cosa es que todo va a la computadora portátil y luego la computadora portátil va a esa caja allá arriba. Esa es la pequeña flecha ahí. Y dentro suceden algunas cosas. Bueno, acabas de ver ese pequeño amplificador que tengo.

7. Interacción del Navegador y Opciones

Short description:

El navegador se comunica con el amplificador para cambiar los sonidos de la guitarra. El navegador se actualiza en tiempo real con los datos de votación utilizando la reactividad de la vista y los datos asíncronos en NUXT. La función de actualización consulta constantemente los números y actualiza la pantalla. Hay dos opciones en esta parte.

Y así es como realmente escucha la entrada. Y luego la salida también va hacia arriba. Y luego está el navegador.

Todas estas canciones, están alojadas en Cloudinary. Jakup habló de eso hoy. También hacen audio. También hacen video. Ahí es donde vive. Y la salida del navegador también va al mismo lugar. Y normalmente, nuestros queridos técnicos de sonido podrían querer tener eso separado. Pero quiero tener una configuración tan ligera que sea como, ¡pluf, vamos! Y solo tienen que lidiar conmigo. Afortunadamente, son geniales.

Y luego hay una cosa adicional. El navegador realmente se comunica con el amplificador para decir, ahora cambia a este. Ahora cambia a ese. Porque estas canciones que acabamos de escuchar, tenían diferentes sonidos en la guitarra. Y eso es lo que el navegador le estaba diciendo al amplificador que hiciera. Y luego, echemos un vistazo al navegador, a lo que está sucediendo aquí. Básicamente, ves la próxima canción, ¿verdad? Con todos tus diferentes votos. Todo se actualiza en tiempo real gracias a la reactividad de la vista. Y cada vez que votas, ves tu pequeño ícono moviéndose. Y esto es básicamente Supa Bass mirando una fila de votos en SQL. Y si hay una nueva fila, simplemente envía una señal en vivo para obtener datos asíncronos en NUXT, que luego tiene una función de actualización. Bueno, voy a hablar un poco sobre eso. Un poco. Y esa función de actualización simplemente consulta nuevamente, constantemente. Entonces, cada vez que ves un voto, consulta todos los números y todas las cosas, todo el tiempo. Entonces, lo que acabas de ver, ¿cuántos tenemos, 500 burbujas? Cada burbuja, estaba consultando todo nuevamente. Así de rápido es esto. Bueno, luego tenemos esta parte donde tengo dos opciones aquí.

8. Guitar Signal and Song Performance

Short description:

Elegí hacer que la señal de la guitarra se pareciera a la canción que se está reproduciendo. ¿En cinco minutos, podemos hacer una o dos canciones? Utilicé IA para eliminar las voces y la batería y volví a grabar partes de las canciones. Puedes encontrar más información y videos escaneando el código QR o siguiéndome en Twitter.

Elegí uno de ellos. Uno es cuando toco mi guitarra. Hay una API de audio web que simplemente puede analizar mi señal y mostrártela. Pero a veces se desconecta. Así que elegí que se pareciera a la canción que se está reproduciendo.

Acabo de ver que tengo cinco minutos. Iré rápido ahora. Aquí hemos hablado del hecho de que tengo estos pequeños capítulos y cada capítulo le dice al amplificador que suene de esa manera. Y luego, por supuesto, tienes el teléfono. Y presionas votar. Va a SuperBass, va al navegador. Todas las cosas.

¿En cinco minutos, podemos hacer una o dos canciones? ¿Qué piensas? Dos. Dos, ¿verdad? De acuerdo. Necesito hablar de esto rápidamente porque luego puedes ver cuánto trabajo se ha invertido en esta charla. Hay derechos de autor. Hay DRM. Hay todas las cosas. Y todas estas canciones en realidad duran solo dos minutos en lugar de cinco. Y así que utilicé IA para eliminar las voces, la batería y todas las cosas. Y básicamente, para algunas partes, volví a grabar todo. Así que básicamente grabé un EP para esta charla. Todas las guitarras de todas las pistas de acompañamiento son mías. Algunas partes de bajo también son mías. Así que estoy tocando estas canciones clásicas yo mismo encima.

Y veamos. ¿Hay algo más? Si quieres saber más sobre la historia detrás de esto, cómo se construyó en realidad, todas las partes, puedes escanear este código QR y hay algunos videos de YouTube en los que muestro cómo se hace en realidad. Y este, ahora puedes seguirme en Twitter. O simplemente toco una canción. ¿Qué tal si toco una canción? De acuerdo.

9. Choosing the Song to Play

Short description:

Pero ahora la pregunta es, ¿qué canción debería tocar? Tenemos dos opciones: el clásico de todos los tiempos de los años 50, Johnny B. Goode de Chuck Berry, o el favorito de siempre AC-DC. La canción de Chuck Berry es de 1958 y definió el rock y la música pop. Es un poco incómodo tocarla, pero será divertido. Entonces, ¿cuál eliges? Gracias a todos por ver y aprecio su apoyo. No dudes en seguirme en YouTube para más videos sobre construcción de cosas y en Twitter. ¡Salud!

Pero ahora está la pregunta, ¿cuál? Echemos un vistazo. Podemos hacer al menos una. Así que tenemos la opción de lo que no he tocado. Hay algunas que son realmente divertidas. Por supuesto, tenemos el favorito de siempre AC-DC. Eso te hará vibrar y te darán ganas de tomar una cerveza después. Pero también hay otra. Que es Johnny B. Goode de Chuck Berry. ¿Quién conoce a Chuck Berry? ¡Genial! Porque esa canción es de 1958. Es la base de todo lo que acabas de escuchar. La forma en que la tocó básicamente definió toda la música rock que tenemos ahora y la música pop. Todas las cosas. Lo que pasa es que es una grabación de los años 50 y es incómoda como el infierno. Así que para mí tocarla será divertido. Puedo darte el clásico de todos los tiempos de los años 50, o puedo darte AC-DC. Grita cuál, Chuck Berry. ¿Sí? Creo que ya vi esa demasiadas veces. Pero ahí tienes. De acuerdo. Ten cuidado. Esto podría salir mal. Porque puede sonar como una canción súper simple, pero esto supera a Michael Jackson. Es mucho más difícil. Su madre le dijo que algún día sería un hombre y sería el líder de una gran banda.

Muchas gracias y realmente aprecio a los hackers. Y si quieres seguirme, sé que tengo un minuto. No dudes en seguirme en YouTube donde hago un montón de videos sobre cómo construir estas cosas. Y también hablo sobre la startup en la que trabajo, de la que no hablé mucho, pero que también se utiliza en esta herramienta. Y Twitter como todos tienen. No Mastodon. No sé por qué no lo hice, pero no. Eso no está ahí. De todos modos, eso es todo. Muchas gracias por ver. ¡Salud! Es hora de tomar una cerveza.

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

Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 may still sound new to many users, but it's actually been released for over a year already. How did Vue 3 evolve during this period? Why did it take so long for the ecosystem to catch up? What did we learn from this process? What's coming next? We will discuss these questions in this talk!
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
Rust is a new language for writing high-performance code, that can be compiled to WebAssembly, and run within the browser. In this talk you will be taken through how you can integrate Rust, within a Vue application, in a way that's painless and easy. With examples on how to interact with Rust from JavaScript, and some of the gotchas to be aware of.
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.

Workshops on related topic

Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
JSNation 2022JSNation 2022
141 min
Going on an adventure with Nuxt 3, Motion UI and Azure
WorkshopFree
We love easily created and deployed web applications! So, let’s see what a very current tech stack like Nuxt 3, Motion UI and Azure Static Web Apps can do for us. It could very well be a golden trio in modern day web development. Or it could be a fire pit of bugs and errors. Either way it will be a learning adventure for us all. Nuxt 3 has been released just a few months ago, and we cannot wait any longer to explore its new features like its acceptance of Vue 3 and the Nitro Engine. We add a bit of pizzazz to our application with the Sass library Motion UI, because static design is out, and animations are in again.Our driving power of the stack will be Azure. Azure static web apps are new, close to production and a nifty and quick way for developers to deploy their websites. So of course, we must try this out.With some sprinkled Azure Functions on top, we will explore what web development in 2022 can do.
Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
Workshop
- Intro 3D - Intro WebGL- ThreeJS- Why TresJS- Installation or Stackblitz setup - Core Basics- Setting up the Canvas- Scene- Camera- Adding an object- Geometries- Arguments- Props- Slots- The Loop- UseRenderLoop composable- Before and After rendering callbacks- Basic Animations- Materials- Basic Material- Normal Material- Toon Material- Lambert Material- Standard and Physical Material- Metalness, roughness - Lights- AmbientLight- DirectionalLight- PointLights- Shadows- Textures- Loading textures with useTextures- Tips and tricks- Misc- Orbit Controls- Loading models with Cientos- Debugging your scene- Performance
Vue.js London Live 2021Vue.js London Live 2021
176 min
Building Vue forms with VeeValidate
Workshop
In this workshop, you will learn how to use vee-validate to handle form validation, manage form values and handle submissions effectively. We will start from the basics with a simple login form all the way to using the composition API and building repeatable and multistep forms.

Table of contents:
- Introduction to vee-validate
- Building a basic form with vee-validate components
- Handling validation and form submissions
- Building validatable input components with the composition API
- Field Arrays and repeatable inputs
- Building a multistep form
Prerequisites:
VSCode setup and an empty Vite + Vue project.
Vue.js London Live 2021Vue.js London Live 2021
116 min
Building full-stack GraphQL applications with Hasura and Vue 3
Workshop
The frontend ecosystem moves at a breakneck pace. This workshop is intended to equip participants with an understanding of the state of the Vue 3 + GraphQL ecosystem, exploring that ecosystem – hands on, and through the lens of full-stack application development.

Table of contents
- Participants will use Hasura to build out a realtime GraphQL API backed Postgres. Together we'll walk through consuming it from a frontend and making the front-end reactive, subscribed to data changes.
- Additionally, we will look at commonly-used tools in the Vue GraphQL stack (such as Apollo Client and Urql), discuss some lesser-known alternatives, and touch on problems frequently encountered when starting out.
- Multiple patterns for managing stateful data and their tradeoffs will be outlined during the workshop, and a basic implementation for each pattern discussed will be shown.
Workshop level

NOTE: No prior experience with GraphQL is necessary, but may be helpful to aid understanding. The fundamentals will be covered.