Interviewing for Front-End Engineers, v2 with Evgenii Ray | Preview

— Hi, my name is Evgeniya Ray and I work as a staff UI engineer. I know that interviews can be challenging even for the most experienced engineers. So, I've created this front-end intensive course to help you prepare for your interviews. In this course, we'll learn how to effectively solve complex JavaScript challenges and build UI components using both the DOM API and React. Towards the end, we'll also tackle questions commonly asked in staff-level interviews, so everyone will find a course appropriately challenging. Go and ace your next front-end interview.

So, open the debounce problem and debounce. vanilla. ts. So, here's our placeholder for the debounce function. So, first of all, because we're in TypeScript, let's learn how to actually properly type things. Uh what we want to do, we want to making sure that debounce can only be called with a function. So, what we're saying is that our debounce should accept the generic parameter F which will extend our which will extend any type of the function. And we'll return void because usually all the debounce callback return uh returns void. Now, um we need to provide the parameters. So, the first parameter is our function and then we use our generic parameter to type it. And then we pass the delay and use the number. So, what we need to return now is uh another function. So, we type it here like that. We pass the arguments. And now we can we need to return the function with the parameters that are exactly the same as F. So, for that, we can use the TypeScript the utility type called parameters. And then we pass our generic type F. And then uh it should return void. That's will be our return type. Okay. So, now let's return our function called uh debounced. And yeah, I think like there is a syntax mistake uh that I don't see right now. Uh Yeah. That will solve. So, now we return our debounce function. So, now we provided the arguments with the parameters F. This will uh allow us TypeScript to match the uh the function arguments that we are passing inside the debounce. And uh and now, so what we want to check so we'll we first want to set up the timer ID that we'll store in a closure. And we also want to properly type this. So, for that uh to type it, we're going to use return type and then type of set timeout. This will give us exact return type of the set timeout function. And then by default we'll assign it to null. And also provide the null as possible type here. Okay. So, if the timer ID is present, then we need to cancel the callback. So, what we do here, uh we take our timer ID and then we clear the uh timeout. Okay. And Our next step will be to set up the timeout. So, we use the timer ID and then we set the timeout. We pass our arrow function and then we pass the delay that is specified as parameter. Now, we need to execute the uh our function that we are passing with the correct context. So, we use the method called apply which is available on function prototype. We pass the context object which will be this. And we pass the uh the arguments. So, one thing to note here, see that the TypeScript is complaining that he uh TypeScript doesn't know what this context is. So, in order to solve this, we can tell the TypeScript, "Hey TypeScript, we actually don't care. " So, the we don't know the context, but we want to execute this context with the uh with this. So, this just makes TypeScript happy because we provided the type uh explicitly. And let's see why this one is complaining. So, if timer ID Okay. So, now we're returning the function and if we try to execute this example you will see that it should only logged C as a value. So, let's try to run it. See, now it works. So, it's canceled A and B as a calls. And if I try to run the test as well, so let's run the tests. So, all tests passed. So, this means that we solved the problem correctly.

So, now how can we make the sections look a little bit more like accordion? So, now we need to do a little bit of styling. Let's use the class and we already import the class called the object called CSS which is just a CSS module within the file itself. So, let's see how it's called actually. Imports. It's called styles. Styles. And let's assign the class to details. That should be on details. And then the summary we just we can assign the class summary. Styles. the summary. Okay. So, now let's get let's make some let's get some styles done. So, first of all, we probably want to remove this default marker. So, for this, we can just use list-style. none. Then, um we also want to make sure that our content is kind of expandable in animated way. So, for this, we're going to define the transition. So, here we use the transition. max-height. Then let's provide some animation function and by default when the content is not opened, the max-height will be zero. So, now the details tag have a special attribute called open. So, we can style the content and see what when the content is open. So, when content is open we can set the max-height to be 500 pixels. And then we can set the uh the scroll the overflow Y to be scroll to show the scroll. Okay. So, now if we go back and update the page so, it almost works. So, I will teach you one more thing. So, see uh it white works when we expanding, but it doesn't work when we closing. So, there is a thing called dis- uh discrete properties in CSS. So, discrete properties is something that have a uh zero or one state. For instance, uh display. It can be none or you can display. Or um overflow. It can be either heater or other value. So, something that you cannot kind of uh describe as a number. So, which cannot be easily transitioned. So, for this case, uh the CSS team, they developed one thing called allow-discrete-property. So, first of all, we want to animate content visibility. This is the uh internal CSS property that allows us to style the changes uh when things are uh being removed. And then we provide the animation function. And then we tell the CSS, "Hey bro- hey browser, can you actually animate this property? I know that you it's not by you cannot really animate the something that is not cannot be represented as a number, but let's try this. " And then the browser uh will try to automatically animate such property. So, if we go back and then open this and close, see now when the uh when we close the section what uh it does, it tries to animate the closing section because uh display uh because we switch from the content visibility from uh display to none. And that's how the browser automatically handling this. And that's basically it. I don't think we uh it makes sense to style this component. So, CSS is relatively easy, but the main logic of our accordion is here. So, see we don't we haven't uh written any specific JavaScript to handle the expansion of the element. So, this is just a default HTML which is provided uh which is provided to us. So, on the interview, try to use the native elements as much as possible. The cool thing about native elements is that they by default are accessible. So, if I try to open it with keyboard, it already works. So, I don't need to uh do much.

