Tooling Setup for Hackathon

[00:00:00]
>> We have come to the third and final part of the course that is going to mostly be around getting some reps in, if you will, with the many possibilities for building whatever we want on the web [LAUGH]. So the idea today, our theme, if you will, the idea for this part, our theme, if you will is, hacking away.

[00:00:33]
So the idea is that we want to, today we're gonna talk about a couple of more, again, practical dev workflows tips today. We're gonna talk about a few other tools we can incorporate in our day-to-day dev lives to make our life easier. We're gonna talk about how to get our beautiful production build that we know how to make now with Vite, how to get it onto the interwebs, if you do it right, unlike me, with the slides.

[00:01:00]
And then you can share it with all of your friends all over the Reddit and the social media platform of your choice, what have you. And also, we are going to hopefully feel vindicated in all of our tiny little .HTML files, all of our little quick wins and our selfie cam and all these things that we've been building.

[00:01:25]
We're going to see them come together into a hackable project that we can then all take and take in different directions, make it our own. So the aim for this part is that we're going to focus on kind of letting our imaginations run wild and our MDN Fu, come to our aid in figuring out how to do a thing that we imagine happening, and hopefully, share all of our learnings with each other.

[00:01:58]
All right, how's that sound?
>> Excellent.
>> We ready?
>> Yep, ready.
>> Yeah, okay.
>> Someone online said you are the best.
>> [LAUGH] You are the best. You are all the best. This is honestly so great to be here with all of you. And I'm just, again, so appreciative that we can do this in three dimensions, some of us, and that we have the hybrid model now.

[00:02:20]
All right, so, DevTools. We need more always, right? Because we can never have enough of those overwhelming logos to worry about. However, there are some other little little and ginormous tools that can help us have a much easier time and ideally avoid a lot of the more obvious problems that some of us run into frequently if we don't have tools automatically fixing them for us.

[00:02:52]
So that's what we're gonna talk about. Now, before we launch our things to the interwebs. So, first and foremost, a dev's best friend these days, the last few decades anyway, is version control. So, have folks all worked with Git or GitHub before? Yeah, I'm seeing nods. Am I seeing virtual nods?

[00:03:18]
It's from the chat. Are we Git fans already? Because this is not, we're not really going to cover all of the things there are to know about Git. Again, that would be a whole other thing. And in fact, it is a whole other course on front end masters that you can go take if you want to learn Git or Get more familiar.

[00:03:39]
There are also some great cheat sheets out there and other resources that you can find. So if you're new to Git, for example, the GitHub Education website, I think it's education.github.com or something has a really handy cheat sheet, you can print out and just It's like keep by your laptop, for example.

[00:04:00]
Okay, but the basics here is that so, now, Git and GitHub are not the only ways to manage version control for your project and collaboration and open source and working with a team, let's say, working with other people on the same project. There are other version control systems and there are other repository hosting solutions like GitLab, for example, and some of the other version control vendors are things like Mercurial for example.

[00:04:31]
There's an older one called SVN. You might run into once and awhile anyway. The way of everybody converging on VS Code, for example, which happens to be a Microsoft property, which also is the case for GitHub. So this is one of these things where there's a gravitational force here that's pulling us all together.

[00:04:56]
Because Git and GitHub are so ambiguities in the developer ecosystem, especially in web development, we're going to just talk about those. And so perhaps you've all done commands like this before. What we can do is, use the get clone command to clone a repository of, let's say, some open source project that we wanna work on or some some demo app that we want to mess with.

[00:05:22]
So for example, I have a repo up there for my selfie cam project. Now you all don't need to clone that one. But the idea is you can clone somebody's repo. You can make your own branches like maybe I make a branch called bug fix where I go in and I fixed that bug.

[00:05:39]
And then we can add changes or stage changes to save sort of as I have made this change in the repository. We can commit it with a little message that's hopefully helpful for people to understand what I did here and then push it. And that little you is for the first the first time you run the push command, you will have to set a destination, a remote branch that you want to sync with your local branch.

[00:06:10]
And so the remote here is called origin. That's usually kind of the default that we use. And then we would type in the name of the branch that we want to sync on both. So now I will have a local bug fix branch and my origin bug fix branch, which then, once I'm satisfied that the bug is actually fixed, I can merge in to my main branch.

[00:06:32]
So again, covering all the good stuff is not in the scope of this course, but this is like, basically what we're gonna be doing a lot today. [LAUGH] Well, and maybe not the last one. We'll just be doing get push after we've set the upstream.