So the other thing that I do is I work a lot with node.

And I especially use different node packages

as utilities to run on the computer.

I also write node code,

but that's a separate topic for another tutorial,

but I write node code with the,

with a text editor and run commands

via the terminal and all that sort of stuff.

So let's come back,

here, and see.

Now, do I have node installed?

I'm going to just type node.

I know I have node installed because it gave me that prompt.

So this is how I can actually just type java script

in an interactive way.

Like I can say, let x equal five.

And then I can say x and it shows me five.

This is like an interactive console here.

And then I can just say, I think,

control c?

And I can get out of that.

Now.

I'm going to just go back to the desktop.

So I have node installed.

If you don't have node installed,

there are many different ways

you can install it but I think if you go to nodejs.org,

you can get it.

Now let's see what version I have,

this is probably going to be very embarrassing.

Oh, not so embarrassing!

10.8.

So you can see, I'm a little bit behind

but then this is recommended.

But you know, live on the edge.

There obviously are key things in certain versions

most of the stuff that I'm doing, it doesn't matter so much.

So I have a fairly recent version,

now do I have something called npm?

Npm should come with node when you've installed it,

but just to be sure I'm going to type npm

and it looks like I have it 'cause it's not saying

it doesn't know what it is.

So npm is node pkg manager.

It's how I am going to install node packages.

And I'm going to show you something really important

right now.

So what I want to do first,

is let's use http server.

Http server is a way, actually,

yeah, let's use http server.

Http server is a node package for running a web server

from the console on your computer.

And you can use it for other things too.

So I want, normally a node package is something

a module that you install for a particular project

and it lives with that project.

I'm going to solve this globally because I want to use it

as a global utility on my computer.

But there's two, multiple kinds of global

that you might not be aware of.

So I'm going to now say,

npm install

what was it called?

Http server -g,

the -g for global.

And I know there's something called Yarn,

which is another way to install your package, but you know,

oh, I can't do everything new all the time!

So I'm going to hit enter,

and it's going to give me an error.

This error is so common.

And it's a permissions error, it's like,

I don't have authority to install something global

on your computer.

And you're going to be tempted to do this.

Sudo npm install http-server -g

what this means, sudo means super user do,

and it's saying, you know what, I do have permission,

I'm the administrator of this computer,

I want this to be global, across all users of the computer.

But that actually is probably not what you want.

What you more likely want is global packages but for you,

in your home user account.

It's a fine line but you're computer

has stuff installed in a like, really further,

further down the chain of file directories that are,

any user can use.

Like the applications, or it has configurations and things

for just the user that's logged in.

So there is a way to deal with this.

And the way to do that is,

I'm going to just look for fix permissions npm.

There's a guide for it on the npm website.

And it's, the way that I like to do this, is this.

So I want to make a hidden directory called npm global.

So I'm just going to copy this right from here.

And I'm going to put it in here.

Then I want to tell npm that

that's where I want my global packages to be.

Now here's the thing,

it's going to want me to add that to the path.

Because I'm adding something new that the computer needs

to know to look there to find things,

it needs to be part of the path.

But guess what?

Uh, maybe not .profile

this is the default bash profile.

Actually what I want to do is take this,

since I'm using zsh, but again,

and I want to say,

code .zshrc

so I want to edit this file,

and I'm going to add another thing,

I'm going to add it, the path here.

So it should be available.

And then I'm going to say source to reactivate it,

I only have to do this once.

Or I could restart terminal.

And then now I should be, that's a little variation of this.

That's what, that's the equivalent of this.

And now, I should be able to say

without sudo, no sudo,

do this

install and look it did it and guess what?

I'm going to go to the finder,

I'm going to look here, there's a new hidden directory

called npm global, bin, http server, lib,

this is where it lives.

So a lot of times this stuff seems like magic,

it's just putting more files on your computer

and then telling you about where they are

and then you have,

and staving where that stuff is in the path variable.

Okay.

So now we've got http server,

this means that I can just run http server,

there you go,

I'm running a server, I'll show you why I want to do that

in a second.

But instead, I'm going to,

the next thing I'm going to do is going to do npm install

p5 manager -g.

So this is installing p5 manager.

Take a little second there.

Okay, installed,

and now

now I can do things like, p5 generate

- -bundle mysketch

or something so I can create a p5 sketch.

And it actually just created all of these files.

I can go cd mysketch.

Now the truth of the matter is p5, the p5 manager

comes with it's own server.

But, for whatever weird reason, I'm just used to using

http server.

If I hit command and I click on this,

it will open it in the browser and there's the sketch.

Now there's nothing appearing so maybe I want to edit it.

Now how's another thing I want to show you.

(laughs)

I got the server running here,

so ah, I don't want to stop the server

but I want to do more stuff

in the console.

I can hit command T and that opens a new tab.

But I'm not in the same directory,

so if I want to be in the same directory,

I'm going to go to preferences again,

and I'm going to go to profiles under default

and I could create different profiles

with different settings,

but this is what I want.

I want to reuse previous session's directory.

So if I click that,

and then I close it, and I hit,

now I hit command t for a new tab,

there we go, I'm still in mysketch.

I can do code dot.

I've now, I'm now looking at mysketch in visual studio code.

I will add background 255, 0, 100

it will auto format it when I hit save,

and then I'm going to come back here and hit refresh.

Oh no!

Where's the new code?

So this is really a key thing.

Browsers want to cache, all the time.

So there's many ways around this, but,

and by the way, didn't even show you,

you might look like this for you,

I did something without even thinking about it.

I always while I'm working,

like too have the developer tools open,

View, developer, JavaScript console.

I usually open it by doing option command J

and there it is.

And then I want to make that font bigger so you can see it.

But there's a really important setting

that is really going to help you out.

Settings, and I can go down under network,

I like this one.

Disable cache while DevTools are open.

So this'll mean it'll always reload any changes

in your code, while you have those DevTools open,

the browser won't cache it by accident.

So now if I select that,

and I hit, if I hit refresh here,

there we go, we've got the P5 sketch.

Now here's the thing.

What if you want to just, now so if I change it,

100, 255.

I've got to go back into the browser and hit refresh.

Which is fine, I don't mind doing that.

But!

I could also

control c out of http server,

I could say npm install live-server -g,

this is a different server package,

and again I'm sure visual studio code has plug in,

has extensions for running servers so you don't have,

there are so many different ways of doing this,

no one way is correct.

But now if I do live server,

'cause it launched it automatically, and then

if I change the code 255, 0, 100 hit save,

hmm, let's see.

It detected it,

I wonder why it didn't change.

Did I not hit save?

I've seen this happen before.

If I hit refresh, oh live, maybe live reload enabled

didn't get enabled.

Let me see.

But let me try this again.

I don't know why that didn't work.

And I'm going to say 100, 0, 255.

Hit save.

And it changed.

Yes, so we can actually if I were more thoughtful about this

and put this over here,

and put this here,

so you can kind of see it,

you can see it's just changing every time I hit save.

I know I'm standing in front of the code,

but that's it's going to update dynamically.

So that's something that can be useful

if you want it to live reload.

All the time.

Alright,

so this is pretty much my entire workflow,

I think this, I would like to make a video about

setting up virtual environment for Python,

I'll come back to that,

I'm going to use that for some projects in the future.

But this is pretty much everything I use.

So many things are missing, so many people in the chat

are like posting their suggestions or like,

this text editor, or this thing called tmx maybe

is really good for zsh.