One Million Checkboxes with Laravel
This episode is for members only

Sign up to access "One Million Checkboxes with Laravel" right now.

Get started
Already a member? Sign in to continue
Playing
04. Using a grid pattern for the scroller

Episodes

0%
Your progress
  • Total: 1h 17m
  • Played: 0m
  • Remaining: 1h 17m
Join or sign in to track your progress

Transcript

00:00
We need to render out these items as a grid, of course,
00:03
because our checkboxes are not going to sit on their own line. You might be thinking, well, we could just start this up with CSS using Flexbox or, in fact, using Grid. And that's not quite going to work.
00:15
The reason being that if we just take a look at each of these items, you can see that they have transforms applied to them and an absolute position to position them in the right way.
00:25
This is just how these scrollers work, so they can efficiently render them on the page. Now, what we want to do is pass in an option to our Recycle Scroller to set the amount of grid items
00:38
and then the item size. But we need to work out the item size based on the size of the grid and the size and width of the container that we have so it can render this properly.
00:50
And this is going to be important later on when we get to look at the responsive version of this. OK, so let's just take a look at how the grid stuff works, first of all.
00:59
So we have this Grid Items prop. And we can just pass in how many grid columns we have. Let's go ahead and set this at 32. And I'm actually just going to take the item
01:09
and only render the ID out here. Let's go ahead and open this up and see how this looks. So you can see now it's created a grid pattern. And as we scroll, each of these columns and rows
01:19
is being rendered as we expect. But we want the grid to go to the very edge of this component, of course, because we don't want checkboxes stopping just inside of here.
01:30
So let's make this a little bit more dynamic. And this is going to help later when we look at our responsive stuff. So at the top here, I'm going to go ahead and create out
01:37
a couple of options. We'll create some refs in here to hold the amount of grid items. So in our case, we just chose 32, which is absolutely fine.
01:47
But we want the size of the items to be dynamic to fill up the space. So let's go and create out an item size in here as well. Let's set that to 30 like we've already done.
01:59
And then we'll just reference both of these in here. So let's reference item size and grid items. So we get no difference here once we actually import ref. And there we go.
02:12
So we get exactly the same thing. But now that we're working with this, we can efficiently calculate this. Now, the item size needs to be the width of the container
02:22
divided by the amount of grid items we have chosen. Now, this is a little bit annoying because we don't really want to have to specify any pixel values in here.
02:33
But we're just going to choose out an amount that makes sense. So we've got a 1,232 width container here. Let's just go ahead and set the item size to 1,280 divided by the grid item amount.
02:49
Now, what that will do is it will space these out evenly throughout this width. And now what we can do is set each of these not to a number but to a checkbox.
03:00
So let's go ahead and start that up and see how it looks. So let's start with the outer container here. We're going to go ahead and set this to a height of full, flex with item center, and justify between.
03:12
The reason that we're doing this or justify center, the reason that we're doing this is the input that we're going to add in here. So this will be a checkbox input.
03:20
We want this to sit in the very center so everything is nicely even. Now, we don't need to add an ID or a name to each of these. We just want to make these a specific size.
03:31
So let's set this within Tailwind to a size of six and see what this looks like. Okay, there we go. That looks a lot better.
03:38
We've got a little bit of overflow here, but we can fix that up with the correct sizing. So let's grab the actual width of our overall container here and that will be just up here, one, two, three, two.
03:52
So let's just change that value over here. And there we go. So that is fitting a lot better. We could do better with this,
04:00
but feel free to play around with it. Okay, so we've now got these rendered out properly. Just to give you a demo of this, if we set the background to say red on this one,
04:10
you can see that this is a nice even sizing and we've used Flex to center each of these. What we can now do though is get rid of both of these backgrounds
04:18
because we now know that we're rendering out one million check boxes on the page. Let's very quickly look at our checked state. So we will go and set this with checked in here
04:30
and we'll just say item checked. Now we already know that when we mapped through these, we set each of these to false. So this shouldn't have any effect at all.
04:39
But whenever each of these gets updated, we can go ahead and re-render our scroller to show the new value. If I manually set that to true,
04:48
obviously all of the check boxes are gonna be checked, but hopefully now this is starting to come together. This is our state, which we are going to use to render out
04:57
everything on the page. When any of these items changes, of course we can re-render and the new checked value will be shown on the page.
05:06
Okay, there we go. There is our grid. It's working nicely, but there's one problem.
05:11
This is incredibly important. Now the package that we're using and any other package like this, regardless of which technology you're using,
05:19
isn't going to break if you show too many items. Let's zoom out on the page and give this a refresh and see what happens. So as you can see,
05:29
we're back to the same error that we had before. There's a max of 1000 items, and this is hard-coded that you can show on the page. Otherwise, your browser's gonna crash.
05:42
So we need to figure out how to get around this. Now, if I refresh the page now, you can see that it's working because the console is pushing this up.
05:52
We've used that height of screen and we've used flex to push this down. But as soon as we get rid of this and it tries to render more than 1000,
06:01
it's going to error. Now, unfortunately what we're gonna have to do is set a maximum height on our scroller. So if someone does zoom out or uses a huge monitor,
06:10
it's only gonna ever have a max height. So we're gonna set a max height here of just any value. We can play around with this, but I found 720 works. We give this a refresh now,
06:20
you can see that zoomed right out, it cuts off at the end. But when we zoom back in, it's always never gonna scroll the page
06:28
and it's only gonna push this to the very bottom of the page. So when you're working with these scrollers, it's really important to set a max height
06:35
so we're not rendering out too many items. But as you can see, we can scroll all the way down here, right to the end and this is box 1 million.
16 episodes•1 hr 17 mins

Overview

How do you render one million checkboxes in a browser and keep them synced in realtime?

Well, using a combination of virtual scroll rendering, Redis bitmaps and bi-directional WebSocket communication.

Let’s cover each of these concepts to build up this fun project — you’ll be surprised at how useful these techniques are for your own applications.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!