Weekly Training – Debugging

Posted by Phil on April 3, 2008 under Javascript, Training Sessions, Websphere Commerce | Be the First to Comment

It’s time to learn how to get the bugs out. This week we covered basic debugging (from starting the server) to using some external tools (such as the fantastic Firebug plug-in). For the full show you can check the audio clip at the end (I’ll post it when I’m done ‘cleaning’ it).

Highlights:

• Rational debugging mode
• Firebug (for both CSS editing and javascript debugging)
• Drew’s fantastic commentary as nothing works the way he intends (for the first 20-ish minutes)
• My extremely long pause… that I think I may still be on.

On a side note, there are two other tools that are very helpful when trying to debug or develop on IE, Safari, Linux browsers, etc. They are XRAY and Aardvark, and both are bookmarklets (meaning you bookmark the javascript itself and run it when you need it, similar to a bookmark).

XRAY can be found here http://www.westciv.com/xray/.

Aardvark can be found here http://karmatics.com/aardvark/bookmarklet.html.

Audio clip will be here when I’m done editing it…  UPDATE: Or it won’t, looks like my sansa destroyed the file, I mean it’s still there, just not in a format that any program can read…  I may still play with this, but I’m thinking it’s a lost cause… sorry

Table Style Training

Posted by Phil on February 22, 2008 under Training Sessions | Be the First to Comment

Today we had a very good lesson on the correct way to style and set up good looking tables. Just as a quick recap, I’ll post highlights from the html and css here, as well as the original audio from the training session (40ish minutes).
Here is an example of a table well thought out and coded correctly. Notice the use of classes to facilitate the css in controlling the visual flow of the table.

<table class="standard-table" cellspacing="0">
	<tr>
		<th>Column 1</th>
		<th>Column 2</th>
		<th>Column 3</th>
		<th>Column 4</th>
	</tr>
	<tr class="lightrow">
		<td width="60">Value 1</td>
		<td>Value 2</td>
		<td>Value 3</td>
		<td>Value 4</td>
	</tr>
	<tr class="darkrow">
		<td>Value 1</td>
		<td>Value 2</td>
		<td>Value 3</td>
		<td>Value 4</td>
	</tr>
	<tr class="lightrow">
		<td>Value 1</td>
		<td>Value 2</td>
		<td>Value 3</td>
		<td>Value 4</td>
	</tr>
	<tr class="darkrow">
		<td>Value 1</td>
		<td>Value 2</td>
		<td>Value 3</td>
		<td>Value 4</td>
	</tr>
	<tr class="lightrow">
		<td>Value 1</td>
		<td>Value 2</td>
		<td>Value 3</td>
		<td>Value 4</td>
	</tr>
</table>

Also note, that WordPress absolutly destroys any layout and aligns everything to the left (argh!) Anyway, pressing on, here is a From Table, again well thought out and designed correctly.

<table class="form-table" cellspacing="0">
	<tr>
		<td rowspan="2" class="description">Name:</td>
		<td><input type="text" value="" /></td>
	</tr>
	<tr>
		<td><input type="text" value="" /></td>
	</tr>
	<tr>
		<td class="description"> </td>
		<td><input type="text" value="" /></td>
	</tr>
	<tr>
		<td class="description">City:</td>
		<td><input type="text" value="" /></td>
	</tr>
	<tr>
		<td class="description">State:</td>
		<td><input type="text" value="" /></td>
	</tr>
	<tr>
		<td class="description">Zip Code:</td>
		<td><input type="text" value="" /></td>
	</tr>
</table>

Now if you find yourself wishing you could see the original files, well you can. Simply grab them from here. Also, if you happen to have your “Bulletproof Web Design” by Dan Cederholm handy you can flip to page 153 and start reading there.  I’d also post some css, but the post is getting rather lengthy as is so just grab the zip file to see the fully stylesheet.

And now the part you’ve been waiting for …
The audio from the training.

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.