Transcript from the "Coding a Progressive Enhancement Component" Lesson
[00:00:40] But with Gatsby, that's kind of not as intuitive. So in talking with the team about how they would approach this, I came up with a pretty good pattern. So I'm going to go and implement this. Let's go back to our app. I have this section called Enhanced Tablist.
[00:00:58] And it is blank right now cuz I'm gonna go and write the bare bones like basics of how to actually override what Gatsby is compiling by default. So I'm gonna go into this enhanced tab list. It is pulling in the sort of shell of a component called Enhancing List.
[00:01:17] And I'm gonna pass in a number of items. So the sort of conceptual basis for this component would be a tab switcher that starts out life as just a list of content. And so I'm going to go start that in the components area. So I've got this TabList in here, and it has a little bit of stuff in here by default, things that I am really interested in.
[00:02:07] Okay, now I can enhance things. Interesting. So if I use this useState Hook and useEffect, I can go in here and do a little bit more work to actually change how my layouts render. Okay, so let's start out here by adding an unordered list, and this might be the markup that gets transformed into something much more interactive later on.
[00:02:33] But I can go an use this logic. I'm gonna spread the isClient state variable. And this is a really interesting trick that I didn't know about before. I can say, if it's the client, I can go and add an aria role. So I'm gonna add a role of TabList.
[00:03:16] So, that's why I'm making these changes. So I've got this list. I am going to iterate over the items. So the items that I was passing in from the page where this is called, I'm gonna say items.map. I'm gonna pass in an item, and that needs to go inside the parentheses.
[00:03:40] And I need to close it.
>> Marcy Sutton: Didn't do this right. I'm gonna back up. So I normally put this like that. Okay, still need closing paren. I feel like something wrong here. Okay, it's because it just needs to be a paren, not brackets, okay. Now, I've got my map function.
[00:04:06] Okay, so I'm gonna go in here and do a really similar thing. I'm gonna say li.key, because I'm iterating over these items. And I need some sort of like a unique identifier or reaction that will complain at me. So I've got this list item here. And I'm gonna do the similar spread of the isClient state variable.
[00:04:31] And I'm gonna do something, actually I need to do this on the list item itself. So I'm gonna move this carrot and I'm gonna say role of tab. So this will dynamically change what role, and I can add aria here in a Gatsby environment, when otherwise it's kind of abstracted away from me.
[00:04:53] So item.label is what I'm gonna get from this component. Let me see what else I missed.
>> Speaker 2: Your items is dot map. It has a opening curly burst.
>> Speaker 3: A closing curly burst after the right parentheses.
>> Marcy Sutton: Here we go. Now, still not right. I need another closing print.
[00:05:14] Okay, yeah, I'm in this JSX environment, and the way that you kind of toggle between dynamic code and code that will output as HTML like this ankle bracket UL is to use these curlies. I think we're just getting in a part of the day when it's kinda getting hard to do it all.
[00:05:32] [LAUGH] So thanks for sticking with me. So I've got this item. It's iterating over these times. It's got a label in it. And that's pretty much all I'm gonna add here. I just want to see it add these roles and turn things on and off. So I'm gonna do something super interesting and hope the demo gods work great here.
[00:07:49] And it's just the regular straightforward, unordered list. And if I do, if I look at the view source, there's a bunch of HTML. It's all minified because that's faster for performance. So it might not be super human readable but this is for machines to read not for humans to read.
[00:08:09] I think that's fine. You could use a purifier if you really wanted to read it. Dev Tools is fine in my opinion. But if I go over to the local host, the develop mode, it's a lot shorter. So that's fine for development mode. If you're doing things for progressive enhancement, this does give you the control to actually change what is output, which is pretty awesome.
[00:08:54] There's a lot of potential here. So we've got that working. Here's a the noScript I mentioned earlier. So if I inspect that, this is a noScript element that just works in the browser. I didn't have to do anything for that. So that's how that works. I'm gonna go back to view as code and I'm gonna clean it again.
>> Marcy Sutton: I think it didn't matter this time. So the reason I have to clean is because when I deploy, I'm using this thing called prefix paths. So it actually builds the site with a path prefix. So in GitHub, it's the name of the repo, and that's a difference from how I'm running it locally.
[00:09:36] And so sometimes you might need to clean the cache. Little bit of back story while we're getting this development mode back up.