Complete Intro to Web Development, v2 Web Development Tools

Transcript from the "Web Development Tools" Lesson

[00:00:00]
>> If we're gonna build a house, a craftsperson needs their tools, right? So I'm gonna go through here, I'm going to basically talk a little about what I'm going to be using, and make some recommendations to you of good tools, I think, to start with. That being said, if you have tools that you already like or that you want to use, I will try to bet as best as I can, with my knowledge, accommodate all the tools that I have knowledge of.

[00:00:28] That being said, if you're gonna be used tools that are esoteric then you are on your own [LAUGH]. So, I am using macOS today, if you can't tell. I will do my best to try and explain Windows as well. That's quite funny, cuz I work at Microsoft and I do not use Windows [LAUGH].

[00:00:51] So, I will do my best, specifically with bash and windows, it gets really sketchy really quickly, so we will work through it together. I think is the answer to that question, anyway, we'll get there. If you're on Linux, I have a little bit more knowledge there of. And what's nice about using Linux it's it's pretty similar to Mac anyway, so if you're using Linux, you should be able to follow along more or less with what I'm doing.

[00:01:20] Also, I expect if you're using Linux that you already have some of that pre existing knowledge anyway. So asking the developer about their tools is like the giant mistake because they will rant to you for hours about why they are right and why everyone else is using terrible tools.

[00:01:38] I don't know why we felt this need to validate ourselves, I'm using this tool and you have to use it too, or you have to use this as well or you're an idiot. I don't know, some dumb stuff like that. And everyone's trying to use like the latest shiny stuff, just find tools that work for you.

[00:01:55] If something works for you and speaks to you, then just go with that, right? And that's awesome, and I really encourage you to go down that, you don't have to use what's new, you don't have to use what's shiny, just use what works for you. And be open minded, right?

[00:02:10] Do try new tools and see if they do work for you. And if you find yourself fighting your tools, then you should question your tools. That's the other thing as well. A little bit of investment in making sure that you have the best tools will go a long way.

[00:02:28] So you should always be kind of thinking about, how can I improve this. Okay. The first thing is we're gonna be building websites you need to choose what browser you're going to use. I'm using Firefox I'm a huge Mozilla fan just in general with their mission and how they're going about making the web a better place.

[00:02:50] So I will be using Firefox you are definitely welcome to use Chrome. I think most people will probably use Chrome. And that's okay too. Both of them are world-class browsers that have great developer tools as well as Safari and Edge. I don't know as much about Opera, [LAUGH] but definitely in this class I can speak really well to Edge Safari, Chrome and Firefox and I will be using Firefox.

[00:03:19] If you are using Safari, if that's what you're liking to use. I have this link here for you, make sure you enable the developer tools that's quite important. [LAUGH] Everything else they're just enabled by default, yeah. Safari you have to actually go check the boxes, I'm a developer, please show me the developer tools.

[00:03:40] Questions about that? Yeah,
>> Do you use Developer Edition at all Firefox or just a regular.
>> At work I actually use Nightly which is even more bleeding edge one than the Developer Edition. Today I'm just gonna be using the normal one. I don't actually really know the difference between all that, there's like four different versions of Firefox.

[00:04:04] It used to make a difference because the Nightly Developer one was so far ahead they had made so many changes to it. But as of maybe six months ago, they kind of merged that all together and now just the stable one is really great. Cool, good question. Anyone else?

[00:04:30] Okay, the editor. So this is the tool that you're going to be using to write code actually. There are many many options and this is probably the most contentious thing that you can ask someone is what editor do you use? Cuz everyone has an opinion and they're all terrible [LAUGH].

[00:04:52] I personally use Visual Studio Code. This is no surprise, cuz I do work at Microsoft and I work closely with the Visual Studio Code team. That being said, it is a fantastic editor. I'm a huge fan of it. I was actually using this before I even worked at LinkedIn.

[00:05:06] I used this when I was working at Netflix, so this is actually an opinion I held before I started working at Microsoft. The biggest thing that gave me pause about Visual Studio code when I was thinking about trying it is, I used to use Visual Studio when I was in college.

[00:05:26] And it is a huge just like it's a big program, it's very heavy. It takes a lot of resources. It's for writing, c++ and serious programming and things like that. And so I didn't wanna get back into that. But it turns out Visual Studio code, like the only thing that it really shares with that is the name.

[00:05:43] It's completely different. It's written totally different. It's a different code base. It's written in TypeScript, which is a flavor of JavaScript. It's totally different from Visual Studio. So I have a link on here. If you wanna download it. Highly recommend it. I'm a big fan. I would say beginner friendly as well, which is another reason that I recommend it to you.

[00:06:09] And there's a huge amount of plugins available for it as well. So if you have something that you want it to do, someone's probably written a plugin to help you do that as well, which is really cool. And the plugins are written in JavaScript, so if you have an idea of something that you want your editor to do, you can write the code yourself after this, right?

[00:06:26] Because you'll have the tool of JavaScript that you'll be able to use. If you're not feeling that, feel free to use Sublime Text 3, that's what I used for a decade [LAUGH], so I'm also very very familiar with Sublime, it is a great tool, it's very fast. That's what I liked about it, it opens files really quickly, it's very efficient.

