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!

Java !== JavaScript: return true;

Surprisingly, everyone seems to get the two languages Java and JavaScript for being the same thing. It's like a virus that can't be erased unless you find out the solution or difference, which in my opinion, can be quite simple if you just search the web (no kidding!). But it's mainly because someone named the programming language JavaScript after Java, so whoever did this managed to successfully manipulate people drastically. But this article is going to be about the differences between the two languages, and how they're not the same thing. So hopefully you won't be like the ones who are confused after reading this!

Java

Java is coffee. You brew it to your personal taste and add sugar if wanted, then sip with milk or either by it's perfect original taste. Where do the beans come from? No one knows. Only the computer produces such a magnificent, flavorful..

No really, let's cut to the chase. Java is not coffee (in the programming world!). Java is a powerful and common object-oriented language that actual developers use to create devastating mobile apps and games that you see (without realizing it) to this day. The popularity of Java is increasing, because more people are looking towards it's simplicity unlike other high-level programming languages (like C, C++ or maybe even Objective-C). I honestly wouldn't know much about C or C++ being complex, but I do know that Java does seem simple from my own personal experience. Take note that the fundamentals of Java came from  C++, but the creators improved the syntax of Java so that it could be more simple for programmers to use. And so far, they done a great deal to society by doing so.

Aside question: Why did they use coffee as their logo for Java?

This is kind of a general question, but no one really knows. I actually did my own research (across the web) and I haven't found a good solution yet, so I'm not sure. The creator probably just came up with the name while sipping actual Java. Besides, from what I heard, programmers run on coffee. But I don't..


JavaScript

JavaScript is a popular, object oriented, web-based programming language used by Web Developers. People use this language to make websites created out of HTML and CSS interactive. Without doubt, you probably seen JavaScript in action, because it's nearly everywhere across the web browser. Input boxes, check boxes, radio buttons - all of that stuff is powered by JavaScript. The power of this language is great, but it isn't as great as Java. You definitely wouldn't use this programming language to create mobile apps or games unless they're web-based. This is not a language to look into if you aren't interested in web development, because that's basically where that direction is heading.

The good thing about this language is that everyone is learning it across the world, so finding open-source projects or tutorials is very easy with just a simple search (unlike Java). You wouldn't have much trouble learning this language either because JavaScript is more simpler to get into and less complex. The only part of JavaScript that might confuse is the object-oriented part, because it takes a lot of effort to utilize the code and remember it's methods. But other than that, you're definitely good to go. This was actually my first language that I had gotten into thinking it was for mobile development, but I realized it wasn't through my brother and by research. It was kind of disappointing on my part, but I'm glad that I learned this language as a first - I'll talk about that in another article, perhaps.


Listing The Difference Between The Two

I probably don't have to list the difference for you guys, but just in case you're unsure - and for the sake of this post - I'll break it down for you. Once you're finished reading the difference, you should probably look exactly like that meme above. Jussayin'.

JavaScript

• Popular web-based programming language
• Used to make websites interactive
• Can be used freely on your browser, with no download needed
• Object oriented 
• Less complex syntax than Java
• Leads to Web Development as a career
• Easier to learn on the web due to popularity

Java 

• Very powerful, common programming language
• High-level programming language
• Used to make mobile apps and games
• Cannot be freely used on your browser - you need to download an IDE
• Object-oriented
• More complex syntax than JavaScript, but simpler than C++
• Leads to Software Development as a career
• Not easy to learn using the web as a source, but popular among the web

Wow, look at the difference! If you aren't amazed or even the slightest astonished, you have to be crazy. It's quite easy to say that Java isn't JavaScript now because they have NO similarities at all. And I'm not saying this to belittle our web-based language JavaScript, but it is absolutely nothing compared to Java. The only reason this topic is ever brought up in the programming community is because people can't distinguish the difference between the two due to the similar names. But trust me, the concept and design is totally different.

That's it! Feel free to comment if you have any questions or just want to throw out your opinion. It's fun to have active people willing to spread their knowledge, so don't be afraid not to.

See ya!

Where to Code First

Whether it's being apart of an open-source project, soloing or partnering with friends, it's important that you know where to start first. Coding naturally starts anywhere, but it's best that you don't hop to different languages every time instead of focusing on one. This saying goes for all of the above that I just listed.

