Form Improvements Exercise

[00:00:00]
>> We've got this kind of a version of what we ended up with last time. Just take a few minutes and try some of these out. Change the accent color of the check box. Style the placeholder and the caret. Try some of the things that we just kinda toured here and take them for a spin.

[00:00:16]
Part of this is, do it for the muscle memory. So it sticks in your brain a little bit better. Because otherwise, you will forget that some of these exist. And I think having that kind of neural pathway where it exists is worth the five minutes it's gonna take us to get it.

[00:00:31]
So I'll give you five minutes to play around with that and we'll kinda style this one together and look at some other things we could do. Yeah, really what we're trying to do now is just play around with some of the little things that we saw in that last little tour.

[00:00:47]
The one that makes me the happiest, which is how I'm gonna focus my time right now, is making the check box match the rest of my theme. And so we can go in here and we just say class. Purple seems a little subtle, just to show that it works.

[00:01:08]
Let's go grab, I don't know, cyan teal. Let's do teal, right? That's obnoxious. Let's do that, right? And so, yeah, you can make it whatever color you want. And, again, I think those little things that are, like, it's always interesting because a lot of these little niceties get quietly added to the browser, like, cross-platform.

[00:01:32]
And so there's always a few little new ones that pop up every once in a while as well. And we'll see some other really interesting things you do when we get to the peer and the group stuff as well. We talked a little bit about if we take this input field over here.

[00:01:46]
We talked a little bit about, let's use teal cuz it's obnoxious. And some of the ones I had in the last example were a little subtle, right? And so you can kinda see our caret, we can change that color as well. We can do that for the placeholder as well, we'll say placeholder- teal-300.

[00:02:14]
Now I decide to live code again. See how this goes. placeholder-shown, So you can change the background color if it, effectively, placeholder-shown should be a useful analog to empty, and I bring this up because there is a pseudo-selector and thereby a variant called empty, but it's not for our input fields, right?

[00:02:45]
I'll show you real quick. We can put a div in here. And we're just gonna give it some amount of a width and a height. Give it a height of, I don't know, 10. Feels good. A width of full. So that's, again, a nice handy way of a full width in this case.

[00:03:02]
And we'll give it a background color of, why not teal, teal-300. Let's do it. That's great. And then what I could do, I'm gonna just put something in here. I'm going to say, p-Hello World. That seems like a pleasant thing to put in there. We've got that. And then I could say, Empty.

[00:03:32]
And why am I doing 300? It's barely a color. teal-300 is a color, red-300, it barely even registers. If I take this out and then I save it, it means that the actual DOM node itself is empty, right? This is super useful, because how many times have you put up, written custom, a conditional in your component, cuz you're still loading the data.

[00:04:04]
And you're putting those empty fields in by, if array length equals equals equals zero, then render this wholly other thing. Versus you could have just done it with a little bit of CSS, and when we get to before and after content or some of the animations, right, you'll see that there's some interesting ways that we could like leverage that as well.

[00:04:26]
So I just wanna bring that other one to your attention. There was not really other great way to slide it into the overall story. The other one that I'd hidden here for you that I think is pretty cool is this really nondescript-looking container. You can kinda see a little bit what's going on with the actual CSS that it generates, which is basically that at its smallest it'll be a width of a 100%, and then instead of being fluid after that, it basically goes to the next breakpoint, right?

[00:05:01]
And you can change the breakpoints to whatever you want, cuz you can change anything you want until when. And so instead of being, like, okay, let's say your designer hypothetically hands you a set of Figma designs, hypothetically, and they send you one for 320 pixels wide, 720 picker poisons.

[00:05:22]
We can even just say, in this case, 640. We added one smaller than this. I think we've got 375 is our smallest viewport. And they hand you designs at each and every one of those, and those designs look great. Sometimes at a width of 820, part of the background image, or stuff doesn't look quite right.

[00:05:45]
This allows you to basically say, the container will basically, each breakpoint, it goes to, whatever, the kind of last breakpoint it was. So once you're above 640, it'll be a max width of 640, right? Then once you pass 768, it will be the max width, so it'll only be as large as your last breakpoint, and if they go into any of those in between ones, you don't have to worry about that, you get this one for free.

[00:06:09]
And if you wanna just add that with an Mx Auto, right, it'll be centered as one nice column as a freebie that tailwind has handed you to make your life easier, right? So not only is a bunch of utility classes just for syntax but there are a bunch of these niceties in there as you saw before.

[00:06:26]
When the slash for the opacity didn't bite me with that one that doesn't exist, that's another nice shorthand that kind of just makes it a lot easier to be productive, because otherwise this is something you'd write over and over and over again in every app.