Generation Studio

ZB Coding Conventions

I think it's time we establish a standard in layout of code for ZB. Page layouts for ZB currently look very messy, because something like this happens when you get multiple codes from different coders:

Code:

 


<script>
//Code by John of Doe
//http://google.com
//More random advertising here

var a = document.getElementById('ha');
</script>

<script type='text/javascript'>
/* RPG by Ron of TheCodes
To use this, make sure RPG.on is set to true!
If you have questions, visit support.zetaboards.com! */

var RPG = {};
RPG.on = true;
</script>

Obviously, these are two completely different styles of coding! Therefore I've set out to create a standard for people (including me, from now on!) to follow. I'd appreciate your comments on what changes should be made.

1. The script's type is text/javascript.
It doesn't really matter, but proper XHTML is

Code:

 

<script type="text/javascript">

Therefore, define the type (and only the type!) "text/javascript" in the script tag.

2. Wrap scripts in //<![CDATA[
This helps XHTML parsers from parsing your Javascript incorrectly.

Code:

 


<script type="text/javascript">
//<![CDATA[
(code here)
//]]>
</script>

3. Define information in a single /* .. */ at the top of the code.
Standard information: The code creator, information on how to use the code.

Code:

 

/* Code created by Ryura
The variables are Code.On (when set to true, turns it on. Set to false, turns the code off) Code.Link (defines the link for the code, should be in double quotes [""]). */

4. Define a single global variable (object) for your code to use.
Global variables are bad and can cause problems with other's codes, so define a single, meaningful object for your code.

Code:

 

var TopicEnhance = {};
TopicEnhance.text = "Your topics are being enhanced!";

5. Define actual coding comments with // .
Comments in your code help others to understand what is going on. Make your comments meaningful.
Don't do obvious things like:

Code:

 

TopicEnhance.number=1 //Sets number to 1.

6. Use proper spacing.
Indent is 4 types spaces. Don't use the tab key.

Code:

 


function () {
if(something) {
x++
}
}


7. Use jQuery.
Don't use document.getElementById and the like, unless absolutely necessary. jQuery is included on all ZB boards, so use it!

8. Don't pack, minify
Minify your external scripts to increase speed. Do not pack your scripts, for it takes time for them to be unpacked.

Obviously there may be problems with my initial suggestions, or I may be missing some standards that should be created. Comment with your thoughts!

1. Comment by Dennis, Feb 10 2008, 11:40 AM

   Point #1 needs to be <script type="text/javascript">. XHTML uses double quotes. Single quotes won't validate properly.

2. Comment by Interrobang, Feb 10 2008, 04:10 PM

   Really all codes should start with:
   
   <script type="text/javascript">
   //<![CDATA[
   $(function() {
   
   and end with:
   
   });
   //]]>
   </script>

3. Comment by RyuraGS, Feb 10 2008, 05:35 PM

   Thanks for the comments.
   Dennis - I haven't seen that in the specifications for XHTML... can you show me where it says that? I've always wondered. Regardless, I've gone ahead and changed it to be sure.
   
   Interrobang - Added. thanks.

4. Comment by DynamicIP, Feb 18 2008, 08:11 PM

   Also you should remember that
   
   <script src='LINK' type='text/javascript' /></script>
   
   Is bad coding :P.
   
   Since XHTML thinks the script tag is already closed with the /> so never add /> at the end :)...

5. Comment by Chris, Feb 24 2008, 03:44 PM

   I have a few that should be added as a "standard".
   
   Do Not Use:
   document.write('<script src='{script src}' type="text/javascript"><\/script>');
   
   Use this instead:
   $.getScript('{script src}');
   
   Also, I think attributes to tags should be in alphabetical order. For a while now, that is how I release final scripts - if I can help it.

6. Comment by Viral, Mar 3 2008, 06:29 PM

   Chris, $.getScript, can that be used in a function, so it can be run after the page has loaded? For example, document.writing after the page has loaded results in the page being overwritten (why is this?)..

7. Comment by RyuraGS, Mar 8 2008, 07:09 PM

   Yes, Viral, that is exactly the purpose of $.getScript. write() is an interesting function, I'm not sure on the specifics of why it overwrites the page but it surely is some kink in the DOM.

8. Comment by Garath531, Mar 10 2008, 01:48 PM

   I can't read your codes because of the blog bug, but it looks like great advice.

9. Comment by Andrew K., Mar 23 2008, 12:32 PM

   I'm all for it, but what's the issue with using the tab key for indenting?

10. Comment by RyuraGS, Mar 26 2008, 09:12 PM

    Andrew - using the tab key is simply not a good practice. There's no real issue with it - but four spaces is standard. The tab key displays differently across different mediums.

11. Add new comment:

    Post Comment