Mighty Dream

A Few Things…

Thu, 22 Jul 2010 13:56:01 -0400

Hey, you! This tumblelog’s been quiet for a minute, but I recently made a couple updates that are worth touching on.

Ads by Yoggrt

Not one for ads in general, I’ve caved in and joined the Yoggrt ad network as a publisher. Really, though, I don’t see it as “caving in” because they’re some of the classiest around — small (160x90 pixels), unobtrusive, well-designed, and the advertisers tend to relate in some way to the content I publish. I think I’ve also managed to integrate it into the sidebar pretty well, too.

New Web Clip Icon

With the arrival of the iPhone 4 (and the iPad, for that matter), my old 57-pixel Web Clip icon wasn’t looking too hot my home screen. So, I whipped up a new 114-pixel icon, uploaded it, and tested it out. Quick and easy, right? Unfortunately, no. The new icon was showing up crisp and clear on the “Add to Home” screen, but once it was added to the home screen, it was blurry and pixelated. Thinking the apple-touch-icon meta tag was wrong or outdated, I investigated further only to find jQTouch was still handling everything correctly. Does the icon have to be in the root directory? Nope. Looking around, I noticed some people were using 129-pixel icons; so I scaled mine up, but that didn’t fix the problem either.

Thinking I was going crazy, I finally came across a post by Walt Dickinson mentioning the same problem. Apparently, if you’re using apple-mobile-web-app-capable meta tag (which I was) to make your web app look more like a native app (fullscreen, no Safari chrome), there’s a bug in iOS4 that distorts the icon on the home screen. Ugh, really? Nevertheless, I removed the tag in favor of a crisper looking icon. So, until they fix it, it’s basically just a bookmark to the mobile site.

Tidying Up

Aside from these, I’ve cleaned up a couple other minor things:

Updated social network links: removed Facebook and Brightkite, added Dribbble and Gowalla
Recent authentication changes to the Twitter API caused the ‘recent tweet’ box on my About page to return blank — it’s fixed now
Pushed the logo a little to the left
Updated my @font-face declarations to make them more compatible
Changed the two photos of me to ones taken this year

And that’s it. I’m looking forward to being a part of Yoggrt network for a couple reasons, but mostly because I’m hoping it reinvigorates my posting habits, particularly with more original content. We’ll see.

FontFonter

Wed, 21 Jul 2010 12:24:47 -0400

FontFonter:

simplebits:

This is a wonderful tool. Enter a URL and replace its fonts with any of FontFonts web fonts. Hmm, this site looks rather nice with FF Dagny and FF Meta Serif replacing Helvetica and Georgia.

Kinda diggin’ my site with FF Kievit Web.

Louis Harboe has recreated the iOS4 icons in Pure CSS. These are...

Mon, 28 Jun 2010 10:53:24 -0400

Louis Harboe has recreated the iOS4 icons in Pure CSS. These are incredible, and totally resolution independent. (via webkitbits)

"Getting a large, diverse group of people to agree […] means the designer has to be a strategist,..."

Fri, 23 Apr 2010 02:03:48 -0400

“Getting a large, diverse group of people to agree […] means the designer has to be a strategist, psychiatrist, diplomat, showman, and even a Svengali.”

- Paula Sher (via Blake Macleod, Signal vs. Noise)

A promotional product for audio firm, GGRP, the record jacket...

Thu, 25 Mar 2010 14:07:09 -0400

A promotional product for audio firm, GGRP, the record jacket transforms into a record player that is manually operated with a pencil. Be sure to take a look at the accompanying 50s-style instructional video, too. Designed by Grey Vancouver. Now, how can I get ahold of one?

jarredbishop: Extension.fm is really quite awesome. Once...

Sun, 21 Feb 2010 14:19:00 -0500

jarredbishop:

Extension.fm is really quite awesome. Once installed, when you view a page (or your dashboard) that contains mp3s, they get added to your library (sortable by blog, artist & album).

Another great feature is that whenever you play an song on a page, it gets played in the plugin (and not the page) meaning you can close that page, or go elsewhere and the song won’t get interrupted (probably my biggest gripe with web-based music).

My only feature request would be shuffle functionality. If you need some fodder to fill your library, stop by ♪.tumblr.com & eplp.

Driver's Seat

Fri, 29 Jan 2010 14:54:25 -0500

