breakout your wireframes and heat up those get repos, we’re ready to tackle topics ranging from accessibility to front end design, user experience and beyond. You’re listening to the drunken UX Podcast with your hosts, Michael Fienen. And Aaron Hill. Hello, everybody. This is the drunken UX podcast. I am your host, Michael Fienen. And this is episode number 114. For may number the nine. How are y’all doing?

who the hell is that? That can’t possibly be my other other hosts,

I’ll be damned other other hosts. You’re gonna be so excited because we are going to be taking a test tonight. Yes, we’re gonna see just how good you are at the scripts of Java.

It’s going to be bad. Yeah, it is absolutely going to be bad. And I am going to keep score. So we went out and found just for anybody who’s interested, because that’s what this episode is gonna be about. We found a couple little sites that had some JavaScript quiz questions. And these are partly designed as like, Hey, these are the kind of questions you might get asked in an interview. The reality is, yeah, I don’t think anybody’s ever gonna ask you this. Technically, no,

are. There are some old gotchas. A plane crashes

Where do you bury? Survived?

survivors. You don’t bury them here? I got it. I thought it was gonna be one of these questions about like, you know, how many life vests do you need or something? And it’s like, well, it’s a river, not the ocean. So the rivers can be deep out anyway. So yeah, these are JavaScript quick questions. And so I like it, because it’s gonna give us a chance to actually talk about why some of these behaviors are though. And so we’re gonna explain, we’re not just going to take the quiz, we’ll explain why are these things? I think that’s where the real value will come from in this.

you can 100% make the same kind of quiz for PHP? Or Python? Like they all have these kind of quirks?

challenge accepted. Oh, okay. Challenge. So we’re going to do this for this episode on JavaScript. You should find some Ruby examples to do to me. All right off the DAG. Go dig and go do some Googling. I’m sure I will. I’ll bet yeah, there’s a site just like this Ruby. Before that, let’s dive into what is on top of this evening with my friend and I. The reason why he is taking the quiz and not me is because I’m drinking Ardbeg Corty dragon. I may be dead by the end of the show.

This is bottled at 56% it is effectively cask strength, although I don’t think it’s like actually marketed as cask strength, but it’s strong. You’ve probably heard me say before I don’t really like Ardbeg a lot because I don’t like Isla scotches that much. Which is has sort of an asterisk next to it and I don’t like our big tin very much. I got into the Ardbeg and no, which is going to be coming up on a future episode. I had it at a tasting event and I really liked it. And I went oh, Martin Vegas has some interesting things.

And my friendly local neighborhood liquor store had this bottle of Corey wreckin at it. And I’m like interesting. I don’t know anything about this. So I said screw it and I bought a bottle. This Scotch is like a nuclear weapon going off in your mouth. It will and I am not kidding you. It will numb your tongue. You have two glasses of this and you can’t taste anything else. Like it is that strong. But it is so good. It doesn’t lean as hard into the that iodine flavour and those phenols that come out of like the normal Ardbeg 10 Or like a frog.

Sure it hits hard on like uncracked peppers, and like wet leather and steak. It’s got like this thick meaty quality to it like a smoked brisket type of flavor to it. It’s laced with like a little bit of citrus Not much, just a little bit. It hits you pretty hard on the nose but isn’t like it doesn’t attack you. It’s just strong. And it really it’s the kind of thing like I’ll drink a glass or two of it. And that’s all you need. But boy does it like it gives you a lot to chew on quite literally. I’ve got the Glenmorangie nectar adore nectar door. No, no, it’s door to door. I don’t know

it’s Yeah, I think it’s is it slang for gold? I think I don’t know. Okay. Um, think?

Yeah. Yeah. That is my favorite Glenmorangie. Yeah,

great flavors. It’s it’s not to like

I was right, it is gold. By the way. Gold nectar. That’s what it means. So good. Margie, nectar, Dior, Dora. Or however you want to say that it’s finished in South turn casks. So it gets this very, very high sweet. It’s a very light like a creme brulee, a crispy sweetness on a whole high note.

Oh, yeah. Yeah, that’s actually I didn’t think about doing that with mine here. Everybody. here’s the here’s the quarterback and just take take a good whiff of that. Right. Like a deep way. I wish we could figure out how to let him do a tasting through the microphone, though. That’s, I didn’t pay for that USB connection, though. Yeah, I’m

