**Getting Started with JavaScript and Browserify**

To start working with JavaScript, you need to have a good understanding of the basics of programming languages. However, JavaScript is a unique language that can be used both on the client-side (in web browsers) and server-side. For our purposes, we will focus on using JavaScript in the browser.

**Creating a Bundle**

When building JavaScript applications for the browser, it's often necessary to bundle multiple files together into one file. This is because the browser needs to understand how all these different pieces of code fit together in order to execute them correctly. To achieve this, we can use tools like Browserify or Webpack.

In our case, we will be using Browserify. First, let's open the command line and navigate to the directory where our JavaScript files are located. We will then run the following command:

`browserify main.js -o bundle.js`

This command tells Browserify to take the file `main.js`, which contains all our code, and output it into a new file called `bundle.js`. This file will contain all our code, but in a format that the browser can understand.

**Using Moment.js**

Moment.js is another useful tool that we can use in our application. It provides a way to work with dates and times in JavaScript. To get started with Moment.js, we need to install it using NPM:

`npm install moment`

Once installed, we can use Moment.js in our code. For example, let's say we want to display the current date. We can do this by requiring Moment.js in our `main.js` file and then using its methods to format the date.

```javascript

require('moment');

console.log(moment().format("MMMM Do YYYY"));

```

This will output something like "September 23rd 2018" which is a nice and clean way of displaying the current date.

**Using Browserify with Moment.js**

Now that we have installed Moment.js, we can use it with Browserify. We just need to require Moment.js in our `main.js` file and then output the result into our bundle.

```javascript

require('moment');

console.log(moment().format("MMMM Do YYYY"));

```

We will then run the following command:

`browserify main.js -o bundle.js`

This will create a new file called `bundle.js` that contains all our code, including Moment.js. We can then use this file in our browser.

**Creating an Array and Using Unique**

Another useful tool is unique. It provides a way to work with arrays in JavaScript without having duplicate values.

For example, let's say we have the following array:

```javascript

var list = [1, 2, 1, 3, 4, 5, 6];

```

We don't want this array because it contains duplicates. We can use unique to remove these duplicates and create a new array that only contains unique values.

```javascript

require('unique');

console.log(unique(list));

```

This will output something like `[1,2,3,4,5,6]` which is the original array without any duplicates.

**Reloading the Page**

Finally, let's reload the page and see if everything works correctly. The console should log out a bunch of code that we created using Moment.js and unique. We can then use this code in our browser by including the bundle file into our HTML file.

