React/NextJS Routing and WordPress API Custom Types - Live Coding with Jesse

Key Takeaways

Hey everybody, it's Jesse and uh today we're going to try to get a lot done. Uh and I I actually want to try to get through like a a whole a whole process. Usually I I just work on random stuff and I don't always get it done. So, I want to go try to go start to finish and take you through the process of creating a custom post type in WordPress with custom fields. Uh, populating that with some data, getting that data, pulling it into our React app, and we're going to make a uh a template in React to display that data. and we want that a user to be able to go to a page and have that page automatically generated with a unique URL. So, we're going to need to edit our server.js file to be able to handle that. So, I want to get all of that done uh while I'm streaming. So, that's a lot of stuff, but I've done it um I don't want to say a lot, but I I've done it, you know, three or four times before, you know, recently. So, I think we can get it done. Um, I'm going to check the live chat and say hi. Hey, everyone. So, I apologize in advance if I'm a little weird for this stream because I um I only got like five hours of sleep last night. Uh so, I was up ended up not being super tired last night, so I applied to speak at some conferences, which is kind of exciting. I've never applied to speak at conferences before. So, we'll see what happens. I don't really know if I if my submissions were even any good cuz I've never even seen anyone's submission before. But hopefully I at least get some good feedback, you know, even if I get rejected. That would be kind of cool. Um, if you want to see my um what I submitted to some of the conferences, it's available online. So, uh, check my Twitter. I sent out a link last night, uh, so that, uh, people could actually check out my idea for a talk. Um, and then this morning, uh, the baby was up really early. So, anyway, that that's why I didn't get sleep. But I'm going to try my best to stay focused. I do have one question for you all to start. Oh, um, someone asked what my Twitter handle was. Uh, Jeremy asks, it's uh, it's in the description for this show. Uh, it's just it's Jesse Rigle. So, J E S S E R W E I G E L. And let me um I had one problem. Uh so I really wanted to get you all a a link that you could go to to see all the updates. So, I started a dev branch that's going to be like the the cutting edge stuff, the latest stuff that we're doing for this site, and that is going to be updated at our server. I don't know if anybody remembers when we set up the load balancing, but we actually have three droplets running Node and React, and we were only load balancing between two. So, I never shut down that third droplet because I always thought it would come in handy for testing and today it has come in handy. So, that's the droplet that uh I can just give you the IP address for and you all can can check it out. Now, I did get it working, but um I just tried to update it and for some reason it quit working. Now, here's what I think happened. uh my session timed out when I uh was used uh logged into the server and I didn't use usually I use PM2 to start the server but I didn't even set it up I just started it you know with a just a regular command just npm run start and I never shut down the server so right now I can't start the new server because port 8080 is already in use so normally I would shut it down by pressing control C right that doesn't work Uh because at least I don't think it works. I can try I can double check, but I don't think that's going to work for me. Yeah. How do you shut down a node server from the command line? Uh if it's not actually like the process is not actually running in my command line right now, like I'm I can't see it. So, if anybody knows how to do that, let me know and then I can get this up and running and and you all can have a place where you can check out all the latest stuff without having to download this repository and run a local server. So, uh I'll figure it out eventually, but I just figured, you know, maybe somebody is uh really familiar with Node and just knows exactly what command I need. Oh, okay. Patrick did have um Patrick had a good comment. Uh he asked about the onchange event with materialize. So um okay, cool. So I've gotten the um the command. So let's go. Pseudo kill all node. Is that it? All right, we'll try that out. So, um anyway, yesterday we couldn't I I couldn't get this uh select thing to work. Uh, and I said that I would let you all know how I ended up getting it to work. So, let me let me do that now. All right, cool. So, that works. So, if you go to Let me find the IP for you. Um, I'll I'll paste this IP address in the live chat and it's the IP address is 162.243.86.67. Okay. And maybe if I can remember, I'll put it in the uh show description. Uh, so anyway, this will show the latest stuff. So, this will actually show you that this is working now. All right. So, the only thing this is the only thing that actually has a working category right now, I'm pretty sure. Oh, nothing else has been put into categories. Uh, but that is working. I'll show you how I got it working in a second. Also, um, for some reason, uh, these the borders on this top one just start coming and going. I haven't replaced the borders with uh HRs yet, so I need to do that. But I did get this working. Uh so I have this little toggle here. And this is just um changing the state uh within the component. So within the component, there's a display content set automatically to false. If it's false, it displays this. When you click it, it it sets the state to true and displays displays this. And this one, when you click it, it sets the state back to false. So, let me show you the code for how I got this working and then we'll get started on uh on what I actually described in the title in the description for this video. So within let's see material select that's what we have. So within material select what I've done is basically just gotten rid of all the materialized stuff. So I'm not initializing the materialized. I should give some background in case you weren't uh watching yesterday and you're not sure what I'm talking about. I'm using the materialized framework. It's a CSS framework. It uses some jQuery stuff and it changes the DOM. So, it's not ideal for React, but uh we've made it work so far. And this is the only time we've run into an issue where I just couldn't get it to work. I was spending way too much time yesterday uh getting it to work. I probably should have given up on it sooner. Uh but it just didn't even occur to me. uh during the stream until the very end. So what I did normally what materialize does is if you have a select input, it goes through all the options and then it creates new uh DOM so new elements and it creates a new ul and then each option becomes an LI within that ul. Uh so that all happens after you know with with jQuery. Uh so that's not really registered in React. Now that wasn't even the main issue. So that was one issue, but the main issue was that whenever we change that select input, that event wasn't registering uh for React. So when I tried to have this onchange uh handler do something, it wouldn't do anything. It didn't recognize the change. It would actually run. It was weird. It would run twice on render. That was because it would actually render once and run and then it would make an API call to populate all these options and then rerender and then it would run another time. But then when I actually tried to change the the select input to select one of these options, it wouldn't fire off an event. So that's that's an issue with materialize and and react. So I think the issue is probably on the side of materialize and how it's done. It's not I don't think it's a React issue from what I can understand. Um, there were some uh some pull requests to try to fix that, but I don't think that it seems like the maintainers of materialize uh don't see that as a bug. Uh, and they just recommended using the React Materialize uh framework, which is um an attempt to make materialize work with React and turn everything into React components. So, um, so I don't think there's any chance anytime soon of that being changed. So, just in case you're you're trying to use materialize as well, uh, you can either go the route that I did or you can try to use React Materialize instead or try to do some type of custom fix. But I'll show you, you know, basically what I did is now I'm using just a plain select input. I did do some extra styling. So I could make it fit in. So let me show you. I mean obviously this doesn't look like your default select input when you click it. This looks like browser default, right? Uh I can't really do much about this browser default and it'll look slightly different depending on the browser. Um but you know assuming I want to stick with the select input and not try to do something some type of custom list which I don't really want to do it right now. it would be okay, but it would be a lot of work, I think, for a slight improvement. And I'm running out of time uh to to work on this site. So, I just changed things so that it mimicked the look of this search box. Okay. So, and how I accomplished that was with all of this. It's really big uh mostly because of all these uh vendor prefixes which I think if you put things within the style JSX tag it actually auto prefixes for you. But I had copied this over from a previous project where I had figured out everything I need to do to style this in the materialized fashion. Uh so I didn't I didn't try to redo that. I just copied it over. So it's not hurting anything to have the vendor prefixes in there and it's working. So I'm not going to mess with it. Uh, and then I just needed to add in this this part at the bottom. Let me bring make this a bit bigger. I think this is a bit smaller than I normally have it. So, I had to add in this. The reason I couldn't put it right here in the style JSX tag was because of this. So, it thought I was trying to incorrectly escape something within this string because of the slash. So, it wouldn't work. So if you try to use content and then you know one of these uh this basically makes that that little tri upside down triangle they call it a carrot. Uh that's the little code to make that. So if you're trying to do something like that it won't work in style of JSX. So this code is all on GitHub. Uh you can check it out under the dev branch. Uh, so if you want to kind of look into how I did this, uh, like I said, it's not really a lot. It just looks like a lot because of vendor prefixes and a lot of it is just trying to override browser default things. All right, so that's pretty much it. I'm going to check the live stream now. Uh, see if there's any questions about that before we get started. Okay, we have somebody carnage. I'm not sure how to pronounce the the name. K A R I E K A R N I E J Carnage. I don't know. Sorry about not knowing how to pronounce that, but anyway, says, "Hi everybody. I'm looking for a job, a React job." So, um I guess hopefully you you can pick up some React knowledge uh on this stream. If anything, you can probably pick up um uh some mistakes to avoid uh when you uh when you do this. My stream is really good at uh demonstrating the pitfalls and mistakes that can be made uh and sometimes even how to fix them. Uh but anyway, I'm not sure that anybody uh watching now or in the live chat is hiring, so I don't know that I can help you. But uh anyway, uh keep keep us updated on the job search. I'd love to to hear how it goes. Oh, okay. Uh the will uh Frank says, "Longtime viewer first." Hey, hey, how's it going? Uh thanks for saying hi. I realize there's probably a lot of people who watch who never speak in the live chat, which is totally cool. I'm I actually am usually pretty quiet in chats and things myself when I'm watching. So, I totally understand. And maybe you're just doing other things and not at a computer. Uh you're just like listening or watching. But, uh don't be shy. If if you can if you can say hi, that would be cool. Uh because I notice, you know, there's always the the analytic shows that there's always way more viewers than people talking in the live chat. And uh today we actually have fewer viewers than we've been having normally. So I don't know what happened. Uh maybe the topic is not great today. Um it's still a decent amount of viewers though. So, I think we have like 40 right now, which is I mean that's I'm always amazed that anybody wants to watch me code. So, uh for we have 43 now. Uh cool. Uh so, nice to see react. Hey, Fabian, how's it going? Evo says, "Hi, Jesse. Not James this time. Hey Evo, how's it going? Uh, yesterday Evo accidentally called me James in the chat, which was just fine. I didn't didn't bother me. Um, Bill says, "Hey, at work but listening in the background today." Awesome. Uh, that's that's cool. That's what I imagine that's probably a lot of people may be in the same situation, especially if they're in a similar time zone to where I'm at because this is the time when people are normally at work. Uh John said, "Is it not always the more simple coding that saves the day? all these things like React or Webpack other complex systems for me uh at least now is overkill. Yeah, I I agree to some extent that um all React, Webpack, all that stuff uh increases the complexity and increases the possibility for bugs. So if you don't need to use those things for what you're trying to accomplish, you you are probably better off not using them. uh but for a lot even you know if you're trying to learn them there's no reason not to do a small project with it because if if your purpose is not just to produce a product if your purpose is to learn then you know make something simple with react I I actually um a few weeks ago when I was on vacation I built the uh free code camp weather uh app if you all remember that challenge is kind of early on in free code camp uh challenges but I built that I rebuilt it in React. I had built it once um just with some jQuery. Uh and I did it just simply to get some practice and to learn. It definitely doesn't need to be built in React. But but anyway, to to speak to John's point, that definitely was the case this time. Uh with materialize, it was trying to do all this other stuff and beyond what a normal select input does. And you know, the select input that's been in HTML for for years and years worked fine for this use case. So, it was definitely the solution and better off. Hey, Zanna says, "Hi." Hey, how's it going? Glad you can watch. Uh Jordan asks, "How do you hook up WordPress with React?" Okay, cool. I'm going to show you today how we hook up WordPress with React. So, I'm not going to explain it right now because we're I I'll be able to show it to you. We're going to do it um during this this stream and I'll start that in just a minute. And I just wanted to say hi to everybody and uh you at the beginning of the live chat before I get uh get to the code. Uh Evo says, "John, if you have this many modules and stuff to keep track of, a tool like Webpack is a lifesaver. React is also really nice and I think that they will become even more prevalent." Yeah, that's true. Like um that's a good point, Evo. Like if your project is complex, it ends up helping to have things like React and Webpack. Like yesterday, I I showed you all that. I think it was yesterday. I showed you all that mess that was the the jQuery site that I had made, which basically did a lot of the same stuff that this site does, but I built it all with jQuery, and it was just a bunch of crazy spaghetti code, and it's really hard to maintain now. I I really can't wait until I have the time to rebuild that in React. Uh so in that case using something simpler than React which was I would argue that jQuery is probably simpler than React at least it's simpler to learn. Um but that ended up being worse as the project got more complex. So I think there ends there's a tipping point in the project of you know where uh some of these tools actually do end up helping Uh, Zanna asked, "Did you debug it?" Zanna, were you talking about the um the select input thing that was happening? So, I don't know, maybe you you might have joined in right after I explained it. So, sorry if you missed it, but basically, yeah, I did get it working and I just went with a normal select input. So, I I just got rid of the stuff that materialize was doing and just went with a normal select input. Everything worked fine and I just did some styling uh to make it look like it would it fit with the materialized styling. Uh all right. So I think I'm going to I'm going to scan through quickly the rest is here in the live chat and then I'm going to get started. Okay, Bill uh Bill said he watched the replays of the last two streams and at one point in yesterday's streams I accidentally showed his uh project instead of my project and uh he says it's cool though because it was on GitHub. It was open source. So yeah, sorry about that. I mean I'm I'm glad that it's cool and everything but I'll have to be more careful about doublechecking what I show. Um, I try to keep everything that shouldn't be shown on my other screens. Okay. So, uh, Theiago asks about the, uh, auto prefixing the CSS inside the JSX. Um, I'm not sure. I think the um I think if you use NextJS the auto prefixing everything comes built in. So I um I don't know. I I'd have to check it out. I just always assumed it was auto prefixing. I thought I saw that before in my code that it was all auto prefix, but now that I really think about it, I would have to double check to say 100% for sure. So, don't take my word for it without double-checking, but I'm pretty sure it does get auto prefixed as long as it's inside the style.j or the style JSX tags. Okay. Okay. So, Zanna did didn't hear the explanation beginning. So, I gave a slightly longer explanation and I showed the code. So, uh, Zana, if you if you get a chance later on, you can watch like the first 10 minutes of the stream or something, uh, the recording and get a a longer explanation. Okay. Oh, wait. So, Patrick sent a link. What's the link, Patrick? Uh, I'll check it out on my other screen. Oh, okay. That's weird. Okay, so this So, check this out. I'm probably not going to fix this right now. I'll do it later since I want to do something else on the stream. But Patrick just sent this. So, uh, what browser was that? That's it on Ubuntu with with Chrome. Oh, okay. Um, well, that's no good. So, I'll have to work on that. Did anybody if anybody else checked this out? Uh let me know if you're having anything similar happening. Uh obviously like Chrome on a Mac it looks like this. It works. Uh but on Ubuntu it looks like this. I mean, I really want it to work, but realistically, um, there's probably no actual, uh, user of this site who's like in the target audience that would be using Ubuntu. So, if that's the only place where this happens, I probably won't worry about it. Uh, just because I don't have a lot of time yet. So, I got to uh, worry about, you know, the other browsers more uh, browser um, operating system combinations more. Uh, but yeah, I'm going to have to take a look at that. Although, I really won't have a good way to test it because I don't I don't have um Ubuntu and I don't even think you can test that on browser stack. I'll have to check, but I don't think you can test it on Linux. Uh, let's see. Okay, Patrick just said the same thing. Um, that there's not a lot of site people going to the site with Linux. Okay, it's good to know though and I'm definitely going to check it out with some other combinations of operating systems and browsers devices to make sure that there's not similar errors happening elsewhere. Uh so thanks for sending that. So oh actually I did want to before I started I wanted to mention uh a little bit about the uh net neutrality thing that's happening. So, especially for for those in uh in the United States, uh right now there's like some the federal government has uh some stuff going on where basically it could end up being really bad for the internet. Like things could be blocked. Like, so I wanted to show some of you may have already seen this, but uh there's these videos that are they're really short. So, I think I'm just going to show this video quickly, this net neutrality video, which will be able to kind of explain things a lot better uh than I can. And let me try to bring this over. I think it's just only a few minutes. So, let me throw this on here. Yeah. Oh, it's not even It's 33 seconds. So, Okay. So, anyway, that was uh just really basic of what's happening. Uh so if you're um if you're interested in in just putting your name uh out there as being against this uh then you know check out the uh the URL which was battle forthenet.com. So, and today is like the official day, I think, where uh a lot of stuff is happening to raise awareness uh and kind of protest that possibility of uh the internet being, you know, way more regulated by companies and uh different than it than it is now and than it probably should be. All right, let's see. I just want to check the live chat really quick to see what other errors uh you all are getting. Okay, so Windows 10 and Chrome has the same issue. Uh so, oh okay, so Evo says Evo's found the error already, which is awesome. Thank you so much. You have a color value of inherit in the CSS rule button uh for input select area which comes from materialize. Oh, okay. All right. So, evidently there's something being uh being applied from materialize uh the materializ framework that's affecting that. So, oh, um, so I'll check that out. Okay, let me I'm going to post the link to the dev site again uh for uh for those of you that came in a little bit later. So I have um a third droplet now uh that's running the dev branch. Uh so I'll try to keep it updated with the latest dev stuff. So uh until I get approval for the changes uh from the people higher up than me. I'm not going to make them since they're really significant changes for for a lot of pages. I'm not I'm not just going to try to make them live on my own. I need to get some approval first. So, for now, they're going to exist only on this uh at this IP address. And uh Okay, cool. Uh EVO is uh going to open a GitHub issue with an explanation of what's going on with that select uh input. So, I'll definitely check that out. And um actually if anyone uh is kind of shaky with their JavaScript skills but is really good with their CSS uh that'll probably end up being a CSSon solution uh that might be good to contribute. So otherwise I mean I'm I'm sure it'll only take me a few minutes to figure it out. Uh but especially for new people who are trying to get some uh some more things on their GitHub profile, that might be uh kind of an easy thing uh to do. So enough of this. We're going to work on something totally different. Uh so I'm going to move this off the screen and I'm going to move this off the screen and what a a bunch of stuff off the screen. Uh I can keep this on the screen. Um also yesterday one more thing. Um just continuing from yesterday. Uh yesterday I had a pull request from Venet which um switched over to using Pact uh instead of React and it made things uh smaller. the bundle size uh for production was smaller, a lot smaller. So when I tried to use it on this test server, I was getting an error. I was saying R is not a function. Uh so I'm not sure what was going on. It worked fine locally, but when I tried to actually build it and run it, I was getting the error. So I ended up not uh merging that pull request. So I didn't accept it yet. I'm not saying I won't accept it, but I just need to get it working uh on the actual server first. So, um so I added I added that to um uh to the actual pull request. I added a comment about it. So if anybody has any ideas for that uh you know please you know comment there uh on that uh on that pull request uh on GitHub. Okay. So today what we're going to do let's start with WordPress first. So I'm going to do I'm going to start here in our WordPress plugin. So you've probably seen this before. Uh this is our WordPress plugin that we're using to make a bunch of custom post types. Uh so here's what we what we need to do. Here's the the kind of the end goal for the user. Uh the user needs to be able to uh click on a on a link that will be like the title of a of a PDF document. Right? So, in the about page, we're going to create something to display these links, some new section, but I don't want them to just link to PDF documents, right? Because that's that's no good for uh search engine optimization. I'm not really sure how screen readers handle that. So, I'd rather have these PDFs converted into HTML, but I also want the PDFs available to download. So, I'd like a user to be able to go to the about page, see a list of the titles of these PDFs, click on it. When they click, it opens up an entirely new page on a React site that has the contents of that PDF in HTML and then also has a button to be able to download the PDF. Uh, and I want that all to be editable from within WordPress. So, we're going to make a custom post type, uh, I guess, um, a PDF page post type, and it needs to have your normal title and content fields, which are there by default. But then we're going to add one custom field that's going to be uh, the URL of the PDF. And actually, we should pro we might want to do The title field should be good. I kind of thought maybe we might want to do a separate field for PDF title, but I think the title field should be enough that we could pull in to use for the link text. Uh so that should that's all we need to do on the WordPress side. And then we'll come in, we'll build the the page that that's going to be populated. We'll build out the uh section that needs to be in the about page. Uh and then we'll update our code in our server.js file uh to direct people uh to the right place uh and make the right API call uh to get that data. So let me copy. So I think you you I've done this before uh on a stream. So, I'm just going to copy this. Did I get the I don't know if I got the top part. So, I'll do that again. So, I'm going to copy this and paste it. Now, I'm just going to change all of these. And I want them to say instead, what did I say? What was it? PDF. PDF page. Yeah, I think that'll I think that'll uh be obvious uh to the people who are editing it uh what I what that is. Okay, so this is how it will display. These are all the display names that'll be like in the WordPress admin panel. And then these are the names uh that'll be in the code. So let's make this PDF All right. So, now I'm going to save that. Oops. Actually, I'm not going to save that. I'm going to copy this. Let me bring over my WordPress uh admin panel here. So, I need to log in. All right. All right. So, let me bring this over. And I need to upgrade to the newest version. So, I was just waiting to do a backup. So, I have uh one of my co-workers purchased uh a subscription for this backup plugin that we can use on an I think an unlimited amount of sites. So, I'm just waiting to get the info about how to install that. Uh cuz generally, you don't want to really do too many updates on a WordPress site without backing it up. I've done a lot of updates on small sites without backing up and I've never actually had anything happen, but it's a good practice uh to uh to do the backups if you can. So, you can manually you don't need a plugin. You can manually do the backups, but I don't have like PHP my admin installed or anything like that. So, I just I don't really feel like doing the backups from the command line. And I'm not even sure I have uh SSH access to this droplet. So, let's go. Actually, I I have no idea why I've keeping this so small. We'll make it a bit bigger and I'll increase the size so you all can see what's going on. Uh so, I'm going to go into plugins here and I'm going to find Did I pass it up? There we go. Uh, CI custom types. That's our plugin. And I'm going to edit. Now, if I did have I don't I don't really have any access uh to this server. Either FTP access or SSH. Uh, for some reason, the access isn't it isn't working. Uh, I didn't set this up. Someone else set it up. And so, I just never figured out what the issue was. So, this is why I'm updating the plugin like this. Normally, I wouldn't uh update like this. I would probably I don't know probably use FTP uh and just open the file directly in my editor. Uh but this works too. So all I've done is just copy and pasted the new stuff. I'm going to update it. Um also, I mean, normally it wouldn't be a great idea to update stuff on a live WordPress installation anyway. I'm pretty confident though since we we changed the minor thing uh that it should be fine. And since everything if if you mess up something in a plugin, you like very quickly realize that you mess it up in WordPress. Like you'll get this uh white I think it's like a white screen or something and uh you can't log into your site. So if that happens, you want to go in um with FTP or SSH, whatever you can, and just rename uh the plug-in folder of the plugin that you just changed is causing the problem. And then that'll let you get back at least into your site and have your site running again. Uh, and then you can revert to a previous version or whatever you change, you can revert it back and try to figure it out. Best thing to do would be to have a um a dev version of WordPress that you can test it out on first, which I did not have set up for this yet, but I may end up setting it up at some point. Uh so let's check out our PDF pages, right? So now we have our PDF pages. So you can see it's just like a normal WordPress post, right? Just basic stuff. We do want to add one field though. And for that I'm going to use a plugin. I'm not going to custom code that. So let's go down to our custom fields plugin. And we're going to add a new group. And we'll call this PDF page info. And I'm going to we're going to make sure that it shows it. It only applies when the post type is equal to PDF page. We're going to add a field. The field label is going to be um actually I was going to make it PDF URL but it should probably be an upload. So let me see file Okay. So, uh we will upload that. I kind of didn't want to at first because I wasn't sure I wanted to have all the PDFs hosted uh there on the site, but there'll probably be less uh room for error if the PDF just gets uploaded and I can pull the URL. Uh otherwise, it's going to be someone manually copying and pasting or typing out a URL. Uh, and then two things could happen that I could see. Either they mess up the URL and it doesn't work. Uh, or something happens to the place where that PDF is hosted. So, even if just a change in the file name occurred, then the link wouldn't work anymore or that server could be down or something. So, it probably is better if we just have the PDFs there uh within the WordPress. And uh it's a droplet on Digital Ocean. I could always upgrade the storage if I need to if things start to get crazy. I don't really anticipate that that much will get uploaded that I would need to to upgrade storage. So, this should probably I'm actually not I'm not going to require this because the way we're going to um display this. The way I want to display this is I want these pages to be justformational pages. So, it's not going to say right away that these are just PDF conversions. Uh the PDF is almost going to be like an afterthought. Like if you want the PDF version, here it is. Uh, so in case there's at some point down the road they want to just include some information in this page without actually include having a PDF version, I'm going to make this not required. And I want to return the file URL. And that should be it. Now we can let's see. I want to put this up high after the title uh so it's really obvious. Uh I do want to put this in the standard metab box. I think uh the seamless kind of looks a bit nicer but uh it's more familiar for users to put it in the standard box. Uh so what what I don't need here. Uh so I want to hide the permal link. I want to keep the content editor. So when we're only using WordPress for the API, we can hide a lot of things because they won't really work. Uh so we don't need the excerpts. We don't need the custom fields because this isn't talking about the custom field we just made. This would have been if we uh if we added custom fields through WordPress has kind of like a built-in way to do custom fields that's not nearly as userfriendly and powerful as as this plugin. We don't need discussion comments. Uh revisions could be helpful. Uh the slug is unnecessary. Authors unnecessary format. I'm going to hide featured image for now. Uh, I don't think we'll be including images, at least a featured image, and I'm not going to worry about categories or tags and no trackback. So, this is going to simplify the UI uh significantly. So, you'll see when we go back in, there'll be a lot less than there was originally. So, I'm going to publish that. And now, let's go back in. We'll add a new page. Okay. See, so here's our file input. Uh, so we can add a file. And actually, this PDF, I'm just going to put this PDF in just so that we have something. Uh, and let's add a title test page. And let's grab some Just some some text to throw in there. And I just grabbed some uh some bacon Ipsum uh which is a tastier version of Lauram Ipsum. We don't really need the sharing buttons, but it I didn't see an option to get rid of these, so I'm not worried about it now. It won't make a difference whether this is checked or not. Uh, but we can see, you know, really there's it's really simple for for people to to edit things in here. There's not much that can be done. So, I'm going to publish this. And that's all we need to do on the WordPress side of things. Uh so it should be um it should be enough for us just to have this one uh instance of it we um trying to think there's really only one spot where we would display more than one set of data and that's pro that's on the about page. Uh, so we may have to uh just hardcode in some some other examples just to see what it'll look like. Uh, but this should be fine for now. Uh, so that's it for the WordPress side of things. And we'll um we'll check out the WordPress API now just to make sure that we're getting the data. And as soon as you see the data, I'm gonna go I'm gonna check back in the live stream because that's kind of the end of part one of our little mini project here. Uh, so I want to check out the PDF pages. Whoops. Was it PDF page? There we go. PDF page. So here we go. So when we uh when we make an API call to get a PDF page, this is what we'll get back. We actually don't need all of this data. So we'll probably filter it down because we'll just need the content and uh we'll get the URL. Here we go. Here's our our PDF upload URL. Uh so that's pretty much all we need. uh in the title. All right. So, we have that and I can move this over. I don't think we'll need it anymore. Now, I'm going to go to live chat quickly. Next step is going to be uh editing our about page to give users somewhere to actually click uh to get to our new page that we're going to make. All right. So, I'm going to scroll up a bit in the live chat. See what I missed. Okay. Evo just added the GitHub issue. Thank you so much for that. Uh the issue about the the appearance of the select. Oh, okay. Uh Jeremy is bringing up there's a Slack channel uh now for for freecodeamp. It's FCC pairprogramming.slack.com. Anjar says FCC just keeps getting better every day. Awesome. I like that that comment. Okay. And it looks like uh Zanna has included some uh images of that select input as well uh from Ubuntu on Firefox and Chrome. Okay. So, looks like on Firefox it actually is working. Um I'll I'll put it on the screen quickly. So, it's working, but it's it's black in the background. So, this might be a little bit more challenging than I thought because um you know the e we need it to show up the text to show up as white when it's selected and we can't just simply make it black because it wouldn't show up in Firefox. So, I'll have to think that one through a bit more to make sure um that the text is readable. I'm trying to think. The last time I did this, it was on a white background so I didn't have the same issues. I mean, it's possible I could just change this so that it's not on a black background anymore if I can't find some way to make this uh work and then that would just solve the issues because we would have a dark colored font and it should work all the time because this this then would have a white background instead. So anyway, we'll see. Actually, what do you all think about this black bar anyway? So, I've gotten some feedback uh from co-workers, and the feedback so far was at first it was a little jarring, but it only took, you know, a minute or so to get used to it, and then it was it was okay. Uh so, not great feedback. I mean, I would rather have Wow, this looks amazing. Uh so, I'm not I'm still not sure about it myself now that I've been looking at it for so long. I'm used to it, but I just kind of I I didn't want them just all white, you know? I wanted something else here uh to kind of set these off, you know, these controls uh these filters off from the rest of the content. So, if anyone has any other ideas, let me know. Um and I'm I'm definitely open to uh some alternatives. I mean, I need to be careful. I can't spend too much on it. So, if it's at a point where it's good enough, I'll probably just have to leave it. Uh cuz we're running out of time. Uh so, I don't I don't really want to mess with it too much. But, a color change shouldn't be that big of a deal. Uh you know, if I really find a color that that I like, uh I'm open to spending the time to change it. Okay. Yeah. Yeah. And uh so in regard to the Slack channel, um yeah, I can't so a few people are saying they couldn't get into the Slack channel. They need an invitation or something. I had the same issue. Uh I couldn't get into the Slack channel either. Um let me I think I still have it up on my screen somewhere. At least I did. I have way too many windows open. I'm not sure. Here it is. Can I find it? Yeah. So, this is what I'm getting. Sign into FCC pair programming. And when I try to sign in, I can't. Uh, so it says contact the team administrator. And I'm not sure who the team administrator is or what their contact information is. So, has anybody been able to get in? If so, how Okay, Zanna says, "Uh, all that is a bit unintuitive. Can you just use categories instead?" I'm not sure. I'm trying to look at the time stamp for that. Um, was that in regard to uh to this bar here? Evo says, "I don't really like that people are now using Slack as a new generation of email. Maybe I'm just stubborn or getting old. It says I'm 20, but I just can't really get used to it. So, I'm not sure that that 20 uh is old. Uh I guess if you're a kid, 20 is old, but um yeah, I'm I like Slack, but I'm not sure that Slack is a an actual email alternative. I use Slack for different things that I would never normally send an email for. So, uh I know there are people saying like Slack's gonna kill email, like email's dead. I don't buy that. Email's probably going to be around for a long time because everybody's used to it and it works. Uh but Slack is really cool for what it does. And uh so I like I like that. Like if I want to send a quick message to somebody that would be a waste of time to send in an email, Slack is really great for that. Okay. So, I'm getting some feedback about that section. Um maybe change it from black to the like the red color. Uh, and then that may that may look better. Okay. Um, Zanna says, uh, maybe like just leave it leave it white, but add like a border, a thin border at the bottom and the top. Uh or or even like John said to make it make it that red color. Okay, I'll have to try that out. Oh, okay. I see what uh Zen, I see what you're trying to say here. Uh so, and let me let me try to explain what I think you're saying. You can let me know if I got it right here. Um, so instead of having the word all right here, which doesn't really say much, uh, have it say like categories or something and that would that would make more sense. I did originally have it saying choose a category. Uh, but I got an error. So basically I had to like add in manually that the the word selected into that um into that element into that option and then React gave me a warning. It wasn't really an error message. It gave me a warning saying not to do that. I don't know why I shouldn't do that. Uh but I could definitely change that back so that uh category is the first thing actually that would make sense. I it it would definitely work if I would just say choose a category is the first thing that people see. It's not going to be disabled. The problem right now is it's disabled and grayed out a little bit. I'll just make it have the same value as all and then that way it'll show everything. Uh if someone happens to click on it again, who cares? it'll still show everything or they would just naturally click on all. Okay. Yeah, I think I'll do that. I think I might actually do that right now since it's such a small change. It would be better just to do it. I mean, I have it open already. Uh, so let me I do want to double check. Where did I put my I lost my terminal. I just wanted to check to see if I had anything that was not committed. Here it is. Okay. So, it's clean. Uh, and I obviously I'm going to start doing a lot of stuff directly on the dev branch and just kind of merging in all the different branches that I've been working on uh into dev like as they start to get closer to being done. Uh, so I'll take out disabled and I'll put in a value zero and then that should automatically make it the first option. So, I saved it. It didn't auto refresh. There we go. So, that works better. You can click all here. I actually want to make sure this works. If I click choose a category, it still works as all. Okay. So, does that look better? Okay, Patrick says we got some uh Patrick suggested saying all categories. John said categories. Yeah, I I think any of that work. I probably I'm just going to keep this just uh so that I don't spend any more time on it. Uh but anyway, uh yeah, I'm glad that uh that you all brought that up because Okay, Patrick likes what I ended up with. I'm glad that you brought that up because um I it was something I had thought of earlier and I thought the same thing that it would be weird and then I just kind of gotten used to it and and just kind of forgot about it and uh I never like I never wrote it down. Usually I make uh a little note in Trello when I think something like that, but for some reason I didn't. And uh so just kind of forgot. So it's really good to have all these people looking at it, you know, all of you looking at it and you know, just in general on a project, it's great to have other people look at it because when you're building it, you just get used to certain things and take for granted that people are going to understand it. So it's really like I mean it doesn't really matter how good you are as a developer. I think that's it's just like a natural thing is that you can't look at it with fresh eyes like like a user would a new user uh because you've been looking at it for so long. I mean maybe if you waited a year and then looked at it again and you've forgotten it you know that would be the only only way but I mean who has time to wait that long. Okay so that looks a lot better now. Let me uh commit that. I'd hate to commit uh make a commit for such a small change, but the other changes we're going to be doing are so unrelated that uh I'd rather just just do it. So, so uh we're going to commit. We're going to get commit and then we're going to use uh the flag am. So, uh this will add the file and make the message at the same time so we don't separate it into two steps. And let's see. Uh just going to change default option for resource category select. Okay, that works. Probably what's going to happen is I'm going to change that uh at some point. So, if I end up using a select somewhere else in the site, uh I'll probably make this option uh be like a prop that you could pass in the text for this option. Um I think that's the only thing that would have to change. everything else could stay the same and it would work. Possibly like some of the colors could end up being uh options that get passed in. Uh but that would really be it. Then then it would make this component like fully reusable and it's possible. Or am I using? Okay. So, I'm not really using any colors here. So, this could stay and that would Oh, yeah. I am. I'm using this color. So, potentially I could just pull this and include it here. Uh, so that the color could actually be a prop as well. So, I'm not going to do it now. Uh, but if I do end up using this again, I'll I'll pull that in and uh then it will be reusable. All right. So, we need to bring up the about page because that's what we're going to be working on. And let me go back. I want to check the live chat just really quick. Um, let's see. Alberto says, "I wish I could open source this HR portal page." So, is that Alberto? Are you is that what you're working on now? And you you're not allowed to open source it? That stinks. I I um I definitely prefer at least now definitely now that I'm doing streaming I I prefer to work on things that can be open sourced. Uh Patrick is bringing up uh the new stuff and npm 5.2.0 is npx. It's a new command that's really useful. Um, so you could do like npx create react app uh new app. It'll grab the latest uh create react app without polluting the global node. That's cool. Yeah, I saw some stuff on Twitter about it. Uh, but I didn't really uh read into it anymore. So uh the people on Twitter seem to think it was really really useful. So I have to check that out. Hey, Sebastian's here. How's it going? Yeah, Sebastian, pretty much all you missed, um, I kind of explained how I fixed the select input, uh, from yesterday, and I made a custom post type with a custom field in WordPress. So, we haven't really done too much with React yet, and we're about to jump into that right now. Okay. So, um, and Patrick just put a link in, uh, to a Medium article about NPX. So, um, if you can get to the live chat and check out the, uh, the link, um, then that should tell you a bit more about it. I'm not even going to attempt to read out the link because it's super long. All right, so we're on the about page. First thing, let's just look at it and figure out where we're going to put this thing. So, here's our about page now. So, let's see. All right. So, this will definitely can stay down at the bottom. This is the least important section. Um, I'm not sure. I'm thinking probably we could probably put a new section here and that would make sense just visually it would break up this kind of double white space section. Uh since most you know we we're breaking it up everywhere else. Uh so probably another red section. So, I'm thinking make maybe another another red section in between here. Um, I'll probably give it a title that just says more information for now. Uh, and then if um if it needs to change, then it can change. It's not really a big deal. So, that section will say more information and then it can have It's I mean it's really just going to have lists of links. I don't think there's that many links right now. I think it's like at most six or seven, but it could potentially be more. Uh so I would like to think of a way that it won't get too cluttered up if there's more. Um, I'll think about it. Let's just start to throw in some code now and then, uh, see how it looks and then think about. Right now, I'm thinking maybe just like two columns of links and I'll they're they're going to be autopop populated from an API call. So, I'll just have to figure out some way to distribute them between the two rows evenly. And then hopefully the list I mean if the list ends up being like a 100 links, it's going to be a super long section. I'm okay with that, I guess, because like I said, I think the collaborator section is probably not really that helpful to users. So, um, not really not really a big deal. All right, so let's go back. And unfortunately, this is super long because I haven't transferred any of this stuff over to being pulled from the WordPress API. So, it's it's all just hardcoded in here. Uh, but what I want to do is grab the red section that we're already using. And I'll just copy and paste that down here. And then that way we don't have to waste time typing in code that we've already typed in. So, this is our collaborator section. That's the start of it. So, we want to pop this in right here. And so we actually we need to put in this new section here. So let's see where if you like container put in another row here and we'll call let's say this um I don't remember what I originally was going to call this. I'm just going to put it information there for now. Uh we don't want this flourish white because actually I never ended up building Yeah, I think I don't think this is doing anything right now. This was supposed to do something a long time ago and I guess I never removed it. Uh that was one of the things that just got pushed to the side uh as not really necessary to get done before we launched. Okay, so we'll have that and we're going to want two columns. Uh let's get rid of all this. we don't need it. And S12 is fine, but we want to make this M6. And that'll give us our two columns. And inside here, we want to have UL and then LI. Oops. And we're going to have an a href. Oops. Okay. So, I just want to fill this in a bit to give us an idea of what we're uh what it's going to look like. Okay. So, let's see. Okay. Not great. Doesn't look great right now. Uh, let's see. So, obviously we want to change it. I'll probably make these I think it'll look a lot better if they're both center aligned. Obviously, the the color is going to change to be white. You could probably do with making the the font size for the links a bit bigger and maybe like some more space between the list items since they're going to be things that people are going to want to click on. I want to make sure there's enough space uh especially so on mobile people don't accidentally click, you know, um users with big thumbs uh have trouble hitting uh target. So uh I think you usually want to have at least 48 p. Yeah. So that's only 20 pixels tall. The the click target for that is only 20 pixels. So the LI itself is even only 25 pixels tall. So, we definitely want to make those bigger. Increasing the font size will help, too. But then maybe we'll increase the line height. Uh, so I want to at least hit like 40 pixels, and that should be decent uh for for people even with with larger thumbs. Okay, so hopefully I can remember all that. So, new color, center it, increase the font size, and then we'll check it out. Let's see. I think I'm just going to give this a class, this section of class of PDF. um links. All right. And now that we have that as PDF links, uh then we can target this down in our style uh JSX uh section here. And let's go with make I want to make sure I override anything that materializ is doing. So otherwise I guess I wouldn't normally need to be that specific but uh I don't want to mess around. Uh that should be specific enough there. That'll work. So, we want to give it a color of white. And let's do a font size of let's try 22 and see how that looks. Uh, we also want we want to center it. So, we want to center that within the columns. Actually, we don't I'm not going to put that down here because we already have a class for that. I think this will work. Uh, if we do, if I just put on this row, this might work. Um, does it align center? It's just center. I think it is. Sorry, I'm trying to remember what the materialized classes for this. I think it's just center. So, let's see how that did. All right, cool. It did everything. So, uh, here we have it. Um, here's all our links. We did get a little bit bigger here, but I think it's still not big enough for our target. Yeah. So, it's still only 25 pixels. So, um I don't know that I want to go any bigger with the font size. Uh so, maybe we'll just add some padding to these links. And then maybe uh little margin. We'll see. Uh so down here, let's give it some padding and let's get let's give it eight pixels all around. And then between these li normally I would flip the order of this. I don't know. It just bothers me, but I guess it'll be okay for now. Um, let's give it a margin of Let's see. Let's go. I don't want a huge margin, so let's go four pixels and then zero on the sides there. So uh this when you only have two the first number uh it first unit is the top and bottom margin and the second one is the left and right margin. Oh no, what did I do? I messed something up. Let me just try to give it a refresh. Maybe that's all that Yeah, there we go. Uh so remember that when something weird happens, just refresh before you panic. All right. So now we we have a um uh an area that we can click on of let's see what is it like 40. What was that 40? It's actually 41 but we're a little bit. It's actually not exactly how I wanted it. So, let's mess around in DevTools here for a little bit and see see what we want. So, I want to increase this a bit and we'll see. So, this is our A tag and these are li and what was happening. Let me try to exaggerate this so we can really see what's going on. So, let's make this spacing bigger. Okay, that's actually a bit better. Um, there's like some overlap where the click target was seemed like it was down here in the spot. So, that's too much spacing, but I might go with like eight pixels. and see we can I don't know if you can tell that I'll try to zoom in. So what's happening is uh the click area is kind of bleeding over into uh the area of the margin. So, I might get rid of the margins on the li and just put it directly on the A tags and see how that is. Uh because otherwise I don't want there to be I'd rather have there be a slight gap uh of the the click targets. So, let's just pull this And for now, I'll just get rid of that. Okay. So, I want to see how this working. And that's what I thought would happen. There we go. Um, so initially what what had happened is it wasn't working because uh of the way it was displayed. Now it's definitely working. I switch to display block. Now that's too much. So might not even need a margin. Oh, actually no. I definitely don't want it to display block because then it's going to go across. So let's take that out. And no, that's not going to change it. All right, I'm not going to mess with this uh anymore. It works. I just like maybe I'll actually test it on a phone just to see. Maybe I'm worrying over nothing uh and it would be fine to click. Uh I think this is too much space between the list and uh the heading here. So, I'm going to remove some of that space. Um other than that, it looks weird because these titles are really small, but the titles are definitely going to be bigger. Everything on this project has huge titles. So, uh I'm more worried about having not enough space for the titles and them wrapping uh onto another line. Okay. Uh so, we'll just leave this kind of as is and then get rid of this space and then we'll be done with that for now. And uh we'll um we'll work on the page. Uh, and then obviously we're going to want to pull this in this data in through the API. Uh, for now though, I want to just get all the pieces working before adding that extra complexity of uh, pulling in the data. Okay. So, let me remove this margin for now. We'll just keep the padding. Let's actually let me I want to see what's causing this space. All right. So, it looks like we do have a margin on the bottom of that div, but we also have a margin on the H tag. I'll try getting rid of the um well, we have a margin on the UL. So, we have uh quite a few margins going on here. Uh if I get rid of the margin on the H2 and on the div, that should be enough. I'd rather do that than uh come than mess with the ul. All right. So, I'm going to do some inline uh styles now. And uh in React, you can um you do inline styles as JavaScript objects. So the first bracket uh you're in JavaScript and then the second bracket make put you in an object. Uh so we're going to go margin bottom. We're going to camelc case it say zero. And then I'm just going to copy that and paste it on this H2 as well. And let's see. And that did not Let me refresh. Okay, let me restart my server. And since I'm restarting it, this would be a good time to check in with the live chat. Okay. So, uh John has says, "Uh, how about instead of a new section to break up the white space, you just add a thin red bar above collaborators on the about page? Uh, minimalistic and the page content seems filled up enough." Okay. I mean, I I obviously didn't see that uh before. I already did this. So, um I'm going to keep I'll probably keep this section the same because I I already just made it. Uh but I actually kind of like that idea and I'm going to keep that in mind uh for if I need to add other sections because I don't like being tied into like always having to break things up in the same way. Uh John. Uh so we have two John's. So the first John I just talked about was John B. Uh the next one, this is John John Hansen says, uh the API data uh I'm guessing JSON. Yes, it's JSON. Is this type of file difficult to gzip from the server? The project I built went live, but all testing shows JSON only file type, not compressed. Um hm. I don't I actually don't have uh experience with that. Uh can you can you gzip JSON files uh from the server? I don't I don't know. Does anybody have any um experience with that? All right, Zanna, thanks for answering the uh the question about the editor. Patrick said Patrick said that uh he says Jesse likes this question uh when he gets this question we are getting dangerously far we were getting dangerously far into the stream without someone asking which would break the streak of every stream. So thanks yes thanks for asking that. I I don't I honestly don't know if it's been asked every stream. I'd have to go back and and watch them, which I probably won't do because uh as is the case, I think with most people, the sound of my own voice just sounds really weird. So, I usually don't watch my streams uh often. Occasionally, I'll watch just to see if I can like improve things. Um sometimes I watch to see if I'm saying filler words a lot like um and and things, which I do. and I try to work on uh but it's been a streak of enough episodes that I think we have an official streak going. So, we'll just we'll just try to keep it going. Wow, we are an hour in already. Crazy. Actually, even more than an hour in. When did I start? I started at two, huh? Okay. Um, John Hansen says, "Uh, is it not 44 pixel height and the width minimum for for button links? Are there a reason for using pixels over EM through a website?" I'm not really sure why you would want to use em or pixels. I'm just used to pixels. So, uh, I can guess I can usually visualize how many pixels a thing will be on the screen because I'm used to pixels. I'm not good at visualizing at all what EM would be. So, that's why I use pixels. The only other unit I ever use are VH and VW. That's also easy to visualize because it's just a percentage of the screen. Uh, but I'm sure it's probably whatever you're used to would be what you end up using, unless there's some other other reason why you would want to use a different unit. Uh, Anjar says using um or EM is a good practice. So, yeah, I'm just I see a lot of people using it. I'm just not sure why uh what the benefit is to using it. So, if anybody knows, I'd be open to um uh to hearing about the benefit to using that. I don't really know that I would switch at this point since I'm so used to using pixel. The benefit would have to be really big for me to try to switch right now since I'm I've gotten really good at just being able to visualize uh things in in pixels. So, um I would need a really good reason to switch from it. Oh, someone's name in the live chat is inside the Matrix. That's awesome. Uh great name. I used to be a huge Matrix fan like back, you know, when the first Matrix came out. Oh, no way. All right. So, Bill says there's an app called like so that you can start when you do a stream that will help analyze use of filler words. I'm going to have to look that up cuz I listened really early on in one of my first streams. I listened through the whole thing and I couldn't stand it. I used the word um so often it drove me nuts. And then on the next stream I apologize profusely to everyone for making them sit through all of that. So I really made an effort afterwards to stop that, but I think I'm slipping back into it, especially on days like this where I'm pretty tired and I'm mostly focusing on on the code. Uh, so once I get started and I'm talking about something, it's usually better, but when I'm trying to code and talk at the same time or read things off of the live chat, I do say um, a lot. I guess that's normal, but I'd still like to to quit doing it if I could. John B says, "I was so upset they didn't name the sequels The Matrices." So, the sequels to the Matrix. So, I like that one. Jeremy says, "I don't even notice filler words, my dude." So cool. Yeah, I actually read a study where they said that so some people tried to stop using filler words by talking more slowly and pausing instead of using filler words. But they did a study where people were more I don't want to say how did it go. Basically, people had a much more negative view of speakers who took long pauses than of speakers who use filler words. So, if it's a choice between pausing and filler words, you're better off using filler words. So, I guess I don't know. I guess it could be worse uh than using filler words. All right. So, let me get back to this. So this is for now good enough so that we can click on it and make sure it goes to the right place which is all I really am going for for now. So now the next step is going to be let me commit this first. And where we at? Okay. It's weird how this keeps doing it. Every time the hot module reloading happens, it doesn't load all the styles. That's so weird. All right. So, now let's go back to the code. We're going to have to make a new page in Nex.js. And I want to use one of these pages as a head start. So I think these pages are pretty much the same. Let's see. Single event, single news. The news page is probably what I want. Yeah, this page has some extra stuff that I don't want to have to change that. So, the news page I think is more basic. I'm pulling in I am pulling in some stuff that I didn't add like the SEO description, which I don't even think I I ended up making that tag. So, I think we're fine. I'll copy this page and we'll use that to make our new page here. So, we're going to call this PDF page.js. No, actually, okay. It shouldn't matter what the name of the page is now that I think about it. And maybe it will. I got to check out my server file for a second. Hold on. Okay. So, all right. What I'm want to check is what this goes down to. So, let me check out our events page real quick. I just want to I'm worried about what's going to show up in the URL. So, I can't remember how this shows up. Okay, so this does show up as events. Okay. Oh, okay. I see where I put it. So, I uh So, I can put whatever I want right there. So, it doesn't even really matter what's here. Okay, that works. Um, let me Where was I at? Oh, it's right here. uh PDF. I guess I'll hyphenated since I was already hyphenating stuff, but now that I think about it, it doesn't I don't know that it makes much sense. I probably should have been camelc casing this. I think the only reason I hyphenated it was because I'm in the pages folder and normally whatever the titles here in the pages end up being URLs and in URLs you're more likely to see hyphens and not obviously not camelc case. So PDF pages or I should say PDF page it's going to be a single page. So PDF page.js. Okay. So now we have our PDF page and I can paste in all of this stuff. And let me make sure that I really need this. So I don't want posts. What I want our PDF, what was that PDF page? We brought this over, didn't we? I think I maybe I I must have moved it over again. I couldn't remember. I think it's just PDF page uh is what we put in the the API call. So, we're going to filter by our ID, which is actually going to end up being the slug. Uh, we're not going to need So, this is where I filter out what we actually need. I don't need taxonomies. I need content. I don't need the excerpt. Uh, I'm going to keep it the ID and I'll actually I don't know if that I even need the ID. I don't need tags or categories. We're not going to have an image, any featured media. All right. So, that's all we need. This will cut out a lot of the other stuff. Now, I need to make sure that I get rid of those things. down here if I was using them. So, this works. Uh, we don't want Let's see. Want the information. This description tag. Obviously, we're not getting anything from the description tag. because we're not pulling that in. So, I guess I can take it out for now. Just make things more simple. I might put it in later on. And we're going to pass in We don't need that. All right, we got our error page if we need it. Got our sticky nav. We're going to We're not going to have an image for now. We're not going to have an image. Uh, but we might add an image and just have the same image for all the info pages. For now, I think it'll be fine. We'll just put in just kind of like a normal title. So, let's just do an H1 and do I think what we'll have to set it as we'll need to use dangerously set uh in HTML because it's it's possible that. All right. Sorry. I just stopped in the middle of a thought. Uh, so basically, it's possible that there could be characters that wouldn't show up properly if we just put this props title rendered inside the tag. So that's why we do dangerously set in HTML because sometimes there's special characters that don't render properly. I wonder if I can just close this. We'll try it out. Um, we'll see how that looks. I might have to put that in its own row to make it show up uh better, but should work there. And let's drop state to zero. I guess I have to put zero in here. Oh, okay. We're getting the data. I should probably use dstructuring to get rid of all this, but I'm not I'm not worried about it right now. There's not really a lot going on. Okay, that's good for now. This will give us enough to see. Obviously, we're going to have to do something with the URL and have some sort of button uh to download the PDF, but for now, this will be enough to be able to see what's going on. So, now we need to go to the server uh.js file. And I'm just going to copy and paste what's already being used here for single news. And we'll change it out and say we'll just call that info. I think it should be fine. Uh I don't it's easy to change later on if I need to. as long as I don't think that too many people have linked to it. Actually, I'm a bit worried that uh they might think info is too informal. It's kind of kind of a pretty formal uh type of thing uh type of organization that this site's being made for. I don't want to put information because it would just make it unnecessarily long. So, how about I just put I? That'll be fine. I mean, YouTube just has a C in their custom URLs for channels, so I think that's fine. I could put a P for PDF, but like I said, I I don't want it to be thought that this page is, you know, just a transition of a PDF. I want the PDF to be thought of as the secondary thing. The original plan, well that I was told is that it was just going to be a bunch of links to PDFs, but that's not really a good thing to do on on the web. Uh it's it's hard. You can't search through that content. Uh search engines can't see it. Uh at least all the content within. So uh so I I argued passionately against that idea. Uh and so this is this is what was agreed upon. Uh so we need to make this our PDF page params ID. Okay. So this is going to pass the name. So, we just need to make sure when we make our links, the name, the slug for that post is what comes after this in the uh well, after this in the URL. So, this ID part needs to be the slug when we format uh our URLs for the about page. And then everything should work. All right. All right. So, I'm going to save that and I'm going to make sure that I save this as well. Now, since we changed the server, I need to restart it. And I just need to make sure of the the slug. So, I don't know where I put my I'm just going to go over to my WordPress. installation here. Oh, here we go. I finally found my data. Here's the data I was looking for before. So, I just need the slug. Uh, this is test page. And I don't know that I was pulling in the slug. No, I wasn't. So, I need to make sure. Oh, I don't need to pull it in here. Never mind. I don't know what I was thinking. So, what I need to do is use test page as our URL. That's it. So, I should be able to go in here now and type in I slash test page and that that happened. But what is going on? Oh, okay. I see. Uh when I copied this page, this news page, I hadn't copied over Oh, shoot. What was it? Um I need the sidenav actually. That's really weird. It shouldn't be like that, right? So within nav, that should be taking care of that. Uh it should should take care of the global init sidenav. So I just want to make sure server is fine. It's working fine. The PDF page I'm importing. Looks like I'm I'm not bringing in the nav. Okay. Okay. So, I'm bringing in layout. Within layout, nav should be brought in. That That's odd. Am I trying to admit the side nav somewhere else? No, this is love page you. All right. So, I shouldn't have to do this, but I think I I'm just going to do it to see if this gets rid of the problem. I mean, maybe there's something that's going on because it's a parameterized route that I don't know. Who knows? But if this fixes it and that's all I have to do, then I'm happy about that. No, it didn't. All right. So that's really odd. Actually, I want to check out and see see if this is working. Oh, I know. I want to compare I want to compare this to our our file. for single events, right? Because the single events used to be the same as the single news and this actually is working. So, let's see what's different between these ones. I'm going to get rid of that that I added to the top. So, we have components Okay, this is interesting. So in the single event, I'm not using the layout component. So I mean that's a really big difference. Wow. For the single event, this is this is kind of the old way uh before he switched over to doing things like this. I'd hate to switch back to this just to make it work. But if I can't figure out what's going on, then maybe I'll have to. All right, I'm going to check the live chat uh just to see. So, basically, everything is pretty much working like we wanted to. We're getting it kind of an error unrelated to what the goal was. uh having to do with the uh init function for the sidenav. Okay. So, but at least at this point we've successfully had you know you can see the flash quickly of the content. Well, let me let me restart this dev server uh so we can see it. So you can quickly see the flash of content that comes up and it is the content for the page, right? So it says test page. It has our Laura Mipsum. So that's working. So I guess it's it's mission accomplished kind of uh for what we wanted to do. Uh now I just need to figure this out. So, I'm going to go back in the live chat and see if you all have given me any ideas about the problem or if there's any questions that I can answer now. Uh, since this is now already 2 hours in, it might be a good time to just, you know, answer some questions and and finish up since uh since I've accomplished what I wanted to uh for this stream. And then I'll just fix this before I leave today or tomorrow morning. Oh, okay. Uh, so we were having a discussion about fonts. uh the units for fonts. So, pixels versus uh em uh and Zanna says the idea is if you ever want to change your font size, you just change it once and all uh em will adjust. You use I don't anybody did you say em or do you say m? I'm not really sure I've ever heard it pronounced, so I don't know. Let me know. Okay. So, basically the pixels are won't won't respond. Uh so, it's just much easier to scale your fonts up or down. Okay. Okay, cool. Uh, thanks. Zanna sent me a link from CSS tricks. Uh, so thanks. Thanks for sending that. It has more information about uh the whole font uh units. uh discussion. So anyway, that's cool. I mean, that's pretty legit reason for using it. So, like I said before, not sure that I'll switch right away. Might be more of a gradual thing, but that's pretty decent decent reason. I'll just have to get an idea of like what what pixel size compares uh to the you know thems or em Okay, Ombberto says at least from what I understand uh and the the them unit is compound the compounded scale of the font. So if you have styles nested, it will keep scaling to the most recently scaled size. Then Zanna says, "So pixels at the root, RM for components, and then uh uh em for text." Okay, I'll definitely have to learn some more and give this some more thought before I start implementing it. But it definitely seems like there's some advantages to it. Well, okay. Ombberto says, "The DevTips YouTube channel has a good explanation." So, actually, yeah, I'll have to watch that. I really like the DevTips channel. So, if anyone wants some uh a good resource for learning like CSS and some more design related stuff, check out the DevTips channel. Uh the the guy who does that, he doesn't do many videos anymore. He got a job at Google and is just really busy. So, I haven't seen very many video videos from him lately, but his old videos are still really good and and pretty relevant. It's not like CSS changes that often, and a lot of what he does is mostly CSS, so uh I think they're still useful and uh he's he's pretty entertaining, too. Uh easy to to listen to. Travis, that's his name. I'm pretty sure the guy from Dev Tips is his name is Travis. Okay, Zanna says there's this whole debate over the pixel. Okay. So, so maybe I've I've stepped in here into some some turbulent waters here with uh with this debate. So, I'll have to I definitely won't have time to study up on this right now because I got to get this site done. But, uh that'll be on the list. I may have time to watch the the dev tips video though because I could do that while I'm doing other things. Multitask a bit. All right, we had another question about the code editor. Thank you, Zanna, for answering the question again. Uh John Hansen says, "Enter HTML. Found found that out the hard way. Those are the special characters." Yeah. So, uh that was back when we were I was referencing using uh dangerously set inner HTML for stuff. Um so like for the title and uh for the content here. So, it sounds like you shouldn't use it. And I think I'm pretty sure at some point on a stream or something, I had someone who was like a little bit upset that I was using this. But my thinking is, well, number one, like, what else are you going to do? like this this comes through and there's special characters and it it gives you like the character codes instead of the actual characters and it's it's unreadable. You can't uh you can't have that. Uh also, as long as you control what data is coming in here, which which I do, then there's no reason not to use that. You wouldn't just pull in random data from somewhere like you'd never want to pull in data that a user could enter um you know just some random user could enter uh because maybe it would be could do some malicious type of stuff with JavaScript. But in this case, you know, this is the proper way to do it. It just happens to be named this crazy name dangerously set in HTML just to warn people. Uh, but if you know what you're doing, then there's no reason not to use it. Oh, uh, Phillip uh, Philip B, don't worry about asking the question about the editor. That's it's like I I totally uh don't mind when people ask about the editor. It's just kind of like a running joke here because everybody asks about the editor. So, I've gotten so many questions about it. uh that we we started joking that we need to have like a chat bot and its job would would be just to say what what the editor is and like made with theme and plugins and stuff I'm using. So, uh but don't don't feel bad at all. Uh I know I used to think the same when I was kind of beginning and starting out that was what I wanted to know all the time. uh when I saw somebody's YouTube video, I was always too uh kind of too embarrassed and shy to ask in a YouTube comment. So, I always was like searching through the comments hoping that somebody else asked the question and then I'd be able to find out what the editor is. Uh so, I totally understand the desire uh to know what's going on with with other people's code editors. Okay. And then someone whose name starts with F and then there's a lot of numbers asks, "Anyone want to explain exactly what he's working on." So, um, I'll try to give a really, really fast summary of what I've been doing, but I've been streaming for over two hours now, so it's going to be tough to sum it all up, but basically, I made a custom post type in WordPress with a custom field, and then I exposed that data via the WordPress API. I then pulled that data into a React website that was also using Next.js. I used some custom routing in addition to the routing that's there by default for Nex.js JS uh to do what's called parameterized routing so that I could populate a like a template a ReactJS template based on the post slug in WordPress and do an API call to get the data from just that slug. Uh that way it doesn't matter you know how many uh pieces of data are in there will always be another page there. will always have a nice looking URL based on the the slug for that particular post. So that that actually wasn't bad. I I thought it would take me longer to explain it. So I'm not sure uh how how much of sense that made for such a quick explanation, but uh that's basically what was done. Along the way, we talked about some other things too, but in terms of code, that's what we did. Oh, actually I didn't notice it. Phillip, uh, so Philip, you just started coding yesterday. Uh, so, um, awesome. Welcome to coding. And I'm not sure if Philillip's in. I didn't see Philillip say say anything else. So, I hope I hope you didn't leave, Phillip, but if you're still here, uh, welcome to coding. And, uh, that's really cool that you're getting involved. So, right now, we're at a point in the stream where we we're kind of at an advanced level, but every time I start a new project, I'll start out with some basics. So, there's always going to be some basic things that even someone who's very new could probably benefit from. Uh so you know check out some of the videos like the titles of some previous live streams uh and you know if the title is something that interests you you know check it out. There's definitely some beginner level stuff in there. And uh definitely don't be afraid to ask any questions in the live chat or in the comments of the videos. You can even direct message me on Twitter. I'd be happy to, you know, give you some advice uh if you need it. John Hansen said, "I like how we see Jesse struggle. That's how it's done." So, I'm I'm glad you like see me struggle because that's what a lot of the stream is me struggling. Um, when I'm not on the stream, I don't have nearly as many issues. Uh, but believe it or not, I usually get a lot done and don't run into so many problems. For some reason, especially lately, the streams have been really difficult and I've just had these like errors and stuff pop up and things just not working out, which is fine. It probably makes the stream a bit more entertaining and more interactive because you are trying to help me fix it. If I just flew through everything and got it all done really quickly, it it I don't I don't think that would be as good for the stream. It might be better for my project, but not not great for the stream. Okay, so we got some uh commentary here on the pronunciation. So um Okay, so we have em, we have M. Zanis says M's. Sarah's heard it at M's. Hey Sarah, I'm not sure that I've seen you in the chat before. So, welcome Sarah. Okay, so maybe I'll say M's now. It seems like the the M's won out in the live chat. So, the the CSS unit that's spelled EM, I will pronounce M from now on. Oh, Evo asks about the uh format that the content comes through with the dangerously set in HTML property. So if you have content coming in that has HTML tags and you don't want those HTML tags to be displayed uh you know literally on the screen then you use dangerously set in HTML then the HTML gets evaluated like it should by the browser you know so uh all your tags will work properly so it'll it'll be viewed as actual HTML content instead of just a string inside the matrix say we should we should call it live coding with Jesse in the atom editor and then no more questions or just put some text in the corner. Evo says just put Yeah. Um yeah, I don't know. I don't mind the question. I think it's kind of fun. I I really I don't think I want to put it anywhere that I'm using Atom editor. I think it would be more fun to just see how many times people ask the question. I'm not annoyed by it yet. So, if I ever do get annoyed, maybe then I can have something in the on the screen. I already have something in the description for the for the video. So, it's it's there somewhere. You just have to read the description. Uh, Emma. So, sorry if I'm pronouncing that wrong. It's ema. So, let me know if I'm pronouncing it wrong. So, uh, AMA says, "Hello." Hey, I'm not sure I'm not sure if I've seen you in the chat before. So, welcome if this is your first time chatting. Okay, so Emo wanted to know if the code editor does some sort of live preview or any kind of preview. Uh, so by default, I don't think it it uses it does a preview. There's pro probably some sort of plugin that could do a preview. Uh so right now like I'm running a uh development server on my computer and it does it like reloads everything which you can't see it right now because I have this error message on the screen. Uh, so it's not it's not coming from the editor, but um if you uh if you really wanted an editor that could give you a live preview. Trying to think of which one would do that. Well, I know like there are some cloud editors that do that. Like Cloud9 is a cloud editor that does that. Trying to think desktop. I guess like Dreamweaver does that. I don't know that I would recommend using Dreamweaver, but but there may be there's a lot of plugins. I'm using Atom and uh there's a lot of plugins for it. So, I may be able to do that. Uh, Sabo. So, S Sabbo or So, Szabbo. I'm not sure how to pronounce that, but I'm going to say Zabo for now. So, if you're still doing this, I left the stream maybe two hours ago. Yeah, I am still doing this. So, sometimes the streams are quite long. Uh Sarah says, "I'm surprised you just don't post the editor and plugins uh used to make the video about it uh in the info." I do. I do. I have the editor. Uh I have a I'm pretty sure I have a link to the editor in the info. Uh I don't have the plugins, though. I showed all the plugins yesterday on the stream. I keep intending to make a like a recorded video for my own YouTube channel where I go through how I have Adam set up and I go through all the plugins and everything. I just haven't had time to do it yet. Okay. So, uh, the, uh, the person with lots of numbers in their name in the live chat asked, "Can you summarize this project for me?" Um, yeah, I'll try to do a quick summary. It's, uh, it's a React website that's built using Nex.js, which is kind of like a scaffolding tool for React. It comes built in with routing and serverside rendering. So, it's a React site that's pulling data from a WordPress site. The WordPress site has no like publicly visible face to it. It's just being used as a content management system so that users who have no uh coding skills can put in the data easily and then that data comes into the React site. It's displayed. It looks nice. It runs quickly. Uh that's pretty much it. I mean there's not really it's pretty straightforward. There's some other stuff involved like we're doing load balancing between two different node servers. Uh the WordPress installation is on a separate server. So there's some some extra stuff that's going on that may be a bit beyond like just a really a basic project, but that's pretty much it. Uh yeah, the stream will be available to watch. So, I had a question if the stream is available. So, it will be available to watch usually within a few minutes after I end the stream. Uh, you can watch the recording. Um, and I just saw that Patrick already answered that. So, thanks Patrick. Inside the matrix says you should make a counter in the corner for how many times it's asked uh for people asking about the the editor. That would be really cool. Oh, okay. So, um, so Emu's question about editors that have a built-in preview thing. Uh, so Sabo says, uh, Brackets has a built-in preview, uh, that works with Chrome, so a built-in plugin. And Sarah says Adam has one a plugin as well. So, uh, awesome. Thanks. Uh, thanks for that information. And that's definitely a better answer uh for AMA than than I had. Oh, and John Hansen says that Atom does have a built-in development preview. So, that's cool. I didn't realize that. Uh the Atom theme I'm using is called the STI theme. Uh it's set TI, the SETI theme. uh inside the matrix says I use the live server plugin in Atom and Visual Studio Code to see live preview. Okay, so that's uh I guess you can check out that plugin. So that's uh that's pretty much all for the live chat really. I think I did a good job of keeping up with everything. So, normally I go back through the live chat and answer questions, but since I kind of stopped at several points and answered questions, uh I don't think I need to go back. If I did miss your question, uh I I'm sorry about that. Uh you can put it in the comments for this video and I'll answer it uh later on or you can just direct message me on Twitter. My the link to my Twitter is in the description for the video. Uh, so I think I'm going to end because the stream has been going on for almost two and a half hours now. So, it's going to be a very long stream and I'll figure out what's going on with this and I'll let you all know tomorrow what the problem ended up being. And I think that's it. So, uh, if anybody has actually I got something else in the live chat. Let's see. Oh, inside the matrix says, "Sorry I couldn't help with the error. I'm not learned in in React uh or next yet." Oh, don't worry about it. Yeah, I'm like um I'll I'll figure it out. And uh you all help me so much. Don't ever worry about not being able to help with a problem cuz I've gotten so much help and so much great information from you all in the in the live chat and and so much encouragement, too. Uh so uh you all have been great. Actually I mentioned at the beginning of the the stream that I had submitted uh proposals for a talk to a bunch of conferences last night and you can if you check out uh a tweet I had like last night so it still should be up at the top in my Twitter. You can actually there's a link to see what the presentation is. But just to save you the trip, uh the the title of the the talk, I'm pretty sure I titled it something like how live coding changed my life or something like that. So, it's really cool. And basically, it's all because of you. It's not it's not actually the act of coding while talking. Uh it's it's all of you. It's the interaction I've had with you all and how encouraging you've been and helpful you've been and the community that's been built up. So, uh, that's really the amazing thing that I think is, uh, is just really, it's really unique, you know. It's something I've never had before. I usually work alone. Um, hey, see you later, Zanna. Zanna has to go, so I'm saying she said goodbye in the live chat. I'll see you hopefully tomorrow you can make it uh for the stream. Uh so anyway, that's I always kind of never really knew what I would talk about at a conference that I could talk about maybe better than other people. Uh but I think this is something because I've experienced this now in this community. So um so I finally have something that I think it's worth, you know, I could do a good job and and really uh you know, tell people something that's that's could be valuable. Um, I think I did apply to do a talk about next using Nex.js with an API and all kind of stuff and React. Uh, but I think there's a lot of other people that could give a talk like that too and probably better than me. So, I'd be happy to give that talk. It'd be more technical. Uh, but uh I suppose it wouldn't be quite as unique as what I could could talk about uh in terms of the you know the live coding. Yeah. Uh so Jana asked where is the talk at? So I don't really know. I I applied to some some talks in the United States. Uh one in uh in England and Oh no, I don't have the talk on my channel yet. So I haven't, you know, fully like uh thought out everything I would say. I definitely have a lot of what I would say, you know, kind of in my head. But if I get accepted to a conference to do it, then I probably, you know, I'll do it all. I was thinking I might even do like a practice as a live stream, you know, just kind of practice the talk and get feedback before I actually have to give it uh at a conference. So maybe I'll do that. So I don't know. I've never spoken at a conference at a tech conference before. And so we'll see. I might not get accepted at all, but I think I'll probably just keep applying, you know, as I see uh things come up. I'll just keep applying to uh or submitting talk ideas and maybe I'll get one. And uh maybe it would be cool. I actually think it would be really cool if I got to go somewhere that was like near where one of one of you uh lived and then could have like a meetup or something of um you know like free free code camp people or something. Uh that would be kind of fun. Uh, but I don't know. We'll see. I think there's a conference in Argentina that I'm going to apply to as well, but they want you to do like a threeminute video telling why you should be there. So, I need to make the video first. Um, think what else where else I applied. Some places in Florida, in the United States, I think a conference in New York, um, Tennessee, uh, Washington DC. So, kind of like all all different places, but uh anyway, uh I don't want to I don't want to just kind of go on and on with with uh talking. So, I'm going to wrap this up. If anybody has any advice for me in terms of uh trying to get accepted into conferences, that would be really awesome. Uh even if you just want to check out that link on Twitter to what I said to try to get in the conference. I mean, uh, if you if you have any advice, you know, for just kind of the way I presented my idea about how I could do it better, I'd really appreciate that. Uh, cuz I don't know. I think it'd be really cool to share that like what's going on here uh with our little community with with more people. I think it'd be really really helpful if like more people did did things like this. So, uh, anyway, guess that's it. That's all I got for today. I'll um I'll be back tomorrow uh 2:00 p.m. Eastern time. And um uh in until then uh have a great day. I'll see y'all tomorrow.