React + Prettier + Standard JS - Live Coding with Jesse
Skills:
Frontend Performance70%
Key Takeaways
Configures Prettier and Standard JS in a React project
Full Transcript
hey everybody it's Jesse uh sorry I did not get the Tweet out about this video until uh 3 minutes ago so I don't know if how many people rely on Twitter uh to know when I'm going to go live so maybe it'll be a little bit slower here at the beginning in terms of viewers uh also I didn't even get the uh event scheduled until maybe about an hour ago so uh today's just been I got in late and I had all kind of stuff going on I actually just interviewed a student uh who's interested in working uh with my department uh so that would be awesome if it works out I know uh he has another interview uh with a company near here as well so I wish him luck with that but uh hopefully he decides to work with us so yeah I'm just going to wait I'm not going to get started for maybe a couple minutes we'll just talk for a little bit uh just to wait for some people to come in because I um I alerted this so late there we go okay now now we're at a normal it was showing seven viewers for a while and now it just jumped to 54 so that's closer to our normal amount of viewers um all right uh we got some yeah we got some people looks like some new new faces new names in the live chat um that I haven't I don't remember seeing before so hey everybody oh we got hello from the Ukraine awesome and let's see La tell me if I pronounce this wrong is it Laquita or Lita uh let let me know how if I pronounce that right um uh but on time for a live chat so awesome and um Yousef asked will you do a to-do app with react from scratch okay now we're picking up we're up over 70 viewers now so let's um let's get started all right everybody shouting out where they're from we got India Barcelona UK awesome thanks for watching from from Chile from Rome awesome wow we got we got people from all over so and it looks like yeah it looks like we're getting some retweets here so that's picking up picking up fast from Los Angeles Romania uh all right so today I'm really excited about this talk topic and uh this was totally um I hadn't planned on doing this today but I got a pull request um from uh well I actually got two pool requests so let me let me bring these over just to show you because I want to give give credit where it is due so between yesterday's show and Today's Show I got two pool requests this one is from Danny and um you can check that I'm not going to go through all these on the air because you can see in the link in the show description uh you can check these out but had some cool stuff here um kind of preparing for even more so I'm I'm expecting I guess another another Pool request here um but did some kind of some optimization things so not no changes that would really be visible like uh to the user uh but definitely going to make things more readable easier to maintain um in terms of the code the other other pool request uh this is what we're going to be talking about today uh so vet this is his second pool request uh he had a great one um I think it was a few days ago or maybe uh yeah I think it was Friday uh that we talked about yesterday but this one uh so if you were here yesterday for the live chat uh there was some talk about using uh some linters and things to try to get more of a standard um uh style to the coding so uh I I haven't I've been a little bit sloppy in coding this and in general I've been sloppy for for two reasons one the timeline for this was really tight so I just kind of cut Corners uh in in terms of formatting everything properly uh to to get it launched also it's it's always been just me working on projects and that's allowed me to get a little bit lazy because nobody's ever around to call me out on it and um I'm not saying that that's a a good thing that's definitely not a good thing but that's just how it happened uh but now it makes a lot more sense for me to have kind of a standard format for my code because all of you are looking at the code and you're you're helping me we're collaborating on this so great idea so we're going to use I don't know if you can hear that but my stomach is growling so if you hear that I'm sorry sorry but I just um I forgot to eat today so uh I don't know if that happens to you but sometimes you just get you get working and you know before you know it uh you haven't eaten so I have to make sure I eat after this stream um so we're going to use a couple of things and uh you've probably been seeing some of these things uh I know at least I've been seeing them on Twitter a lot mentioned uh prettier and standard JS I'm going to kind of take you through um what I did I I know it looks like I haven't merged these yet but I I did merge them I just haven't pushed it uh back up to uh to GitHub but let me bring over two things I'm going to bring over my command line and I'm also going to bring over or I'm going to show you the code I've Linked In the show notes to standard JS their website and to the website for prettier so you can check that out you know kind of as we're going if you want to learn more about it and first of all let me show you I I do I want to show you the amount of errors that I had once I finally ran this uh so let me go back up so this is kind of I like slowly just narrow down the errors I think this is the first set so at first I had all these errors of just things a lot of them was components that I had imported or into another component and then I never used it so I had I guess at some point thought I was going to use use it and then never removed it I was really surprised at how many of those there were because I I thought that I was usually uh pretty careful about that but evidently I was not uh so those are a bunch of bunch of stuff there also if you remember from our episode whenever we uh we were making jQuery work with react and we had a bunch of functions in a separate file in our in our um what what file was it our app.js file yeah so we had in a separate file we had these functions that were using jQuery but then we were calling them in component did Mount so to um when we're using standard JS which uses uh es lent kind of behind the scenes it was looking at that component and saying you're trying to call this function and it's not defined it really it was defined in our other um our other document and then not only that but it was looking at that document where we actually had to find those functions and saying hey you define this and you never used it so so most of the errors I had were because of that okay so not really a big deal so I'll show you how I fix those errors because I'm I'm guessing that maybe if you're going to try to use this for the first time you might run into some of these errors as well I mean maybe hopefully you're not as as bad as I was with uh with my code and you don't get as many errors but I'll show you how to go over those uh how to fix those errors I'm going to show you my package Json first first so that if you if you want to try this out but you don't really want to like pull down my code uh you can just kind of piece it together so let's move this off before I show you how I I did those and we'll go to my package Json let me know if this is this is too small I'll just I could probably let me make it a little bit bigger right now I don't want to make it too big because I want you to be able to see kind of like the big picture here um of what we what we have now that we didn't have before and I have have some things up here that are new too but they don't really apply to what we're talking about today so basically we have this whole section now that's Dev dependencies and this this is what has been brought in okay and remember this is all from ven's uh pool request almost none of this is stuff that I did the only thing in here that I did on my own was I I imported this uh Babel es lint um package uh and I'll explain why I needed that in a minute um so basically these these four things got this working and then we have some new commands so we have this lint all right we have pre-commit and then we have lint lint staged all right so we have a lot of things going here where basically vet set this up uh which is very very nice of him he set all this up to look through all my folders where I had components and JavaScript files and to go through lint those and then automatically reformat them based on the standard JS um specifications okay so that's what the the linting all right is more like the standard JS the reformatting is from prettier okay and if you check out the docs for those uh you'll see so this is what's added also I I added this part down here and this was basically to deal with some of the errors so I'll talk about that in a second uh when I deal with those errors and that's it and as soon as I'm going to push this code I might as well do it right now let me push this to GitHub right now so you can follow along and everything is um is up to date on my other screen I'm just making this um I figure you um you all know how to run a commit uh but also you see this is new so this is um basically this is happening right when we run a commit before we were just doing a commit now all of this runs before the commit happens so really you can't you can't make a commit now without everything being put in uh a standard format which is awesome and that was that was from vet that's what um his additions here are doing all right so all this is now being pushed to the master branch and it's completed so if you go to the repo on the master Branch you can see all of this you can open up the uh package Json you can see everything I'm talking about and follow along uh so let me talk about some of these errors I'm not going to go over every single error just the ones that I think were kind of like it it was kind of tricky for me to figure out and uh kind of like to share how to get around those so um let's see we had these ones as I said are are really easy I just Define these components and hadn't used them okay so some of these like I said I had been defining these functions and not actually using them well I was defining them in the app.js file but not using them there and then I was using them in components but it was coming up as not defined so here's how I got around that so for some of them like for Fetch and for you know the dollar sign I just added them globally as uh since basically I use fetch in almost all the uh page level components so if you just add this you know this this whole section here okay including the ending things that fix that so basically that just lets es lint know that it's okay uh you can use these they're defined somewhere and it's all right to you so that fixed those errors but then you don't want to do this for for everything let's say you only use something once you don't want to make it a global so at the page level I did something like this so I use in component did Mount I use init tabs okay this is like I said this is defined over here in appjs so what I did here is I just added at the top in the comment Global and then the name of this function okay and that got rid of that error and I did a similar thing in every component I just put the name of the function so that got rid of those errors you know no big deal in reality at some point if I have more time now I know I've I've discussed this already with with all of you that this project needs to wind up so there's some things that I know should be done that may not get done because um they're not essential to the project functioning and I need to move on because I have a lot of other projects that are lining up that I need to uh to start working on so um we'll see maybe if I get some of these student workers that might be a good thing a good project for them to come in and and do some of this but I figure you know there's definitely a better way to do this than to have all this going in a a you know separate file so um that may happen at some point now the next the next error that I do want to talk about that was the trickiest was this one so in resources. JS which is the file we're in now it said there's a parsing error unexpected token equals on line in this case it was line 11 which this is probably different now since I had changed it so the line it is now is at 12 so it was basically throwing an error because we did this so the way that I found uh to get around this is um basically it wasn't it wasn't recognizing that like we're using this class here okay so it had something to do with that all right I'm not claiming that I know technically everything that was going on but basically the problem was that this is a newer syntax and it needed to recognize that as a newer syntax so that's why I installed this Babel es lent okay if you're not familiar with Babel that's a transpiler that lets you use the latest JavaScript syntax and it turns it into older syntax that older browsers can handle okay so I imported this so just yarn add Babel es lint and then I added the flag um hyphen capital D okay or you could do hyphen hyen Dev either way it'll put in your Dev dependencies that added it here and then down here you can add you can say what parser you want ES to use so I added this to the pars so I'm I'm saying es lent but just recognize that it's standard that's doing this but it's using ES lent kind of in the background okay so um we are talking about standard JS all right so that's it that's the only um the only things I really had to do I guess I'll show you the appjs just in case hopefully this won't be an issue with you because you won't have all these functions sitting in a separate fun file like this but all I did was all these functions are the one that I'm using in components and I'm not using on in this particular file so at the top I just did es lent disable and then at some point down here I reenable es lent so I enable it again here okay so the disadvantage is like everything in here is not getting linted properly although I did run lint before I did this so all the other errors that were in here here I fixed so these are all okay uh because I did it beforehand uh so I could you can actually like specifically uh put in like the the one rule that you want to rule out inside here but I couldn't find what it was I tried a couple of different ones and it wasn't working so just for the sake of getting this working before the video I um I just disabled everything within here okay so that's pretty much it that's all it took I mean on my end that's all it took to get this working vet I'm sure had had more work on his end and you can check out his his pool request to see all the work that he did and and everything that changed all the files that changed but at this point let me show you the results I know I've been ignoring the live chat uh for a few minutes I will get to you and I'll answer the questions just a minute but I I wanted to um I wanted to try getting to the point quickly and getting through it uh because usually um what happens is I get a bunch of viewers right off the bat and then we kind of like I kind of mess around a little bit and just kind of talk about some general things before we get started and I usually lose a bunch of people probably because this maybe is their first time viewing and they're thinking like what's this guy doing I thought he was going to talk about whatever I the title of the video is uh so that's why I'm ignoring the uh live chat right now but I'll get to it in a minute I just want to give you an example of how everything is um is now formatted kind of autof formatted and uh let's see let's try to do a side by side so I'm going to bring up this code and you can do you can open this up in GitHub as well on my other screen I'm just opening up this project in GitHub and I'm going to kind of go back in time to a previous commit before I did all this and we're just going to check out since I have the resources page up let's just check the resources page just to see what the difference is so I'm going to go I'm going to put these side by side make this a bit bigger for you and see I haven't I actually haven't compared this yet so hopefully it's the comparison is somewhat obvious so we might have to try another file but um you could see well aside from you know slight slight difference up here we have yeah so so I probably went back too far some of the stuff had been changed so let's get down more into the um into the body of this wonder if this is even going to be a good example no it's not because I went back too far sorry about that let me um go back to a commit that's maybe I want to go let me go somewhere that's maybe right there we go this this should be closer oops click the wrong thing here we go and sorry if you if you're not familiar with Git and GitHub and you're just you know kind of watching this you're probably somewhat confused about how that works so uh sorry about that if you watch some of the uh previous videos I explained uh how more about how how git Works uh um no my um uh my trackpad just ran out of batteries so this is terrible at least I now would be a great time for me to look back at the live chat and see if I can get I do have a mouse here I'm going to turn this mouse on so that I don't have to actually leave and go get batteries somewhere although I could change the batteries out from the mouse and put them in the trackpad but there we go it's just easier to use the mouse all right I haven't used Mouse in so long anybody I think if you use like a Macbook or an iMac with the trackpad you understand what I'm talking about once you get used to it it's just like Mouse using a mouse feels weird all right so I do have the mouse now um let's go I'm actually going to go to that app .js file because I think that has the most potential for improvement uh and probably the out of any of the the things that I've done so that might be the most drastic uh and obvious change so let me um make this a little bigger and so we can see so these are the same files before and after using uh using prettier so we did we did linting with uh standard JS and then prettier does like the auto reformatting uh so let's see so far not not not bad you so I did take this out because uh obviously like this is not really needed if we're doing going to do all our this lenting and I'm actually somewhat surprised at how well formatted this was okay big here's the big thing that that you can you probably already even caught this there are no semicolons at the end of the line here but there are here and we talked about this yesterday is that when when I was learning JavaScript it was always like you have to use a semicolon at the end of the line right I mean I think some of like the tutorials like the in browser tutorials if you don't put the semico and it doesn't work you know you have to go back and fix it so I'm trying to get away from that but obviously I'm I'm still doing it I probably don't even realize I'm doing it sometimes so with standard JS you don't use semicolons okay so all the semicolons are gone and OB and everything still works right it's not nothing's crashed uh so that is an obvious thing here we go this looks different function sticky nav okay so this is a big example of a change right this is really obvious so before we had I actually didn't write this code uh you can see I got this um from someone on codepen and credited and everything so I it's it's legit to use um but everything was written all in one line like that which is pretty hard to read now this is automatically done that it's all moved on to separate lines so yes it takes up more lines certainly but it's so much easier to read like that so that is one really useful kind of change in the uh in the code there the other thing it did was it it made me so it threw an error over this and it made me I was actually had to change this um I had to change this manually it wouldn't let me just use ve and Define all these things I had to use a separate VE for each line so I guess that's good to know that that's that's the default with standard JS so you get the point you can check out you you have access to the repo you can check all this out so I just wanted to show a quick example of how this this works now I will check out the live chat I'm sorry for having ignored you but if you ever watch this you know how I am and once I look at the live chat I tend to just talk a lot and uh to you all and answer questions so uh I wanted to make sure I got through this and wow okay so we pretty much got through most of what I wanted to say in less than half an hour so we'll say this if you are only here to check out prer in standard JS and you don't really care uh for any of the question and answer stuff uh you can uh thanks for watching and uh you don't have to watch anymore because that was the demo uh for all of that but if you do have any questions you want to stick around put them in the live chat I'll go through all the questions in the live chat and I'll I'll provide answers and uh uh a lot of times everybody else in the live chat provides really great answers as well so it's a good resource to you if you can't stick around or you're just nervous about asking a question in the live chat you can direct message me on Twitter or you can put it in the comments uh to this video uh so a link to my Twitter profile is in the description for the video all right so let's get to the chat I'm starting at the top and I'm just working my way down also so let me know I was getting some messages that the stream Health wasn't good so let me know if you you had any problems with this stream that's really odd usually the internet connection that I have um at work is is really really fast okay so everybody everybody if you remember the beginning was kind of shouting out where they are from which is awesome I love to see where you all are from so we had Romania Germany another one from Germany um somebody asked about my editor which uh which is great I don't mind I get asked that almost every video um but I don't really mind uh because you might have just joined in you didn't weren't able to check it out I do have a link in the description to the the tools some of the tools that I use so if you're interested in what I use check out the description I link pretty much everything that I'm using I'm I'm linking in there uh we got somebody else from Los Angeles uh let's see I had said earlier I talked about um I asked if anyone else forgot to eat when they were working uh and Patrick says forget to eat more than I remember to eat Rohan forgets uh sometimes I forget that I've eaten don't even know how that happens so like somewhat the opposite problem um okay so uh surv has a question and this this question was like maybe 20 minutes ago so hopefully you're still here if not maybe somebody else had still wants to hear the answer uh ask how is this different from es lent okay so uh vene actually gave an answer uh but I'll read it out in case you're watching this video later on and can't see the live chat and the answer is as I mentioned standard JS uses es lint uh as V says under the hood so kind of in the background it's using ES lent okay so uh but it's using the um the standard all like what is specified in standard JS so you know if you go here and you can read about the JavaScript standard style okay so basically it's it's using ES lint to enforce the JavaScript standard style and you don't have to do any of the formatting like you don't have to configure sorry you don't have to configure es lint at all it does it for you sorry I'm going to take a drink okay um so hopefully that answers uh your question and uh if not uh you know ask for clarification and uh we can talk more about it Andrew says uh hello folks I'll watch the replay on way to home have fun all right thanks for stopping in Andrew uh yeah throw uh you have any questions or anything um later on when you watch it put it in the um comments please all right so Sebastian ask why don't you use a lter for atom so you get the errors as you write them actually to be honest with you I have up on my other screen a couple of atom plugins that were recommended uh from the the page the uh the page for standard JS so I was looking into using plugins for atom to do just that I just didn't have time to get it all working uh before the video so if anyone uses standard JS and uses atom and has a plugin that you want to recommend please let me know and uh cuz i' like I I was trying to read through some plugins to figure out which one was the best to use but I I didn't come to any conclusion yet all right we have someone from Dubai awesome uh noi says nice anyway I'm still learning basic JavaScript in HTML this stream is way above my knowledge we'll come back to it in a few months when I know a little more um so NY yeah not every stream that I do is this high level so some of them are really like basic uh CSS changes or basic JavaScript HTML stuff so um just check out uh if you want like you can follow follow me on Twitter and or subscribe to the free code Camp Channel and then you'll get alerts saying what topic I'm going to be working on each day and maybe there will be a topic that'll be more like at at your level where you're at right now I'm also going to be doing some beginner videos and putting them on my own YouTube channel which is linked in the description so you can check that out as well uh and maybe if you want to subscribe it you don't have to subscribe my channel but you'll get the benefit of being alerted when I do upload those uh I think um since I'll be on vacation next next week I'm going to be at the beach but it's looking like there's going to be some rain so maybe I'll try to get some of those videos done then and so maybe they'll be posted next week uh I think that would be nice since I might not be able to live stream if the internet's down at least May or if the internet's not good enough at least maybe I can upload some of those pre-recorded videos and those are going to be initially aimed at like people who are just beginning all right a high says Noy you will get there I used to be in your shoes eight months ago now I'm interviewing for four companies awesome uh aim high congratulations on that that's that's really uh really awesome to hear um let let me know let us know if you get if you get a job from any of the uh companies I'd love to hear the good news so uh good luck with that uh someone from Orlando sends their greetings hello from Nigeria awesome uh Andrew says if you get in the industry and you're good it escalates quickly so good advice yeah just you know get in there and give it a shot a high says uh it yeah mainly uh free code camp but supplement my learning with you Demi okay so awesome resources obviously free code Camp because if you're here you know about free code camp but Udi also $10 courses I have done I did a course from udmi before uh that was like one of those $10 courses and I did like it it was useful I know you if you've heard me before say I don't think I've spent more than like $30 on course coures um learning this stuff but uh udmi was one of the places that I did spend money on and uh I was I was happy with with the course noi says uh learning with Treehouse Treehouse is nice I've looked at treeh house and stuff and um and it looked nice I haven't done that much with it but uh maybe if if anyone watching has some experience with treeh house too and wants to comment about it from what I understand it it seems like it's a pretty good resource um we have someone from Russia awesome so um LOL LOL asks hey Jesse how big is your company how many employees uh we have like 500 employees I think so I work at a university um a university here in the United States and it's a small University so we don't have maybe like 2,000 students so that's that's considered a pretty small um university and we have I think about 500 employees and that that includes the professors uh as well so the staff and the faculty combined are about about 500 uh and my particular I I actually work in the marketing department and we we have in my entire department I think it's only about 15 people and my my division within my department there's only three of us uh and only two of us actually do any code so so it's really kind of small I guess that we really only have two people doing code and uh we we almost never even work on the same project because we're just kind of really swamped with projects all the time so I'm usually working by myself as I mentioned earlier I am getting some student workers and maybe I'm trying to set up some internship stuff too maybe for the fall uh so hopefully I'll have some more people working I would really love to have the student workers involved so they can get some good experience uh in using you know GitHub and some more modern build tools and things and get some good experience to put on their portfolio I think that would be awesome so anyway I guess that's you know kind of small small company small University uh we have hello from India awesome noi says what I can stay away from using semicolon and JS yeah who knew right I only recently found that out I guess I'm behind the game though which is I mean that happens if you if you stay off Twitter for a while it's easy to fall behind um aim high says um well it says Noy follow me on on codepen uh just go to codepen and search my username so I don't I don't know if a high meant for me to uh give the username out loud so I'm not so uh I'll just leave it out if you want if you don't mind and you want me to read out your username so people can check out your code pen let me know and I I will do it Rohan prefers the semicolon and LOL LOL also prefers so okay so we have some some debate here about the semicolon I prefer the semicolon simply because I'm familiar with it I'm used to using it but I imagine it will be better if I just get rid of the semicolon that way it's just one less thing I have to worry about one less thing I have to do uh I'm sure it will speed up my my coding ever so slightly but over the long long term that'll probably add up and it'll save me like 10 minutes of time which which would be important I guess um Patrick says I really prefer one ve let or const with commas is there a way to disable that yeah actually so if if you're you're not sure what he's referring to uh we had this comparison here where was it oh okay here so we um when we use prettier or I'm sorry when we use uh standard JS to lint this it said that I had to change this from using this V and just using One V and defining multiple variables to putting each variable being defined with its own V on a separate line there and uh Patrick ask if that can be disabled I'm pretty sure it can there's anything that you can do in es lent in terms of disabling or customizing you can do with standard JS because it's using ES lent uh in the background and if worse comes to worse you could just add in like in a comment tag disable uh es lent if you wanted to and just disable that portion that's that's kind of like would be a pain to have to do that all the time but if you really wanted to that that would work uh Andrew says Jesse have any experience with browser extension so you mean like making a browser extension if if you mean making a browser extension then no I've never actually made my own browser extension uh I have been interested in doing it at times in the past but I just never really like had had the time or like a real need to do it uh but but also at least for my purposes if I wanted to make a browser extension that could do something I it's easier for me to use something like tamper monkey which I do use and then just write the code in tamper monkey and apply it so I kind of get around having to really learn how to make a browser extension and I can still get done what I want to get done so um but otherwise I don't have any direct experience with making uh a browser attention all right we have someone from Palestine welcome and sorry it keeps uh for some reason normally it doesn't do this but today in the live chat I don't know why but I keep getting bounced down to the bottom of the chat so I keep losing my place all right so okay Palestine someone from mov um oh Andrew from malova awesome I have um my my wife has some nieces and nephews and actually one of them is my goddaughter uh who were adopted from mova uh so awesome Nigeria welcome uh daff derp asks are you done uh yeah actually so I know it's it's it's way early right it's I've only been on for 40 minutes so and at the time when you asked that it was I'd only been on for half an hour so yeah basically with for the topic of the the stream I'm done with that so um I know we had talked about doing shorter streams so I'm I'm making an effort to do shorter streams um if you if you missed if you're just coming in and you missed it the replay will be available on free code Camp um just a few minutes after I end the the stream so uh you can watch the replay Andrew says today I made some big rebases and merges had to remove some big files from entire repository history 386 commits wow that's crazy uh yesterday we did a um a stream on doing merges of pool requests and stuff so uh wow that seems like I mean I don't know maybe I don't know what to compare that to but that really seems like a lot of of commits to be working with there um Yong asks where do you deploy the website AWS it's actually digital ocean all right Ro Rohan answered that so yeah digital ocean we do here at the University we have three different hosts right well actually four different hosts the main website which is franciscan.edu is actually hosted here on campus and the IT department runs their own physical servers there okay that that is actually going to change soon and we're going to when we redesign the site which will be like probably the next really major project that I do um I'll do a lot of little projects in between when I start that one but we host that there we host some sites on GoDaddy so we just have like a little shared Hosting account that we just do some really minor stuff with uh but it's easy to it's nice to have because you can do like the oneclick five minute WordPress install and have something going and so um we also host on digital ocean and we have a site on AWS all right we have uh someone from Mexico awesome all right no said thanks Jesse you're welcome all right looks look like somebody was talking about getting discounts on udmi courses and uh mobin 92 says you can go to real. Discount I've never been there so I'm not endorsing the site because I don't I don't know what's on there but uh I guess there's discounts for stuff on there um I'm not sure how to pronounce most of this name but it ends with Isaac and I know how to pronounce Isaac so I'm I'm sorry I just didn't want to mess up your name so I didn't want to attempt it but says which would you advise becoming a full stack developer or front-end developer I um one day I would like to know enough about the backend to be able to say I'm full stack right now I'm only comfortable saying that that I'm front end and my idea was well I'll start with front end and make money with that and then slowly work my way to learn everything learn the back end and be full stack so that was my idea and that's how I wanted to do it I will say if you start from the outset saying I want to be full stack you'll probably get there sooner for me I just had a family you know I need to take care of and I need to pay the bills so it was like okay I'm going to start out because I know I can get money doing frontend work right now uh so I haven't made it to full stack as quickly as I had hoped just because I'm busy you know doing my job as doing front end stuff so it kind of depends on what you want def it's easier to become a front-end developer than a full stack it'll take less time so if you really need to kind of get into it and start making money with It Go Front End first and then learn the rest but if you have the time to just dedicate to learning uh Go full stack and then you'll make more money as a full stack developer uh most likely uh anyway so that's my advice maybe you all in the live chat have some better advice than that or some alternate opinions but uh that's that's kind of my viewpoint on it uh okay there someone from Wales awesome hello Andrew says with time you will be full stack even if you don't want it and uh that's that's kind of true I'm sure Andrew was joking a little bit but that that is actually kind of true if you'll see like if you've watched any of my streams before occasionally I'm doing stuff that's definitely not front-end even though I'm a front-end developer and especially if you're on a small team or freelancing yeah you're going to have to to learn a lot of stuff eventually so um yeah I I mean probably most of us even if we're doing mostly frontend stuff occasionally do have to do backend stuff from time to time so it wouldn't be that much of a jump for us to just do some more learning and and jump in and and be doing full stack not to say that it's easy to be full stack but just to say that that's a natural progression all right have someone from Brazil awesome hello um Andrew says semicolons are noise for me all right so Andrew Andrew is um against semicolons and we have what Rohan and Patrick are on team semicolon Rohan says you could do backend exclusively or networking or full stack it's just what you like yeah I didn't even mention that yeah uh I guess it depends on what you like doing if you don't like doing backend stuff then don't try to be full stack uh if you just like front end stick with that because that's important uh you know you don't want to be stuck doing something that you don't like Rohan says for example I get bored easily with one thing so I would prefer full stack Andrew says or what the company has for you to work yeah that's that's important too you know if you get a job doing one or the other then that's that's what you're G to do Rohan uh said with small to medium companies you are usually you usually are overworked but you do get to try lots of stuff yeah I can understand that bro so that's that's where I'm at right now exactly small company overworked but I do get to do a lot of stuff so I will say this normally my schedule is nice I don't work a lot it's just been crazy for the last month or so so hopefully I can get back to my normal working hours and it won't be so crazy all right Sebastian says I'm Romanian but for the past 8 to9 years have been living in Spain awesome Andrew uh Andrew said he had a year in a company and during that year tried Java schola PHP as a back language and even wrote SQL so definitely a lot of stuff just to do in in one year okay the es lint rule for repetitive ver is one one ve so if you're interested in learning how to get around uh this being able to do this instead of being forced to do this with the es lent the rule is one there so you could disable one there right um or or enable I'm not I forget how that works but basically look up in the docs uh you know do a control fine for one bear that's what you want it's what you want to look for uh Rohan rohan's commenting on the length of the video when I was talking about that that we went from like 2.7 hours to 30 minutes big difference so definitely cut it on this video is going to end up being an hour after we get through the Q&A but the actual like I want to say not that I did any coding today today but what would normally be the coding portion was only 25 minutes which may be a record I think in my early streams I I kept it pretty short but that's definitely short compared to what we've been doing uh Joshua asks what UI Library do you like to use with react I've been having trouble with the at bar on material UI uh so for this project I actually use materialize just their regular framework and I've had to adapt things to react at times so uh I don't know that I recommend doing normally I do recommend materialize I really like that framework I've used it a lot and I'm familiar with their all their conventions of like class names and things so it's easy for me to build things rapidly with materialize but I am going to need to switch now that most of what I'm doing is in react I think I'm going to need to switch to something that is is more react specific so I know there is uh someone linked I can't remember maybe it was vet maybe yesterday linked uh to a set of react components that were based on the materialized framework so I'm going to have to check those out I know there's material UI there's material MD or no is it react MD I think I still I must have closed the tab but there was is a uh another material design style react framework that's out there as well and it was MD something um so I don't I don't have a react like component library to recommend to you uh but I mean I have used materialized with react and it's basically worked without without too many issues even though it's not really made for react components Andrew has some good advice uh when for when we were talking about commits and everything uh get commits says when you remove something from the entire repository history every commit changes hashes so you have to be careful and announce to all team members yeah uh definitely keep that in mind when you're trying to decide like what how you're going to merge things and um if you're making changes to your commits how is that going to affect your other team if it's just you then you could pretty much do whatever you want I guess and it won't really matter but if you have a team of people submitting pool requests and all working on the project then uh you you don't want to mess everything up for them so decide on beforehand I guess on how you're going to handle things like that with your team uh V asked did you check now.sh for hosting actually I I went to a conference where they demonstrated how to use now uh to get a site up and running and you can even buy domain names right through the command line it was really awesome and quick so I am familiar with using that uh I think I think I would like to use it at some point I mean obviously not for this project we already have everything set up uh but possibly for some smaller projects I would like to do that um I'm not sure like I mean obviously we're doing some low balancing and we have this running on multiple servers and then there's so there's a lot more going on here but I think there will be some smaller sites that I'll be working on in the near future I think that would be a good candidate for trying that out uh I'll have to look into the pricing as well because obviously I would want to use if I'm doing this officially for my job we're going to be using a you know a custom domain and I think if you use your own domain at that point you have to be using I I don't remember the pricing structure but uh anyway I'll have to check the only thing basically I need to look into is the pricing and to see if it would make sense to do it like that but otherwise I'm very impressed with using now uh for hosting so if you're not familiar with that the same people that do nextjs which is the basically kind of I don't I don't know what the right term for it is but like the scaffolding for that I'm using to build with react that same those same people do now which is a way to very easily deploy straight from the command line uh right to hosting and uh it's it's just it's so simple uh you know definitely check it out I don't want to spend a lot of time describing what I saw at this conference because you could probably just find the video a video of it or check it out for yourself and see but I mean literally as I mentioned you you can do as much as even buy a domain name right from the command line and in a few commands have a completely new website up and running with your own custom domain and an SSL and all that uh it's really really uh kind of slick and uh nice process um noi says uh LOL Jesse I'm following the same footsteps I'm focusing on front end then later on back end but I want to get my foot in with front end yeah I I mean I don't think it's a bad like I said it depends on what you need you what point in life you're and what you need I mean for me it just like I didn't have time to just spend a lot of time studying and and dedicate my time to that I needed to make money like literally I had quit a job and I was looking for work and couldn't find work and I needed to make money and learn something so I caught a break and a friend of mine had a marketing company that needed some website work someone to do website work and you know I was getting some work on the side with them and the only the way for me to get even more work was to learn this stuff so that that was what just what I needed to do um because I I had a family I had to pay bills so if I had to do it again maybe I would have and I I was completely single with not a lot of responsibilities maybe I would have tried to like just dedicate a bunch of time to just learning and be you know be full stack but uh either way I think is is definitely respectable legitimate way of going it just depends on what you need uh Matt says it pays to spend the time to really learn one aspect first okay so awesome yeah something to be said for focusing I guess on on focusing your attention on one thing uh Sebastian asks where should I start looking for work as a front-end Dev uh and we have some answers in the live chat I'll read them out Rohan says oh this isn't an answer to that question uh Andrew says stack over flow so yeah definitely stack Overflow has this whole job uh board that's that's really awesome so let me bring this up just in in case I'm sure most of you are familiar with stack Overflow but if you haven't seen the jobs yet there you see the jobs right here right and they they will show you jobs based on what you searched for on stack Overflow like assuming you have an account and everything and uh and they have your data and uh usually like they awesome jobs like you know check this out front-end developer 90 to 130k that's insane that's that's a lot of money um way more than than I make uh so you know if you check it out you get lots of details about the job right there you know so I would just check it out check out there and then it's as simple as this and you get a lot of other related jobs I've been really impressed with stacker overflow we're actually advertising uh a position here at this University for a web developer on stack Overflow right now uh and I was really the one who pushed for like we need to list on stack Overflow because I was so impressed with how they do things uh and and how they suggest jobs to to people uh I thought that was kind of really really like no other site has has that kind of data and that user base um to be able to do what overflow jobs does so if you're looking to get like a full-time job definitely do that if you want to just find freelance work then networking with people directly I found to be way better than going on one of the freelance job sites the jobs I got from those sites were usually not very high paying and they didn't they didn't amount to much like I didn't get like repeat clients or a lot of good leads from there that was just my experience uh the better clients were were personal connection and I would have a client that they were really impressed with what I did and then they recommended me to other people they knew and then it just kind of grew my like freelance business grew naturally like that so it takes a little while but those clients were were repeat clients and they were great to work with uh so that I had a better experience with that um we had some there was some uh discussion more about whether to go full stack or front end first Rohan prefers networking in backend but hasn't really had a real job yet so uh don't doesn't really know for sure Matt says better to focus in One Direction or uh or the other and that leads to deeper understanding in one spot yeah definitely I mean if if you force yourself to focus you're going to be way better at that one thing than you ever would have if you didn't uh there's a quote from somebody I have no idea who it was but I read a book before and uh they were saying that to be great at something you have to say no to everything else right so you you have to focus on that one thing uh if you want to be as great as you possibly can at that one thing even though you could be great at at lots of different things if you would have choose to do those things uh you have to focus on one if if you want to be really good so I definitely agree with that I mean I'm there are some really talented people that are Greatful developers but even then if they would have focused all their attention I think on on one area they could have been even better at that one area than they already are uh so but I mean you need you need people of all you need some people that don't want to focus and want to have a more broad understanding uh so and there's there are jobs for all different types of people depending on what you want to do if you want to focus or if you want to be have a more general knowledge of more things uh Zachary says it feels like the line between front and back end is so blurred in the JS world I I agree there there's definitely some blurring there I mean because you're running JavaScript on client side and server side uh so it it feels a lot of it does feel the same like when I switch over like you know I'm doing front-end stuff basically but you know I have this this server.js file like have have I now switched to the backend world just with one click here like it's still all the same thing I'm using const I'm I'm using JavaScript like it it is it does feel weird sometimes um you know like where where is that that line but uh but anyway I mean like I said I I think most of what I do is front-end so it's clear in my mind that I'm a front-end developer uh even though I do backend stuff occasionally uh Blazer Tron all right so we're back to the semicolon debate Blazer Tron says learning the basics of JS but I'd rather use semicolons mainly because I've been told that yeah I'm in the same boat that's I I don't I'm I'm probably going to try not to use semicolons as much as possible and certainly now that it's going to automatically take them out for me I'm not going to have them but um yeah I've always been told use semicolon so it is kind of a weird thing although learning to use react was the same way cuz you've always been told don't put your CSS in line and mix it with with your HTML and then we come to react and we have JavaScript HTML and CSS all mixed together right it just seems weird once you get used to it it's actually really nice uh but it's hard at first uh person it seems like the live chat the is like a NeverEnding um chat today so which is great it looks like we have some great discussion going on here so I'm going to keep yeah I I'd say probably we can get through this in about 10 minutes so about 10 minutes I'm going to end uh so I can kind of get move on to uh do some some other work that is probably boring and I don't even don't want to put on a live stream um so if you got a question get it in in about 10 minutes I can't get all the questions then uh please put them in the um uh in the comments or direct message me on Twitter and I will answer them so person asks how long have you been learning I've been learning for the past year and it feels like I'm not progressing anywhere I've been learning this for a long time I first learned how to build websites in 2003 somewhere around there and that was just basic stuff we we just opened up notepad on on a PC and started doing basic HTML and CSS and doing layout with tables and things like that uh so but I I didn't really do that much with it after that so I would say I've only really been like intensely trying to learn JavaScript in particular for like maybe the last four years five years I I don't even want to say five like maybe maybe the last three or four years have I really been focused on getting better at JavaScript before that I was doing websites but I was I wasn't like intentionally saying I want to get really good with JavaScript it was more I was focusing more on CSS at that point so I'd say three years of of more intense Focus uh to get where I'm at right now uh so don't don't be discouraged if it feels like you're not progressing it doesn't always go uh sometimes you learn a lot really fast and you feel awesome and then you work for a long time and it feels like you're not getting anywhere uh and then you'll hit another like spurt like a gross spurt right remember when when we were kids and you just like you'd go to have summer break and you'd come back to school and some people would be like Giants and cuz they hit a gross SP right the same thing happen and coding that's probably a terrible analogy but uh the same thing does happen with coding like all of a sudden you just like it seems like things are just all making sense and you you just get really good and and then you'll hit another Plateau you'll have a point where it doesn't seem like you're progressing but just because it doesn't seem like you're progressing like you you are you're learning things you're retaining things it just needs to fit together uh for for you so uh if this is something you really want to do and you enjoy doing doing then stick with it don't get discouraged uh I'm constantly looking back at things I did even a few months ago and saying wow like I I definitely would do it differently now I've I've learn you know I've gotten better uh so and you you'll get there you'll have a bunch of those moments Patrick is going back to the semicolon thing Patrick does not care about semicolons like in and of themselves but more about consistency so if you're doing Simple JS with no tooling preventing you uh from then use semicolons if so I guess use whatever you're used to using if you don't have tooling to make it consistent for you so that that seems to be Patrick's Point there which is a good point um person clarified uh the question a little bit but I think I I answered that Matt Matt response to person says it starts slow but it can really pick up find some projects doing something you enjoy and it will pick up fast the more you enjoy it the easier it will be for you to spend more time with your head in it good advice Matt uh in person ask any projects you recommend I'd love to work on some so H I don't I don't know what your level is out in terms of project I know there are some websites that just have project ideas I don't remember what the addresses are for those sites now but I'm sure if you kind of search for that concept you'll find some uh you could also try you know some of the like coding tutorials have projects you could work on like free code Camp if you haven't gone through free code Camp stuff there are a lot of projects and you don't have to go through everything to get there first you could just pick one out and try it if you want just to get an idea or you can sometimes I just ask people like friends and family like hey if do you have any good ideas for websites or apps or anything like that and see if there's a good idea uh that they have that you could work on especially if they're not coders then they're obviously never going to do that they're they're never going to use their ideas so there uh they'd probably be really happy if you Tred to make their idea uh really happen uh Noy says Hey Jesse I just installed standard and the bracket brackets extension is that it okay so I I'm all right so I don't use brackets so I'm just assuming that it's similar enough to adom that this would work so you'll need to if you're using the extension then that should give you the warnings right there so yeah that should work you should as long as you're seeing the uh the warnings about syntax in in your editor then you're good to go it may not work exactly like mine's working where it like automatically uh checks everything as soon as I get a do a commit uh so that part you might need to set up differently but if you just want like the linting in editor then you should be good to go somebody who maybe uses brackets might be able if if you're in the live chat now maybe you'll be able to give some better uh more specific advice all right Andrew has good advice uh kind of along the lines with what I was my saying my experience was was check your code from one year ago and if you feel it needs Improvement then then you've grown that's great advice yeah if if you look at code you did from an earlier time and you notice things like oh I I should have done this differently or I can correct that then you know you've learned you know you've improved because obviously when you wrote it you didn't know enough to make it the right way like it should have been so great advice Matt says about two years ago I went on a family vacation to Alaska and to share pictures I set up a website to upload and display photo videos uh think like private Facebook yeah that's a really good idea so that that's a good idea of uh a project to do uh you know if you're interested in something like that thanks for that I I really like that idea I might Matt I might do that that might be a legit idea for me to work on on vacation and not have everybody be mad at me for working on vacation because I'm actually doing something that will contribute to the vacation so that's good I I'm I'm going to share a little personal thing right here uh I hope you don't mind but my wife's I'm going on vacation with all my wife's side of the family so her brothers and their wives and their kids and my mother and father-in-law and some of her aunts and and and her uncles so all her side of the family they're very creative and like musically talented so there's always like these times where like okay we're going to have like a talent night like everybody write a story and we're going to read it out to him or uh we're going to we're going to play songs or music and I have no musical ability at all I really like music I like to listen to music but I I can't make music I'm not a good singer like nothing and uh when I hear like I got an email saying we're going to do like a contest about writing a story on vacation and I get like anxiety over that like I don't really want to write the story and to me I'm like can can I just make a website would that work because that makes me excited but the other stuff makes me have anxiety so the the reason why I shared that was I'm thinking maybe instead of me contributing with some musical thing or a story my contribution could be some very useful website uh that can capture that family vacation and everybody can go to it and remember it so uh so Matt thanks for that idea because I might actually do that we'll see I don't want to work all a vacation I really do want to hang out with my family and and my kids but it would be nice to just code a little bit I don't know I just feel if I go for a long time without coding I feel weird like I miss it I don't does anybody else ever get that feeling uh on the negative side I I think like maybe I'm addicted to coding and this is a problem on the positive side I think hey do I found something that I really love to do uh so it could go one way or another depending on how you want to look at it but but I'm interested to see if anybody else feels like that let let me know I suspect somebody else has to feel like that I can't be I can't be the only one and if I am then maybe I do need to get some professional help need to need to talk to a counselor or something um Matt says in in regard to that site that Facebook like site um uh he worked with PHP HTML CSS and JavaScript and getting ready to rewrite it in D Jango uh so he says in my current role I am uh a DBA leading up ajango project to rewrite our main application awesome all right so Rohan says Improvement if I see code from 7 to 10 months ago I feel like killing someone until I realized this was me that's great I I love that that sentiment right so I cringe when I look at old code occasionally I'm pleasantly surprised and I'm like oh this isn't as bad as I thought it would be but sometime usually I'm like I don't even want to look at it I just like all right this site still works like I'm just going to let it go I don't I don't want to revisit this uh pum says that's awesome I haven't had much inspiration and um Andrew I just checked my stuff from a year ago you're right there was definitely improvements thanks all right I'm I'm glad that that we could help um I definitely want this live chat and the community that's starting to develop around it to be a very like positive uplifting Community especially for people who are new uh I think that that's there's a lot of good tutorials and resources for new people uh and I want it to be like that but I think more importantly this could be a place of inspiration and encouragement uh for people that are just starting and for those of us you know that've been doing it for a little longer and maybe just kind of getting a little bit down about things so um that's something that I think you can't get from just reading a tutorial not necess you know you can't necessarily get that uh but in a more like active Living Community like this we can help each other out in that way and um at least for me that's that's if that happens if that's what this ends up being this stream and and all of you that watch and contribute if it ends up being a place that encourages people uh to learn how to code and continue in it uh then I'll be happy and I'll I'll be I'll be happy that I did sacrifice some of the time and the effort to do this uh daf der says what's a good resource for react convention Within in a large project I'm always confused on how much I should put into a single component um I'm sure that you probably get an answer somewhere but in the live chat for this uh dafter but I would say your components should be like as small as possible they should be only like one thing and you you may end up with a ton of components but it's been my understanding that the correct way to do things and react is that like if something can reasonably be broken down into a smaller component then do it uh and then that keeps them it keeps them small it keeps them easy to understand and more modular so that you can reuse them so uh does that make sense let me know if I need to explain that more if that didn't make sense or if if any of you disagree uh with that viewpoint but that's that's my understanding of of ideally how it should work when you're using react um let's see I'm looking we're getting bad yeah we we've hit definitely hit that 10 minutes of where I said I wanted to end so I'm just going to look see if there's any like really important questions I want to get to especially from somebody who's new or maybe just learning uh because I definitely want to uh not that I don't appreciate all of you that are more experienced and and are in the live chat a lot but um I know you won't be offended if I don't get your question I don't want to I don't want to offend somebody if this is their first time asking a question and they get ignored so um let's see so Cactus asks what about markup developer what if you don't want to create markups but you have to do this front and Dev oh so like mockups so you're talking about design work right so uh Cactus correct me if I'm wrong but I think you're talking about design work like what if you have to do design work as a front-end Dev but you don't want to um well I would say either if you can talk to your your boss uh uh about it and see if maybe you can get a real designer or contract that out or something then do it otherwise I mean maybe look for another another job I do have to do design work even though I'm a front end developer I don't always like doing the design work especially at the beginning of a project when it's like a blank slate I'm always that's the worst part for me cuz I could I could make it look like anything you know so it's just hard to make a decision uh but I would imagine I mean how many people watching are front-end developers and also have to do design work uh I know I do for sure I imagine that's somewhat common depending on you know how big a company you work for so um but if if you definitely don't want to be doing that then I would recommend you know try to find a different job or try to bring that up you know in your team and and see if something else could be done you know you may have to keep doing it for a while until you can find something better but uh I mean I totally I'm in the same situation so I definitely understand that um let's see I'm just looking for questions right now usually I do read everything out and uh you all know that if you've seen it before so but um since this is going on pretty long that's why I'm skipping a little bit aim high asks uh hi Jesse so all what you are doing is caching on the server side all your routings on the front end um kind of so yeah basically the once the page loads uh so I did I have had the server up here for a while so what happens is nextjs has I'll go here and show you so in get initial props this fetch of the data happens on the server side so the initial page load and everything it all gets rendered server side and just the HTML you know is pushed out for search engine purposes that's that's good but once the page loads and you click on an internal link then you get no page refresh it's it is it's all client side um routing and the um the API calls that would normally be here and run on the server now can run on the client as well but I am doing a lot of caching so potentially those calls don't even get made if they don't need to so you can see like in the server like I'm caching it for an hour um not in when I'm development minute I don't cash it for an hour but so it's caching the rendered HTML where the API call has already been made on the server they've gotten that data rendered all HTML that's cached so you can get like a really quick response from the server because it it only has to go to the node server and to go right back it doesn't actually have to ask uh WordPress for anything because it's already cached that so that's what I'm doing there and then it does switch over so if if you go to the site kattic uh and check out the uh routing oh man it's so weird I switched to my mouse I'm not on my trackpad now it's really weird to uh try to find all my windows uh but basically yeah if you try to route and you'll notice there is no page refresh so it's a combination of server side and and client side uh rendering routing good question though let me know if you have any other question uh put it in the comments or direct message me on Twitter if you if you want to like talk about it in more depth as to like how how and why I did it Rohan says I'm addicted too got to do something aim high I feel you Jesse okay I'm not the only one um Rohan says uh is saying partic in particular to person but every this goes for everybody that's uh that's watching now live or later on if you want us to help outside of here you can drop by in our IRC anytime so we do have an IRC Channel um for this for this stream and it's uh # FCC Jessie so # FCC Jess so you can join that um I'm in there like occasionally I do I am linked up on my phone so a lot of times I I do get the the messages that come through uh so but I try to pop in you know a couple times a day and there are other people that are in there too so if you need help with something you know come in there and ask some questions or if you're more advanced and you want to help some people come in there and and provide some of your your experience uh Rohan says apart from those uh Patrick uh Jesse and a few other nobody here is even in the neighborhood of awesome I don't I don't think I should be put on the list of awesome either but uh says we can definitely improve I would say the only thing awesome about me is that for some reason I decided it would be a good idea to show the world how much of a noob I am every day uh when I do coding um I don't I don't know that everybody would be able to do that so that's that maybe is something unique about me but uh really you all help me so much uh with with my improving my skills that um I think I'm getting just as much if not more out of this than you are Andrew says now stop posting Jesse will not finish this endless conversation thanks Andrew uh that is true yeah I um I just can't stand to leave questions unanswered if you all have questions you know maybe maybe you really need that question answered it can make a big difference in your life so I just want to answer it but all right but this will be it um last question Rohan asks what would be your next project if you are allowed to reveal it all right let me think what will the next project be I don't know for sure how the order is going to be so I'll tell you maybe one or two that's possible um there's going to be potentially a site that that doesn't really have a name or Ur or anything yet but could possibly aggregate content from all of our other university sites into one place and pull it all in if I do that site I'm going to use the WordPress API because a lot of our sites are running WordPress and I'm going to pull it all in it's going to be a react site it's going to be set up similar to this but of course better because why why do a say site exactly like you did the last one right you want to improve so it'll be similar to this if I do that it'll be cool because I'll get to start right from scratch and show the whole way which I know you know a lot of people have been asking for that to start from scratch so that's one potential project that it's going to happen like I'm like 90% sure what's going to happen I'm just not sure when um the other project that I was working on before this if you look on my YouTube channel I did a couple of live streams where I was trying to do a redesign of our main website franciscan.edu but I was trying to limit it like within the restrictions of the current current content management system that will get replaced so basically I was trying to make that site look nice and run as fast as possible within the constraints that I have to work in so that was kind of a weird situation but made it interesting because I couldn't use a lot of the tools and the techniques that I would like to use because of those constraints so those two projects are for sure happening there might be some little like onepage sites that'll pop in here and there but that that's about as good of an answer as I can give you right now and shoot Andrew did ask one more question and it's a followup to an earlier question so I'm going to take it because technically I don't think it's really new just a clarification uh Andrew is saying so the server side also fetches data from WordPress or is only HTML gets to the front end and then fetches so this is to clarify before from Aim High's question it actually does fetch the data on the server so if you want to test it out I'm not going to do it right now because then I'll be here for another 10 minutes but go to the website on your first load of the website so don't do don't click any links on the first load uh go to view source so don't use the inspector view the source and it you know it'll come up with a really ugly looking white page with HTML you'll be able to see all the data right there right if it was fetching at client side you wouldn't see all the data You' just see the initial markup that gets loaded all right but it's actually making the API call server side first and then sending it all comp all completed and rendered out the way it should look that way search engines see the complete page otherwise search engines wouldn't see all that data that we're pulling from WordPress so that's the main reason why we do it I I have I haven't tested Ted it this myself but I've heard other people say that you get a slightly faster first page load if you do it that way as well so finally gotten to the end of the uh live chat I did go kind of fast at the end so if I missed your question I sincerely apologize and please ask it in the comments or message me on Twitter and I will answer it as soon as I can thank you uh to everybody for watching we had a lot of action in the live chat a lot of viewers uh I think above average for most of the the stream we had above average amount of viewers so thank you so much uh for everything for all the input you all had I'll be back tomorrow same time 2 pm eastern time not sure what the topic will be yet I'll I'll pick it uh tomorrow um and thanks thanks to the two people that submitted pool requests big thanks to vet and was it Daniel I'm going to I'm going to check so that I don't get this wrong shoot and I can't find it because I don't have my trackpad uh I think it was Daniel if it wasn't I'm sorry but the two people that submitted pool requests since yesterday um I really really appreciate that you did an awesome job I I love the requests and it's definitely a big Improvement in the project so uh anyway thanks thanks for watching and uh I'll be back tomorrow have a great day
Original Description
I received a few great pull requests, one of which included Prettier and Standard JS. Today I am going to go over what these do and some of the errors that were found in my code after implementing them.
Also, as always, Q and A at the end!
See a professional front-end developer at work. Unscripted. Mistakes included.
Standard JS: https://standardjs.com/
Prettier: https://prettier.github.io/prettier/
Live Site: https://catechetics.com
Repo: https://github.com/fus-marcom/ci-react
Trello Board for this Project: https://trello.com/b/oD4BYdZk
React: https://facebook.github.io/react/
Next.js: https://github.com/zeit/next.js/
Materialize: http://materializecss.com/
Twitter: https://twitter.com/JesseRWeigel
Youtube: https://www.youtube.com/c/JesseWeigel29
Code Editor: https://atom.io/
Terminal: https://www.iterm2.com/
Project Management: https://trello.com
-
Learn to code for free and get a developer job: https://www.freecodecamp.com
Read hundreds of articles on programming: https://medium.freecodecamp.com
Watch on YouTube ↗
(saves to browser)
Sign in to unlock AI tutor explanation · ⚡30
Playlist
Uploads from freeCodeCamp.org · freeCodeCamp.org · 23 of 60
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
▶
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
React: Production Server Setup Part 2 - Live Coding with Jesse
freeCodeCamp.org
cookies vs localStorage vs sessionStorage - Beau teaches JavaScript
freeCodeCamp.org
Browser history tutorial - Beau teaches JavaScript
freeCodeCamp.org
Graph Data Structure Intro (inc. adjacency list, adjacency matrix, incidence matrix)
freeCodeCamp.org
React: Parameterized Routing with Next.js - Live Coding with Jesse
freeCodeCamp.org
React: Dealing with jQuery Issues - Live Coding with Jesse
freeCodeCamp.org
setInterval and setTimeout: timing events - Beau teaches JavaScript
freeCodeCamp.org
Browser and Device Testing - Live Coding with Jesse
freeCodeCamp.org
Last Minute Updates - Live Coding with Jesse
freeCodeCamp.org
Post Launch Updates - Live Coding with Jesse
freeCodeCamp.org
React: Setting Up Google Analytics - Live Coding with Jesse
freeCodeCamp.org
React: Masonry Layout - Live Coding with Jesse
freeCodeCamp.org
Load Balancing Digital Ocean Droplets - Live Coding with Jesse
freeCodeCamp.org
try, catch, finally, throw - error handling in JavaScript
freeCodeCamp.org
Load Balancing: SSL Passthrough Setup - Live Coding with Jesse
freeCodeCamp.org
Graphs: breadth-first search - Beau teaches JavaScript
freeCodeCamp.org
React: Masonry Layout Part 2 - Live Coding with Jesse
freeCodeCamp.org
React: WordPress API Live Search - Live Coding with Jesse
freeCodeCamp.org
Creating WordPress Custom Post Types - Live Coding With Jesse
freeCodeCamp.org
Dates - Beau teaches JavaScript
freeCodeCamp.org
Miscellaneous Front End Updates - Live Coding with Jesse
freeCodeCamp.org
Merging a Pull Request from GitHub - Live Coding with Jesse
freeCodeCamp.org
React + Prettier + Standard JS - Live Coding with Jesse
freeCodeCamp.org
React: Sortable Responsive Table - Live Coding with Jesse
freeCodeCamp.org
Geolocation Sorting by Distance - Live Coding with Jesse
freeCodeCamp.org
Tradeoff Matrix - Agile Software Development
freeCodeCamp.org
The Definition of Ready - Agile Software Development
freeCodeCamp.org
Getting first React job without experience - Ask Preethi
freeCodeCamp.org
React: Google Analytics Click Tracking - Live Coding with Jesse
freeCodeCamp.org
Submitting a PR to an Open Source Project - Live Coding with Jesse
freeCodeCamp.org
Should I go back to school to get CS degree? - Ask Preethi
freeCodeCamp.org
Hero Section CSS Changes - Live Coding with Jesse
freeCodeCamp.org
Working Agreement - Agile Software Development
freeCodeCamp.org
A day at Pennybox with Co-Founder Reji Eapen
freeCodeCamp.org
React: Sorting and Filtering Data - Live Coding with Jesse
freeCodeCamp.org
React: Sorting and Filtering Data Part 2 - Live Coding with Jesse
freeCodeCamp.org
React: Building a New UI - Live Coding with Jesse
freeCodeCamp.org
Definition of Done - Agile Software Development
freeCodeCamp.org
Getting started with jQuery (tutorial) - Beau teaches JavaScript
freeCodeCamp.org
Making a React Blog with WordPress Content - Live Coding with Jesse
freeCodeCamp.org
React, NextJS, CSS - Live Coding with Jesse
freeCodeCamp.org
jQuery events - Beau teaches JavaScript
freeCodeCamp.org
React/NextJS Routing and WordPress API Custom Types - Live Coding with Jesse
freeCodeCamp.org
React: Working with API Data - Live Coding with Jesse
freeCodeCamp.org
React: Refactoring Components - Live Streaming with Jesse
freeCodeCamp.org
jQuery effects - Beau teaches JavaScript
freeCodeCamp.org
More React Refactoring - Live Coding with Jesse
freeCodeCamp.org
animate in jQuery - Beau teaches JavaScript
freeCodeCamp.org
"Finishing" My React Site - Live Coding with Jesse
freeCodeCamp.org
Starting a New React Project (P2D1) - Live Coding with Jesse
freeCodeCamp.org
React Project 2 Day 2: Learning Material UI - Live Coding with Jesse
freeCodeCamp.org
The Agile Manifesto - Agile Software Development
freeCodeCamp.org
jQuery: get and set with http, text, val, and attr - Beau teaches JavaScript
freeCodeCamp.org
React Project 2 Day 3 - Live Coding with Jesse
freeCodeCamp.org
The INVEST approach to product backlog items
freeCodeCamp.org
React Project 2 Day 4 - Live Coding with Jesse
freeCodeCamp.org
Chickens and Pigs - Agile Software Development
freeCodeCamp.org
React Project 2 Day 5 - Live Coding with Jesse
freeCodeCamp.org
jQuery: add and remove DOM elements - Beau teaches JavaScript
freeCodeCamp.org
React Project 2 Day 6 - Live Coding with Jesse
freeCodeCamp.org
More on: Frontend Performance
View skill →Related Reads
📰
📰
📰
📰
AI Project Tracking Tools Compared: How to Choose the Right Option
Dev.to AI
The polite sentence that stops scope creep before it eats your week
Dev.to · Penloom Studio
How to Set Up Jira the Right Way (Most Teams Get This Wrong)
Dev.to · Nisha
7 Best Project Portfolio Management Software in 2026
TechRepublic
🎓
Tutor Explanation
DeepCamp AI