Commenting in JavaScript

You're probably wondering why I chose this topic to write about, but it's funny how people get commenting so wrong while programming. Instead of explaining what or why their code does something, they give you a statement and expect you to figure out their code all on your own. That's wrong, isn't it? I mean, of course you're expected to analyze their code and find out what it does exactly, but when it comes to participating in huge projects, giving you an idea is a necessity - that's called working together.

Good Commenting

After a few times of doing it, you probably assumed that you got commenting down like a boss. And to be honest, I really don't blame you. All it requires is just a short summary of what that line of code (or block of code) does in your program. But it's how you explain it. Some people believe that they need to explain to the extreme just for you to understand what they had written, but that's not really the case. All you need is a nice, short sentence. Especially if someone knows how to program JavaScript. If someone didn't know however, that would be a different story (nosy buzzers).

Take a look at the picture above. The comment is short, clean and responsible for it's purpose. I didn't have to make multiple comments just to explain what my function does, because it honestly doesn't require that much explaining. Just summarizing it turned out to be efficient enough. Tips I advise are:

1. Explain as if you're telling someone your dream, only shorter.
2. Keep it short so that it won't flood the file with your multiple lines of comments.
3. Don't let your comment stretch out in the file so that people have to use the scroll bar to read it. 
4. Beautify your comments if necessary.
5. Always put your comments ABOVE your code. Never underneath it.

This isn't really something I expect for you to stress out over. In fact, it's not even necessary to. Commenting should be fun and powerful at the same time - you just have to do it right. But if you're doing it wrong and nobody understands a single line of your code (especially if it's complex), then you might want to erase what you created or either find another way to explain it correctly. 

Forever Alone with Code

As a short conclusion, don't write a block of code if you can't explain it. Not worth it.

Bad Commenting

Really?!

Sometimes programmers explain what their code does to the point that they're literally teaching you how to program for the first time. That's too far. That's like teaching a forty year old woman how to say a simple English greeting that she probably already knew..
Now, I'm not saying that all of us are smart when it comes to programming, but none of us are stupid either. Especially if we know how to program. hint, hint hint.

Bad comments are usually easy to distinguish from good ones; they don't provide much detail, they're way too long and possibly make absolutely no sense at all. As I mentioned above, summarizing is the key that leads to success. Not all of us are good at writing, but explaining what you did really shouldn't be that hard, unless it's an engine we're talking about - but not even that, because people also make documentations for their engines so that they're understandable, so that's not even a good excuse. Sorry!

Only the fittest will survive.

To avoid such annoyance and to perfect the obvious, practice. And when I mean practice, I mean practice. Every time you write a line of code that seems as if it's going to be complicated for others to understand, attempt to make a comment about it. This helps to see if you actually understood what wrote, so take your time and try giving it a shot.


Hope you guys enjoyed this post! Sorry for not posting earlier - I got caught up with a few things, so it's been a while. But please keep a look out for more posts by me! I'll be updating again shortly. :) 

Creating Your Own Rickroll

Troll: "Go ahead, go ahead! Click the link!"

*click*

*rick-rolled completely*

You know how all of those trolls and newbies used to get you with that repetitive, annoying yet catchy, rick-rolling gif with that song? I always wondered how they did it - didn't you? Especially since you'd have to use your task manager to click off the entire web browser because you couldn't just simply click it off. How annoying.  

But we're about to create one ourselves today! It's about time you got your revenge back and created your own personal one from scratch. Whaddaya think? Ready to rick-roll? Good. 

If you want to view mine in action, feel free to click on this link. But don't worry, I didn't add any alert boxes or such so that you won't be able to click it off like a troll.  It's just a simple rick-roll with a little sign (look above) saying you got "rick-rolled". Instead of spamming someone with complete alert boxes or whatever, we're going to keep it simple and produce something like that. Take notice that this program does not include the usage of jQuery. 

1.  Finding an Animated Rick-Roll gif

Ah, just looking at his face makes you get rick-rolled. It's like a curse, y'know? But anyway, if you don't want to use the one I have (although it's best that you do), then search for another. But in this tutorial, I'm going to use the exact same one. But just Google search "Rick-rolled gif animated" and you'll see a bunch - even the one where he has his cool shades on. Make sure you copy the image link though, please!

2.  Using JSBin to Code

In all of my tutorials, I always use JSBin. It's a free website where you can code HTML/CSS and JavaScript (as well as a few other languages, CoffeeScript and jQuery of course). Some people use JSFiddle as well, but I personally use JSBin due to my own liking of it. You can choose whichever one you want though. :)

