Scribd
Upload
22 views2 pages

17-coding-virtualization-from-scratch

The document outlines a coding exercise focused on creating a virtual list structure with top and bottom observer elements. It details the steps to set up HTML templates, register intersection observers, and handle intersection events to render elements. Additionally, it addresses a question regarding the use of data attributes in JavaScript, indicating that the choice between methods is largely a matter of preference.

Uploaded by

kocherlasri876
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
22 views2 pages

17-coding-virtualization-from-scratch

The document outlines a coding exercise focused on creating a virtual list structure with top and bottom observer elements. It details the steps to set up HTML templates, register intersection observers, and handle intersection events to render elements. Additionally, it addresses a question regarding the use of data attributes in JavaScript, indicating that the choice between methods is largely a matter of preference.

Uploaded by

kocherlasri876
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

[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.

You might also like