• See also:
• 2009
• 2010

It sounds trite, but 2011 seemed to have flown by. Every year life seems to move a little faster than the year before.

At first glance, my photography seemed to have taken a back seat this year. That is until I considered two notable changes in my habits as compared to the past:

• I used my iPhone camera almost as much as my SLR. The iPhone 4′s camera was significantly improved over previous models. It’s quality and portability helped capture some moments that would have otherwise been missed.
• Flickr is no longer my only sharing destination for photos. This year Facebook started storing the original size photo, and added very powerful person/place tagging, making it superior to Flickr in many ways.

Please enjoy!

Last September I weighed 198 pounds, had a BMI of 30 (obese), 25+% body fat, pre-hypertension, digestion problems, acne, and borderline high cholesterol. Chasing after my two girls was followed by a half-hour recovery period and a shower.

Then: Puffy and docile—Now: Stone cold predator

Today, one year later, I’m a lean (10-11% body fat) 145 pounds. My vitals are now perfect. I’ve lost 5 inches in my waistline, 2 1/2 ring sizes (new ring!), 1 1/2 shoe sizes, and went from a men’s large shirt to a small.

It’s still strange to say this out loud—I’m fit and healthy.

The perfect storm happened last October. My 30th birthday was looming, I spent 8 hours a day in a room with the ever-handsome and fit Dustin Askins, and my close friend and business partner Steve Brewer had made his own decision to take control of his health (and kicked-ass at it). On a whim, I decided to kick my five or six can a day soda habit. Cold turkey.

I dropped nearly ten pounds the two weeks. This was a wake-up call.

Over the next three months I obsessively counted calories and started cycling with Steve. Eight mile bike rides turned into 50 or 60 mile bike rides pretty quickly.

Fun fact: If you restrict your calorie intake to 1,600 a day and burn 1,000 calories per day on the bike, weight will melt off of you. Also, you’ll fall asleep at 8pm every night.

Thanks to calorie-counting, I dropped about 25 or 30 pounds from October to December. All good, right? I still had digestion problems, I still had high blood pressure, and I was still eating garbage (albeit, carefully metered portions of garbage). The calorie-counting became a ritual, my poor wife…

Finding My Inner Cave Man

My wife went gluten and dairy free late last year after discovering that she had a severe intolerance. I was her biggest skeptic. After doing some research of my own, I found Robb Wolf’s Paleo Solution and our lives completely changed.

Allow me to repeat myself: Our lives have completely changed since discovering the paleo diet.

No more gluten or grains, no legumes, no dairy, no industrial seed oils, no sugar. When you eliminate these things from your diet you immediately realize the detrimental effects that they have on your health. It’s also important to note that Paleo is not a low carb diet, however, by cutting out grains, sugars, and glutens your daily carbohydrate intake is significantly reduced. But don’t worry, you won’t die, your body knows what to do.

Today we follow a very satiating diet of beef, chicken, pork, seafood, eggs, green vegetables, “safe” starches, nuts, and fats.

Crossfit

Back in February, Steve, myself, Dustin, and Burin all joined a Crossfit Gym (Myself, Burin, and Dustin at Grapevine and Steve at Dallas Crossfit Central). I’ve spent the last eight months learning how to run, jump, lift heavy weights over my head, walk on my hands, and row without throwing up. I’ve also made a lot of really great friends.

I push myself to the limit every Monday, Wednesday, and Friday. How many people can say that?

Me, an athlete? Yep.

Show Me Some Stats, BRO

Thank You

I couldn’t have done it alone.

• My wife Kristi for putting up with the cold-turkey diet changes, food quality obsessions, and constant flexing in front of the mirror. She’s also lost over 30 pounds thanks to the Paleo diet.
• Steve, Dustin, Burin, and Ryan for being great workout partners. You four give me something to chase.
• Brandon and Bevin at Grapevine Crossfit have taught me how to be an athlete. They push me everyday.
• Robb Wolf and Nicki Violetti— The Brad and Angelia of the Paleo/Primal Nutrition Community. I’ve been lucky enough to befriend them both. This Paleo gig (Robb’s words) has changed my life.

Want To Know More?

• Robb Wolf’s quick start guide
• Primal Blueprint 101
• The Archevore Diet—Highly recommended. My diet is very similar to Dr. Kurt Harris’s.
• Paleo Hacks

The man who bought it will no doubt love it as much as I did.

Today I’m carrying a top-of-the-line 13” MacBook Air. It’s spec’d out with a 256GB SSD, 4GB of ram, and a 2.16GHz Core 2 Duo:

