Zero to Production Node.js on Amazon Web Services Exercise 5: Building on Frontend Tools

Transcript from the "Exercise 5: Building on Frontend Tools" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Kevin Whinnery: So we talked a little bit about some of the alternatives. And so at this point, we're gonna take a little bit of time to knock out a few more issues in our GitHub repository related to browserify and SaaS. And these ones are fairly simple, should be a nice warm up for the rest of the day.

[00:00:24] So let's head out to GitHub and see which tasks have been flagged with exercise five.
>> Kevin Whinnery: So we have a couple of bits here. The browserfy related task is to add ES 2016 presets to our Babel configuration in addition to the ES 2015 presets that we're currently using.

[00:00:49] So our friend JavaScript clearly not progressive enough, need to add in some additional next generation echo script features. So we are going to be changing our transformation configuration to allow us to include those ES 2016 features as well. So that is one task to add to head of the configuration.

[00:01:13] The other is to update the styles for our to do's page. And the thing that you're gonna wanna accomplish here is to ensure that the links in the footer. So down here, we have to scroll our way down. So these links in the footer, right now are not colored significantly, differently than the rest of the text.

[00:01:40] So I would like to do is make those links in the footer the same color as this header up at the top of the page. And I don't know about you, but that's really hard for me to read. So I think messing with the opacity or the color of that H1, deciding on one that's a little bit easier to read.

[00:02:02] And then essentially ensuring that the color is stored in a variable that we can use both in the header and in the links way down here at the footer. So it'll require to use at least that one feature of SaaS. So I feel it's something we can knock out in a relatively short period of time.

[00:02:22] So I think we'll take about 20 minutes, and then come back as a group to knock it out. Yes, Mark?
>> Mark: There's a question about, is there a reload module that you recommend?
>> Kevin Whinnery: There is a LiveReload, is a popular one that you can use with grunt. I don't use one, I work on a project that does use one.

[00:02:47] And it just constantly pisses me off cuz reloading the page I'm on, every time I save a file, it just isn't the behavior I want usually. So I don't use one, but LiveReload is a popular one.
>> Mark: So LiveReload would reload the entire page. So LiveReload, when reloading [INAUDIBLE] page, I think hot reloading is reloading an individual modules.

[00:03:12]
>> Kevin Whinnery: Right, yeah.
>> Mark: You're working on, cuz typically, people use [INAUDIBLE] reloading with web packing react, right?
>> Kevin Whinnery: Yeah, yeah, I think that's a feature of those tools. So I don't have one that I recommend because I don't.
>> Mark: Yeah, but there's module reloading [INAUDIBLE].
>> Kevin Whinnery: Yeah, I mean I'm not familiar with that specifically.

[00:03:42] Yeah, I know that react tooling does that. It's especially to great effects if you're using RAC native like it will reload reload code in the simulator, but there isn't one that I use, so my answer is derp there, yes.
>> Kevin Whinnery: All right, so let's go ahead and try to knock out those two issues in our GitHub repo.

[00:04:11]
>> Kevin Whinnery: And yeah, we'll take about 20 minutes break to do that. We'll take a look at any pull requests that come in and merge those down. And we'll move on to some VJS stuff after that.