Alive and Kicking - A Vue Into Rock & Roll

Hello, everyone! Are you still awake? I'm seeing a lot of smiling faces and big eyes. We're good. Wow. We've been upstairs there all day looking at all our friends speaking. And the amount of information is ridiculous. So the fact that you're all here is awesome and you've learned a lot.

And so I decided it's going to be different today. This is me on the phone call, as you can see. And actually I'm going to be using this today. Rather than talk about Vue and browsers and all that stuff, I'm going to use it. And then with this, we're going to turn it up. Because after this, it's beers. So you're going to be ready for the beers.

But before I go in, I'll just give you a few slides to kind of understand why I'm doing this and what it's all about. And after that, it's just... Oh, I should not drop this. After that, it's party, essentially. So I am an ambassador for a whole bunch of things. And open source stuff and startups and all of that. But I'm trying to put all of this stuff into the talk. And like I said, it's going to be not super technical. But all of this is used. All right.

So you might have heard my accent. It's a little kind of strange. Because I was born in the Netherlands. But I live in the south of France. And I work with Americans. And so if you mix these cheeses, it's not good. But that's what you hear, essentially.

And so today, this is a life in kicking. And all my life, I've been a guitarist. But for the last 10 years, I didn't do any of it. So all the pictures you see are very young, Tim. I couldn't find any others. So I thought, let's meme myself and put up some of these pictures.

And so essentially, what we're going to do, we're going to use FutS for rock and roll. And so essentially, this is a FutS guitar karaoke. And I came up with this because all my colleagues, of a lot of them at least, they all live in Berlin. And when I go there for work, they're all like, dude, let's go to karaoke. But I'm so bad at singing. It's just the worst. And so I kept saying no for the longest time. And then I thought, I have to redeem myself somehow. And that's what this is. So we have guitar karaoke instead. And so it's all in the browser.

And the fun thing is here. I want a little bit more interaction with you guys. And so in a second, I'm going to give you a QR code. You go on your phone, you go there, and you can vote on the songs that I play. So the ones that have the most votes, I will be playing. And so let's see. What's my next? And so I wanted to do this because I use Vue all the time and a bunch of tools all around. And so I wanted to do the whole thing completely virtual in the browser. And so what I've used today are, of course, Vue, of course, Nuxt, also Supa Bass, Pignan, Cloudinary, and WebMedia. That might be the odd one out, but we'll talk a bit about that a bit later.

And so what I'm doing is that Vue JS, JavaScript, is actually controlling the sound that comes out of my guitar. It's sending signals all over the place to make sure that it sounds right for the right song at the right place. And then Vue JS, of course, also plays the backing track.

And it visualizes the audio. You'll see that in a sec. It's a whole bunch of fun things with Vue.

Also just see this is me at 18 with leather pants and a lot of hair. Compare it to this, right? I'm using Supa Bass for logging in and database stuff for the voting. And they have this lovely live connection. You'll see it's really fun.

One last thing. Oh, that went fast. So... All right. Yes. So if you have voted in your favorite song, if you wanted to, you can actually share that vote. And you put it on Twitter. And it's like... This is like me that I voted on this song. But you could do that for your own as well. And I want to blast Twitter with all these images. So if you're up to that, go for it.

All right. This is my favorite slide. Are you ready? All right. So what I want you to do is go on your phone, scan this QR code, or go to aliveandkicking.dev. And while you do that, I'm slowly just going to set all this up here so we can get started. So feel free to log in. Actually, this morning, I had Twitter as a login. And then dear Elon decided to just suspend my account. And so no login with Twitter. But we should be fine. Anyways.

Let's have a look at my browser. Okay. So I am already seeing a few votes. And so the idea is that if you hit the vote, you see your own avatar bouncing around on the screen. And so the keen eye among you is like when you upvote and downvote and upvote and downvote, you are on the screen a lot. So if you want to spam my endpoint and see how well Next Serverless plus SuperBase takes it, spam the hell out of this thing. And this is all 60 FPS running with Canvas and Vue.

Oh, there's lots of votes. I like it. We have a lot of Guns n' Roses fans. All right. So while you keep voting, I'm just gonna have a quick check to see if there's actually any sound coming out of my guitar. Do a quick tune-up and then there we go. All right. Quick tune-up while you vote. Feel free to share your votes on Twitter as well. Because I'm here under these really hot lights, so this guitar is gonna beg me for mercy right now.

All right. So just have one quick look. This is actually a virtualized guitar amplifier. You can see, there's no speakers here. There's nothing. It's me and a laptop. And so this is really cool modern tech. That sounds great. So that's what you'll be hearing. How it actually works, I'll tell you later. But there's one thing you should pay attention to is that here, if I move my mouse here, you see there's this amp preset. Top Hat Solo, which is, of course, Slash. This changes based on certain parts of the song.

So Fuji S is actually telling my guitar amplifier to change the sound. Because sometimes it needs to be louder or whatever.

All right. Let's go for it. You ready? You ready? You ready? I just put the guitar down a little bit my dearest sound person. It's very much in your face. It's great. However, when I stand here, it's gone. So I'm so sorry but shh, we should be good.

Look at these votes. Okay, so this is the thing, right? When somebody doesn't have a profile picture, I think they're spamming the end points somehow. And every time I do this talk, this happens and I have not figured it out. How can you vote that much? But then again, Super Bass, fine. We did this at a conference with about 5 times the amount of people. No problem.