This machine is a dream. It looks and feels like someone traveled into the future and brought it back. It’s too thin to be real. I’ve owned the last 3 generations of MacBook Pro, and this Air is by far the best machine I’ve ever carried.

Get Real

I’ve hear it all the time—“The Air is nice and all, but I do real work.” I shared the same skeptical attitude. I spend hours a day in Photoshop, Keynote, Aperture, running Rails or Java apps locally, Xcode, testing/developing in my Windows VM—all things that one would consider real work.

I’ll cut to the chase—the MacBook Air handles all of my real work like a champ. Actually, “handle” is an understatement. You see the MacBook Air has a little secret under it’s rigid unibody enclosure—that proprietary SSD. My Intel X25 SSD was fast, really fast. The MacBook Air’s SSD is smoking fast.

Uncached Sequential Read/Write

Uncached Random Read/Write

Apps launch near instantaneous. Reboots take under 30 seconds. It’s so fast that it’s invisible.

Day-to-day life with the MacBook Air is a dream. It’s feather-light, silent, and runs cool as a cucumber. It hardly makes a dent in my bag on my daily bike commute to the office. Don’t even get me started on the battery. It’s practically bottomless.

Ten-out-of-Ten, Right?

Well, close. Maybe a 9.5. I have made a few sacrifices. I occasionally miss the ethernet port when transferring big files over my home network. The lack of a backlit keyboard stinks, but it’s not as big of a deal as I thought it would be. As a photographer I do miss the FW800 and ExpressCard connections that my MacBook Pro had. I can’t tell you how painful it is to dump a 16GB compact flash card over USB.

My biggest hesitation to switch from a 17” was the significant loss of pixels. The more pixels, the better in my world. However, the reality is that I’m plugged into a 30” Cinema Display 90% of the time (which, by the way, the Air pushes like a champ). Even when I’m not plugged in, the built-in display is a dream to use. Sure, it’s less pixels, but the DPI is perfect. The backlight is crisp, and it’s not too glossy (my old MacBook Air was a matte display).

Frank Chimero nailed it today in his post, “The Setup:”

I realized that I valued freedom more than power, flexibility more than blazing speed. I want the choice of being able to be mobile, and to carry around my whole setup with me at all times without much inconvenience.

Like Frank, I value my Air’s mobility far more than I valued my MacBook Pro’s speed. I don’t know if I can ever go back.

This Year’s Photos

In 2010 I snapped 8,439 photos (or, about 219GB) and posted 1,143 photos to flickr.

But it didn’t.

I’m humbled by the support from my peers and the recognition from the community’s most well known designers. Your influence has made this product a success.

Version 2.0

Version 2.0 just hit the servers this morning. It’s chock full of iOS, iPad, and iPhone interface elements. All of the new elements are meticulously recreated in “native” Keynote.

You’ll receive an email with instructions on how to upgrade if you’ve already purchased.

Konigi

I’m very happy to announce a partnership with Konigi. Konigi is a wonderful resource for design & IA tools targeted at UX professionals like you and me. Keynote Kung-Fu will be among very good company.

Keynote Kung-Fu: How Ninjas Wireframe

Keynote is a cheap, friction-free tool to create elegant wireframes in a 
format that’s perfect for presentations, pitches, and hand-offs.

Visio, Omnigraffle, and Balsamiq will be jealous

I’ve been using Keynote as my primary sketching/wireframing/low-fi prototyping tool for years now. Most people cant their head when I tell them.

Previews:

Tickets are still available, mozy on over an Register to see the show.

I love this feature, but I do have a few gripes.

Surface Details:

Conceptually, a folder is a layer below the spring board. When you click on a folder, the spring board splits horizontally revealing your folder underneath. My problem is that the visual design of the folder surface doesn’t look like it’s below the spring board layer. The inner shadow isn’t strong enough and there is a “bowing” to the surface. Not to mention, that “cheese grater” pattern the Apple invented (almost) is totally the wrong proportion.

Application Limit:

You can only put 9 applications into a folder. This is because there only 9 slots (excluding the dock) in the spring board (which gets translated to the preview icon for the folder).

My Take:

The changes are subtle, but in my opinion they make a big difference.

(Not my iPhone)

• No limit to applications: A folder can hold as many apps as you want. There is a badge in the title that tells you how many apps are in the folder. The preview icon simply shows the first nine apps.
• Folders can scroll: Each folder will have a Safari-like scrollbar. It’s there when you need it, and dismisses itself when not in use.
• Visual clues to show more: There is vignetting at the bottom of the folder to provide a visual cue that there is more content that’s not visible.
• Recessed surface: The visual details for the folder surface look more like a layer that is below the spring board. I made the inner-shadow much more prominent, and the background is flat. I also toned down that background pattern.

