Codex: Good Practices

   (0 reviews)

When creating templates we find that browsers sometimes make up for our mistakes and sometimes they don't. However if we adhere to some good practices we effectively won't affect the site that we are putting the template onto or other templates. These aren't all of the "good" practices but they are a start.

Affecting a site's layout

When posting a template using HTML you can effectively change the site that you are posting the template on. For example, you can change the link colors in your entire thread. This is often frowned upon and in general, obnoxious for other users, especially if your template is light and the site is dark, it can make things unreadable. So a good practice for this is to set the outer template with a unique ID and use that ID for anything you would like to change in that template. For example:

<style>
  #myTemplate {
    display: block;
  }
  #myTemplate a {
    color: red;
  }
</style>
<div id='myTemplate'>
  <a href='https://rpginitiative.com/'>My link is red</a>
</div>

 This will mean that only Links (<a href=""></a>) will be red only in my template. This is good practice for img tags, b tags, i tags and more. This effectively contains any of your code within your template. You can do this with classes as well.

Using Common Names

So one mistake a lot of template makers make is that they use names that everyone uses. "template", "outer", "inner" and more. However this can cause adverse reactions to a theme as well as adverse reactions to other templates within the same thread if they are using the same names. Using class and ID names unique to the template will help in keeping things from affecting other templates and the site's theme as well.

What do I mean by unique? Use words that are overall not used. For example, in my own custom templates (for my personal use) I use things like rainbows, magic, unicorn, pegacorn. Also know that caps count. So if you end up wanting to re-use them capitalize differently like rainBow, maGic, uniCorn, pegaCorn. Additionally IDs should be unique.

Using IDs where classes will do

When using classes versus IDs remember to use IDs for unique items. Items that you are going to use again should be a class. IDs are meant to be used once per page. I tend to use IDs for different characters in a plotter but rarely use an ID in a post template. This makes it to where less has to be changed on a per section basis if you're trying to make something unique per character.

Not properly closing your code

While this seems trivial and most browsers make up for our mistakes this is an important thing to look out for when creating code templates as this is likely the top reason your Codex code may be held for changes. When creating a template (or any code for that matter), you should always open and close your tags. From when I was first taught HTML (back when CSS just started to catch on) I was taught when you open a tag you close them in the reverse order always.

So <b> <u> <i> should be closed </i> </u> </b> always. This is still the case. Leaving tags that require an open and a close open can cause adverse affects in the layout and is, in general, sub-par coding. The most common mistake with these are the paragraph code <p>. While the browser assumes the end of the paragraph is at the start of the next <p> code it's improper and can potentially end up with adverse affects. So always end your code with it's closing tag. Things like <hr /> <br /> and <img src='' /> that are single tag codes do not require this so are fine with this singular tag.

If you're curious, when submitting your code to our Codex the part where you input the code will actually show you that it's malformed by having an ending tag in red if it's missing an ending tag in between:

Note that since I didn't end the <a> tag the </div> tag knows something isn't right.

Commenting your code (for ease of reading)

If you need to give a person instructions on how to use your template we require that you use code comments. These are setup in two different styles depending on if you are commenting in the CSS or in the HTML to advise users of what is what. So for an example:

<style>
  /* This is a style comment to explain this changes a link color */
  a {
    color: blue;
  }
  /* You can also make it multiple lines.
  as long as you end it correctly */
</style>

<!-- To comment in HTML you use these tags -->
<a href='https://rpginitiative.com'>RPG Initiative</a>

<!-- This can also be multi-lined.
As long as it is ended properly -->

Using these methods you can explain to a user how to use parts of your template without interfering with the overall template look or needing instructions.

How do I know my code is good

Well the general rule of thumb that I can say is, as long as you don't have any red closing tags (as indicated in the section "Not properly closing your code") and when you submit it that you don't see the Initiative effected or your code directly below the preview of your template (that should be on a separate tab and never shown on the main page of your template) then you are good. If you do see your code below your template try refreshing and if it's still there this often means there is a missing closing tag and that you should review your template.

If you have questions please feel free to ask.