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
16. Fixing responsiveness on load

Episodes

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

Transcript

00:00
Let's just recap on our responsive stuff. We know that we're using a bounding box value here to grab the width of the scroller
00:07
to make this responsive. But if we kind of put it in here a little bit and hit refresh, and let's just try and catch it, you can see that it will slightly overlap.
00:15
So I'm going to try my best to catch this. There we go. Now, the reason for this, let's just recap what we did earlier with the item size.
00:23
We took the initial width of the container, and then, of course, we divided that by the amount of grid items we want, which spread everything out nicely for us.
00:33
The problem is, if we come to this with a smaller viewport, of course, we're not going to have a container size of 1, 2, 3, 2. So what we need to do is always make sure
00:44
that this value goes ahead and gets set properly. Now, we already have this onResizeHandler, which takes the width and calculates the grid item's value.
00:54
So what we can actually do here is just invoke onResize immediately when we hit the page. Let's go ahead and see what happens. So we'll get back to the point here
01:04
where we were trying to break it. And as you can see, when we reload the page, this always now goes ahead and sets the correct amount of items and grid based on the width,
01:16
regardless of if we refresh the page or if we pull this in. So a really quick fix there to set these properly. And of course, you can tweak the values as well if you need to.
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!