Cool Kids Code In Javascript (with SEXY CODING FOOTAGE)


What’s poppin guys, it’s very special day. It is Saturday in the morning, and we have a special guest Okay, no we don’t have special guests. It’s only me today, but you know we can still have fun with just me I Don’t have any plans for today. You know none of my friends invited me to anything So yeah So yeah, let’s go write a let’s go write a web app. You know cuz cuz there’s nothing else to do apparently but come on Okay all right, so let’s write a simple web app. I don’t know what I want to build All right, so usually what I like to do. I like to start off with a Template so usually what I do is I like to put it on Heroku I like to host on Heroku cuz it’s just a lot faster And I don’t need to think about the servers and stuff like that so I made a template called nodejs template and what I’m gonna do is I’m gonna get clone it on to my computer, and then maybe rename it to something else maybe called project Joma No project fine Jolla a wife And then let’s go here as you can see let’s see if it works. No js’ index something’s wrong cannot find module That is because we have to npm install first so this will install all the packages that my template uses It’s like a package dot JSON JSON Okay But yeah, so we got expressed. Ejs okay. That’s cool cool cool All right, so Express is basically a web framework, and yeah, so let’s try it out No js’ the index listening. Let’s see localhost 5000 Seems to work real well all right, and then next I kind of figure how to do this, but next I’m gonna deploy to Heroku so Heroku create Get push to Heroku Come on come on yeah, yeah compressing done launching oh They gave me this URL fast hollows all right, and then let’s see if it works Mm-hmm okay, cool all right Jonah is a douche Sounds about right so as you can see now It’s already deployed to vas hollow, so now I have the deployment ready, so I am ready to code But I’m not a coder not a Lapras all right so now I have to think about why I don’t want to build hmm So usually I like to think of a problem that I have and then find a solution for it So all I have to do is find my most annoying problem. I Need a girlfriend All right, I’m gonna take a break. I’m gonna go get lunch, but I’ll think about it nothing about what to build Lonely I’m mr.. Lonely I have nobody For my Mr.. Lonely Wish I had someone To call on the whole Soldier away from Thrun a wish of mine That’s one lonely Mr. Lonely I wish that I All right, okay? so if I bought it and I Kinda want to build something for me and my Non-existent girlfriend so that we can watch YouTube videos together, and it will sync together You know for example if I play, and I pause or I stop the video It’s gonna do the same to her or if she does the same thing now this probably already exists, but it’s good practice you know so Alright, let’s start building this out Alright so first we’re gonna take off this abomination of a page okay? So we’re gonna take off this disgusting picture Okay, take this off Mm-hmm okay, and the next what we’re gonna do is we’re gonna learn about the YouTube player embedded Player JavaScript, okay, and then we read the documentation and see how we use it Okay see what this looks like Cool all right so now we have a YouTube player and what I’m gonna do is I’m gonna learn about how to You know use the JavaScript to play stop pause and also I’ll I’ll make it a little bit more pretty alright first we’re just gonna make this a Little bit prettier change that to 720 change this to 480 I see what it looks like Okay, it’s a little bit bigger cool. I want to change it to this pretty video Because I like to you know I like to have fun while I code you know, but now I’m not a coder though I’m very nice. Okay. Oh wow Okay, and oh, I don’t like the margin I think I’m just gonna increase the margin a little bit, so let’s go to CSS I mean There’s no more headshot. Let’s put this to the player and then margin topic Let’s chain it to maybe 50 see if that lets see that looks good Okay that looks a little bit better All right, so this is it before the aesthetic Just so that I can code better, so I have more motivation to code now and then What I’m gonna. Do now is I’m gonna look at this API I’m gonna figure out a way to send these information to my server so that I can sync it between all the people on All the people on the website watching the player So after looking at the API, I realize that they don’t have everything I need it’s because sometimes I kind of just want to send the request to play or to stop to my server before they actually play but the YouTube player doesn’t allow me to do that so I’m going to have to make a Controller that is an extra layer above the YouTube player so that I could send a request to my server Without it having to actually play so I do that so that I can actually Synchronize both of the users while they watch it so the first thing of what I that is I stripped out all the YouTube player stuff And how I did that was I read I read the documentation And I learned that you can take out the controls by control equals zero disable keyboard shortcuts modest branding and stuff like that But now we got to add our own stuff, so what we’re gonna Do is we’re gonna add some buttons, so I you just go let’s see bootstrap button good if you con and Then I just copy this So right under the player. I’m gonna make a new div called the player controls or something All right Got a button here Maybe add another button so I want to add a play button Play and I want to add the pause button Okay, that’s what looks like All right cool, so we got these two buttons now and now we need a timeline Yeah We need a timeline because we need the user we need to allow the user to skip around and also to know where they are So yeah, let’s just add that real quick I swear And then that’s it now we got our bar, and it seems to work pretty well Mm-hmm yeah, let’s see if we started yeah, and then it starts the video, and yeah, it seems pretty accurate to me All right Unfortunately, we’re out of time because it’s already been almost 10 minutes So next steps the next steps would be to connect the back end and the front end so what I’m gonna Do is I’m gonna connect them using WebSockets to communicate with each other if you don’t know what WebSockets are don’t worry about it I’ll explain on the next video, so yeah So if you liked this video don’t forget to give it a like and I will comment For the first 30 minutes of releasing this video so yeah comment and don’t forget to press the bell button for the notification So that next time you could comment, and I’ll reply Alright, so I hope you enjoyed this and Pisa

100 Comments

Add a Comment

Your email address will not be published. Required fields are marked *