Avoid Content Selection

[00:00:00]
>> Maximiliano Firtman: Well, let's go back to something nicer, less cryptic, less low-level, and here I'm going to just show you a couple of quick things that you can do to improve the user interface of your PWA before the final part that is actually short, but really important, that has to do with distribution.

[00:00:21]
So avoid content selection. This is a web app, okay? So by default everything is selectable, including logos, including menu items. So, I mean, let's go back to, I don't know, here, everything is selectable here. If you're using your fingers to select, I'm trying to pick that pointer. I can for some reason.

[00:00:47]
I'm trying to bigger that pointer, you can see I can select that title and that does happen on an app, right? It doesn't make any sense so that you can do this. And sometimes you don't even want to just click there. You click and put your finger there, and yeah, it doesn't make any sense, look at that.

[00:01:07]
I don't want that in my app, okay? I don't want those weird selections so well, you can apply CSS. You will select, none, but be careful. Because if you are lazy, you will do something like for example, I will just put this at the top of my size.

[00:01:26]
Something like this. I mean, it works, but yeah, for accessibility reasons, it's actually not a good idea to do this, okay? By the way, we are still need to use the dash WebKit prefix for some browsers, unfortunately. I mean, if I do that now, nothing is selectable, which is not good, because sometimes you wanna copy and paste, mostly when it's data, okay?

[00:01:54]
So use be smart, that's why. So now, if I refine anyway, how can I refresh my PWA, I don't have any refresh button, so yeah, you are doing this. That means I need to kill the app and open the app again. Do I need to install the app again?

[00:02:15]
No, but if I have a cache first, I have to check what happens with a new remember, I'm changing the CSS. If I have a service worker that is caching, I might have a problem with that. Okay, well, I'm trying to select now. And I mean, you don't see that, but believe me, I'm trying to select as before, and I cannot do that.

[00:02:35]
Okay, that's a quick hack. It's good to create an app like its experience, and not just keep it as a website.