React: Data Sorting Part 2 (P5D46) - Live Coding with Jesse

freeCodeCamp.org · Beginner ·📅 Project Management ·8y ago

Key Takeaways

Implements data sorting in a React application using Next.js

Full Transcript

hey everybody welcome to live coding with Jesse I'm Jesse and I haven't streamed in a while so yesterday or not yesterday last week almost everyone in my family was sick so I took Wednesday Thursday and Friday off so first I was taking care of sick people and then I was sick and so I'm not a hundred percent yet but I'm almost almost there so sorry about not streaming today we're gonna just pick up where we left off on Tuesday yeah Tuesday was the last stream so for me I'm just I'm just picking this up so I haven't really done much I hope to be able to get some work done from home but I didn't really get that much done I was just exhausted so hey everyone see you on the live chat there I'm gonna get started by starting up the end Rock server and I'm gonna paste the link to that in the live chat so oh I'll try to remember to paste it again in a few minutes for the people that maybe are coming in later that I don't know if you can if you come in late can you still see everything in the live chat or do you just see like the last few things that happen I don't know let me know I'll probably still post it again no matter what just to be sure I do want to ask you a question so I had you know someone who watches the the live chat has been asking some questions on Twitter and I keep forgetting to ask you all because I'm not sure what the answer is but they're creating a like a online shopping cart so this is like an e-commerce site and they're using react so they're having trouble with their you know with getting things to show up in the cart so I'm not I haven't seen the code so I don't know everything that's going on but if anyone has done any e-commerce stuff with react and you have any suggestions or you know any maybe like packages or something that would help with that please let me know in the live chat or you know through some other means comments or on Twitter or something and I will forward that information alone because I've never done e-commerce with with react before so I'm not really I don't really have the experience to be able to give good advice in that area but I would still like to help if possible okay where we left off last week and we were we created a switch statement and we were using sort so we were mapping through our data and then we were using dot sort to sort everything in different ways so we didn't quite get that working so there's a problem with somehow how I set up the the sort the sorting functions so I've started to look at the documentation because we copy and pasted from previous project where the sorting works I think the problem is the data that I'm getting in now is different from the data I was getting in in the other application so that's where we're gonna start and trying to get this to work and this is not going to be a really long stream so I did I got a question about how long will the stream be normally the streams end up being between like one and two hours I'm gonna save like an hour and a half is about average today I can only I could probably stream for an hour and a half today and and it would be ok but I can't go longer than an hour and a half because I have something at 12:45 so there's actually in office st. Patrick's Day parties the st. Patrick's Day was on Saturday obviously no one was working on Saturday so the party is today which is why I'm wearing green it doesn't look green on the camera though but this is a green sweater but anyway I want to go to that party and I think there's going to be really good food there which I'm excited about so that's why the stream is not going to be too long so I better stop talking and get to coding let me switch my screen here okay so here you can see I was looking at the documentation here and I noticed that when we're comparing numbers this actually works and that's really what we're doing let me start my time with as well and I'm gonna paste that and grogg link one more time for those who are just joining us I think we had about maybe 20 people join since the last time I posted it so there's the link you'll be able to see the site with that link so you can see that's what we're doing here we're just you know taking a and B all right the values of a and B and we're doing a minus B so the difference being we're not we don't have numbers and this is what I I wanted to see these are numbers so they should work where they should daily should be numbers so I want to double check and make sure like are we actually getting numbers what like what are we getting you know before I start changing these around you know how we're doing this I want to be sure of what Dana that we have and I see there are some questions in the live chat I'll answer all the questions when I take a little break so after about another 25 minutes I'm going to take a little break and I'm going to answer all the questions so please be patient with me and I'll try to get to all your questions before I before I finish today okay so let me first let's go to the the output that we're getting from the WordPress API hmm and my stream is getting some weirdness let me plug in I forgot to plug in my ethernet cord where do that alright I found it you have a like I can't see the back of my Mac right now so I'm just trying to feel around there we go alright hopefully that will keep the stream a little bit more stable it shouldn't cut out while switching yeah it's not cutting out okay cool and all right so so far it looks a little bit more stable at least on my end it wasn't my work wasn't getting any warnings about stream quality from YouTube but from OBS it was showing me red and meaning that my my internet speed was not not good enough okay all right so let's let's check out the data and I did have hmm I wonder if I still have it over here no yeah here we go oops wrong one there we go okay so here's our date here's what we get from date okay and it is a string so I'm gonna copy that and let's go over let's go over here let's do dates parse and then we'll put that string in and let's see what we get okay so we do actually get a number let's see well this work I can't ever remember with the sin taxes for this let's see no shoot I mean this this does look like a number so I think we're safe with that okay so I think we are getting numbers oh okay I get so Anthony's saying just use type of want to go three oh okay did I use the wrong whoops oh my god no capital okay no Calvin or thank you all right cool it is a number so just wanted to check all right so we have numbers so these dates should work and I say okay so let's see what's happening with this function so when you sort by we're passing in the type which is the type when does this get called alright here we go so we're we're manually passing in the type date oldest okay now we're manually passing in that site so it should this should work let's see make sure I'm not doing anything in here that would mess it up all right we might be getting more than a hundred posts let's see what we were searching by make sure we're not getting more than a hundred pose let's all right so we're only getting fifty three posts all right I remember going through this the less I mean through this process okay and we're logging out here's our dates three five twenty so this is showing the newest first which is not what we want let's change this and see if maybe we haven't reversed made newest [Music] hey Harsha how's it going I'm glad this time worked for you biology will work ok not it's the same order who hmm okay hey everyone I see ladies in high enough shoot all right what's going on what am I doing wrong you look back it was my original sedate oldest I date oldest forgiveness it was my time soon okay let me I wonder if these are even running let's see let's let's see what can I do with this can I put something else in here oops okay okay so that is should be running date analyst whoa okay it ran a lot of times because we're mapping over it I take newest so it is getting the type sort of data exists a data that's a log sort data so does sorted data actually just Francois chief I use so what is data sir okay so I wasn't trying to save anything to a variable here I was just sort and then I was mapping I don't know why I said we were mapping and sorting we're not mapping and sorting so I apologize for saying that earlier let's see okay so we need let me see what sort does we have a variable here that stores the elements of an array in place and returns the array this source not necessarily saying all the default orders at Clooney's she could finish okay we did check this before so if we have an existing array and we run sort on it it will change that array okay that's we needed to know all right so let's go whoa hey maybe this is the problem maybe that should not have been Const let's try that out I hope that is really the the answer to this okay all right so new lists I don't really know since that's new list first I guess we could check all right let's change this to oldest do the work no what's it boy hold on a second okay so it's working briefly haha I don't know if you'll see this you could probably try it out on your machines now if you have the N grout link okay so when I hit enter it briefly sorts everything correctly and then it goes back to the normal way so why is it doing that all right let's see what we're doing so this whereby the oldest okay great let's see what we're logging here alright so this is sort of the right way this is sorted the right way since 1750 yeah this one's sorted the right way all right so we're getting and the spots where we're console logging we're getting the data in the right order let's see where all right so we have a console log here so at this point that's this weird whoa oh forget my plus sign there we go that was a lot of red all of a sudden now I should've known that what happened alright there may be a better way to do that but this will work okay so why so we can see our dates here and we're getting I should move this up so y'all can see everything so we're getting the dates initially in order from the oldest to the newest it looks like yeah and then afterwards it's still in that same order but what's displayed here is not in that order all right let me get a little the live chat and see what you all think okay yeah okay I see so harsh it's saying use moment Jess I'm not really doing anything with the dates I just need I just want eat numbers so I just need to turn the date into a number and and I'm doing that the problem I have now is I need to sort them properly all right so Joey sing the sorting will will actually modify the array that's act that's what I want right now so that's that's the behavior that I want I want the array to be modified see it's okay let's alright so the problem now I think our sorting is actually working so things things are sorting differently depending on the values we pass in so just to double-check that let's pass in what are we using right now oldest let's go back to newest just to see that there's definitely a difference in the order the newest yep there's a difference even this is wild why are we getting the difference all right why are we getting the difference though even here and in the same data so our console law bits here should not be reordering right so at this point we haven't even called this sorting function this dangerous actually let's do this all right we are getting some change recession we have the exact same date for some of these hey see you later oh all right I'm gonna switch back to oldest because we were seeing definitely a different change okay so we're still getting that switch I was afraid we had something going on you know with what this may be running before it was supposed to but it doesn't look like that was doing anything let's see see michael says type isn't getting logged yeah our type is getting log here so when we're running these console logs here it is actually see date oldest is running all right let me take a break because the timer ran out and I'm gonna answer some questions now and then we'll come back to it and I think we can get in one more Pomodoro session okay so I'm gonna scroll up Anthony asked if I was using WordPress as the backend I am so we are getting data from WordPress I mean I I don't know if I would call it the complete backend there's more going on but WordPress is our content management system so we're using it just for that we're not using any of the display portion of word for us mmm D she hub says how many time completed this course I'm not sure what you I'm not sure what you mean let me know maybe if you could clarify yeah so I'm just not exactly sure we're here what you're asking Thao asks if building what am i what am i building University website yep so building a new website for Franciscan University Michael said early start again yeah early start I have stuff going on in the afternoon so how to get it in early Kishor says how to set how to do this setup in windows / linux the git repo and everything yeah you can it should run Linux for sure it should run Windows I think it runs on Windows does anybody run this on their machine on Windows I think it works but I haven't personally tried it yeah but all you would need to do is just clone clone the repo and to your local machine and then do NPM install or yarn if you use yarn and then after all the packages are installed then just do NPM run dev yeah I think it's def there are instructions on this repo as well so if you go to the repository links in the description if you go there and just view the readme it will have instructions for how to get this up and running all right Bhargav says what are you doing which language it's it's JavaScript and we're using react which is a JavaScript library and in particular we're trying to sort some numbers so also a switch app in which I'm Mac so I'm on I I don't know my iMac is 20 I'll just show you I'll show you the stats for the spec so I guess it's really small so it's uh retina 5k 27-inch late 2014 I got the intel core i7 and 32 gigabytes of ram and i'm using Visual Studio code Dimitri asks how old am I I am 32 years old all right cool Joey confirms that it does work on Windows excellent Thank You Joey okay all right and get through the questions just in time so let me go we'll start another Pomodoro session a few seconds early and let's let's check quickly let me bring this down a bit and let's get out of node I'd like to run through this briefly just to get an idea of the logic of what's happening okay so all right so initially our our data in state is it's totally empty which is what we want so when when we initiate the search so this is called get search results and pinnacles debounce search so it sets the the value in state so we have that we call debounce search which then calls fetch search term and now word fetch search term so now it just builds the the search query and now we're calling get JSON which we've imported from another file which simply just uses the fetch API so now we're passing it that string that we've just created and then we're getting the data and we're setting that data into into state so now data has all of the posts that have been returned from the WordPress API then we're console logging what that data is then we're calling sort by and in this case we're sorting by date oldest so now let's go down to sort by so actually so let's so we've had at this point we've had one change in state so let's see what would happen then so you've had a change in state so we're gonna get a rerender and now down here data dot length will be greater than zero since we had data so then we're gonna map over it so we're mapping over everything great hmm we could move the sorting logic down here I really don't want to but that's how I did it in a previous project and I know it worked there who wouldn't actually be manipulating the data that's in state instead we would just be changing it about in terms of how we display it let's let's let's move it down to here that'll simplify things we'll be able to get rid of some of the stuff that we're doing right now and it'll be a good candidate for a refactor at some point but we can get rid of a lot of this so we'll just comment some some of this out for now so that we can easily you refactor back to something like this later so let's grab just this part this sort and we're gonna copy that and then for all of this goodness for all of this we're just gonna comment that out now we can do let's do our sorting before we map obviously and so now we're gonna get the data we're gonna sort the data and let's know what all right so instead of tight how do we do this you go back here okay we have the sorting saved in a Redux tour but let's save the sorting in State this time if you do this oh yeah let's get rid of these console us it's wondering why I had typed so many times in there okay great now we'll say this state sort by and I think we already have this in in state so we'll just set it manually and then so after this happens then it will then map over everything okay let's give this a try we do need to set sort by and we'll go dates oldest okay refresh let's try that out so we can see right now the newest is shilling showing first now let's hit enter you gotta be kidding me I'm getting the phone call so let's say you did hello hey how's it going sure mm-hmm yes hmm okay yeah you probably maybe we can conditionally have that load so when it load on the editing pages yeah okay all right let me see yeah let me see what what form are you working on right now anything in particular okay yeah yeah just make yeah make sure that that I have access and I can see it and I'll check it out and then I'll try the like the conditional loading of the styles and make sure it works but if it works then I'll apply it to all the other forms that we're using their styles for all right yeah no problem okay all right so that was one of my colleagues in the IT department it seems that a project that we worked on earlier which was adding styles system Salesforce forms gentleman think those particular forms that he was talking about I don't think I live stream that I did live stream some other forms we were working on but the problem is when you go to load the editor page for those forms the Styles are being applied and they're messing up the interface so they look fine to the normal user when they go to fill out the form but when someone an ite or somewhere else on campus tries to go to the admin panel and edit doesn't look good so I'm thinking like you probably heard what if I just add something to where you know if if there's a certain string that we can find in the URL that make the notes that this is an editing page then maybe we don't load the Styles something like that let's see yeah let's keep working on this for now because it's probably going to take them a few minutes to get the form give me access to the form that they're working on to the test form so I thought about maybe like just switching over knowing that right now but I don't think I don't think that'll work out okay so in it for now let's see a Jew okay I was trying to check to make sure that these different types weren't all getting grouped together and they're not so we can see there's your 26 that's interesting so this is definitely out of order all right so we have something for 2018 down below 2017 here and then 2018 yes so the order is not even really working the sorting is not working at all let me make sure I did save that and we'll do a refresh actually ask you sir did it work this time by 2017 15 15 18 18 18 18 18 20:18 one six yeah I think it worked nice okay cool so that works let's switch this to make sure it works now the aides newest all right now it's switched over here great and now we should be able to go in here can we change state in here and have it give us a rear ender I think we can sort by let's switch it up yeah hey sorted to newest mom back to oldest whoops there we go oldest cool alright that works so now on a state change we have a change here awesome okay cool let me check my time I still good on time now the next thing that we had was this alphabetical order and I don't think that this will work as we're doing it here but let's I don't know let's just give it a shot it'll only take a second and if it works it'll save a lot of time yeah that does not look like alphabetical order yeah and definitely not okay so that's not working so this setup here does work what we need to do though is get the the alphabetical order working so we'll just need to change what's here and what's here and then we'll be all set with with the logic of it the next step then would be to tie it in to the UI so to make some sort of a drop-down radio button something like that and have that set the state for sort by and then everything else will work this I really don't like having all this right here in the component but it it does make things it uses less code than our other solution really yeah so I don't know maybe I'll leave it like this let me know y'all think we'll see we'll see how much gets added to when we try to do alphabetical order okay well let's go back to our documentation and let's see so by default we do have alphabetical order when using sort hmm buffoon idiot the array all right this is where we could probably put in here greater than or less than right let's try that out wait a second nice we have a string right here console disorder any sort and that's sort of a it looks like this sorted this string in alphabetical order but it used this which is what we're currently using so this was string array dot sort right or no did it not use compare numbers there it didn't it just you sort okay all right sorry I misread that okay so then yeah let's let's try the greater than less then see what we get right let me I'm gonna check the live chat just for a second okay Evo says hey those are going and ego says couldn't you extract the date parsing code into separate function which removes a few lines of the current component yeah you know what I've been thinking about that I think that's a good idea I'm just not I haven't really thought about how I'd do it but you know if we're repeating ourselves four times here there's got to be a better way to do it so yeah I mean right now it's it's not a huge deal right it's only four times it doesn't take up that much space but I'd still rather be able to do it I'm afraid like the solution to this would end up taking up more lines than what we have now really but it does make me want to you know pull this out and have a different function all right so I'm gonna try to just add in a greater than sign and see what happens let's give it a refresh and see did I change this up here officer let's change it whoops let's change it up here okay so right off the bat we'll have that and okay it doesn't look like this is doing anything let me make sure I'm title rendered okay damn one by title let's see what kind of change we have let's just do it this way so we have these a and B reversed so that's why I'm just going with greater than both times and let's see what I want to do is sort it this way and then change state over here and let's go alright so something happened it's not quite right it's haha so a change is happening but it's not quite alphabetical okay Joey says in the sort docs there's an example sort by name that may be relevant okay cool let's check it out oops my timer is up so maybe we'll have to check that out ah maybe we should do something like this then okay that'll probably be the next thing that that I'll try what's this Eva says playing game that was advocate maybe but you could use lodash to do this for you okay all right what what in lodash then would help is there like a sorting thing in low - that would help us out with this I kind of think we're pretty close I wish that if I was gonna use low - I wish I would have known about it last week uh-huh but add a to lower case maybe yeah I guess we could I could do to lower case I'm trying to think if the titles yeah you know what I'm not I'm sure that the titles are all the same case okay well I have to yeah I've got to answer questions now in the live chat and this so if if you're kind of wondering how we're gonna solve this I made you stream it tomorrow but if I don't and let's say I fix it before then this is probably what I'm gonna use something like this and this may be a good candidate to just use a separate function for since we really just care about returning you know like one or negative one okay all right so let me go back let's um let's commit this and then push it up to github that way you all will have all this code to check out as well that is good good add we're gonna get added we just gonna add everything just with a period there and then we'll do our yarn cm this is kind of a little custom thing we have set up to help you know walk someone through doing a nice commit message so let's say that is a new feature and this is gonna be a date logic to search no I don't think so all right let's see if we passed the test looks pretty good so far I think this is gonna work yay and now all right all this code is now on github and I will scroll up a bit and try to answer all the questions okay kiss sure says NPM is not working with with get for Windows I'm not sure I mean I it's really hard for me to tell what the problem is you know without being able to see what's going on you think I don't think we need a specific version of node for this project I'm not sure I mean I'd say you know make sure node is up-to-date and an NPM they're up to date you can use yarn if you want and it's all yarn and use that that's what we're using let's see but I'm not sure I pronounce the name is being har gh8 V so sorry I don't know how to pronounce that let me know the correct way to pronounce it and I will do my best to say it correctly but anyway they asked from where I learned coding so you can learn coding from free code camp so free code camp dot work has a lot of challenges to walk you through learning front-end programming first and then you do all the way through back end and so it's it's somewhat comprehensive it's going to be a lot of JavaScript so if you're interested in JavaScript that would be good otherwise there are some other programs like Udacity has some good courses on a variety of different things so everything from you know web development to self-driving cars they have a lot of stuff and for that kind of a beginner level code Academy has a lot of good beginner tutorials so I'd say those three places are a good place to start oh they also asked which programming language is best for me I'm a complete beginner yeah I I mean I started out with JavaScript mostly I think it was a good language to start with because you don't need really anything special to start out with it the browser you can just start doing stuff in the console on your browser but you know there's a good argument to be made that other programming languages are easy so kishore says like for a beginner Python and C is a start-up I thought is nice because there's a lot less in terms of syntax to have to remember at first so that would be a good place to start it does kind of depend on what you want to do apology say I was trying to hold back this yawn for a while now and I couldn't do it any longer yeah so I would say of of the three so Kishore mentions HTML CSS and JavaScript if you want to be a web developer so for sure if you want to do web stuff for sure start with that you're going to be using you know JavaScript most of the time as a web developer so especially if you're doing more front-end stuff but otherwise if you don't want to do ever you're not sure what you want to do then I I would say Python Kishore also mentioned C C's a good place to get like some really basic stuff and to understand like a lot of concepts that you don't even have to think about when you do JavaScript and C like like the type of variable that you're setting Java you never have to really like think beforehand all right what type is this going to be right you don't have to say like is this gonna be a 32-bit integer or something like that right but in other some other languages and C is like this you really do have to put some thought into things like that beforehand so if you want to start a really basic level that's a place to start I don't know in terms of being able to get up started quickly and build like cool useful things quickly and be able to get paid for it I wouldn't start with C message my opinion I don't have that much experience with C so it may be wrong I think HTML CSS JavaScript would be the way to go to be able to start building real things quickly there's a huge market for that so it really depends a lot on what you're trying to do Dimitri says I want to be a cyber sportsman and play CS 1.6 I wanted to be a professional Starcraft player when I was in high school I wanted to move to South Korea and be approached arc a flare didn't happen okay gander seven says I would say start with Java or C sharp they strongly typed similar to a lot of languages and will catch a lot of errors before you run it yeah that so I didn't think of it that way but being strongly typed might be helpful because there's less room for errors when you're using a strongly typed language as opposed to JavaScript which is what do we say loosely type could that be the opposite of strongly typed weakly typed yeah I hadn't thought of that but that's that's another option I'm sorry I feel like we're not giving you a great answer we're just giving you like every language as an answer but really it it really does depend so much on what you're looking to do and what your situation is okay also says what laptop is best Kishore says Mac is good for web dev yeah I do see that a lot of web developers using Mac's especially the MacBook Pro seems to be a very popular one it has enough power to do pretty much whatever you want as a web developer I use a MacBook Pro when I'm not in my office so I would go with a Mac but there are people that run Linux machines people who do Windows it really doesn't matter as long as that particular laptop has you know a good screen if you're gonna be looking at the screen all day you want to have a nice screen and you want to be able to run which you need to run so it needs to have enough power to be able to you know have a bunch of tabs open in Chrome and to be able to have your code editor open and you know running some things locally then you need that so it doesn't need to be really expensive the hell aside Wow I'm just kidding so drowsy maybe I'm not all the way recovered yet my energy has just dropped oh here's a good piece of information so Evo is shared that says when you're doing the sorting stuff always do to uppercase and not to lower case because the care there's a character in German that gets translated when to SS in uppercase so I guess yeah okay yeah so I don't know that much about German so but to uppercase is the better way to go a Pedro asks would you say the market is saturated web developers bringing down the overall wage I I think it there are like levels of the market so there are a lot of web developers at a kind of a low level range that are willing to take work for next to nothing especially on freelance sites but if you kind of get past that and you get up into a level where you're getting into like doing work for bigger companies you know more more expensive work when you get up into that level I don't think it's oversaturated because there's a I suppose like there's a big difference between somebody who can only do minor things and maybe they're doing that work now I'm not saying everybody that's doing the really cheap work is not capable of doing more expensive work because that's certainly not the case there probably a lot of people that are really good that for whatever reason are just at that level right now but if you can break through that and get to some more higher paying clients then you get into a level of being able to do things that maybe the the majority you know can't do and so when you think of like qualified developers I don't think there's a saturation this is just my observation from what I've seen in just around the internet looking at resumes looking at job descriptions and being a freelancer for a few years myself I I think yeah so it's basically super saturated down here at the bottom at the low salary level you know and just bidding on jobs that are paying nothing and then once you get past that then there's there's not as much saturation there's a lot of jobs out there I see really tempting job offers nearly every day that I'm entirely qualified for and I I mean you all see me I'm not like some spectacular rock star developer right I'm just I mean average right like average would be a compliment for me right I'm not you know and there's still so many really good jobs that that I'm qualified more for just with my current skillset of the stuff that we've been doing on on this stream so anyway that's my take on it and that's from being in the United States as well it may be different in different areas of the world but hang in there if you're kind of just trying to make some money at this level I was there for a while and it's tough to break through and get more especially if you're freelance it's really tough to break through and get higher paying clients that really know what quality work is and willing to pay for it so just keep working at it you know try to make as many connections as you can and you know maybe try to get a job with an agency or something so that you can you'll get access to those higher paying clients alright just a few more questions and then I'll have to finish up I would love to know what you all think about market saturation and things that like that that I was just talking about because I only have a really specific perspective from from where I am but you know you all from all over the place so I'm sure you could weigh in and you know what things are like in your area with the type of work that you're doing Sathya says I want to develop my own apps I'm starting to code nowadays though so how should I proceed I wanted to make a social network app from my college project if you have experience with JavaScript and you want to do apps and also especially if you have any experience with react I would use react native to make apps there's no need for you to learn any anything else so that would be the fastest way and you can make good quality apps like that if you're not that familiar with it and you know some Java then go that route with with Android or if you know what is it Swift with iOS or the new stuff is Kotlin if you if you don't know any JavaScript or Android or Swift you try learning Kotlin because that's like the new cool thing that that everybody's doing for Android development so that those would be my suggestions we have done some some app work with react native on the stream not a whole lot we've done some Evo says this is in regard to the question we had earlier about market saturation bringing down wages so Evo says in my opinion if you know how to sell yourself you can get a nice paycheck you just need to make yourself stand out which is easier said than done yeah yeah that mean that that is definitely the case especially when you're trying to break through from that lower level there's a ton of people out there offering you know seemingly all the same stuff and for really cheap so you do have for certain clientele you need to make the case for why you're different or better or worth more some clients will never understand that and you don't know you don't want those clients if you have to take them to pay the bills take them but you really want to get to a level of client that understands that quality takes money so you know be if you can be more specific like more particular about what jobs you take then do and you'll be a lot happier going with clients that understand that but I totally understand if you got to pay the bills I was there and I had to take projects that I didn't want to work on clients that I knew we're gonna be trouble majority my clients were excellent but occasionally you know you do you know you get a bad feeling about a client base so some of the stuff they're saying and you got to make that decision like how bad do I really need this money and sometimes you need the money so you got to take it michael says my plan is to do supercut of every time Jesse yawns and these dreams I mean yawning so much the past couple of weeks I don't know what's wrong with me Chris that says are there less foul permission issues with Ubuntu than Mac OS I don't know personally I haven't used the blue two as an nos like on a laptop or desktop or anything like that I've only used it as a server so not really sure Jolie says I think there's similar or the same they're both UNIX based Anthony says contracting versus permanent I enjoy working permanently right now I did a lot of freelance stuff which it's not exactly a contract thing I guess but it's nice to be able to count on a steady paycheck be little plan ahead you know like here's what I'm gonna be doing a year from now when you're freelance it's just it's not as easy so you do get to work on a variety of projects and meet new people so it can be exciting but you just give up some of that stability so it just kind of depends on where you're at in life and and what you need in terms of you know pay stability and things like that with a family you know for kids and wife stability especially financial stability being able to have health insurance those are really important you know to my wife and I so you know I that's why I'm not freelancing anymore Michael says I'm just I'm just looking for a job I can do while I'm out on disability Oh Michael I know you're out on disability I hope everything gets better for you you know healed up let's see Nina asked what state manager do you use Redux or flux I've used Redux before so if I had to choose I'm like I'm using Redux but if I need to we're not using Redux on this project Evo says in the Netherlands the market situation is not that bad there are loads of job opportunities here heard on the news that they need around 200,000 developers and IT staff Wow nice yeah I mean I I do you always hear that that the job outlook for developers and in really all programming jobs it seems like just keeps on you know increasing it it looks good there's a good outlook so for the foreseeable future it's definitely a a good place to be if you get a job Michael says I know what I can do but I don't know how to sell it yeah I never like the selling part of it sometimes if you can find someone that will partner with you and they can sell and they get a percentage of the money then that's not a bad a bad deal you can just do the code and they can find new clients sometimes like when I would get clients especially if they were in a market that I wanted to get into I would offer deals like I'd say if you bring me in a client and they sign a contract like then you'll get like either money or you'll get free work for me and you know you can kind of incentivize people to try to do networking for you and try to break get clients for you so that can be useful as well okay Joey says and this is talking about apps says progressive web apps are great on Android and create react app practically does all the work definitely true yeah so if you don't need like an app that's going to be on the App Store you just need something that runs well on a phone you can definitely do a progressive web app with create react app that's I mean we haven't really been highlighting it that much but a lot of the stuff that we've built over the last few months have been progressive web apps and they do work well on Android like as a progressive web app Oh ambition so speaking of jobs how did your interview job interview go yeah whoa so yeah I haven't given an update on that sorry so the job interview went well so I'm gonna give you a quick breakdown of what happened so interview went really well I did get offered the job and it wasn't as much as I had hoped for did a little negotiation got it up a bit higher but it wasn't it didn't make sense for me to leave my current position based on a lot of different factors so I tried to quantify as many factors as I could so some meaning like put a dollar value on all the factors and then add that up to try to compare so after I did all that that's when I realized you know hey this this offer is not quite good enough for me to justify leaving where I'm at right now so that's where it's at I really the company was a great company it would have been a lot of fun to work there it seems like yeah but it just wasn't it wasn't quite enough for me to want to leave so that's how it went it was a great process I'm glad I went through it it was really nice meeting you know developers from a different company and I really enjoyed the interview process even the whiteboard problem was fun it was it was cool it's a nice feeling when somebody like recognizes your abilities and wants you to you know to work with them so yeah so it was a good process I yeah I I'm glad yeah I'm letting it happen but I'll be staying here which is good news for the stream because nothing will change with the stream we'll still be able to do it during you know during the day so I'm happy about that and that was one of the things that I did factor in is the ability to be able to keep doing the stream you know that was important to me that's one of those things that's really really hard to put a dollar value on nobody that was definitely a factor okay Anthony says thanks Jessie I have a little one too here in the UK contracting seems to pay really well compared okay cool yeah that's that's good to know it is cool to know like in different parts of the world what the because every market is kind of different you know Joey says have you seen the new react context API it looks like it could replace Redux in most cases I haven't seen that much on it other than some tweets about it I haven't I just haven't taken the time to really look into it more so I'm I'm definitely interested you know especially I don't want to keep thinking in terms of redux for you know upcoming projects if it's going to be unnecessary so I definitely want to check that out more and maybe after I learn more about it we can you know talk about it more on the stream and maybe maybe start using it demo some of it at some point not not right now not on this project most likely signee says is there a playlist of your various streams and basic installation required to start and follow your course okay so on so I have my own YouTube channel so this is the free code camp channel but if you check in the description there should be a link to my channel I have a video I think it's the the latest video on that channel has like a purple background and it's it's something like git and it's talking about like using it and github and and cloning things from get up check out that video that will give you a good introduction it starts out really basics you might might not need to watch it all but I'll give you a good introduction on how to get things started for most of these projects also if you look at the project repositories on github we usually have instructions in the readme for how to start everything and then we have a contributing MD file that gives you instructions on how to contribute so I'd start with that and I'm hoping to do some more videos to kind of go more in depth on how to start these projects and help with them so hopefully I can get those videos made soon and if you need any more help let me know if it's for a particular project you know you could just open up an issue in that particular repository or let me know however on social media on the stream whatever is best for you and and then I can give you more specific help you know based on what you're trying to do let's see Lorena says what does they recommend mid level of education or path to follow it really really depends on what you want to do since I'm in web development I'll give you kind of what what I would do to be a web developer and it depends on what you know so I'm going to assume like totally beginner level if if you already know that then you can just kind of skip some of these steps but totally beginner level I would start out with some basic stuff so free code camp dot org has like challenges that'll sort you out at a really low level you could work your way up as you're doing free code camp if you find another tutorial somewhere that you can learn more about a particular thing like no problem you can branch out and follow that and then come back that's how I did it if you if you don't particularly like that style of learning there are other styles so Udacity courses is more video based so I think it's udacity.com they of courses some are paid courses some are free courses they have a lot of free courses that are helpful for web development they're more video based so if you're into more video learning you can do that or watch YouTube videos of on free code camp if you like to just read like a book check out the book called you don't know Jas it's available for free to read on your computer on github so you can buy the actual book if you want or you can read it for free online but that would be a nice introduction to JavaScript just being able to read it all out so if you want to be a web developer though you know HTML CSS and then JavaScript or luego and usually in that order because HTML be the easiest CSS shouldn't be your that difficult to learn enough to do some cool stuff with and then Java scripts going to be the thing that you just keep on learning and learning and you kind of you never get finished learning it but it will allow you to do the most stuff and to get jobs that can make you the most money and you can do kind of the you can make more powerful things and cooler things with it so that's kind of I know that kind of a big overview hopefully that helps somewhat it's let me check the time all right I think I can finish this up Joey says the new context API seems pretty simple it can be understood in a matter of minutes it's just an alpha though so not ready for production yet okay yeah I I didn't think it was quite ready yet so yeah so maybe a while before we demo it but I'm really glad to know that it's it's simple Anthony asks what I used to stream with OBS so OBS is free software to help you stream so I just have that set up and then you know of course also YouTube alright I've gotten to the bottom hopefully I didn't miss anyone's questions I did skip over a few statements in there and that was just for time to apologize if I didn't read everything out all right cool so I have less than 10 minutes now thank you all for watching and for being so helpful when we were trying to go through this problem this seems like it's taking such a long time so thanks for your patience but I think we're really really close to having everything working with the sorting the way we want let me think anything else I only have anything else right now I will try to stream tomorrow around my normal time so around 12 noon if I can I'll let you know via Twitter if you want to follow me on Twitter also Instagram so you can check that out if you interested in any my videos you know check out my YouTube channel links in the description and yeah that's it for me so until tomorrow have a wonderful day

