I truly love it, and especially in the web, I’ve run into tons of frustrations with designers who completely forget the purpose of design. It’s problem solving.

There was a great turn out at this event, a wonderful venue and some truly awesome speakers. I hope you check some of the others out, too. Thanks to Jenn Troy and Kris Velario for putting Ignite Annapolis together. Another thanks to Dave Troy for being a catalyst for so much Baltimore-area tech and web activity.

Check me out and up my view count if you dare:

The problem is, the default shortcut (F12) is a default/common shortcut for your OS X Widget Dashboard. I wanted to keep it this way, but would get annoyed not having a quick keyboard shortcut to open Firebug.

Here’s how to do it:

1. Click the Firebug icon in the lower right corner of Firefox’s status bar to open the Firebug panel
2. Click the Firebug icon in the top right of the panel
3. Choose Customize Shortcuts
4. Scroll to Open Firebug
5. Delete it’s content and press the combination of keys on your keyboard you’d like to use
6. Press OK.
7. Press OK on the next alert to confirm the keyboard shortcut changes
8. Restart Firefox

Have suggestions? Leave a comment!

Then you discovered the Mac. Sleek. Sexy. Expensive… and the best of both worlds. A Unix-based platform, native Adobe apps, [paid] support, and a real terminal!

But wait, trouble in paradise — our favorite Windows/Linux key commands (Home, End, Page Up, Page Down) aren’t working as inspected. In fact they’re different throughout the OS.

Well, kids, after researching, I’ve finally got a working solution for Terminal.app:

1. Open Terminal.app
2. Open the Preferences window (CMD+,)
3. Click the Settings tab
4. Select your current Settings theme, and click on the Keyboard tab
5. Edit (or Add) the entry for Home
   • Set Action: to send string to shell:
   • Set the string to \001 (or press Ctrl+a)
6. Edit (or Add) the entry for End
   • Set Action: to send string to shell:
   • Set the string to \005 (or press Ctrl+e)
7. Edit (or Add) the entry for Page Up
   • Set Action: to send string to shell:
   • Set the string to \033[5~ (copy and paste this in)
8. Edit (or Add) the entry for Page Down
   • Set Action: to send string to shell:
   • Set the string to \033[6~ (copy and paste this in)
9. Close the settings window.

There you go. Terminal should be ready to use the Home, End, Page Up, and Page Down keys as expected by Windows/Linux users.

SSH into your favorite Linux server, open nano, vi, or emacs and enjoy.

These articles made this article possible:

• The articles Tip of the Day: Fixing Home and End Keys in Leopard’s Terminal.app and Tip of the Day: Fixing Page Up and Page Down Keys in Leopard’s Terminal.app by Ben and Ron – thanks guys!
• KeyFixer – Fix Your OS X Home and End Keys — I’ve had little luck with this app, but it does the same key fixes for many native OS X apps.

While talking with my friend Rob, we wanted to write a quick unobtrusive jQuery snippet to grab all email address on a page with their syntax spelled out, and convert them back to proper email syntax (and even turn them into mailto: links.

So, we did:

$(".email").each(function(){
	var ats, dots, address, i;
	ats = [' (at) '];
	dots = [' (dot) '];
	address = $(this).html();
	for ( i = 0; i < ats.length; i++ ) {
		address = address.replace(ats[i], '@');
	}
	for ( i = 0; i < dots.length; i++ ) {
		address = address.replace(dots[i], '.');
	}
	$(this).html('&lt;a href="mailto:' + address + '"&gt;' + address + '&lt;/a&gt;');
});

Check out a very basic example.

Make sure you’re wrapping the obscured email address in a <span/> element with a class name of email – then drop this snippet inside your $(document).ready() function. ¡Viola!

Some additional notes/caveats:

• You’ll notice that ats and dots are JSON arrays. This allows you to add multiple versions of syntax spelling (i.e. ” at “, ” [at] “, ” at “, etc.)
• The email class can be assigned to any element in your HTML/XHTML document.
• The entire innerHTML of the nodes with the email class assigned will be replaced, so choose wisely. <span/>‘s come in handy here.

Try WPLookup, a small tool I built to make finding these much quicker.

Type in the name of the function/template tags (you can even use spaces instead of underscores), and if the corresponding WordPress Codex documentation exists, it will send you there. Check it out!

Sample Code

For example, consider the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Insert title here</title>
</head>
<body>

	<div id="test" style="float:left;background:#e9e9e9;font-size: 16px;font-family:Georgia;">
		This is a simple test. This font should break
		at the same places on all OS'.
	</div>

	<div style="clear:left;">

		<script type="text/javascript">
			var w = document.getElementById("test").offsetWidth;
			document.write('<div style="width:' + w + 'px;background:red;">');
			document.write( "Width of div is: " + w );
			document.write('</div>');
		</script>

	</div>

</body>
</html>

This code creates a floating div element, that will stretch to the width of the contained text. It then creates another element of text using some Javascript to print out the implied with of the first element. I’ll use this to debug differences in font-size rendering between the two OS’.

Rendering Differences

Now, take a look at the result in Firefox on the Mac:

Now, look at the rendering from Firefox on my XP virtual machine:

There’s a 3px width difference! WHY?

An existing article on the web discussing this could be due to the 72 dpi of OS X versus the default 96 dpi of Windows XP.

It’s frustrating as I’ve never run into this developing on Windows and checking on a Mac, only Mac to PC. Odd. More updates as I investigate and attempt to get to the bottom of this…

Update

So it appears as though it’s the anti-aliasing from Photoshop and OS X. They are rendering the fonts at a smaller aggregate width. I found another post about font rendering philosophies. Apparently, Windows does not use a linear method of scaling the fonts? Hrmph.

Looks like I’m used to Windows, and Apple’s default, proper behavior is causing issues for me in the free-for-all, proprietary non-sensical world of Windows.

I’ll be updating soon. Stay tuned for that, and, oh yeah, actual content.

I’ve been using this for a while at work and in side-projects, an since I’m a dedicated fan of the jQuery framework, I decided to re-write his agnostic version for jQuery and share it with the world.

The Markup (XHTML):

<input type="text" class="populate" name="search" value="" />

The Javascript:

$(document).ready(function(){
	$("input.populate").each( function(){
		if ( $(this).val() == "" ) {
			$(this).val( $(this).attr("title") );
		}
	});
	$("input.populate").focus(function(){
		if ( $(this).val() == $(this).attr("title") ) {
			$(this).val("");
		}
	});
	$("input.populate").blur(function(){
		if ( $(this).val() == "" ) {
			$(this).val( $(this).attr("title") );
		}
	});
});

I’ll create an online demo soon enough.

This is a quick, light-weight way to add some great user-experience and flavor to your UI. If you’re not a jQuery fan, definitely implement Roger’s accessible autopopulating technique.