All right. Oh, Michael Jackson, there we go. All right, so this one is pretty special. Because it has Eddie Van Halen on the guitar, and I'm not pretending I'm Eddie Van Halen. I'm gonna have some fun with it, though. Again, I do need to do a quick tune-up, just to be safe. Who's been sharing their votes? Too busy voting. Too busy voting. Yeah, exactly. Look at Mark here. Upvote, downvote, upvote, downvote. I like this. Okay, good enough. Good enough of jazz. Here we go.

What is happening? So when you... Okay, this is the best time I've done this. Look at this. The fact that it's holding up. Awesome, awesome, awesome.

Alright, so I know I'm the last talk and I said you only have three phones, so I would play three songs but I'm just gonna play all of them because why not? I will be in time because I'm looking and I have 10 minutes. Alright, it's not that hardcore dude. Not that much.

Ok, so I want to talk, before I do the rest, I do want to talk a little bit about how this was actually built. Not too detailed on the tech, because you've had a lot of tech today, but at least like signal flow, things like that. Ok, here we go.

Well, this you've seen. Right, so let's talk a little bit about the signal of what is actually happening here. So of course to have any sort of sound, you need a guitar, right? And then that guitar, in this case, goes into a little red magical box. That's actually down here but you cannot see that. And then it goes into the laptop. The thing is, normally, when you see musicians on stage, not all of them, but most, they will have a bunch of stuff on the floor that they step on and then sound changes. You have huge amplifiers. In this case, you just have these, the PA system off the venue, my guitar, and a laptop. That's kind of strange. You don't see that.

And so what this little red box does is actually takes my analog signal, these are just a bit of copper wire and a bunch of magnets that have a signal that goes out with a vibration of the string, that goes directly analog into that little box. And that makes it digital. And that has been used for quite a long time. This might not be the way to do it because if you do this live and your laptop says no, everything is done. Right? But I take my chances here. The thing is it all goes into the laptop and then the laptop goes into that box out to upstairs. That's the little arrow there. And so inside a few things happen. Well, you just saw that little amp, right, that I have.

And so that actually listens to the input. And then the output also goes upstairs. And then there's the browser.

So all these songs, they're living on Cloudinary. Jakup spoke about that today. They also do audio. They also do video. That's where it lives. And the output of the browser also goes to the same one. And so normally, our lovely sound guys might want to have that separated. But I want to have such a light setup that's like, plook, go! And they just have to deal with me. Luckily, they're awesome.

And then there's one extra thing. The browser actually speaks to the amplifier to say, now change to this one. Now change to that one. Because these songs just now, they had different sounds on the guitar. And that's what the browser was telling the amp to do. And so then, let's have a look at the browser, of what is going on here. So essentially, you see the up next thing, right? With all your different votes. It's all updating life because of view reactivity. And then every time you vote, you see your little icon just bouncing around. And this is essentially just super-based looking at a vote row in the SQL. And if there's a new row, it will just push a signal live to get async data in NUXT, which then has a refresh function. Okay, I'm gonna speak a little bit about it. Little. And that refresh function just queries again, constantly. So every vote you see, it queries all the numbers and all the things, all the time. So that you just saw, like, how much do we have, 500 bubbles? Every bubble, it was querying all of it again. That's how fast this is. Well, then we have this part where I have two options here.

I chose for one of them. One is when I play my guitar. There's a web audio API that can just analyze my signal and show you. But that sometimes goes off. So I chose to make it kind of just resemble whatever song is playing.

I just saw I have five minutes. I'll go fast now. Here we have talked about the fact that I have these little chapters and each chapter says to, you know, the amp, sound that way. And then, of course, you have the phone. And you hit vote. It goes to SuperBass, goes to the browser. All the things.

So in five minutes, can we do one or two songs? What do you think? Two. Two, right? Okay. I do need to talk about this one quickly because then you can see how much work went into this talk. There's copyright. There's DRM. There's all the things. And all these songs are actually only two minutes rather than five. And so I used AI to take out the vocals and the drums and all the things. And I basically for some parts rerecorded the whole thing. So essentially I recorded an EP for this talk. All the guitars of all the backing tracks is me. Some bass parts is me as well. So I'm replaying these classical songs myself on top.

And let's see. Is there anything else? If you do want to know more about the story behind it, how it's actually built, all the excerpts, you can scan this QR code and there's a few YouTube videos out there that I show how it's actually done. And this one, you can follow me on Twitter now. Or I just play a song. How about I play a song? Okay.

But now is the question, which one? Let's have a look. We can do at least one. So we have the choice of what I haven't played. So there's a few that are really fun. So of course we have the old time favorite AC-DC. That will rock your world to go for a beer after. But there's also another one. Which is Chuck Berry's Johnny B. Goode. Who knows Chuck Berry? Nice! Because essentially that song is from 1958. It's the base for everything you just heard. The way he played basically defined all the rock music we have now and the pop music. All the things. The thing is, though, it is a recording from the 50s and it's awkward as heck. So for me to play along, this is going to be fun. So I can give you the all-time classic from the 50s, or I can give you ACDC. Shout which one, Chuck Berry. Yeah? I think I just saw that one too much. But there you go. Okay. Beware. This might go wrong. Because it might sound like a super simple song, but this beats Michael Jackson. It's way harder. His mother told him someday you will be a man and you will be the leader of a big old band.

Thank you very much and I really, really appreciate the hackers. And if you wanted to follow me, I know I have one minute. Feel free to follow me on YouTube where I do a bunch of videos about how you built this stuff. And also I talk about the startup that I work at that I didn't speak about that much, but is also used in this tool. And Twitter as everybody has. No Mastodon. I don't know why I didn't do that, but no. That's not there. Anyway, that's it. Thank you very much for watching. Cheers.