Growing tired of my current crop of wallpapers, I set out to create something non-distracting and easy on the eyes, and that I could leave up for a while and not get burnt out on. So far, I’m about one month in, it’s still up and I’m not yet tired of it — your mileage may vary. Named after those perforated, breathable seats found in many automobiles, here’s Driver’s Seat:

Included are both Apple-branded and plain versions in the following sizes:

1920x1200 (Cinema Display)
1400x900 (15” MacBook Pro)
1200x800 (13” MacBook [Pro])
320x480 (iPhone)

"Whatever work you do when you are procrastinating from other things is probably what you should be..."

Wed, 20 Jan 2010 17:01:26 -0500

“Whatever work you do when you are procrastinating from other things is probably what you should be doing for the rest of your life.”

- Jessica Hische, as said in her Humble Pied interview. (via Shaun Inman)

Optimized for Small Screens

Thu, 07 Jan 2010 15:34:00 -0500

Before launching this site, I had plans to create two alternate optimized versions: one for iPhone, iPod touch, and devices that run Android (for simplicity, I’ll refer to this version collectively as iPhone-optimized), and one for all other mobile devices. Shortly before taking off for the holidays, I wrapped them up and they’re now live (iPhone-optimized, mobile-optimized). The iPhone-optimized site incorporates the fantastic jQTouch by David Kaneda while the mobile-optimized site is much more simple.

iPhone-Optimized Site

I’ve been keeping tabs on jQTouch for a while now and was glad to finally take it for a spin. For those in the dark, it’s a jQuery plugin that provides a powerful framework for quickly building mobile web applications. While not limited to use on iPhones and iPod touches (it’s geared to work just as well on Android-powered and other capable devices with WebKit-based browsers, though I can’t test and confirm), the interface, included themes, and experience are based heavily on that of the iPhone OS.

With the help of jQTouch, I was able to build an iPhone-optimized counterpart that retains all the same content from the full site relatively quickly and without duplication of content. The about page copy, work entries including their image sets, Tumblr posts, and contact form — it’s all there.

Integrating Into CakePHP

Since the main site is built with CakePHP, implementing an alternate iPhone layout was, well, cake. First, the layout (located in views/layouts/iphone.ctp) is triggered in the AppController’s beforeFilter method when the sub-domain, i.mightydream.com, is accessed; here I also set a globally-available variable called is_iphone to true which is helpful later in the individual controller actions:

class AppController extends Controller {
	...
	
	function beforeFilter() {
		if ($this->Session->host == 'i.mightydream.com') {
			$this->layout = 'iphone';
			$this->is_iphone = true;
		}
	}
}

Now, it’s business-as-usual in Cake with a minor addition to each controller action that also renders a view for the iPhone-optimized site. Each interior page in the iPhone interface is loaded on-the-fly via Ajax to help keep the initial payload down; these requests are made using the same URL structure as the main site (e.g. /about, /work, /work/giftag) and, thus, use the same controller actions. If the previously-set variable, is_iphone, is true, the iPhone view is rendered instead of the normal view:

class WorksController extends Controller {
	...
	
	function index() {
		$work = $this->Work->find('all');
		$this->set('work', $work);
		
		if ($this->is_iphone) $this->render('iphone/index', 'ajax');
	}
}

The addition of the ajax parameter used in the render method causes the view to be rendered by itself without a surrounding layout. And that’s it. These examples are simplified, but at the most basic level this is how I provide an alternate layout.

Styling It

I started with the “Apple” theme included with jQTouch and made various tweaks to fit my own preferences and needs. I cleaned up a few minor pieces that were slightly off, added a tilted arrow for links that open in a new window, and added style support for the spinner shown as sub-pages are loaded via Ajax (which is all of them). Now that it’s up and running, perhaps my next urge will be to bring it more in-line with the full site, design-wise.

I also took advantage of jQTouch’s simple support for bookmarking sites on the home screen. When bookmarked, you’ll see a custom icon, a loading screen, and true full-screen support which ditches the Mobile Safari address and tool bars.

Image Galleries

For the image gallery in each work entry, I used a modified version of the jQTouch extention, jQTouch-Gallery, by Ryan McKillen. It provides a nice interface similar to the native iPhone photo gallery including tapping once to toggle the title and navigation bars for a full-screen view.

