Quick Edits Exercise

[00:00:00]
>> Jon Kuperman: We will move over to the first exercise. So you can either go find it via the masteringdevtools.com, Exercises, Essential Chrome DevTools, or build the site locally from the GitHub repo and go to the same place. And so let's take a quick break. We'll kinda break out and work on this together, fire up the DevTools, and do a bunch of these changes.

[00:00:20]
So see if you can use the DevTools to change the list from an ordered list to an unordered list. This password field, we can see, doesn't let you paste, so if I try pasting, it gives me this thing. Can you fix it? So either it does allow pasting, or you're just somehow able to set the password to this, and then see if you can figure out which one of these cards has the ID 1, 2, 3, 4, 5, 6, 7, 8.

[00:00:41]
And think about how you would be able to do it if it were an infinite list of cards. Would you be able to kind of highlight it and figure it out yourself? So yeah, let's take a quick break there, try to go through these, and then we'll do them all together when we come back.

[00:00:56]
>> Jon Kuperman: All right, so yeah, let's go through this together. Feel free to jump out if you have any questions, and then we'll move on to the kind of next one. So changing the list from an ordered list to an unordered list. So I'll right-click and open the inspector here.

[00:01:09]
And then there's lots of different ways to do this, but essentially, I just find the ol tag here. And if you double click a tag, it puts you into this kind of smart editing mode where you can just edit one of the tags and hopefully you can see that as I change the top one it changes the closing tag as well.

[00:01:28]
And so I'll make it an unordered list. There it goes green. The password doesn't allow users to paste. This is actually something I deal with all the time, it's so frustrating. Can you get around it? And can you set your new password to this big long string? So there's again, a couple of different ways we can solve this.

[00:01:43]
So we can see, right off the bat that if we try pasting in, we get this pasting is not allowed. So I can go ahead and inspect this element and see. So there's a few different things I think we could do. One of them, I left this kind of cheeky disallow paste class, right?

[00:01:59]
So you could remove that, and then you should be able to paste it in. I think another thing that we could do here, let's refresh here, is you could just mess with the value itself. So I think that you could do value equals, and then paste this thing in.

[00:02:12]
And then you're still not allowed to paste, but we've pasted in kind of the back way. Yeah, so I think we could do the same thing here. Either solution is totally fine. I guess one, it's like sort of a smaller thing, but I'd like to point out is that this way that if you want to add an ID and there's no ID only classes or there was no value field, you can go to edit one, like the class.

[00:02:34]
Then you just kind of go to the beginning of it and you could like totally put, so you can kind of do this and the editor is smart enough to then break that into multiple properties. So, yeah, we can do that. And then the border color of this card with this ID, again, quite a few different ways we could do that.

[00:02:51]
We could do a search here, right? You could search for this ID, kind of find it. We could also see, it is here, we could also go like in the console, like we had done before. And we could do like document, get element by ID, and then you could kind of paste this in, and this would find it from here, you could sort of go and view in the Elements panel.

[00:03:14]
You could view it here, and then even if you were scrolled somewhere else, you could scroll into view. So, kind of a lot of different ways hopefully highlighting that these things are very deeply linked together, and you can kind of solve things in a variety of different ways.

[00:03:26]
But always get back to the same kind of point, however you'd like to get there. Did everyone find this one, okay, yeah?
>> Speaker 2: So I noticed that you had the event listener on the allow paste. Could you just go into the event listener source and change that?
>> Jon Kuperman: Yeah, that's another totally acceptable way to do it.

[00:03:42]
Anyway, that works is great. So, you could go in here. You could do the allow paste. So is the event listener on the paste? We could find the source code. This is a great question. So we can find the source code that says, okay, when it does allow paste, we prevent default another like very great way of doing it would be just to kind of go ahead and just delete all of this stuff.

[00:04:04]
And now you should, I guess you'd have to have the source code and do a refresh on it, yeah? So if you have the source code and you do a refresh, then that'd be a totally another great way of solving it. All of these are great. I think it's cool because the things work together really well.

[00:04:18]
All this HTML, JavaScript Script CSS, and so then when you're trying to fix or get around different things, there's all sorts of different approaches that you can take. That's another totally great way of doing it. Everybody feel pretty good about that? Yeah.
>> Speaker 3: If this is too much of an aside, what's a good way to build this that can't be easily circumvented with developer tools?

[00:04:33]
Is that only server-side validation APIs?
>> Jon Kuperman: Yeah, so the paste one is particularly tricky to actually discourage. I think that you could, like, I was trying to think like, I think there's some things you could try to do. I think it's always a losing battle, but I do think you could have like, event listeners that are like on input.

[00:04:53]
And if input was more than one character, you could try to kick that out. So even if you edit it through the DevTools, it would still spit it back out. But I think ultimately, with this particular one, preventing paste is a bad idea. It discourages password managers and complex passwords.

[00:05:09]
But, yeah, it's a really good question. I think truly also when I build software, because I think this is a better, a really good philosophical question of, can you prevent things? Can you stop things? How secure can you be on the front end? And the truth is that the front end is theirs, you can't be secure, you can't have an API that could be called dangerously from front end, because front end can just call it any way they want.

[00:05:30]
They could grab that URL and they could paste it in the console. So your point of security needs to be back end needs to be able to handle anything from the front end, because you can't really see sites they prevent right click, or they try to prevent the DevTools, or they try to prevent pasting.

[00:05:45]
But there's always ways around that. So I do think philosophically, you cannot control how the front end uses your endpoints in your JavaScript, and you need to just be secure against that.