Challenge 2: Solution

[00:00:00]
>> All right, let's go through it together. This problem was that the user would type in a rant, probably a rant that they would regret actually sending. And even though they delete everything in it, when we reload the page our remember text function would bring it all right back.

[00:00:19]
So, I've liked to go after this by starting from the user perspective. So I'm wanna look at this text box and see what JavaScript is interacting with that text box. So I'm gonna grab my selector tool, and I'm gonna point at the textarea. Let's make this a little bit bigger.

[00:00:38]
So this is a text area called rant-text with some stuff in it. And I'm gonna take a look at what the Event Listeners are, there's a whole bunch of them. Blur, click, errror, keyup, keyup? That seems relevant, we're talking about a feature that goes when the user is interacting with it, and keyup is a text interaction.

[00:01:01]
So we can take a look at it. There's two different pieces of code and one of them is ours, one of them is our own code, this addRantView.js:12. So I'm wanna punch in on that, and we'll take a look. We see a function here called onChange. Now, onChange is in event listener because it takes an event in, and it looks like we're trying or doing some sort of safety check here.

[00:01:25]
We're saying, hey, we hope the event has a target, but if it doesn't we're just gonna create an empty object. That's a little shortcut mechanism using Boolean Logic to say event at target or empty object. This would help handle the case where we're getting a manipulated event in the front door.

[00:01:42]
And then from the output of this, we want to grab the value. If there was value, we save it in localStorage. LocalStorage is one of a handful of ways the browser has of actually persisting information in the browser itself, not pushing it out to some remote server or some remote API.

[00:02:03]
We can actually see what's in localStorage and all the other persistent mechanisms, using the application section of Chrome Dev Tools. It's got a whole bunch of stuff and it lately Chrome has been doing a lot of work with service workers, and so that's a big emphasis of this page.

[00:02:18]
I'm not really gonna talk about that much today. But it also has this whole section on storage, where we can see what sort of things have been stored in Local Storage and in Session Storage. Which are essentially key value pairs of information that we can store. So here we can see that there is a key value pair in Local Storage, called next-rant with the value of that incorrect thing that we typed in, in our rant-text.

[00:02:44]
You can also explore all kinds of other pieces of storage that your app might be using, like IndexDB or Cookies, I don't use cookies. But back in our code we can say, all right, so we're getting the text if it exists from the event. And if there was text, we wanna set it.

[00:03:07]
So, let's attach our debugger again, and see if we can understand what happens. So, I add to my debugger, let's add another key. The key up event comes in, we get the change, we see r.Event. We can evaluate this statement, I'm just going to step over it. If you do a lot of debugging, it's probably a good tip to learn these key commands down here.

[00:03:34]
These allow you to quickly and easily navigate through your code without needing to worry about your mouse. So, F10 or Command apostrophe, I mean it will vary on what operating system and chrome version you're using. So if you just see what the key commands are, it is very helpful for navigating quickly.

[00:03:54]
So I'm going to just step over this, and we can see what to text evaluate out to. In the current version of Chrome, it overlays this golden rod background to text, that shows you in line what the values of each of the variables are as they're being declared.

[00:04:13]
You can also see that down here in the scope, so we can see the text value is Frontend Masters is so lame. Fake news so sad, blah, blah, blah. So we've put that into a conditional so that it will get evaluated. That will evaluate as truthy and will come in here and set it into localStorage.

[00:04:31]
Everything's fine, and we continue. But debug is, what happens when we delete everything in the text box? It's still being remembered. So I'm going to go through and delete everything in the text box. And now, when we come in we always get the value of text is evaluated as empty string.

[00:04:52]
And we're taking that value and we're putting it into the conditional, what does empty string get evaluated to as a Boolean?
>> False.
>> False, empty string is one of the falsy values, along with no undefined, not a number.
>> 0.
>> 0.
>> Negative 0.
>> There's one other weird one, there's like document dot something, document dot all, or something like that.

[00:05:20]
At any rate, this is just checking if it's truthy, or falsy, which we're saying, because we cleared out the text it is falsy. And we skip over this condition, and we do not update the value of next-rant. So after this code executed, if we go and look in the Application at the value of next-rant, it is still our unfortunate text.

[00:05:46]
So we need to make a change here. This condition appears to be on like safety checking, and making sure that we actually have a value that we would want to set. But rather than just naively checking if it's truthy and falsy, we probably want to set any value that's a string.

[00:06:03]
If there is a string that we've gotten at this point, that's probably the value of text, or what we want to set in our localStorage. So I'm gonna change it from the simple value, to let's check what the type of text is. And if the type of text is any string value, we should go ahead and set it.

[00:06:30]
With that in place, I can reload my page. And if I, Delete the text again, I popped into my breakpoint. The value of text is empty string. But the type of text which we can evaluate live in the debugger simply by selecting code, which is super cool. I can just select over this text and say the type of text is a string.

[00:06:58]
Which one it gets compared to string, we'll proceed on and we set the value. We take a look at the Application now, the value in Local Storage is empty there's nothing there. And if we reload the page, our unfortunate rant is gone. So this was another logical bug, this was we were evaluating empty string as falsy instead of looking at whether or not an empty string is a valid value for this purpose.

[00:07:39]
We looked at the Application Explorer, which allows you to look at and interact with any of the things that you persist in there. In the most recent version of Chrome you can even modify cookies in the Application Explorer, which is really cool. And we played around with breaking execution a bit.