The DA converter? Probably. Yeah.

Is this like the infinite chocolate thing? Can we make infinite Scotch by pouring it through a microphone?

and like, do it, you know, just run it through an amplifier and get more scotch? Is that how that works?

Well, here goes last number two for me, by the way. You’re gonna be toasted by the end of this, it’s gonna be bad. Okay, so it’s quiz day, you have arrived to class unprepared. You forgot there was a test you didn’t study. You don’t even have your pencil sharpened young man.

So this is

the friendly listeners at home. I’m sharing my screen with Aaron so that he can see these, these questions, I will describe them for you all, to the best of my ability. And we will see what he has to say about things and go from there. So we’re gonna start, I’m going to bounce, we’ve got two different examples of these quizzes, I’m just going to kind of bounce between them because they, they’re formatted pretty differently. And so just to break up the back and forth, we’ll do the two different kinds here. And so we’re starting with JavaScript quiz.

This is a site and we’ll have a link in the show notes made by Marco Denic and Oliver jumpers out of I believe Austria, if my memory is correct on that. I mean, that could be out anywhere. I don’t know. But Marco is out of Austria for sure. All of her I don’t know. So all of her shout out to you, though. So these two gentlemen made this site. And it’s just got a very nice, simple multiple choice thing. I’m not going to read the multiple choice answers, even though Aaron can use them. And you just as I’ll read them, yeah, I’ll read them. Okay.

And as I read the question, it’s your job to see if you agree with Aaron or don’t agree with Aaron and then we’ll go over the what and why. So the first question is, can you guess what will be the output of the code below and the code is very simple. It’s a console log statement. That just says, type of na n Yeah, First off, what is in a N? N A M means not a number not a number. Okay.

that’s like querying what the type of the argument is.

let’s get let me help. Everybody think through this. Right? What does type of do

I’m gonna and the word you’re looking for as primitive, right? Like, it returns? What what is the expression of this primitive? Yeah, yeah, that would be accurate. I’m gonna say,

Let’s go with no, gonna go. No, no, it is a number. It is a number.

the reason for this is a little complex and goes back to some stuff with floating point standards. The easy answer is that not a number is saying, hey, this thing is not a number. But because you expected it to be in number. The primitive that is assigned to it is one. So the expression of na n is sort of an abstraction of a number, even though it’s three letters. And even though type of returns a string, that’s the other thing you always know type of returns a string expression every time so it’s not literally returning a number all returning.

and then trying to say like, like, explain it backwards.

let’s do another one. This one is, do you know what this will output from this code? And now, it’s console dot log, type of type of one. That’s right, literally, to type of the type of one.

Do you know why? You know why you don’t those parentheses with type of? No, it’s because technically type of is an operator. It’s not a function?

It’s yeah, I mean, that’s, that’s why, yeah, of course it is.

like, okay, kind of like, peds Miss thing, right?

It’s a might primitive name. Yes, yes. I’m just reinforcing what we used from the first question. So sure, sure. So yes, yeah, it would return a primitive name. We’ve we’ve assessed that. Yeah.

strings. Is that your final answer? Yes. Man, we can we do lifelines for the Ruby episode? A guess? You are correct, sir. Michael, future Michael insert some applause here. Yes. So you’re you’re right. So type of one is going to return number, but it’s returning literally the string number. Yeah. I realize I gave you a hint to that when we were discussing the first question that it returns a string representation of the primitive name. So yeah, type of one comes back as number.

And then type of, quote number quote is string. So that is entirely correct. Gray, cod, this one is is fun. So console dot log, all of these are console dot log for what it’s worth, you’re just trying to determine what the output of the expression is. So so this is just an expression. Right? And it’s a question of three greater than to greater than one?

And is it true or false? Right. Okay.

And I believe that’s going to be false. And false? Yeah, false. Yeah. Except I do think you did it backwards. But you got to the right. That the left to right. So in this case, it actually evaluates. Yeah, left to right, you You went right to left again. Okay. But because it’s evaluation, right, the left side is evaluated first. So three greater than two is true. But true is not greater than one. Because true is not a number.