It was also a breeze to implement and I had to make only a few minor modifications: (1) I rearranged the contents of the title bar, and (2) I changed the look of the navigation bar. The transitions I’d like to bring more in-line with the native UI (sliding only the image instead of flipping the image including the title/navigation bars), but that’s all for another day.

Handling Auto-Redirects

There’s much discussion surrounding how to handle directing visitors to companion mobile site(s). I settled on the approach of automatically redirecting mobile users to the appropriate site, then providing a way to view the full site. On the iPhone-optimized site, tapping the View Full Site button on the home page will take the user to the full site and remember this preference for 30 days by setting a cookie. Revisiting the iPhone-optimized site directly will reset this preference and return the auto-redirect behavior to normal. The code in question also sits in the AppController’s beforeFilter:

class AppController extends Controller {
	...
	
	function beforeFilter() {
		if ($this->Session->host == 'i.mightydream.com') {
			...
		}
		else if ($this->Session->host == 'm.mightydream.com') {
			...
		}
		// or force layout for mobile agents
		else if ($this->RequestHandler->isMobile()) {
			// iPhone & Android
			if ((stripos($_SERVER['HTTP_USER_AGENT'], 'iPhone') || stripos($_SERVER['HTTP_USER_AGENT'], 'Android'))) {
				// if the iPhone cookie is simply not set or the user has not tapped "View Full Site", redirect to iPhone site
				if (!isset($_COOKIE['MDRM_iPHONE']) || (isset($_COOKIE['MDRM_iPHONE']) && (bool)$_COOKIE['MDRM_iPHONE'] != false)) {
					header('Location: i.mightydream.com');
				}
			}
			// mobile
			else {
				header('Location: m.mightydream.com');
			}
		}
	}
}

Mobile-Optimized Site

The mobile-optimized site doesn’t need much explanation—it’s simply the raw HTML of the full site with the CSS stripped out. I don’t believe many people will see/use this, therefore I didn’t put much effort into it. It’s here more for the “see, there’s a mobile version, too” factor.

Delta boarding pass redesigned by Tyler Thompson. More...

Mon, 04 Jan 2010 23:16:06 -0500

Delta boarding pass redesigned by Tyler Thompson. More here: Redesigning the Boarding Pass (via @awilkinson)

"The worst thing you can do to anybody trying to be creative is to demand participation in their..."

Sat, 19 Dec 2009 21:03:05 -0500

“The worst thing you can do to anybody trying to be creative is to demand participation in their vision.”

- Chuck Klosterman (via marco)

chrisbowler: A smart looking app by the team at overcommitted,...

Fri, 18 Dec 2009 13:57:25 -0500

chrisbowler:

A smart looking app by the team at overcommitted, Tripmix is a nice idea wrapped in a great UI.

[ via @motherfuton ]

Outasight - Catch Me If You Can Off Outasight’s free...

Thu, 17 Dec 2009 17:29:00 -0500

Outasight - Catch Me If You Can

Off Outasight’s free mixtape, Further, in preparation for his near-future full-length, From Here to Eternity. I’ve only recently become aware of this guy, but I’m diggin’ the rap/soul hybrid over gritty, sample-based beats.

Quick File-Sharing Apps

Thu, 17 Dec 2009 16:43:52 -0500

Lately, there’s been an explosion of quick file-sharing apps bursting onto the scene. Droplr, Cloud, and TinyGrab stick out the most to me and of them I’ve used Droplr and TinyGrab. Cloud is still in invite-only phase, but according to Chris Bowler, it shares many similarities with Droplr and, in the end, he prefers Droplr.

Droplr is well-designed (both the app and web interface), quick, and unobtrusive. You simply drop any file on the app icon and voila! — a short link is generated and automatically copied to the clipboard. When visited, an ad accompanies the shared file, but they’re supplied by Fusion which gets a pass in my book.

TinyGrab works a little differently. First off, it’s limited to sharing screenshots, but it actively watches for the native OS screenshot key command (both Mac and Windows supported) and instantly uploads the image and generates a short link. One particularly nice feature of TinyGrab is that it lets you use your own personal server space to host your images, though it’s not required.

(This isn’t meant to be a full-fledged review post, especially since I haven’t used one of them. Just merely some linkage for a nice Thursday.)

Letter Cups Part of my personal iPhone photography collection...

Thu, 17 Dec 2009 15:58:52 -0500

