This course has been updated! We now recommend you take the Introduction to Dev Tools, v3 course.
Transcript from the "Challenge 1 Solution" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Speaker 1: We're gonna go over the challenge results. But first, there are a couple of different things that I just kind of wanted to address to everybody that got pointed out. Some of the finickiness that I was mentioning earlier. One thing a couple people were having problems with is that they would make the changes.
[00:00:19] And the changes would actually persist to disk if you opened you text editor. But on a refresh, it wasn't showing. So if you had that, I'm assuming it's just a caching issue. So what you can try is, and this is skipping ahead just a bit, cuz we are gonna cover this later.
[00:00:34] But over here on the network tab, You can click Disable cache. And so this is really handy. We will cover this, but basically it's saying never cache when the DevTools are open. So the DevTools are closed, you'll still get your normal experience. But you won't cache when the DevTools are open, which is usually what you want.
[00:00:50] If you're doing performance analysis, you don't want to bunch of stuff cached. This can also, I think, be accessed from the the three dots, and then Settings, over here. Well, maybe not. All right, get it from the Network tab over here. So that was one thing. You can also, if it's not working, you can Ctrl+C the note app, and then just start it again.
[00:01:12] I don't think stuff should be caching that much, but it definitely was for some people. Another thing that was pointed out, and I'm not sure why this is. Is that when you're in the Sources tab, like adding a new selector isn't persisting to disk. So if you wanted to like add one for li's, or for h1, something like that, that's not gonna save.
[00:01:31] I'm not sure why that doesn't work. It feels like it should. But that is why I made a bunch of empty selectors here. I don't know if people caught that, but I made an empty list selector and then up here I made empty header selectors. Just to make the demo a little bit more endurable.
[00:01:48] The last one, or maybe, actually, there are a couple more. [LAUGH] The Event Listener, one you can totally just see. Some people went the network route and saw what JavaScript was coming down, which is great. You can also just go to this Event Listeners tab, over here. And see what is listening on scroll.
[00:02:05] So you could see like, the editing.js is listening on scroll. And then click, and it'll open it in the sources. So I was kind of what I was hoping with. And then you had something I can't remember what was broken.
>> Speaker 2: It was the computer disappeared [CROSSTALK]
>> Speaker 1: Yeah, yeah, you had two things.
[00:02:22] One, finding that color changes weren't persisting, in the sense that if you change the color, it stays. But if you change the color format, it's not persisting. Feels like it should do that, but that doesn't seem to stay. And then the second one, which is really weird, is this Computed styles tab which I mentioned.
[00:02:40] He was noticing that if you pin it to the side over here, computed styles is just gone. Even though there's plenty of room for it to be there, like here. So that's really strange to me. I'm not sure why that is. So if anybody's having trouble finding computed styles.
[00:02:57] I guess it needs to either be docked to the bottom or popped out in order to get access to that. Cool, so that being said, we can go through and do the exercise together a little bit.
>> Speaker 3: I got a couple more questions really quick. Right after we broke, John C asked a question.
[00:03:17] If we nav a plain HTML file, will changes to text nodes or additional removal of attributes be persisted to disk as well?
>> Speaker 1: They will not. So this is a CSS- and JavaScript-only zone.
>> [INAUDIBLE]
>> Speaker 1: Okay, cool, yeah, let me know.
>> Speaker 2: Another question, what's a HSL?
[00:03:37]
>> Speaker 1: Yeah, it's like-
>> Speaker 2: Hue saturation.
>> [CROSSTALK]
>> Speaker 1: Something designers sometimes prefer. Yeah, and then I'm never sure what the differences are, but yeah. Okay, so, cool, to kind of go through these quickly. So I select the body, go to Styles, and then I can go ahead down here.
[00:03:59] And just change the background and I tab complete to EEE. List items having no bullet points, so I put a class on, if we dive in a little bit here. Let me make that even bigger.
>> Speaker 1: Well, I guess I can't. This is one case where I won't be able to make it bigger.
[00:04:21] Man, I'm really, really freezing here. Okay, there we go. So if we dive in a little bit, here, you can see it's got a class of list. Which is one of those empty selectors I gave you. This is, by the way, what I was referring to when I said I went a week without using any other editor.
[00:04:37] This is one of the big pain points. This is like, I can't add a new selector and have it persist. I need some way to do that. So then you could do list-style, none here, h1 should be 50 pixels. You click on any h1, again, all of these could be done multiple ways.
[00:04:54] I kind of prefer this approach in the elements, and Style's open. You could just as easily have gone to Sources, open up the CSS, and author the changes that way. So you could do like, font-size, 50 px. I have like a little, yeah. Creating a new div, that's one that's a little bit tricky.
[00:05:12] So you have a couple of different options. One is that whole edit as HTML thing that I was showing earlier. So you can like right-click, maybe, on the parent one, edit as HTML, and then you've got this very condensed code. So if we kinda maybe give it some space there, you could just make a new,
[00:05:34]
>> Speaker 1: My goodness.
>> Speaker 1: div with an ID of box, or whatever, and then just click outside of it to save. It makes this little blue box, here. Find the scroll listener, that one I just covered. But you can go to Event Listeners, scroll, and find it there, and then click through to the file.
[00:05:55] Convert the body background to HSL. So you could do this a couple of different ways. But click on the body, and then you can either Shift+click on it until it changes. Or you could click on it to open this up and change it into HSLA. And then, yes, some other changing things.
[00:06:12] Just kinda wanted to get people comfortable. So it's, no. [LAUGH] This is funny.
>> Speaker 2: It's already set.
>> Speaker 1: My bad on that one. [LAUGH] I build this site, and it was ten columns wide for those who use Bootstrap. And then I think it's was yesterday afternoon, I was like, well, kind of looks better at eight, but I forgot to change this.
[00:06:30] So here's a freebie, but, yeah, you could if you wanted to. You can go ahead and change the classes like this. You could have it be like, ten columns offset by one. And then when you hit Enter, you'll notice that it gets bigger. So you can do that.
[00:06:44] How long the page takes to load on a 2G connection, I'm really sorry, you guys. There are a couple of these I didn't cover. We're gonna get into this right after this workshop. And then force the link to show its hover states. So you could, a bunch different ways to do this, but you could use this little tool.
[00:06:58] Then you could grab the link, then you could go to hover, and click hover on it. At least, that's one way to do it. And then put me in the list, again. Multiple different ways you could do it. One cool little trick, which I hadn't shown, yet. But I really like is these are actually drag and droppable, which is much easier than edit as HTMLs.
[00:07:16] So you can long-click on one, like hold it there, and then, yeah. You'll start getting these blue lines where you can drag it and drop it somewhere. Alternatively, you could just add edit as HTML, and copy/paste it, or something like that. Cool, sorry about the 2G connection one.
[00:07:34] So hopefully that got you a little bit comfortable messing around with those things.