This course contains good reference material, but does not reflect our current quality standards.
Transcript from the "Task #1 - Introduction" Lesson
>> Kyle Simpson: Let's look at our app in page. I've implied a couple of things by this silly little design. One is that we've got a little carousel here that I should be able to go left and right in my carousel. You'll notice that it's not functional, we're gonna let you wire up the events to make that functional.
[00:00:22] And then you notice this big blue area over here on the right. What does that thing signify? Essentially that signifies a details pane, that if I were to click one of these items in my carousel list, it would show up a set of details about that person. So my stupid little example here is, this is like a page for a company that provides tech support and you're trying to schedule one of these individuals to come out to your office and help you with your computer.
[00:00:50] So you've got a list of the available tech support technicians that you can click on and see their details and figure out who you wanna schedule, okay. So it's just my basic little metaphor for what this app is supposed to be.
>> Kyle Simpson: [COUGH] So we're gonna wire up these events and these functionalities first just getting our feet wet with using jQuery to do a couple of basic tasks.
[00:01:16] But our much more important focus here is on how the code that I've already written, how can we improve it to organize it better? And that's really where we're gonna solidify a lot of the discussions that we were just having about what's the purpose of a module and a closure, whatever, we're gonna see why that's such a useful tool for code organization.
[00:01:36] So starting with the first task, it says open up header.js. So let's do that. In your directory you're gonna have a header.js file. Js, header.js. it's empty. That's super not helpful, right. This is where you get to write some code, right. Now what's the purpose, what are we trying to have it do, it says open up the file.
[00:02:03] Let's go back to the Read Me. What's the purpose? In this file you're going to attach event handlers for the header links. When you use a jQuery document ready event handler to make sure that your code doesn't run too early. So first step, if you haven't had much experience with jQuery, is you're gonna want, we can take out that comment, you're gonna wanna say, (document).ready.
[00:02:29] And all the code that we're gonna write right now. We're gonna put inside of that ready function. What document ready does, it is a special event that your browser fires that lets you know that the DOM has been parsed and it's ready to go. [COUGH] So if we're gonna do anything with the DOM like we are here.
[00:02:51] We wanna make sure that we're in a ready state. Now let's go back to the design. If we look at the design here. You'll notice that I got a couple of links up here. That imply or they link to pages. Like one is for registering, the ones for log in.
[00:03:09] If I click them right now, you notice I do a full page refresh, full page load to one of those other files which is not at all what I want. What I want user experience wise, is that clicking on one of the links pops up that page in a modal, okay.
[00:03:25] Now the modal already exists. You don't have to define the modal or its CSS or anything. But we need to actually invoke that model and have it load the code, load the URL from one of these links that's clicked on. Okay. So our first step is to set up a click handler.
[00:03:45] And we wanna figure out on what do I want to attach my click handler to. Well there are some links there that we wanna attach to, so you should probably open up the index.html. And get a little bit familiar with the markup that I've provided.
>> Kyle Simpson: Specifically, I'll call your attention to these links right here, which are in fact the register and login links.
>> Kyle Simpson: So what we wanna do is get those links and attach event handlers to them so that when they are clicked they fire our event handlers rather than just doing a navigate. Now I've provided these rel attributes on all of these different elements that you need to interact with.
[00:05:04] A lot of people like to put an ID on their element and then look up the element by its ID. It's a very common and very powerful, practice your pattern. I'm not a big fan of that approach and the reason is that IDs are usually more used in your CSS.
[00:05:24] If I open up the CSS file that's provided with the site. Probably the part that I'm least proud of because I'm not really a CSS person at all. But you notice in my CSS, I have several places where I'm referencing elements by their ID like pound page and I've got a few down here like pound carousel.
>> Speaker 2: Just a quick [INAUDIBLE] smacks guy has the same thing to say about IDs in relationship to CSS.
[00:07:03] Still it's not my particular brand. So another thing that people will do is they will attach a data attribute. That's a new HTML5 thing. It'll attach a data attribute for looking at elements. My preferred approach, this is all just a preamble to say, my preferred approach is to use the rel attribute.
[00:07:25] The reason I like this attribute is that it is valid on nearly every single element in your page. But almost all elements, it doesn't mean anything on them. So it's just sitting there valid but it has no meaning. Which means it's a nice little like hook for us to use.
>> Speaker 3: What was its purpose originally?
>> Kyle Simpson: So what rel means, is relationship. Okay? Now look at, for example, rel nofollow on an a tag. That's actually a real thing. That's not something I've made up. Rel nofollow on <a> tags. What that tells a search engine is. The relationship between the page that I'm linking to and my page is no relationship at all.
[00:08:08] Don't follow it, don't give it any search engine juice. And that's a very common thing in the SEO world is to put nofollow relationships on your links. For pages that you're linking to for information but you're not endorsing them in any way. Okay, so here rel means the relationship between my page and some other page.
[00:08:29] Another place that rel is used that you'll very commonly see is on the link tag. And here the relationship is pointing at another file, not a URL, but another file. And it's saying the relationship between that file and my file is that I want to use him as a stylesheet.
>> Kyle Simpson: Lots of different schools of thought on it. You don't have to get too wrapped up if you totally disagree with me and you like to use ideas or that's the way you end up if the company does that where you work, that's totally fine too.
[00:09:46] But I like to use rel attribute, so the code that we're working with, that'll be kinda already going with the flow.