Web Developer Training – jQuery

Posted by Phil on November 19, 2008 under Javascript, Training Sessions, Web Development | 2 Comments to Read

And now for our quarterly Web Developer Training (because monthly just wasn’t happening).  This quarters training is on the infamous (and my personal favorite js framework) jQuery.  After recieving some requests for a training session on it, I finally got one put together and hope that it benefits everyone in some way.  Also this training is sampling my new training template (not that the old team awesome template wasn’t good enough, it just… well it wasn’t as cool as this one ) If you have any questions etc. throw them in the comments.  Enjoy!

Web Developer Training – jQuery

Web Developer Training: Compression

Posted by Phil on July 30, 2008 under Training Sessions, Web Development | 3 Comments to Read

I may be jumping the gun here, but I thought I’d post the training a day early.  Yes that’s right, I have another training session that may be of interest.  This one has to do with gzip/deflate and various js compression engines (JSMin, PACKER, and YUI).  I may have thrown some other things in there, but I wrote most of this last week, so I can’t really remember .

Let me know if there are bugs to be fixed, or if you have anything you’d like to add.

Web Developer Training: Compression

Developer Training – Sprites

Posted by Phil on July 11, 2008 under Training Sessions, Web Development | 2 Comments to Read

Short post… because the full post is a minisite.  The goodness of sprites cannot be discounted.  They make for a faster site and a better user experience (except for your poorly cache-managed mobile devices… and for that the site really should implement agent identification and direct them to a smaller version of your site anyway).  Anyway you can get the full scoop out on the tutorial-minisite.

Developer Training – Sprites (sponsered by Team Awesome)

Enjoy, and feel free to drop a comment or two

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.