Coding Virtualization from Scratch

[00:00:00]
>> Evgenii Ray: So let's proceed to our first exercise, which is creating this the following structure, where we have the container, top-observer element, bottom-observer element and the virtual-list. So let's proceed to our virtual-list file. And let's create this HTML template. So first we start with a container, then we should have a top-observer,
>> Evgenii Ray: Then we need to have the virtual-list.

[00:00:36]
>> Evgenii Ray: And then we want to have the bottom-observer.
>> Evgenii Ray: And let's convert it to HTML.
>> Evgenii Ray: And type some utility text. So this will be the bottom-observer, oops, sorry. The next one will be, bottom-observer.
>> Evgenii Ray: So let's place it in the string now.
>> Evgenii Ray: And trim it to remove any spaces.

[00:01:15]
So now we have our basic structure and we can check our index HTML, which already has the template that we used before in the previous exercises. And it also has the database that we already used before. And here we initialized our virtual-list with some properties right now, all there now.

[00:01:36]
So if we run this HTML, we should see the basic structure, so top-observer and a bottom-observer, there are no elements rendered yet. So the next step would be to register the callback, so we need to have the observer that will track the intersection with the top-observer and the bottom-observer element.

[00:01:58]
So let's implement this one. We are going to transition to effect method and I'm going to use the utility function called intersectionObserver which will return. So basically, the wrapper around the observer constructor that we can use, so it doesn't have any special logic. It just observes the elements that we provided just to make the code cleaner.

[00:02:27]
So first, we need to provide, as the first parameter provides the targets that we want to track, and we already have the method code getObservers that will return the top-observer and the bottom-observer element. Then we need to provide a callback. So the callback accepts entries. And we already have the placeholder function just an empty one.

[00:02:52]
So there is no logic in there, which is called handleintersectionObserver and we pass the entries inside. And now we can also provide the configuration for our observer. So let's call the threshold. So let's set up the threshold of 20%,
>> Evgenii Ray: Okay? So we can now test our file so we can open, or actually, let's first, validate that our code get fired.

[00:03:30]
So what we can do here is,
>> Evgenii Ray: So let's do the basic handlings of entries. So first, we need to loop for the entries that we have.
>> Evgenii Ray: Then there are two, basically two cases, either we have the top-observer or the bottom-observer. So but first, let's check that the entry is intersecting.

[00:04:03]
>> Evgenii Ray: And then we validate that entry.target.id should be equal to either the top-observer.
>> Evgenii Ray: In this case, we need to call the handleTopObserver method. The skeleton of this method already predefined in the template, but it doesn't have any code inside. And then we also have the,
>> Evgenii Ray: Bottom-observer, if the target ids the bottom-observer.

[00:04:38]
So this both of functionally synchronize but let's specify that they don't return anything. And if we want to validate that the code works, let's just put some simple alert and say, the code works. So okay, now we can open our index.html, run it and see that, yeah, it works.

[00:05:02]
Okay, this where our first two exercises within one bigger exercise. And now the next part will be to render some cards when we intersect with the bottom-observer. Do we have any questions for these two parts?
>> Speaker 2: In the y function, where we get the data-y attribute, is there any advantage to using get set attribute versus the data list API?

[00:05:27]
Or is it mostly just a matter of preference?
>> Evgenii Ray: It's a matter of preference, there is no clear advantage. So here you can either use the data list, but because I know exactly the name of the attribute, we can just use the get attribute. Maybe if you work with the multiple attributes then it might be useful to have data list.