React: Setting Up Google Analytics - Live Coding with Jesse

Key Takeaways

hey everybody it's Jesse and I hope everybody had a nice weekend I had a long weekend it was a holiday here in the us yesterday so that's why I didn't stream yesterday and I tried I tried really hard to take a break from coding since I've been a little bit burned out uh at the end of last week so I think I went two full days without coding anything I did do some work on Saturday but Sunday and Monday I did nothing so it's been a really long time since I've gone two full days without coding anything uh so that was that was kind of nice uh relaxing So today we're going to try to get Google analytics working with this so there's we have Google Analytics already on there if you've been watching you might remember when we we added that in but it's not working exactly the way that we wanted to and I knew this was going to happen I just didn't have time to deal with it before the launch and as I suspected we haven't really had very much traffic so it's not a big deal that the analytics aren't like 100% what we want them to be but I'd like to get them up and running the right way uh as soon as I can so we can start getting the best data so let me show you what the problem is uh well I'll I'll tell you what it is and then I'll I'll show it to you in case uh you're not sure what I'm talking about um we're using client side routing so when the page first loads Google analytics loads like normal okay and it tracks a page view but then after that when we click to another page in the site the analytics code doesn't do anything it doesn't register that a new that a changes has happened so no data gets sent so I'll I'll show you what's going on and um let me pull this off for a second and I'll bring in the site okay so I'm going to I've got the the real time analytics up right now and all this is showing is just who's who's on the site right now and what page they're on okayy so right now I'm on the team page I'm going to hit refresh let's see if this will do it for us let me see if a refresh will trigger if I'm going to have to completely open up a new there we go okay so refresh triggered this uh that I'm on the team page right now okay and that's registering should be on the map yep that's where I am uh so now when I go let's say to the about page nothing is nothing is happened it's not coming up that it's about I can go over here courses events none of these are registering and so we are getting like an accurate count of how many people are coming to view the site but we're not not getting an accurate count of how many pages on the site they're visiting right we only get that first page view and then if they happen to do a refresh a full page refresh you know manually then we get that all right but it would be nice to know you know all the other pages that they go to so that's what we want to set up and normally I've set this up for uh single page apps before where you have client side routing without a page refresh and it's not really huge deal you just modify the code but in this case uh we have to be careful um we uh we don't want this to run on the server side and we don't want to in particular we don't want to look for let me show you the code so you know what I'm talking about um what we're going to do sorry I was it's was kind of Rush getting ready so I gota I can't remember where my windows are okay so what we need to do is look up basically like the path name so it'll be something like uh instead of we're going to get rid of this code actually and and try something different but you know we would make basically make a page you mean you know when we get the path name so we would look up window.location do paath name well on the server there is no window objects right so I don't I don't know for sure if that would create an error and mess the site up or if it just wouldn't log anything but I don't want to take that risk and and try to run this so I'm not my first idea when uh earlier today was well you know let's just you know throw this code you know we'll edit this code a little bit and we'll throw it in um on you know some some fun like component did Mount or something like that and we'll see what happens then I thought no I don't I don't really want to uh to risk you know messing anything up uh I I wish we would have had time to test this out more beforehand we don't so now at some point we're going to have to put this on the live site to see if we're really getting any reading in Google Analytics at some point I would like to set up maybe a parallel site so that I could you know do some testing on that but you just don't have it right now so here's what I'm thinking I went on to so I'm using nextjs before I go any further I'm just going to check hey everybody I have some people in the live chat that said hi so I don't want to know them hey was somebody from the Philippines awesome okay all right so we're using nextjs that's what so we are using react but nextjs is um basically kind of like a way to scaffold your react uh app so it sets up a lot of stuff for you like service side rendering and um routing although we are doing some custom routing um it it does handle a lot of a lot of those things that might be difficult especially if you're first starting out with react you know you you don't really need know how all that stuff works to be able to make something with react that could really bog you down from from being able to try it out so it's really good if you've used create react app before it's they're comparable things uh they both let you get started with react quickly so normally in a react project we'd probably be using something like uh react router and then there are really specific instructions for how to get Google analytics working with react router but with next I haven't been able to find Specific Instructions so what I did find is an issue about adding the script tag so I assumed other people had the same issue uh and that was correct assumption so a lot of people have have also been dealing with this and some of the things like this this uses Google tag manager well we're not using Google tag manager so uh I'm not going to try that one obviously um there's some other Solutions like down here it looks like this is working when he used um react uh DGA or hyphen GA so I decided to take a look at that I looked at how he implemented it here let me blow this up uh so you guys can can see it a little bit better uh this site that he's referring to that he built uh is pretty awesome and intricate but there's so much other stuff going on that it's hard for me to follow so it's not really a good example for me to use you know because this is this has a lot of other stuff built in and the way it's doing things is so different uh so luckily recently within the last couple of weeks someone posted this so this is what we're going to try I'm not entirely sure exactly where all this stuff goes to be honest with you but you know hey that's that's how it is sometimes uh so this is going to be a little bit of I'm not really sure how this is going to work out but I want to get this working before I leave today and I'd like to leave early since I put in so much extra time the last few weeks so uh let's get started all right so I'm going to move this out of the way for a second so we can go over to the code and I'm going to bring this over um let's see I lost my lost my window again sorry let me bring this I think I pulled it out so I would have it ready and I lost it here we go okay just to show you what we're going to use this is it so um it's it's a package uh npm package here that's specifically for using Google analytics with react so we're not since we're using it in a specific way with next I don't really think a lot of this documentation is going to um be that helpful for us I did skim a little bit honestly I didn't I didn't really read the whole thing in um a detailed way so we're going to install this and then we're going to apply try to apply it uh from that example that I showed you a second ago all right so let's pull over our command line so we can install this I was really trying to find a way to not have to install another package because that means I would have to install it on the server as well so that would be you know a few more seconds of downtime for for the site when I update this I'd rather not have any downtime um so until I get the setup where I can switch off between two versions of the site and have no downtime every time we do an update there's going to be it's usually somewhere between 30 and 45 seconds of downtime if somebody's already on the site or has been on the site some of that's already cached since we're using a service worker so they may not realize the downtime or it may only be for a few seconds for them but I still would rather not have any all right so we're here in uh in our folder uh for our local version of this site and we're using yarn so we're not going to do an npm install we're going to use yarn if you're not familiar with yarn um I think I don't know if I linked it or not and in the description but you can you know look up yarn it does the same thing as npm but I think it's a little bit faster uh so I've been using yarn yarn so we're going to do yarn add and we want react GA okay so that's done that's good now we can move this over and let me bring back let me bring back this just a second just so you can see it in case you're just you're just tuning in and you missed it they'll make this bigger whoa that was a lot bigger okay so this is basically what we want to do we want to import this this react GA that we just downloaded and we want basically these two functions okay so this we probably don't need to keep this this is just a console log this will tell us it's working which is good uh we want to initialize this with our specific code so the each analytics property has its own code so we're going to put our own code in there and then this is what will actually log the page view so remember I said we're going to look up we want the path name all right so since it's not really a real page refresh fres all right we need to look up what the uh the URL is manually and then we're going to set that as a page view instead of the default okay and then on component did mounts we're going to initialize it and then log it so it's pretty straightforward pretty simple uh if you've worked with Google analytics before and done any type of single page application with analytics like this is not new stuff uh I just have haven't done this before with next so hopefully it all works I also haven't worked with react GA before so what I'm assuming happens like I said I didn't read thoroughly through everything what I assume happens is that there's something going on here that will make sure that this doesn't mess anything up when it we try to render on the server side uh so I I assume that simply because a lot of the discussion on that that thread on that issue on GitHub was about that about this not running on the server so um that's why I'm maybe it's not a safe assumption but we'll find out all right so I'm going to move this over so we can go over to our code what I do want to keep so let's let's let's just go to we want to go to one of these interior pages I guess I guess it doesn't matter we go to any of the pages but I'm just going to go to an interior page here and let's see how this works okay so I just pasted this in here uh hopefully I actually not worked with like multiple exports here so this is what I'm a little bit not uh I'm not clear on and you guys are going to see my uh my inexperience here with this come out so if anybody is watching this and saying like where what are you doing dude just let me know let me know if I'm going wrong here because I'm not super confident in what I'm doing and remember this this show is not about me being an expert and teaching people this is about uh giving everyone a glimpse into what I do as just one you know front-end developer day-to-day and hopefully we both learn from each other when we do it but I I can't guarantee that I'm always showing the best way to do things it's just the way that I'm using to get the job done uh I did have some people talking in the live chat I don't want to ignore it completely so I'm just going to take a few seconds just to check out what's going on here especially since I asked if anybody knew what was going on oh awesome so uh HTO actually Umberto let me know should I pronounce the h at the front of your name or should it be more like Umberto like a silent h i can't I'm I'm not sure so let me know I want to pronounce it correctly because I know I I I know you you watch frequently uh but anyway uh homberto said um he's giving me a daily boost the confidence said what I'm doing is uh amazing uh on the site and to keep it up uh so I appreciate that that's uh stuff like that makes me want to keep doing this uh if at any point I think that uh this isn't really helpful for anybody then I probably won't do it but as long as somebody's getting some benefit from this uh I I'll keep doing it and I suppose as long as my boss is cool with it I'll keep doing it okay so he also says uh he's only used NET Framework uh but I found ways to incorporate things that I'm doing so awesome and now he's going into listening so uh that's cool yeah actually um I've had I've had to work with do net stuff just like just a little bit like super minimal with net stuff and I'm I I'm just like I know enough to like edit little things on the site but I really I don't know exactly what's going on when I do net stuff so that's that's really cool maybe um when I have to do some net stuff then you could you could help me out uh and I'll definitely stream that Jimmy says please monetize so I can watch an ad um okay I want to help with this okay all right so Alberto says it is a silent h so I apologize for pronouncing the H before I will remember that and it from now on it will be Umberto and no age uh someone asked if I know how to work with lurl I do not know how to work with laurl the only thing I know about lauro and hopefully this is right is that it's it's a PHP framework correct uh I have worked with PHP before but usually only in the context of Wordpress or making like a little file uploader or something for a for a small site so that's that's my the extent of my PHP knowledge okay I'm going to go back to this and see um so basically I just copy and paste this into here I suspect there's a way that this could just be somehow in its own component and we could import this and and not have to include this on every page but at least for the purposes of testing this a little bit let's just put it here and uh see if we can get maybe this console log to come up when we when we test it all right so this is going to be here now we need the component did Mount which we're not we're not calling that on this page yet so let's pull that in and we're going to put put that inside this component here and the other thing we need I might might as well put this in now although it doesn't really matter when we're testing locally is I need that that code and like an idiot I look down at the bottom when my Footers in another component here it is all right so I'm going to grab this code hopefully this this works and we don't have to spend a whole lot of time troubleshooting it although it might be a more interesting video if it doesn't work all right so I'm going to save that and we'll go over to our site here and I'll bring up Dev tools I think I already have it up somewhere let's see here it is okay we're going to go over to our console and we're going to navigate to the about page and see if we get a it it should say something here in the console what what are we looking for GA and nit we did not get it let me still didn't get it okay didn't get it so it did not work right off the bat so we also I mean we didn't get any crazy errors either get ktic monstr why are we getting this um we are getting a 404 error which is crazy all right so this is like I don't know if anybody caught the uh really dumb thing I just did but uh I tried to check it on the live site instead of on the test site so sorry about that little waste of time let's bring over the test site now just have I have a lot of windows open I'm sure I'm sure somebody else can relate to having a million uh tabs open and windows open so here is the site we really want to test and I will open analytics here I do want to check why I'm still getting uh an error on um on that because I think I yeah I got that error earlier and I fixed it so maybe it's just some caching stuff uh okay so we want to go to about let me bring up analytics and we want to check the conso so again let's let's try this all right we got it okay so we did get this GA and nit okay and that was uh obviously a client side route and there one of the ways that we know that is none of this stuff uh left the console normally when you do a refresh unless you have it set to persist your console all this stuff will go away on a refresh what is all oh okay um all this stuff is uh cores errors going on for um uh images so for some reason it's set on uh where these images are to not accept requests from Local Host I guess so I it doesn't really matter for testing right now all right so that's awesome so that's working let's put it on a couple of pages just to double check and see that it in fact is still working and we're not messing anything up by including this stuff in in the head I mean I'd rather have this separately but for now I want to get this up and running quickly and can always refactor and make it look nicer later on and I know I always say that and then some sometimes I never get to it but at least we'll try to get to it all right so let's try the team page and what else do I have open index okay that'll be good three pages will be good now what we also need to do is put those functions in component did Mount those function calls so where's my there's my original page so I know in index I already have component did Mount so I'm just going to copy the the calls I I guess it doesn't really matter the order right now team and I'm also calling it on the team page okay and if if you didn't watch uh the video on making jQuery work with react that will explain why I have these calls here to these functions this is to make the jQuery stuff work that I was already uh using on the site uh to make sure it works when we do client side routing uh it it works already when you're doing a you know full page refresh okay so you got all those uh we have it on three pages so about the index page which the homepage and then uh the team page so let's click around and see what happens so I guess we can go let's go to the homepage all right we got it we have that init uh console log let's go to the team page all right great we got the init I don't know if you caught that but we before I got all this stuff uh we did get the uh and it I'm not going to scroll up but I saw it happen so let's go back to the about page okay and I'm just going to go back on all right great so we know we can we can go back and forth from Pages this is firing again it's working again we're not getting um any weird errors at least related to that we're getting a lot of other weird stuff going on uh with errors uh you can you can check the live site we're not getting all these errors in the live site so that's why I'm not worried about it uh all right so I think the next step here is let's put this on all the pages and let's push it to the live server and we we'll give it a test and I have the link to the live site if um if you want to check out the site I also have a link to the GitHub repo if you want to follow along in the description for this video okay let me grab this part again and luckily we don't have that many pages so uh we can see one two we only have like five five pages not bad for copy and paste let's throw that in and here and we're not actually using the uh single news page right now if you remember we didn't have content to fill this out so we just left it out the whole uh the whole news actually in fact the news page and single news uh are completely left out but we we ought to just put it in here while we remember what you know how we're doing this you never know I might when that finally does get added into the site where we get the content I might forget how I did this so I guess I could go back and watch this video and now I just want to pull I'm just going to pull these I think a lot of these pages are I'm already using component did Mount okay yep okay let me just I'm going to close some of these so we can see see what's going on okay all right and I think that's all the pages so um I'm going to push this to the server I'm going to save it I'm going to push it to GitHub and then from GitHub we're going to pull it to to the server so if you've been watching you've probably seen me do this several times already at least uh so but if if you haven't watch and you're not sure uh how to do this part or you're not familiar with Git then I'll I'll just go through it again uh so do a get status it tells us everything that's changed so all our Pages obviously but if you remember we added a new package that uh react GA package so that's why our yarn lock file uh which keeps track of package versions and things and we never actually edit this directly and then our package Json file which we can edit directly but we don't often those also change so those are being included if you notice the package itself is not included okay we don't upload our node modules to uh to GitHub that's pretty standard you don't have to upload them all because as long as you have this package Json anybody you yourself could you could load that on a different machine or anybody could load this and then just with that package Json file be able to install all the dependencies so uh just a little a little tip I mean I'm sure you could push your node modules up if you wanted to that would it would just be kind of a waste of time all right so now we're going to commit and I'm just going to do one commit message for all of this uh it's all basically the same same thing all right that that's not the most descripted thing in the world but uh sometimes it's hard to come up with good commit messages or function names when I'm on the spot on YouTube uh so we're going to get push okay oh know what happened oh no this is awesome that this happened though okay because this is if this is never happened to you before if you haven't used get that much then you can you can learn from from my mistake from me all right so sorry I can see uh that there's Post in the live chat sorry for um ignoring this I will check it uh when when we're done with this I'll go through I'll read everything so if you stick around if you can stick around uh I'll answer any questions that you put in there uh and if you can't stick around you can watch the recording and I'll answer it then so I had edited on Saturday I worked from home and I had made some changes to this site I pushed it to GitHub and and then I pulled it into the server I forgot to pull those changes back down to my local copy here at work so what's going to happen now is it has to to merge okay so this is a pain when this happens and it could have been avoided at least I think it's a big pain uh a good A good rule that I try to have and I I always forget is every day I should come in and start by doing a get pool even if I can't remember making changes I ought to just do get pool because maybe I did make changes and I didn't remember like like today so and then you avoid that and everything will be uh fresh so so now it's time to pull these changes down actually I can't believe it let me do maybe it didn't it didn't I didn't even notice it earlier sorry if I'm being uh weird here I'm just I'm laughing it myself I tried to make a get push um earlier and I didn't even realize that it got rejected because I didn't pull yet so earlier in this in the show when I I was looking at the live site and I was like why is that error there I fixed that well it's because it hadn't actually I actually went through the process I thought of pushing it and then pulling it into the server but I pulled in nothing to the server there are no changes because it never went up so sorry if you're not familiar with Git and you have no idea what I'm talking about sorry for being confusing but let's do this properly now and let's do a merge okay so uh we'll go through just to to let you know what this error message is okay so the remote has stuff that I don't have locally uh we don't want to you know we want to sort out what should actually be there in case there are conflicting changes we want to go through those and figure out what should should actually be uh the change so we're going to do a get pool and now it's going to bring up I have set as my default for this atom it might be different for you maybe it'll be Nano uh right in your text right in your editor uh or if you're using some other code editor maybe you're awesome and use themm um who knows so this this is you're just going to type a message here to explain why you're merging um and I'm just going to say um merging okay I mean that's pretty much exactly why so now I'm just going to save this and that should be actually I can't do I need to save maybe I need no all right so I need to save and I need to close and then it should it should go through hopefully maybe not uh I honestly I I have messed this up before so I'm not super surprised okay so let's all right let's let's try this again um H okay so it looks like we have some of the stuff here um let me do a log I haven't done this command before so just to explain get log um will show us what we've had what we've done okay yeah so it didn't pick that up somebody's saying uh Patrick saying I have to close Adam no I wish I I don't want to have to close completely close out Adam here um how do I get out of here Escape I can't figure out how to get out of uh I can't remember how to get out of log there we go Q that's it uh okay so maybe since I exit out of there let's see let's just see if it makes me do it again local changes to the phone files would be overwritten by merge please commit your changes or stash them before you merge all right everybody this is I'm just going to commit these changes and I'm afraid it's going to overwrite what we did but since it's not a big deal and it's only those two pages I'm just going to do this uh please do not use this as an example of what to do uh use it as an example of what not to do you can see how much of a pain it is if you just don't pull for first so um I'm usually the only person working on projects so if you used to working on teams you're probably looking at me like this guy's a noob I just always forget to pull because it's always usually me working on it and usually from one computer so this is something I don't even really need to do that often um let's just say so I don't even remember exactly what I changed before okay your branch and or Master have diverged they have three and one different commits each respectively use get pool okay now it's going to ask me to do this again okay um I don't even know I just all right that's a horrible message but it's it's not descriptive at all but I just want to get through this at this point and let's save that and now I am going to close out this this tab let's see if that's enough to to make it work yes it did all right so Patrick uh good call on that the problem I had the first time was that I didn't actually close out so if you see like this tab opened I should have closed out this whole tab instead I just closed out this document and that wasn't enough so that was the problem uh so that that would have been the right thing to do in case you were wondering um sorry if I confused you by by messing it all up all right so now we should be able to push actually before we push let's check our files and make sure that our stuff was still there we uh what did we have changes from Pages events and resources so let's just look at one of those events all right we still have everything we need there and actually I remember what I changed so let me look on the events page I added a button with a link here okay we have that button now so everything that was changed is there just wanted to be sure let's make sure there we go all right so now that's there let's go to the server so we're going to have to do one extra step that we haven't done before on the server so I'm already logged in uh I just use SSH uh to to get into the server I'm going to oh nothing's coming up when I'm typing so maybe I I did get logged out and it's just a little laggy and not not going to realize it I'm G to give it a second if not I can always open up another Tab and try to get in that way there there we go it probably worked on this one not too all right so I can close this up um all right so let's log in using SSH and then my username and the IP address uh now we you normally use this command so let me bring this command over for you I'm going to copy and paste it uh this is the command we have been using and I it's it's just chained together basically what we need all right so we have uh we're going to stop our server we're using pm2 to manage that and then we're going to CD we're going to you know go into the react folder for a project and then we're going to pull from GitHub and then what we would normally do next is run the build but since we pulled in another package we need to do something else we need another step in between there so I'm going to go back and we're going to do an npm install and and then we're going to do the rest of it okay so we need that step otherwise that code we just added uh when we went to like here when we went to sorry I didn't make this bigger I apologize I've been doing this whole video and it was probably too small for some of you to see uh so we went in and we're we're call we're trying to import this but it's not going to find it unless we install that first so it's going to read our package Json file and it's going to see hey it wants it wants this react GA but we don't have it yet so it's going to install then it's going to go on with the rest of it which is going to build uh the app again and then it's going to restart the server so let me hit enter and we can watch it work I've been I don't know how much time this npm install add hopefully not that much time and we can still be under a minute of of downtime okay so you can see now it's installing it's already done the pool here's the change in the package Json okay so the install went all right warnings are okay um as long as you don't have an error the install is usually fine now we're building the build process usually is like 30 seconds sometimes a little more and as soon as this gets up there we'll test it assuming that it works then I'll uh I'll check out the live chat and I have another interview from syntax con uh this time a short interview from Emily Freeman that I'm going to show uh here hopefully in a few minutes because uh hopefully this works and if you haven't seen the previous interviews that I did some last week they're just kind of giving some advice to uh people who are just starting out in coding all right so this is online it says it's online now let's test it out let me bring over the live site actually I think I closed that window that I had earlier so I'll just bring it up right here kattic yes all right so so it works I'm I'm going to bring up the uh console if you remember we left that console log in which at some point we probably take that out but we can see that part's working awesome okay so let me move this here because I want to see if this works so we came in at the homepage right and we have here this last year this is the homepage now I wish there weren't five years users on it right now I wish it was just us that would give us a better test but basically we know that one of these is probably us so let's click about and if this works we'll see about show up here and I guess I can make sure on the console we did get another console here yes and about did show up so we have one about let's make sure it just wasn't somebody else coming on we'll click around we have a team we already have one team so it should switch to two here in a second yep two for team nobody's on courses right now so let's go to courses and see if it works here that's all right awesome okay so we are on courses so there we go so it works uh we now have uh proper analytics coming in even when we're just doing client side routing and there's no page refresh so just to wrap up we're using nextjs okay which we've used to pull in you know react and build that out we're using the client side routing there that comes built in with with nextjs and we've pulled in the package the npm package uh react GA and we've just included that on every page just like this super simple we've included it we have some functions we're initializing and then we're setting the page view to what that current path name is uh for that window and we're sending it with this function we're sending it to Google and then on component did Mount we initialize uh or we we run these functions the init function and then with the send so it actually ended up working exactly like like I thought it would work exactly like we've talked about at the beginning of the show and that's pretty awesome the biggest challenge was doing a git merge which is embarrassing for me so all right Alberto says that user in Washington is probably him oh cool all right so oh we got we got a couple people in Washington it looks like piew Seattle all right so one of these is on Berto from from the live chat there so cool yeah if you're on now you can see yourself your little dot Google analytics is a huge time sync for me it's it's cool to just check out all these maps and see what's going on everywhere so uh I try to stay away from it when I can otherwise I waste so much time in there oh nice Pat Patrick is just like on point today with with a great advice uh Patrick says um the little uh what's that called a te day uh the little toota will um terminate a frozen SSH session so I'm going to try really hard to remember that because that will be useful for me thank you so let's let me uh go through uh some of the stuff in the live chat quickly and see if I can answer any your questions before I do the uh I go to the interview and actually let me bring this up so that I don't forget to do the interview I'm just going to bring this up right now because I did forget uh previously you can actually kind of see me in the background here in the reflection so all right so let me go through any tips on how to make a nice looking [Music] navbar um I personally I like the material design style and I think it's nice to be able to work from a set of like established um kind of rules for design and guidelines so I would check out a material design documentation on how they do nav bars if you just type in material design it should be one of the first things that comes up the official one if you want to use a framework check out materialize as a framework it uses material design and it has nav bars I I like to try to start with that and then change it as I need to fit the use case I find that to be a lot easier than trying to start from scratch it does depend on the site I'm doing if I was doing like a site for me like my own portfolio or something which my own portfolio site is super old and I haven't worked on it in like five years so if you go there uh be be kind uh but if I were doing some sight that I had like total artistic Freedom with let's say and I could do something crazy maybe I would do something different but normally like on a site for a client uh or for the college where I work I would probably start with something that's um kind of like tested proven like something that users generally expect uh so that they'll it'll provide them with a familiar user experience they don't have to learn how to use my navigation when they go to the site so hopefully that helped I know that wasn't like really Tech technical if you have some code or something up on GitHub uh send me a a DM on Twitter or in the comments below or something uh below this video and I'll check it out and I could give you maybe some more detailed tips all right Vladimir uh says this a really cool thing by streaming uh real work awesome I'm glad I'm glad you like it that was probably it's probably one of the few original ideas that I've had that that you've seen is the IDE to just stream me doing my regular work I don't I I I at least have never seen anybody else stream their regular work uh so maybe there's probably somebody else out there that was doing it before me but at least from my perspective I I did come up with that idea on my own uh update the live site first I must have been it must have been one of the times where I mess up something up and uh somebody had a comment said update the live site first um you're hitting a live oh yeah yeah it looks like everybody else caught my mistake except for me and eventually I I caught it okay I aaz uh husin sorry if I miss pronouncing uh your first name um it says can you make a HS make a HS and wrap the pages in um uh if you don't know what HSC is that's higher order component that's that's a good idea uh and I'm going to tell you the only reason that I didn't use high order components here is because I'm still learning about them and I'm not super confident with doing it yet so I've seen examples of other sites and kind of look checked out their their GitHub repos and how they did it but uh um I I feel like I keep using this as an excuse but it's totally true because the timeline was so short I really had to stick with things that I like I knew were going to work I don't like to do that I always do like to kind of push it and and do new things but that's just how this worked out so the next project hopefully will have a much more reasonable timeline and I can try some things out maybe like some of your suggestions uh that you all are put in the live chats and and really kind of make it even better and just expand uh you know what I'm capable of doing but uh yeah in general from what I know and what I've seen of higher order components that's that would have been a good way to go for some of this stuff but I'm I just don't know enough to have used them uh confidently okay at least Umberto is saying uh he knows about the the in the in the pool stuff so I'm glad it's not just me all right cron crones I don't know how you're supposed to say your name but it's it looks like cronis with two Z's at the end it says wow A1 man uh Team I don't I'm not really sure what you're referring to I don't remember what I was doing at that point in the video so um if you're still watching and you explain that I can I I just I just can't remember what was going on there what that would be referring to uh kishor says hello hey how's it going and okay mad said can you tell us what you did so far because I joined like five minutes ago so I did do a little recap at the end if you came in after that basically we're using we were using client side routing so our Google analytics wasn't picking up all those um those jumps between like pages of the site so we just uh changed how we were loading Google analytics to be able to pick up all those things so that's really simplified version but if if that sounds like something you're interested in check out the replay uh which will be available about like just a few minutes after this stream ends okay Patrick I was wondering about Patrick says it's till day period not just till day okay so he says there's are other commands that work with the T day so good to know I wondered about that I saw the period at the end and I wasn't sure if that was included so uh if you want to terminate a frozen SSH session uh Patrick has a uh good advice here use tday period and that will terminate it so all right say so Paul says uh cool to watch this live work uh I'm glad glad you're enjoying it uh it can be a bit overwhelming on just how much there is to learn for someone who is in a few a few months in I totally understand that um yeah I um the the only the best advice I could have to you is like don't worry about trying to learn everything at once you know uh just uh take it like whatever you need to know for what project you're working on you know learn that and eventually you'll get a better understanding of of what you need you don't need to know everything there's just way too much out there to know it all um and you'll get a feel as you keep doing it you'll get a feel for what you like and what you're good at and that'll kind of steer you in the direction of um you know where you really want to learn to I think to be really good at something you have to rule out other things at some point because there's just too much to try to be awesome at everything uh so the more you're into it the more you'll get a fear feel for that but just you know don't don't feel too overwhelmed I mean I don't think everybody knows knows it all you know we there there are people who are just really good at their little niche of what they do and there are probably some people who just know a little bit about a lot of things but um yeah don't don't worry about it I know it's a lot to know but you know you'll look back in a couple months and think like man I I know so much more than I did and and it'll be an awesome feeling oh okay so we got an explanation about it says wow A1 man uh te he said that because I'm working alone okay awesome sorry I didn't get that at first uh yeah I guess it there are perks to working alone but then also um they're not so like there are a lot of sites right now that like let's say I went on vacation and something happened to the site there is no one else here at this University that could fix the site but me uh because sometimes maybe it's just an access thing or it would take somebody too long to try to figure it out so there's that's not a good thing um that hopefully that's going to change and I will have some other people that'll that'll know what's going on that's part of the reason why I think these videos are so good that uh somebody could look back on how I built this site and probably get a pretty good idea of what's going on you know from the GitHub repo and from these videos they could piece together most of what they need to know to work on this site uh so I mean that's it's not really why I'm doing this like completely but it's it's an extra bonus included uh so it would be cool to work on a team I think it'd be awesome to have somebody else to learn from and to be able to look at my code and that's what I mean you all are kind of fulfilling that role that function for me you know you see what I'm doing and you all are giving me so much so many um uh Umberto just said incode comments nudge nudge I I was thinking it in my mind when I said it like that's what comments are for yeah I definitely need to uh to level up my my comment game and my code it's when you're the only person maintaining your code it's so easy to get lazy about comments and style um I'm hopefully I'm I'm going to try to get some of the computer science here involved in developing sites so some of them they may actually you know get paid to work um you know work for me and some of them might be interns at that point I'm going to have to really set like this is the style we use for CSS for JavaScript and this is these are the conventions we use and you got to comment everything and I'm going to have to get more disciplined at that point I'm going to have to probably slow down at first uh but it probably it'll be better in the long run if I'm more disciplined about that so uh so yeah thanks for calling me out on that onto it's totally true it's totally true I need I need better comments um all right I think I got let me read these last few comments I think we're through okay awesome uh cron cronis um says uh he's working on his uh portfolio he's been working with lamp stack and vuejs uh so yeah I'd be happy to take a look at at your site and um just let you know you know what I think uh also uh that's awesome you're working on vue.js I hear a lot of good things about it I haven't worked with it yet but at some point I'll probably check it out if I get a chance um I just I kind of like I'm torn like do I really want to learn another framework or do I want to just focus on react and try to get good work good with it but at some point I would still like to check out view uh okay awesome so I'm pretty sure I got through everything if you had a question and you didn't get to answer it put in the comments below if you uh don't want everybody in the world to be able to see it on YouTube then just send me a DM on Twitter my uh link to my Twitter is in um in the description also now that I launched this site I'm going to have a little bit extra time I'm going to start making short tutorial videos and putting it on my YouTube channel so so if you want to be alerted when those videos come out you can subscribe um I don't really care if you subscribe or not but I'll I'll probably let you know too on on this channel when those videos come out uh so all right so I'm going to play uh this video that I've had up on the screen for a while and this is Emily Freeman and I filmed this at syntax conon uh two weeks ago when I was there and she's going to give uh some advice to uh new coders oops and I forgot I need to put the sound on so hold on a second all right okay so you should be able to hear this now all right so uh wait what was the like what's I'm Emily fre I'm from Denver Colorado um here at in tuxon giving a talk well two talk actually because I'm a crazy person uh give one on Humpty Dumpty a story of devops gone wrong and then the doctor shees guide to code CRA um then what else you got from me Jessie um so what what do you do what's your yeah day to day yeah I am a Java developer I build apis and Services I have figured out a way to make that more interesting than it is um but yeah in Java did work for very small and uh what's a new technology that you're excited about I don't know if it's like a new technology but I am excited to like just learn another language so um been in Java for the last year I started in Ruby love R it's my favorite uh but then I'm super interested in either picking up like a go or an Elixir something like a little different than cool and what advice do you have for uh new programs yeah just keep going I think it's really easy to get discouraged um or you know feel like you're the new person and and you're not never going to get it uh but you will be amazed at how much you learn over time and so it's it's very hard to kind of see your growth when you're in it uh and so that means finding a mentor or a trusted peer to kind of remind you how awesome you actually are so just keep going keep at it thank you yeah thank you all right so uh oh cool thanks Paul says great interview yeah um hopefully that the interview was helpful I have one more interview from uh syntax con to do and I'll probably do that tomorrow uh so it was great uh talking with you all there's a lot of good stuff in the uh in the live chat I'll be back tomorrow same time uh 2 pm eastern time and uh like I said let me know um let me know if you had any other questions I think I already covered that right I don't want to repeat myself you know where to put the uh the questions uh okay actually I I do want to mention this because this is good advice uh Cronin says meetup.com is a great place for people to meet other developers so I haven't been there but um I guess check it out and uh okay you're welcome guys I'm BTO was saying thanks so uh anyway I'll see you tomorrow I'm going to try to head home and enjoy uh the nice weather that I'm having here so uh thanks for watching see you tomorrow