where I am going to show you all of the things

that I use in various videos, all of them.

This might end actually end up being kind of long.

At the end, I'm going to be getting into the weeds

of some of the nitty gritty details.

But first let me make a list.

So first of all let me be clear about something.

Number one, nobody has,

there's no paid endorsements here

of certain things that I'm using.

And I'm picking things, in many ways, arbitrarily.

And I am not,

in any way

whatsoever

telling you to use the things that I'm using.

I'm just showing you the things that I'm using

and actually learning to use one thing

is not as valuable as trying out a lot of different things.

And by things I mean text editors,

and console applications,

and you know, different node packages,

and different programming languages.

But, this would hopefully be helpful to you

if you're going along and following various videos.

This is going to have all the pieces

of how things are set up and configure.

So, a couple things,

I often use a kind of all-in-one package.

So what I that I mean is like it's a thing that I can,

it's either a URL that I can go to, that I can run code in

or it's an application that I can download and run.

So two things that I use are Processing.

This is a Java based platform for creative coding,

it's been around since 2001.

I talk about the history and various aspects

of it in quite a few videos.

And currently, as of the time of this recording,

it is on version 3.4, which is the version I'm using.

There are a bunch of libraries and things that I'll,

actually would really like to make a video

that just does a sort of Processing overview,

which I'm thinking about.

Okay, the other thing that I'm using, most recently

is the p5.js web editor.

What this is,

and there are many wonderful online web editors,

let me name a few.

OpenProcessing, Glitch, CodePen, and many more.

This is one that I'm using

because it is designed for beginners.

It's a project that I have tried to help with (laughs).

By no means am I the creator of this,

this was created by Cassie Tarakajian.

And, you can, I'll link to the videos

about the p5.js web editor that she made

and the processing foundation.

So this is a place where you can write code in JavaScript.

And if you look behind the scenes,

you can also edit the HTML and the CSS of a webpage,

upload files, media files, etc.

So these are my all-in-one packages.

So if I want to just quickly sketch out an idea

and I want to use a downloadable editor like Processing,

I do that.

If I want to sketch an idea and do it the browser

and share a link with it and teach with it,

I'm using this.

Okay, so I'm not really going to show you these.

I'll just link to where you can download and use them

and separate videos cover how to program in Processing,

how to program in p5 with the web editor.

What I'm going to cover more specifically in this video

is my local development environment

for doing JavaScript, HTML, and CSS.

So that really, by the way, includes a few things.

So what do I need?

I need a text editor,

so some sort of text editor.

And, again, there are all sorts of text editors.

Try them, use your favorite, use what makes you happy.

I am, this year, learning to use Visual Studio Code

which is, I think it's open source,

but it's a code editor created by Microsoft.

Most of my previous videos have used Sublime or Atom.

I need some sort of console application

or terminal application.

I'm going to call that like console access.

On a Mac, Macs come with the terminal application.

On a PC, you might be using command or Git Bash

or something or some other ones

that people have told me about.

I unfortunately or fortunately I'm using a Mac

and I'm starting to use an application called iTerm

which has a few extra features.

So, here I'm really talking about an application

that gives you console access

but also what you need is you need a shell.

And this is not something that might be obvious to you

'cause mostly you're going to just be using

whatever default shell is part

of your computer's installation.

And that's what I have always been using

in all of my previous videos up until this year.

And the default shell on a Mac

is usually something called Bash.

And I'm going to try using something called Zsh

which I'm going to, I have to install separately

but there's a wonderful tool

that I discovered called Oh My Zsh that I will show you.

So this is a way that I can run Git-Commands,

I can start up local servers,

I can manipulate files,

do all the kinds of things I might want

to do through shell access.

I could otherwise do with a GUI or another application

but it helps my workflow, it makes me more efficient

and I actually enjoy working in that environment.

It's the kind of thing

that might look a little intimidating

but once you get used to it,

it can be useful for your workflow.

Okay, so text editor, console access,

(laughs)

I hadn't had made this list in advance

so I'm trying to think of what am I missing here.

I'll probably discover it as I go.

Well, let's talk about this,

I need, so two other things.

I need a, you know, node.

So I need to install node.

Node I use for different examples

that use server side programming.

If I need to start up a server

that saves data to a JSON file

or communicates with an API

that I need to authenticate with.

But mostly I'm saying this

because also node I can install what are known as global,

well I can install packages globally

that are utilities that I can run via the shell.

And so two that I tend to use are p5-manager

which is one that will sort of generate a template

of index in a HTML and files for creating a p5 sketch.

Like, all the files that web editor kind of uses,

you can generate those locally with p5-manager.

You can just download them,

you can just make them by saying new file

but this is useful.

And then, another one is http-server.

Another one is live-server.

And once again, the point of me showing this to you

is not to say use these three.

Find your own.

See what your friends are using.

You just need to know how,

you need to have a sense of what all these pieces are

and how to play around with them.

You might not like Zsh, use a different one.

I don't have any agenda, I'm not telling you to use these.

Have I said that enough times?

Alright, what else?

I also, to be honest with you,

I have been doing some more thing,

I haven't really been writing Python code

but recently and in some upcoming video tutorials,

I've been running Python scripts

to do something like train a machine learning model

that I'm going to use elsewhere in my JavaScript code.

So the thing that I have recently learned, which I love,

is something called Virtualenv

for setting up a Python environment.

Maybe this needs to go in a separate video.

I don't know if I really,

this might actually turn into multi,

I think this should probably turn into multi-parts

so we'll sort of figure that out as I go.

But these are all the pieces.

Let me pause for a second and see if anyone

who's watching this live in the chat

has anything that I missed

or any questions so far about this map of stuff.

I think I've got everything,

though there were a few good comments

that I think are useful to mention.

Number one is,

by text editor I also kind of mean IDE

which stands for integrated development environment,

meaning it's a whole piece of software

that has all these features for running code

and doing stuff with code for developing things.

I like to think of it as a text editor

'cause it's kind of what I use it for.

I just edit text and save.

But it has so many features.

There's actually console access

within Visual Studio Code itself, which maybe I'll show you.

And there are so many plugins,

so I should make a note of what plugins do I use.

One that I use is called Beautify,

so that it makes everything nicely indented.

So I'll try to show you how to install that.

I don't know if they're called plugins

in Visual Studio Code,

we'll look at that.

And then also with something like

iTerm has a lot of features

and then Zsh has a lot of features.

You can configure them and template them.

I'm not going to get too far down that

but I just use this sort of default settings

of Oh My Zsh 'cause it has some nice colors that I like

and it shows things that are useful to me.

But I look forward to hearing from your suggestions

about how to configure that stuff even more.

Alright, so I'm going to go through all of this.

Let's start in this video with,

actually, you know what?

This was my introduction to my workflow.

Multi-part series.

In the next video,

I'm going to go through Visual Studio Code.

Is that the right order to do this in?

Why not, yes.

Okay.

(fun techno music)