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
15. Navigating to a checkbox

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 add the ability to scroll to a box. At the moment, if we want to scroll to a specific section or box, it's pretty annoying, we have to manually scroll down.
00:08
So to do this, we're first of all going to build out a form. So let's go down to next to our count and build out a form in here. We don't need an action in here because we're going to use view to detect the submission of this.
00:21
Let's create out a label and we'll say, go to box and let's make this for box. Let's create an input type out in here with number. We'll set a minimum of one on this and a maximum of, of course, 1 million. And that should be good.
00:39
Let's go ahead and create a button to say, go. And why don't we just start this out quickly with flex item center and a space X of one. Okay.
00:48
Let's go over and there's our box. Let's just apply a couple of stars to this to make it look a little bit better. So let's say background gray, 100, and there we go. So we can enter a number in here, hopefully hit go.
01:01
And of course we get client-side validation. Okay. So with this input, let's hook this up with a model. Let's call this box navigate to, and let's go ahead and create our ref up here.
01:14
We'll keep these things together. So box navigate to that is just going to be a ref, which is going to hold that value by default is going to be now. So when we submit this form, we want to navigate to a box, obviously.
01:29
So we're going to say be on submit. We'll go ahead and prevent the default behavior and let's go and call a go to box function. Let's define this out just next to this.
01:43
And now we need to figure out how to go to box that we've defined here. Now, if we console log out on scroller value, which remember is a ref that holds this element, that's going to give us all of the API. So let's hit go.
02:00
Let's open this up and let's have a look here. So we have got scroll to item. So we can invoke that passing in what we have given, and it's just going to scroll down to it.
02:12
So really, really straightforward to do. Let's say scroll to item and let's pass in the item that we've provided within that ref. Okay.
02:23
Let's check it out and see what happens. So I'm going to go to 999, 999, hit go. And there we go. We're right down to the bottom.
02:31
And of course this is 999, 999 working really nicely. And of course we get that validation in here, so we can't do negative values. And there we go. It's as simple as that to scroll down to a box.
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!