So there is a secondary thing going on here, too, that’s worth pointing out, which is because the greater than operator expects a number, it does try to cast What is there to a number. So strictly speaking, it’s not evaluating true, greater than one. It’s evaluating one greater than one, which is all it’s still false. Like that’s, that’s still a false statement.

Yeah, it’s, you’re, you’re half right. I’m giving you the points on it, though. So I failed up, build upwards. But yeah, so you could rewrite that in a way where if just greater than or equal to eight would work? I’m like JavaScript might go and failing upwards. Okay, you two for three. Let’s keep going. Okay. This one console, log one string, the string prototype dot raw, and then a string literal of Hello, Twitter, backslash in the world. No sights and this and it’s wrapped in backtick. Since rapid and back ticks, I’m not familiar with that.

We call it literal Okay, it’s just a way of writing a JavaScript string, then we’ll evaluate what is inside of it. So you can do things like put a, you know, normally you would concatenate variables with, like, you know, single quotes with a string, and then a plus sign your variable and a plus sign and more quotes, with a template literal, you can just put $1 sign curly bracket and your variable name inside your string, and it will just evaluate when, okay, and that’s like, double quotes and Ruby.

Yeah, it’s an ES six thing that, you know, will get transpiled if you’re using Babel or something will handle making it like string concatenation.

The syntax is a little unusual, but it is valid, that the options here are important to

It is yes, that is the correct answer. I’m gonna put on my game show voice this week. Yeah, and so basically exactly what you stated, which is then dot raw takes a template literal and will process anything in it. But raw won’t do any escape sequences, like backslash in and will just return what you have. Basically, it will evaluate variables if there was a variable in there, but it will not evaluate escape sequences. Right. Next five, can you guess the result of God? So yeah, so we have some parentheses, B plus A plus, although

actual string B plus the actual string a plus plus space plus the string a plus the string a, and then to lowercase. Right? And the answer is either banana, ba, banana, or an NS.

an ad? Right? The first one. The first one kind of clues me into, like, oh, right, if we don’t have an argument there might return not a number, right?

wrong a in a in a yes, I forgot. Yeah. That was a mistake. Yeah. Can

ago. Yeah. So I worked out basically the same thing that the plus plus is going to generate an n a n error. So not enough to

So here’s what happens. First off, you end up with B plus A, which is VA, then you end up with B plus plus the string a. So then this is where things are basically breaking because plus plus string a, it doesn’t know how to evaluate that. And so you end up with n a n. It’s saying, Oh, this is not a number. You’re trying to add a to nothing. So it’s because nothing plus A equals not a number. So then you so now you have BA plus na in. So there’s your bond man. And you’ve lost that second A.

And then the last step is you add that last day. So now you have banana with two capital NS and the two lowercase, takes it all down to lowercase. So it’s a it’s a case of the expression plus plus a. I thought, when I was looking at this, I was like, well, plus plus, I just thought would evaluate to not a number because there was nothing in there. But I forgot to take it as a whole expression. What it’s actually doing is trying to add plus plus a to the BA and it drops.

this? This is a weird, like, I don’t know how you could I mean, everybody’s got code for something. I don’t know why you would run into something like this. But it’s an interesting, understand understanding of how string concatenation works, basically, and how you’re concat. And you’re using a plus symbol to concatenate strings. Yeah, but if you do it wrong, it does evaluate to numbers. Like it’s so it defaults to a math operator when it can’t figure something out.

Okay, so the next one here, this one’s got a couple lines, first, we have an array, let array equals 123. And array, one, three, and then we say, array index six equals nine, right? And then we say, array index five, right? The first statement,

array to array two would be three integers, zero, and guest.

Undefined is the correct answer. So yeah, we ended up because it basically backfills the rest of your indexes with unknown. So it does actually treat it like a property. Yeah, yeah. So it will backfill those arrays, and it will also increase the length. Like if you did a length on that, it would return length seven. Yeah, I wouldn’t, I wouldn’t have assumed that. Yeah. So it tries Yeah, it does. In that sense, it does allocate all the rest of the indices up to that point out. Okay. You know, the output of this code, okay.

