- Hello, welcome to a video on the Coding Train
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)