[00:06:48] And there is Adam which I have not spent any time with. But there are people that do love it. It's written by GitHub. Sublime Text is written by just a guy that now he has two or three employees threaten, working with them as well. Atom and Visual Studio Code are 100% free.

[00:07:04] There's, not even like a premium tier. It's just a free tool, right? Sublime Text 3 is free to download and it's forever in trial mode, it has a trial that never expires. So I think once you buy, I think it's $80 if I remember correctly, and then it'll just stop showing an annoying pop up.

[00:07:24] That's all, whenever you start up the tool, it's worth paying. For me like I spent enough time looking at my editor, I've paid for sublime several times over and I probably should pay them more because they bought me a decade of productivity, which is worth something I suppose.

[00:07:40] If you want something more Visual Studio-esque, something a little bit more like Eclipse or NetBeans or something like that, there's a tool called WebStorm. I have not used it either. But it's a more complete suite of tools, I would say. I'm not gonna speak a lot more to it but it is not free you'd have to pay for it but the people that do use it, swear by it.

[00:08:02] So Feel free to check out WebStorm as well. Lastly, I'm going to state that these tools exist and that you should not use them [LAUGH] Unless you already use them. There's a tool called vim, and there's a tool called Emacs. These are command line tools, they're very difficult to use.

[00:08:22] There's someone far smarter than I am. And also, you will know everyone that uses them because they will tell you right, away that they use these things. I'm not upset, I'm not. I'm so sick of hearing about them. So anyway they exist, I'm gonna tell you, don't use them.

[00:08:44] Because the people that are already using them are gonna say screw you, I'm not gonna keep using them. And then everyone else hopefully will listen to me and not use them so. Any questions about that? I bet you there is someone in chat freaking out about this. Yep, knew it.

[00:09:00] [LAUGH] They're great tools, they just have a super steep learning curve. And that's not what you want to do today. You already have a mountain ahead of you.
>> Actually, most people are saying that BIM was a nightmare and a rabbit hole to go down. Not the other way around.

[00:09:17]
>> Yeah.
>> People are not defending it, for saying that there was a lot of wasted time.
>> The people that I talk, I'm sure people going to contradict me. But the people that I've talked to about is like it was a giant time suck and I kind of regret doing it.

[00:09:29] But now that I've done it, I am going to continue doing it right. That's more or less the sentiment about it. It's, it's really interesting to watch someone that's like a wizard of Emacs, like a Nina zakharchenko, the one of the other front of masters teachers that I used to work with, actually and now work with again.

[00:09:46] She's a wizard with Emacs. It's really crazy to watch the stuff that she can do super quickly or like the vim masters like Ryan Florence, like they just fly, right? I don't want to do that, I don't care. I don't wanna spend too much time. [LAUGH] So Yes, you should.

[00:10:01] That's another thing is like, tackle one mountain at a time, right? Like, don't try and learn an editor at the same time as you're doing, learning to code. Any other questions? Or assertions that vim is terrible, I'm listening. Okay, the terminal. So there's two things that I'm kind of separating out here.

[00:10:31] There's the shell and the emulator, and hopefully I can kind of explain the difference to you. So I'll just bring up my terminal here. Terminal looks like this, right? I'm sure most of you seen this, it's a little scary for new people a breach approaching code like this is the matrix, right?

[00:10:49] It's actually just like a really fancy File Explorer, or maybe it's a less fancy File Explorer. Let's go with that. Like this, right? Like you click on something, and like you click on here, it's the same thing with here. So I would just go to like, applications, right?

[00:11:06] And I can see what's inside of the application, which is nothing, that's was CD talks, right? And you can see like, what's in there, like, okay, I wanna go into web dev, right? You can see what's in there. We're going to spend an entire section on that, but that's what the terminal is right.

[00:11:25] So the emulator is actually like the window that you're running this thing in. So that would be in this case, I'm running it in something called iTerm, you do, it really doesn't actually matter too much. There's one built into Mac called terminal.app looks like this. And you can see here it is the same thing, right?

[00:11:49] So, that's what I'm trying to say here is it doesn't really matter what emulator that you use. So if you don't have anything installed, just go ahead and use terminal.app. It's actually I'm told it's the fastest, by far. [LAUGH] The reason why I continue using iTerm, is it does this thing where I can actually have two shells next to each other, and that's just really useful to me, so.

[00:12:19] So that is the emulator, it does not matter, so just pick one and go with it. So I'm using iTerm2 today. And the default Mac or terminal.app one is great. There's another one called hyper, which is like the hipster one to use at the moment. It is written in JavaScript which is pretty cool, the last time I used it, it was really slow so I just got sick of it went back iTerm.

[00:12:47] But I'm sure untold it's gotten better since then. So feel free to use hyper if you are on Windows, I'm told that HyperX also works really well for Windows, and there's one called CMDER, I don't know anything about it. So use that at your own risk. If you're on Linux, I would just suggest use whatever the one that Linux came with, whatever your flavor of Linux came with.

