Placeholder Image

Subtitles section Play video

  • - 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)

- Hello, welcome to a video on the Coding Train

Subtitles and vocabulary

Operation of videos Adjust the video here to display the subtitles

A2 editor p5 text editor application web editor shell

Introduction to My Workflow

  • 0 0
    林宜悉 posted on 2020/03/27
Video vocabulary