Rendering Exercise

[00:00:00]
>> Now, moving subjects rapidly. Let's talk about rendering. How would I render something smoothly in a DOM? Let's say I give you a code challenge and it's move some elements from left to right by 500 pixels. How would you do that? What we, what sort of properties do we have in elements?

[00:00:23]
We have positions. So, okay in CSS how would you move, how would you move an element? It's really you've done that at some point.
>> Margins, margins are the different aligning positions
>> I mean, that's not, you would move the element but you wouldn't want to move with margins because they're off the layout of the whole page.

[00:00:45]
You would use position, x position, y position. x left,
>> top left,
>> top left, bottom right.
>> I and in this case we would use on giving you a hint. How do you translate because translate, unlike the calling anything else, it will not force a reflow. It essentially takes it out of the the flow of the DOM and it just moves it independently.

[00:01:08]
And you've all done this in CSS. But when you're sitting on a whiteboard, it's much harder to remember all these things.
>> But knowing, rendering and understanding, okay, we understand and move position. We do it all the time in CSS. Doing JavaScript is just doing calling this styles manually.

[00:01:25]
So some element that style, transform, translate x, the same thing doing CSS we're just doing in JavaScript. But how do we get something to move smoothly? This is a good actually high level question. How would you smoothly animate something?
>> CSS transitions.
>> It's not bad, yeah. But if we're doing it in JAVA script, we're using request animation frame.

[00:01:48]
Now what is request animation frame? Have you heard of it? All right. So request animation frame is a globally available function on the Window objects. And what it does is every time there's a render, it makes a call to requestAnimationFrame. And this is important because if we're trying to get a smooth animation, we don't want any stuttering.

[00:02:09]
That means every time there's a new render, we wanna move it just a little bit more, we wanna move that element just a little bit more. And all browsers render that 60 frames a second That means in one second it's gonna call requestAnimationFrame approximately seconds. Station frame it's gonna smoothly only when the render happens.

[00:02:31]
It'll never block if you're making some short game or arrogant use requestAnimationFrame If you didn't know about it, it is another way of doing timing in JavaScript, if you wanted something to happen every 16 or so milliseconds, roughly. There are edge cases, but I don't wanna go too far into that.

[00:02:50]
So knowing that every 16 something milliseconds request animation frame is called. That's where we wanna do all for animations. Suite our next problem. It's exactly what I described. I want you to move an elements and I gave you a hint in a real interview, they wouldn't tell you to use request Animation Frame.

[00:03:09]
Let's take a look at this one. Creative function to move an element
>> The arguments are the duration. So if I want to move 500 pixels, over 10 seconds, I pass in 10,000 milliseconds or seconds doesn't really matter. I'd say the pixel so that'd be 500. And then I put in the elements and move.

[00:03:31]
You could do this in CSS. If you want it to But this is a good application of data strips. It's a little math heavy. But this have to be, it depends on your approach.