I am Drew Yeaton

House off the grid – a graphic I made for a project I’m...

Thu, 29 Apr 2010 10:44:00 -0400

House off the grid – a graphic I made for a project I’m working on.

Beautiful Buttons with Sass Math

Sat, 10 Apr 2010 14:10:07 -0400

Just recently I attended a Ruby User Group meeting where John Hwong of Mutually Human gave an excellent overview of “Unobtrusive CSS”. He made the case for using tools like Compass and Sass to build CSS stylesheets cleaner, quicker, and with less fuss. Compass is a framework built on Sass that allows for quick CSS authoring using sass-ified CSS Frameworks available through the use of mixins. This in itself is slick. But, you soon realize this is only the start.

I’ve always been a stickler for detail and concision—in my code and in my design work. CSS presents a problem for me because of necessary IE hacks, cross-browser workarounds, and the general massiveness of a typical CSS document. With Compass/Sass I can eliminate all of these problems by tucking complexity into a mixin and invoking it from my primary Sass document.

The first problem I wanted to solve was creating beautiful cross-browser CSS buttons with size flexibility and a seamless workflow. This is what I want (ignore the crazy colors):

I had the code from an earlier project (the original CSS was borrowed mostly from work done by the Filament Group as shown here), which looked something like this:

.sign-up form button.medium { padding: 0 12px 0 0; font-size: 1.2em; text-align: center; background: transparent url(‘../images/grey_36_button.png?1270778569’) no-repeat right -140px; }

.sign-up form button.medium span { padding: 9px 0 0 12px; height: 27px; background: transparent url(‘../images/grey_36_button.png?1270778569’) no-repeat left top; color: #444444; text-shadow: #dddddd 0px 1px 0px; font-weight: bold; }

.sign-up form button.medium:hover { background-position: right -210px; }

.sign-up form button.medium:hover span, .sign-up form button.medium.hover span { background-position: 0 -70px;}

In terms of CSS, these few lines aren’t too bad. However, I like to layout my sites to a grid, and I have standard font size that I’d like to use. So, for every different button size and style I’d have to figure out the proper padding, margin, and font size using a rubric in my head.

With Sass I used a little math to do all of this for me. I feed the mixin call the vertical height (in pixels) of my button and Sass spits out the CSS for the perfectly proportioned button. This is all well and good. However, I like to keep my font size definitions in em units (for these reasons among others). Since I’ve made my em unit equal to 12 pixels, I know what I’m working with. This presents a problem because we need to take the button height, which is in pixel units, and determine some appropriate font size, which is in em units. It obviously doesn’t work to do something like:

!font_size = (!pixel_height / 45px - .4px) * 1em + .8em

This is because it doesn’t make sense to multiply a physical unit by a relative one. But, we can make one of the terms of this equation unit agnostic using this little trick:

!font_size = ((!pixel_height / 45px - .4px) / 1px) * 1em + .8em

I assume this works because the quotient of the interior term is no longer in any unit. Consider for example, that 10 dogs divided by 2 dogs is 5, not 5 dogs. Basically, the trick is to divide by a value in units that you are converting from.

Here is the full listing for my fancy buttons:

Now, with this set up, I can make a button sprite that looks something like this:

And invoke my beautiful button mixin with a single line like so:

+fancy-button-base
button.large
+fancy-button-scaled(“grey_45_button.png”, 45px)

Feel free to use this code in part or in whole. Be sure to let me know if you make something neat. Enjoy!

Python Gowalla API Client

Sun, 21 Feb 2010 22:46:15 -0500

To commemorate the first version of my Python Gowalla API Client, I’ve created a mock item for it. I plan to make a small intro/how-to page for it, but now I’ll just tease it with this banner.

If you haven’t already, check out the client here:

http://github.com/sentineldesign/python-gowalla

Box Model Study

Sun, 21 Feb 2010 22:13:12 -0500

After looking at a the instruction manual for a Lego set, I got an idea for representing the peculiarities of the standard and Internet Explorer 6 box models. These will be used in a CSS “anti-framework” I’m developing. More on that soon, but for now, here are my box model diagrams.

The layers represent the stacking order of each element (something other diagrams come close at representing, but aren’t nearly as detailed at portraying).

Standard box model:

Internet Explorer 6 box model:

If you would like to use these, be sure to attribute Drew Yeaton (drewyeaton.com) wherever they appear.

Gowalla API out!

Tue, 09 Feb 2010 15:30:21 -0500

Last week I noticed that the Gowalla site expose some API GET calls that were yet to be announced. So, on the weekend I made a wrapper for these calls in Python and packaged the code up in order to release it on Github.

So, now that the Gowalla API is officially out, I believe I have the first public Python client. :) Check it out here:

