Tim Benniks - A Vue into Rock & Roll part 2 - Vuejs Amsterdam 2024

so this talk is going to be a little different and I love that jillson was asking how many people are new here and a lot of people raised their hands so you haven't probably seen what I'm about to do because you don't see that very often at a stage for a conference about Tech stuff right so my talk is really about not how you implement the tech or how you do it but I've actually done it for you and we're going to have an experience with guitars and you guys get to do a bunch of stuff with the talk so it's hopefully it's a bit more about the inspiration of what fuds can do right so before we get started um I work at HRA and I'm doing developer relations and we love AI nowadays because that's actually my face on this F this dude and so hgraph is a hatless CMS um that is graphql native and so I won't go too deep into it but all the content that you see in this talk actually comes out of hgraph all right so I'm an ambassador for a bunch of cool stuff um of course n we have algolia we have super base we have cloudinary and all that stuff is actually in the talk and I couldn't really find any images of me um with the you know the swag on so I just literally took anything I had anyways um you might think that my accent is a little strange because I was actually born here I think that side across the water um so I'm from Amsterdam but I live in France and I work with Americans so this is how I sound when you do that and I've checked with my colleagues they use that cheese like for real that's the thing so let's talk about this talk and so I have a few images here of when I was young and skinny but why not that's when I was a proper musician and so this talk is called Alive and Kicking and so the idea is that I created a guitar karaoke application because if you play guitar you want to do that as as many places as you can right and why not at work well that's what we're doing here and so essentially we use the guitar in the browser so the browser controls the whole karaoke application and of course we're using fuggs and so the thing is that you get to vote which songs I play and so what I've come up with is you can be kind of like a DJ because the idea is that I made something called like a mashup like a DJ could do a 20 minute set and it'll have five songs that kind of flow well together we're going to do that today but you're going to be fting which song comes when and I kind of have to figure out what that song is by just looking at my screen and then playing it instantly and it just it will Loop so if I don't look it's a problem right so you vote for your favorite mashup of the eight songs that I'll you know you'll get on your phone in a second so you'll get something like this and you I try to have songs that are a little bit rock and roll focused but hopefully for everyone right so we have bon Joi with its Mickey Mouse rock and then we have Iron Maiden with the proper metal like I have hopefully something for everyone and so I've buil it with all the tools that you've probably seen um today I won't go too deep into the tech right now I think it's time to just get you awake and play a little bit and then we talk about it more right and so like I said fugs controls the whole thing and I I'll we'll go over what this box is what the guitar does all that in a sec all right are you ready to rock yes let's go but one thing first um the conference here is helping me a ton with this right because you see I have the whole screen there's a whole bunch of extra things happening and so what I would love to do is um when you vote for your mashup you can actually share that and then once you share it you see there's like the the hashtag of fugs Amsterdam and so what I would love to see is like all of Twitter full of fugs Amsterdam stuff so these guys get like some organic growth from you and of course it's fun that my stuff is shared so let's let's be honest about that um so take out your phones and scan this thing or if you're on your laptop or tablet or whatever go to Alive and Kicking dodev so while you do that I'll just grab my guitar and get ready is it working it better work it's going to be a rough day I'll leave this on for just a sec so you guys have a chance to get there okay well that's working are we good to be honest once I start on that screen there you'll have the QR code as well and so just for you to remember it's called Alive and Kicking dodev guys can you turn off these lights a little better oh you cannot scan oh the new iPhones and their F their focus problems that's problematic I did not consider that okay so go to alive and kicking. Dev instead all right so I'll give you a quick note on what's Happening Here while you figure it out so have you guys been able to log in because then you can start voting on the songs like you have four spots right now we have zero votes and so these are just the first four songs that we have on so feel free to start voting for your favorite songs which spot is which that would be one 2 3 four ah and the screens are starting to work we're seeing some photes I think I have to do a refresh of my browser there we go so what you see here is when you vote you see your little icon bounce around so keep voting as much as you can and you'll see yourself be part of this and all of you are here and it keeps updating every 10 seconds and so this is using super base real time so all of this is basically a websocket so what whatever you see is live so this is starting to go so while this is going let me show you quickly what I'm dealing with here so this little red box has an input from the guitar it makes it digital and so this is an is an is an amplifier application and so we don't need amps we don't need anything we just plug in and go so um what I asked last year is try to hack it please I want as many photes as possible so if you can hack it it feel free I think it's a little safer now I did a lot of you know security stuff this time but here we go so it seems like Michael Jackson is the first vote so what I'll do now I'll make this go and then you can no longer vote for the first one but you can actually change the second third and fourth here we go e e [Music] it oh [Music] be [Music] go thank [Applause] [Music] you to listen to me why about nothing and everything all once I am one of those melodramatic fools neurotic to the bat no doubt about it sometimes I give my myself the creeps sometimes my mind plays tricks on me I'll keep set it up I think it [Music] just I shrink I like my dreams she says it's like the step that's bringing me down and I went to he said my [Applause] qu sometimes I give [Music] myselfs sometimes My Mind Tricks on Me it all keeps heading up I think I'm get [Music] [Music] just to control so I better hold [Music] sometimes I myself theep my Minds on me it all keeps up it my know I Just sh [Music] what's next thank you oh yes [Music] [Music] it by [Music] day very you can [Music] to the work here every day learn to live like a see [Music] w [Music] [Applause] [Music] [Applause] [Music] [Music] [Music] [Applause] I [Music] [Applause] [Music] oh [Music] [Music] [Music] he [Applause] [Music] [Applause] [Music] [Applause] [Music] y thank you very much all right I think it almost worked Nikki do you mind refreshing that browser we tried a crap okay I told you to use Chrome didn't I all right all right all right so let's chat a little bit about what happened all up there let's turn that volume off um and the lovely thing is I still have 22 minutes so what I can do is actually change it up in a sec to its normal mode so you can just F and we can actually play all the songs there's more than enough time which is awesome uh let's see what are we dealing with here so let's talk about some fancy term that we call the signal chain and so the signal goes from the guitar which is this bad boy here and the strings vibrate to these we call them pickups and this is analog signal that goes out here and that analog signal somehow needs to come into the computer and we do that by this lovely Focus ride box and everybody uses these there amazing and quite cheap and so they go into the box I'm saying it's cheap because it's very important because now everybody can do this anyways you go into the browser or into the computer and then the computer actually goes to the speakers here right so that's the guitar to the speakers but then inside the computer we have this little application that I just showed you that made my guitar sound the way it sounds it's like a virtualized amplifier normally it would be a big speaker here with a bunch of knobs and pedals on the floor and musician always love this stuff because it's extra gear you can deal with it but the whole point was I want to just put my laptop down to a conference talk so I did a virtualized one and then also we have the browser so the browser is playing this backing track and that also goes to the front of house here in all the sound so basically those two things are mixed and it's lovely for me because I can control it our lovely sound people just get whatever they get from me so there's not much mixing involved but I'm sure lots of fixes were done on the fly so thanks for that Andrew and so then the browser talks again to this amplifier because of course the intro versus the first versus the solo have different sounds sometimes there's more Echo sometimes there's a different equalizer so I need to make sure that I don't have to step on any boxes for the sound to change I don't want to think in this setting right so let's talk about the browser for a sec so you can see of course here on the left top that's where you see what song is playing all the photes all the things and then it will automatically actually go to the next one and so I've had to hack that one because if I want to play the next one and I needed to refresh the browser I going to do a click with JavaScript because it needs a user interaction to do autoplay for for the song so there's there's lots of like little tweaks in there that I had to do and so then you see The Equalizer right and so this actually responds to my guitar so this is a live Channel with an audio like there's there's this web audio API and so it can analyze and that's what this is and it's just a canfest that just goes 100% And it's it's kind of true to whatever the sound that comes in and then we have the audio player that has these chapters the thing I just talked about right and so each chapter would then actually say well for this part of the song go to that preset and so all this information the presets the chapters the images they all come from high graph which is the CMS I work for right and so of course you can put this stuff in adjacent file or in any other CMS but I work there you see there's the hat so there it is and so um it's actually pretty cool that you can do so many different things with hatless stch like all of this happens in the cloud right and um this is not an application per se it just talks to things on the side and figures things out together and then it's all in the client all the fting you saw it's all in the client right and then of course that little up up the iron sound goes to the amplifier gives the sound and we play and so on your phone when you're fting something it goes to super base so super bases has this there's a bunch of stuff like you're logged in with superbase also and they have a post exess database so every phote you do is your user ID with the phote of the song like the ID and then which spot and there is a um well when the moment that happens you see like right now the screenshot has a zero but it of course scks up when you put a phote and then you see all the balls bouncing around and that is something super cool with super base and N where you could literally say I have a real-time channel that listens to a change in the database so for now I just said update or insert and based on that it says hey there's a change and then I use the the use async data composable in N to just refresh the call and query the last thing and so if that happens a thousand times it does a thousand new queries for the last row that was just inserted and it is good enough for now because sometimes you might get five votes at the same time but I didn't put any database locks because who cares it's a conference talk and you know what it held up pretty well you guys were fting your butts off and it had 60 frames per second the life thing was happening and had like the technology today is is insane that it works that well and so this is the stress test I was doing on my local host and so this is literally just everything you see is a new query and the lovely thing I've noticed with super base especially when you do a query just one it's like 100 milliseconds but when you do it like this they become like four milliseconds like it scales up like crazy and so one last thing that I didn't talk about at all these songs were short right they were like two-ish minutes and I wanted to do that because otherwise I'd be be an hour here and it's these songs are repetitive because awesome focals and things but I'm just playing guitar so what I've done also for copyright issues I have basically taken these songs and cut them up and I used AI to isolate the instruments and it works most of the time and so what I've done is like taken the drums taken the bass taken the focals make it shorter put it in remix it with the help of lovely Nikki who sits behind there doing the production awesome Nikki and basically she helped me to mix and I played my own guitars and so what this means youve see so there's eight songs here so I basically recorded an EP for this but then with famous songs like I've been just playing myself because all these songs they have all these fancy bells and whistles that make no sense for me to play guitar over so I just kind of stripped them made them easy to listen to well my guitar is over it and that's what you heard today and so there's a few months of work there and so this is the first thank you here um doesn't mean it's the end because I have 15 minutes so lucky me right I expected 30 so that would be on the dot so what we're going to do is there's a different mode in my app where I just right now it's mashup mode but let's just put it on on the normal mode so you guys can vote on the songs that you hadn't seen yet so it says extra secret confict but you guys cannot go here I promise it won't work I promise try but maybe not I don't know I don't know okay I'm just going to reset everything now so photes are gone active songs are gone all the things are gone and we're setting it to normal mode you saw that IM immediately change that's the live super base thing I changed the database row it listened it quered again something else are you looking at my page are you I did not show you this seriously it's connected to my ID okay anyways so please don't go to that page because that not fun anymore so refresh your browsers and you'll see a different way of voting now you just have eight songs and I would suggest you vote on the songs that we didn't play yet and in that order we finish the rest in the last 15 minutes you see how performant this is it's all in the client so we we don't need that much there's no SSR here anywhere I know we talk about that a lot but if you can do it like this why not browsers are fast F okay so while this is going on I need to tune because I felt my guitar go out of tuning the hotlights while I was playing oh boy oh boy so if is there a buck in my application or are you guys faulting like crazy I don't see any double faces not really wow or maybe some or who hacked it raise your hand who hacked it the people who really hack it will come to me after and show me I hope right it looks like it's going to be Iron Maiden so what will holy moly can hardly see my interface so what we'll do is we'll just play the songs I didn't play yet in the order of your votes and while I play you can continue voting so let's start with Iron Maiden and then it's going to be Bon Joi then it's going to be Aerosmith and then I just can't read okay we'll see at that point here we go are you ready for some like old school rock this is like I never play this stuff right so this was like practice to the max this song Here We Go [Music] [Music] [Applause] [Music] you take my life but I'll take yours too you fireing musk but I'll run you through so when you're waiting for the next attack you better stand there's no turning back so few charge begins on this battlefield no one wins feel the just down [Music] [Music] [Music] oh [Music] [Music] no yo if I just keep smiling you don't hear the mistakes that's what happened there I hope I didn't show it too much all right who's next well Metallica we did right oh we did not what that's awesome let's go Metallica that's fun you guys are rockers is this an alarm I have to worry about okay we're good [Music] he he [Music] [Music] T the W the drag and the that with [Music] your my hand never [Music] w [Music] [Applause] s minutes let's do this okay we're good e e e e [Applause] I think there's one left are you ready for some 80s yes this is going to be full force Mickey Mouse rock for you and you know what I might say that but this is so fun to play this is like pure party here we go through the too late love bad [Music] name Angel Smile what you say you promised me heaven and put me through hell Jesus love got to hold on me pass of prison you can't break free oh you're not God W there's nowhere to run no one can save me the damage is done shout out High and love to you love I play play all game you love you love [Music] [Applause] through the heart [Music] andame that's it thank you thank you so much for entertaining me in my guitar Endeavors here um I want to thank you and I don't have my phone on me but I'm hoping Twitter is full of your shares because that would be super fun and you can follow me on YouTube or on Twitter and if you feel like I can just give you one CTA check out hgraph because I'm doing a guitar talk I'm not talking about my job at all but feel free to have um you know it's like a free account and it's a super cool CMS so that's it for me thank you so much and have a lovely conference cheers