much. Let's uh create also the toast uh the function that will generate the toast element. So, in this case, it's going to be get toast item. And then it will accept the item. And then we need to return the template of the toast element. So, and the temp- template will be super easy. It's going to be just a uh li element with the role status. And inside, we can place the uh the content. So, for instance, we can have the paragraph and then place the item to text. So, what else? Um once we also can assign the unique ID which will be our uh item ID. Okay. And now we discussed that the each toast element can have a status uh removed or not removed. This will be needed to to then later understand if the element should be removed from the DOM. So, this data attribute uh we're going to access from the event object when the event is fired. So, by default, this uh this will be equal to false, but later we'll handle this and set it to true. And Okay. So, now we can create a toast element. So, let's uh create an element called uh toast element. And then we use the uh document create element. This can be just a simple div. And then we update the um the HTML of the toast item. And then just pass this get toast item. So, the element that we created here is basically just a wrapper element. To get the real toast element, uh we need to access to our wrapper. So, let's create a constant called element. And then access wrapper and first element child. This will give us the toast element that we just created here, the li item. Okay. So, now we have the element. This element now should be appeared on the DOM. So, once we toast it, it's uh should immediately appear on the uh on the DOM. So, we access our list element. And then we use the append child to append the element. Okay. So, and once the element is appended, we need to immediately play the animation. So, this means we access the class list. Uh And then we need to use the fade in animation. So, first of all, let's apply the class to the toast item itself. So, here use a CSS. toast. And now we apply the uh CSS. uh fade in class name. So, now if we try to render this, so let's open our website. Refresh page. So, let's see why it's complaining. How is because we haven't defined on animation end? Yes, that's correct. Let's provide on animation end uh event handler. And then now it should run. Okay. So, here's our example. When I click on the toast, it should appear on the screen. And as you can see now, the toast appears on the screen. But it will not disappear because we don't do any cleanups right now. So, let's fix this one. Here, when we toast an element we now need to schedule the removal callback. So, for this, we're going to set the timeout. And then our timeout will be the timer uh timeout constant which is 3,000 uh milliseconds. Sorry, each what's the name of this? Oh, we don't have one. So, let's create one. So, it'll be ti- timeout 3 seconds. And then we pass it here. And once the timeout is passed we need to take this uh to take the element which we added and then remove the old fade in class name. So, we access the class list. Remove uh fade in class. Then we going to add the uh fade out class so we can uh gracefully uh disappear the element. Remove fade out. And in order to uh catch the So, once we catch the animation end event here, we need to detect if the element can be removed. So, for this, we set our data uh data property. So, we access the data set. Dot removed. And then we set just true. Okay. Should line 65 should not be removed? Um it should be removed. Yeah. Thank you. Okay. Now, the element should be marked as uh removed once we then the timeout place. Let's test this out. So, it's will still not dis- uh So, technically, the eight the element itself will disappear because we play the timeout animation, but it will not be cleaned up from the DOM. So, in order to clean up the DOM, we're going to listen for the animation end event. So, this event takes the um has the target. So, basically, the target will be the element um on which the animation event was played. So, and we check if target instance of HTML element. And also if the target uh if target data set removed equals to true then what we do, we just basically remove the element from the DOM. That's it. All right. So, let's see if it works. So, refresh the page. Um let's output the elements, but first let's access our list. So, see now the elements are automatically removed. So, we've completed the toast. Congratulations.