and you’re getting it wrong right now. Boom, yeah, that’s 122 Oh, really Holy shit. Because and here’s the here’s the whole reasoning why it, it will, when it goes to figure out what it needs to do. Rather than failing, it will say, Oh, no, we have two objects here that we can do something with. And because I don’t know what the string is, even though it could conceivably try to like do a two integer on it or something, it will treat the number as a string and concatenate them.

And then the two plus two is just a straight string concatenation. And so you get 122. But it is the string representation of 122, not a number representation of 122.

I didn’t write the runtimes. And the device layers will store

Okay, next one. This is this is such a trap question and explaining why is going to be fun.

false. Imagine that instead of point one plus point two, imagine it was just one plus two plus two equals equals equals three. Is that true or false?

equals three. Right? And

that true? Do things? Oh, it should be true. Should be true. Yeah. So point one plus point two equals equals point three.

I don’t know why I’m helping you. You’re working through this. Keep going.

no, don’t do that. Don’t cheat. I’m not cheating. Actually. This problem shouldn’t be in Ruby two. Can we get a meme? Can we get like the the angry? Why, you know why? You know guy mean with with point one plus point two.

So So why the whole reason behind this just goes back to like the general problem with floating point math, which it is 2022. And it turns out, we are still terrible. Floating Point math.

pocket is the industry, the computer world, the JavaScript engine world?

a dress language, fake language, and get on my level, man. So yeah, strictly speaking, wow. In JavaScript point one plus point two equals point 30000000000000004. Yeah, of course it does. So it wouldn’t. This comes back to a problem that is based in float floating point math. Basically, floating point math is not precise. It’s not accurate because we are. What’s the word I’m looking for it we are faking it with electricity, as it were. So what you have to do, there’s there are a few different things that you can do here.

What some people will do is if you need very, very precise math, multiply it out to integer so in this case, take it times 10. So you would say one now we would be in one plus two equals three and that is true. And if you needed output that you would then divide it by 10. That’s the easy solution. If you’re dealing in currency This is an obvious problem. Actually, that’s that’s a really good point. The Superman three problem right

The other thing you can do is run a to fixed the number primitive has a, a method called to fixed, which is basically a rounding operator that will return a precision of however many decimals that you’ve placed. So that is another way to evaluate it. The thing is, you know what to fix returns a string, just know that I,

Yeah, I was gonna say, this is this isn’t a JavaScript problem. This isn’t a Ruby problem. This is a floating point, math coprocessor on the CPU problem kind of thing. But

Yes, because zero, doesn’t. It truncates it to one plus two at that point. Sure. So the last thing I’ll throw out there about this, because Aaron, I know you’re probably old enough for this. Remember when it became a really huge deal when CPUs got dedicated? coprocessors math coprocessors floating point? Oh, yeah, it was like that was that was a thing. And there was at one point, you could buy daughter boards for like old 380 sixes and 480 sixes to add a floating point processor specifically did that. So all of you people younger than the age of 30? You’re welcome.

okay. All right. Ninth question. We have two constants, I’m setting two constants, one constant is called is true, the other one is called as false. The first one cons is equal to true equals equals an empty array. The other one is equal to true equals equals not an empty array. So the

And then the the output is, what is is true plus is false.

And I have you walk through walk through a Boolean process, right? In terms of when you think about what means true, and what means false. What would cause one of those to be true and one of those to be false? I have no idea. I could guess maybe like, like, I mean, maybe an empty array might evaluate to false because it’s empty. And so if you have sometimes true equals equals false, you get that if we get false,

So what is it? Yeah, what does the bank do? Invert invert value, there you go. Also, there are a lot of times

Boolean. So, you’ve got four options here. None of them are false. Yeah.

Yeah, um, Okay,

It’s probably not zero.

Okay, Boolean true. Oh, my friend. 00. Yeah, cuz, remember, Boolean evaluate to zeros and ones. And what’s happening in the console log. Remember, what is the plus sign default to? It’s a math operator. Yeah. Yeah. So it is immediately it coercing you, I think you use that word just a second ago. It coerces the boolean values into zeros and ones. And you were absolutely right, in that this, these are backwards, that is true equals false and is false equals true because of the bag.

