Placeholder Image

字幕表 動画を再生する

  • - Working with node, oh we're almost done.

  • 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