Oldschool jQuery Single Page App - Live Coding with Jesse

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

Key Takeaways

Builds a single page app using jQuery and integrates it with a React app

Full Transcript

everybody welcome to live coding with Jessie I'm Jessie and today we were going to do some work with jQuery it's been a while since we've done anything with jQuery but I built a single page application 2016 I worked on it for on and off for the majority of 2016 I think I launched it in October September something like that yeah it had to have been October I think I launched it right around when my youngest daughter was born so she was born at the beginning of October hey everyone see a lot of you the live chat so before we do that I have a few things I want to talk about I'm gonna try to keep it quick and then we can talk more about it later on when we do the question and answer session so first thing is something cool I found this in my basement and this is like my first phone the first one I ever had so it's one of these old Nokia phones with like the clear case that I thought was so awesome I mean it I still think it's awesome you see all the insides and the buttons are worn down you can't see the numbers on some of them so anyway I'm gonna add this to my antique collection which you all can't see so up here so this is my antique collection up here I just have a bunch of like floppy disk beta tapes the copy of Windows XP and I you can't see it but I have an old like CRT like television with a VCR and it so so that's going to be added to the collection and I'm gonna see if I can find a cord that will charge that and I'll get back on it maybe I can look at all my old text messages and see what I was saying when I was a teenager maybe I'll play some snake y'all remember snake all right so that was that was something fun now something serious and then I want to talk about a project that I'm working on and see if anyone's interested in being involved so something serious I know I've talked on the stream before about mental health issues with myself having depression so I just want to like fill you in on what I've been doing and I've been in a much better mood recently so as you may or may not know from previous streams I am going to counseling every month I'm on in two different antidepressants so I'm doing you know basically medically what I should be doing but then in addition to that this is now the tenth day in a row that I have got up early before work and exercise so nothing intense I just go on an exercise bike while I play Zelda on my Nintendo switch and I just go for like half hour 45 minutes just as long as I can before the kids wake up and and then afterwards I may do some push-ups or sit-ups if I have time and do a little stretching and I'm not super tired during the day I mean I stay caffeinated right so but I'm not really tired from waking up like this morning I got up at 4:45 a.m. and I feel fine right now so anyway I just want to share that with you all I know it's pretty common knowledge that exercise helps with your mood and with depression but sometimes it just takes a little push to get going so this is kind of my little push to say hey I've been doing enough for 10 days I feel a whole lot better it was really really hard at first to get out of bed but now that I got into a rhythm I'm waking up early before my alarm the key also is getting the bed on time so I've been taking melatonin at night so that I can go to sleep early enough to make that possible I'm still not sleeping like a lot like seven hours or so like give or take a half hour but you know if I can get eight that's awesome too but anyway so that's just decide bring that up I haven't really talked about mental health issues on the stream for a while and I know you know some of you may be dealing with the same things it's pretty common so just just want to talk about if anyone wants to talk more about that either in the chat or privately you know feel free to reach out to me I've been dealing with it for a long time and sometimes it does help to be able to talk to somebody who's going through the same thing alright so last thing before we get started with the code as you all know if you've been watching the last few streams I purchased the domain name JavaScript AF and we have a forum running on there now that Harshit set up which is awesome thank you harsh it right now it was down because we were trying to transfer it from harsh it's digitalocean account to mine and took a snapshot try to transfer it didn't work so he just sent me another snapshot and we're gonna try to get that up and running so okay I see this hard should I see the snapshot now thank you I guess I'll just get that up and running after the stream so we're going to try to get that up so if you're trying to get to the forum don't worry it's we're working on it it should be up soon after the stream but I've had so javascript err so you can see job it's in the live chat right now Jay s-see RP or JV SC rptr so I'm just gonna say JavaScript I reached out to me on Instagram and had an idea for a website where developers can connect with developers and it would be like like a social media platform but you'd login with your github profile and it could you could voluntarily have a pool data from your github and mix that in so I I kind of envisioned it and and JavaScript you can let you know you know more details as well in terms of like the UI and things and what's going on but the way I envisioned it is it's gonna be place pretty much just for developers right you have to at least have a github account to get in so if if you don't remember Facebook when it first started around like 2004 somewhere around there you had to have a university email and at first like you had to have your university signed up to get an email not not every university was even allowed yet so it was like this niche and it was kind of cool you you had this thing in common so trying to go for that vibe of you know this is a place just for a certain niche so it's it's not we're not trying to recreate Facebook here or Twitter or anything like that they all serve their purpose and what we're trying to do here is just have a place more geared toward developers so the features would be developers for developers for instance like all the github info I think it would be cool I had another suggestion for someone on Twitter and I'm really sorry I can't remember who it was right now but another suggestion was to feature really awesome JavaScript projects from the community so I think that's another thing that we could work in so that made when you go there it's not all about it's not just all about your feed like Facebook or Twitter is there's also like some highlights from the community of really cool things going on maybe some sort of like voting mechanism to be able to see what's what's going in there and and I would I kind of want to exclude like the really big projects everybody knows reacts a big deal you know so we wouldn't want to feature that because I'm sure it would be on top all the time right when you go to look at like github like top projects it's always a lot of the same really big ones so I would kind of want to feature like some more unknown things that are really cool like people doing like VR with JavaScript machine learning like no bus cool stuff so anyway we don't need to have all the features ready right away of course right but the basic features that we'd like to have are you know obviously this is going to be built with react because that's that's what we've been into new most often in terms of back-end I'm kind of thinking maybe firebase would be a good fit for authentication and things like that so I don't know let me know what you all think so while you're watching the rest of the stream before we get to the question answer session just think about this think if it's maybe something that you'd like to be involved in in some way or you know what are your ideas in terms of technology was what would work best to have something like this where users sign in with their github obviously they're going to need to be data to stored images stored these things so it if you're familiar with firebase let me know if I'm on the right track here in firebase would be a good fit so I yeah I don't know so this is it's still very open in terms of like architecture like what's what we're gonna already use so I mean something like firebase just comes with so many things built in to help us expand so that's why I'm kind of mentioning that but I haven't worked with it personally I've just kind of watched videos on it all right so anyway right now JavaScript er is working on UI stuff so basically just making kind of an interactive prototype with just straight HTML like CSS stuff well eventually once we get that to where like we like it we can convert it to react components so that's that's where we're going now javascript ER has a repo for the UI up now so I guess we could share info about that I'll maybe I'll get a repo going for like the react version of it and so we could have like one official place we can maybe do some have some issues ready if you want to help with it so I am I'm going to kind of stop the conversation on it now so we can get to the get to the code but then we'll pick up with it and you know so feel free to type whatever you think about this project and please be honest if you think it's a terrible idea let me know if you if you have ideas for features or whatever please let me know and we can discuss it in the question answer session I'm probably not going to talk about it all the time on the stream for two reasons one this is free code camp stream we mainly deal with nonprofits this could eventually end up being a for-profit thing if it's big I could see maybe companies wanting to advertise jobs I wouldn't want it to get crazy like a lot of social media now there's so many sponsored posts and things I don't want it to be like that but you know potentially there could be something like some something at some point so I don't want to bring that into the we can't Channel also I am streaming from work and I'd like to work on my work project so I don't want to spend a lot of my work time doing this so if you have questions please feel free to ask me I'll take a minute or two in the live chat everyday to talk if you have a question otherwise just you know send me a message on any of the social media things or whatever and we can kind of organize this and and get this going okay also javascript is in the live chat now so if you want to keep the conversation going just send a message you know just tag JavaScript or in the live chat okay all right so let me introduce you to this old jQuery project that I that I built so I we we worked a little bit on a react version of this project this is the the bulletin right the university of oulu team that we had worked on and i did some updates to it yesterday i added so we had that email authentication where you could do the password list link sent to your email i've added another way to go into the app and we talked about this yesterday a bit where basically if you're able to log into the university single sign-on system and get to that password protected area and then you click the link from there you can get directly into the bulletin without having to go through the normal login process but the problem now is before we automatically had a user's email because they had to put their email in to login and so I had a form on there that a user could fill out and I didn't have an email field because we just grabbed the email automatically now we need to add an email field in and we need to change up a little bit about how we're sending that data to make sure that the emails are going where they they need to go so let's dig into there let's let's kind of like try to straighten out my spaghetti code jQuery this hopefully will be a good example of why you I really don't want to try to make a single-page app and handle routing and everything with jQuery because it starts out small and then you add new features in all the sudden there's a lot there so let's start out and let's run this so this is running on gulp so haven't used go up in a while I don't know how many of you remember using gulp or still use go I mean if I'm not doing the react projects I'd probably go with gulp or maybe just like NPM scripts or something but so I think it's gulp watch let's see oops let me bring my screen up here there we are yeah so I just did a gulp watch and this brought up our bulletin now I'm gonna have to login so here's the the normal login and this is done with a service called auth0 so I'm just using the free plan for auth0 the university is not very big so the free plan is sufficient and I'm sending the emails for the authentication through SendGrid so the free plan on Austria and SendGrid are kind of what's behind this current system eventually we'll get rid of this system when we switch over to the react version that heart should set up a password the system without the use of Ozzy row which is awesome so let me check my email now and get the code there we go that's great all right so now I'm in so what's happened is the user information is not saved in local storage in the browser so as long as I don't clear your local storage then this will stay login for a year at least that's the plan some users have been having issues where their local storage is getting cleared and there's no apparent reason why so that was the other day there yesterday or the day before or I think I had someone come in for some troubleshooting and that was exactly the issue they were getting logged out and we could not figure out why all right so let's go to this submit announcement form so this is what we're going to be changing we just need to add one more field and that's for email and we probably could now that I look at it you I was it might make more sense visually to move this file up load up here in this corner so we would have email the file upload and then the announcement full-width down here write the announcement generally tends to be a lot longer it wouldn't make sense that will fool with email except on on small screens all right so that's what we're that's what we're gonna do so let's check the code and let me just duplicate this tab and we're gonna go into visual studio code I don't think I have this open anywhere maybe I did oh well okay so this was our password we don't need this this is where I'm handling the login our app [Music] baliya so all the code is informs AAS now unfortunately this code is in a private repo so you won't be able to to follow along I just saw the live chat Harshit said has to go because something came up thanks so much are for for all your help with the forum earlier and hopefully everything's alright nikki has to go to see it thanks for watching let's I also should mention we had some more pool requests come in and we will go over that and review that probably tomorrow I'd like to get back to our main project that francisc and main website that we've been working on tomorrow and then continue to just work on that project until we launch it in February late February alright so let's check out what we have this controls the modal and we have different models that show up whether the message is successful or not we're also going to need to go to the index page so let me split this this screen so we can have the HTML on one place and I believe it's all the way at the bottom here here we are let me know if that font is too small so we can see we have this this text area for announcement what we want to do is make an input so I'm going to I'm gonna take this and copy it and we're gonna need yeah we're gonna need to rearrange this a bit but first how that indentation is crazy there we are so we're get definitely going to change this we don't want the the edit icon so let's see I'm not sure if there's an icon called email but it's worth a shot and we want to change this we obviously don't need a text area so let's change this to an input and we can give it a type of email we want to change the ID to email and he relies inputs I think that class will be fine and we want to change this to an input and the label now is going to be for email and we're going to change this to email all right so now we're pulling in email are we we have a field for email and let's bring up this file upload whoops and you know what I forgot to put this in its own I mess this up a bit alright let's bring this down here and let's put it in a div we are using materialized CSS so that's where these column classes are coming from class it's so weird to not type class name since we're used to doing react but we can use class and let's call let's make this a column and we want it to be in small screens we want to make it full width so 12 out of 12 columns and then on medium screens and up we want it to be half the width so 6 out of 12 columns and now we can paste in our new input and then we also want to bring in this file upload input so let's grab make sure it'll grab too much class for every checkbox okay I believe we have everything and we're gonna put this right here underneath and we're gonna also need to change our column classes as well so we had the column that was oops did I put this in the wrong spot I think I did let's move that okay now in the right spot so we just need to add on on medium screen so we want this to take up half the width all right now let's check out how this looks and then we can go back to our our code let's move this around so you don't want to go too far all right let's check this all right okay not not too bad so we have our email and you know what the this is not aligned correctly we have to check on this alignment why we're having an issue here but other than the alignment issue this looks fine I do want to make sure we're setting a good breakpoint here so let's see if at any point it looks too small I think it's fine I mean it's getting a little narrow there but that's that's still reasonable all right all right not bad let's see if we can figure out from the markup with this this issue is beat with the spacing with these icons and an easy fix if we can't figure it out would just be to remove the icons which I'm okay with doing that basically the reason being this is a really low level update that needs to happen so I am I'm not that worried about you whether or not there's an icon there all right so we have this row and everything is wrapped in one row okay call them class the field callers - okay it's a column you know what let's try to put though we do have this oops what did we do you know what I added another column there I did not even realize that I added an extra column alright so if anybody caught that and was really confused that's why I added an extra column where I didn't really need one let's check this up now hopefully that corrected it yep and that corrected it now these are lined up properly I'm not thrilled about how far up this is with the email but I'm willing to live with it right now whoa hahaha I didn't even notice this alright I probably just forgot an ending div here somewhere so let's check out our divs [Music] oops there we are I have too many divs here we are all right that's acceptable I'm honestly this is not the best-looking thing I've ever built but right now this needs to be done like today like this morning it needs to be done so I'm okay with it also the fact that we're going to replace this entire thing with something new sometime within the next six months like I'm alright with with this this is a feature used by I don't know maybe a dozen people on campus so it just doesn't make sense to spend a whole lot of time nitpicking the details of this UI alright so now let's make sure that that email gets in to our forms J s file so let's see how how we're getting this data so we can move this over because we won't really need this just mark up for a little while let me see I'm gonna check my time in about five minutes I'm gonna take a five-minute break and I'm gonna go to the live shot here and answer some questions I don't want to get too far behind with the live chat so if you're asking questions you're wondering why I'm not reading your comments or questions I usually go back and forth between code and questions for a certain amount of time so I do code for about 25 minutes then I go back to the question and then at the end I'll just do a big question answer session and get through everything so if you can just hold on and you'll hang out in a live chat I'll get your question if you can't stick around you can always catch the recording of this later on and I'll answer your question you know whether you're here or not and and then it'll be recorded for you to to check out whenever you have time alright so let's see so a little bit about what's going on here maybe if you're not that familiar with jQuery this looks weird if you are familiar with jQuery this is pretty standard so we're just kidding so we're binding the submit event of our form so this is the idea is the announcement submit form and on click we're going to do something so we've passed in the events we have access to that the first thing we're going to do is check the length of our hidden checkbox so this is our security on the form right so I don't even know if this still works anymore but the idea at one point was like if a bot is trying to fill out your form like a spam bot then they they would check the hidden checkbox because they would see it in the markup but a real person would never see it and check it so so if the hidden checkbox is checked then you don't actually send the data right so that's where we're checking there so first thing we're if there's a request going we abort that request and oh man I'm seeing lots of variables here instead of constants Wow so here's our form container and we're just saving that to a variable so from now on dollar sign form is our form and we don't have to keep writing this selector anymore so we're going to get the inputs from form so we're finding all the possible inputs in that form so we're getting any element that is an input a select a button or a text area and then we're initializing some variables here for name value and iterator and then a checkbox we're grabbing the form elements let's see find on input type checkbox' all right so this is getting inputs but we're excluding some things we're excluding checkboxes we don't want the hidden one we're excluding the file type input and we're also grabbing uploads like remembering this as I go along so and remember it was nearly two years ago that I wrote this so be kind as you look upon my spaghetti code alright so we're going to serialize the data and so here's what we need to change right now we're checking local stores the profile that we have saved after someone logs in for the email we don't want to do that anymore we want to grab the email from that form data all right so let's see what the best way would be to change this we are okay I forgot I'm sending this all to a Google sheet and then from there from the Google sheet the email is being sent okay so I don't actually have any code that handles emails all right sometimes it helps to just look at your code even if you wrote it all right I gotta take a break for just a second because it is super hot in my office I'm gonna take off my sweater and then get back to it actually it's a bin all right it's been five minutes so I'm gonna take on my sweater and then we're going to I'm gonna go to the live chat answer some questions read some comments and then we'll come back and we'll grab that email from our new email input and that should be it there's one other place in the bulletin where there's a typo so maybe we can find that and fix it and then we can push all this to production and hope hopefully it all works all right I'm gonna scroll all the way to the top of the live chat sorry if I seem a little bit distracted for some reason like all these songs that I don't like keep playing on Spotify it's just bothering they think and then I keep switching them maybe I should just switch playlists alright there we are switch playing this should be a lot better all right rook or Nicki says old-school app made in 2016 sounds about right front end moves so quickly yeah for sure see it's a lot of you saying hi I'm just I'm just to collectively say hi to everyone there's a lot of people in here they're nice that's crazy so old haven ich if you're still there I didn't see you at the beginning there but thanks for watching AHA John Hanson says hey all what jQuery Hank it's just kidding all right so Mari Marius let me know if I'm not pronouncing that correctly the Marius says up when the Mario says had depression too and help get out of it through exercise also says I'm so glad you're doing better talking about it it's a good move too too much stigma around discussing depression yeah I do want to say too with depression I've fallen into the trap before of thinking like hey I'm cured of depression and like stopping my medication and just stopping doing all these things that helped me and then I would fall back into it and it would take me a long time to get back out of it and you know get back to you know doing the things that helped me out so I'm gonna try my best not to fall into that again I'm gonna continue with my counseling my medication my exercise to be honest with you the counseling the medication or way easier than exercise for me like taking a pill not a big deal I'm going to go talk to somebody for you know an hour a month not really a big deal my counsellor is great I always feel like a million bucks after I leave counselling so the exercise would be the hardest but I just want to let you all know that that for me at least depression has never been a thing that I could just like say wow I'm cured it's gone it always comes back sometimes it takes longer than others but you know if you're in that place you know don't don't feel bad about I think that's just kind of the nature of some types of depression med asks why did you get depressed in the first place I don't really know you know why it was it's not like an event happened really that made me really depressed it's more like well as far as my doctors say it's more like a chemical imbalance like there's you know serotonin and different things in your brain that regulate your mood and my brain is not producing enough of that and certain things can help you get more like exercise or medications so that's that's where I'm at right now just trying to get back to like normal levels of you know whatever chemicals in my brain I'm supposed to have they're all right hey I have some of you are typing in Russian normally I would put that in Google Translate but I'm gonna go ahead because we just we have so many comments now that I'm not gonna do it right now maybe I'll do it later on though so apologies for that alright it looks like a lot of you thought that it was a really good idea to have that this whole website that we're thinking of doing with JavaScript AF kind of the a place for developers to showcase their work and encourage each other Jordan asked for links to tutorial videos Jordan let me know what tutorial videos you're talking about because I'm not 100% sure maybe I missed something in the chat or maybe I missed something I'm not sure what I was talking about there so let me know if you mean any of the doriel videos that I've done on my channel which I don't have that many videos yet but the link should be in the description to this to this video Oh horseshit I know you're not here anymore hardship but hard said might kill the forum thing it's getting useless I'm I don't I wouldn't kill the forum right away I think it's a good thing and I think I would rather not kill it but maybe move it to a sub-domain and I don't know you won't let me know what would you think but I thought the forum was really cool a cool idea alright so it's been about five minutes I'm going to go back to the code and try to finish this up I'll come back to I left off in the live chat after we finish this I'll see Sebastian's in the stream and I haven't seen Sebastian for a long time so hey Sebastian how's it going welcome back I'm really happy to see you alright so let's see and I just realized I haven't been using the Pomodoro timer so let me bring this over this is the one that I think this is the one Harsha built yeah so let's set this timer that way I don't have to keep watching the clock and let's grab let's see if we can grab our e-mail so we're bringing this data in we're grabbing these inputs and we're finding this funny funny I'm not sure what format we have this in so I want to see I'm gonna do a console log and I want to see what these form elements are let's check it out let's put something in here autofill some stuff and submit and inspect it see what we get dev tools popped up on that other screen and it's this one announcement text email says good let's make sure I don't have any more console logs in here it's possible console logging several things what one of 19 I seriously have 19 console logs whoa all right let's get rid of a lot of these console logs what was I thinking 19 console logs all right I'm okay with with console logging this stuff for now all right I have some well I have a lot of stuff that's just commented out it's always crazy to go back and look at my old coat and just say what was I thinking all right so let's go I want to make sure I know which console.log this is so this is some es6 template literal syntax so I use those back ticks and then everything in here is a string unless I put it in with within brackets starting with the dollar sign and then this is JavaScript so now I'll save that and I'm gonna bring this over here make it bigger so it's actually readable for you all let's clear this out and now I'll put my email back in and submit the air we are sisters look at this object object okay cool so we have an object alright I was hoping that we would have an object wonderful alright let's go over here so what I should be able to do is just grab that value let's get rid of this when we get that email oh I see so we are let's take this out of here so we're just going to define email here so it's still available in the scope that we need it but then within this function where we're serializing then I'm going to go here and say if name equals oops I need parentheses so if name equals email then we're going to set email equal to the value all right so now since we defined email here even though we're inside this this loop here we're gonna give email this value and then now we don't have to change anything else because anywhere that we're using the email variable down here it's just gonna pull this value so could we possibly refactor and make it a little bit nicer probably but as I said a few minutes ago this this particular update does not justify spending any more time than we absolutely have to and we're going to replace all the code sometime within the next a few months or so okay so now let's try it out so I'm submitting it it says it's been since although the result says error email invalid email I should let's clear it and then try it again I I'm not sure if that was from this time or the last time all right so in I'm getting an error and a success well the only way to be sure is to check my email so I do got my email open on my other screen and let's see where I should be getting an email at my gmail account and another email at my work account okay all right so we have an issue so right now it's coming through the message is coming through as test but the email is coming through is undefined so let's see what value were actually getting here now there's two ways that we could troubleshoot this right there's multiple ways so we could go in dev tools and check out the value of this or we could console.log console.log would probably be faster at this point but I would like to show you another way that we could we could get this so I don't usually do it this way but it is it can be really useful so let's check out our sources and Wow so many things well how do I have so many sources you know these are all my there we are alright so let's go to our forms and let's check out email so let's put in break right there so let's redo this and now we're gonna go to submit announcement and we'll put the email in or submit and we have a break point now right so I've added the break point so the code stops right here and I can check it says all right the email name equals no space all right so this looks kind of weird our serialized form elements end up being email equals Jessie why go at gmail.com and undefined equals and announcements that so we're doing something wrong let's figure out what we're doing wrong here where are we getting that undefined from you know what I believe we're adding we do need to do some stuff down here I think yeah we do all right let's go back to the code I was a little bit let's see all right King Darcy's one of C's my mistake hahaha good look good look at that good catch those equals all right thank you for catching that you all are great on that you always catch it before me so yeah I was using a comparison instead of assignment right so I was using the three equal signs instead of one so that's that's good but then I also remembered that with the serialized data why am i serializing the form elements and then making the serialized data am I even using the serialize form elements anymore I want to see what I'm doing with these one two three I'm not even using these all right I'm gonna leave it alone this definitely needs refactored there's stuff I'm not even using and we'll leave it alone but it should it should work all right let's see I think that I pulled this code from another project where I did need this and I just left it in there never took it out let's see all right when you refresh it should have refreshed I don't know what oh let me take this up and let me make sure I saved it there we are now let's give it another try all right yay all right wonderful I've received the confirmation so I received a notification at my work email that someone submitted a bulletin and then I received a notification at my personal email that my submission was received awesome very awesome all right cool okay so it works so the let's let me check my timer whoops all right so I have about ten minutes left at this point I want to very quickly find the typos that I had which a co-worker of mine found it so I'm going to go to my slack messages and look at that again okay great on the bulletin help page okay so it's on the help page which listen help I don't even remember what the help page is is it okay it's a separate it's a totally separate page okay let's see hopefully I actually have it in here but it will be suppose the dist index hmm help all right so have a whole nother folder that's for help let's look at the index and see what we can do all right so it says experience is misspelled expe r IE n c e h PE r IE NC all right cool let's just well that's too much let me make sure I'm not using it anywhere else expe o the end all right so that's not coming up at all good alright so that is ready I do have a dist folder let me see strength Inc how I got this help alright so help is included in the dist so I have this set up that I can just use gulp dist to make this ready but the last time I tried to run this it didn't actually do what it needed to do to all the proper file so I'm gonna go into dis now and make sure that we have changes in the proper file so it should be index and then that forms dot J s and we also need to have index dot HTML within help change as well so we're in the dist folder it looks like help did not change so we're gonna I just I'm just going to manually pull this over for now you can see like all the little places where things just did not get it it's just not good there's just little manual things that need to be done the build steps are just aren't good like compare that to something like using create react app and having all that done for you and and it's consistent it's reliable it's just a huge difference alright not that you couldn't do that in an app like this but it's not like it's not like I had an all-in-one like this is going to do everything I wanted to solution alright so that's there we can close up this help and our index dot HTML and I have great okay so check our status just to double-check at this distance awesome now the next step is let's do a commit let's say an email field to Miss submission form and we're gonna push that up to get up so again I apologize this is a private repo so you can't see the changes and then now I'm going to do fly production so I'm using an NPM module called flight plan which basically goes into your server and copies over your files into the right folder and it's really fast so that's it that should be working I'm going to double check by going to the bullets in the live version and actually let me bring this up on my screen No oh let's see all right so it's not working now but this would be a good test so this is the new login system the new possible way to log in that I'm going to test right now I tested it yesterday but can't hurt to test it again so now I've logged into our the university's single sign-on system that they call access fus I clicked University bulletin we just saw a second ago I was not logged in I click that and now I have access to the bulletin but there is no login info saved for me but if I go to submit announcement no no did not go there maybe there's some cat there we go it was just caching all right cool so now I have the email files let's do a live test of this and submit submission has been sent let's check my email to verify yes I just got verifications on Gmail and on my work account wonderful all right cool so everything worked out today maybe I'm better with jQuery than I am with react usually I break something with react oh wow so hopefully I I was trying to do a couple of things with this stream like other than just my normal like watch me at work you know type of thing and that was show an example of how I used to do things and kind of like hopefully see how far I've come and and really not that much time and also show an example of how things can just get really out of control when you try to like hand code everything and not use something like react or angular or your view to structure your it's possible I met all the user requirements with this it works it's reliable but it's it's kind of hard to maintain there's not really that much of a logic to it until I go back in and just look at what I've done so anyway I hopefully that was like somewhat evident to you all hopefully I don't have to go back in and mess with this very for very much longer and we get that react version going so with the time we have left which is only three minutes so I'm not going to do any more code now I'm going to go back to the live chat and I'm going to answer all your questions read out comments and so anything that you want to talk about put it in the live chat let's scroll up okay Zuber says no fireplace please instead use Postgres alright so Zubair if you're still there let me know why you don't think firebase would be a good fit for this Anne Hale says MongoDB we can definitely look into using for sure oh okay hard mate that's right okay so I don't I don't know if our should still here or not the Harsha did make that chat app with firebase so I'm not sure if he shared that with everyone in the live chat but I I remember logging into that before so that's awesome so since Harshit is already familiar with firebase that might be a good way to go though just to save the time of having to learn something else Anoop says horseshit you're pumped up yeah hard should it always has a lot of enthusiasm I really love that about Harshit and he has the skills to back it up so Nicky says firebase is pretty easy to use but apparently gets expensive when your site gets popular all right I can see that but I wonder is it more expensive if your site at really popular is it more expensive to use firebase or would it be more expensive to try to do the same thing by scaling like manually scaling up servers and handling all that so ideally if our site they'd get popular we would either get some funding from investors or donations or let's say advertising or you know probably like job listing types types of things I think a job listing would be the most useful kind of advertising for developers because developers probably are looking for a job or at least would like to see what's out there if we start if we did would do advertisements for products I mean it could possibly be useful but I could see that becoming a little bit I don't kind of more annoying that's just me I don't let me know what you all think on how us if there was a repo of the project that I was talking about and this is that JavaScript AF project we're talking about the beginning I haven't made a repo yet JavaScript there made a repo that's just gonna be like a static HTML site just to kind of get the layout done which i think is a great idea because it at least for me a lot of times a static HTML site is just so much easier to to do things in to make like UI changes you don't really need to add all that other stuff that comes with building out react you don't need you know at that point once we're you know pretty satisfied with the UI then we can always start making that UI in react kind of like how we did for cat a chemical Institute but we're gonna do a better job of it guitar says M lab is free check it out I think we've worked with M lab in the in the past on houses MongoDB Atlas has a free version cool thank you for all the the suggestions here I really appreciate this ambition says do you code on the weekends sometimes it depends I really I try to save the weekends for hanging out with my family but when I was doing the Udacity react nanodegree I I coded on the weekends when I have a client on the side I code on the weekends so it just depends on what's going on right now my wife is doing she she's doing to like boot camp programs at once so she's gonna Udacity nano degree and she was doing the flat iron boot camp at the same time so the weekends like she needed all the time on the weekend to do that she just graduated from Flatirons boot camp so maybe she won't need as much time we'll see so right now I'm doing little Cody on the weekends but that sometimes I do a lot it just depends Zuber asked if javascript err and hard username used by the same person oh no no it's dude JavaScript and harshin or two different people michael said just got here and i think i really missed the most important part of the chat all right Michael if you're still there I guess just go back and watch their recording I don't sorry I'm gonna need a drink after fit and I can't get rid of mic off it's not nearly as bad as it was the last week but it's like still there let's see I lost my place here Stephen s if if we're gonna cry when we see this meaning my jQuery mess Alexis's jQuery is still used to s go yeah yeah I know it's definitely still still used Stephen says Jessi's confidence level is scaring me today I'm not sure what you made does it seem like I have a lot of confidence today or not a lot of confidence it feels like I'm the normal amount but I don't know and is that a good thing or a bad thing if I'm more or less confident Zuber says think about parcel jazz okay I haven't heard about parcel jazz Siraj says parcel is the new build tools oh okay and Mayer says partially I'm loving alright wow I'm totally like out of the loop here I didn't know that I don't remember parcel Jess at all I'll definitely have to check that up the JavaScript just says if you want to talk more about the project you can DM me on insta yeah me as well you know there's a variety of ways to get in touch with me so whatever way is most comfortable to you you know just let me know email Twitter LinkedIn Facebook one of the Instagram any of the social media stuff I'm on just you know message me all right Michael Chris has defined spaghetti yes so when I say spaghetti code usually it's just like to me I don't know if there's an official definition right like it's it's just kind of like a term that people use to describe code that's kind of like gotten out of control out of order it's it's not separated out logically so that was that's what tends to happen on some projects that were you either and it doesn't you don't have to use jQuery for to turn out a spaghetti code you could be using vanilla JavaScript you custom make everything like the routing and all that which is great and it could be really clean at first when it's small but then you come back in later on and sometimes you have to add a feature here there it doesn't scale well you end up just adding on pieces of code sometimes you don't remove old pieces because you need it for this one thing and then later on you may not need it anymore but you don't remember that you don't need it so like I went back in and found a variable that I I wasn't using at all so evidently when I was working through that I left it in there for a reason and then forgot to take it out so that's kind of what I mean by spaghetti code it's all jumbled up like spaghetti and it's hard to take it apart right it's hard to just take like one strand of spaghetti and separate at all you know with before you had to stick your fork in and do that it's hard so in the same way it's hard to just separate out parts of your code like you could and react right like in react you have your component if you do it right you know you could remove that component and pop it in another project and with minimal changes or sometimes no changes it can work hopefully that makes sense let me know if it doesn't or let me know if I'm wrong about spaghetti code it means something totally different than I think it means see Gander 7 says I watch from work and couldn't pay attention because of Ward discussion when you were pitching an app idea at the beginning could you recap if you figure out what I'm asking yeah sure Gander 7 I mean the best recap is going to be just to watch the the replay but just a very short recap is it's going to be a website where developers can have a profile on there where it'll just you'll sign in with github it can pull data from about your repos and things and you can share projects you're working on and talk with other developers and it could be a place to you know highlight your work I'm kind of hoping that it would end up being a place where the focus is mainly on projects especially maybe smaller more obscure projects that are really cool the people working on to kind of bring it to the community and you know get some more exposure for that and also a place where I mean let's face it like a lot of the other social media places they're all this other stuff aside from coding right so it would be nice to have a place to go where the focus is mainly just you know coding and developer related stuff and not necessarily you know other stuff that's going on in the world there's it's important to talk about other things but sometimes you don't want all that other distraction around so this will like be purposely focused on one group just developers and only on topics that relate to to developers on Hill says we can open an issue with the subject about this project or JavaScript er you can write the description of the project in the readme of the repo yeah that's actually a great idea thanks for that I know we should definitely just explain everything and have it there for everyone to see old sauce says why is jQuery so bad where is where it's best use and where you don't have to use it all right so yeah I guess I don't want to give the impression that jQuery is terrible to use because I think some people it seems like they believe that but I really don't believe that I think jQuery has its place I will say this if you're working with react you should probably not use jQuery because any Dom manipulation with jQuery is going to circumvent reacts you know the component lifecycle so you're not going to get that you're not going to trigger a rerender with within react you really should do everything like that within state so try to avoid it with react but if you had a project that was not react based than you wanted to add some jQuery stuff it could be a very helpful library can help you do more in less time than if you try to do it all which is vanilla JavaScript jQuery can be very helpful especially for beginners we're just trying to get started and get a feel for doing things I mean yes I think we can all agree that learning to do things the vanilla JavaScript way and the long run is very good for a developer but sometimes newer developers need to have some successes and need to be able to build cool things early on to keep their spirits up and to make it through this you know we all know there's ups and downs you gotta have some thing to look back on to say wow I did that to get you through those Downs I think jQuery you can very very quickly be able to make some cool things also you know people talk a lot about how it's bad that jQuery is this big library you bring in and sometimes you only use a tiny piece of that library well the fact is that most sites on the internet use jQuery so the odds that somebody already has that you know cache somewhere especially if you use a CDN are pretty good so the the cost of that size of you know jQuery is really mitigated by that so all in all I I'm not if you use jQuery I'm not at all trying to say you're bad develop or anything obviously I've used a lot of jQuery on projects I even usually carry on a project within the last year that we completed so I will say this in terms of just don't use it if you don't have to if you only need to use a little bit of jQuery it might be worth it to look up how to do it with another JavaScript yeah so that's my take on it if you disagree please let me know in the live chat or if you agree but have something to add to that please let me know see [Music] started then this is hello from Russia hey how's it going thanks for joining us no my AB said is that visual code on Linux on houses Syed yes I use it on the moon too yes it is available on on Linux yeah Dennis wants to see my plugins for Visual Studio code sure let's view extensions alright here's what I have let me get rid of these it's not gonna let me alright so here's what I have now most of these extensions can be added if you just get the react food-truck extension react food-truck will automatically add a bunch of these in but if you do that I highly recommend that you disable import cost because it uses a lot of resources on your machine and it caused me to drop a lot of frames in my streams Harshit said it either crashed or almost crashed his computer so yeah so just be aware of that if you end up getting react food-truck so all I guess I'll just scroll slowly through this and then if you want if you need to pause on one of them just you know what you can pause the video or go back and watch the recording javascript or says I hate depression I suffer from it as well as anxiety yeah yeah for sure the anxiety occasionally I have trouble with anxiety but I've been it's been good I used to have panic attacks but it's been years since I had a panic attack and I really like I'm a lot better with that John Henson says about jQuery the jQuery is not bad though it does not run natively inside a browser therefore a library needs to be running inside browser in order for it to call the JavaScript so there's data overhead that is that's well said so I definitely agree with that his access I went through a two Oh Peter says Visual Studio code is also available on Debian and Red Hat Patrick says Patrick O'Donnell says hey walking 20 minutes a day is all the exercise you probably need it or wonders good luck cool yeah actually I've heard that my wife was telling me that she read that I don't actually need to exercise for that long to get the the mental benefits so I'm gonna keep that in mind but so I made a room for myself that if I'm exercising on the exercise bike I get to play the Nintendo switch so it's incentive for me to play otherwise my kids always want to play and it's like I just don't get to so I kind of want to keep exercising for 45 minutes because you can't get that much done in 20 minutes right but anyway I'll keep that in mind because sometimes if I didn't get my full 45 minutes in I would feel bad about it which is I didn't want to feel about I'm exercising so I can feel better so I'll keep in mind that I really don't need that 45 minutes and that's just extra I think you know that that'll mentally that'll be better for me Dennis said I can translate from Russian if you need oh cool cool thank you Blake says why the dot af you know the UM alright I could say okay Michael criolla explain that all right thanks thanks for Michael yeah I just got the domain name is kind of like a joke cuz I thought it would be like it'd just be cool to have I wasn't sure what I would do with it so that's why I got it I just it like I realized that dot AF names were thing and you could actually get it it's the Afghanistan like code so I immediately just started typing things in to see if they were available and JavaScript was one of the first ones I tagged in it was available so I got it JavaScript er says I'm getting a lot of good feedback from it awesome my AB says yep I found a flat pack for Visual Studio code cool I'm not sure I don't know what flat pack does let me know Sebastian says quick TL TL DR so too long didn't read on the JavaScript thing happens haven't been seeing the stream in a while yeah well hopefully you've you're still on and you've heard me explain it a couple times so let me know if you need some more explanation though but I think we've got over - a couple times down Sebastian says hey I've been working hard I have this week off so I'm catching around awesome well enjoy your week off I'm glad you decided to spend some of it here with us Oh Alexi said the chat has been buggy is anyone else having a problem with the chat it seemed okay for me but I wasn't really in it a lot I was on my other screen Sebastian says get a dot tk1 it's free and more popular what's the dot tk1 am i missing the the joke with a dot CK domain Aleksey says da da f domains are expensive where can I get that domain cheap I don't really know it was kind of expensive it's more than I've ever paid for a domains oh it was like an impulse buy I was like oh this I just have to do it so I don't I don't know if you can get a cheaper I didn't find it anywhere cheaper Michael says between yesterday's group chat and now today's look at your spaghetti I'm feeling better about the code block I'm experiencing all right well I'm glad I mean I always say this if I want you all to see when I mess things up because I think it is important to see other developers messing things up trying to work through it especially messing up just simple things like I messed up and put three equal signs instead of one equal sign right like especially for developers who work alone or freelance or something like it's easy to get the idea from social media from other YouTube videos that there's all these developers out there that are awesome and the don't make as many mistakes as you do but that's not the case at least I think it's not the case because I make a lot of mistakes show so I just kind of wanted to share that right because we we don't naturally want to show our mistakes right we want to post a selfie online and we take 50 selfies and post the best one right we don't post normally all the worst ones right it's the same way with our code right we don't post our terrible code and we don't post to you know talk about how much how the crazy ridiculous simple mistakes we made so anyway my point is that I'm glad that it was working out that way for you Michael Oh Michael said by the way the : in the days remaining give is making my OCD kicking super hard these remaining I don't know where that div is alright let me get rid of these extensions I kind of want to see this this day let's see I don't even know where I have these remaining on here oh whoa let's see I lost my place sorry sometimes the chat just Scrolls down all the way to the bottom King Dhara aha so King Ghidorah kept pointing out my mistake with the equal signs he said I was going crazy over here I know sorry it took me so long to look over I just I always forget that you all probably see it before I do and I should have just looked at the teachers I didn't realize that I had a mistake for a while though anyways david says Jessie you remember our venerable code opulent and imperial gazing proudly from its stoic perch above the page alright that's a different one today David I'm wondering so David is that a quote from something because I don't I don't really know what it's from anyway let me know all right so javascript is made an issue in the github repo on on javascript or github account where we can all discuss the project max put a like a sleeping emoji so I don't know what I was doing at that time in the stream but it must have been boring sorry max King Doris says the reason I'm not a fan of firebase is because it feels dirty to put all of the back-end data management logic in the client does that matter maybe I'm using it wrong I don't really know King Ghidorah I like I said the only thing I've seen about firebase is from YouTube videos I haven't actually used it yet I'm gonna have to talk to some people that have used it I know hard has enough to talk more with hardship and maybe I'll just try to you know reach out to people to see if someone can fill me in on the pros and cons of using it King Doris's and I know firebase functions are a thing but I haven't heard much about them yeah I haven't heard anything about them either Jordan says go server list with AWS yeah I'm like it I'm open for any suggestions on this right now I just threw out firebase kind of to kind of get things started get the discussion started but the way I look at different technologies is you have your user stories you know what you want to accomplish now find the technology that will accomplish that the best way the quickest way the cheapest way what you know whatever you needed to do find what's going to get that done for you so I'm not tied to any one technology it would be nice to use something that I'm familiar with there'd be less learning involved for me I'm not opposed to learning but I just know like I'm realistic with my time to know if you know I might not it might take a lot longer if I have to learn something new before I can help out on this project Michael Chris has no ads please no ads JavaScript er says yeah no ads trust me that Lexi said ads aren't bad take a look at carbonize yeah I I don't want to put ads on there like I said the only thing they even remotely close to ads that I'd be okay with or job postings because to me like that's that's helpful to developers right when you go on Stack Overflow you see the job postings on the side that never annoys me I'm I think it's I'd like to see like oh yeah what jobs are out there what are they asking for what are the titles even if I'm not looking for a job it's still nice to stay up to date on that so that's what I'm talking about I really would like to stay away from ads if possible I mean but all like realistically at some point if it gets really big in the cost for servers and everything is really high something's gonna have to happen it doesn't have to be ads but something needs to happen so that can be paid for I am NOT independently wealthy so either like Bitcoin has to get to a million dollars or I have to win the lottery or we got to find some other way to this before tea michael says the customers who would come to the site have a ad-blockers install so it would be a waste of time to set them up it could be I don't really mind ads that sometimes it's useful if they give me like targeted ads based on my interests sometimes I see it I'm like oh yeah I did want that thing Alexi says I guess it depends on the person I whitelist pages that I want to support I also whitelist youtubers I'll export oh that's a good idea I never thought about that but I don't run an ad blocker on my regular browser I do have it on one of my browsers but that is a really good idea about whitelist things to support the site's you do work I like that Mikael says hi what are you building in this particular stream I was building I was doing some updates on a jQuery single page application that I had built two years ago and I was just adding in a new field to a form and connecting that up with we were sending it to a Google sheet and then that would be emailed from there Oh Mykel creo sorry Michael so I thought Michael had asked me to define spaghetti codes spaghetti code but he actually said definitely spaghetti sorry I went through that whole explanation Michael also says believe me I know what spaghetti code is I have a pasta master so sorry about that Michael well maybe somebody out there didn't know what it was so hopefully that was useful to someone Michael said Jessie developers need their ups and downs to make the ups feel better me you're preaching to the crowd okay so quote quoting me and then he says me you're preaching to the crowd brother yeah I mean yeah that's just how it is that's I think just the nature of it that you you get sometimes you feel amazing you build something really cool you've solved the problem and then other times it's just like you you question your the decisions you've made in life that brought you to this point so I think as you get more experienced as a developer the lows aren't quite so bad I've and the highs are you're more realistic about the highest right so I don't really get to the point anymore I'm like yes I'm awesome like I know everything and I think that's a good thing because I know enough now to know that I'll never know enough right there's always going to be more to learn but I also know enough to know like all right if I totally mess something up or I can't get it to work like that's okay it happens I just need to you know keep working at it or you know ask for help or do something so but I think it's hardest on newer developers you know they don't have as much time to be able to look back on and say yeah I remember that time when I couldn't get this to work and I remember that time when I did this and that was awesome so I don't know anything to help new developers kind of get past that to kind of keep them humble on when they're really up and to keep their spirits up when they're really low I think is a good thing and that's that's probably one of the most important things I think new developers need because there's a wealth of information to help them but like the emotional aspect of it is not it's not as easy to find help with that especially if you're on your own David says I'm learning JavaScript now and still trying to see if I should continue or go to jQuery I think I'm almost at the end of my JavaScript learning David yeah I mean I you don't need to go to jQuery right if you know JavaScript well you can do everything that jQuery can do and just plain vanilla JavaScript there jQuery can just make it will be shorter for you to write even though like technically you're adding in a lot of extra code because you're you have the whole library in but from your perspective which you actually have to write could be less it could be easier to reason about it so it just depends there's a lot of different things you can get into to learn though with with Java scripts besides jQuery it just kind of depends on what you want to do there's so many I mean you can do back-end stuff in JavaScript with node you can do VR stuff with node now you can do machine learning which I love the script I'm not saying javascript is the best way to use machine learning the people have strong opinions about that but is possible you can even do Internet of Things stuff with JavaScript so there's a lot of different ways you could go also says totally review with you Jesse about jQuery good to practice and learn and after that try react see David David says are there things in JavaScript that I simply won't need as a web developer oh yeah absolutely absolutely there's there's I've been a web developer for I don't even know like let's just say like five years give or take a little bit and there are still parts of JavaScript that I I've probably never even seen it's certainly never used so yeah you definitely don't need everything as a web developer my method of learning has usually been I learned what I need to for a project and I build on that sometimes if I have time which is rare these days you know I could read a book about JavaScript and learn some things that I never knew and don't really need right now but once you start to get busy with with clients or something like it's just really hard to just study JavaScript so if you're in a position of a student that's great and take advantage of that and learn a lot but if you're actually trying to make money and have a family or have responsibilities to take up a lot of your time learn what you have to learn to get the job done and try to do your best to piece it all together on kids please can anyone tell me which is a good place to learn web development other than free code camp code Academy is good Udacity is good I don't really do much on udemy but people say udemy is good West vos has all these courses that everybody talks about says how great they are I haven't done one of the West vos courses but a lot of people that I I know are good developers say that the courses are good so maybe want to check that out David says that Kevin Powell dev tips and Brad if you see also have great videos on YouTube that's yeah I have never watched anything well I've watched it it's but not the other two but I really do like dev tips some of that stuff is a little bit old but I think it's still really useful a lot of the stuff about CSS and just general design principles are really good and the guy who is Travis a Travis's are really like positive uplifting personality I always like that about the dev tip videos Alexi says has someone done freelancing in up work or some other platform I'm in the urge for money I haven't done something like up work but so I can't speak personally from it but if you're gonna do some sort of online platform I definitely do one that makes you take a test to get into and really like make sure that you get paid what you're worth some of them just let anybody in and then you end up getting outbid and if you get a job you have to get underpaid like severely underpaid so that would be my only advice and going with different work things so I'm not familiar with up work in particular so I can't say anything specifically to that but just in general like freelancing platforms that's that would be my advice Alexei says I would do websites for food Stefan says what do you think about view I have not used you I don't have a personal opinion above you based on experience but there are developers that I think are great and that I respect that love you so I have it generally a good opinion about you but I just don't really know enough about it to give you more than that if anybody else has worked with you before please let us know in the latch at when you think about it Oh Michael Caruso is on the site between the counters you have a days remaining display with 1800 on the actual site yeah this is yeah that's not me I don't make that I don't manage any of the content on this site so I can't do anything about this these are like pre-made in Photoshop or something let's see so CMD in code so I'm guessing it's command in code says do you think someone should learn vanilla JavaScript before jQuery or another library or do you think it helps to illustrate some fundamentally important concepts I have some mixed feelings about this so all right here's how I feel if you're having like a free online like learning tutorial for people to learn on their own I think jQuery can be very useful early on even before you get to other JavaScript stuff to build up some of that confidence if you're teaching JavaScript in a like a university I would not go with jQuery first unless the course was like I don't know like web development for non computer science majors who just want to get into something maybe I'd do it then but if you're really trying to learn programming in Shawano javascript in a university I would go vanilla JavaScript otherwise if it's just an online course center of course I would go jQuery and like I said earlier I think the key is you want to help people who are new who are most like that on their own and don't know other developers you want to help them start to get that feeling of I'm really building something cool like to feel the magic of web development right I mean like you understand I'm saying with the magic like things working on the page you click the button and things happen like it when you first do that it feels great like you're creating things and and they're they're cool so going in first what jQuery allows you to do that and then if they really want to stick with it they're gonna eventually get into the vanilla JavaScript like it's they're gonna have to write so that's my take on it I'm definitely open to hearing alternative opinions about that too I mean I'm I'm no expert but that's that's generally how I feel about it I started out I don't know probably with a blend of JavaScript and jQuery I tried my best to to learn both but realistically when I had projects that needed to get done I turned to jQuery most of the time because that was the easiest quickest way for me to get things done it wasn't until I really started getting serious with react that I forced myself to learn how to do more with vanilla JavaScript so anyway hopefully that was a decent answer to your question let me know if it if it wasn't if you have any follow-up questions Patrick O'Donnell says funny thing about spaghetti code I once did an app like that but it ran in production long after I left the company no one can figure out how to replace it that's that's sure that's the other thing I'm always worried like I want to convert everything I'm doing to react and have like very standard things that we do like coding standard like style standards and and all that so that you know if and when I leave someone could come in and very reasonably like take over everything and figure it out but when I have apps like what we just worked on today I'm not confident that that could happen but I hope this is really the last thing that I built that I need to convert over to kind of our newer organized way of doing things and then I will be at that point where everything is at least somewhat standardized with the accept that kind of Kenko institute site I still need to get some jQuery out of that site but other than that like I'm almost to that point and especially with all these videos there's a video a record now of my thinking so someone could come in and if they really wanted to didn't know something they could go right to the video where we did that and find out about it so I don't want to leave people hanging if I do leave here I'm not like I don't have another job offer for anything right now so I'm not saying I'm gonna leave but I just want to make it easier for the next person if it happens let's see hüseyin says hey dude you have got a nose on your face you're right that's that's definitely true I have one it's right in the middle thank you let's see what are your thoughts on react versus you I don't know I answered a question by view earlier so I'm just gonna stick with that I don't know enough about view to really give you a good answer and reactors a few I will say view seems cool but I don't know that much about it and I really do like react I have fun developing in react David said good advice thank you you're welcome I'm glad that that can help you out a little AK acted to mind there's another cool front end channel okay cool so it's a CA de mi ND awesome thank you for for sharing that we're trying to get the Google Translation so our ten-hour Tim said akka divine is another cool friend Channel so sorry I couldn't say right off the bat it was in where they call it Cyrillic characters Russian I guess so anyway I did the Google Translate hopefully that's that's correct for your name let me know if it's not I'd like to pronounce it correctly if possible Hussein says yes I did an up work it works only get hourly paid jobs with verified payers okay thank you thank you for adding that personal experience as always I think one of the best things to to be able to draw from when you you know when you're considering doing something like up work or even getting with a new company being able to talk to people who've been there or are there that's gives you a lot of good insight on how says Jessie can you mention the name of the freelancer page you have worked I think it was freelancer I think it's called freelancer comm I did that there was another one called thumbtack and freelancer.com I probably made like $15 from total I mean it was it was crazy you're doing work for like I don't know like dollar less than ten dollars an hour sometimes it's just it's it wasn't a good experience and you have to do so much work cheaply to build up your portfolio and get a lot of good reviews it's not worth it thumbtack was a little bit different I think I got one client from thumbtack and maybe made like I don't know $150 total after doing some stuff it was really like didn't make much from it michael says i spent 15 years building casinos around the country and that was the biggest thing I built that that's the feeling I want these days from coding wow that's really cool she went everywhere and build casinos or stuff that's that's cool so were you like construction worker architect or something like you don't have to answer if you don't want to I'm just kind of curious Joshua says hello there watch some of your vids like it so much I subbed right now awesome thank you for subscribing david says since back in JavaScript as possible with node and the like can we skip PHP in those I it's definitely possible to skip PHP and other back-end languages you can pretty much do anything that you need to do with just all JavaScript nowadays so I I know a bit of PHP and a tiny bit of c-sharp and a tiny bit of some other languages but I rarely use them and yeah so it just kind of depends on what you want to do if there's a specific technology you'd like to work with it uses different language then you learn it but if you're not really sure you know if there's no specific technology like let's say if you really want to work with WordPress yeah learn PHP if you don't have anything like that I'd say just stick with JavaScript you know you can front-end back-end for the price of learning one language you can't beat that deal Joshua says by the way is it possible for you to make a C tutorial series or an Android app development tutorial you know what we are gonna do some stuff with react native so it won't be in C or Java or Kotlin or anything like that it'll be in JavaScript but you will be able to build Android and iOS apps with it so we already kind of started a repo for that and I haven't done that many videos with it but I hope to after I'm finished with this current project that we're gonna be working on until probably like the end of February and then hopefully we can switch over and do some more with react native which which is what we'll do the Android iOS stuff with let's see heart says I love react to I am good with front-end stuff now I need to get into back-end what frameworks would you suggest for a back-end EV like Express everybody uses Express with node so like I'm willing for these streams we use a lot of react with Express and node and we build a ton of stuff with that michael says a slot technician kept the machines running along with keeping the accounting systems warm ok cool very cool I have an uncle he used to be a dealer that casinos I so I've never really worked it one before to be honest with you I actually have never like gambled in a casino so don't have a lot of like personal experience with it but I do know I know a few people that have worked at them there's a casino somewhat close to where I live javascript says are you talking what I think you're talking about with react native yeah well definitely so I actually have several projects I want to do with react native but this JavaScript on a AF for sure needs to be done with react native right like people are going to expect to have mobile apps with this this network I think that's that's a given now if you're going to do something like this Mobile is just expected so and since we're doing it with react it won't be too much of a stretch to make it work on with react native there's definitely some some differences in the way you do CSS and things like that the differences in the way you do routing but the logic behind it and grabbing data and things for sure it is going to be pretty much the same alright Gander 7s2 leave a thanks for watching and I think thanks for chatting with us so hopefully I'll see you back here and some other streams later on alright so I'm at the bottom the live chat now I have a few more messages coming in but we'll probably be finishing this in a few minutes here and I've gotten a lot of messages so hopefully I didn't miss anything very important for work I think I'm good I'm duck checking now I think I'm good umm so let me finish up these last few few messages here harsh says okay have you ever tried using blue bird to cancel promises if yes can you make a series on that I have not used blue bird so sorry I've never used blue bird I think I read a tutorial on it or something at some point like a blog post but that's that's all my experience so I wouldn't be comfortable doing a tutorial on it but if anybody knows of a good tutorial with glue bird you know please put in the live chat so to at least have some resources that I can I can give you there Vivek says networking is a good field yeah for sure I actually took some of like the Cisco Networking certifications because I was going to get into networking and then a lot of stuff happened I ended up not getting into it but I I agree let's see vivix says this AI is good or networking for to get a job in the future yeah I think AI is gonna just be like crazy in terms of jobs in the future it's really cool I talked to a developer on Instagram yesterday about it and she was saying like she wants to get into machine learning ai stuff and I'm like I'm gonna be jealous of you when you do because that's that's really cool stuff let's see harsh says like CCNA yeah exactly I was doing the CCNA certifications just like cisco certified network associate or something like that yeah so I went through like they let me break it down and I don't know how they do it now but you took two tests so like halfway through the course you take one test halfway through you take another test you have to pass both of them I passed the first test and then by the time I get to the second test I didn't really want to go into network anymore so I did take the test but I I didn't pass it like honestly I didn't really study it all for it so I I wish I did it was kind of a waste all that time and money to do it so I wish I would have just spent a you know a few hours at least studying and I could have passed it but oh well I like what I'm doing now so I guess it worked out let's see all right I'm gonna wrap things up now this was a great live chat it's a lot of stuff and we covered a lot of different things and we finished what we wanted to get finished and in this old-school jQuery app so hopefully I'll never have to work on this again and I have a few more things coming in cool alright so nope no questions okay is there a schedule for for these chats I've been I'm trying to do the live chats at 12:00 p.m. Eastern Time every week day Monday through Friday sometimes I have to change up the time depending on what's going on my schedule but if you subscribe to this channel you should get notifications letting you know when the chats gonna happen and if you follow me on Twitter I usually tweet about it beforehand I try to do at least an hour beforehand to give everyone a heads up about you know what I'm gonna tweet or what I'm gonna livestream about so alright I had a really good time I really appreciate all your advice for me and the live chat all your help and questions so I will be back let me think tomorrow all I should be back tomorrow I have one meeting in the morning and I think I'm free for the rest of the day and so until then have a great day

Original Description

Today I am going to do some work on a jQuery based single page app that I created in 2016. See a professional front-end developer at work. Unscripted. Mistakes included. 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 Instagram: https://www.instagram.com/jesse.weigel/ 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

📰
How Dev Agencies Can Handle Client Revisions Without Burning Out (or Losing Money)
Learn how dev agencies can efficiently handle client revisions without burning out or losing money, by implementing effective communication and project management strategies
Dev.to · SarasG
📰
Give a Dead Side Project an Exit Report, Not an AI Eulogy
Learn to shut down side projects effectively with a compact exit report, preserving valuable assets and lessons
Dev.to · Sam Rivera
📰
How I’d Scope a Project Before Writing a Single Line of Code
Learn how to scope a project before writing code to ensure clarity and success
Medium · Startup
📰
Where to Start with my Project Idea
Learn how to break down your project idea into manageable parts and identify the necessary skills to get started
Reddit r/learnprogramming
Up next
How to Use Taskade to Scale Your Websites + Blogs Faster!
Grow with Will - SEO, Sales & Entrepreneurship
Watch →