http://github.com/sentineldesign/python-gowalla

Updated CodeIgniter DB2 driver

Mon, 08 Feb 2010 21:05:00 -0500

If you fall into the extremely unlikely event where you both need to access DB2 with CodeIgniter and have run into a situation where the latest database driver doesn’t work, I’ve got the fix for you. This may be because you are setting the charset or you require a different port than 664 (50000 being the port used by many for DB2).

Hence, I have updated the driver to heal all that ails.

http://codeigniter.com/wiki/DB2_Database_Driver/

Why isn't Blueprint (or any other CSS framework) a good idea?

Wed, 30 Dec 2009 02:07:00 -0500

Let me start by saying I really love the idea of saving time when I design and develop a site—I use all kinds of time savers. Any well thought out system that results in cleaner, more maintainable, simpler code is definitely a good thing. Thusly, I’ve used CSS frameworks in the past to save time building layouts and creating grid-based, standards-compliant websites. So, why isn’t Blueprint (or any other CSS framework) a good idea?

To answer this question, you must acknowledge that CSS is not a language that can be properly generalized with a conceptual structure. This is the reason why Jeffrey Zeldman writes the words CSS framework as CSS “framework”—that is, these things are not really frameworks in any sense of the word. They are (or attemtp to be) a one-size-fits-all stylesheet. Given this, the reason why these “frameworks” are bad is not about the frameworks themselves, it’s about the pattern they force you into.

What do I mean—ok, take for example a site I launched for Flipswap a few month back. The total time for designing, developing, copywriting, and launching the site was a little over two weeks. We cut out some best practices like IA and an exhaustive comping stage, but also took liberties with the development of the site. To quickly set type and control measure on a wide page, you normally split large chunks of copy into columns, add a sidebar for meta data, and all the usual stuff that makes a page with a lot of copy easy to digest. However, given our short timeline, I setup Blueprint and did my layout with div’s and classes while marking up the copy. This was a very simple and quick process and we got out some reasonably attractive pages on time. The key here was that I was saving time by doing design/layout while I was writing the markup. I was mixing my content layer (HTML markup) and presentation layer (CSS).

What I had done was paint myself into a veritable corner. That is, I had ignored the good natured sensible me that would markup the copy with semantically sounding classes and ids in favor of a me that was essentially creating a table layout. This is the pattern that Blueprint and other CSS frameworks force you into. When it comes time to redesign or reuse pages for a future site, I will have to redo everything over again. That’s not so much a timesaver as it is a pain in the ass. For the sake of clarity, here’s some example HTML to illustrate my point:

Valid, standards-compliant Blueprint framework-based layout

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Iqui officia deserunt mollit anim id est laborum.

Valid, standards-compliant table-based layout

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Iqui officia deserunt mollit anim id est laborum.

Honestly, what’s the difference between these two things? Both have no content/presentation separation and no semantic markup. When you design with a CSS “framework” you may as well design with tables. Welcome to 1997, how does it feel?

So, what could a CSS framework be good for? It’s good for the one scenario where you are using a CMS and you have no control over your CSS, you can handcraft your non-semantic HTML by hand, and you never-ever plan to redesign or repurpose your content in an altered form. And that’s it.

SDG + Typekit

Thu, 10 Dec 2009 12:07:00 -0500

Last night I did some regiggering to the Sentinel Design Group site in order to do a bigger redesign quicker and easier in the next few days. Part of that process was upgrading to Nanoc 3, a Ruby-based CMS that generates flat HTML. It’s a pretty simple concept—one that you wouldn’t think is all that helpful—but it really speeds up development.

The interesting part, though, is that I finally added some Typekit flavor to my copy. I’m a sucker for well-designed, subdued style type, and Typekit finally added a bunch of this from the FontFont type foundry.

For the headings I’m using FF Meta Small Caps Web Pro and for the body copy I chose FF Meta Serif Web Pro.

Before:

After:

The Angry Crowd Strikes Again

Wed, 09 Dec 2009 19:39:00 -0500

While I was checking out this slick email marketing site Mail Chimp, I noticed something rather peculiar—the crowd behind the chimp looked uncannily similar to something I’d produced a few years back. I thought for sure they had somehow dug into my discarded pile of Flipswap comps and gleaned a piece of my work. But, alas, it turns out even though there is a likeness, no wrongs have been committed.