(Thanks to John from Aptonic for sharing his heatmap with us)

It’s exquisite, isn’t it? His visitors rarely strayed from download, features, and purchase.

This is simple, executed perfectly.

Try it for yourself
Hike on over to Trailhead and test your own site for just $10.

My compadre Steve Brewer and I have a long record of designing and building cool things…for other people. So, three weeks ago we said goodnight to our nights and weekends and started building.

Trailhead is a product that we built to help designers, usability testers, and marketers understand how people use their site by gathering mouse movement and click data. It’s lightweight, simple, and deliberately barebones. There are other services that do this, but they are expensive and complicated, and in my mind, their subscription models don’t reflect the needs of the professionals that use them.

We made it really easy to make your test results accessible to the public. This is great for sharing your results with a team or for bragging rights. Here’s a heatmap of my site:

What’s next

There are still some rough edges in Trailhead, but nothing that would hold us back from launching. We’ll iterate quickly, listen to feedback, and probably make a few mistakes.

Special thanks

Steve and I would like to extend a sincere thank you to Mr. Nathan Smith for helping us test Trailhead on his baby, 960.gs. Thank you Nathan!

Keep in touch with Trailhead

• Trailhead blog
• Trailhead on Twitter
• Small Time Media

There are a millions of flyout, drop down, suckerfish menu generators out there, but all of them are really complex. I just need to show a few options.

Here is what I came up with:

Instead of pasting a bunch of markup into this post, have a look at the live example.

How it works

The markup is super simple. There is a link used to trigger the menu, and the menu itself is an unordered list with some links it.

Scripting

The scripting is also very straightforward (I’m using jQuery, but there is nothing about it that is jQuery specific). Listen for a the .trigger link to get clicked, and display the closest .menu if it’s closed:

var $menu = $('ul.menu_options');
//hide all of the menus
$menu.hide();
$('a.trigger').each(function(index) {
	$(this).click(function() {
		//identify the clostest menu
		$nextMenu = $(this).next($menu);
		if ($nextMenu.is(":visible")) {
			$nextMenu.fadeOut('fast').css('z-index', '50');
		} else {
			$menu.hide(); //close all other open menus
			$nextMenu.show().css('z-index', '500'); //z-index for good measure
		}
		return false;
	});
});

That’s probably good enough for most uses – but I can’t leave good enough alone. The weakness with is that the menu hangs around until you click the trigger again to close it.

Here is the ideal behavior:

• If you trigger the menu and do nothing, it will go away after n seconds.
• If you trigger the menu and mouseover it, it will stay there.
• When you mouse leaves the menu, it will go away after n seconds.

To achieve this, we’ll set a unique setTimeout for each menu and listen for mouseenter and mouseleave events to clear the timeout. Here it is all together:

var $menu = $('ul.menu_options');
var $open = $('a.trigger');
//create an emtpy object to keep track of the timeouts
var menuTimeouts = {};
//hide all of the menus
$menu.hide();
$open.each(function(index) {
	$(this).click(function() {
		//identify the clostest menu
		$nextMenu = $(this).next($menu);
		if ($nextMenu.is(":visible")) {
			$nextMenu.fadeOut('fast').css('z-index', '50');
                        //clear the active setTimout
			if (menuTimeouts[$id]) {
				clearTimeout(menuTimeouts[$nextMenu.attr('id')]);
			        menuTimeouts[$nextMenu.attr('id')] = undefined;
	                 }
		} else {
			$menu.hide(); //close all other open menus
			$nextMenu.show().css('z-index', '500'); //z-index for good measure
			//start a unique setTimeout for this menu
			menuTimeouts[$nextMenu.attr('id')] = setTimeout(function () {
				//fade the menu out after 2 seconds
				$nextMenu.fadeOut('slow');
			}, 2000)
		}
		return false;
	});
});
$menu.find('li').mouseenter(function (event) {
	//store the ID of this trigger's closest menu
	var $id = $(this).parents('ul').attr('id');
	//cancel the timeOut when the mouse is over the menu
	if (menuTimeouts[$id]) {
		clearTimeout(menuTimeouts[$id]);
		menuTimeouts[$id] = undefined;
	}
}).mouseleave(function () {
	var $this = $(this).parents('ul');
	//start another time when the mouse leaves the menu
	menuTimeouts[$this.attr('id')] = setTimeout(function () {
		$this.fadeOut('slow');
	}, 2000);
});

Checkout live example to see it all in action →

I’ve tested this in Firefox, Safari, and IE7 and IE8. You might need to tweak the position of the menu in IE, but everything else is good to go.