Original Description

Project 5 Day 46: Today we will give users the ability to sort search results. See a professional front-end developer at work. Unscripted. Mistakes included. Next.js 5: https://zeit.co/blog/next5 Project Repo: https://github.com/fus-marcom/franciscan-react React: https://facebook.github.io/react/ Gitter: https://gitter.im/LiveCodingwithJesseFreeCodeCamp/ Twitter: https://twitter.com/JesseRWeigel Youtube: https://www.youtube.com/c/JesseWeigel29 Instagram: https://www.instagram.com/jesse.weigel/ Code Editor: Visual Studio Code VS Code Theme: Seti 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 · 0 of 60

← Previous Next →
1 React: Production Server Setup Part 2 - Live Coding with Jesse
React: Production Server Setup Part 2 - Live Coding with Jesse
freeCodeCamp.org
2 cookies vs localStorage vs sessionStorage - Beau teaches JavaScript
cookies vs localStorage vs sessionStorage - Beau teaches JavaScript
freeCodeCamp.org
3 Browser history tutorial - Beau teaches JavaScript
Browser history tutorial - Beau teaches JavaScript
freeCodeCamp.org
4 Graph Data Structure Intro (inc. adjacency list, adjacency matrix, incidence matrix)
Graph Data Structure Intro (inc. adjacency list, adjacency matrix, incidence matrix)
freeCodeCamp.org
5 React: Parameterized Routing with Next.js - Live Coding with Jesse
React: Parameterized Routing with Next.js - Live Coding with Jesse
freeCodeCamp.org
6 React: Dealing with jQuery Issues - Live Coding with Jesse
React: Dealing with jQuery Issues - Live Coding with Jesse
freeCodeCamp.org
7 setInterval and setTimeout: timing events - Beau teaches JavaScript
setInterval and setTimeout: timing events - Beau teaches JavaScript
freeCodeCamp.org
8 Browser and Device Testing - Live Coding with Jesse
Browser and Device Testing - Live Coding with Jesse
freeCodeCamp.org
9 Last Minute Updates - Live Coding with Jesse
Last Minute Updates - Live Coding with Jesse
freeCodeCamp.org
10 Post Launch Updates - Live Coding with Jesse
Post Launch Updates - Live Coding with Jesse
freeCodeCamp.org
11 React: Setting Up Google Analytics - Live Coding with Jesse
React: Setting Up Google Analytics - Live Coding with Jesse
freeCodeCamp.org
12 React: Masonry Layout - Live Coding with Jesse
React: Masonry Layout - Live Coding with Jesse
freeCodeCamp.org
13 Load Balancing Digital Ocean Droplets - Live Coding with Jesse
Load Balancing Digital Ocean Droplets - Live Coding with Jesse
freeCodeCamp.org
14 try, catch, finally, throw - error handling in JavaScript
try, catch, finally, throw - error handling in JavaScript
freeCodeCamp.org
15 Load Balancing: SSL Passthrough Setup - Live Coding with Jesse
Load Balancing: SSL Passthrough Setup - Live Coding with Jesse
freeCodeCamp.org
16 Graphs: breadth-first search - Beau teaches JavaScript
Graphs: breadth-first search - Beau teaches JavaScript
freeCodeCamp.org
17 React: Masonry Layout Part 2 - Live Coding with Jesse
React: Masonry Layout Part 2 - Live Coding with Jesse
freeCodeCamp.org
18 React: WordPress API Live Search - Live Coding with Jesse
React: WordPress API Live Search - Live Coding with Jesse
freeCodeCamp.org
19 Creating WordPress Custom Post Types - Live Coding With Jesse
Creating WordPress Custom Post Types - Live Coding With Jesse
freeCodeCamp.org
20 Dates - Beau teaches JavaScript
Dates - Beau teaches JavaScript
freeCodeCamp.org
21 Miscellaneous Front End Updates - Live Coding with Jesse
Miscellaneous Front End Updates - Live Coding with Jesse
freeCodeCamp.org
22 Merging a Pull Request from GitHub - Live Coding with Jesse
Merging a Pull Request from GitHub - Live Coding with Jesse
freeCodeCamp.org
23 React + Prettier + Standard JS - Live Coding with Jesse
React + Prettier + Standard JS - Live Coding with Jesse
freeCodeCamp.org
24 React: Sortable Responsive Table - Live Coding with Jesse
React: Sortable Responsive Table - Live Coding with Jesse
freeCodeCamp.org
25 Geolocation Sorting by Distance - Live Coding with Jesse
Geolocation Sorting by Distance - Live Coding with Jesse
freeCodeCamp.org
26 Tradeoff Matrix - Agile Software Development
Tradeoff Matrix - Agile Software Development
freeCodeCamp.org
27 The Definition of Ready - Agile Software Development
The Definition of Ready - Agile Software Development
freeCodeCamp.org
28 Getting first React job without experience - Ask Preethi
Getting first React job without experience - Ask Preethi
freeCodeCamp.org
29 React: Google Analytics Click Tracking - Live Coding with Jesse
React: Google Analytics Click Tracking - Live Coding with Jesse
freeCodeCamp.org
30 Submitting a PR to an Open Source Project - Live Coding with Jesse
Submitting a PR to an Open Source Project - Live Coding with Jesse
freeCodeCamp.org
31 Should I go back to school to get CS degree? - Ask Preethi
Should I go back to school to get CS degree? - Ask Preethi
freeCodeCamp.org
32 Hero Section CSS Changes - Live Coding with Jesse
Hero Section CSS Changes - Live Coding with Jesse
freeCodeCamp.org
33 Working Agreement - Agile Software Development
Working Agreement - Agile Software Development
freeCodeCamp.org
34 A day at Pennybox with Co-Founder Reji Eapen
A day at Pennybox with Co-Founder Reji Eapen
freeCodeCamp.org
35 React: Sorting and Filtering Data - Live Coding with Jesse
React: Sorting and Filtering Data - Live Coding with Jesse
freeCodeCamp.org
36 React: Sorting and Filtering Data Part 2 - Live Coding with Jesse
React: Sorting and Filtering Data Part 2 - Live Coding with Jesse
freeCodeCamp.org
37 React: Building a New UI - Live Coding with Jesse
React: Building a New UI - Live Coding with Jesse
freeCodeCamp.org
38 Definition of Done - Agile Software Development
Definition of Done - Agile Software Development
freeCodeCamp.org
39 Getting started with jQuery (tutorial) - Beau teaches JavaScript
Getting started with jQuery (tutorial) - Beau teaches JavaScript
freeCodeCamp.org
40 Making a React Blog with WordPress Content - Live Coding with Jesse
Making a React Blog with WordPress Content - Live Coding with Jesse
freeCodeCamp.org
41 React, NextJS, CSS - Live Coding with Jesse
React, NextJS, CSS - Live Coding with Jesse
freeCodeCamp.org
42 jQuery events - Beau teaches JavaScript
jQuery events - Beau teaches JavaScript
freeCodeCamp.org
43 React/NextJS Routing and WordPress API Custom Types - Live Coding with Jesse
React/NextJS Routing and WordPress API Custom Types - Live Coding with Jesse
freeCodeCamp.org
44 React: Working with API Data - Live Coding with Jesse
React: Working with API Data - Live Coding with Jesse
freeCodeCamp.org
45 React: Refactoring Components - Live Streaming with Jesse
React: Refactoring Components - Live Streaming with Jesse
freeCodeCamp.org
46 jQuery effects - Beau teaches JavaScript
jQuery effects - Beau teaches JavaScript
freeCodeCamp.org
47 More React Refactoring - Live Coding with Jesse
More React Refactoring - Live Coding with Jesse
freeCodeCamp.org
48 animate in jQuery - Beau teaches JavaScript
animate in jQuery - Beau teaches JavaScript
freeCodeCamp.org
49 "Finishing" My React Site - Live Coding with Jesse
"Finishing" My React Site - Live Coding with Jesse
freeCodeCamp.org
50 Starting a New React Project (P2D1) - Live Coding with Jesse
Starting a New React Project (P2D1) - Live Coding with Jesse
freeCodeCamp.org
51 React Project 2 Day 2: Learning Material UI - Live Coding with Jesse
React Project 2 Day 2: Learning Material UI - Live Coding with Jesse
freeCodeCamp.org
52 The Agile Manifesto - Agile Software Development
The Agile Manifesto - Agile Software Development
freeCodeCamp.org
53 jQuery: get and set with http, text, val, and attr - Beau teaches JavaScript
jQuery: get and set with http, text, val, and attr - Beau teaches JavaScript
freeCodeCamp.org
54 React Project 2 Day 3 - Live Coding with Jesse
React Project 2 Day 3 - Live Coding with Jesse
freeCodeCamp.org
55 The INVEST approach to product backlog items
The INVEST approach to product backlog items
freeCodeCamp.org
56 React Project 2 Day 4 - Live Coding with Jesse
React Project 2 Day 4 - Live Coding with Jesse
freeCodeCamp.org
57 Chickens and Pigs - Agile Software Development
Chickens and Pigs - Agile Software Development
freeCodeCamp.org
58 React Project 2 Day 5 - Live Coding with Jesse
React Project 2 Day 5 - Live Coding with Jesse
freeCodeCamp.org
59 jQuery: add and remove DOM elements - Beau teaches JavaScript
jQuery: add and remove DOM elements - Beau teaches JavaScript
freeCodeCamp.org
60 React Project 2 Day 6 - Live Coding with Jesse
React Project 2 Day 6 - Live Coding with Jesse
freeCodeCamp.org

Related Reads

📰
The polite sentence that stops scope creep before it eats your week
Learn a polite sentence to prevent scope creep and turn extra requests into billed line items
Dev.to · Penloom Studio
📰
How to Set Up Jira the Right Way (Most Teams Get This Wrong)
Learn how to set up Jira correctly to maximize its benefits for your team, avoiding common pitfalls that hinder its effectiveness
Dev.to · Nisha
📰
7 Best Project Portfolio Management Software in 2026
Learn about the top project portfolio management software to improve reporting and visibility across multiple projects, crucial for effective project management
TechRepublic
📰
Why Building Projects Matters More Than Collecting Certificates in 2026
Building projects is more valuable than collecting certificates in the job market, as it showcases problem-solving skills and real-world application
Dev.to AI
Up next
ERP Project Failure: Why Change Management Matters MOST #shorts
Third Stage Consulting Group
Watch →