About this talk
In this engaging session, Thoren Sasha conducts an interactive quiz focused on Vue.js and its ecosystem, utilizing an open-source application hosted on GitHub. He begins the quiz by encouraging participants to scan a QR code and join in using their smartphones, all while highlighting various Vue-related technologies and concepts. The quiz covers a wide range of topics, including JavaScript frameworks, Vue's development server, TypeScript updates, and state management libraries. Throughout the quiz, Thoren provides insights into Vue’s history and the rationale behind certain JavaScript quirks. Despite facing technical difficulties and bugs during the presentation, he maintains the audience's enthusiasm and encourages participation by offering prizes such as 3D-printed magnets and a LEGO set for the winner. This talk showcases both the fun of learning through gamification and the vibrant community surrounding Vue.js.
Full transcript
Thank you. >> Hello and welcome everybody to the last talk of the day. I know that you are all a little bit tired and at some point you want to go to the after party. That is the last thing on the list today. But before that, I want to play a little game with you because we already had some wonderful talks today. So the last thing now
is an interactive one. It is the view think you know it all the ultimate view live quiz. So take out your phones please and scan the QR code on the top right. I can see some already did because on this little application that is open source and you will find it on GitHub. You can not only spam all wonderful emojis here, but you also will see the
questions and you can answer them there. So, my name is Thoren Sasha. I'm your host for this little quiz. I'm an IT consultant, senior fullstack developer and conference speaker and I'm currently self-employed. So, if you need some help in an awesome project, you will find all my social medias on my website to.tv. Also, there are the projects, the source codes, everything is linked there. For this quiz,
I want to have a special shout out and thank you to Alex and to Gillian. Please a small applause at this point because both of them helped me make this happen. And I can see many are incoming there. Oh, I hope the GPU is making way fine. This is um the next big thing. You all heard all the cool stuff about AI today. The next cool thing
is buckdriven development. Please don't spam too much otherwise we will not be able to play this. Um uh yeah will we let it sink a little bit. Don't too much please. You can fully test it after this talk after the quiz and if you find bugs please raise them. Other than that buck driven we will see if it works. So uh there are also prizes. Everyone that
can that attends here can win or just take uh little magnets. I made 3D printed magnets and keychains. I have like 300 in this box here. So, just come after the quiz down here, grab one or two and then you can leave to the party. But also, yeah, this was the table when I just glued them together. Also, there's one big prize. It's the Fangok flower uh
thing from Lego. It's in the booth there at the right. So, at the end, one person will go with this home today. If there are multiple persons with the same score, we will just get one randomly selected, but your score is calculated in the background. So, best of luck. Let's start because now you know me, I don't know you. So, what's your favorite JavaScript meta framework? Just
so that we can test the software that we can see that everyone could join and everyone can click something. If the websocket is not updated automatically on your phone, you have a little refresh button at the top. So you can just refresh it because this one is triggering. So I shouldn't uh be safe here. Okay. So we're getting many things here. 66% from 157 160 persons that
are taking here place. That's a nice number. Of course there's no right answer here. Just to be sure, this answer here that you give is not a point in the final score. Okay, let's see what we have here. 64% are using KNX. Perfect on a Vue conference. That is um absolutely amazing. But we also have 7% that are using others. Okay, 6% 5% are using Assembler. You're
all trolling. I know that. Okay, some are not using Meta Frameworks. That's fair. Maybe only just Vue or something like that. Awesome. Okay, so the software seems to work until now. Let's go to the first real question here. Okay, that is now working perfectly here. Let me just minimize it. Okay, perfect. Next question. Yeah, I I don't know if you if you find the bug in the
code, please report it. Thank you very much. How many how many additions of the Vue.js Amsterdam uh J Vue.js Amsterdam have been there including this year's 2026. You see not the the answers here are not in the order on your phone. This is a random generated order. So your first slot is not my first slot here. So don't get confused there. But I thought it might be
interesting that you can see how the people are going to have this scramble edition here. So I will just also open it on my phone that I can read for the next one as well. Perfect. I think that is enough. I think you all already googled the right answer at this point. So we will just lock it here and then we will see the most people 44%
say that it's the ninth and this is correct. It is the ninth edition. You all got a point. Congrats to you. Many people thought it's the seventh. You must think about okay I can also here just close this. Um the correct answer is the ninth. It has been there since 2018. So it is the ninth edition because there also was some online things and stuff like that.
You must count that in as well. Okay. Next question here is all the emojis are coming in. So why does type of null return object in JavaScript? I mean you can test it out if this really is the case but I think you know it that this is the case. Is it because it's a prototype of all objects? Maybe it's an historical artifact from JavaScript's first implementation.
Or is it a special object type definition in ECMAScript or is it distinguished from undefined? Okay, we have like 50% people already gave an answer. I will just wait around 60 or 65%. Okay, 65. That was really fast. 70%. Oh, that's a was a close race until now. Let's see. I will close it like now. Okay. So the most people think that it's first implementation and uh
it's like 38% here. That is the correct answer at this point. You all got a point. Congrats for that because the original implementation values it internally. So object had a tag of null and the null pointer itself also had the zero. So that is something that is not fixed because it's seen like okay if we now fix this then we will crash so many websites and so
many amount of existing code will not work anymore that this is now just state-of-the-art and it's now a feature not a bug anymore. So next question here I hope that they will not stack up until but it seems like it. So if you type in console.log new date get month and we are in March currently. What will be returned? Is it one two three or is it
the string March? What do you think? Oh, this is rather clear here. There's no big doubt about what people think. Okay, I will give you just a second. Like we're at 70%. That's that's nice. 75. Okay, I give you three seconds. Two, one, last chance. Perfectly locked. Let's see. Most of the people think it is two. And this is correct because we are counting from zero up.
So this is the third in row but 012. So the two is the correct but maybe this will with the temporal API change. So with TC 39 stage three, we will eventually provide there a new approach that we can use. We will see that. But for now, it is the number two for the correct answer. Cool. Also, new points. I'm really excited about the leaderboard at the
end. At the end, maybe there are many more people that all got all the questions right. Yeah, this is this is now the thing here. What is not shipping in Typescript V6? We have um three options here are correct, but only one is wrong. So, find the wrong one. Is it the deprecation of legacy configuration options or breaking changes to align with the native implementation or does
the temporals maybe will not come or is the core porting to go not the correct one? We are searching for this. Let's see what you think. I hope I am as fast as you cannot Google all the answers but I will always too be slow too slow for AI to answer this. So, oh, we have ducks now. What were the ducks before? Nice. Okay, 75% already voted.
Okay, we're getting there. We're getting there. Like four seconds for you. Three, two, last chance. Okay, I have to close it before it crashes here. So, most of the people think that not shipping to go is the right correct thing. And this is right at in fact because Typescript 6 so um strata continues ajsbased code base and they are breaking changes to be fixed and aligned and
upcoming native porting and the porting itself the go porting is for typescript 7 for the corsa upcoming so this would be the correct answer it is not in ts6 perfect you are really really good at this so that's amazing let's go to the next because I know you all want to go to the party and want to eat something and 20 questions you see they are all
mixed up some questions now now we had to JavaScript and Typescript now we're getting to the Vue and KN ecosystem and also to the um frameworks around the the community around it as well starting with what's the default port for Vue's development server is it a uh the port 1 2 3 4 is Is it port 3000 or is it port 5,173 or is it port 8080?
I mean it's a little bit unfair for people that are attending here that also made my quiz at Vitcon as a little hint here. I will not say more but seems to be a very close race here. Like 41 people think it's option three. Whatever option three is here I have no idea. It is randomized but something is taking the lead. Okay, like three seconds for you
more. Two, one. Let's lock it and let's see it. Most of you think it is and that is indeed correct. default port for KN is something else of course but I can explain it to you because uh vit is running your dev server and vit in lead speech is the so the v is the five from the Roman uh thing and the rest is just lead and
then you get the 5,173 as lead from vit and that is the default port as a little Easter egg here. Perfect. Most of you got that. That's really nice. I'm really scared of clicking going on at the point where the emojis are getting out of hand. Okay, I can restart it at some point. No problem with everything is persisted here. So, originally it was persisted in the
KV store, but thanks to Gillian, it is now the Postgress database. So, we should not lose our data. Next question here. Is it the next one? Yeah. What does the name view mean? This uh the person it could be translated in simple, in fast, in light or in sight. Only 24% are contributing at the moment. Is my use UI not updating or are you all dropped out?
Is there a technical problem? Okay, you're just thinking. Okay, that's the also fair point. Come on. At least 75% could click here Is it is it not crash? Is it crash? I heard the word crashed. Now I'm shaking. What? 75. Perfect. Perfect. Thank you that you have paid attention at least someone. So I will lock it here. And the answer site is indeed correct because the French
wording translate to vision view or site. So view means just translated from the French site. And it is as easy as that. More points for you. Coming closer to your Lego set. Awesome. Okay, next question up in line. I hope you're having fun at the moment. Are you still here? Yeah, I heard nothing. Are you having fun? to have you. Awesome. Really cool. I'm not asking because
I have to wait. No, no. Okay, this is the moment I have to restart, I think. No, that is okay. Yeah, the slides are made with slide. I heard that already on my right ear here. And the wonderful thing of on slide if you did not know that it is completely made with view. So you can just copy paste your view components in slide and then you
can have all these cool animation and stuff like that. It is just view code. You find it on my GitHub. You can see it there. And it's just view code and running all these amazing thing with websockets. And let's see. Oh, it's fast. It's fast now again. Oh, nice. So the question is when was the first commit of Vue.js made? Now you had a little bit of
more of time while I was fixing the slides. Maybe you have looked it up already in the git history first commit. Is it 2011, 2012, or 2015? I hear that people are starting to debate. That's very nice. I hope I give you something to talk about later as well. So we have 80% perfect. Maybe there was really a little technical difficulty here. I will lock it and
then we will see 2013 is indeed correct for you. More points. Really nice. So the first commit done by Avenue was done the pro repository in 2013. The last version that was shipped in 2013 was in December and it was version 0.6 and the version 1.0 Zero was released in October 2015, nearly two years later. It was uh version one. Then really nicely done. Really nicely done.
Next. Ah, get this so fast now. So cool. Um, is it the next one? No, it's not the next one. Uh, oh, it is the next one. Ah, now you saw the answer. Ah, damn it. Okay, now I want to see 100% on the correct answer. No, it's not a data leak here. No, no, we're all professionals. So which directive in Vue is used for the two-way
data binding on form inputs? Is it vbind? >> Is it von? >> Is it v model? Or is it vync? Okay, now you 7%. What is with the 7%? Didn't they pay attention? Don't sleep yet. We have still some questions left. Okay. Can we make it at least to 70? These are free points. 65%. Come on. We We can do it. Oh, I don't really The problem
is that if someone reloads the page, it could be that the total number of players can drop. So maybe we have some dead uh open connections now. But that's enough. I will lock it because of course you all did it nearly with 100%. It's vodel. Let's see what the answer is. Oh, it's vodel. How cool. V model is uh syntactically sugar combining vb bind for the values
and v on for the input events. And this is the two-way binding. Vzync does not exist at all. So this is made up. Okay, I really have to wait next time. But that's okay. Some free Next question. Which of these is not a view state management library? I think you as of course awesome developers are using many and mostly three of them most of the time or
at least have heard of them. Uh but one of them is not a view state management library. Is it VueX, Pina, Harlem or Volulta? One is wrong. The other three you should heard at some point maybe read of it. >> It's Pina. The next core team is debating if it's PA. Okay, that's that's kind. Okay, at least two are in the race. The other two options are
very obvious, I guess. No, not so obvious. 1%. Okay, I will close it in four seconds. Three, two, one. Your last chance is over. Let's see the answers. Okay, 1% thinks it's PA. 1% thinks that is a few X but we can assume all of them know that this two exists. So Voltaar or Harlem is the question and the correct answer here is Voltaar. VueX is the
classic view state machine library. Pina is officially recommended for the store in Vue 3 and Harlem is a light lightweight state management solution that exists as an alternative. Walt does not exist as a view state management library at all and this is then made up here. So the correct answer is of course we now know it. It's Voltaar. This is the first question that not the majority
had gone right. This is interesting. Maybe you are really learning something here interactively. That's cool. Okay. Um I don't have to maximize because it maximizes automatically because it's uh made by an awesome developer. Of course, no bugs at all until now. I don't see slowly falling thousands of emojis at the left and a not upcoming question at Refresh the page. Okay, I will do what you say
and I hope that this is okay. Now the emojis hopefully will spawn again for my pleasure. I think I have to restart it again. We are more or less halfway through. Bear with me. We will do this. Yeah, you see the the little pro progress bar at the bottom. So the last slide of course are the resource slides and the last last slide is the login slide.
So you have to decount two of Okay, now we we broke it or we did not is it not is it is it another question? Ah, okay. Sorry for that. Which uh of these is not a component library for Vue? Okay. On my phone it was not updating. My bad. No, not my bad. Uh, which is not a component library for Vue? Is it Vutify? Is it
Prime View? Is it Next UI? Or is it a catalyst? One of them is wrong. The other three does exist indeed. So you can ask JGPT, you can Google, or you can just know it at the end. I don't know how you got to your answers because the prize will get the person with the most correct answers. And of course, the cool magnets are for everyone. So,
because you're all awesome. So, 63% may Can we make it to 70? It's like an auction now. Can we make it to 70 here? >> No, not really. Okay, then I will close it in three, two, one. at 65. That's fine. Okay. Which is not a component library for Vue. Most of you think that it is Catalyst and this is indeed correct. Catalyst um is a reactbased
UI kit by Tailwind Labs and it is not for Vue. So it exists but not for Vue. A little tricky but you all did very well or most of you but of course viewertify, Prime View and NXUI are very popular. You heard of them I guess. So that's a cool thing. Oh, that is admin login page. Why? What is happening there? Oh Okay, I have to login.
Can we please uh turn off the screen real quick for me? Otherwise, I have to unplug, but I don't know if this good. I have to copy paste the password. That's why the password. Okay, I have to unplug it. If no one is deplugging the thing here, I have to deplug it myself. That was really worse from my case. I was like, it's USBC mate. Thank Okay,
that's okay. That's okay. >> Live things. What would a live demo be without bugs and problems? I really was like, it's USBC that's transmitting my my tape. It's okay. It's Please don't break the back end. Thank you very much. I love you all. It is already broken. What is the matter That's interesting. Give me a second. I have to debug it real quick. No, not two hours
later. Be kind to me, please. That is that is really unfair >> Yeah, I refreshed the page and I restarted everything. Have you tried to turn it on off again? Yes, I did. I really like that one. >> Nice. So, I hope someone tracked at what uh question we were. >> Yes, I also tracked. Thank you. So, okay, we are back at the here. So, you get
back the screen without my passwords. There's no environment file what whatsoever. H. Okay. Okay. Something really, really, really went downhill. This we had >> you didn't have that one. Yeah, that's >> This should be the next one. That's right. I hope the screen uh Yes, it's it's okay. Perfect. Okay. Which modifier is not a default modifier on view model? And we're back. By the way, thanks for
fixing myself my problems. Is it lazy number trim or capitalize? Sorry, what? >> Without AI. >> Without without Oh. Oh, exactly. My buck driven development skills are improving at this conference. So, one of them is wrong. Um the other three are correct and existing and the only three are existing. There are not more. If you read the um documentation there are only three. So one is wrong
here. people are getting back here 60%. That's Also I have no idea what what broke now but start restarting everything always helps. That's the nice thing about the being a developer. first first rule. Okay, like 70% already done. I will close it in two one. I'll close it now. Let's see. That is a really tight race. Okay, I cannot toggle. That's all. Then we will just laugh.
I love my life. what's going on here? Toggle log. Toggle log is like I have internet. I have everything. Okay, then we just talk through the questions and we have a winner from the first ones. That's that's fine. That's fine as it is. So this question what is the default modifier? The correct one would be it is capitalize because the others lazy, trim and number exist. Lazy
listens to the chains events that you put in your input. The number casts your input to a number if it is valid of course only and trim trims the input. So next question we only have some few left. Maybe each slide we get a new bug, a new problem. And at the last one, nothing will work anymore. We have no lights in here. Okay. I tried my
best. Sorry. >> Yeah, it's okay. We will. This is exactly what I also have intended. No. >> So, the last questions uh would be very funny, but that's not a problem. You can watch it later on the GitHub. Oh, we can just we'll just talk through them real quick. That is Let's do it that way. The next What? Refreshing. That's It's broken all the way. >> The
servers restarted while I'm on stage and doing the quiz. Thank you. I think someone um Yeah. Okay. Okay. So the next question or you already saw that this is a free question for you just free knowledge. The next question would have been which few related postcard podcasts never existed. Then you had four funny names. Um the views on view is existing. The enjoy the view and dj
view are existing or existed. And the viewpoint was the wrong answer there but it exists in the ecosystem because it's the name of the official view blog but not of a podcast. That was the twist of this question. Such a cool question. Okay, this time I will unplug the HDMI again. The USBC. Yes, that that's the thing you want to see. Okay, login failed. Wrong wrong credentials.
It's getting even better and better and better. I I hope everyone is awake after this. It's more of a of a fun thing here. No, I'm just talking through the questions. Whatever you do in the background, it is not working. Password wrong. Everything's wrong. So, reloading, going through the questions, it is. But, but I am very happy that the emojis are working for you still. So, still.
So, that is fine. Oh, we have no Oh, we have something. I will click it. >> Yay. >> I have to log in for each question. No, it would be something new. No. Okay. The next question would have been what is the correct? Now it's that that is cool. That really is awesome. That is fantastic. That is I I have to screenshot that one. That is awesome.
Okay, we're just going to the questions. We can read it as it is. I can't anymore. What does view vapor mode eliminate to improve rendering performance would have been the question. A view vapor mode is a variant of view that offers rendering without the virtual DOM. And so the virtual DOM would have been the correct answer. You can look it up. You can experience it. Can you
still spam emojis or is this also broken? Next slide. Next problem. Emojis not working anymore. Great. We will look at the leaderboard at this point. Thank you for your um participation. uh we will just skip everything from now. There would have been questions like what uh is the false upgrading from view 2 to view 3. You can see it in the JSON file in the repository if
you're interested in the correct answer. Or what organization does not use Vue.js because maybe you don't know that NAZA or Net Netflix are using Vue for some of the other thing Blizzard and Versel and stuff like that. And then it's interesting to think about what companies use Vue and what does not use Vue. And there are more than you think. Is it working again? No, it's not
working. Um, okay. Then we just jump to this little page there because this is the resource for the repository. So if you want to see the answers and the questions later because then you can scan the QR code and I will now switch to the leaderboard and then we will see if at least this is working and we have a winner for the Lego set. Good. That's
awesome. Is there something with Okay, it's everything is working. Dom then we will figure something out. You will get only magnets at the moment. I have no idea. But thanks for your patience for this little rundown. But don't don't take it too harsh at this point that I wrote for Gileian. Thanks for the deployment. It is it is Gillian's server, but he really helped me a lot
and it really was a wonderful help. Uh so no blames on him. Please a shout out for Gileian at this point. Thank you for letting you use your server and then come down for your magnets and then I think this is uh the end for me. >> Leaderboard leaderboard is working. The leaderboard is working. No, really may maybe. Whoa. H we have two ones with 11 correct
answers. So I will pick Marco. Is Marco here? Perfect. Marco, you won the Lego. We have a winner. Okay. Perfect. Marco will get the Lego. You all other will get the magnets and the keychains. They are here on the podium. And that's it. Thank you for your patience.