I’m kidding of course. But, check it out for yourself. Here’s an unused development comp from April 7, 2007. (Avert your eyes from the hideous Arial Rounded MT Bold, it was the company’s standard type at the time.)

Now, here’s a very similar angry crowd almost two years later:

And the crowd sans-chimp:

By the way Mail Chimp, if you want to pay me back for the artwork that you didn’t steal, I’d totally love to get my hands on that $240 plan for the sweet price of free. Wha’dya say?

MuseoWatch 2009

Mon, 07 Dec 2009 00:36:00 -0500

Whenever I recognize a font that I’ve used before, I immediately develop an irrevocable hatred for it. The latest recipient of this maddening dislike is exljbris Font Foundry’s Museo, an organically-seriffed typeface that I used in the last revision of the Flipswap site. A specimen:

See, here’s how I used it:

The problem came when I saw these two sites last week. These two services look very interesting, but why must they ruin this font for me. I mean, for the love of god, it was free and good. Exhibits A & B here:

By the way, if one of you guys from SimpleGeo could pass me some love in the form of a Beta account, I’ll consider it payment for the beta apps I helped test for CrashCorp. He he he.

WordPress Title Trickery

Tue, 01 Dec 2009 18:16:00 -0500

Here is a bit of the code we’re using on a new site redesign. We needed a custom, more descriptive title on certain pages.

It grabs a title from a custom field if you set one, or just gets the page title if you don’t. Also, since WP doesn’t display the page’s title if you’re on the homepage, we’ll grab custom text from the site’s description (which we don’t use for anything else).


<?php 
	$sep = ’ | ‘;
	$site = get_bloginfo(‘name’);
	
	if(!$title = get_post_meta($post->ID, ‘title’, TRUE)) {<br/>		// we need this because page title<br/>		// isn’t shown when on homepage
		if(is_front_page() || is_home())
			$title = get_bloginfo(‘description’);
		else
			$title = wp_title(”, FALSE, ‘right’);
	}

	echo($title.$sep.$site);
?>

Ok people, this is what happens when you don’t have HIG (human interface guidelines) for your...

Tue, 01 Dec 2009 12:58:09 -0500

Ok people, this is what happens when you don’t have HIG (human interface guidelines) for your platform. These Android Developer Challenge entries represent a core sample of the best applications Android has to offer.

Based on the icons alone, it is clear what kind of junkiness you can expect in app they represent. This kind of stuff is endemic in the open source community.

Do any of these scream “quality” to you?

Python: List Comprehension, Closures & Lambda

Thu, 26 Nov 2009 12:02:00 -0500

The best part of learning is being able to share your knowledge is a way that’s autodidactic & condescending. So, here’s a little (possibly obvious) nugget I came up with for using list comprehension, closures & lambda.

My problem: How do I take a list of n-dimensional coordinates, and make a list of just one of the coordinates?

You could do it like this with list comprehension:

lst = [ [0, 1],[1, 3],[2, -1],[3, 4],[4, 7] ] print [y for x, y in lst] # prints [1, 3, -1, 4, 7]

But that’s lame and we have that ugly thing for every coord we need. How about using a closure to make it more general, like this:

# here we're making a function that makes a function # using 'i' as a way to "customize it". this is a closure. def get_coord_factory(i): def get_coord(lst): return [coords[i] for coords in lst] return get_coord # make a customized function that only returns # the x coordinate. we would make one of these for # y and z too and reuse them. get_x_coord = get_coord_factory(0) print get_x_coord(lst) # prints [0, 1, 2, 3, 4]

But wait, in our closure we have a one line function with no statements and one expression. Sounds like a lambda function to me. Let’s rewrite that factory to use a lambda:

def get_coord_factory(i): return lambda lst: [coords[i] for coords in lst]

Ok, so there you have it, we’ve combined these three nifty features into something that’s useful and entertaining. Here’s the full listing:

lst = [ [0, 1],[1, 3],[2, -1],[3, 4],[4, 7] ] def get_coord_factory(i): return lambda lst: [coords[i] for coords in lst]

get_x_coord = get_coord_factory(0) print get_x_coord(lst) # prints [0, 1, 2, 3, 4]

More on Push

Wed, 08 Jul 2009 10:12:00 -0400

I just came across this little iPhone app that displays Growl notifications on your phone that originate from your computer’s Growl-compliant app. It’s called Prowl, and it’s exactly what I had in mind when I wrote my little piece on iPhone Push notification two weeks ago.