3. Displaying the Animated gif with HTML

To begin, we want to provide an <img/> tag. <img/> tags are tags that reference to an image, so you wouldn't be able to use this tag for any other purposes. For more details, click here. Make sure you create a closing backslash since <img/> tags don't have their own personal closing tag. 

After doing that, we want to provide two attributes to our <img/> tag; one being an ID and the other being called source. The id attribute allows us to produce some CSS code to that specific tag only. If you still don't understand, it's like giving it special abilities unlike the rest. 

To make use of our image link that we copied (the rick-rolled animation, remember?), let's put it in the source attribute in quotation marks. Also, take notice from the image I displayed above (you can click on the image to enlarge it, by the way) - you need a equal sign (=) to attach the image to the source attribute. Same goes for the id attribute; you need to provide an equal sign and then quotation marks. Only difference is naming your id, which could be anything you want! I put mine as "rickrolled".

4. Using CSS to Stretch Our Image

  

 In the CSS file, I linked my id attribute that was connected to the <img/> tag. Remember, ids' are hash tags in CSS when you're trying to edit it. 

Take a look at the code - it's quite simple, right? Glad you agreed. To explain top from bottom:

1. I set it's position to fixed so that the user won't be able to scroll the image - it's basically locked onto the screen.
2. I set the width and height to 100 percentage to adjust it's size, since it was a small image when we had first saw it. Now it stretches out, although you probably won't see much of an change.  
3.  I set the top and left to 0 pixels so that it evens itself out. It helped determine the size to a perfect fit with no struggle whatsoever. Your image will probably look blurry, but that's because you got a bad gif/png (not my fault!).
4. Notice the brackets. Those are important. Don't forget to add yours!

Now, if you click that little black arrow in the upper right corner (if your "Output" tab is highlighted), then you should see the code in action. Your little rick-rolling buddy should be rick-rolling those fools to death. Well, you being the fool as of now. 

5. Getting Audio (what is rick-rolling without music?)

Okay, this is such a bad picture.. Looks like a website that would give you a virus, huh? But it's not. In fact, I use this website all of the time for my games. It's called Mp3Skull - check it out (you're going to need to anyways if you want to follow this tutorial..). In the search box, make sure you type up exactly what the song is called. Sometimes you'll get a result from some guy named Barry I believe, but he's not the rick-roller. Just some weirdo who tried mocking Rick Astley's song. Sorry!

After you do that, I want you to hold down the left-click button on your mouse where the download button where the mp3 file is (see it?) and drag it into your URL box at top. My demonstration was poorly illustrated, but I apologize for that. But when you're finished with following that step, make sure you copy the entire link - we're going to need it.  

6. Playing the Audio in Your HTML Document

  

You made it this far, great! You must be determined to troll people. Now, we're going to want to make use of our link that we got.. We need to create an audio player in JavaScript. This is sort of like manipulating the DOM (HTML document). Let me explain the code from top to bottom in my JavaScript file/tab above:

1. First, we created a variable called audio. After we did that, we assigned it as a new Audio Object with the new keyword. Then, we gave it parentheses with quotation marks inside of it with the link to our audio (that's where you post your audio link at!). If you understand Objects, you'd understand this very well.
2.   Below that piece of code, we used the Audio Object's method: .loop on our Object (the variable "audio"). We assigned it to the boolean value true so that it keeps the audio looping - yes, that's the purpose of this method. We don't want our audio to end, so we have to keep it rolling (get it?).
3. As you probably guessed, the code below that plays the audio that contains our rick-roll song. High five. But to notice that .play() is a method. We even have the ability to pause our music as well, but that's not needed to be mentioned.   

If you want to test it run, don't be shy! Give it a shot. It should work perfectly fine (if you did it correctly). If a problem occurs, just analyze my code above and see what you missed - I understand this might be a little difficult for you to understand, so don't force yourself to learn all of it in one day.

That's it! Your rick-rolling mayhem should be ready to start! You probably noticed the little advertisement banner at the bottom of your image (if you selected this one), but don't worry about it. You could always create a border that says "YOU GOT RICKROLLED" if you feel need to do so like I did. But I encourage you to add your own ideas and see what you come up with! Perhaps you can create that never-ending, painful spam of alert boxes that trollers use to create. Good luck! :)

Have fun! I hope you guys enjoyed this tutorial! Stay tuned for some more and keep your eyes peeled for more interesting posts by me!