14 July 2007

GUI Web Code

If you are working on any web team and the UI is constantly fluctuating. I have some tips that you and your team members may wish to follow when writing GUI layer code in order to make life easier for a clean-and-easy-to-update UI. These tips are mainly for asp.net development but can easily be adapted to other languages. These are mere opinions and not guaranteed to improve efficiency.


1. Close your tags shorthand


Inproper:

<asp:Label ID="bob" runat="server" text="close me"></asp:Label>

Proper:

<asp:Label ID="bob" runat="server" text="close me"/>


If there is one thing that makes ascx aspx etc markup hard to read/edit is when someone does this all over the place and you are left looking at medusa's code. I know that devenv closes it for you, but do it yourself. So please if you have nothing in between a tag, close it properly.


2. If a property can be set, set it


Inproper:

<asp:Label ID="bob" runat="server">set me</asp:Label>

Proper:

<asp:Label ID="bob" runat="server" text="set me"/>


This makes code hard to read and increases your compile time by an iota. If you are not going to throw a new tag in between the opening and close tags 1.get rid of them 2.set it in the property of the tag.


3. Indentationess is next to godliness


Inproper:

<div class="bobhere" id="boby"><asp:Label ID="bob" runat="server" text="set me"/></div>

or

<div class="bobhere" id="boby">

---<asp:Label ID="bob" runat="server" text="set me"/>

-----<asp:Label ID="bob2" runat="server" text="set me"/>

-----</div>

Proper:

<div class="bobhere" id="boby">

-----<asp:Label ID="bob" runat="server" text="set me"/>

</div>

or

<div class="bobhere" id="boby">

-----<asp:Label ID="bob" runat="server" text="set me"/>

-----<asp:Label ID="bob2" runat="server" text="set me"/>

</div>


Indentation makes or breaks code readability (in the case of python it breaks functionality). I personally prefer to set devenv to indent using tabs (it's in the options) that way you do not have it like in the case above where you have 3 vs 5 spaces because somewhere somehow you hit backspace, and now how many spaces was it...


4. BR's Are the Devil


Inproper:

<br><asp:Label ID="bob" runat="server" text="set me"/>

Proper:

<div class="bobhere">

-----<asp:Label ID="bob" runat="server" text="set me"/>

</div>


Anyone going over you code to UI it will tell you that they can do a whole heck of a lot more with a div then a br. BR's can interfere with any other formatting that someone is trying to add later.


5. Always set the class, but name it well


Inproper:

<div>

-----<asp:Label ID="bob" runat="server" text="set me"/>

-----<asp:Label ID="bob2" runat="server" text="set me"/>

</div>

Proper

<div class="PAGENAMEbobhere">

-----<asp:Label ID="bob" runat="server" text="set me" CssClass="bobhereTEXT"/>

-----<asp:Label ID="bob2" runat="server" text="set me" CssClass="bobhereTEXT"/>

</div>


Setting the class name to something unique (if it is a onetime thing, otherwise lookup the proper class) allows for anyone doing UI to later to go through and set properties without modifying your code later. Also make absolutely sure you set classnames for asp objects. Notice that I set the classname to something common (when it looked like to me that they would be formatted the same).


6. Anytime you want to deal with placement use DIV's anything else use SPANS


Inproper:

<span class="move"> Move me around </span>

<div class="setmystyle">BIG LETTERS</div>

Proper:

<div class="move">

-----<span class="setmystyle">

----------BIG LETTERS styled and in the position you want

-----</span>

</div>


Not every browser will render span's and div's the same. By not using spans for too much positioning work (some is ok like spacing) you narrow that browser visibility gap.