Placeholder Image

Subtitles section Play video

  • OK, here I am.

  • So in this video, I'm going to talk to you about code comments

  • and how you can write comments in your code

  • for just you or your friend and the human beings who

  • are looking at your code to read, or actually, to like

  • quickly disable and re-enable certain lines of code,

  • all sorts of exciting things you could do with code comments.

  • I'm going to show you how to do that in the p5 web editor,

  • but this is a universal concept.

  • Any programming language or environment

  • that you choose to work in will have

  • a feature of a way of writing stuff in your code

  • that is ignored by the computer that's

  • executing the instructions and is just there for you

  • to review if you like.

  • Take a break for a year and you come back

  • and remind yourself of something,

  • so let's look at that.

  • So anything that I write into the p5 web editor with a slash

  • slash, immediately, that line becomes

  • what's known as a comment.

  • So let's look.

  • Like what if I were to write something--

  • OK, so this is the green rectangle in the center.

  • So the idea of a code comment-- and you can see that it is

  • highlighted, it is gray, it does not have the syntax

  • highlighting of the executed--

  • this means that when the computer

  • is executing the instructions.

  • And I never explicitly said this,

  • but it's important-- line by line, one after another,

  • it ignores this.

  • That is just there for me the human being to read.

  • So this can be useful.

  • If you were doing a self-portrait,

  • you might say, like, this is where I'm worked on my nose.

  • And this is where-- this is the code for drawing my chin.

  • And this is the code for drawing my ears.

  • And you don't even have to do it as a sentence.

  • So I could just say, like, you know, red, red circle.

  • You might also write a note to yourself like later,

  • I want to make this circle animate.

  • And actually, a convention inserting this to write TODO,

  • but that doesn't mean anything.

  • But so, there's all sorts of things you could

  • write in the code comment.

  • So I encourage you, easier said than done,

  • and I don't necessarily follow my own advice,

  • but I encourage you to get in the habit of writing

  • code comments.

  • Your future self will thank you.

  • It's certainly something that as a teacher

  • I try to do as much as possible, because I want

  • to explain the code in line so people can-- looking at it,

  • can follow what certain pieces are doing.

  • And typically, I put the comment that's

  • describing what's happening after it.

  • OK, so that's how code comments work.

  • But there's another sort of neat trick

  • to code comments that I'm not mentioning.

  • Before, when I was showing you, what

  • if I wanted to use noStroke instead of stroke?

  • What I actually did was I deleted stroke,

  • and then wrote noStroke in there.

  • And I was able to sort of like undo my way back.

  • But often, what I want to do-- and I'm going to do that right

  • now--

  • often what I want to do is say like,

  • let me quickly disable the stroke.

  • And then show you noStroke.

  • So here I'm kind of saving what I had before,

  • because I might want to re-enable it.

  • And then, and adding in something new.

  • And then now, if I want to put the stroke back,

  • I can delete that and I can delete the slash slash,

  • and now the stroke is back.

  • So and, I can even do things like,

  • I can like highlight this whole section

  • and I can say command slash and the whole thing

  • is like commented out.

  • I could say command slash again, and the whole thing comes back.

  • So this is a really just useful technique

  • while you're working to kind of speed up your workflow.

  • You can kind of leave some stuff in your code

  • that you don't want to see, but you might want

  • to pull back, come back later.

  • And you'll sort of figure out how to manage this best.

  • But the primary reason for comments

  • is to add things in your code about what you're doing.

  • And this could be for teaching or could

  • be notes to your future self.

  • And I might say that things that you

  • might want to consider doing is, you know, code, example,

  • by Daniel Shiffman.

  • You can do things like this.

  • The Coding Train, maybe you put like a URL in here.

  • Like this is the kind of thing maybe you have some information

  • like, and it's what your license is, like please share and use.

  • You know, there's-- technically, you can add a software license

  • that's part of the comments.

  • And I don't want to get too far down that whole like just

  • explain to people what they can use it for,

  • but this is the kind of thing that you can also

  • use code comments for to put something

  • at the top that's kind of announcing what it is, credits.

  • And usually, I would do things like this code is based

  • on everything I learned from Lauren McCarthy and Cassie

  • Tarakajian, creator of the editor.

  • You know, I would really often like--

  • I'm always crediting where I got my-- or got--

  • because much about coding is finding examples and changing

  • something in the example, learning to code is doing that.

  • And so I always like to try to give credit.

  • You know sometimes they're saying,

  • is there a legal requirement to give credit?

  • With p5, everything is open source

  • and licensed in such a way that all the examples that you do

  • are not required under any legal anything to give credit.

  • But it's nice to give credit when you can.

  • I always try to.

  • And if I forget to, if you see something I've made

  • and I forgot to give credit, please let me

  • know so I can add it.

  • OK.

  • OK, there's some more stuff.

  • There's other fancier ways you can add comments,

  • but I'm not going to go into that right now.

  • I'm just noticing in the chat.

  • So you know, all in good time.

  • I can't get to everything in every video.

  • So that's code comments.

  • You are ready.

  • If you are taking this somehow as a course,

  • this would kind of be the end of the first module.

  • You've learned a little bit about what

  • p5 is, what JavaScript is, how to sign up for an editor

  • account, how to draw shapes, how to set colors,

  • and how to read error messages and add comments.

  • So make a sketch, save it, share it,

  • share it with me in the comments, share it on Twitter.

  • Let's talk about ways that we can share these things

  • with each other and I look forward

  • to seeing what you make.

  • And if you continue watching this series,

  • the next step that is to come is going

  • to show you about how to animate the stuff and interact with it

  • with the mouse.

  • OK, I will see you soon, and hope you enjoyed these videos.

  • [BELL RINGS]

  • [MUSIC PLAYING]

OK, here I am.

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it