Letter Cups

Part of my personal iPhone photography collection (see original post).

"Design is a problem-solving activity. It provides a means of clarifying, synthesizing, and..."

Thu, 17 Dec 2009 15:12:07 -0500

“Design is a problem-solving activity. It provides a means of clarifying, synthesizing, and dramatizing a word, a picture, a product, or an event. A serious barrier to the realization of good design, however, are the layers of management inherent in any bureaucratic structure. […] At issue, it seems, is neither malevolence nor stupidity, but human frailty.”

- Paul Rand on The Politics of Design

The Apple Store's Checkout Form Redesign

Thu, 17 Dec 2009 14:18:46 -0500

The Apple Store's Checkout Form Redesign:

Luke Wroblewski takes a close look at recent changes made to the Apple Store’s checkout process. Some nice improvements that make the process simpler, quicker, and easier to visually digest and comprehend. (via blakem)

Tor & Sufjan Stevens - Star of Wonder / None Shall Pass (ft....

Mon, 23 Nov 2009 13:21:35 -0500

Tor & Sufjan Stevens - Star of Wonder / None Shall Pass (ft. Aesop Rock)

From Montreal-based producer Tor’s mashup project, Illinoize, a 7-track album of beats made entirely of samples from Sufjan Stevens’ albums remixed with hip-hop vocals from Aesop Rock, Gift of Gab, Outkast, and others. The whole project sounds so smooth and natural, you’d think it was originally meant to be this way. Both vocal and instrumental versions are available for free download.

'Simplenote restyled' is Now Official

Mon, 16 Nov 2009 15:44:00 -0500

Shortly after releasing my Simplenote userscript, Simplenote restyled, the fine folks at Cloud Factory (creators of Simplenote), Mike and Fred, kindly asked me for some help with the look of their web application. I happily obliged and offered to merge my restyling effort into the official Simplenote web application. Just ahead of a significant pending update to the iPhone app (detailed here), today they released the updated web application with the new look.

So, what’s happening with Simplenote restyled? It’s not much of a restyling anymore since it’s now the official style, but the script is still necessary if you use Simplenote with Fluid and prefer the interface dynamically stretch to the fill the window. Today, I’ve updated the script to account for the new changes including support for the new landscape mode. If you’re currently using the script, simply empty Fluid’s cache and refresh to grab the updated script.

Review: Magic Mouse

Fri, 13 Nov 2009 16:49:00 -0500

I’ve been using a Wireless Mighty Mouse for the past 2.5 years and have never quite understood the vast amount of hate it received—I’ve always liked it. Sure, the scroll nub would occasionally get clogged, but the hold-upside-down-and-rub-with-paper trick always seemed to clean it out and fix the problem. That said, this past weekend I went out and bought a Magic Mouse with no legitimate reason for replacing my Mighty Mouse other than I’m a sucker for new Apple gadgets [read: fanboy — yeah, I can admit it].

With my Mighty Mouse, I grew accustomed to using the side-button-squeeze for Exposé and the middle-click for Dashboard. So, it seemed I’d be taking a step back with the Magic Mouse as it’s missing the side buttons and the software doesn’t support a middle-click nor configurable gestures that would work well for Exposé. But after trying it out at the Apple Store, I was damn-near sold on the momentum scrolling alone—I figured I’d learn to trigger Exposé via another method like hot corners or control+right-click. Plus, I had a feeling Apple would soon release a software update with support for more gestures (like their newer trackpads) or developers would beat them to it. Reservations aside, I bought it. (Aside from the mouse itself being specimen of beautiful industrial design, the packaging is also very well done.)

So, here we are after 6 days of solid use and I’m officially sold. After the first day or so of use, I was admittedly a little hesitant. A couple times I caught myself squeezing it hoping to invoke Exposé. And, the thing does sit really low.

But, I had to expect some awkwardness when changing mice due to the muscle memory developed from using the same one for so long. Now, I’m used to (and like) it’s low profile, I can’t imagine scrolling without momentum, and I was right, there are already a couple apps available that add support for more gestures. Currently, I’m using BetterTouchTool to add a 3-finger swipe-down gesture to trigger Exposé (all windows), 3-finger swipe-up for Exposé (application windows), and 3-finger click for Dashboard. I now have all the functionality of my old Mighty Mouse and room to grow with more gestures. This thing is nice.