Remember in an article a couple of weeks ago I was amazed that after 4 years I am still discovering new HTML tags and their uses. Well, it's happened again. Twice in one week!
It's Sunday and I'm hung over and not really feeling up to writing anything monumental, so I thought I'd just share these two useful tips with you. Hopefully this will act as thanks for the overwhelming response I had to the Happy Birthday article. I now have a renewed will to carry on with the site and try and take it even further. Keep watching.
#1. Make forms more user friendly:
Radio buttons and check boxes can be a bit of a pain to use. You have to move the mouse over them and be very exact with where you're clicking. That is unless you are using the <label> tag. A part of the W3C's HTML spec, the <label> tag only works in later versions of IE and in the latest Netscape (6). Older browsers simply ignore it though so you can use it safe in the knowledge you won't be breaking anything. Let's see it in action. Click on the text to the right of any of the input elements to see what it does:
Your favourite colour:
In your opinion:
How do we do this? Simple. Here is the HTML for the first option above:
<input type="radio" name="input" id="input1" />
<label for="input1">Green</label>
As simple as that! The only other thing you "need" to do is add a little more style and make it so that the mouse cursor turns to a hand so the user knows they can click here. Just add this CSS to a style tag on your form or in a .css file:
label {cursor: hand;}
Simple yet effective. My favourite type of tip..
#2. Defining tables made simple:
OK, so we've got a table with 5 columns. You want the first two columns in bold. First column in red and 60px wide. Second column in green and 70px wide. All other columns to be 40px wide. Like so:
Red, bold, 60px
Green, bold, 70px
40px
40px
40px
How would you do this? Until a couple of days ago my code would look like this:
<table><tr>
<td width="60" style="font-weight:bold; color:red">
Red, bold, 60px
</td>
<td width="70" style="font-weight:bold; color:green">
Green, bold, 70px
</td>
<td width="40">40px</td>
<td width="40">40px</td>
<td width="40">40px</td>
</tr></table>
Now that I know about the <colgroup> and <col> tags it would look more like this:
<table>
<colgroup style="font-weight:bold">
<col style="width:60px; color:red">
<col style="width:70px; color: green">
</colgroup>
<col span="3" style="width:40px;">
<tr>
<td>Red, bold, 60px</td>
<td>Green, bold, 70px</td>
<td>40px</td>
<td>40px</td>
<td>40px</td>
</tr>
</table>
In the second example we only have to define the style of each column once at the top of the table. This example doesn't really do the tags much justice and you'll probably be wondering why you should be bothered about. Well, applying it do Domino and the way in which "HTML views" are built we can use it to increase performance.
If you are like me then you probably turn on the view property "Treat view contents as HTML" and create the HTML for each document with <tr> and </tr>s in the first and and last columns and lots of <td>s around each column. If you also had to add the styling as in the first example above this increases the size of the view's index. This affects database size, server performance and the time it takes the user to open a page. If you use the second example and put the style on View Template instead, like in the shot below, then you can greatly increase performance for large views.
So there you go, another simple and useful tip. I am spoiling you this week aren't I...
#3. And finally:
I always thought this wasn't possible until this week. So glad to find that you can change the program uses when you ask Internet Explorer to let you View Source. I've always wanted to do this as Notepad is nice in its simplicity but sometimes you just need more functionality. That's why I now use my favourite text editor to view a page's source. To do this I added the following key to the registry.
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\View Source Editor\Editor Name
This key points to the path of my TextPad install. Here is the result of an export of that key on my machine. You can use a it to create .reg file and automate the Registry update:
REGEDIT4