Okay, so they both did evaluates an empty array comes back as false. And so true, doesn’t equal false. And so an empty the opposite of an empty array is true. So true equals true. More importantly, like, true,

So Ruby knows, true and false, right? Like, that’s the thing does Ruby have and

Does Ruby have an understanding of truthy and falsy if I say it that way?

Yeah. So that’s kind of what’s happening here in that you can set a variable to an empty array. And it’s not undefined. It’s not no, it’s an empty array. But that still evaluates in the context of a Boolean, to false. Because an empty array is nothing. Right? An empty

And this is actually a really good example of there’s an MDN doc on this that gets into like, what is truthy, right. And so the list of what is truthy is huge, like, it’s long, the list of what is false, it is very short. So it’s one of those things of like, or rather, I should, I should say that backwards. A lot of stuff is truthy, very few things are falsie. But when you evaluate it, it’s the opposite. which I know sounds like it doesn’t make sense, because a quarry record is also the name of a whirlpool, up in Scotland, in a bay, and it’s spinning my head around right now.

No, it’s just this notion that there there’s a very finite list of things that can be false. But that very finite list of things can also encompass a lot of stuff so to speak, to false zero, negative 00. In empty strings, empty array is null undefined in a in, comes back up. As long as it’s got a value, a string value, a number value, an instance of an object, even if it’s empty. An instance of an object is truthy. So if this notion of a boolean true or false is a literal, either zero or one, or true, false, that’s it. Those are literal, true false. bullions.

truthy and falsy basically is sort of like an is set or is not set. kind of mindset. Yeah, that’s I agree with that. And so this is this question is playing with that idea. And so if we know that an empty array is falsie, and returns false, true equals equals false is false. and not false is true. It’s like It’s like multiplying two negative numbers, right? A negative pleasant or a negative times a negative is a positive. And so a false false is true. And so true equals equals true.

And you end up with when you do that additive action on the console log zero plus one equal, or I’m sorry, zero plus zero equals one. Rev. Zero. Got I’m, I’m all over the place, by the way. All right, one more, we have the last question on deck. I’m really glad this came up as the last question, because it’s kind of fun. You’re gonna complain, but it does make sense in its own way. So what we have is an array, an array called numbers. And in that numbers array are only three numbers.

Yes, that’s what I overlooked. The first I’m not being manipulated, right. And the numbers in the array are 33, two, and eight. And they’re all primitive numbers that are all just plain old numbers, no funny business. Then we do a numbers dot sort, which is a prototype method on the array primitive. And then we log out index one number, and

Which would be the second element of a zero indexed array.

I probably would have hoped that it was to, do you want to read and think like this? You want to go I think you want to go back and redo what you just said? I swear it answered, ate earlier. And it was correct. Or actually no way. No, I answered 33. Damn, I shouldn’t have said anything. I should have no, right. No, no, but but like thinking about that now. Like, why did I answer 33? No, let’s I don’t know. Yeah, I think we should go with the wrong answer, which is eight. That is the wrong answer. Yeah. Tell us why. Why do you think it’s a?

that what the quiz is doing? Tell me why you think it’s a?

What if I told you the fact that it’s a constant makes no difference whatsoever? Then, what is even the point of anything I?

Yeah. So I guess we need to have an episode about how constants in JavaScript are not constants in the way that you think they are? Of course, they’re not. Yeah, constants do not refer to a value that is unchanged. In JavaScript, it’s a reference that is unchanged in this case, right? It’s an array. And because it is an array is constant,

five, right? Or numbers equals quote, numbers, quote. Right, right. I love it. This is the best question to end on. So let’s go back. So yeah, if I tell you the word the the, the assignment of a constant to numbers is absolutely irrelevant. There is one in the up in the next set of questions, where does matter? And so that’ll be fun. But it could be ver, it could be let numbers equals 33 to eight, and we sort those I

at first then. Yeah. So what is your as it runs like this? I think

Okay. So yeah, so you think line two does nothing? Secretly?

yeah, I mean, the answer is yeah, not too often. Obviously,

you are right. I mean, you’re wrong. But you’re right. You know what I know you’re not getting, you’re not getting credit for this question. You’re getting it wrong, because you don’t know why you got it right in the first place. And I’m the grater. And I’ve had the quarry wreck, and I’m sweating and unbuttoning buttons.