[00:13:12] With in other words, I have no idea. [LAUGH] So any one of these totally fine does not matter. For the shells that's actually like what the code that's running inside the emulator, right, so you have iTerm and then iTerm is running something inside of it right? That's called the shell.

[00:13:36] And it does matter which shell you're using, use bash please today. If you're using something else, you are on your own and I do not know how to work in z, sh or any of the other ones. Actually I quite like fish which is another one but we are not using it because no one else uses fish besides me.

[00:13:56] So we're using using fish, okay, cool. So fish is cool, anyway, just use bash. We're using bash today. And the reason being is that everytime that you Google something, the answer is always written in bash, 100% of the time. No one writes in anything else besides bash. So that's a really good reason to use bash, it's ubiquitous everywhere.

[00:14:25] Okay, so, that's you terminal tool. We will get much more into that probably more towards the end of tomorrow. Lastly, just like you should be really careful where you get your news from, you should also be really careful what developer resources you are looking at, when you are Googling things.

[00:14:45] And so I wanted to give you a few that I trust personally. That whenever I'm googling something, these are the first resources that I see if they have anything on it. So, my favorite developer resource of all time that I love and I literally have it open all the time, like, I'm not exaggerating is literally always open on my laptop is the MDN.

[00:15:07] It used to stand for Mozilla Developer Network and now it's actually they've just said it now it's called MDN. It doesn't stand for anything more, it's just called MDN. It's from Mozilla, it's at developer.mozilla.org. And it is just it's the Bible, right? It's like it's everything about, web programming in one spot.

[00:15:27] So if I have a question about, let's say, h1s, you just click here and it just has it's complete, so it's going to have everything on here. So, but it's also approachable, which is kind of rare. It's either something is complete and complicated usually, or it's not complete and simple.

[00:15:53] And they kind of strike a good balance here. So MDN is just the best, anything that you can always trust something that's on the MDN So yeah, great, great resource. There's another one out there called w3schools that usually comes up before the MDN. And I would suggest that you skip w3schools and go to the MDN.

[00:16:17] I am a huge fan of CSS tricks. This is specifically very helpful for CSS and HTML. But they also have really good JavaScript resources as well. And they also have amazing articles, just in generals like a publication. But they have here, like Flexbox, because that's usually what it is.

[00:16:40] So, like for example, we're going to be learning about flex later today. And they had this amazing resource of like, how to do flex really well and it has like diagrams and it's really, really well written. So for learning about CSS in HTML, I definitely suggest CSS tricks.

[00:17:02] For video content, there's a website called Frontend Masters, it's okay. I give it like a 4 out of 10. I'm just kidding, it's great, I like it a lot. I recommend a ton of resources in here, not because they pay me to or anything like that. I mean, they could.

[00:17:18] You could. [LAUGH] But because I legitimately think it's awesome content, like I've watched a bunch of stuff on there myself, the kind of teachers that they get are really great. So, if it's on Frontend Masters, you can pretty well guarantee it's gonna be good stuff. It's worth watching.

[00:17:37] Lastly, if I'm working like with a library or framework or some like specific piece of technology, it's usually a good idea to go directly to the documentation to read it. So if I'm working with like react, I'll usually go to the react documentation. And it's good to prefer those because the developers will tend to keep those things up to date, whereas like a Stack Overflow answer might be date.

[00:17:56] So, that's a good thing to keep in mind as well. And that being also, I don't have on here, but Stack Overflow actually usually is a pretty good resource as well. Because usually, like, even as things progress, people will re answer questions and then upload them and things like that.

[00:18:12] So, Stack Overflow is also a good place to get questions answered. Frontend Masters does this really cool thing called the Frontend Handbook. It's written by this guy named Cody Lindley. He's a really smart guy. And it's just kind of like a huge overview of like the entire typography of the Frontend development world.

[00:18:35] And it's just great. There's, it's super exhaustive, like they go over a bunch of stuff. It's, yeah, it's great. So it's also good to just kind of peruse and go through and see what's in there. And it's free like, which is awesome as well. Cool. Any questions about any of the tools that I've proposed?

[00:19:04]
>> VS code also has terminal built into it.
>> That's a good point. In fact, that's great point. If you go into VS code, do I have VS code open here? So this is VS code. This is what it looks like. And I think it's control Tilda, yeah, it brings up this terminal down here in the bottom.

[00:19:28] And you can actually use the terminal directly built into VS code as well. So, good point.
>> Yeah, I was asking if we needed to download bash.
>> Which is a great question. Do we need to download bash? The answer to that question is no, because, every operating system should already have bash installed including Mac Linux and even windows 10 now actually does have it.

[00:19:58] If you are using Windows 10, There are these steps right here, that if you click on it, it'll take you to a link on the Microsoft docs, so it will take you to how to enable it for Windows 10. If you're on anything before windows 10, you are out, unfortunately out of luck.

[00:20:17] [LAUGH] So the only thing here that you should have to actually download is whatever editor you're using, I imagine most of you probably already have a browser that you're comfortable with. But if not, then download the browser that you want as well. Otherwise, everything should already be on your computer