I Challenged The AlgoExpert To A Trivia Game - Who Wants To Be A Megabit

you probably never thought you would see another who wants to be a megabit video on my channel but here's one with clement from algo expert and if you want to go even deeper on web development with us i did a video over on his channel we went through the top 10 tips for web developers it's a super great video so i highly recommend you check it out and with that said let's get started [Music] so welcome back to web dev simplified everyone you may recognize this game if you're a longtime follower this is my who wants to be a make-a-bit game and i'm bringing it back for clement so clement you want to introduce yourself real quickly before we jump into the game sure so my name is clement miholescu i have a youtube channel about software engineering where i kind of focus on coding interviews web development working as a real software engineer and otherwise i run algo expert a technical interview prep website awesome thank you very much yeah you've seen one of those algae expert guys he is the reason for it so you can either love him or hate him whatever it is you want to do anyway also real quick i want to explain the rules essentially there's 15 questions the first five are going to be pretty easy next five are a little bit harder and the last five are pretty tricky everything is multiple choice just like who wants to be a millionaire game 50 50 he can use one time to get rid of two of the wrong options and if he uses the google hint here he can essentially use google for 15 seconds to try to figure out what the answer is and with that said we're going to jump right into the very first question here which is which of the following is not a real programming language we have gem rust elixir and lua okay so this is much more stressful as the competitor rather than watching it but here i'm pretty sure it's going to have to be gem because i know that alexa and rust are our programming languages lua i'm pretty sure is like this language that you can do for like video games i remember for like world of warcraft there was something with lua so i think i'm gonna go with uh gem final answer good choice yeah is like a scripting language use a lot in video game related stuff so i'm pretty impressed you knew that all right which of the following will return true we have object dot is array array dot is array type of the array syntax equals array or is array with the array okay so i'm pretty sure that object dot is array is not a thing um is there i think so is array just as a function would be undefined unless you've declared it or it would throw like a runtime error type of brackets i think is object so i'm pretty sure that this is one of those weird javascript things it's array dot is array with the with the the function call afterwards final answer yeah you're correct this one is a little bit of a trick one if you're not aware of that an array type is actually object which is like the most dumb javascript thing in the title it's like the same thing with not a number is never equal to not a number which is just it's the most confusing thing ever i know all right number three doing pretty good so far list the following languages order of release so i want the oldest language first and the newest last and we have java c plus plus c sharp and then javascript oh okay so let me see if i can i so i don't know the answer off the top of my head but let me see if i can kind of like reverse engineer it so i know that javascript comes after java um so it already can't be the third answer oh again javascript definitely also comes after c plus plus but you have it after that in all of them i really don't know if between the others and by the way what happens if i get an if i get a wrong answer we just like keep going just keep going yep all the way it'll just be whatever percentage you get at the end okay so i really don't know i feel like c plus plus is the is the oldest but i'm really not sure if this is correct my intuition would tell me c plus plus java c sharp javascript but it's very possible there's something wrong i think i'm gonna go with that as my final answer so close you just had javascript and c-sharp slipped i was actually a little bit surprised when i was doing this research i figured that javascript would be newer than c-sharp but c-sharp actually came out like five or six years after javascript and then java and javascript are really close together within like you know a few months of each other a few or a year and then c plus plus is like 20 years older than java so the oldest one yeah yep that was really close though yeah this one i was a little confused even when i was doing the research i expected it to be what you guessed damn all right here we go this one's a little tricky how many threads does javascript code run in we have eight two there's no set number of threads or one ooh this is a tricky one it's like the kind of javascript knowledge that you don't necessarily think of when you're when you're diving in javascript um isn't it something where it's like this this it's like the the thing that a lot of people who come from other programming languages are really surprised by that javascript is single threaded but then there's some fancy other stuff that happens behind the scenes i kind of want to say um one i don't really want to use my my uh jokers because if i use them here you might be screwed for the rest and i'm not sure like between the rest of them like i don't know if a joker would necessarily help me i don't think it's i don't think it's two or eight like i feel like maybe it's some weird thing with no set number but i think i'm going to go with single threaded so just one and you are correct yeah you're right that a lot of people they come to javascript and they're like wait there's only one thread that's like how do things work but it's the whole event loop system that javascript has that allows it to be singly threaded it's crazy okay awesome all right here we go we're getting to some css questions if you apply margin on an inline element which sides will it apply to is it the only the left and right only the top and bottom all the sides or none of these sides marking on an inline element okay i should know this because do a ton of css these days but i'm not like good at it margin on an inline element which sides does it apply to so i don't see why it would only apply to the top and bottom only the left and right sides because if it's only it definitely is only like you can it definitely applies to left and right right you have an element that's in line you can push it a little bit to the left or to the right um [Music] does it not apply to top and bottom like it would push the entire line that's my guess so i i'm inclined to say all sides but if my if if the person who works on front end that i'll go expert is watching this and this is wrong he's gonna like say i'm like terrible she says i'm gonna go with all sides final answer it's only the left and right it is it doesn't push them up and down no so inline elements are kind of weird because they don't have like height that you can manipulate in really any way so you can't do padding on the top or bottom of them you can't do margin on the top and bottom you can't set the actual height they can only do like a left and right measurements so like padding left right margin left right width i feel like this is something that i'm going to now like be scared by and remember for for good next time that i like do display in line maybe this is why sometimes i'm trying to position something and i'm like why is it not moving because it was a display in line and i didn't know either that or i'm completely wrong and you are right and i'm just messing with everybody [Laughter] it's one of the two uh here we go this one this one gets a little tricky here this is some deep javascript knowledge how do you create an object in javascript that has no prototype do you do object create undefined object create null new object undefined or new object null i have no idea of the top of my head i have no idea when i was working on my javascript course i was doing a bunch of research on prototypes and stuff so this was like oh this is a good question right here i've never i've never even used in the new object or object.create notation i'm almost i almost feel like one of them isn't even doesn't even exist but i'm not sure that's if that's like a trick here um well new object definitely should exist i think so if you create an object with undefined or no i'm maybe gonna go again i don't want to use a joker here because i feel like it wouldn't necessarily help me i'm still guessing either way but maybe like maybe you go with new object no cause no or or undefined i'm gonna go with one of the two new objects i'm gonna go with with i'm gonna constantly go with new object no final answer final answer nope you were right on the door yep so object create whatever you pass to it is the prototype of the thing that you create so if you pass it null then you have no prototype but if you pass it undefined it doesn't actually work because a prototype can only either be null or another object so like undefined doesn't even work it'll throw an error i see i didn't even know that object.create was a thing to be honest it's not very never use it i'll take that crazy yeah like if you're going to be dealing with prototypes most likely you're going to be using classes and it just does all that behind the scenes for you right all right okay not doing so well i mean you're starting out real hot and it's going downhill here which of these true is about visibility hidden in css this is another css one it occupies space and this is like which one is true only one of these is true is removed from the layout flow it can still be clicked on or it is the same as opacity zero only one of these is is true yep only one of them is even though they all sound pretty legit jesus okay so visibility hidden compared to like display none display none is removed from the layout flow if i'm not mistaken but visibility hidden is not removed from the layout flow it can still be clicked on can it be clicked on i don't think it can be clicked on like i don't think i don't think that if you have a button that's visibility hidden i don't think that you can click on it i think you can maybe like attach some sort of event listener on it or something like that that would register maybe like keyboard clicks or things like that but i don't think you can click on the object or the button or the element and if you cannot click on it assuming i'm correct here then it would not be the same as opacity zero i think but it does occupy space so my answer is going to be again hopefully i'm not like completely shaming myself as far as css because i think it occupies space i think that's my final answer so you're saying occupy space is the thing that's true about it yes that's correct that was like and you're stressing me out with you you're like confirmation no no you're really smart by thinking of display none because display none and opacity zero invisibility hidden are all very similar they just have like small differences between them and like these bottom two the fact that it can be clicked on and is the same as opacity zero like that's what makes opacity zero different than visibility hidden opacity zero can be clicked on and visibility hidden can't otherwise they're exactly the same yeah okay cool number eight how many bytes is an unsigned short in c is it eight one four or two oh this is not javascript no this is the i told you i've gone all over i think this is the only question that's not javascript related though well so a short so i've never written c so like here i'm really just kind of trying to gonna try to deduce this but as far as i know a short like a typical integer would be like a fixed width 8-bit integer and a short would be or no it would know normally an integer would be 32 bits and then a long would be 64 bits right well this is in bytes so okay all right so but bytes oh so bites so bites then it would be it might actually then be one bite then because it would be eight eight bits for short it's not okay so this is definitely not four and eight as far as i as far as my guess would be it would not be four eight because four and eight would be like 64 or 32 bits um i'm gonna go with but no because a one eight bit would only be eight bit would be very small oh unsigned short is it would it be two i feel like for for usefulness it should be two right but maybe maybe a short is meant to be really short it's between my guess is between one or two you can always use your 50 50 if you want but what if 5050 doesn't remove what i needed to remove well then you're screwed you you for 50 50 you like randomly remove yeah randomly remove okay let's you know what let's use 50 50. all all right well that helped okay so okay so then if i'm correct then i would go with two then and i'll go with final answer yep that's 100 right and you you're right i'm glad that i i did that okay yeah yeah no that was good that was good you're right with the integer you know it can't be bigger than four and eight and one is just far too small to be useful in pretty much anything that's what i was gonna say that that was my reasoning right five five one would be like just up to 256 or 255 that would be tiny but two makes sense yep nice that's impressive all right here we go in what order are margin and padding defined in css we have right bottom left top top bottom left right top right bottom left or left right top bottom kyle i will confidently say left to right no i'm joking i will confidently say top right bottom left final answer yeah nice yeah i always remember it as like it spells trouble i got that from west boss it just says trouble and that's the only way i can remember because i used to always forget oh yeah that's i guess a good mnemonic all right which of the following is not a standard react hook we have use derive state from props use debug value use layout effect and used imperative handle what those are all three of those are react hooks yep i hear i was thinking that i knew react okay i've i've seen none of these but let me try to to see if i can derive something so use derived state from props unless you're really trying to trick me seems like something that you would have in react right use layout effect use debug value [Laughter] yeah these aren't very commonly used that's for sure this is really tricky um [Music] i don't want to go i don't want to google this i feel like i should use this one um use impair to the handle use effect use layout effect this is a really tricky one kyle um i'm gonna go with whichever the one is not a standard one i'm gonna go with the layout effect because again the derived state seems kind of legit um use debug value i could see that as some even though that was my first guess that was gonna be my first guess but i could see that that as some sort of react hook let's go with used layout effect oh it is used derive state from props it is that one okay so you tried to trick me and you tricked me correctly because you can in class components there's like derived state from props which is like a club what did they call it like a component life cycle method but they never made it into like old react yeah in the old react but with hooks you just can use i think use effect and it does the exact same thing as use derive state from props but wait what is views layout effect though so use loud effect is very similar it works just like use effect but it actually runs after paint so you can use it to like get the width of things on screen while used effect will run before paint so it always is guaranteed to run after paint okay damn there's so many things that like you you rarely use like i just i've never used any of these three other ones i'm gonna be honest i've never used any of these three other ones either i've maybe used layout effect like a couple of times but i've never used these other two all right all right now we're getting into the actually hard questions here you know these are all easy ones so this is kind of fun though this is the kind of question that i find more fun that's good i would hope for someone that made something called algo expert would enjoy these kind of like trivia questions so this one is in what order will these numbers be logged and just just some code and then it's just printed left to right so you can imagine these are all different numbers being printed the left side is the first one and the right side number is the last one printed right okay so console.log one so that should be the first one set timeout console.log two with five thousand uh milliseconds five seconds later so two is likely to be the last one set timeout console law log 3 okay promise not resolve 4 then console.log and then comes with log 5. so it should be 1 first then five then it should be two as the last one and then the tricky one is between three and four my guess is that it's three first and four seconds just because of the order they're in but they're both kind of like they're both instant but still async unless there's something that i'm not getting with like you know some tricky promise.resolve for would be like executed faster than set timeout or before hand but as far as i know that's not the case and it looks like you only have one that goes one five and ends with two so but you do try to trick me because you put one three and two of them i just don't think the three would execute before the five because it isn't a set timeout so i don't like as far as i know that would not happen so my guess is one five four three two i really hope i'm not wrong here nope you are correct you were wrong though in the fact that the promise actually does go first the way the event loop works is that promises kind of have like a higher priority almost they can slot themselves into the event loop sooner than set timeout can so it would actually execute that promise first but very minute difference in that but i really should have done one five three four two as an option because then i could have definitely got it yeah yeah i was gonna say i think you would have gotten me there because i'm not sure that i would have um i would have said that promise would get executed beforehand yeah yeah yeah this one's this one's an interesting one all right here we go number 12. which of the following is false and this has to do with everything about strings so you can kind of read them out i'm not going to read them myself okay so new strength so i'm reading b first new string instance of object my understanding is that oh wait that might actually be the one that's false because a new string you're using the string operator so you would think it's an instance of string but isn't that also an object so okay my guess is string um the first one i think is correct like you're comparing a new string to another string but the third the fourth one seems also uh seems like it could be false if the first one is correct but i think it's also correct this is tricky this one is really hard instance of string my guess is i guess is the one that's false is actually should be c because you're not using the new keyword so string string of of like two um like without using the new keyword on string what are you even doing there you're you're you're you're like checking the the function constructor or whatever so i think i'm gonna go with actually question three or the the bottom left corner this one because like i just yeah if you're not using the new keyword you got it right there yeah but not at all for the right reason kind of you you can create a string without the new keyword by just using like string because this fourth option here is also not using the new keyword and it's just a string oh yeah you're right but i think i didn't even notice that i think the reason i honestly don't remember this one but i think the reasoning why that this is the false one is because it will be an instance of object i think okay so that that would also make sense because like my my understanding is that yeah when you're using the the constructor like new number things like that it's always an object that's my understanding um like i've never even seen string and that's why also like for instance if you do an array right it's an instance of object not instance of array as far as i know um that's why you always have to do array dot is array but i didn't know you didn't need to use the new keyword yeah and they actually behave differently whether you use the newer keyword or not it's really strange something i would never use though because i'm just going to write this string without string or new string right but i'll take i'll take the correct answer here i'll take the win yeah all right here we go what does this function return if you pass in 2 as x and this is all about like when operations occur in order of operations essentially yep okay so this is another fun one so function of x so you pass in two so x is two x plus plus the plus plus is gonna execute after the the line itself if you will but that means it's going to be 3. then you do parentheses x equals so you are reassigning x x equals x minus 3. so you're reassigning x to x minus three so that would be three minus three so you're assigning x to zero that executes then you're ending it as far as i know when you when you assign something right javascript returns that something so i think here you're kind of tricking me you're returning zero i think so if you're returning zero zero would value to false so false and you would not execute the plus plus x as far as i know and then you would return 0 minus minus but the minus minus does that execute afterwards it does but does it execute after the return statement yeah it does it it does execute after the return statement or does it to be announced if i return if i do like x equals one plus plus oh this is now this is tricky i thought i knew how how the plus plus works on both sides but like here you're inside a function i still think that you return it and then you execute it so i'm going to go with if you return it and then you execute it you we said you're at zero right execute because you've reassigned x so x minus minus the minus minus would happen to minus one but afterwards so i think i'm going to go with zero zero final answer okay there you go yeah i think that was the reason he was correct on that tricky one though so for this next question we have react strict mode helps find unintentional side effects by double invoking certain functions which of the following functions is not double invoked by strict mode so we have functions passed to use state function components functions passed to use effect and class component constructors this is another tricky one react strict mode helps find unintentional side effects by double invoking certain functions which of them is not double invoked so let's i have no idea but let me let me try to think of this like um so you could imagine that you would want to double invoke things and use state because you state could have bugs that like were incorrectly used functions passed to use effect class component constructors components should i try to google this i think i might try to google this one because i'm not entirely sure give me one second yeah let me know when you're in position i have how much time 15 seconds 15 seconds okay which of the following functions is not double invoked by circuit ready go okay react strict mode function 10 seconds seven five four three two one time ah anything useful did not i did not find anything useful because it was showing me like old react stuff i was on the react box though but um i think i'm gonna go with ah this one's tough if you've never used strict mode before yeah i've never used strict mode i think i i kind of want to say function components but i'm just wondering am i thinking of it correctly like what is there a way where like use effect you would not want to double invoke functions and use effect but i feel like that kind of makes some sense let's go with function components you're so close it is use effect it is use effect because that would would that actually just like cause bugs to double and evoke yeah essentially because like your use effect is your side effects so like you want side effects to happen and use effect while so like double invoking that could cause weird things like you double post to the database or something like that but with like state you don't want to do any side effects when you are doing like use state so if you double invoke that and it causes a bug then it's like okay you have a problem you shouldn't be doing side effects in use state that was kind of the logic that i was trying to go about and i guess i messed up i for function components i just kind of randomly went there but yeah damn it okay okay final one you gotta redeem yourself you can get this one you've been doing good i mean you got three so far out of the four hardest ones that's pretty good there's no oh this is a tricky css one which of these creates a stacking context in css is it z index 10 opacities one position sticky or order four am i allowed to ask you what a stacking context is i mean it wouldn't help but the second contents is just like a i can't even think of a good way to describe it without maybe giving it away it's like a new hierarchy for uh like laying out elements on top of one another well because from as far as like stacking goes right z index is what allows you to kind of like stack things up it's funny position sticky we just recently used that on algo expert as a component where we used position sticky for the first time ever i just don't know if i don't know if that's what you're like if that's a stacking context here opacity one i don't see why opacity would have anything to do with this all right so i feel okay i feel like the the the sort of common sense answer would be z index because the index you're stacking things but i feel like you're tricking me here like how would this be a hard question if it's the z-index the index is kind of a common thing in css right as far as i know i've never heard of order before position sticky are you trying what ah this is what i should have googled for okay um i are you trying to trick me for this last question is it z index is it something else like position sticky only one way to find out and why would you put z index 10 why not z index one that's index 100. um for the record for all the youtubers for all the people watching on youtube i'm going to save the index but i realize that it might be position sticky and then i'm falling into the like the obvious trap and if it's neither of those then like i give up you're pretty much like i'm guessing there's one thing but i'm gonna say it's the other three also just so i'm always right yes exactly it was position sticky too ah damn it okay you all heard me i said i said position sticky so so stacking context describe it a little bit more essentially stacking contents defines like a new order stacking so it's like a new layer and everything on that layer is oriented based on itself like everything else in that layer but you like let's say you have a stacking context a and a stacking context b if you change the z index of an element in stacking context a it doesn't actually matter when it comes to stacking context b because those are two different contexts so like a and b they can lay out each other like a could be over top of b or b could be over top of a and no matter what the z index is of the item inside of another second content it'll never go over top of another stacking context that's already over top of it that's a really confusing way to put it it's easier if you have like paper to show but yeah so position sticky creates a stacking context on its own z index on its own doesn't create one but if you combine it with like position relative or position absolute those two together make a stacking context i see you see i should have known that because we like i said we used position sticky recently in the code base or like our front end engineer used it and i was replicating a component like i was copying something and i was like hmm i think i need position sticky here because he used that but i didn't really know what it was should have bothered to like actually really dive into it yep and then like opacity if you actually have opacity less than one it creates a stacking context because you can start to see things behind it so i think that's why they deal with stacking content because it starts to reveal things behind it i'm not 100 sure why but yeah that's how it works there's a lot of ways to create stacking context in css and all of them are confusing all right well what's the tally i'm trying to it looks like you got nine you got three here three here and three here that that's pretty good nine out of fifteen that's maybe one of the highest scores out of anyone so far is it i feel like i'm like disappointed in in in some of them but like i guess i'm happy that i got correct all the like the like function ones those are like the ones that i feel like i should know how how those javascript internals work css was brutal though yeah it's tough yep no i mean honestly you did pretty good like i think maybe the highest score before this was eight and if you count this last one you could just say you got like a 9.5 because you're like it's either one of these we'll count we'll count that last one i'll take a 9.5 at 9.5 awesome well with that i just want to say like a huge thank you for coming out and doing this with me it was a ton of fun i really enjoyed bringing this back it's been so long since i've done it last time cool well thanks so much for for having me yeah no problem

Channel: Web Dev Simplified

Views: 99,259

Rating: 4.9371996 out of 5

Keywords: webdevsimplified, javascript trivia, javascript interview questions, js trivia, js game show, js interview questions, js trivia game, javascript trivia game, css trivia, css quiz, javascript quiz, js quiz, js quiz game, css quiz game, web dev trivia, web dev quiz, web development quiz, web development trivia, who wants to be a megabit, trivia game web dev, javascript questions, css questions, javascript tutorial, css tutorial, js, css, javascript, html, algoexpert, clement

Id: cjunWJT0w40

Length: 32min 24sec (1944 seconds)

Published: Sat Mar 27 2021