Working with NextJS, GraphQL and MaterialUI Part 2 (P5D21) - Live Coding with Jesse

Key Takeaways

hey everybody welcome to live coding with jesse sorry about the delay i was trying to get uh everything set up right something is making my fan uh run like really high and so i've been closing down windows and if i had more time i just would have restarted the computer completely but i didn't want it to affect the video quality because i'm noticing like the last day or two the fans been running uh pretty loudly and they'll be weird parts of the videos either recording or the streams where things just kind of slow down a little bit anyway i think it's working now let me know if there's something wrong with the quality and i'll do what i can to get that fixed all right so hey everyone see a lot of people in the live chat saying hello all right so here's the plan today we're gonna do pretty much what we did yesterday uh maybe we'll get into some different things but we're still gonna keep working on this this site and if you're just joining us for the first time or you haven't been around for a while this is working with react we're working with graphql nexjs uh we're using wordpress as uh headless cms um so we have a lot going on we're doing some transfer data from one database to another uh so we're gonna do a little bit of you know whatever we need to do today to get things moving so i had a meeting this morning and i kind of reported on our progress for the site and i think most of people were impressed by how it's coming they're they're anxious to see something so it'd be cool to get it to a point where it'd be reasonable to allow other people to see it and test it all right hey gideon's here i haven't haven't seen gideon in here for a while uh how's it going gideon you're stuck video's broken oh no the video is broken again huh i just don't understand all right yeah let me switch to the other let's switch to this screen did any of you see the the switch let let me know right now you should see me really small down in the corner um and then you should see the the desktop on one of my screens all right everybody yay looks like everyone can see me well i don't want to say everyone um some of you can see all right so my fan on my computer is still running you know pretty loudly which is weird so i'm still really not sure what the problem is with that um but if it's fine for most people then we'll we'll go with it and so sorry about the delay that's going to be terrible in the recording but at least anybody watching could just skip ahead i guess um rumble bro says if you're using obs drop the video and coding level down a notch uh yeah i'm i'm gonna have to do that it's it's just we i've been using the same settings for the last six months and and they've been fine i haven't changed anything um in fact i've actually doubled the amount of ram i have on my machine so it's just odd that all of a sudden i'm having these problems so uh it maybe after the stream i'll check out my settings lower them a little bit and see see if i can get a better result i definitely want to keep 1080p quality uh because it makes the code so much easier to read um i'm running right now um harsha said check the task manager uh i've i've checked the task manager for uh for chrome well the chrome tab manager uh i've i've checked that and got rid of pretty much everything i'm down to just a few tabs open now um you know i have to have youtube up i have to have the stuff up that i'm working with but pretty much everything else is closed right now i got i'm gonna i closed slack um let me close my email using outlook for work i'm just gonna close everything uh let me close out chrome canary cause i'm not using it right now um obs let's see yeah there's just there's not much else that i could even close out i mean maybe i have i i do have a lot of projects open in visual studio code but i'm working on all those projects um all right i'll ch i'm not gonna check it all out during the stream if it starts to get bad i'll go back and check things out but um thanks i will check the resource monitor on mac and um so thanks uh thanks for the advice uh rumble bros and all right cool i'll make sure i go back through and re-read this advice um when when the stream's over and i'll i'll work on it what's this go to turn harsh it says go to the terminal and type top all right oh nice hard awesome i never knew you could do that all right well let's check this out so here's a really good tip we can see what's going on here um all right all right code helper so i'm guessing that code helper has something to do with visual studio code and that is taking up by far the most oh it's just well chrome is taking up the most it looks like but i can't really do much about the windows i have open now so i need them open all right let's see what i have running on visual studio code and what i can shut down i do have let's see what i don't need and i'll need this and there's my other stuff did they not open ah when i restarted all my uh code windows there they are all right i was worried for a second i'd lost everything all right so this is all right i was working on this but i'm not going to work on it for the stream shall shut that down we will use this one let's make that bigger and we will use let's see what if i have any other things running here no it shouldn't have anything running it's uh all right let me let me close out of that for a second um because i do want to run we're going to need to run this anyway so i'll just get it started right now and then i can start and grow all right all right so i'm going to paste this in the live chat oh okay blake's asking about what i have yeah i have i upgraded to 32 gigs of ram sometime within the last six months or so uh let me see what the rest is about this mac i'll move it over here it's it's really small though i doubt you'll be able to see the text but yeah so i i've 32 gigs of ram um intel core i7 2 gigs graphics all right um yeah i mean that seems like it should be able to handle um live streaming something especially since i've done it um yeah but i'm still it looks like i'm still dropping some frames um dropping like two percent of the frames i need to learn more about how video works if i'm going to live stream every day then maybe i ought to learn how to do this properly um all right so sorry for all the trouble i'll just have to dig more into this at some point hopefully we've closed out enough things that we can just work let me i don't need this open you don't really need that open we are going to work with this and what's this migrate yeah we are working with this so let's leave this open and let's see i guess i can close this out we need one timer open so i'll leave that open and i don't really need this trello board right now are we getting down we're getting down pretty lean here not much else i can do all right all right harsha's asking about the encoding format that i'm using and let's see i'm trying to find it i don't remember offhand what i was using and now i can't remember where it's at in my settings hmm all right oh it looks like looks like it's it's okay now all right yeah let's get to work good good idea hershey um all right so let's at least get this open so here's our site and here's our cute dog this is what we had done uh just kind of get a little layout here still haven't had a chance to show this to my boss i'm gonna try i tried to go in earlier to see him and uh he had already left for lunch so i'm gonna try after the stream today and see if he's in he's just been really busy lately uh with meetings and stuff so let's see yeah so we have some work to do oh i do want to show you before i forget let me show you the uh github repo now because i've updated a lot of things i think i should did i show y'all yesterday i may have but um oops forgot to start the pomodoro timer let's start that up [Music] all right so just to let everyone know um we have a project now and you can check this out you can check things out here or if you just want to go to the issues tab there's a bunch of issues open if anyone's interested in trying to contribute to a project you'll go ahead if you're new and you've never contributed to a project before check these out you can ask me i'd be happy to help you get your first github pool request merged so i'm gonna eventually go through these but i'm gonna hold off a little bit and then that way if anybody does want to contribute these are kind of all laid out you know what needs to be done if you're not exactly sure what needs to be done just you know leave a comment on that issue and then i can give you more information for that so what i think we should do now is let me make sure i'm on the right network all right cool um let's grab some some more data and bring over let's see what i want to bring over let's see if we can bring over our department pages how did the search and put field animated in previous oh all right actually we do have a question about one of these issues now and that's a really good question i i should have put this in here anyway which one is that there we are so for this issue uh on click the search icon in the top bar should expand to reveal a text field so let's let's find a project that this happens on it was the bulletin wasn't it see if i have this up here already i don't think i do i believe we had this working properly on uh the bulletin um yeah let's try that out here let me make this a bit bigger for anybody who's not familiar with using the command line this will be kind of like a little intro because i'm going to do some basic stuff and then i'm going to do some um just a few you know commands with um like starting a server up so we're going to cd um we're going to go so we're going to change our directory and i'm going to go into my projects directory and then i'm going to do an ls and that's going to tell me everything that's in my projects directory and i'm looking for something that's bulletin so bulletin react is the folder i'm looking for so i want to see the end of there bulletin react notice i didn't type it all out i typed in bul and then hit tab and the rest of it auto completed so that's kind of a cool feature it'll save you a lot of time typing and you won't make as many mistakes as you're not trying to type out the whole field so now that we have this um let's open i'm going to open it in a text let's go nano package package.json so i'm going to open it in this this little editor called nano is a really simple editor uh that'll open right right in our right in our terminal you'll see so it just opened here and i can see what's in here i could edit it and it has a lot of the you know commands you can use right here a lot of the keyboard shortcuts but what i want to see is what our startup script is uh looks like start will work for us all right so i'm going to close this out and to close to close this out i just hit control x and that closes out nano since i didn't change anything it didn't ask me if i wanted to save otherwise it would have asked me if i wanted to save so now that i know what our command is we can go yarn start and we've already set up this project to run the servers so this is a little bit different than what you'd normally have if you know a project had been done oops okay so it we already had our main project running on port 3000 so it has started um our project started server started for uh i'm afraid we're running the back end and not the front end one all right let me just shut this down for a second if you hit ctrl c that'll shut down your server generally if you're in if you have something running in your command line you want to get out of it try control c that works for a lot of things so i'm going to restart this and there we are this should be better why is it so slow go closed there we are oh no did we implement the login system no um can i submit no i need to validate i'm not like i'm happy that we have the login system and that's that's awesome but it just slowed me down here it's been a while since we've worked on this project i really do want to finish this up and and launch it but we've we've just gotten sidetracked uh by these other important projects um and i closed on my email which is smart let's um let me open up my email again i think i can get to it from here um whoa oh no i restarted so now even my passwords aren't here it's taking a lot longer i thought and i also authenticate you've got to be kidding me it uses mailtrap saying it it uses mail trap i'm trying to remember what we did i don't remember for sure so are you saying that where it's not actually gonna send the email yet and i need to go to mail trap all right let's check out mailchat all right okay so we did get it in mail trap uh let's see all right here we are yeah all right so hopefully this actually is set up or all this work has been for nothing all right awesome so let's zoom in here and see how this works so we click on it it opens up it automatically uh fills it puts the cursor in here this is just a basic material design style text field but then we also have this close icon and weak so we can close it back up again so that's how we want it to work this is i i would probably change this slightly just uh i would want this to have a little bit slower animation when it opens up and it would be nicer if when this opened the x kind of looked like it was part of this so maybe if the x was here or if this was moved up a bit so it integrated you know a little bit better but basically like this is this is what i want um so even if this was implemented exactly like this i would be happy and if we had time later on i would just kind of adjust it slightly but that's what we want so since this project is using material ui the beta version i believe it is material ui the beta version and it should be able to copy most of that code and it should work uh and all that of course is on on github under the i believe it's bulletin react is the um uh the github project name all right i heard she's talking about the masonry yeah the masonry uses materialize yeah for the masonry stuff so it's a blend and materialize yeah harsh it's i like how this works right here this is good the only thing we're going to have to solve or figure some way around is right now on our main project which we'll go back to in just just a minute uh we have cards that are not only different heights they're also different widths so i i don't think switching to materialized columns is is going to fix that um you know by itself i hope i'm mistaken about that and it does um we'll just we'll have to see we'll have to to mess around but i don't want to spend any more time on the home page until i show to my boss see what he thinks because we may just end up wasting time on something that might not make it into the final version of the site evo says i think i would slightly lighten the shadow under the nav bar it just looks too dark a little too dark for my liking um yeah maybe off to see um if this is basically sorry if you ever see anything uh in any of the projects that seems like it's not in line with um the material design uh standards let me know i would definitely change it if that's the case so if this the shadow recommended for you know the app bar here is not the right shadow i'll change it um you know no problem um i i just i want to keep everything consistent so let's see we'll have to look at it in our other project as well and see if it's this dark i don't remember doing anything custom to dark in this but you never know yeah you're right uh evo says it it just it looks a little out of place you're right with this elevation it does seem odd maybe before i mean this this is still a work in progress right uh so this isn't live anywhere but i mean you could see this obviously has an elevation but then this doesn't and it just makes it it's it's an odd effect here you know if we were to like pan this and be able to look at it like straight on it would be like this is up a lot higher than this side nav you know but from here it looks like they're it's just odd right i mean the way the shadows are there should be something with the shadow right either this should have a shadow here or there should be some sort of slight shadow on this edge so i i agree i think that looks weird i'll have to go back to the documentation see how it's handled there um and then yeah and then we'll figure we'll have to figure it out because even you know right now the sidebar is just completely flat against the background right so it's it has no elevation at all yeah we'll have to end oh well we're not we're not working on this bulletin project today so i'm getting kind of sidetracked but i i definitely agree with you evo i this this does look weird and it kind of breaks the illusion of the different elevations all right so let's close out um oh rook rook says sorry for derailing you from the main site project ah don't worry about it that's i mean that happens this uh i think that's kind of how things always are you see something on one project and it reminds you of something else and you end up you know going around uh it's a different thing so that's just normal what do i have on post support mainstream to materialize oh all right uh i just noticed this issue harshit uh so thanks thanks for making that um an issue i don't yeah i don't think i made one for it so thank you let's shut down this server that was actually two servers the front end and back end and now let's start this one up again for our main project all right so it looks good let's verify that that is working and the ngrok link still should work yeah oh evo don't worry about being nitpicky i mean i nitpicky is good nitpicky i think is the difference between a good site and and a perfect site right a great site because somebody will see that not everybody but someone will see that and if it's good they probably won't even notice but if it's doesn't if it looks weird they will notice and they'll have a bad experience with it all right so let's get started we actually have eight minutes left in this uh pomodoro session and i i will take a break and go back to the live chat because there's a lot uh up top that i i just kind of skipped over john hanson said he saw it too john your uh your light bright thing that you made that shared on twitter it's getting a lot of love on twitter it's getting some retweets and and likes and stuff so everybody likes it so you did a great job on that i shared it with some of my co-workers and they were like making designs on it and screenshotting it and then sending on slack so really cool all right evo says it's like that one smudge you made on your car three years ago which nobody else sees except for you yeah exactly exactly that's that's definitely me i noticed like the one tiny spot on a shirt you know that i got like pasta sauce on a long time ago and it always bothers me if i ever wear that shirt like somebody's gonna see that tiny spot no one ever says anything all right so let's go first step is let's figure out what content we're going to bring over once we figure that out we gotta figure out um how are we gonna get all the content what fields do we need to bring over we use our migrate.js program to pull the data out of the sql server database and then use the wordpress api to put it into the mysql database once we have it there then we're gonna have to create a graphql query to get the data out and we're gonna need a new page a new react component to put the data in so that's the plan once we have the data in we see what we have then maybe we'll style it a little bit and if you notice as we're going i'm not making these perfect right we're just styling a bit so that they don't look so terrible uh this is kind of on purpose because i'd rather get a just get a bunch of stuff in there be able to show it to other people in my department get some feedback before i do that fine tuning because i i we have a tight deadline and i don't want to waste time so i'm going to try to leave everything really rough at first because if if we have the data there and it doesn't look perfect we can still launch and the site will be a million times better than the current site because it'll be fast it'll be easy to find it'll be very clean and not cluttered we can always fine-tune it later ideally i'd like i'd love it to be perfect before launch but that's just it's not gonna happen it's not reasonable given the amount of time that we have i do have hopefully some interns that are gonna start uh working uh for me in like two weeks or something but i don't really know how soon they're gonna be able to get in and start helping so i can't really rely on that uh to help speed things up i mean maybe best case scenario uh i get all three interns that are considering and they're great and they know what's going on and they can help but i'm i'm not planning on it i'm planning on you know basically me and you all helping doing all the work for the most part um all right let's see okay so let me get something done in these last four minutes here and then i'll go back to the live chat and and do the questions um where's our database ice you know what it'll be better if we go um franciscan if we go to the site itself it'll be way easier to just pick it up than looking through records in a database i want to try to pick out main content sections so so far we have faculty member profiles we have the directories for the different departments and we have all the news stories so i want to try to just pick out what's a section that stands out as a really important section and i'm doing it like this because what if we can't get all the sections into the site before we launch let's make sure we have all the important sections first and if there's stuff that needs to come in after then that's fine i'm not worried about it so let's go to the about employment hr get some information i'm mostly trying to pick up things that would be for prospective students if something is geared towards like current employees or current students i'm not worried about because that essentially shouldn't be on this site anyway we have another internal site that should handle all of that all right curriculum academic departments we haven't brought these over i started to do some work to figure out where this was at in the database i think we should bring these over these are definitely important prospective students will most most likely want to check out our different departments and you know figure out what we teach here so all right so it's under the departments let's let's go here this uh accounting business administration economics okay so departments acc hyphen bus hyphen ec really not liking that that url but uh we'll have to keep that in mind because this is a place that i think uh we do want to try to keep the same urls [Music] there's going to be a limited number of departments so if we have to manually put in and change the slugs on these to make a match i'm okay with that right i definitely didn't want to do it with the 540 some news posts that we brought in yesterday i'm willing to do it for these departments though uh all right so let's see i believe the content that we'll want to keep over anything is this and possibly this these are links all right these are our links elsewhere i'm just making sure there's no toggles here for the content um these are fine these we can recreate this and pull this from faculty profiles if we want um let's see this program accounting these read more things i'm not really worried about about this uh this is i i don't think this is super important to have something like this all right all right so now let's find where this data is so i've done and this is gonna slo let me open up on another screen just in case i don't think there's any private data in this database at least in the part that i've taken out of here but better better safe than sorry so i'm gonna open on my other screen just to make sure that everything's okay uh and if it is then i'll bring it over on this screen and show you what i've done is i've pulled out a lot of the data from that database and i put it into a google sheet so that i can more easily sort the data filter it search for things it's a lot easier for me to do that in a google sheet than it is for me to come up with the correct sql queries so that's why i'm doing it this way it should be in my recent documents i hope all right i believe this is it it's a really huge one so hopefully it doesn't mess anything up all right good this is what we have unfortunately i didn't bring over all the data uh so it once we find what we want we're we're gonna have to try to search for it based on the um the id which is okay we're already set up with a query to do that so i'm going to try to find and let's see let's just start typing in business programs all right so we got that that's definitely not it that's not it oops it might be frozen it is let me refresh the page maybe i should pull this into excel maybe it's just too much strain on a google sheet all right let's exit that page and um let's pull that same data into excel alright uh it's asking me to update it i don't want to update it all right here so excel just opened up really huge on my other screen so i can't see the live chat anymore all right if it says it looks like the sql query might have been easier after all yeah i was thinking the same thing all right so now i have this open in excel and let's do a find are there no keyboard short there we go um business programs there we are got it and ah this is not good not good all right well let's search um 222. um yeah let's search for folder 222. the reason i'm saying this is not good is that this the different content types in folder 222 they're they're not all it's not what i wanted but let's just check it out so let me find this is our microsoft sql operations studio let's get i always forget how to do a new query nope how do i do a new query there we are okay um i'm going to need to the easiest way is just going to be to pull this that way i don't have to type it all out again and so let's paste that in and use what i want to see is everything and then we'll uh we'll pair it down to what we just need so we're going to select everything from the folder content or the table content i'm not sure with terminology is where the folder id is 222 and i don't want any records where the there's no content all right so that makes sense that's that's a waste we don't want those so let's run that and it's gonna ask me to pick the server and this is the server all right so here's what we're working with i don't really care about these right now um content title and the html are really what i want to see the most sample sample program hmm well this is not as bad as i thought all right actually it's just a little bad um these are just menus all right all right let's think about this for a second before we bring it over let me check my timer it's got to be up i know it is up i must not have heard it okay all right let me let's take a break right now i'm going to go back to the live chat this will give me a second to process you know what with the data we just saw what we're going to do with it uh when i when the timer is up i'm going to explain um why i think this is going to be a little bit of a problem all right so let me scroll up and go down through our chat also we have a major problem all right it's good my spotify wasn't working now it is so we're good let's see all right so the first half of everything in the live chat is just about how the stream was not uh operating properly everything was lagging or stuck uh so blake asks if i've ever done any social media marketing yes i have uh so when i was freelancing uh so this was maybe like two and a half years ago i stopped well i didn't stop freelancing completely but i stopped like actively looking for clients uh i would do social media marketing and pretty much anything else that a small business might want that it had anything to do with the internet so social media marketing was a part of that it's not my i didn't really enjoy social media marketing as much as i enjoyed other things it was i don't know if i want to say it was my least favorite part of what i did but it was definitely low low on the list of things uh that i i like to do it was but if you have any questions blake about social media marketing let me know uh in my department we do a lot of social media marketing i don't handle it directly at all um i have access to our some of our accounts and for like an emergency if several other people in the department are all sick and we can't get a hold of him then i i can do it but that's not really my thing but if i i still know a little bit about it so if you have any questions let me know uh evo says that's the way i like to work as well work out the bass first and start perfecting it afterwards with clients it's usually that they find the bass good enough even though they said they don't yeah yeah that's yeah i've the only problem i've had with that and i still i like to do it i think it's the best is sometimes you go in to show clients or in my case other people that i work with here they're expecting when you go to show them sometimes they're expecting too much and you're just showing them kind of like a concept like first draft type of thing and they they're really disappointed they start asking about all these little details and they kind of miss the point of you know this is a big picture overview just to kind of show you what's possible and what's going on so sometimes they can be disappointed and get stuck um on on some of the little rough details so i i do have to like warn people going into a meeting when i'm going to show them this like hey it's not finished it's just a rough draft like if you see something that's wrong like it's probably gonna be finished you know i still welcome any input but uh i do have to be careful about that i think i walked into a meeting one time and somebody that is higher up where i work um said they hated they hated it they hated my project i think i had sent a link out to it before the meeting and then i found out that they said they hated so at the meeting i was very careful to explain everything uh since i knew going in that uh it wasn't exactly understood that it was a first draft oh rook had to go uh sorry i i missed that you're probably already gone but by anyway i'm sure you'll watch this later on yeah evo says wow that site took really long to load i think that you were talking about this site this main franciscan website yeah that's one of the reasons why i think anything we build will be perceived as better because right now the load times are so so bad i think a lot of people don't even stick around to see the site i'm not going to use as an excuse to slack off i really want to make a good site in its own right but you know we we have that going for us though our site is most definitely going to be way faster uh then this site i want it to be faster than than most sites you know out there certainly any of our competitors other universities i want this to be the fastest site uh philip says is that out of the box uh visual studio code any special extension to get that view um yeah i do have some different extensions so hmm maybe i don't have the sound enabled on this let me refresh and see allow notifications huh all right i keep missing that the timers up uh guys so i do have some things so my theme is seti so it's s-e-t-i that's the theme that i use and i also use a bunch of plugins to handle react type stuff so if you look up react is it react food truck i think that's what it's called react food truck is a plug-in that will automatically download a bunch of other plugins for you that all have to do with making it easier to develop react applications in visual studio code so i checked that out i have very few additions to that setup so if you want your setup to look more like mine then i start with that and then if there's something that still doesn't look the same ask me and i i can kind of look more into my plugins i really can't tell you what i have offhand i'd have to look myself all right let's see oop let me start my timer here all right so oh i'm sorry i just saw this this is really exciting so i'm going to read this comment uh john hanson said quincy is going to put my light bright on free code camp as an extracurricular project cool yeah all right um that's awesome john i'm so happy about that that's really really cool that's going to be a fun project for people to do wow really cool really cool if if you you all haven't seen john's light bright project on uh codepen uh check it out uh if you wanna link check out my my twitter page i i posted um or i i retweeted something from john that has the link to it uh yesterday so it'll be in one of my top my top posts uh check it out there and if you like it give give john some love on codepen and twitter it's it's cool it's really cool all right so let me let's go back to our data you know quickly i'm gonna do with it oh way over here all right let's go back to our data and all right so this is this is what i'm worried about this is my problem so i was hoping that i could get find a folder or something that had all of the main programs in a folder but that's that's not the case what we have is everything that's under like the business department is all here but they're all different types so we these are called quick links which are basically just lists of of links which we may or may not need i'll have to check closer into these links i mean they might not even work with our new structure i'm trying to keep all the urls the same but i don't think we can keep all of them the same um finance classes text i mean and they have text these are all texts for specific sets of classes up here we have all these like programs that are really kind of like sub programs underneath this main header so this is kind of the main thing and then pretty much everything else on here is under that you know it's kind of a sub section of that so it's going to make it a lot more difficult just to pull all this stuff in under one post type all right um vince just asked if i could share the link to the light brite thing yeah on the next uh break the next five minute break i'll i'll find the link and i'll and i'll share it all right let me i'm gonna go over here and see if there's anything that might differentiate any of this stuff hmm looks like these teasers are going to be pretty worthless so some of them are some of them might be okay hmm hmm all right well it looks like we could get at the very least the text for these different programs and i think that that will be worthwhile let's double check here so from this main academics page these are all the departments listed and then these underneath here listed as majors all right let's see what what the url structure is like for one of these oh it's just accounting there's not even anything in between let's verify that it's the same oh this is not this is not good not good not good i'm i mean where are we gonna find this this is going to take a lot more manual work um all right cool vince found the link uh so uh awesome wow all right let's grab i guess some different content because this is just not this is not going to work out i wonder if there's consistency departments nursing okay and now they have the major that's nursing all right maybe i should just go we'll get some data from somewhere else because this is a mess all right thanks get that mix all right let's check academics well we looked at academic departments already so this is where all those majors pages were all right all right so let's so we we basically have two we have two different listings that have a lot of the same information uh so all the majors that a student can take are listed on this page here then there's the other page that we just came from the list academic departments so these majors are grouped into different departments but for some reason the urls on these which should say franciscan.edu slash majors and then slash whatever the major is don't it just franciscan.edu and then whatever the major is and that makes it a little bit weird and it's the all the other thing that makes this tough is within the same folders which is really the only reliable way that we found to uh to pull in data like all of a certain type so within the folders it includes both the pages for majors and the pages and content for departments as well as some other stuff all right so here's what i'm thinking what if um we made a content type to house both programs and majors within that content type we had a category set up and we had a category for a program and a category for major so that when we go to grab that data for our our app we could sort it out yeah we're gonna we basically we could sort those out so that we can just grab all the programs or we could just grab all the majors maybe we'll need to have i think we're gonna have to have two taxonomies so we're gonna need some set of like categories but then also maybe tags that go along with the name of a program because we're going to need to be able to bring in program info or links to programs within those all right so we don't have to decide that yet first thing we have to do is bring the data over unfortunately we're going to have to manually check and say which ones are majors and which ones are programs because there's no reliable data it seems that we could pull that and do it pro programmatically so let's test it by first bringing in this folder 222 that we found let's bring in 222 see what we have categorize what we need to and then get rid of what we need to uh that'll give us an idea of how long it will take per folder and then we can figure you know hey is this worth it is this not worth it all right that's the plan that's the plan for now all right so let's go to our migrate.js program here let me make the font size larger and we're going to go to 222 that's what we want we don't need date created i am going to keep content uh i'm going to keep the content teaser some of the teasers are nonsense they're not actually even real sentences but some of them do look like they'd be useful so we're going to keep them we want the content we want the title content id all right good so we have that let's go through and see all right content title we're replacing that that's going to be the slug for now that's ok no we don't need to do that uh we we um yeah we determined yesterday that we for for these and for some things we don't need to change the title before we put it in as the slug right and in fact we don't even need to add a slug it will be automatically added all right so let's do this so we don't have to worry about that at all it really wouldn't matter either way but we'll let wordpress handle how to manipulate those slugs we're probably gonna have to manually change the slugs anyway um let me check my time here since all right about 10 minutes in about 10 minutes let me go back to the live chat i see there's more questions in there and i definitely want to get to them um all right we don't want the date anymore we are going to bring in the excerpts this is published title content all right great this is what we want we need to change the we need to change the name somewhere right where do i have it let's i don't want that right now why can i not find the place where i need there we are there it is all right so what are we going to call this post type um i i guess we're going to call it majors and departments i'm going to call it majors for now i'm going to call it majors it wouldn't be that much work to manually take a lot of the data out and maybe make another post type for departments and that might be something that i could get um someone else to do all right let's do that so we're gonna call this majors now we have to make a post type for that so let's really quickly copy and paste make a post type let's see so let's copy what we did yesterday and make majors so uh let's not copy that because we had everything uh singular and plural exactly the same this one would be better this all right so that's major and then all the plural we'll call majors and then down here we'll do the same all right so this is a bit of php this is a wordpress plugin so all we're doing here is making a new custom post type we're giving it some labels that will appear in the admin panel and then we're also just kind of telling it how it should act uh the type of fields that it should have available for users to edit and uh where it should appear we want to make sure it does appear in graphql so that it we're able to grab that data from graphql we're also telling it to appear in the rest api which right now we're using a little bit just to get a visual of what the data looks like but may not need that when we actually launch the site and all right so let's save that i'm going to copy it and let's go to our our wordpress installation login and go to our plugins and edit our plugins this isn't the only way we could edit the plugin but i haven't really set up any other way so this is how we're going to do it for right now oops it's the wrong plugin here's our custom plugin all right so we're going to paste the new stuff update if we have an error it should tell us automatically and so it doesn't have an error we do have this warning making changes active plugins is not recommended so we just did nothing broke this isn't really a live site on a live site probably wouldn't do that so now that that's there we should be able to run our migrate.js program and everything should migrate over yesterday i made some mistakes this doesn't work on the first try so we'll see see if i forgot anything this time um uh let's go node my grade.js yay cool it worked well i didn't realize there were that many in there all right cool we'll shut this program down uh remember we did it we do control c and that shut that down and now we can check our wordpress installation and what we should have is a place for majors and if we click on there hmm nothing's in there what happened let's double check our migrate.js file well it said it was inserted but it obviously was not um maybe it's not supposed to be plural let's give that another shot there we are okay this so the problem was um i supposed to use the singular major instead of the plural majors um all right all right two more minutes i'm gonna get to the live chat answer some questions let's see what we have header yeah i don't i don't really want that right do you really want the header i don't know maybe it would be useful better right now to not delete if we don't have to i am interested to see what these quick links are all right so these are our relative links which that's that's good some of these are links to our uh we have a an outside like a third-party vendor that um called smart catalog that handles all of our our course descriptions and things so those links will still work all right it looks like these links will still work so maybe maybe we'll use them oops and the time's almost up so let's well well we'll see what time it is all right let me go to live chat we'll answer some questions uh while i'm answering the questions let me know if you want to continue on now and build out a page to put some of this data on i'm thinking what we might have to do is grab multiple pieces from here to build out the page um yeah we're going to have to build this differently than we built any of the other pages uh i think if we want to avoid having to like hand code anything or make yeah it'll be a little bit more work coming in but then i think it should make things go faster as we bring in the other folders for this so let's let's give it a shot but let me know if you'd rather wait and do that on a different stream and we've already been streaming it's about an hour and a half so it's gonna end up being really long i know it's getting late for some of you so anyway please put in the live chat now if you think we should just save this for tomorrow's stream or if we should keep going today um i i could do other one i'm okay with either one all right so let me go back up to where i left off and get these questions answered oops i'm going to do the short break but if i have to go over i'm fine with that i want to get these questions in oh evo says i have my first non-intern job interview next monday and i'm really stoked i am too that's really exciting um i don't know how many um like the details that you could give of that on the live stream but i'd i'd love to hear more details about like what's what's the job you know like uh and i give you know any help i'm happy to give it i um i've i've obviously interviewed before four jobs but i've also been on the other end interviewing developers so i don't know maybe i could be able to give you some advice if you want right i'm no expert i'm just happy for you and when i hope you get the job so i don't know how helpful i'd be but that's really cool definitely so when it's next monday all right you you have to if you get a chance uh after the interview uh come back in the live chat let us know how it went uh i'm gonna be waiting to hear uh if you can't make it to the live chat like let me know on twitter or something uh let's see vince says that's not regular html um the element not in the head and what is yeah there's weird stuff going on with this html uh harshit said that's the beauty of ektron yeah definitely um yeah this html is weird it's if we could see where's the business program yeah we should be able to see some of the weirdness going on here uh whoa this one's not too bad these are normal p tags you gotta be kidding me hey we finally got something with some good markup all right but but you're right we have been getting some weird markup we've had to do some weird stuff with data earlier like um changing the names of some of the tags with javascript in our components before we render anything using css to just hide stuff that's just weird and shouldn't be there so we we have to work with this now the plan long term is to clean all that up have separate fields in wordpress in our our post types for each piece of data and then to pull that in and it'll be so much nicer once we get that there'll be no need for anyone who deals with the data to really know html so it'll be all right but we're doing it this way to save time uh i i wish we had more people you know that that worked in my department that could do some of this you know i could bring it in set up the post type and then they could just work on data entry basically but we just don't have that right now especially like the students are still on on their break for christmas and so we don't we don't even have student workers really uh to work on this uh ego says uh and this is in regard to when i was saying that the current website's really slow so the new website anything should be an improvement so he said yeah if the previous was really bad then everything will be perceived as a huge improvement it will yeah but not by everyone there's a group of people at the university mostly faculty members that see any type of change is a bad thing especially if it's a change in technology so i'm sure that we'll have some complaints when it comes to that but this site's not for an internal audience it's for an external audience so if anybody internally complains about it i'll just remind them that well that's that you're not really the audience the audience are high school students mainly so that's what we have to keep in mind is would a high school student look at this know what to do be attracted uh to this so hopefully they will be i'm sure they'll appreciate the increase in speed uh sj says normally never catch this live usually watch the recordings the next day sj i'm i'm really happy you got to catch this live uh welcome welcome to the live chat and uh thank thanks for watching um let's see uh sj says uh wanted to let you know yesterday when you had the weird slug it was because you highlighted the hyphen from the beginning of the slug and physically dragged it to the end of the slug oh no and i didn't even know i didn't catch that well thank you sj for bringing it up because i had no idea why it happened and then why it was fixed so it must have just um maybe automatically been fixed because i didn't save it and then when i went to a different post it just reverted that's probably what happened so wow good catch on that that must have been that's a small detail but i really appreciate you coming in the live chat and and telling me now i'm not going to be worried about bringing in the slugs and stuff that you know because that was you know entirely my fault all right cool believe i made it silly mistake and didn't notice it like that but i really appreciate you saying that um vince says and says ello you mean i don't have to worry about running out of the black pieces of paper with the patterns on them i don't remember what i said i don't i don't remember what i said for that response so uh vince let me know what i was talking about let's see uh vince says i'm new here oh no you're talking about light bright that's it okay took me a little while to figure out what's going on so yeah if anybody actually used light bright when you were a kid you remember like you had the so you had the the box right and there was a light bulb literally a light bulb in that box and then this black um piece of plastic with all the holes in it and then you would take a black piece of paper that had a pattern on it and it i think it had little letters to let you know what color to put in there and you stuck that on the grid and then you pushed little plastic uh pegs in there and the light would shine and the plastic was like semi-transparent right so you'd push the pegs in there and it would shine with all these different colors right but if you use the paper once it's done for basically because you're not going to remember all the colors and everything um but anyway so that's that's how light bright worked if you're not familiar with light bright but john's version uh done in reacts um on codepen is entirely reusable it's awesome let's see uh guitar 6029 says hello would you say react is more popular than angular yeah that's a big debate uh i can only give you my personal opinion i don't really know numbers for sure you know but i'll say this react is for sure growing in popularity at a faster rate than angular is i see like just looking at job i look at job postings a lot uh i think it's a great way to try to keep your skills in line with what companies really want a lot of like bigger comp it's this is just my perception from what i've seen so just you know realize that it this is just me talking here the bigger companies that switched to angular when angular was a big deal like i don't know let's say like five six years ago or something um you know they made the switch to angular that takes a lot of work to make the switch they're not really as quick to switch to react now smaller companies seem to be switching to react like obviously newer companies are seem to all be going with react uh all your startups and stuff and then smaller companies that maybe either didn't do angular are now doing react or maybe if they're just more open they don't have a huge code base and they're more open to switching it over it seems like they're going with with react more that's just my observation from from job listings right but um i don't really know of any like specific numbers just to like well how many sites use angular versus reactor how many companies use it so i'm not sure uh if i had to pick one that that has more momentum i i'd put my money on react for sure it just seems like you see so much more about react out there uh being talked about on twitter um you know in in blogs and stuff so it's not like react is out or angular's out of the picture you know it's definitely not it's a big player a lot of people use angular but reacts just got a lot of momentum right now and it has for a couple years now anyway hopefully that's a good answer um i'm not i i'm a big believer in and say the idea that there's a lot of different ways to solve a problem and you know not not one one way isn't the way to solve every single problem so for me react is helping me solve a lot of problems right now um but it totally fine with using other tools other solutions or if other people look at the same problem use a different solution it's fine with me at the end of the day if you fulfill all the user stories all the requirements for the project and you know you've really designed something that provides a great user experience doesn't really matter what you used right it doesn't matter as long as you you don't want good code then that's that's fine everything else is cool to debate but from a user's point of view it doesn't matter at all and usually from a client's point of view it doesn't matter at all so don't feel bad no matter what you're using as long as you're producing good work i i mean you're where you need to be right if you're out looking for a job and you need to know like who's hiring what skills do i need that's a different story um but if you're already making money and doing good work then you know i'd say don't don't worry about what the next best thing is um let's see philip says i'll say javascript is the most popular yeah yeah guitar says everyone is jumping on frameworks but never learning javascript um yeah i would say um there's some truth to that uh i i see that that's sent that statement kind of repeated um in a lot of different places so i i agree my my take on this is when you're first starting out yes learn your basics of javascript right but you shouldn't try to master javascript before you go into a framework uh here's why assuming that you're trying to make money while you're doing this and you're not a full-time student that can afford to just take your time you're gonna miss out on a lot of money if you force yourself to just use javascript uh and don't jump in on um some type of framework and just because you go to a framework doesn't mean you stop learning javascript my path if i was going to give advice as to a path to take is learn your basic javascript enough to be able to understand what's going on in the framework then start learning the framework but also keep learning javascript at the same time then you'll get the best of both worlds then you'll get to learn the framework you'll start working on projects like that if it's an in-demand framework you could probably get a job or start making money at least freelance with it and you keep building up your javascript skills i learned a lot of new es6 stuff when i switched to react because it was being used in react there's a lot of things that i never had to do a lot of javascript stuff i never had to use until i started using react uh so switching to react actually helped me and pushed me to learn more javascript uh so i think that's it's good to keep in mind that it's not like either or right you can do both at the same time if you know if you do it right you can do both at the same time so that's my official advice um but yeah i mean i agree someone shouldn't just start out day one with react right day one you start out should be plain javascript stuff um for sure you need some foundation uh but just don't feel like you need to wait you know for a really long time before you switch it's it's not going to hurt your skills you can keep on learning uh javascript and a framework and whatever else you want at the same time so i mean that's my opinion based on my experience so i'm not going to hate on anybody that has a different opinion all right let's see john hanson says doesn't graphql allow you to make better queries that pull only the data you need even if categorized in many folders to use it's supposed to work better than just rest api yes yeah for sure um yeah graph graphql will let us grab exactly the data that we want and that's what we'll end up i think we'll end up having a lot of really detailed queries for some of these pages where we need to grab a lot of different you know parts of pieces of of data so we'll have to figure that we're going to have to learn more about querying with graphql as as we go on um and as some of you already know a lot about it i'm for sure going to have to learn more though um vince says how do you bill for a job like this it looks like they gave you a password to their database with very little information about the database architecture is it hourly all right so uh i'm on a salary so i am a full-time friend and developer for university and i'm on a salary so i'm not billing for this if i was doing this freelance hourly would probably be the way to go if i were to give like a lump sum here's how long how much the project it would be huge it would be a big amount because of the amount of like just not knowing right so the reason i don't know anything about this database structure is because no one here knows anything about the database structure the site was was built by a company that we hired to build it and so so we don't know there was really only one person ever maintaining anything on the back end who they don't work here anymore and they didn't use any type of version control for us to be able to go back and see like you know what happened here so if you look back on the stream um we've kind of looked at the back end of this thing we've looked at the database we've tried to figure out what's going on even into like some of the templates that were used it's all detective work right now we're all like always just searching like how is this going on so yeah it's it's a little bit frustrating that we have to spend so much time just trying to figure out where this data is and how it was categorized and things like that but i mean that's that's the job that's what we have to do um so that's why i really want to put thought into how we're pulling this data in because i don't want the next person to have to deal with the same problem right i want to have some logic to the way we structure things and then that you know this will never have to happen again uh vince says in the description it says front end developer at work but there's an awful lot of back end stuff going on here i know it can't be avoided but avoiding this is the reason i want to do front end um yeah vince i i agree to so when i first started doing this stream about i don't know eight eight nine months ago something like that i really did do more front end uh my title is front end developer realistically i've started doing a lot more back end stuff as the year has gone on um you know potentially depending on the company i i maybe could be considered full stack it just depends on you know how titles are in this industry like they're kind of loose and they're not really heavily regulated right you know any industry that has you know javascript ninja as a title you know like titles don't mean that much so maybe it would be worth changing up the description on the video a bit to reflect the fact that we don't just do front-end work you know sometimes you know we get really into back end work and there are some streams where it's just back end we don't do any front end so um that's a good point actually uh that's that's a really good point i think i can't do anything about my title um but i can definitely change the description to more accurately reflect the work that we do on the stream um let's see evo says currently my third year of school but my capacities are hardly reached at school so i decided to seek a development job cool um evo says the job is at a communication company whose campaign who campaigns for multinationals my task will either be back end or front end with angular i will hear the details next monday all right very cool very cool i hope it works out for you and then you'll know angular you you'll be like my my person that knows angular on the stream so if we have to work with that i i can ask you all the angular questions let's see um alexi says are you okay you look kind of tired i feel kind of tired i feel tired i had um i mean i guess i went to sleep at an okay hour but um my um my youngest son was up last night and so i had to get up and um uh get him a drink or something yeah i think he did he wanted to drink and he just wouldn't quit crying without a drink it was like he's really cute but at in the middle of the night like you're just so tired so i i got up and got him a drink he went back to sleep so kind of had interrupted sleep so maybe that's why i'm tired i didn't have as much caffeine as i normally do today too so that could be it so i apologize um i had like an energy drink before the stream because i know it's no fun for you all if i seem like really tired and depressed during the stream so i try to stay upbeat but uh i think i'm okay like i'm not um my eyes feel tired but otherwise my body's like okay thanks for asking though i appreciate the concern uh evo says the only thing i am currently struggling with are questions for my interview but i guess that is just due to lack of understanding as to how they go to work on projects yeah um do you know at all evo if they're gonna ask you like technical questions like algorithms and stuff to solve because there are some websites that are that help you to practice for that kind of thing um so yeah i mean you they may not have told you ahead of time but i can i could give you some links or something to websites that will help with that uh vince says that's how real life worked back in the day light behind the black piece of paper and you poke holes in the color effect yeah yes vince don't worry about i i played with light bright back in the day that's how i totally remember that i love light bright they look so cool did they still sell those i don't know i think maybe i'll i want to get it for my kids but my daughter cordelia is like a year and a half old and i'm i she would definitely try to eat it she would try to eat the little pegs uh and if not eating it she would just throw them around so we'd probably lose the pegs maybe i'll wait until she's a little bit older because otherwise we would just lose all the colored pegs in a week um rumble bros says i'm having a hard time between going full stack or becoming a back end developer only i know doing full stack beads sorry i know doing full stack means i'll have more chances but specialization is also a good thing um rumble bros i'd say um think about if if you don't i'd say this if you're okay financially and can wait a little bit before like getting a good uh dev job then do what you really like to do the most if you really like back end and you don't care for front end stuff stick with back end and specialize get really good at that um if you really need a job and you think going full stack will will give you a better chance of getting a better job maybe making more money then go with that uh you can always you know maybe get to a point later on where you know you have a job you've been there for a year or two and you're comfortable financially and then you can start looking around for a job that you know you something you really want to do um i'm i don't know my my dad always told me you know you just sometimes you just have to get a job it doesn't matter if you like it or not he would say if it was fun they wouldn't call it work so i still have that in me a little bit that's like sometimes you just have to do what you have to do to pay the bills um so i always keep that in mind just kind of be really practical and realistic about that you know do that but then keep working towards your goal of what you really want to do so i don't know if that really helps you you know in terms of an answer but i mean i do know that jobs for full stack developers usually pay more than for front end or back end so if if you're really looking for for an increase in pay or something full stack is probably where you want to go um but it may not be worth it if you really don't like doing the front end stuff all right sj says i've never heard of light bright does that mean i'm young um blake's never heard of it either oh man no you you all never heard of light bright we we have to we have to do something about that we need light bright um let's see if we can get the library commercial all right here's light bright you're not going to be able to hear the sound but this is the original 1970s light break commercial now i mean i i wasn't around in the 1970s i remember using light bright in the late 80s early 90s but that's that's late right and now i'll have to go in and uh check so the the free code camp youtube channel history will now have the library thing in there um let's see so if you've never used light bright go check out john's uh version of light bright and use it and then if you really really like it you could probably find a light bright maybe they still make them if not maybe you could get an old one on ebay i should get a real light bright and have it right behind me like on this shelf and then i could write different things that would be cool um all right back to the live chat uh vince says graphql has to be supported server side doesn't it does ektron support graphql as far as i know ektron doesn't support graphql or much of anything but we're pulling it into wordpress and we have a plugin called wp graphql that does all the work for us to make graphql work with wordpress so that saved us a lot of time and uh the guy um jason yeah what's his last name i can't remember his last name but jason who created that plugin has actually been with us on the live chat several times and helped us work through how to set it up so really good plug-in and it it did save us because i mean i i wouldn't want to have to do all the php work to make graphql work with wordpress i'm just i don't know a lot about php and i'm not really interested in learning more about it right now there's nothing wrong with php but i just want to focus on getting better at javascript um let's see alexis says do you like front end more than back end um i don't know that's stuff quick i i guess i like front end right now more than back end uh because all right it's easier for me because that's where i started out at and you immediately get to see the results and show other people the results and they can say like oh that's cool if you try to explain what you've done on the back end of people who don't really know about it um they don't really understand what's going on and and they so i don't know like it's just you get more positive feedback and things from from people with front-end uh stuff so i don't know but i it's not like i dislike back end like trying to choose between the two is is really tough for me right now it's like asking me what child i like the best right um yeah so i i like both maybe one day i'll make up my mind about which one i really like the best but i can't right now i like working with both um let's see uh alexis says i get started using react and i have no idea what i'm doing i'm more of a back end guy yeah that's how it is i think depending on where you started the you know moving to the other side of things is always like more difficult so like for me front end seems easy and back end seems hard but for a back end person sometimes front end seems hard like i i have an uncle that's been a software developer for i don't know since like the late 70s or something and he does a lot of stuff with c sharp and well when we talk and i'm telling him about some of the stuff i'm doing he's always like really impressed i'm like listen you've been doing this for so long you know i i've got nothing on you and uh but he said he said no like i work with the back end stuff this stuff's all new to me and it's all you know impressive so i kind of like that just to keep that in mind sometimes i i don't like the tendency for like some types of programmers to look down on other types of programs to say that stuff's easy right back end people say oh well the front end you know that's easy stuff uh or whatever um because really it's nothing's easy in in coding in programming right it all takes hard work and it takes hard work to be really good at it so it's just different for different types so there are certain things that you have to worry about in front end that you don't have to worry about back end and vice versa so anyway that's that's how i feel about it evo says not the angular questions we may not ever do anything angular on on this stream so you might not get the questions um james ross says have you ever considered gunner glasses or flux um for your eyes you know what i used to use flux huh i have considered the glasses i saw some i follow a lot of coders on instagram and i saw some of them had had just purchased some of those glasses or they got it as a present or something for christmas and i just got to thinking about them does anybody use those or know about them are they really helpful for eyestrain like i my my office is always dark i keep the lights dim and it cuts down on glare on my screens i try not to keep my screens too bright to help out with it but like i can tell like right now my eyes are fatigued um i'm on a screen i mean you all know how it is like we're looking at a screen all day you know we and even when we're not working you know you got phones you got televisions right i mean we got a nintendo switch for christmas so like i'm up at night [Music] trying to sneak in some time with uh the new zelda game while my kids are sleeping um yeah so if they're if they work i'd i'd be interested in getting some i never wore glasses though it might drive me crazy to actually have them i i mean i guess would be like sunglasses so it wouldn't be too bad uh umberto says i loved magna doodle yeah magnadoodle was cool i was never good with magnadoodle i like to do it but some people drew like amazing things with magnadoodles uh it just takes like a lot of coordination and patience though let's see uh evo says i didn't hear anything about technical questions from my recruiter but i wouldn't be scared about those i usually estimate my capacities as somebody with one year working experience thanks for the offer though oh cool yeah no problem like i said i don't know how much i could help you out anyway i'm just excited um james ross says light bright is extreme choking hazard yeah my my little one cordelia is my youngest right a year and a half she's so cute but she's the ornish little baby and man it's just like she'll put some in her mouth that she's not supposed to walk up to you and open her mouth and let you see it and then run away like she's daring you like hey look what i have i'm not supposed to have it come chase me right it's just but she just looks so cute when she does it you can't get mad that's like i i love that little girl she's she just like i spoil her so much i can i she she wants me all the time this morning when i drop my wife had to drop me off at work because my car is not working right now um so cordelia was in the car and i waved goodbye to her as soon as the car drove off she just started crying and screaming that was like the worst thing it just broke my heart but just she wants she wants to be around all the time uh anyway sorry for the side to the side i mean anybody if you ever had a little one or something i mean i'm sure you you understand um but it's just crazy how that little person there just you know you do anything for them and they you know they're they're like kind of helpless without you but anyway not coding related sorry um let's see sin says go see hyper js this is super hot what type of js i i haven't heard of hyper js rumble rose says that's basically the same thing i've been thinking i've been doing lots of back end work for my own business for the last two years so i've got lots of projects built for a portfolio that's cool i mean having a good portfolio is where it's at i mean that's what people are looking for what projects have you done if when we hire people here that's all i want to know i could care less about your resume i only read the cover letter to make sure that people are literate and i i want to know like where's the projects let me see them let me see the code oh cool jeff miller says that they do still make light rights and uh his daughter got one a few years ago awesome i'm gonna have to check in on that not right now i i i'd like to get one for my office i wonder if they make little ones that would be safe because cordelia is rarely in my office all right youtube said i thought i clicked this to see some coding oh yeah youtube uh usually at the end of the stream we do question and answers so like the first hour we do mostly like coding and then the second hour is mostly question and answer i was thinking about doing some more stuff with this today but i i don't know because the stream is getting really long now um which is fine the question answer is good um so we might not do any more code if you want to see the code part um check out the recording of the video and and just watch like the first hour um well i take it back skip the first 15 minutes because we had technical difficulties and then watched the the next hour after that vince says i've been around long enough to remember watching that commercial on tv uh sj says yeah i was born in the late 80s yeah i was born in 85 so i i still like vaguely remember 80s stuff and really like most of my childhood that i remember was from the 90s uh vince says uh this is in response to alexi i started out as a back-end database developer before i knew anything about the web and i definitely like front end better i'm sure opinions differ okay that's that's interesting all right so vince started with back end moves to front end and likes front end so yeah i think it's good to try both and see what you like and then different people are just gonna you know prefer front end or back end or like both all right james ross says which of your children is your favorite he said okay it's cordelia i don't i love they're all so different it's crazy that they're all like they all had like the same set of genes going in right and now they're all so different um so yeah it depends i mean depending on how a certain child is acting i may not like them that much at that moment but overall you know i just have a great time with them and uh even as they get older they change so much all they all have different personalities so you know it's just so hard to make that make that call my wife is different though my wife will tell me like this is my favorite child right now you know she knows exactly and it's usually based on which child gave her a hard time that day and whichever one didn't is the favorite one john hanson says a good perspective jesse problem solving is the key to all sides of coding all are good and important cool thank you i'm glad you agree uh john hanson says they do make a travel size light bright oh that's going on my amazon wishlist right after this stream for sure um cat d says what if your portfolio is a to-do app project and a hello world project uh cat it's better than nothing to i here's what i think some people say don't put like the you know your your projects like your tutorial projects on github but but here's what i think if that's all you have put it on github because it proves that you've actually done some coding later on when you get some real projects then you might want to make those projects private or take them off github i i really don't even worry about it to me here's the way i feel if i see somebody that wants to work here and they have real projects mixed in with tutorials that tells me that they're continuing to learn right and they're not too good for tutorials anymore all right and i like that i appreciate that because if i find a dev that isn't learning anymore i don't want to work with that dab no matter how good they are right now in two years they're going to be terrible because they won't have kept up with anything so so cat go with that if you can but try try your best to get some some other projects on there you know as soon as you can you know before you really start trying to apply for places and they don't have to be paying projects they could just be some side project that you really like or you could try to contribute to other people's projects so like you can contribute to the projects that we work on i try to make some issues like easy for beginners to just learn the process of submitting a pull request on github so if you're interested in doing that let me know you can message me on twitter or something and i could help get you some more info i mean if you already know how to do it that's cool i don't want to assume that you don't but if you need more help let me know um or find some other uh project that you really like and see if there's something you can contribute to because employers will see that too you know they'll see a record of your contributions even if it's not your own project hopefully that helped let me know if that was wasn't helpful or if it was confusing or anything and i'll try to clarify vince says um if you're curious originally oracle um pl sql developer for phone company oh interesting interesting i've never done anything with oracle uh sj says i actually have special lighting in my office that's specifically designed for offices where the computer users spend hours on the computer it's really good for the eyes oh that's that's actually pretty cool maybe i'll have to look into that i mean i really should think about this if i'm going to be a programmer for the next i don't know until i retire right um i should probably think about the effect it's going to have on my eyes long term uh hammond said please say something on full stack with react i have to finish a voting app for free code camp i know react but i'm confused to use react or not um yeah so i would say uh for react like you could do full stack javascript right so and you could use react on the front end and then node on the back end um react works a little bit server-side as well so um you can do server-side rendering with react and then serve those pages and then potentially do client-side routing and stuff uh you know once everything loads in the browser so you can do some things like that for your project i don't think that would be necessary to actually do server-side rendering unless you really wanted to but i definitely think it's it's uh a good idea to do full stack javascript all the way across it just makes sense you know you learn one language and you're able to do front-end and back-end i think that's cool if you got to learn something else for a project that's fine too right like we use php sometimes but if if you're trying to learn and start out and being able to do things then you'll save a lot of time by learning javascript and being able to write it on the front end of the back end so um i mean if you have the time and you'd like to learn more about react it might be really cool to try to do that voting app with react and set up the back end with node um if you're more comfortable with something else though and you just need to get it done then you know go with that i don't think there's any real reason why you really really would want to use react for that but i i really like using it i think it's improved the quality of my work uh and i think it's fun to to work with once you you know once you get the hang of it i really enjoy it vince says it looks like you're about to wrap up and i have to go anyway i enjoy this though i'll look for your live stream again if i can thanks oh you're welcome vince thanks so much i really enjoyed talking with you uh on the live chat um so yeah hopefully you can come back for another uh another stream sometime uh hamlet said i saw some tutorials uh they use two servers it's confusing yeah yeah uh we use two servers sometimes for some of the things we do so basically you'd have um a back-end server that's node.js and it it handles um it can handle things like like routing um uh data like grabbing data from a form or something and sending it off emailing it or you know using it with an api and then you would have another server that would just run your react app so usually like if you have an api or something then you know you want to run that as a separate server you don't have to i suppose um trying to think out like you could let me say this way you could have all the code in one project right all one one github project but you would still want to run that separately right like you want run something on let's say port 3000 that would be like your react app and then on port 8080 you'd run your api and then like locally you could just hit that api you know on that port and then when you actually go to put that into a production setting right you would still run you know your server on on a separate port right and then you could just hit that from within the same server if you wanted to and then have like your client-side stuff or your react stuff publicly available hopefully that's not super confusing but i would say like yeah having two servers um when you need like a back end in the front end is not unheard of let's see oh cool cat d says yes very thankful thanks all right all right uh cool i'm glad i could uh glad i could help all right so i've gotten to the end of the live chat i definitely don't really want to go any longer with this because we're already over two hours uh with the stream um which is fine but i think it's really intimidating for people to see a video that's two hours long and say like wow i'm not gonna sit through two hours so um i like to keep it somewhere between one and two hours and don't go much over um let's see he says oh emmanuel said i don't understand right let let me know what you don't understand i'm assuming that you're talking about like when i was talking about running two different servers uh let me know if that's the case and and i'll try to i can pull up a repo where i ran two different servers if if you want to see an example um let me i'm gonna yeah okay let me pull up a repository that i did actually run two servers with um so let's go to i don't think it's here let me get my profile um i'll make everything bigger so you can see it as soon as i find the repository and it was [Music] there we go all right so this was one of my projects that i did when i was doing the react nano degree um um oh you know what actually i think i had the server in two different spots so uh this project i was the first cohort to go through so they changed it a little bit when i first started this project they had the server separate uh and then a couple weeks later when i checked back again um they had changed it so server is actually in the same repo but at that point i was almost done with the project so i didn't switch it over so basically here's what you would do this is your react app right and if i go into source here you can see i have you know just like a normal index.js and everything and then over here this is the api server where all the data is so we have this server.js file so what you do is you start this up and then i'd be able to get posts i'd be able to create posts and have them stored here and i could get posts i could edit them but i still had to run this and let me see where i had see if it's my reducers no it's um utils so you can see where i'm hitting that api oops i forgot to make the text uh font size bigger sorry about that all right so here like we're hitting that api so i'm running the server on localhost 3001 i'm hitting that api to get the data um so like this just grabs all the posts um this one gets posts from a certain category this one actually gets just one post based on an id this one obviously deletes a post so you can see like we're hitting that api that other separate server um from this app this app would run you know its own on its own server right so or you know in this case on its own port on on localhost so i think this one would probably run on 3000 and then we had the api running on 3001. uh so this is not unlike what you would do in a lot of production apps i mean um like right now we we're getting the data from the from wordpress through graphql so that runs on it it's a whole separate thing um and then in react which we're running locally we're grabbing that data right so we have two set up there if you were to do javascript full stack you would have the same setup you would make some sort of an api to manage your content and that would be running and then you would have somewhere else probably a react app that would run and it would run um so that clients could could hit that you know with their browsers um you know users but it would grab the data from the api um so i mean i think it's it's a common thing uh but just when we're talking about javascript and doing it all in javascript it can be confusing like why do we need uh two different you know two different ones so anyway that's why do you absolutely need two different servers probably not i mean think about you just think about the way wordpress works normally normally you do everything just in in wordpress itself it hits the database you use php to put together everything and then it spits out markup to the client right um but a lot of sites now are drawing data from separate apis so anyway so that's that's kind of what i was trying to explain all right emmanuel says okay i think i grasp it now we'll read more on it all right cool cool yeah thanks for the question too because i'm sure there are others that are either watching now or will watch later that probably were confused too i'm sure i didn't do a great job explaining it but hopefully that maybe just helps you out a little bit and now you'll know like what to look up uh to read more about it all right so i am going to uh stop streaming now see tomorrow's all right i'm pretty sure i don't have anything lined up for tomorrow so i should be able to stream sometime around 1 p.m eastern time and we'll most likely be coming back here working on the same project again uh we'll see how much i get done between now and then maybe we'll pick up at the same same spot um let's see oh emmanuel said oh you did a great job that's why i i have to stay stay with you all right cool says thanks so much you're welcome you're welcome i appreciate you saying that um just i'm glad i could help all right so i am yeah i'm gonna wrap things up i'll be back tomorrow and uh until then uh thanks for watching have a great day you