"Finishing" My React Site - Live Coding with Jesse

hey everyone it's Jessie and today is the last day that I will be working on this project so so far for all of my streams for free code camp I've been working on this one project this react site and today's the last day so I'm really excited I'm excited to move on to my next project I'm not actually entirely sure what my next project will be there's a couple of different options my boss is still on his honeymoon I think he gets back today she might be um by now I'm not sure but he'll be in tomorrow and then we'll we'll decide together what my next project will be but there's a good chance it'll be another react another react site so before I get started today I just want to give a birthday shout out to a friend of mine Zach Levin Dorf who's I hope he doesn't mind me giving this shout out like this but I just wanted to mention him on on this stream because if it wasn't for him I probably would not be here doing this stream like I wouldn't be a developer at all so I don't know maybe five years ago or so something like like that I really needed a job and I was about to take a job that I didn't even really want to do but it was just going to be something to pay the bills and he offered me a job doing basically subcontracting work for him and he had like a media marketing company and he I had known him before and I had known his family so he knew that I was a decent guy and so he gave me a chance even though I hadn't built any websites for a really long time and he actually would would tell me like hey I'll pay you for so many hours just go learn how to do this and I'll pay you for it which was really cool because I really you know I had a few kids at the time and I really needed the money and I didn't have a lot of a lot of time to go and learn on my own I needed to be working so that really helped so for a few years I did a lot of work with him and anyway so I'm not sure if he's gonna watch or not I told him I was gonna give him a shout-out so I just wanted to to tell him happy birthday and just let everybody know how important it is he was kind of like a mentor to me at a time when I was just starting out and not really sure what I wanted to do so if you have a chance to do something like that for someone definitely do that it doesn't have to be I guess like an official mentor like you know he he wasn't my mentor officially Wicker we worked together but he taught me a lot about freelancing in general you know how to handle clients and contracts and billing and you know a lot of things like that a lot about WordPress and about search engine optimization and and he was he's a really good designer as well so he taught me a lot about design and yes that was that was cool we had we spent we spent a lot of time we would just stay up all night and work on build websites and those were some of the best learning experiences you know because we would take a break and get something to eat and just and talk for awhile in between coding sessions and that was really important for me when I was just starting out so if you ever have a chance to do that with somebody that's just starting out it'll definitely make a big difference to them it might not might not be that big of a deal to you it might not be that hard for you to do but it can make a big impact on someone so I hope that I can have that same impact on somebody one day and kind of pay it forward but I'm gonna check the live chat yeah actually Patrick is asking what happened to the viewer count yeah this is really weird so usually at the beginning of the streams the analytics there's some lag time or something so it shows like zero viewers for a minute or so but actually this is really this is really odd because it's showing three viewers and it should have already refreshed so anyway yeah Patrick I don't know what happened the last time something like this happened I didn't realize it but I think I was streaming during like Facebook's livestream of of one of their conferences so maybe maybe there's something happening that I'm missing I don't really know but I did let me double check I usually put the link on on Twitter yeah I did at 2:00 p.m. Eastern time I put the link on Twitter I put the right time okay did everything I the the tweet has it hasn't gone out to that many people but yeah I did everything right I mean I did send it out you know less than an hour ago but yeah I don't really know what's what's going on but it's fine with me I still need to do the work anyway so I mean I hope I didn't do anything wrong and people are like I hope people aren't getting blocked out of seeing this but let me I guess really quickly I'm going to go on another browser and try to to watch the stream I should be able to just maybe do an incognito window and let's see all right so I'm gonna go on my other screen I'm going to freak out camp yeah it does say live now free code camp I'm gonna try to click it okay cool I was able to get in and watch so but it does say yeah there's only six people watching that's crazy alright well anyway you know actually the the title that I gave the video was not really enticing I just said it was finishing my react site so maybe people aren't really interested in seeing me finish this usually I'm more a more descriptive title so maybe maybe that's why or maybe there's something else live that's really important I mean did something crazy happen on the news and I'm just not aware of it I don't know anyway I'm gonna go ahead and get started so as the title says I am just trying to finish up the site today so I'm gonna show you here's my Trello board and the link to this is in the description so in case you really do want to check out the board it's it's public also like I did yesterday to start out with if you're interested in seeing my facial expressions as I code and seeing a little bit of what my office looks like you can check me out on on Instagram on my phone I'm live-streaming on Instagram the the view like looking right at my face as I as I code so the link to my Instagram is also in the in the description but as you can see right now I'm working on this JW player so I had changed from a YouTube embed and this was over the weekend I think I changed from a YouTube embed to JW player embed the problem was the normal embed that that's a script tag it loads the first time you load the home page but then after that when you use the client-side routing it doesn't load so there's there's not really anything like I can initialize it and component did mount or anything as far as I know I had thought about maybe trying to do something like that but I found a plugin I'm sorry like a react component for JW player and I set it up I had a little bit of trouble getting the right info but Sebastian is usually in the in the live streams he had mentioned like why don't I just check out the the actual JavaScript file that I was that I was pulling in from the normal embed and if I scroll down to the bottom there was a bunch of info there so using that info and then rereading the documentation on the on the component I was able to get it working the problem is it's not displaying like the full width of the screen like the other one was like I wanted it to so I need to figure out what's going on right now I'm just kind of comparing the CSS for the old layouts doing it in the new way and trying to match it up is exactly is it because I can I thought I had it messed up exactly but it's still not working so I'm gonna give it maybe just one more Pomodoro session and if I can't get it done then I'm gonna go with Plan B which is I'm not gonna use client-side routing for when people go to the home page I really don't want to do that because then I'm losing a lot of the advantages of you know the speed of being able to just do the client-side routing but I don't really have time right now to spend a whole lot of time on this and it it just needs to be done so that's the plan hopefully I can get it working though I really don't want to go with with Plan B and disable that client-side routing and what I mean by that is it's gonna actually refresh the page and so that way the video will play again because it'll have a full page refresh and as you can see I have basically this is it this is all that really needs done and actually everything on this list doesn't absolutely need to be done so some of the things I just really want to get done like we had the geolocation to sort events by distance this was never something that was asked for on the site this was just something that I thought was a really obvious feature that should be on the site so if I can't get to this this art the geolocation already works I just need to have some indication in the user interface that you can do that because right now there's there's no indication at all that you can click on distance and sort by distance so I'm sorry click on location and sort by distance in the same way with the tables you can sort things in the tables by clicking on the table headers but there's no indication that you can do that so right now it's more of like an easter egg on the site so if I need to I can put off some of these probably in a few months I'll be able to come back and work on some of these things again but for now probably have looks like four four and a half Pomodoro sessions according to my estimates that I should be able to get this done so it might take more or less depending on how accurate my estimates are and then that's in addition not including this other Pomodoro session so I'm guessing probably like 6:00 to probably about six sessions that's a 25 minutes a session with some breaks in between that's about three hours since I'll be streaming for a lot of that time I'm gonna say probably four hours of work since I usually have questions and things although if I continue to only have six viewers there probably won't be that many questions so though I could see Alberto is in the stream hey Alberto glad that you could you could join us okay this reminds me when I first started streaming and I would have is actually worse when I first started sometimes I'd be no one watching or just one person watching so maybe I'll get more done since I won't have as much activity in the stream I am a little bit nervous that like some terrible thing happened and everybody's watching the news and I don't know about it but I would think my co-workers would let me know like I'd be getting something my phone would be buzzing and with with news updates I suppose but it is a little weird alright so let's go with this oh I did want to say to my my very first video for free code camp now has over 10,000 views so it's really excited about that I noticed yesterday that it had I hadn't checked the view count in a long time and I noticed that I was I needed less than 50 views to get to 10,000 so I was excited so I kept kept watching it so this morning when I checked it I had I think ten thousand and three views so that was really cool so thanks everyone for for watching and everybody that that viewed it and it has a bunch of thumbs up mostly thumbs up not too many thumbs down so that's really really cool let's let me bring over let me start my my Pomodoro timer so let's pull I'll pull this over here and I guess here's what I'm going to do for right now I'm gonna bring over dev tools for both versions so on on the left hand side this is the new way that I'm embedding using the JW player react component and this is the older way using just this script tag so let me let me know if this font size is too small it looks a bit small but since I'm I don't want to make it too big because I need to be able to see both these things so just let me know I I could probably make it a little bit bigger and it'll still work but really what I want to do is I'm gonna look at this this is the first component that really gets it gets added dynamically alright so that's the one that I want to compare because everything else that's containing it is exactly the same because these are components that I have direct control over so let's look at this top level component I think this is all we'll have to to edit potentially maybe if if I get these exactly the same in terms of their CSS properties and it still doesn't work I'll have to dig down in farther and see that maybe some something down in here you know it looks the same right now actually I may have just figured it out just kind of inadvertently what is this JW aspect JW aspect all right let me check a little bit excited I think I may have just figured this out so let me all right so with height:auto that's what it needs to be let's set this to display:block and we need this padding top we need 50 6.25% oh man that works awesome let me pull this over really quick all right so it worked before I just saw nothing and ice that's really awesome I think I want to I want to see if there are some options for me to take take away this I don't need that in there and let's see what happens ok cool the controls come up great oh man what what good luck the fact I wasn't even gonna dig down in there and check it out but that was it it was the very first thing I looked at ok so I need to probably the best way to do this is just in my in my CSS file I'm just going to add this I'm gonna target this class J to the aspect I just want to make sure really quickly that that same class isn't used I don't see it being used yeah that was good okay so I think if I just started getting this JW aspect class and actually let me just I'm just gonna copy that I'm gonna set it to display:block and then I'm going to add this padding and that should be it that should fix it so I had to comment I hate to use important too often but I I had to override it cuz there's there may be some way for me to change that through the through the react component there probably is some way but at this point you know this is this will work so I'm just gonna go with that and the odds of me actually having to use this component and future projects are really small so I just don't really want to dig that deep into it to learn it later on if I need it then that's fine I'll you know maybe I will dig deeper but for now I don't want to be here all night working on this so let's try it out I'm gonna save that and then I have to do after you hard refresh cuz the hot like reload doesn't work with my stylesheet hey zanna's here hey how's it going did I start early Oh actually you know what I think I did I think I know what I did let me go into my settings really quickly here no I didn't it is right today at 2:00 p.m. I thought that I accidentally set it for 2:00 a.m. instead of 2:00 p.m. but I didn't it it is 2:00 p.m. and I'm pretty sure that I did set it to promote it from one of my channel page for me yeah I did the settings right for a second uh-huh that's odd I did just get a notification on my phone from free code camp because I'm logged in on my personal account on my phone yeah then I didn't get the notification I got was from one of those videos and I did not get a notification about my livestream on my phone that's odd so there's there's actually a decent amount of activity on Twitter of people liking and retweeting the the link that I shared on Twitter for this but hmm oh well I'm not not too worried about it I mean if we get if nobody watches for like a week in a row then maybe I'll worry a little bit but for now I think it's okay okay yeah maybe it's just a weird thing with the notifications I didn't realize that many people relied on the notifications from YouTube so I don't think I can make it notification go out let me check the settings just really quickly broadcast alert yeah all the broadcast alert options are like technical difficulties or delays or something like that so I don't want to send one of those cuz that's not really accurate alright so let's see I'm checking out the live chat quickly Emilia lass is that scrolling effect part of react it is like extra smooth which scrolling effect just the normal scroll or like this this effect if you're talking about this navigation effect this is from it's not part of react this is like a custom it's just a little bit of JavaScript that does that so I think it's in I have Jess yeah this stick the sticky nav function so if you check out the the git repo the link to that's in the description and look in the app j/s file check out the function sticky enough and it's just a modified version of so mark synth did this on code pen and so I just modified it for for this use case and it's it's really short like you can see not very many lines at all and it's a nice effect so but I'm not even sure that you're talking about let's see if Patrick said you that his YouTube notifications have been all screwed up for all the channels for at least a week said the notifications end up being delayed Amelia said got the same notifications so maybe for these some people the notifications are just messed up the scroll okay so Amelia was saying the scroll for this video okay so that was that was what wooden Atia was talking about cool yeah the it's actually a cool effect what happens is there are two knives so this this nav gets cloned so there are actually two completely different elements so the one stays with its normal position and then the other one once you get to a certain point the other one goes with this position would be position fixed so I mean you can check it out there's actually some decent commenting and that's when this is from mark mark self put in the comments and I left them in there so if you've watched me you know I'm not great with commenting I'm gonna try to get better and upcoming projects but it should be pretty pretty easy to work out if you're familiar with jQuery then you should be able to work out what's going on okay so we've added this it wasn't refreshing can anybody guess why it wasn't refreshing it's still my dev server so I tried a little bit to get my dev server to work so I went in and remove like the the files that video all had said to try to remove and that didn't do anything but I didn't go so far as to clone the repo into a different folder just I was just working on other things and that did not work let me see what happened here all right I might have to put some importance in there let's see what happened well yep I just I even need to make this more specific or I'll pray I'll just make it more specific so let's add this in actually that's yeah it's I need to do this okay now go to refresh yeah there we go alright so you can see I refreshed it everything looks good last thing I need to do I mean probably should test it it was it was pretty good last thing I want to do is get rid of this so I'm gonna have to go to the documentation to have up on my other screen so I'll bring it over here and I have it a bit zoomed in I make it a bit smaller so there's a bunch of options so let's see they're probably already an option maybe there's not I figured there would be an option to hide the name of the video maybe run through it again all right yeah so my next idea then is figure out what what part of this controls like what element displays this and then maybe I can just get rid of it with CSS title yes all right so that works so we're just gonna get this JW title and we're gonna set it to display:none I'm gonna do that right in our CSS file so I'm just gonna copy this and get rid of this and I think it was called yeah JW title that was pretty straightforward so I'm going to save that and let's refresh to make sure that it's working all right awesome that works all right so that looks exactly the same as the other one did and if we use our client-side routing it should still work so I've gone to the bout now I'm gonna go back no page refresh and we still have our video awesome and let me check my great so even with me taking a little break to check the live chat that still didn't even take one Pomodoro session so we're ahead of schedule now so that really only took half I can get rid of these great move that's it done all right now let's figure out out of these what what's the most important I'm gonna move these to the bottom this geo locations what else the filters here because you know like I said these were things that I thought would be useful they're not really what what anyone's expecting for the site this can go down here too yeah I think maybe my boss had asked for this a long time ago so this is gonna be easy to put it I'll put this on the bottom I'm not really sure linked to directions yeah I'm not even really sure what I'm supposed to link to I have to go back through my emails and stuff to figure that out so we'll just leave that on the bottom for now too and anything that has like the categories and tags I'm gonna move this down because right now there's definitely not enough enough posts to warrant having categories and tags so if I don't get that in I think it'll be alright because I think even in a few months there's still not really going to be that much on here to warrant this because that you know they have the same staff that's going to be updating this site it's also going to be doing things for the learning management system and that actually did launch on Saturday like it was supposed to I'm assuming I didn't I didn't hear anything to the contrary so that did launch someone else had had joined in the livestream on Instagram so I didn't notice that I want to try to notice when somebody comes in on Instagram just to let them know what's up because otherwise people might not they're just gonna see my face with headphones on and I'm just talking to no one so that might look a little bit weird I'm talking about things they can't see I wish there was a way to like have a message up on the screen on Instagram just so I could let people know like hey I'm doing this live stream on YouTube if you want to see the code but as far as I know there's not a way to do that alright so basically from here down from here down don't have to worry about it all so yeah this is gonna go way at the bottom alright because I think this is another thing that I thought would be useful to have the link in the footer so if it doesn't get down nobody's gonna miss it add image to courses page okay yeah I'll leave that I'm just gonna move it down a bit because all these are go together alright so right now the news page is not there's no link to the news page you would have to type in the URL this would be like khattak addicts column slash news you can get to the news page like that so we're gonna check out the news page right now just to get you an idea of what's what still needs done I'm it looked at it in a little while okay so like is on the list we need to find an image edit the image so that it'll fit in this space I think I need something that's 2,000 pixels wide I can't remember the height off the hook it up so we'll find the image will edit the image we'll put it in here we have already our titles that are getting pulled in and I guess I don't have okay I'll see all right so I had had the idea of making the posts setting it so that you could have a post that only appeared on the home page and didn't show up in the news page and that was because some of these posts only just link somewhere else in the site and they just have a short sentence saying what it does so I didn't think it would even be worth it to have them show up here and then when you click on it it would go you know to a full page like this but then nothing would be displayed or maybe just one sentence now the problem with that is nothing will really show up at all and this was the whole reason we never shared the news page before I'm like I'm a little hesitant to even make this news page live because we still don't have anything here I know there was some content all right we're gonna do the work to get this news page ready but if I can't find some good content to go in here then maybe I'll maybe I'll wait I could always put something in there that would check to see how many posts are available and maybe change this link so that when we do get posts later on it'll automatically change and link to the right page and then that way I don't have to come in and edit it I'm not sure it happened there okay let me I'm going to commit what we did with the with the video use okay all right hey we're up to nine viewers now so we're getting up there it looks like and Tawana is asking it other videos at the beginning the projects and Zanna yes there's a thanks thanks for answering Zanna yeah check out there are also a few videos of the very beginning the project are on my youtube channel in the link to that is it's also in the description for this video on I see Amelia Amelia just answered that as well so once again I forgot to look down and see so thanks Amelia yeah all right so yeah Zanna said it's the feeling when one moves one card to to the done yeah that's a good feeling to move it over to done just look at this doesn't it sleep you get to the end of the project that looks amazing like this is all that's left to do I mean I know I have all this stuff that's like if I had a lot of time I would do this but ignoring this for a minute it's just really cool it feels really good I mean look at all this stuff in the done column just really cool to have all that I mean look that's you know over well over 200 Pomodoro sessions completed really cool that feels great all right well let's just start let's start getting these done so everything that has to do with music it's ticking and yeah are we don't I'm not gonna change that yet and so we have this finished and yeah so we'll do this then we'll move on to this we'll see how much time we have and go from there and let me try to keep accurate estimates of my time so I'm currently closing in on a hundred and fifty hours of development time for this that's a kind of a rough estimate I usually underestimate a bit because that doesn't include any meetings phone calls or emails about this which there were a lot so I think this is gonna end up including all the meetings and everything this is probably going to end up being close to 200 hours of development time for this Patrick asked what Chrome extension I'm using for the Trello thing and I always forget what it is let me look actually is it this one yeah okay so it's scrum for Trello so that's the so that's scrum SCR um Patrick I'm sure you know what scrum is but in case somebody's watching it's not familiar with scrum it SCR um for Trello all right let me get my my timer went off so since there's not a lot going on in the live chat right now although now we're up to eleven viewers so we're getting not nearly as many as we normally have but we're getting there let's see also just a heads up if you see any if if you happen to watch the Instagram thing although no I don't think anyone right now and you see somebody behind me my co-workers were plotting to to get on YouTube or Instagram or something by sneaking in and and looking they're gonna have a hard time though because I did lock my doors so but that was their plot alright so let's start up another Pomodoro session let's grab an image for this I need to find I think I have I don't remember where I have all the images I think they're my Google Drive and actually I did I got an SVG version of the logo as well that if we have time I'm gonna put in there so John Hanson who's often in the live chat converted the the loge of this logo into an SVG right now it's a ping I think so he sent me that and I'm going to while I'm in my Google Drive I'm just gonna download that as well since we might be using it Knox Aven I haven't really even had a chance to check it out yet but I'm a big fan of SVG's whenever I can use them I think it will end up looking that I don't know how it looks on your screen but on my screen this just does not look crisp at all until i if i zoom in like this it looks kind of crisp but it's just it doesn't look great so what did you off to check the file sizes and everything I'm pretty sure the SVG will end up being smaller but we'll we'll check that out in a minute right now I need to find hopefully I can find the so I'll bring it over on this screen when I find it just in case I have a lot of stuff from clients in my drive so I don't want to accidentally show anything from clients that I shouldn't on YouTube that's what my my son always asked if he can like play video games on my computers and stuff when I'm when I'm logged in and I always saw him like you can you can't like you could destroy so many people's websites if you got on my computer so especially I have a lot of things in LastPass so you know he wouldn't necessarily have to know the passwords with LastPass if he could figure out how to fill in everything with like he's only seven so but he got to be careful about that let me see so I think I found the right folder all right I did so let me bring this over and let's check out some of these images all right let me see how can i I'll zoom in a bit so what page this is the news page I'll say right away this image they didn't like this image before the people in charge the catechetical Institute as there's like a header image because I don't know because some of the stuff was out they just didn't like that some things were out of focus on other things weren't out of focus which I don't really know we could do anything about that like obviously you can't have the entire picture in focus if it's you know things are in the background also depending on the screen dimensions some people's you know their heads will get will won't be visible so they didn't like that as well so I think anything with people it's probably out so we just need to look at some of these shots of campus so that limits us to these and some of them have already been used you see also things like this that have an obvious focus they're probably going to be out of the question because once again if part of it gets cut off that they don't like that so like this isn't gonna work say I'm a bit limited actually I wonder about this one I don't think we've used this one let me check quickly see if we've used this one that looks decent I know they really want to use pictures of campus because the people that are going to be using their learning management system will most likely not visit campus so they want to give them a feeling of that this really is attached to a physical campus and not like it online only school that's that's how they explain their desire to have lots of the images of campus Timmy I'm gonna go through quickly and just make sure we're not using how we are using it shoot okay so using that this is different but it really looks the same let me see if we were using this I think we are let's check it out yep we're using that one too maybe not that one but it looks pretty close it's gonna settle think it's the same one no it's not the same one unless there's things getting cut off on the size oh maybe it is the same one yeah okay yeah that is the same one I think we're using this one too let me check the courses events resources to say yep that's it I've already already picked all the ones that'll work let's see this one now I'm using this one alright so that kind of leaves this as being one of the only ones that we haven't used yet I guess I'm really hesitant to use it because in some important parts of the picture are gonna be cut off but I don't really want to spend too much time worrying about this see this one I don't know if I could get a good crop on this so that it would work I guess I might be able to let me alright let's open this in Pixlr and I want to double-check the dimensions that I need oh yeah XANA I am choosing a header sorry I didn't I'm in check over there look Patrick's just got a bunch of YouTube notifications all at once so maybe maybe something was happening Ren's ass how long is this going Ren's a set of five minutes ago so if you're still there ends at least this is probably gonna go till 4:00 maybe later we'll just see how it goes Zanna says she does this in yeah I I actually I do use like for all the the thumbnails for my videos I do those in but it's just it's really convenient for minor things to just open this in the browser and I I don't have to worry about having things downloaded and so this this works for a lot of the stuff that I normally need to do but I do like a light I actually had never used it before and then when I first started streaming for free code camp they they have do their thumbnails in so both sent me both who does the JavaScript video sent me the template file so I had to learn how to use but he was really cool about it he actually he made a tutorial video for me so that I could learn how to edit things in so that was super helpful and it was really nice of him I could even hear like his kids were in the background and stuff so he took time out of his out of this time with his family to do the tutorial so those are really good guy if you get a chance to watch this videos check them out let's see sorry my other screen I'm going through my files trying to find where my there we go where these images are so that I can figure out what I need okay it looks like I need 2,000 by 500 yeah all right so 2,000 by 500 what I need so let's adjust the image size okay so we're already at two thousand that's great now we just need to crop 500 out of here foot size okay mmm Wow all right so I guess I'll try to get this this cross this is a cool spot on campus they call it the Rosary circle so they actually have the same number of like bushes around here as there are beads on a rosary so that's kind of cool I had never knew that I had seen this for years and never realized that that's what it was until I started actually started working here but that's what it is that's kind of cool it's easier to tell like from an aerial shot than when you're actually walking around it alright I think that's that'll probably be about what we want all right so let's save this and use title know what an error card come on I don't want to save it's a Google Drive let's try to save it maybe that's why the error occurred that's kind of a really big file I if I have time I need to compress these images there's some other images on the site that I really want to cut down as well all right now let's try this out so where we had news where its title how did I have this I'm not even sure if I'm still using this maybe I am news yeah this was this is kind of a mess I really wanted to be able to just pass this in as a prop but I guess you can't do that if you're using the style JSX so so that's why I have this which seems crazy but it's because I couldn't pass it as a prop and I'm sure if I would have thought about it longer I could have figured out some way to make it work but for now that's that's just how it is let's go back here and see that's really weird why did that happen okay sometimes when I do it just does like a hot reload the styles that are in the dish style JSX tags don't get applied let's go back to our news page yeah so maybe it's not that's not where hmm then I'm not change the right spot let's see all right so yeah this is entitle the title component and C News News title okay oh I know what I didn't put it in the new folder I put it right in the image folder mm-hm still not working let's make sure that this is actually called news maybe I didn't put in news okay yes I've given the ID courses here to Maine so maybe I just didn't do that for news yet there we go all right great okay so we have that section all right as I move that around that's not bad I mean this no one's gonna have a screen like this I'm not worried about it but let's maybe see how it looks on this screen okay that's I can I can live with that so on most screen dimensions you can see you can still see the cross there I think they'll be happy with that awesome so yeah that definitely took longer than I hoped it took a bit longer than the one half but some let's go ahead and commit commit to change my livestream on Instagram stopped so I did it yesterday I think Instagram has a one hour time limit it seems like because I've been streaming for one hour so good to know and yesterday I didn't realize you could do this but you can make your livestream available for 24 hours so I did do that so in case anybody does want to see it it's available it will be available for the next 24 hours so I'm trying to find my there it is my console whoa you sir okay that's our new file great all right great so that's done I'm gonna say I'm gonna just round this up and say that this did take one it almost took one or maybe yeah I didn't do a whole lot of looking at the live chat so I could could knock some time off for that but I think that took about one alright let's make news page alright so basically for this one I just want to clean up the page a little bit display what needs to be displayed this is no longer on hold let's see I want to briefly look through some of my I can't find it I had open my oh there we go my messages from my boss just to get through really quickly and see if the information that I needed was there no I don't think it is all right so I guess I could check my email quickly too if you remember I said there there was some extra information that could go here for some new posts so I want to find that but it's it's been a while yeah oh well it's not a big deal you know anyone could enter in that information from WordPress now it'll all get pulled in it's a wordpress so that'll be fun let's see we do need to check these out we need to edit these pages a bit I don't want the title to appear like this because if if you get a long title for a post it looks really weird and it extends out so it's just we're gonna change up how this the single news page works but for now I want to check out why I'm not getting the excerpt to display here and I guess it's not we don't really need it a hundred percent but usually that's something that's kind of expected all right so let's see what we're doing here okay so we're not we're not sending the excerpt in and let's see what it looks like on and WordPress all right so this is all the information I'm getting I'm putting in there in WordPress okay so this explains why we have no content because right now all we have is the excerpt and we have nothing in the actual content we also have no categories yet see which I think of the best thing to do okay let's see I'm gonna do my my short break here and check the live chat that'll give me a minute to think about what I want to do with this I'm gonna record what I did on my other screen here all right so I'm go back to the live chat Wow still only nine viewers yeah it must maybe it didn't alert people haha yeah you get Patrick must have heard the Bell the three o'clock Bell for for prayer time okay Umberto says that he never received an alert either hmm that must have been the problem then for some reason the alert did not go out that this would be this would be live so oh well I'm gonna double-check one more time let's see promotion promote on my channel page hmm yeah yeah all the settings are the same as I normally do mm-hmm okay so Joseph said he didn't get an alert either Umberto said looking at the alert option for this channel it looks like he got reset to off that's odd did get the alert okay so when I did I did do a stream earlier on my own my own channel and Joseph said he did get that alert okay that must be it then not really sure what I can do about that maybe later on I could try to look it up see if that's happened to anyone else before so I'm not if it if it keeps happening then I'll be a little bit more worried about it but I guess it'll be not that worried if it just happens the one time okay let's sum so yes there's not there's not that much going on in the live chat so I don't I'll be right on time usually I always go over my allotted time for checking the live chat at this time I don't think I will okay I think I probably will try to end this stream at like 4:00 p.m. Eastern Time at the latest because my the head of my department did want to kind of just meet and have me give her like a recap of what I did with this site so I want to make sure I finish up the stream before she for she wants to do that so she actually she might be stopping by my office in a little bit for that so just to let you all know probably would be at most two hour stream all right so my thoughts were basically it doesn't even make sense to have these right now be late you know cuz right now you know the the point of these is just to be basically links with with a little bit of text to you know right here so they're not even really meant meant to be like blog post oh I just had an idea all right here's what I'm thinking so right now these link to other places mostly I think within the site some of them to external places so what if when this option was checked if this is check that it's supposed to appear on a home page only then instead of only appearing on the home page it could also appear here but when you click the link it would go to the place would that be too confusing since this is apparently a blog page I don't know maybe I shouldn't so my original thought was that if something was basically not really a blog post it was just meant to link somewhere and then this would be checked and it would only show up on the home page and not back here the problem then is that right now we only have things like that we don't have any legitimate posts yeah I think I'll just go with that so here's what's gonna here's what I'm gonna do I'll check the live chat in a second to see if anyone is kind of has any opinion on this but what I'm gonna do is at least for now I'm just gonna put some test data in here just to see how this looks and if it looked okay I'm gonna just have it so that if it's checked if this box is checked for homepage only it won't show up here and they'll just have to put in you know put in things that'll show up at some point all right so let's go into yeah we'll do it we'll go to the news page and let's see if those content render it let's go so we have this is okay see how do I have this listed excerpt I think I'm going to grab this excerpt and make it what appears here below below this date so there's just a very short description so I need to pull in I think that's probably what it is find out in a second okay all right it's not bad that's pretty good I'm not sure about the dates I don't know what do you think about how the date looks to me at Denise I need to do something with it alright I'm gonna check the live chat quickly see what you all think okay all right so looks like looks like some people are saying if I don't have any content leave these in or potentially I could just put in some message saying there's no content if there's nothing I think I'll end up doing that saying there's no content just because I think that's going to be easier than trying to change with these link - I don't know maybe about the same but I just kind of don't want I don't want to make it so these link to internal pages I want to keep this as like a normal blog would function oops oh cool yeah Patrick just like this Patrick made some fireworks Foofa which a lot really cool I like that that looks really cool I'm gonna show my kids that they will love that I feel like I could spent so much time just watching that I need to like I need to minimize that quickly before I get any more distracted thanks for sharing that Patrick that was cool okay Umberto's says with the date-style thinking maybe like a lower color loaf yeah maybe yeah let's just let's open up dev tools here and just play around a little bit see what how we can give it a look hmm Oh see okay I could do the gold color and see how that looks I think this does need some padding what is going on ha letting me to look at the live shed I know you all caught what I was doing and now I feel like an idiot because I can't tell right from left all right I think that looks a little better you seem like here that this extends beyond you know where the title is so I wanted to line those up all right I'm I'm satisfied with that I think this is one of those things right I could spend a long time like changing one pixel here and there but I don't I don't know that it would be worth it so let's use this this was a spin I think I can actually just say span I don't have any other spans here and for some reason things that I pull in from the API that the styles that are in here don't get applied to that or at least they haven't been making they're supposed to and I'm doing something wrong oops all right let's see if that works yep great all right so that works now let's take a look at this interior page and let me before I commit this I'm gonna look at the live chat just in case I missed something okay Santa's and give something like read more yeah we could have something a little link that says read more made throughout we could have that I am I don't know what do you think do you think I should have that is that necessary throughout the site anytime that there's text in red it's a link so I mean we do have at least a pattern of things in in red being links I don't let me know what you think if if I really should put a read more link you know here that people can click on okay all right so all right so maybe I should put in a read more link all right let's do that let's put a read more link in and so that would be because here we'll put a span and now I'm gonna have to do maybe I'll just I'll leave this a span or I have the same styling as the date let me see because for now I think that'll be okay so I am gonna make this a link but for now I just want to see what it looks like hmm so definitely have to let's see all right see Alex all right that's not bad what do you think whoa saying there are two live streams now for free code camp yeah I've never seen that before either let me check that out okay it looks like from the channel it looks like that though isn't live but he did put a video up yeah an hour ago okay okay so it was just delayed okay cool hey John how's it going glad you could join us and thanks for that SVG I'm gonna try to get that in if I can if I have time today I really appreciate that Blake thanks for watching I'm not sure that I've seen you in the live chat before if I if you have been in the live chat and I just didn't remember I'm sorry about that but otherwise welcome and thanks for joining in okay so it seems like the consensus is that the read more looks good so let's actually make it a link now so we can just grab this let's see all right let's see how that up and I turned it blue it's very very sad area okay so that's cool resources yep so that's working how we wanted to alright great so that looks good now now I can commit okay all right and our Pomodoro session is almost up and let's see single news page that was what we're gonna move on to let me add on let's see alright so I mean we've we have actually completed this according to what this task was but I'm just gonna lump in the changing that single news page as well I don't want them don't want to make another card I have some time left in my estimate so it's possible that I just have assumed I was gonna do that as part of this before I made this so long ago I really can't looks like I added this card to ready for development on May 10 so I do know how long ago I actually made the card let's see a short break alright I think actually so think I'm actually I'm gonna go to the live chat answer some questions and then probably I'm gonna finish up then so I don't really want to start another Pomodoro cycle and another thing because then that'll put me over the the two-hour mark for this video so I do want to leave time to to wrap wrap up what I'm doing and then meet with my department head and give an overview of what all was done and I think I just got a text from my wife a few minutes ago that she has to do something at 4:30 yeah so I've never I'm gonna answer some questions and wrap it up and then call my wife to figure out if if that if the text she just sent me means that I need to be home very soon or what so I'm not sure with them he's but yeah let me check in the live chat here and see if I've missed anything I know there's not a whole lot of people here I'm like somewhat afraid that everybody's going to get a delayed notification for this and right when I'm about to end the stream you know everybody will join in at that point because they will have just gotten the notification so I kind of hope that doesn't happen I'd hate to bail on everybody right away all right so let me let's see what's in the chat here okay Susanna mentioned the read more link could actually make the the text like drop down and it just pushes everything else down but it would no longer up in a new post so I do I like Patrick says he likes that idea as well but so right now what will end up happening is that assuming that the people put inputting data follow what the instructions I'm gonna give them so I'm gonna make them a video to go through all of this you know how to how to update all content in WordPress and how it will look I am gonna say you know make sure if you don't have a lot of content you check the box so that it won't appear on the the news page and that way I will avoid having a page that's just mostly blank but I do want I like the idea of the accordion except I want people to be able to link directly to a blog post so especially like to share it on social media or something and for that it needs to have its own page I mean potentially it could do like some sort of like hash at the end of the URL but but then you know you still wouldn't get the data being pulled into social media properly so I think it should have its own page and just hopefully they take my advice and only make a full page you know post I'm gonna recommend that every like legitimate blog post needs to have at least 300 words that's usually when I use I used to do a lot of search engine optimization like copywriting and so like ghost blogging and things for companies and I always said like every post needs to be at least 300 words I didn't want it to appear to be like shallow content so that's that's what I'm gonna recommend okay I see as Anna says if it's a longer post it could open a new post so it could be either or I yeah I do like that idea I'm probably not gonna do it just because at this point I'm running out of time so I'll probably just keep it as is for now okay so food says awesome work Jessie thanks I appreciate that and thanks for joining in the the live chat thanks for watching Blake s what's the link for the timer it's just tomato timer comm see if I can yeah so tomato timer com tomato - timer comm yeah no problem pooch says what advice would you give to someone who's learning wordpress along with code yeah that's actually kind of how I learned I would say this definitely seems to be like a wordpress way of doing things and that's I mean in terms of they have like these these hooks and everything is done through that so in terms of like how you write PHP I guess just be aware that the WordPress way of doing it isn't you know that's specific to WordPress and that isn't used everywhere so just kind of be aware of that and then I would you know when you can do projects that don't involve WordPress you know try that because there's a lot of things that WordPress does for you that if you're gonna do a project from scratch you know you need to worry about so things like like routing WordPress does that for you but you know normally if you're doing a project just from scratch with just JavaScript you'd have to come up with some sort of routing system like templating so there's just so many built-in things with WordPress that if you only stuck with WordPress you wouldn't even realize what goes into that or how to do that so that would be my advice is I think WordPress is great it lets you build nice-looking really nice-looking sites you know really functional sites without having to worry so much about all other stuff and without really having to know about back-end things but if if you really want to kind of learn how everything works then I would try to do some things not in WordPress and it'll just give you a much better idea of what goes in and you will you'll actually appreciate everything that WordPress does for you so that's that's kind of my my advice and also like learn how to use some of the build tools that you would use normally on a JavaScript project that you wouldn't normally use with WordPress so I'm talking about like you know using let's say like gulp or web pack or something all from the you know learning how to use the command line using git I think those sort of things are they're not used as commonly with WordPress because you don't you can start up a wordpress site without that and you can work on it without it so it's not quite as common but I think those are important things to know so that would be my advice hopefully that helped a bit okay so John actually said it was a very delayed notification you know I'm gonna have to really be more disciplined about scheduling the time for the video earlier in the day usually what I what I've done is like I just put it off until later on and then that gives me a better idea of what I'm actually going to be working on so I can I can write a better description for the video but I think maybe it would be better to maybe my my titles and descriptions aren't quite accurate but if I were to let's say it like you know maybe 9:00 9:00 a.m. you know Eastern Time or 10 I would have the video already scheduled and it would already be notifying maybe maybe then there'd be a better chance of the notifications coming maybe when I wait till the last minute it's just you know that's causing the delay I don't really know I mean you would think that you could start the stream you know and then a minute later the notification would go out but maybe that's it so I'm gonna make a better effort to not wait until the last minute get the stream schedule and then because I usually know like as soon as I get into work I have a decent idea of whether or not I'll be able to stream at the proper time you know 2 p.m. Eastern so I should be able to schedule and if I have to change it later on that I do change it but maybe that will help okay so Patrick says that he thinks that the 300 word count for search engine optimization is outdated and it's actually longer now okay that's good to know okay Zanna says like 500 words maybe I'll recommend 500 then I think to recommend I'll go ahead and recommend about 500 I was just thinking I don't want to make it too daunting of a task for them but then on second thought I I thought you know throughout this entire process for the site I kept on saying it would be better if we had less text so I kind of think it's not really gonna be a problem for them to hit that 500 word count since they seem to be going over the amount of text that I that I think they should have in most of the other parts of the site so thanks for that I'll go with 500 words I haven't done like real SEO work in so long and that feel it changes so often that I don't really feel confident that I'm up on the latest things I'm sure there's probably some fundamental things that pretty much stay the same and I'd be good with that but I wouldn't I wouldn't say that I'm nearly as knowledgeable about current trends and SEO as I used to be used to be I used to be able to get sites to the you know right to the top of the first page and in small markets you know usually within you know within months I could I could for sure get him up I had like I had like a plan and if you just stuck to the plan you know it seemed like it always worked like I said in small markets not in like high competition places but usually like when that starts happening and you can continually consistently get sites ranked higher with the formula then things change the algorithms changed and I wasn't like spamming bad content my my philosophy and when copywriting was always yes you want to do it so you can get ranked higher but I always wanted to give users something useful to them and meaningful even if my main purpose in writing is just to get you know more to get rank higher and the search engine rankings then I still wanted to provide some benefit so I think that's really what it's about is if you provide something beneficial and substantial consistently then eventually you will rank higher as long as you're doing the fundamental things like you know you have your HTML formatted properly and things like that title tags title tags always found to be really important I assume they're still important all right Gaurav says looks good man thanks thanks I appreciate that yeah then I said I hope they won't ask you to write their content - yeah it definitely won't be I don't write content anymore I'm not really it's I'm not into that so I I do not offer that service to clients anymore yeah so there's a dimension since they expect design tests from you yeah I still I do design and that's out of necessity because there's no one else that can do design but we have we have we actually have writers on staff in my department so since we have writers we have graphic designers but they just stick with print stuff mostly so and we have writers but we don't have a web designer so I end up doing the web design as well yeah John says it's hard to convince people to have good and relevant tax count on websites everyone wants to go for the minimalist white-on-white look yeah I mean I like minimalist in general but I do you you need to have a certain word count I think on on a page but there were some pages where I kept I wanted to keep a large font size so I'm convinced that the one of the keys to having people actually read your content is to have a decent sized font so like I'm not really comfortable going below like 18 pixels for most font sizes because it's just hard to read I mean it really it depends on your screen and how far away you are from your screen different things like that but basically like I'm way less likely to read something if the font is small and I have to like really focus on it and I have I have good vision I've good eyesight you know I'm young so I can imagine people who have difficult you know they don't have good vision or they're older like it's got to be terrible for them to try to read this small font so having said that if you're gonna go with a large font you have to cut down the amount of text otherwise it just seems like an overwhelming amount of text because you have this large font size now so I like to increase font size decrease the amount of text and then it'll be easier for people to read and there'll be less that they have to read so it's more likely that they'll read a higher percentage of the content on every page so I think that's my philosophy on things maybe I may be mistaken but see all right cool yeah so John mentioned the Meta Description tag is ignored by search engine yeah so if you're still using the Meta Description tag on your site just stop it's not used by search engines well I shouldn't say stop here's my feeling that Meta Description tag if you don't use it a search engine will just pull content from your site anyway and it'll probably be relevant and it'll match up with whatever the search term was so you can add it if you really want to specify what the description would be but it's totally not necessary so I guess it just depends on what you want I've gone back and forth on it sometimes depending on whether you know depending on what I want so if you have a certain like marketing message that you really want to appear then I guess you use use it otherwise like don't worry as much about it because the search engine will pull what they want yeah Johnson yeah thanks for clarifying yeah I didn't mean let me clarify that because I don't mean so John is rightly bringing up that it's the the meta or the keywords so like the meta keywords are not crawled like so those won't be called the description will they'll see the description another use of description but it won't count in terms of your your ranking so it's it's not like it's invisible to search engines but it won't like don't keywords stuff your description right because that's not going to do anything for you in terms of search ranking right your description in a way that's going to appeal to your users okay don't don't consider search engines when you're doing your description does that make more sense I probably shouldn't talk about SEO at all anyway since I'm not I'm not really up on it so like I said I haven't done anything with search engine optimization in probably two years so don't don't take what I say as as accurate anymore but I think it's it's been true for a long time so it's true to say don't use meta keywords if you do use the Meta Description write it to your users don't worry about search engines because they won't use that as a ranking factor the title tag is important to have the proper wording in because at least it's been my experience that the title tag is actually very important in terms of what keywords you actually rank for and your header tags alright so I'm not I'm not gonna comment any more on on search engine optimization because I I think saying less is better at this point because I don't want to mess any one site up by giving incorrect advice on on that but I'm thinking I'm gonna I'm gonna wrap up this stream thanks for watching like I said I'm gonna try to schedule the streams earlier so you all can get hopefully get the notifications on time and not late so I apologize for that I hadn't anticipated that that would happen I'm not entirely sure why it happened but just in case it was because of the timing of me starting scheduling the stream I'll try to do it earlier so tomorrow I will be back with an entirely new project I'm not exactly sure what it'll be but it'll be new so thank you so much to everyone who helped out with this project I think it turned out really well and way better with your help than it ever could have been with just me working on it I really appreciate that and yeah I think that's that's it for today's stream see tomorrow and have a great day