Archive for April, 2009

Good Morning Kiddies!

Good old Commodore64 here back to give you a new lease on your HTML pages and code.

This article is not supposed to guide you on how to make pretty, appealing web pages. However it serves to guide you to create code that will be readable by other developers and understandable enough to facilitate easy modification and tracing of structure.

In particularly long HTML documents, where the page structure is defined by enclosing DIVs or SPANs, it is often hard to trace the structure of the page using the code alone. Knowing where to nest a new element or removing an extraneous one could prove difficult. It is for this reason some rules of etiquette need to be set forth.

Tabbing – Tabbing is the most elemental way of keeping code readable and offers a simple way to outline the page’s structure. Using this method, the initial container, usually “MainContainer” or “MainContent” would start at the origin, or far most left on the page. Each subsequent, nested container would be tabbed at least 3 spaces in to clearly show containment within the div that is closer to the left origin of the page. No more than 4 spaces should be used for tabbing, as it will eventually use up all the horizontal real estate on the page and force the reader to have to scroll left and right. In some editors this can also lead to illogical line breaks caused by the relative width of the reader’s screen.

Naming – Proper and consistent naming can make each element in your page collectively serve as a roadmap to the structure of the page as well as describing the individual element’s function in it’s context. HTML elements offer 2 ways of naming that can be consistently and unobtrusively used to specify it’s properties as an element, relative to the page. These 2 properties are compatible with all DOMs as well as CSS. These are : ID and Class. Used together, these 2 props can give the reader a good idea of the general function of the element. For example:

content

When naming elements try to use a mixed-case naming syntax to facilitate easier skimming. For example frmLogin or txtPassword are descriptive enough. All properties should be named to be descriptive of its place in the structure of the page as well as its functionality.

Limiting Line Length

Often when programmers edit code, they have to deal with certain lines of code (usually important ones) that run way off to the right of the screen, prompting the reader to need to scroll left and right. Reading, understanding and editing this type of code requires more cognitive effort since the beginning and end of the line are not both simultaneously visible. When lines run too long, break them up manually. This provides 2 benefits:

• Limiting line length so that the reader can cognitively understand the whole line of code, making any task much easier.
• Taking control of the line breaks in the code ensures that many “word-wrap” enabled code editors don’t take control themselves. When programmatic line breaks are done, they are often not too logical as to where they actually break the line. Limiting line length manually prevents code editors from wrapping lines at places that are neither cognitive nor logical.

Standardized Character Case

The human brain has a natural method of filtering text when skimming. Using a standard method of capitalizing certain parts of names, a programmer can take advantage of this universal cognitive ability by using a consistent form of naming conventions for names, ids, and other variables. One popular form of standardized casing is Hungarian Notation. Introduced by a Microsoft Chief Architect in the early 1980′s, this form of standardized code guidelines has long since been an internal Microsoft convention and has been used outside of the M$ realm as well.

For example sUserId and gsUserName can easily infer the difference between a string and a global string variable. In HTML this can look like frmAddress which is easily distinguishable as a form which collects a user’s address.

Standardizing your casing can also be very helpful when using CSS or XML. These are case sensitive coding standards that simply do not see an object if it is cased differently.

Commenting Judiciously

Most of the time, code editors are faced with code that doesn’t have enough comments to really guide anyone through the code structure. However, perhaps just as cumbersome; code that has too many comments can be close to impossible to read. This only attests to the fact that too many comments, and too few comments are not conducive to easy editing and debugging. The logical conclusion is that comments need to infer facts about the code structure that aren’t apparent. Any person that knows HTML will know what a table looks like. But in the case of many nested tables it would be helpful to see

<!- -Begin Main Structure Table – -> whereas <!- -Begin Table – -> is pretty much useless.

Use well formed HTML

• Closing Tags – All tags should have a corresponding closing tag. In the case of empty elements, the backslash / acts as an inline closing tag. In non-empty elements, a corresponding closing tag should be used such as </table>. HTML can be very forgiving, but this can cause issues with css structures as the css portion of the compiler is already incorrectly reading the structure of your HTML. Therefore, the CSS will inevitably fail as more styles are stacked onto a page which is, quite possibly, incorrectly rendered
• Properly Nesting Elements – These, too can cause improper rendering by the CSS compiler and cause unexpected results, espesically when making full use of the cascading nature of CSS.

Properly Quoted Attribute Values – All attribute values should be quoted, even numeric ones. This practice can aid in making the HTML easier to read as well as preventing problems with the Javascript compiler.

That’s all kiddies! Hope this helps you make some sense out of some of the new code you might be faced with writing. In conjunction, all these techniques will make your life easier and make your pages compile better.

Happy marker-upping!

Commodore64 (The one you used to play Bruce Lee on) ,8,1