Animations & Useful Tricks

[00:00:00]
>> We're gonna do a little bit of like the other kind of I think really kind of powerful things. We're gonna make a one thing that kind of pulls a bunch of these things together and you can kind of see it in place. With that we're going to take a look first at the animations, which again, super powerful, not that important, but super powerful.

[00:00:19]
You can define your own animations, but I really like the ones that Tailwind comes with because they have a bunch of fairly practical use cases. So one of the ones, and again, these are, if we pull them into one of the playgrounds, these are just regular CSS animations.

[00:00:37]
This one is pulse, and it's like free skeleton loaders, right, and so these are a bunch of different just shaped, just rounded divs. But remember when we had that empty pseudo selector before? Yes, that was cool. Now we have the ability to show loading and we don't need to have a bunch of conditionals in our content.

[00:01:03]
So we could theoretically on empty, have certain things that we choose to show and layout, have this pulse and as soon as that DOM node is filled with our actual content, they're gone. Right there's a bunch of powerful stuff you can do there as well or you can just make them literally like hidden or block.

[00:01:21]
Based on whether or not as empty and they will vanish when it's time so on and so forth. Okay, could I have gotten an SVG that actually shows you a spinning loader? I could have as soon as I started using emoji, I thought really hard about going to get the SVG and I couldn't stop myself, so here it is.

[00:01:37]
But this is actually more practical for the spinning loader, but it made me happy every time I looked at it, so here it is. All right, the other one you get for free and here is pulse, you can use it as like one of those little kind of notifications of, new feature over here or something along those lines, and then bounce.

[00:02:01]
And you can change any of the speeds on these as well. You also get transitions and transforms and all of these are free in Tailwind and you can change the timing, everything you can do in CSS, you can also do in Tailwind, it is all there for you.

[00:02:17]
Some of those, we use them less, so when I had to decide on time, those are not the ones that I chose to include, but they're there as well. The other ones that I really personally use a lot is this one I literally stole from my codebase. Which is we have a lot of IDs, and people want to copy them, you can do this select all you click one you get the entire thing.

[00:02:43]
Right and you can just, I have lots of places where for any given ID anything you want to copy super easily. One click you can do that on a code block you can do it on like any kind of JSON thing that one click, I cannot understate the amount of happiness that I have caused my co workers, just by adding a CSS class, well, they think I'm some kind of wizard.

[00:03:04]
And I'm not gonna tell them, right, but that's pretty great, and then you also do select none which nobody's ever asked me to do. Those are the sites that you hate, when you go to pull a block quote to send it to your friend and it's like they've disabled copy and paste or something like that, don't be this person.

[00:03:25]
Be this person, don't be this person, okay? So yes, the other one that I use a lot cuz I'm trying to be a good person, is there are some times where I'll just do this one together, I won't make you suffer through this one. There are some times where I do not want to show the labels, but you should have the labels, because people need the labels, cuz they have screen readers, right.

[00:03:54]
And because it makes everything accessible and you should have them, but sometimes you don't want them in your design, so what do you do? There's a really great, class in here we can do, class, SR only and then you can see there's the opposite of that as well.

[00:04:12]
And we saw before there is the ones for prefers reduced animation and stuff along those lines. And so did not actually have to do a whole bunch of extra classes and everything, just be able to go like screener only they're there if you're on a screen reader, right.

[00:04:30]
They're not there if you can see the placeholders and stuff along those lines, as it's doing some trickery but it is effectively an accessible way to both have the labels there for the people who need it. And then also if for some reason, the designs don't have them, you have a way around that as well.

[00:04:48]
Like I said, the reduced motion the high contrast, getting those all just as an inline thing make doing the right thing a lot easier which makes us more likely that we're gonna do the right thing.