Had Apple chosen to allow 3rd party background apps in favor of its notification service, this kind of thing would’ve been a near impossibility—not for the technical piece that lives on the iPhone, but the huge amount of potential bandwidth and complex infrastructure from the building a service from scratch. Furthermore, it would be Apple with the device that has a battery capacity problem. That’s not really the point though.

Poor Man's Guide: Deployment with Git (and GitHub)

Tue, 07 Jul 2009 10:00:00 -0400

Git is one of those things that when you learn it, you start looking for reasons to use it. I would describe it as frictionless version control. Although the king of nerdy, abrasive verbosity, Linus Torvalds explains it as really just a filesystem—it’s the way that you use it, through its minimal, command-line interface that makes Git so efficient.

The technical stuff I’m not great at, so use the these guides for installation. Also, check out this radical guide for getting started.

So, I use Git for all my personal projects and a few things at Flipswap. But, occasionally I have a need to deploy my work to a live server. I have a GitHub account so my hosted repository needs are taken care of, but I have yet to see a simple script that outlines how you’d actually do a deployment with Git. In hindsight, that’s probably because it’s so easy. Take a gander.

I have a shell script in a directory outside of my httpdocs directory called “private”. The script pulls in any updates from the repo hosted on GitHub into my “site” directory (which is below the “private” directory). Then copies everything sans hidden files (including the actual git files) to my “httpdocs” directory. The script looks like this:

echo “Updating…”
cd site
git pull
echo “Copying…”
rm -rf ../../httpdocs/*
cp -rf * ../../httpdocs/
# do any permission changes here…
# chmod 777 ../../httpdocs/system/cache
echo “Done.”

Poor Man's Guide: Twitter Integration

Mon, 06 Jul 2009 11:13:00 -0400

I was just researching quick ways to integrate a one of my latest Flipswap projects with Twitter when I ran across this obvious, yet non-obvious thing. You can construct a URL that pre-populates the update field with any text you like. It works like this (click it for full affect/effect):

http://twitter.com/home?status=Yeatblog+rocks+my+face+off.

The craziest thing about this “discovery” is that a search on Google for “post to twitter” yields exactly what you need to know in the results.

Autocross Wrap-up

Sun, 05 Jul 2009 23:48:00 -0400

Autocrossed today with Maggie in tow. We had a lot of fun and met some cool people. I’m left with some disappointment though—seems like this time I didn’t get a chance to learn something. Ninety-six cars ran today which only gave time for four 50s runs through the course. That’s one or two laps to “learn” the course and a few to try to get competitive time. The standaround-to-driving time ratio is about 75-1. That is, wait around and “work” for 5 hours and drive for about 4 minutes.

Anyway, had a great time and talked up Flipswap. It was a success (especially since I didn’t have the slowest time of the day this time.) Leaving you with some shots courtesy of Adam and his scooter wielding wife. Great people.

Much thanks to Flipswap for paying for my entry, numbers, and livery. No more car talk for a while. Who knows what will happen this week.

These Jeans Died for Our Freedom

Sat, 04 Jul 2009 00:01:14 -0400

Checkout even more radical family photos. Happy 4th of July internet.

Last Sunday I mentioned this unbelievable cross-country trip by...

Fri, 03 Jul 2009 10:38:00 -0400

Last Sunday I mentioned this unbelievable cross-country trip by Team Polizei completed in 32 hours, 7 minutes. This clip is what I imagine the entire trip was like—white knuckle driving punctuated by chatter about police officers.

According to Wolfram|Alpha, they were traveling an average of 0.1 times the speed of sound (or 76.65 miles per hour).

Tale of the Tape

Thu, 02 Jul 2009 11:09:00 -0400

Regarding my upcoming autocross event at GVSU in a newly sponsored BMW, I thought it would be interesting to compare technical stats from my first autocross at WMAA.

Event
Then: WMAA Autocross, May 17th, 2009
Now: GVSU Autocross, July 5th, 2009

Vehicle
Then: 1985 BMW 318i (E30)
Now: 2002 BMW 330ci (E46)

Classification
Then: HS (H Stock)
Now: DSP (D Street Prepared)

Vehicle Horspower & Torque
Then: 101/103
Now: 225/215

Vehicle Weight
Then: 2395 lbs.
Now: 3318 lbs.

Vehicle Acceleration 0-100 km/h
Then: 11.4 s
Now: 6.3 s

Driver
Then: Drew Yeaton
Now: Drew Yeaton

Experience
Then: None
Now: Some