"WEBVTTKind: captionsLanguage: enwhat's going on my name is Jay and in this video I want to show you what is NPM and how you can use it so let's get into it if you go to NPM jegs.com you will see this page and here's a little bit of you know a very quick description about NPM NPM is a node package manager okay so short description is reusable code like people around the world are creating this packages full of cool code that you can use for your project v4 we start using NPM we're gonna need node.js because NPM comes with node.js and that's why it's called a node package manager so if you go to node.js org make sure you go scroll it a bit and then you will see some buttons that you can download and then after that you can install node in your computer after node is installed completely in your computer please go ahead and open your command line alright and I want you to write node - V hit enter all right and if you see this like a version that means that you have node in your computer and there are showing you their version after that let's make sure that we have NPM so let's do the same thing but with NPM now as we hit enter same thing if you see a version right here that's because you have NPM in the computer and you're good to go perfect so let's clear these out all right so now I'm gonna minimize this let's go here for a minute I have a new index.html file it's empty the only thing I'm doing is requesting this main J's file which is right here is totally empty so let's start playing with it let's create a variable here called my date and it's gonna be equal to today's date so let's do new date and this is gonna give us like today's date like right now let's console.log let's make sure this is working save it let's go this is my page which is totally empty let's reload the page perfect it's working it says my day just right here now I do not like this format I want to change it so I'm gonna use one of these node modules so let's go back here and it's called moment there's my favorite like if oh if I want to format and I want something very very easy to read like a very easy to read date moment is my favorite so I'm just gonna click here and here you can see is that install any the only thing that is telling use NPM I movement the I is for install all right that's all we need if you want to use this so let's go to the command line again and before we get started and you know we start installing all these modules or packages let's make sure that we are in the correct folder which I am NOT so write down CD space go ahead find a folder of your project drag and drop it all right here you'll see the path to that folder mine is correct and I hit enter and now you are inside your folder if you want to make sure you can write LS hit enter and it will show you a list of all the files inside that folder that way you know you're in the correct folder okay alright when I killed cleared is perfect now the first thing I want to do is this write down and p.m. in it hit enter alright and now this is gonna create a very important file for your prod is gonna start asking you some questions like your package name right I'm gonna hit enter the version I'm gonna enter description I'm just gonna hit enter to everything because I don't want to spend time like I'm writing all this down but if you're serious and you're creating like a they're very very good parts in a project that you're gonna share with the world make sure you put this down alright I'm good with that yes hit enter okay and now if you go back to your project you will see this new file called package and Jason alright this file will have everything for this project okay so make sure you have this there that's very important and now we are ready to actually use NPM so let's go ahead just go back here let me clear this all right I'm gonna just copy let's go back I'm gonna paste it and I'm gonna hit enter alright cool if you see these warnings don't worry about it it's because I didn't put in my description and you know there's a lot of empty fields alright so that's not a problem so moment if you go back you will see now note modules and you open that you will see moment here which is what we want do not worry about node modules right now if you don't understand it there is a link of the description if you want to learn more about them but you don't have to worry about this folder right now there's another file right now it's called packet lock Jason dot Jason and this file is important because this is the one that's telling every single detail about everything that you're installing so if you install moment a moment they're telling you and all the details about package okay you don't have to worry about that file right now but is important that you have it there all right so now I'm gonna go ahead I'm gonna go to moment J yes and see the documentation see how we can use it all right so let's go here let me open this a little bit more all right I'm gonna click Doc's were to use it and it says no J yes perfect that's what that's what we did and what we're using and here they'll tell you what you need to do so we need to add this create a variable with the require moment so let's do that let's do it up here all right cool I'm gonna save it and now they're telling us to use this like moment format all right so after my date is my variable date is created I'm just gonna put down here and try a new variable let's call it my cool date equals to moment and inside moment we're gonna put the date and then we need to put whatever format we want to let's go back to the website a moment here and I want to see what formats so we have all these formats look and they're telling us let me open this a little bit more they're showing us all the formats every single one so let's use something like this I like this one it's very clean people can understand it's just like a double uppercase ll so let's do it save it and let's console.log my cool date all right let's do this this reload the page yes so now we have an error here is saying require is not defined so this require right here the browser doesn't understand what is it like what is required so if you're a beginner nodejs is a server-side technology so right now we're using all this in our browser and it's not gonna work so for that we need something that is gonna get our main j/s get everything all the code that we have here bundle create a bundle that way the browser can understand we can use something called browser file which I like a lot you can use something called web pack too which I love but for now we're gonna use browser fire it's very easy to do it right now and you can see is telling us browser for unless you require models in the browser and all we need to do is install this right and it's using NPM so let's go ahead and copy open the command line again paste it alright so now i'm browserify is available for us and we can use it so let's close this and let's go ahead and and scroll it a bit down so here you can see how we can get our J's file and create a bundle that we can actually use so let's copy this let's go here to our command line and let's paste it MiFi is called main J's but if yours is called something else just change it and that's it all that's all you need to do and it doesn't have to be bundled yes it can be something else so let's hit enter all right now let's go back and see if browser if I created bundling yeah here's a new file click on it and you will see a bunch of code here okay so you can see that we have all the things that we created and then we have all the code for moment and we're going to have here a code for everything all right so all I'm gonna do is go to my in index dot HTML I'm gonna go and change it to bundle dot yeah yes okay now let's reload and now take a look now is actually working the browser understand our code and now it's like September 23rd 2018 looks a beautiful perfect all right so now let's go ahead and install this unique one right so let's go ahead NPM let me clear this okay so ampion install unique perfect now we have that available for us so let's go the same thing is gonna be a require here I'm gonna put it here after them after a moment and they're giving us an example here from the array so what unique is gonna do for us is that if we have a list if we have an array and we have a lot of things there and we have a lot of a lot of numbers or strengths that are the same and we don't want to we can use unique so let's do it something very very quick here so the variable equals my list equals to this an array this is one two one one one let's say for example we're repeating a lot of ones that we do not want so three three four five six and then another four not four and seven this is a quick example that we have a lot of numbers here that we do not want right and now we can do is I'm gonna put my unique list equals to because he's gonna be unique and then inside unique I'm gonna just put my list which is all this all right and I'm gonna console.log my unique list and let's see if this works so I'm gonna save it and now we need to go and which is um something that I don't want to do you can actually automate this instead of doing it manually but for now I'm doing it manually every time you save this Jes fire we have to go to your command line and make sure you run this that way this bundle yes get created again with your new code now you don't have to do it manually you can use a lot of things to automate this that way every time you save this file is done automatically okay I'm gonna hit enter perfect and now let's reload this page alright and now we have an array one two three four five six seven you can see that we do not have all this wants and this extra three and this extra fours we don't have done so that's a cool thing about all this packages and non modules that you can use for your project and that's it thank you so much for watching half a beautiful day bye byewhat's going on my name is Jay and in this video I want to show you what is NPM and how you can use it so let's get into it if you go to NPM jegs.com you will see this page and here's a little bit of you know a very quick description about NPM NPM is a node package manager okay so short description is reusable code like people around the world are creating this packages full of cool code that you can use for your project v4 we start using NPM we're gonna need node.js because NPM comes with node.js and that's why it's called a node package manager so if you go to node.js org make sure you go scroll it a bit and then you will see some buttons that you can download and then after that you can install node in your computer after node is installed completely in your computer please go ahead and open your command line alright and I want you to write node - V hit enter all right and if you see this like a version that means that you have node in your computer and there are showing you their version after that let's make sure that we have NPM so let's do the same thing but with NPM now as we hit enter same thing if you see a version right here that's because you have NPM in the computer and you're good to go perfect so let's clear these out all right so now I'm gonna minimize this let's go here for a minute I have a new index.html file it's empty the only thing I'm doing is requesting this main J's file which is right here is totally empty so let's start playing with it let's create a variable here called my date and it's gonna be equal to today's date so let's do new date and this is gonna give us like today's date like right now let's console.log let's make sure this is working save it let's go this is my page which is totally empty let's reload the page perfect it's working it says my day just right here now I do not like this format I want to change it so I'm gonna use one of these node modules so let's go back here and it's called moment there's my favorite like if oh if I want to format and I want something very very easy to read like a very easy to read date moment is my favorite so I'm just gonna click here and here you can see is that install any the only thing that is telling use NPM I movement the I is for install all right that's all we need if you want to use this so let's go to the command line again and before we get started and you know we start installing all these modules or packages let's make sure that we are in the correct folder which I am NOT so write down CD space go ahead find a folder of your project drag and drop it all right here you'll see the path to that folder mine is correct and I hit enter and now you are inside your folder if you want to make sure you can write LS hit enter and it will show you a list of all the files inside that folder that way you know you're in the correct folder okay alright when I killed cleared is perfect now the first thing I want to do is this write down and p.m. in it hit enter alright and now this is gonna create a very important file for your prod is gonna start asking you some questions like your package name right I'm gonna hit enter the version I'm gonna enter description I'm just gonna hit enter to everything because I don't want to spend time like I'm writing all this down but if you're serious and you're creating like a they're very very good parts in a project that you're gonna share with the world make sure you put this down alright I'm good with that yes hit enter okay and now if you go back to your project you will see this new file called package and Jason alright this file will have everything for this project okay so make sure you have this there that's very important and now we are ready to actually use NPM so let's go ahead just go back here let me clear this all right I'm gonna just copy let's go back I'm gonna paste it and I'm gonna hit enter alright cool if you see these warnings don't worry about it it's because I didn't put in my description and you know there's a lot of empty fields alright so that's not a problem so moment if you go back you will see now note modules and you open that you will see moment here which is what we want do not worry about node modules right now if you don't understand it there is a link of the description if you want to learn more about them but you don't have to worry about this folder right now there's another file right now it's called packet lock Jason dot Jason and this file is important because this is the one that's telling every single detail about everything that you're installing so if you install moment a moment they're telling you and all the details about package okay you don't have to worry about that file right now but is important that you have it there all right so now I'm gonna go ahead I'm gonna go to moment J yes and see the documentation see how we can use it all right so let's go here let me open this a little bit more all right I'm gonna click Doc's were to use it and it says no J yes perfect that's what that's what we did and what we're using and here they'll tell you what you need to do so we need to add this create a variable with the require moment so let's do that let's do it up here all right cool I'm gonna save it and now they're telling us to use this like moment format all right so after my date is my variable date is created I'm just gonna put down here and try a new variable let's call it my cool date equals to moment and inside moment we're gonna put the date and then we need to put whatever format we want to let's go back to the website a moment here and I want to see what formats so we have all these formats look and they're telling us let me open this a little bit more they're showing us all the formats every single one so let's use something like this I like this one it's very clean people can understand it's just like a double uppercase ll so let's do it save it and let's console.log my cool date all right let's do this this reload the page yes so now we have an error here is saying require is not defined so this require right here the browser doesn't understand what is it like what is required so if you're a beginner nodejs is a server-side technology so right now we're using all this in our browser and it's not gonna work so for that we need something that is gonna get our main j/s get everything all the code that we have here bundle create a bundle that way the browser can understand we can use something called browser file which I like a lot you can use something called web pack too which I love but for now we're gonna use browser fire it's very easy to do it right now and you can see is telling us browser for unless you require models in the browser and all we need to do is install this right and it's using NPM so let's go ahead and copy open the command line again paste it alright so now i'm browserify is available for us and we can use it so let's close this and let's go ahead and and scroll it a bit down so here you can see how we can get our J's file and create a bundle that we can actually use so let's copy this let's go here to our command line and let's paste it MiFi is called main J's but if yours is called something else just change it and that's it all that's all you need to do and it doesn't have to be bundled yes it can be something else so let's hit enter all right now let's go back and see if browser if I created bundling yeah here's a new file click on it and you will see a bunch of code here okay so you can see that we have all the things that we created and then we have all the code for moment and we're going to have here a code for everything all right so all I'm gonna do is go to my in index dot HTML I'm gonna go and change it to bundle dot yeah yes okay now let's reload and now take a look now is actually working the browser understand our code and now it's like September 23rd 2018 looks a beautiful perfect all right so now let's go ahead and install this unique one right so let's go ahead NPM let me clear this okay so ampion install unique perfect now we have that available for us so let's go the same thing is gonna be a require here I'm gonna put it here after them after a moment and they're giving us an example here from the array so what unique is gonna do for us is that if we have a list if we have an array and we have a lot of things there and we have a lot of a lot of numbers or strengths that are the same and we don't want to we can use unique so let's do it something very very quick here so the variable equals my list equals to this an array this is one two one one one let's say for example we're repeating a lot of ones that we do not want so three three four five six and then another four not four and seven this is a quick example that we have a lot of numbers here that we do not want right and now we can do is I'm gonna put my unique list equals to because he's gonna be unique and then inside unique I'm gonna just put my list which is all this all right and I'm gonna console.log my unique list and let's see if this works so I'm gonna save it and now we need to go and which is um something that I don't want to do you can actually automate this instead of doing it manually but for now I'm doing it manually every time you save this Jes fire we have to go to your command line and make sure you run this that way this bundle yes get created again with your new code now you don't have to do it manually you can use a lot of things to automate this that way every time you save this file is done automatically okay I'm gonna hit enter perfect and now let's reload this page alright and now we have an array one two three four five six seven you can see that we do not have all this wants and this extra three and this extra fours we don't have done so that's a cool thing about all this packages and non modules that you can use for your project and that's it thank you so much for watching half a beautiful day bye bye\n"