Open-source projects

Whenever you participate in open-source projects, you see each person (in that group) in a certain field; JavaScript Developers, Web Designers, Story Editors, etc. Everyone plays their part and doesn't worry about others unless it affects their area (For example, incorrect name of characters implemented by JavaScript Developers). This kind of process usually leads to success, because everyone informs the project leader whenever ideas come up or when confusion is put into play. The responsibility as a project leader is heavy, because you're expected to have some knowledge in at least one language or the other, especially if you don't have a co-leader to back you up. But you usually see Lead JavaScript Developer and such for a reason, because their job is to obtain the project leader's information and convert his/her words into coding-terms for other programmers (in that field) to understand. So let's say (as a project leader) you wanted random numbers to be generated and added each time it was displayed on screen - the Lead JavaScript Developer would have to take your information and explain to other programmers in a more programmable-sense. It's like converting one language into another. 

I suggest just a few tips for you when you enter open-source projects:

1. If you're really good in a particular language, try to keep your complex code at a lower level for people to understand. This is called consideration and team work.
2. Don't judge nor question the project leader's orders unless you intend to support his idea. The Lead JavaScript Developer usually does that.
3.  Look over your code before posting for others to see, because bugs will occur in the program if you don't. Tiny mistakes like miss of semicolons or wrong boo leans can cause major problems. 
4. If you can't participate, don't participate. It's a open-source project, not your lifetime career.

So, this leads back to the question: "Where do you code first?"

 For open-source projects - whatever field you're good in. 

Soloing on a project

                     photo is not me.

When you're by yourself, it's probably a good idea to be fully aware of what you do. The difference between being apart of an open-source project and soloing is that, you're the leader of the project. So you know what you want instead of being given orders by someone else. Acknowledging this fact is precisely a good idea when soloing on a project, so don't let that deprive you from coding what you please.

Tips that I suggest when soloing are:

1. Don't be afraid to talk to yourself when trying to solve some difficult problems. (troll) 
2. Take a break sometimes. Soloing is a lot for someone with one brain.
3. Never give up on a project you started. That's a major fault with programmers.
4. Ask for help. Having someone assist you won't lose the title as being a "solo project". Erase that pride.

Where should I code first? In my opinion, the HTML file. Designing the layout of your program is better than completing some code and then putting use to it afterwards. You want to see the result of your code fast, not slow. On top of that, creating a nice webpage/design is pretty hard, so it's best that you focus on that first. But make sure you utilize CSS - HTML doesn't look good without it.

Partnering with Friends

What could I possibly say to this? Take your time! You guys are friends. Of course, you want to have some kind of day picked out to work on the project with each other - but take your time. This topic is similar to open-source projects, so reading what I wrote above should be enough to understand what you should/not.

I have two tips that I'd like to suggest:

1. Drink Mountain Dew or Monster (Energy Drink)
2. Have fun and laugh

Where should you code first? Wherever your friends decide on. :)

I hope you guys enjoyed reading this - I had fun writing it! Learning one of the greatest importance is phenomenal in the programming world, so make sure you take this as a valuable lesson! Thanks again, and comment if you may! 

jQuery IS JavaScript

Every time I come across a programmer (who is just learning how to code), they always ask me these questions:

1. What is jQuery?
2. Why do we program jQuery inside of a JavaScript file?
3. jQuery isn't JavaScript, right?

I'll admit, I'm not really good at explaining things, so bear with me. The last time I tried explaining to my sister what a (JavaScript) Object method was it turned out to be an disaster. You can say I'm one of those people who learn something from my own point of view and then  have trouble explaining from that point of view. I eventually worked it out with my sister, but it took me some time to explain it as simply as I could. But everyone learns things differently, so it's only natural if others can't comprehend you from your own understanding. You just have to find a way to provide an understanding for them to comprehend what you learned in an easier-term. Everyone thinks alike in a sense, but not really. Keep that in mind.

