React Project 2 Day 6 - Live Coding with Jesse

Key Takeaways

hey everybody it's Jesse and um I guess we're going to start out today doing a uh going over a pool request and I was just testing it out so I've gotten pretty much nothing done since yesterday so we're going to start right where we left off at uh so yesterday after I ended I just answered some emails talked with my boss a little bit and then left this morning I've been I've been in meetings uh all day so we actually have been interviewing someone for web developer position so we did an interview like a panel interview and then I just got back from doing a technical interview it was kind of cool because we actually used some uh free code Camp challenges for the technical interview so uh I thought that was kind of fun and I've heard that other people do that as well so I don't know if it's a widespread thing but hey you know if you go through the free code cam challenges then you got a shot at maybe seeing it uh in an interview so might help you out um also I got a comment on one of my videos saying that I should uh talk Less in code more and I was actually thinking the same thing yesterday afternoon so I'm going to try to do that I can't guarantee anything because as as you all know from watching I I do tend to talk uh so I'm going to try to talk when I need to to explain what's going on in the code and then of course to answer questions uh but other than that I am going to try to do more code um I uh see what was I going to say oh okay I do some silent streams on my own channel occasionally so if you really would rather just see the code and not worry about my commentary on the code check out those streams um I don't really schedule them too far in advance I just kind of do it whenever I have some time here and there throughout the day so the best way to hear about them I usually tweet about them so if you follow me on Twitter you'll probably see the Tweet or uh if you subscribe to my channel uh you get an alert but those are just like I said I don't schedule them they'll just happen and I'll do it until um usually for like an hour or so until something comes up at work and I can't do it anymore all right so I'm going to say hi to everyone in the live chat and um I have [Music] some I have some questions already uh question have you ever had a female boss yeah I have so my my immediate supervisor is a male and then uh the director of my department and the executive director of my department are both women and I've I've worked for for women before so not not really a big deal to me okay uh also this video is going to be shorter than normal so I told you yesterday that I kept trying to go see this guy's computer and about an issue he's having with a website I made uh and it's it's on campus here and I I haven't been able to get a time it's the one that I thought possibly might be using Internet Explorer 9 so I got an email back from him saying that he'll be there around 400 p.m. so I'm not missing this opportunity I have to know what is really going on with this website he's saying he gets a blank screen and nothing happens at all which is crazy so I want to know uh so I definitely am going to shoot for like being over around like 3:30 Eastern time so maybe about an hour long stream I could probably go a little bit longer than that and still make it there but I don't want to take any chances all right so let me show you what's what's going on here I'm working on this error message right now so I have let's see this uh sidebar item. JS is giving me an error no duplicate props allowed and I got this because if you'll notice uh these are now the same color which is awesome aome so that was a uh a pool request that I got [Music] from let me show you the pool request where do I have it up is this it okay so here's the pool request and all right so there's a one in the name so let me I think I I um I have a message on Twitter from this person as well so okay so Le lean I'm not I'm not really sure how to pronounce it but uh sent this pool request so if you're watching let me know how to pronounce your name because I don't want to get it wrong uh so basically as it says um it customized the hover event okay so it just ended up using if you remember yesterday we were uh Sebastian was saying it's the the list item that needs to get the the hover but the list item was being created by the I think it was the menu item um component yeah the menu item component so we couldn't access it directly so now it's just switched to using the menu item directly and it seems like everything works the same as it did before so that's not exactly how it's said to do this uh side drawer in the document mentation but it works so I think I'm going to pull it in but before I pulled it in I tested it and I got that error so I just want to work on that error first and then pull this in uh to the master Branch uh and then we can continue on with our layout uh for everybody that's new joining uh I want to explain so if you're joining from Twitter I had said I'm using material UI and materialized CSS which may be a little bit confusing so we're using material UI and all the nice react components that it has but when there's a feature that it doesn't have that I like from materialize then I'm going to pull that in so we've pulled in the column classes already and we're probably going to pull in some other things like I like how they they do their responsive font so we'll probably pull that in and we'll see as we go along so we're going to use a blend of the two and I have started the enro server so let me I'm going to paste that link in for you all so you can follow along and in case you can't see the live chat right now for some reason here is the link this one here I mean this one would work too I guess but this one's https which is better so I guess so why not all right so the Link's in the chat now so here we go can see uh getting some activity there so let me know if anything goes wrong with that I won't be watching this as I code so if if it quits working uh please let me know and let's check out that error so I it did say it was on line line 24 of the sidebar item which is right here so that's not actually before I let me um open this back up CU if you remember I think yesterday we were having the problem where when I switched branches uh the code wasn't automatically changing which I'm I'm almost positive that it did automatically change before um but for some reason it's not so I'm going to open that back up again just to see there we go now this makes a lot more sense okay so on line 24 we have this hover color okay so we see the hover colors here is red and the hover color down here is a different color so let's take out this hover color and that should fix the error cuz you know that that makes sense you shouldn't have two props uh that have the same name because that's confusing all right cool error is fixed there we go uh we still have these errors which I don't where are these errors coming from it's weird I get these errors all the time in production or in develop but not in production so not worried about them right now so now that that works let's commit that and then merge this Branch into the master Branch so I am going to explain every time I do something on git or in the command line I'm going to explain that uh for everyone who's not familiar with it so for those of you who are familiar with it uh if if it's kind of annoying that I keep explaining this and you all know that I'm sorry but uh I'm going to going to keep doing it because I think it's better to explain it for the people that don't know it than than to not because otherwise they'll be really lost uh so we're going to do get status just to double check that we've only changed uh the component that we meant to change and we we have in fact only changed that component and then we're going to get commit am and that the a means we're going to add everything and we're going to include the message right in our Command so it'll say remove remove duplicate props all right awesome and I'm going to merge this now so I've already merged Master into that the other branch and I did the test there so maybe there's a better way to do it but I like to do it like that because that way if if something there's some weird errors and it breaks a lot of stuff when I merge it it's only broken that one branch and I haven't messed up Master uh so then it's just easier to switch switch right back to master instead of having to worry about trying to roll back you know to a different version of it uh and then it's great because once you have it right and it's everything's fixed then you just switch over to master and merge and everything works so let's do that so we're going to go get merge so when you merge uh you go to the branch that you want to merge the other Branch into so I'm in master because I want to merge something into master I'm sure there's other ways to do it as well but this is the way I always do it and I'm going to say what branch I want to merge into my current branch and in this case I want to merge what did I call that I think it's the only L Branch all right awesome so you could see we had obviously no conflicts because uh that Branch had already merged with Master before or had Master merged into it before so now we'll [Music] have double check make sure everything's working yes it is working and I'm going to push this so we'll see if you've never seen how a pool request Works basically you you can see the uh merge completed right there pretty much real time if I go get push origin Master to push it out to GitHub now it's pushed there and I can't remember if it refreshes automatically or if I have to refresh the page I can't remember let me try a page refresh basically what should happen is it should say merged yep there we go it says merged so I guess you have uh not sure if you have to wait for the refresh for some reason I thought I'd seen it just happen automatically before but maybe I didn't see that maybe I don't know what I'm talking about all right so that's another pull request so thank you uh for um for got a lot of pool requests for this project so far a lot of really good ones so I really appreciate that and let me show let me just thr up on the screen really quick the contributors so far so here we go here's our contributors so thank you to everyone who has contributed and actually yeah yeah that's everybody okay okay so let's continue on on with our layout uh so I think I've decided the way I want to do this is just run through and get the base layout for every page and then I'll go in and work on uh just the details um yeah I think it would be easier that way I'll get an idea for when we reuse things so when I go to handle changing the styles to make it work I'll have a better idea of you know if I change a style globally how it will affect another page um and then otherwise if I go Page by page I might decide to change style globally and then later on have to you know edit it and so it could end up being a bit more messy uh than it needs to be uh in the in the CSS so let's move on so this page is basically how we want it with the exception of I mean obviously this is still Lura myum text and everything but we'll we'll fill that in um logos I'm going to skip logos for now because that's going to be difficult so uh I I don't know it won't be that difficult it's not like we've never done anything like that before in react uh because we have um but it's just going to be a lot and since I want to keep it short today I'm not going to get into that uh so the posters View we got to bring up our uh the project as it currently stands uh the current live version so we can see what we're what we need to to build out all right on my other screen I'm bringing it up and I'll just pull it over when it's ready oh also I am broadcasting on Instagram so uh looks like got some people watching including my wife so hey thanks for watching um actually I showed um I showed my kids one of the Instagram videos of me doing this and they were like the baby was just staring and smiling she was like amazed that I was in the phone and also sitting right there so that was pretty fun all right so here's what we have currently live and uh this is behind a uh like a password uh password protected site so sorry you can't check this out uh right now it's not there's not really anything private in here that would require having a password but we just that's how it was set up uh so the new one won't require a password and what we looking at posters okay so we're just going to need wow this will be easy so basically the same thing that we did on the homepage except a diff little bit different uh organization of the cards uh so we're going to go two uh two columns and three rows so that's going to be super easy we can copy and paste a lot of what we did for home so I'm going to throw home actually I already have it over there cool so we have home on this side so we could easily copy it [Music] and posters there we go let's bring up posters so I'm going to copy all of this oops just double check okay all right so I'm going to copy that and we're just going to have to change around the columns a little bit uh so right [Music] now we going need to change all these m4s to uh we need them to be m2s and I do want to change up these rows so we only had two rows before and now I want three rows uh so I'm going to copy this and we need one two and then after this second uh column we're going to put in uh this row we also need to close out the first row so we're going to put a closing dig div tag all right so now we've started our row we don't have to close that because we'll just we're using the closing div that was in the other one so we can just delete this row right one two actually we might have to add another one let me keep keep the straight my head so we have one two in the first row and that is properly closed good row two one let's get rid of that yeah okay row two one two and close it out and then finally one more one more row and that is all that one is already closed out so this should work let's save it and no error syntax error okay what did we do um okay I probably just forgot to yeah I didn't copy this stuff at the bottom so we just need to close that uh return and our render No it should work no oh we didn't didn't copy that either so we need to import our components that we're using so we need to import that from Material UI let's save it now now will it work yay okay so it works it doesn't look exactly like we wanted to but we have the number of cards that we want so let me me see what's going on here uh so let me bring over a Dev tools so you can all see what's going on and if if you're checking out the site uh using the link that I shared to engr uh you could inspect this as well if you want to all right so let's see we have the container the row The Columns oh I I know why CU I set M2 all right I'm sure you all caught that mistake and I just haven't looked at the live chat for a while uh but my mistake was I put M2 in my mind I was thinking like I wanted it to be half half of the page and so for some reason it made sense to me that two was somehow half but really the way it works is that you need to specify the number of columns you wanted to take up out of 12 columns so 12 would be full width so I need to do six these are the materialized column classes uh so that should work now there we go now we have what we wanted and all right so that's it so we're good this page layout is fine like I said I'm I'm not going to worry about this we can already see uh having some sort of you know padding up here is going to be necessary probably for every page so that's why I wasn't really worried about doing it at first uh until we get everything laid out and then I can see like okay well what element is going to be the best to put that padding on that'll apply everywhere we need it uh and if there's somewhere where we don't need it then uh we want to make sure it won't apply there so let's move on posters uh letterhead let's see actually I just remembered I have my Pomodoro Timer and I keep forgetting to use it so uh I'm going to put that on there I don't think I mentioned this uh yesterday the day before but somebody made a Pomodoro Timer in Java like a desktop Pomodoro Timer and sent it to me to try out so I haven't got gotten a chance to try it out yet uh but maybe I'll I'll try it out and uh I think I want to try it out on my laptop and not on my work computer because well like the IT department gets a little bit upset about downloading things so not that I suspect anything from this app or the guy that sent me the app but uh just so that I I don't possibly get in trouble I'm going to try it out on my laptop see how it is and uh maybe maybe then install it here and show you all uh but let's check out what the letterhead view is supposed to look like and let's go back back letterhead oh okay so it seems like all right not too bad I have letterhead view is just some text and then each one of these is a card and so this is just an image all right so we'll just import the the cards we'll leave the media section of the card we need the title section and then we need the um the action bar section of the card uh so they'll be a little bit different than the cards that we just used on the last page but the good news is I mean none of these are components that are foreign to material design so uh they all they they are all available for us to use uh so we probably won't need to customize too much cool move that to the side and let's check out this where we at letterhead okay so within letterhead let's create actually let me bring in one two three four let me bring in what we just did for the posters because we we're going to we're going to want uh rows of Two And since we already have some rows of two then why not use them so we are going to have to change the card significantly but at least we can keep all of the uh the column classes uh pretty much as is we'll just delete that last row so we'll take this row and get rid of it great and then let's import uh not only this we'll import that uh we will no longer need the card text so we'll get rid of that and then we'll check out the documentation for material UI and the cards and we need to add in card actions and card media media and then we're going to take out card text we don't need that or actually let's let's do this put that we'll make that card actions get rid of all this lur myome there we go and then let's check out the docks to see how we need to do this so within card action we need a flat button so let's bring in that flat button let's see how that looks yeah that's that's pretty much what we want so let's bring in the flat button and then we'll also bring in this action and we only need one action so I'm only going to bring in one of these components there we go so we have our button the last thing we need to bring in is is this card media so let's check out how it's done here uh so card media let's pull this in I don't really want the overlay though how do they do that no we're not going to use the overlay but we are obviously going to have an image and this image is not going to work you know it's so we don't even have an images folder so we'll pull in um we'll pull in a photo from somewhere else uh but we want to place that above the title oops and I should have been doing this all along there we go paste that in and I'll I'll copy this as soon as I remove this stuff so I don't want oh that's interesting uh just want to want to show you all this because it's interesting so the props the overlay prop we're actually passing in a react component which is which is cool I don't think I've ever done that before uh so we're actually passing in another component with its own props uh as the props for the card media I I don't know didn't know you could do that that's really cool okay so let's bring this up and our image all right let's see what did we try to use before uh that didn't work was it it was the Bill Murray stock photos didn't work right I think it was a Coors issue so we're not going to be able to use that unfortunately I'd love to be able to use Bill Murray so I think I'm just going to use unsplash so we can go to unsplash and I'm going to check the proper Dimensions here for that image uh so what dimensions are we using five 9 by 659 is that really what dimensions I used 509 I mean I'm sure it's it's obviously responsive so it's going to get bigger or smaller but 600 by 766 was the original like how do I had to have gotten an image like pre-made like that because I I can't I don't see how I would have made an image like that 600 by 776 okay yeah so let's get an image that's 600 by 776 so I want to get a random image because that's fun and then you don't get as bored looking at it and let's pop that in here and I can never remember which one's width and which one's height for this all right so this is a 2 by3 so that must mean two is the height and 300 is width all right so the height was now I can't even remember 600 by 776 okay so let's do 600 all right let's let's try that let's see how this works uh oops where we at oh no it looks like I did some bad copy and pasting there let's check out what the problem is all right that should fix it that should be good uh I want to check to make sure our URL Works before I copy it h looks like it didn't what's the problem that's odd I'm not even there we go cool just took a little while to uh to come in all all right so now that we know that works we're going to copy this as well and let's see oh no it broke how did it work the last time and break this uh you know what I probably yeah I click the um the button to add another one I I still don't know why that would cause it to be broken but um I did add another image when I need to oh now I'm getting a Corsair that's weird that I didn't get one before and now I'm getting one let me try let's see can you all see the images over enro okay all right cool I'm seeing it now uh no there I don't like how the random image gives you the same random image since you're you know you're making a call for all of it if you have it I think think if you have the components like loading in at at different times you can get them to have different uh images I've actually I've done it before where um uh I'd have it pick a random number and then use that to grab an image so I just so that I could get random images uh all in the same load but in any case it doesn't really matter this is all what we needed to see was just to get the dimensions uh let's move it around just a bit uh cool all right it looks like yeah we def I noticed this yesterday I'm just checking it again so definitely have to do something about the padding in here but it'll be a little tricky because so we have proper padding between rows this is our row break so I'd like to have consistent padding so we may have to have some media queries there uh to make sure that you know if we're going to add padding let's say to each column we want to make sure we take it away from the row right now I'm not worried about adjusting anything the last thing we need to do is add some text at the top so it looked like looked here like we just had two paragraphs of text so let's just throw in two paragraphs inside we're going to put it inside another row uh and then we're going to have a column a full width column and then we'll put two uh paragraphs into that column and I'm going to use I think it was Sarah that recommended uh the uh Bible ipsum site to use for laurum ipsum so I think we' use Samuel Jackson ipsum I've used bacon ipsum before but uh since this is a Catholic University I think it would be better if I use Bible ipsum and I think the people that I work for would like it better if I use Bible ipsum as opposed to Samuel Jackson quotes so actually I just saw the uh the first quote that I saw in Bible lipom on my other screen uh actually like spells out the um one one of the words for God that uh is to some groups of Jewish people is as actually you're not really supposed to spell that out or say it so I'm going to use a different verse uh out of respect for that and not not use that oh man I'm seeing it in so many places why is it giving me this is actually really weird uh the the Bible ipsum generator is giving me the um the same I would assume it would give me like random stuff but it's giving me the same stuff let's see if I'd put in two if it'll be different no it's the same thing refresh refresh no I want a different quote am I missing something all right all right I'll try Bible LIF him a different day because I don't want to spend a lot of time on that I mean you would I you would assume that you would get different Bible quotes right I might I might have to make my own that sounds like a good side project I'll uh I'll make my own because you're supposed what is it free code Camp has the random quote generator project so I'm sure there's some API out there that you can get Bible quotes from uh or like scrape a site or something so let's add in let's just add in what we know we need and just generate some lur myum oops we're going to do a div with a class name I'm want to see cool uh with the class name of oops row and we also want a div with a class name of column and we want to make that an S12 uh and that means if you're using materialized that means on small screens it's going to take up 12 columns and I want it always to take up 12 columns so I'm not going to add anything else otherwise you would add like in this case we added on medium screens the M we wanted only to take up six out of the 12 columns so it be 50% width now we're going to add our P tag and eventually uh like I said before I'll probably put in the flow text class but I need to bring that in for materialized so I'm not going to look for it right now uh but I like the flow text uh since I did this site originally I've read some articles on proper font size and I'm I'm convinced now that a larger font size is almost always better uh for readability so uh I I use currently on on newer sites that I'm making I use a much larger font size than I had previously and the flow text is a nice uh responsive uh font size it makes sure that it's a decent size all right so I can generate Laura msum whoa that's long string let me I was hoping there'd be some setting that I could get to really easily to wrap that I might have to actually go into preferences I thought there was a WAP setting am I missing it oh here we go editor settings there we go all right so soft WP somebody had mentioned soft WP in a comment or something uh and I think it was I think it was Nathaniel so anyway yeah see how much nicer that is so thanks Nathaniel for bringing that up uh maybe I have it maybe it's on my laptop but I thought I had that enabled somewhere but I guess not so just we're going to throw in the two paragraphs and all right cool so that looks looks like we have the layout uh that we want yep obviously we're going to change change a little bit we don't need this card subtitle actually yeah let's take that out I didn't realize I had the card subtitle in there oh yeah actually the the more I look at these uh components from Material UI the more I like them a lot of these like options are really nice like things that I would build myself pretty much every time like adding a subtitle you know I would would just add a span and you know have to uh set all the properties to make it look like that it's really cool that that's built in uh but we don't want a subtitle right now so we're going to take it out so I'm thinking that uh once I once I get the hang of M material UI and really start to learn uh how it works I I think I will like it all right cool so that page is done let's see that was letter Ed is share a story next is that next for us here share a story okay so currently for share a story what we have is we actually have a card with a bunch of text and a form h I'm not exactly sure that I want to keep this in a card uh so I'm going to go I haven't checked the uh live chat in a while so I am going to check back here but I'm going to ask a question first and hopefully you all can help me uh when it comes to material design generally you you don't use cards in this way right you would if you have pieces of content you know that that are going to be separate and like it's okay to put those in cards but usually like in this case I'm essentially using the card as a container for everything that's on this page with the exception of the the header uh so I don't really think this is the proper way to use it I think it may be better in this case to Simply put this right on uh the the screen kind of the the paper in the background uh so I don't know what do you all think we could try to to put this on the screen over here and see how it looks um we'll have to bring in we haven't worked with any form components yet so we'll have to bring that in so I think I think it's worth a try uh but let me um let me see check the time yeah actually uh at this point I'm going to stop and I'm going to go over to the live chat and that'll probably be all we get in today uh so we've done a a couple of views the layout for it the next thing we probably do is bring in some of these uh components for forms and I'm at least going to try out leaving out the card for this uh just to kind of more properly stick to the uh material design as spec so when I did this site I was I was just starting out with learning material design so I kind of use cards for everything okay so now uh if you were just here for the code part of it thanks for watching I'm going to do a Q&A session now before I finish up so if you're not interested in sticking around for the questions and answers uh I'll see I'll I'll be back tomorrow morning uh with another live stream so um if if you can uh join me then otherwise if you have a question uh put it in the live chat uh or you can ask me on any social media thing uh a lot of people ask me things on Twitter or you can put it in a uh comment uh on the video so let me scroll up to the top and I'm just going to go down through actually I'm going to see I'm going to scroll back down the bottom just to see if you all answered uh my question all right Rohan says an edgo edge card okay all right John Hansen says that suggest a story card looks too much like a modal and so its function looks like a person would maybe want to dismiss it uh so yes resign okay cool I I didn't think about that but now that you said it it does kind of look like it could be a modal um cool okay uh caban says I think with a big enough font and resp responsive container it would look just fine on the the paper on the back if you're not sure what we're talking about like when I say paper in material design language this background so behind the card is is the paper right and certain things sit normally on the paper and this is what I didn't know when I made this site uh but like the print the copy the text here this font is is considered ink okay so ink goes directly onto a paper it has no height to it right that's why we don't put box or we don't put uh Shadows on on text in material design all right because it sits on the paper the same thing like with an image normally an image sits flat all right that's that's ink uh but then if certain things we can bring out all right like a like a card but it would be better like we don't want to put everything on the card then it it's it's weird so uh it makes it implies almost that we could move the card out or get rid of it there's something behind it so anyway that I'm no expert on material design but at least that's my understanding so if you hear me say paper I basically just mean the background uh that you see um I mean you can see the entire background here so this is would be be the paper okay and Rohan says it feels like the description text is too large so are you you talking about this text I'm not sure but anyway yeah this is this text that I have at the top of these Pages might entirely go away uh it might end up I'd think I'd rather go with a really small header and then move these as to be like uh titles to each page so down here uh we'll see I I'm I want to see how it looks kind of mess around with it okay so thanks for your uh your feedback uh that was good feedback um definitely agree with it uh so now I'm going to go to the top and try to answer some questions and um let's see also I do have people watching on the Instagram Stream So if you're watching on Instagram and you're not sure what's going on I just was doing some live coding on the free code Camp YouTube channel if you do have a question you can go join the live chat on there or you could put it in Instagram and I'll I'll answer it from there as well okay so Zach asks what tech does free code Camp challenges use wondering how hard it is to create your own challenges on your own site actually that's a good question I'm not really sure but there was an article on medium that I just read earlier today about um a company that actually created their own version of free code Camp so that they could host code challenges and have have it be a little bit more fair because on free code Camp basically you could you could look up all the answers they're available um so they totally like cloned it all and it's on GitHub I wish I still had the article open I closed it out and I had the GitHub repo open right before and I just closed it out so I don't have the link ready for you but if you uh check it out that the article was something like they introduced I think it was in was it Singapore I can't remember for sure but um they had introduced free code Camp to like thousands of people um during the Google IO um event that they had over there I think it's in the free code Camp medium uh page so if you just scroll through there it should be near the top but anyway that'll give you an idea cuz you can check out their repo and see what they did but I don't know off hand I I was not involved I guess you could just check out the free code Camp repo too I don't know what I was thinking yeah everything in free code Camp is open source so you can check out the uh GitHub repo for that as well um but I had I was not involved at all in the making uh of any of the uh free code Camp challenges uh so I I haven't even um submitted any pool requests to help out with that so it would be cool to do so I've just been as you all know uh pretty busy with with the work that I'm doing right now uh Rohan asks uh so we're going with uh V1 alpha or the the zero time so the other version so uh I think I'm going to stick with the older version of material UI uh just because like what is this day six I had hoped to be farther along by day six and I spent a lot more time just trying to figure out what version we're going to use and then trying to get the beta version to work so I don't want to deal with that anymore I think the other version is it's way more stable it's been used by more people there's a much higher chance of me being able to find answers to issues that I have and I don't really have that with the beta version so it'd be really cool to use the beta version in the future but but I just I don't think I'm going to be able to do it for this project so all the effort that's put into making uh the beta version work by you all by your pull requests is not going to go to waste because I really do want to try to use it on a future project so when that happens I'll go back and pull out a lot of the the stuff that was done on that beta branch that we have for this project now so that will be helpful in the future but I just want to kind of let it mature a little bit before I before I use it uh Isaiah says I am having difficulty rendering a PDF in a react react component that's interesting I've I've never attempted to render a PDF and a react component so I'm not really sure that I could um offer you any advice on that right now but I am really interested in seeing it so uh if you have some code on GitHub where you're trying to do that please send me a link to that uh you know send me a direct message in Twitter if you want and um I'll try to get to it when I can to tell you the truth right now I'm a little bit behind on getting to the code and stuff that people want me to review on um on Twitter so if you do send me something to review I will definitely do my best to get to it at some point but there's there's a little bit of a waiting list right now uh so don't be afraid to send it uh but just if you need something reviewed like immediately that's it's probably just not going to happen uh and the the person in the chat with the uh with the handle LOL LOL says when I said the stream was going to be short they said is it because I'm watching The Stream you make it shorter not at all not at all it has to be short and I explained earlier why it has to be short so I have to I have to get somewhere it's really important uh that I that I get somewhere um at this point it's it's a matter of Professional Pride that I figure out what is going on what's going wrong with my uh uh the site that I built and fix it and I really hope that I can go there and say no it's the browser it wasn't me at all that would be the best case scenario because then it wouldn't have been my fault this entire time uh but even if it is my fault and there's some bug that I don't know about that would still be cool because then at least I'd figure it out and and be able to fix it okay about halfway through the live chat now okay so I see Sebastian saying some some stuff about the um the mouse over and stuff so yeah I'm not sure anyway yeah Sebastian send me a message on Twitter or something about that because I'm not exactly sure what's going on in the live chat and I know I'm going to have to stop so I I really don't have time to talk about it right now because I'm going to have to end the stream soon um someone that just has a string so jhk K jhk says what is a card tag yeah so it's not a standard it's not a standard tag right yeah it's no it's not a standard card it's a it's a react component it's a custom component so Sebastian answered that uh but in case anyone else was wondering uh the HTML yeah it it has a lot of non-standard tags so in my editor these tags are are highlighted a different color than the regular tags so you'll be able to tell um you know that these are special ones uh but they're definitely not not your normal tags they're react components uh uh evance says you right it shows up automatically okay so maybe I just needed to be more patient uh in this is in regard I think to the merge uh whenever it it displays that your um pool request has actually been merged so I I just didn't wait long enough uh Maxime is asking uh what do you what do you use and and not just to me to everybody in the Stream uh what do you use to uglify uh es6 JS okay so John says uh John samuda says grunt uh can trib uglify Maxim us gulp um yeah there's a gulp uglify you'd probably want to use Babel first so I don't know if anybody said that but yeah if you want to do es6 I mean if you want to keep es6 and just uglify your es6 and not trans pilot I'm not really sure uh what you would want to do but if you want to transpile es6 to es5 for browser compatibility and then uglify it then maybe that's a step you need to put like in your uh in your workflow use like I think there's a Gul Babble so uh you want to use G Babble first trans pilot and then uglify the code that's been uh transpiled so hopefully that makes sense um yeah otherwise I don't really know um I don't really know does Babel have something like that built in I don't know I'm not sure but it would be somewhat convenient I guess if it was all right so the uh the stream on Instagram just ended so um thanks uh if you're if you wanted to see my face today you missed it no but the uh uh the Instagram uh stream will be available for 24 hours okay Isaiah asked again about rendering the PDF in the react component I'm assuming that that was before I I talked about how like I I honestly really don't know uh how to do that but uh you send me your link to your repo I could at least check it out okay Maxime said uh that it was for a node app so es6 was supported so it didn't really have to worry about transpiling so okay uh Patrick said react Inception so I guess that was when we were I was talking about passing in a component um which I think I got rid of that but yeah yeah it is like react Inception all right Patrick said there's odd shifting happening uh to when toggle and un toogle the sidebar and watch layout let me check this out okay I'm not seeing any shifting happen here maybe I don't know maybe you were talking with someone else about their site in the live chat or possibly it's a different browser and so I'm not seeing it here uh Blake ask what time the stream will be tomorrow uh I'm thinking let me think I have a meeting at 11:30 so maybe around 10 eastern time maybe earlier depends on what time I get into work tomorrow uh so I'm not sure but probably at the latest I'll start the stream around 10:00 so at least I can get in like about an hour uh before I got to go to my meeting so uh that's that's what I'm thinking so I'll try to get in early schedule the stream uh so you all have a little bit of advanced notice but I don't really have like a set start time where I have to be here uh by so it it varies depending on like how many times I had to wake up uh with my kids in the middle of the night Alexander asked Jesse what would you recommend to improve react skills just started to use it um I would say if you're like really really beginner at react and just starting uh check out the react do the official react documentation their tutorial uh some of it might be kind of too advanced but you know you'll get a rough idea of what's going on and then I would I would use um code academies has like a browser based course uh and that's kind of a nice introduction as well there's some YouTube videos that would be helpful so I think learn code academy is the YouTube channel I think they have some uh some beginning React videos as well that can be kind of helpful they're a little bit dated though so just kind of keep that in mind like you'll get a good understanding of what react is but some of the syntax there might be better ways to do it now uh and then if you're willing to spend some money for a course so far the Udacity react Nano degree uh that I'm taking currently has been really good so um I I recommend that Rohan says we need an update tomorrow what's the issue browser bug it's a mystery yeah the issue is completely a mystery to me as to why this isn't working so evidently from what I can gather just from a ton of emails uh and months of trying to figure out what's Happening Here is is um the way it works it's a passwordless login so I'm I'm talking about this uh meeting that I'm about to have in a few minutes and it's not really a meeting it's me G to I'm going to go check out this person's computer um I built a a website that has a passwordless login system so you enter your email address and it has to be a franciscan.edu email address you enter that in and then it sends you an email with the link you click the link and you're logged in and it saves your login into local storage in your browser and you stay logged in for a year Unless somehow you delete the local storage when this person clicks the link to log in it takes him to a blank page at least that's that's what I've been told so I want to go check it out now the the only reason I can think of that that's happening is a JavaScript error early on and so I'm guessing that it's either JavaScript is disabled on his browser for some reason which you would think would someone would know but I actually went to somebody else's office and checked their's their computer out because a similar thing was happening and that was the issue JavaScript was somehow disabled and they have no idea how it happened so it could be that or the issue could be they're using a really outdated browser so those are my best guesses right now but I will definitely fill you in tomorrow on uh on what I find out all right Patrick says react PDF component looks simple haven't used it but you might take a look at at that so isaas um was asking about PDFs and rendering PDFs and react so that's really cool I didn't even realize that there was a way to do that uh John samuda says install another browser uh to test that's also the problem so I don't have access to install any on anyone's computers other than my own uh because all the computers are basically on lock my computer's not on lockdown because I'm a developer and that doesn't really make sense to lock my computer down but everybody else on campus can't install anything or update anything on their own without it so I'm not really going to even have a chance to do updates I'd have to call someone from the help desk here at the University and have them do it and I don't know it's kind of towards the end of the day so I'm not even sure if that's going to be reasonable to expect them uh to be able to you know update something or install something for me right away okay Alberto says check if it is Internet Explorer check compatibility mode see make sure they're not running in compatibility mode okay that's good to know uh I will definitely check that if I need to Rohan says um Edge is actually good with standards unlike IE um yeah I agree Edge is way better than Internet Explorer Rowan also says Safari is worse nowadays yeah I agree probably my my least favorite browser that's like a modern browser uh and I don't include iie in that anymore since they came out with Edge is definitely Safari speak I've had more issues with things not working in Safari than with pretty much any other browser okay so Patrick says I'm not seeing the issue with the layout on a Mac uh when it's scrolling uh because the scroll bar doesn't change the width so I'll have to check that out uh I'll use browser stack to check it out um probably tomorrow uh so thanks for that Patrick hopefully that's not going to be like a really big issue okay all right I've gotten to the end of the live chat and definitely have to have to get ready and go now but thank you all for watching and uh helping out uh in the live chat and thank you for all the uh contributions and pool requests and everything I really appreciate that I'll be back tomorrow probably around around 10 a.m. eastern time so different time uh than normal but I'll I'll put out a tweet and I'll schedule it so you should get a notification through YouTube as well if you're subscribed to this channel um so I guess I'll I'll see you soon I I'll see you in the morning and uh have a great day