hell let me pass that to you know what? No, no, I want to see if if because you use your use your primitive brain? That’s not an insult. Why? Why would 33 and in an array of 33, two and eight, if you sort that array? In what condition would 33 end up at index one and as a reminder to everybody indexes start at zero, so we’re talking about the middle isn’t a second one. Yeah. So that will let me do this is the order 833? Two or 233? Eight. If you run a sword on that, which one of those is right?

This is like a this is a bonus. This is your extra credit question. Okay. Yeah, it, it should be two 833. No, no, no, we know it’s not, you know, 33 is the middle number. We know this for a fact. So it’s either 233 eight or 833? Two. Which one? Yeah, but

Have you run sore, and you know, the middle number is 33. You know, it can only be one of those two? Well, there are four lights. I love this episode so much already. Which

You know, when you hear why it’s gonna blow your mind. It won’t know. I promise it well. 2338 or 833? Two, which one? To 30. Okay. So let’s assume that’s your reason. Why not that the interest of it. Let’s assume that’s right. Okay. Yeah. Now logic it out. Why would 33 come before aid? If the order is 233?

I don’t have to add in. applause I’m doing it myself. That is exactly why that is the dumbest thing sort how, because in a ration, anything, our soul

Let me give you an example that might ring true for you. And as to why this is the case. Have you ever had a folder full of like, maybe old mp3 files that are like badly named with like, artists track number type stuff? Yeah. Yeah. And it starts sorting a bunch of your songs, and lists, the songs that are in the, you know, the tins show up before the Yeah, too. Right, because it becomes like a two song. But it’s evaluating the ones first. Sure, but in

right. But the array has the same problem, because the array doesn’t know what data types are going to come into it. So they have a good example here of an array that has a string one, a boolean true, a number 55, a float of 1.4 to one, a string of foo, and an empty object. And it’s like, if you run on that, what would happen? Yeah.

could or should. Welcome to JavaScript ladies and gentlemen, I’m gonna take a quick break for about five seconds. We’ll be right back

Wait? Oh all right, is everybody ready for Aaron’s final score? Because I’m ready to give it.

no, no, you passed. You got a six Wheeler sent. That passes? I mean, isn’t that a D? I think that’s that’s like the lowest D because I think a 60s F is it’s been a minute since I’ve been in school. But no, I think a 60s of the I’m going to ABCD that’s for units. And so, okay, let us know,

my problem is, there are a limited number of questions in this test. And so I’m going to tell you go take this test, let us know what your score is. But you will get a lot of the same questions. undoubtably. So you’ve probably heard some of the answers. So pretend like you don’t, and just try or wait a couple days, wait a couple days after this episode, then take the test and see what score you get and share it with us.

But this is fun, this is fun stuff to like, figure out the idiosyncrasies of like how coding. And it’s important because I think, at some point, we all fall into one of these traps of stuff not evaluating the way we think it does, you know,

audibly that that last chunk about how you know, an array sort, how sort evaluates everything as a string before it sorts, like that’s one of those things that man until you ran into it, it’s just not expected.

Don’t be fancy with me, come

Oh, interesting. So it’s it just fit. Yeah, that’s, that’s actually pretty interesting. It takes the opposite approach, whereas JavaScript basically forces the casing to strings to sort it for you. Ruby says, oh, no, we just can’t do that. That’s interesting. I

that means you’re Yeah. Interesting. Well, take your test for lights Michael, four lights. Listen. I know this reference, I respect this reference. And for that, you can take us out on social

are primitive cursors or precursors? No, I’m sorry, it was precursor.

which will redirect you to our Patreon books. I hope you enjoyed this there’s going to be a second part of this this is officially part one. There is another section of these things I think will be fun. And I can’t wait to go through them because I had a lot of fun in the show. I just poured myself another glass quarry wreck and this is probably a terrible decision on my part, but I’m doing it because a it’s delicious. b

You know I I used to do that in Boston because it was the first sushi restaurant I hit. And it probably was terrible, but it was still better than Kansas sushi. So I still always stop there and got sushi, folks. Ladies and gentlemen. I hope you keep your personas close and your users closer. Bye bye