Why am I telling you this (you didn't ask this question, I know)? Because I'm warning you that you might not be able to understand me, but just let me know in the comment section. I'll find a way to make it even more simpler for you. :)

What is jQuery?

jQuery is awesome, that's what it is! No seriously, jQuery is a JavaScript library that makes manipulating the DOM (in other words, the HTML document) much easier and funner. It was created by thousands of coders who are experts at JavaScript and ran on either Mountain Dew or coffee (you gotta know your history, kid). They even have their own website which is called jquery.com 

If I were you, I would keep this website bookmarked. They have nearly everything listed in their documentation about methods that you could use and choose from. I believe they also provide several demonstrations as to how each method works too, so don't hesitate to "Write less, do more".

Why do we program jQuery inside of a JavaScript file?

You program jQuery in a JavaScript file because you wouldn't be able to program it elsewhere, unless it's put in <script> tags in the HTML document. But other than that, you're outta luck. Not satisfied with your answer? Good. Read the next question below - it's related.

                      jQuery isn't JavaScript, right?

No, no. jQuery is JavaScript. You can't let that confuse you, my friend. That's why I said you only program jQuery in a JavaScript file (or HTML document with <script> tags) because it's JavaScript itself. The purpose of jQuery is to make creating interactive websites more simpler, that's all. With the help of jQuery, websites all over the world have been becoming better and better each day. And the best part about jQuery is that it's still growing, so you'll always be able to find something new once it's added. Keep an eye out, coder!



I hope this fixes all misunderstandings that some of you people might have. Like I had mentioned before, I'm speaking from my understanding about this topic. So if I added any misleading information, please feel free to clarify. Whatever the case, the most important thing that I didn't mix up is the fact that jQuery is JavaScript. That's honestly all you really need to know. :)

(How-to make) jQuery Alphabets for Kids

I'm going to show you how to create a simple program that contains the alphabets (A through Z) in HTML while making it interactive with the power of jQuery. The code is simple, repetitive and most importantly, fun for everyone to learn from.

I found this to be a good program to start with if you're a beginner who knows jQuery but doesn't know how to utilize it. The key of this post is to show you that jQuery is a powerful library (made out of JavaScript) and you can do just about anything with it. If you want to view the code in action, here is the link.

Some of the audio I implemented inside of that program are different from the rest - did you notice? I only did that because of my hilarious, sick humor, so my baby sister says (not really). But it's true, because I didn't want to do something if it didn't please me. What fun is that? None at all. So, do whatever you want to your program, but make sure it still has it's kid-friendly kick to it.

Step 1. Using JSBin

To begin, we're going to pull up JSBin. JSBin is a free website that allows you to program JavaScript, jQuery and HTML/CSS all together. If you look at the tabs above, you can see "HTML", "CSS", "JavaScript", "Console" and "Output". We honestly have no concern for the console tab, so close it if it appears to be highlighted on your page. The "Output", however, is going to be needed. If you click on it, you'll see a few options in the display menu saying "run JS" and a checkbox saying "Auto-run JS" - you can leave those settings alone. There should be an arrow though on the right-side of those two options, and it will open up your code in a HTML file. This is going to be useful because we're going to want to view our code for correct positioning (for the letters and such) and provide test-runs, so keep this in mind.

Step 2. Providing jQuery

We're using jQuery, so it's important that we provide the link for it. Luckily, JSBin has all this, so you can just click the "Add Library" button and select the "jQuery 2.1.0". It will automatically insert the jQuery link for you inside of your HTML file - what a breeze!

Step 3. Getting Started


First, let's provide an image for our little program. You want your background to be catchy and appealing to kids, not some boring plain white-background. Kids would be so displeased with you, trust me. So, find an image (Mine is already chosen)! Make sure you copy the url image link.

After you picked an image (and copied it's URL link! Important!) You're going to want to place it somewhere.. Luckily we have <img> tags! In our HTML file, we're going to want to create one and then close it with a self-closing backslash. After we do that, we're going to want to provide two attributes to the tag; the ID attribute (that allows us to do CSS code) and the source attribute. If the image I provided is too small to see, I'll demonstrate below:

<img id="background" src="whereourimagelinkgoes"/>


Remember, all of this goes in the HTML file. If you noticed in the picture above, I circled two code pieces. The one on the right is CSS and the one on the left (you guessed perfectly) is HTML. In the CSS file, I took the ID that is connected to the <img> tag and provided it with code. The code fills the entire HTML document with that background image you chose. Pretty cool, huh? I also included another property for that element (that's what all tags in HTML are called, by the way) which is called position. It allows you to lock an image to the page (using the "fixed" value) or move freely (using the "absolute" feature). I'm not the best teacher out there, so I'm only speaking from my own understanding. Your code should look like this in the CSS file:

#background {
   width:100%;
    height:100%;
  top:0px;
    left:0px;
  position:fixed;

}

You can view to see if your code is working properly by clicking on the black arrow like I had mentioned in the "Output" button. Your image should cover the entire HTML document.

Step 4. Creating the letters

Finally, the fun part! We're going to want to create our first letter on our HTML document - the letter "A". Starting with the HTML file first, we're going to want to make a <div>. In this div, we're going to need an attribute ID and call it "letterA".  This helps us distinguish our elements if we ever get caught up in something by accident, so it's important that you name your IDs' carefully. Make sure you put the actually letter "A" in the div so that it'll show in the HTML document.

In the CSS file, give your letter "A" a color using the "color" attribute. After you do that, give your text a font, a size and a position set to "fixed". We don't need to move this letter, so it can remain in it's place.

Step 5. Second letter and the use of jQuery


Repeat the same method as last time (in step 4) for the second letter. But we're going to need to use the "margin" property in the CSS file this time to move your second letter from the first.

I created another <div> with a similar ID name to identify the letter and then embedded some CSS code.
The difference in the CSS file is the "margin" property, which I set to a hundred pixels. This allows it to avoid conflict between the two objects by separating them instead of being on each other. The second letter will rest aside on the right-hand side next to the first letter.

Here comes the jQuery part! We want our letters to expand when we hover over them. But when we leave from that letter, we want it to go back to it's regular size. The code "mouseenter" stands for when the mouse hovers over an object, while "mouseleave" stands for when the mouse leaves an object - kind of makes sense, doesn't it?
 In the mouseenter function, I expanded the letter using the .css method. It's literally just another way to edit an element instead of doing it within the CSS file itself, making it easier for programmers to change how something looks and appears. Your outcome should look like this in your output, and moving your cursor across the letters should expand then go back to it's regular size when left:

Step 6. Getting Audio (soundfxcenter)

Now, finding audio for your games and stuff is really difficult. Really difficult. In fact, it took me nearly days to get good audio for those letters! But my determined self never gave up, so I landed upon Soundfxcenter.

It's a really good website that provides nearly every audio and sound effect for you. I definitely recommend that you get your audio from here. It lags kind of bit, but there aren't any pop-ups nor viruses on there. So don't be shy.

If you search up "Letter sounds", you should be able to find the exact same audio that I have. Try to find the "A" letter sound first, then "B", "C" and so on. But here comes the tricky part:

You don't want to download the actual file - you want to copy it's link location instead. So, to do this, left-click on the "Download MP3" link and drag it into your URL box at the top. The link should have ".mp3" at the end of it, indicating that it's an MP3 file. Copy the link and move onto the next step!


Step 7. Making Use of the Audio

Now that you got your audio link, let's put it to use.

This part of code involves the use of actual JavaScript this time, so if you know JavaScript and at least one DOM method, you're good to go.

1. We created an variable called "letterA" and then turned it into an "Audio Object" by using the new keyword. 
2. After we did that, we put out link inside of quotations, closing off the piece of code with a semicolon. 
3. Then, we called upon that Object, using the method .play() to activate the sound we provided.

Now you have your sound working! High five-- I mean, air five! Feel free to test it out in the "Output" section. But just to note, if the sound doesn't work right away, give it time. Loading your code is a lot of work for your HTML document.

Step 8. Repeat, Repeat, Repeat. You're On Your Own

Create another <div> tag with a letter inside of it, give it an ID, utilize some CSS code, margin it (to the correct spot aside the other letters) and then use the same jQuery code demonstrated in Step 5. Basically, repeat yourself.  Your code should look very similar to mine after a while, except the fact that I used the <span> tags for no reason in my code..

Once you're done with your program, please submit it for viewing in the comment section! I'd love to see your creativity, work and skills. Thanks for reading this and I hope you learned a great deal from it. :)

- Yazid