Quick-tip: Textmate’s “Filter Through Command”

I just stumbled across the TextMate menu option ”Filter Through Command”. It does exactly what you’d think. Uses the current document, or selected text as input for a command line function. Here’s a 28 second screencast I made to show you how it works.

While there are other ways to do it, ”Filter Through Command” lets you run selected text through a any command-line operation. Later I used it to update a few Sass stylesheets to the Sass3 syntax with sass-convert --from sass2 --to sass --dasherize. Conveniently, TextMate keeps a history of recent commands, so it’s easy to call up previously used filters.

EdgeRails.Info & Open Blogging

Yesterday, Ryan Daigle launched EdgeRails.info (previously http://ryandaigle.com), which has been a terrific resource for edge Rails junkies for nearly four years. When Ryan approached me to do the design we decided to try something crazy.

Forking Authors

Ryan wanted to stop being the bottleneck for edge Rails news, and so the EdgeRails.info site source is hosted on Github where authors are encouraged to fork the site and submit their articles as pull requests. Anyone with commit access could patch the site, and publish the submission. Likewise, readers can submit patches to correct typos and factual inaccuracies. I like to think of this as Open Blogging, and I really hope it catches on.

Open Blogging

Using Github to manage submissions makes the whole process more transparent and truly opens the site up in a way that database powered blogging software cannot compete with. With a static site, there are no security or performance issues, and with no database to worry about, deployment couldn’t be more simple. If Ryan disappears someday, any one of us could keep the site going by grabbing the source and redeploying to a new server. In every sensible way, it’s truly open.

So what do you think, does this have a chance?

EdgeRails.info is powered by Octopress — a blogging framework I’m working on. It’s not quite ready for mass geek adoption, but I hope to announce that soon.

Moo Cards: A Balance of Freedom & Constraint

In the past I’ve always designed my own business cards, printed them on expensive card stock, and hand-cut them with an X-Acto knife. My cards were way nicer than those my clients had gotten professionally printed with bubbly ink, no-bleed designs, and cheap paper. Though I put tremendous care into my cards, I never was happy with the design.

Why Have Business Cards?

I’m rarely asked for my business card except when I attend conferences, of which I attend one or two each year. As a freelance contractor, I leave work by walking twenty-five feet from my office to the couch. Many of the people I work for I’ve never met in-person.

When someone gives me their business card, I read it, pocket it, and eventually throw it out — sometimes before I remember to copy the information to my address book (sorry, just being honest). The reality is, with the ubiquity of the internet and with frictionless social networks like Twitter, I can connect with people immediately. So why have business cards?

Inspiration Demands Action

In one of our campfire chats Nathaniel Talbott showed off his business cards which he printed through Moo. They were half the size of regular business cards featuring the company logo on the front, and the url on the back. The unique size of the card intrigued me, and days later I couldn’t stop thinking about designing a set of mini-cards for myself.

Moo’s MiniCard’s are very unique. You can print 100 cards, each with a totally different back. With a typical printing service this would be prohibitively expensive, but with Moo the rules are different. This freedom encourages us to go beyond nicely styled contact information and branding. Some clever uses involve offering unique invite codes for a web application, or sharing a photography portfolio with Moo’s Flickr import feature.

I realized that I could print several design iterations and decide later which worked best. Without the pressure to choose a single design, I felt the freedom to create.

The Freedom to Fail

I could be cheeky and print up half of my cards with my logo on one side and only my Twitter name on the other. For less than $20 for 100 cards, I wasn’t even concerned about possibly screwing up a whole batch. So that’s what I did. I designed cards that were good enough and I printed them. If the cards did’t turn out how I wanted them to, I could improve and print again.

The process was fun and simple, and as soon as I finished, I wanted to do it again. When my cards arrived, I was absolutely delighted by the print quality and the care put into their presentation. Smartly Moo even included some beautiful promotional cards to hand out when people inevitably ask about mine.

A Second Iteration

After holding the finished product, I began to see how my design could be improved. I learned that Gill Sans is harder to read at a small size in a high contrast print, so I switched to Futura. I showed my cards to some far-sighted friends and adjusted my font size accordingly. I discarded a background gradient (which I should have known wouldn’t translate well to print) in favor of a solid color. Sidenote: On screen, gradients emulate the subtleties of a natural light source, but on a real object it doesn’t make sense and generally looks bad.

I changed my approach choosing a single design with multiple color variations. In the promotional cards Moo sent me, I learned that they do a fantastic job with bright colors and I wanted to use that boldness in my design. I was inspired by what Seth Godin said:

Every interaction is both precious and an opportunity to delight.

I pictured sliding a card out of my MiniCard Holder and revealing another brightly-colored card beneath. As I hand someone a card they’ll see the flash of color and realize that their card was special, and different from my other cards. That’s what I want my clients and future clients to feel.

The Final Design

The MiniCard’s unique constraints inspired me with a fresh challenge and their pricing model encouraged me to experiment. Instead of treating business cards like a necessary design task, I saw them as a opportunity to release quickly, fail cheaply, and improve. Now when I give someone a business card, it’s something valuable to me, and I hope they’re delighted.

Update: I thought I’d share some other great uses of Moo’s MiniCards. There’s a fantastic Flikr pool, but here are some of my favorites. Enjoy:

• Product tags
• Photography or art portfolios
• Gift tags
• An advent calendar

Fancy Buttons 0.3.6 - Now With Custom Gradients!

If you’re new to Fancy Buttons, checkout the Project Page and the Demo

To make writing custom gradients easier, I’ve written a gradient mixin. To use the gradient mixin you need Compass 0.10 which is currently available as a pre-release. You’ll have to manually install it until Compass 0.10 final is released in the next couple of weeks. Just run this and you should be good to go.

sudo gem install compass --pre
sudo gem update fancy-buttons

To learn how to use the gradients mixin, you can read the source. It’s pretty simple.

Demo Screenshot

Hover to see what they look like without CSS gradients.

This release lets you use glossy, matte, or your own custom gradients, and it has a new inverted click style. For a full list of changes, read the changelog.

How to Write Custom Gradients

The demo shows some small buttons using custom radial gradients. I’ll show you how you can use custom gradients in your projects with the new gradients mixin in Compass 0.10.0-pre2.

Write a “custom-fancy-gradient” mixin that takes two variables, light and dark versions of the base color. This will produce a simple matte gradient.

// A custom gradient mixin
=custom-fancy-gradient(!color1, !color2)
  +v-gradient(!color1, !color2)

To use a different gradient style for when the button is clicked create a mixin named “invert-custom-fancy-gradient”. In this example, I’m changing the colors a bit, and reusing the main custom gradient mixin. That way if I decide to change the type of gradient, I only have to change it in one place.

// The inverted mixin gets triggered when the user clicks
=invert-custom-fancy-gradient(!color1, !color2)
  !color1 = lighten(!color2, 10)
  !color2 = lighten(!color2, 25)
  +custom-fancy-gradient(!color1, !color2)

To use your custom gradient for every button in your project, set a global variable like this.

!fb_gradient_type = "custom"

If you want to only use the custom gradient for some buttons you can always do something like this.

button.custom
  +fancy-button-structure
  +custom-fancy-button-colors(#ddd)

The demo uses a really nice custom radial gradient. Here’s what the custom gradient mixin looks like for that.

=custom-fancy-gradient(!color1, !color2)
  !color2 = darken(!color2, 5)
  +radial-gradient("50% 10%, 10, 50% 10%, 30", !color1, !color2)

=invert-custom-fancy-gradient(!color1, !color2)
  !color1 = lighten(!color2, 10)
  !color2 = lighten(!color2, 25)
  +custom-fancy-gradient(!color1, !color2)

If you want to write your own radial gradient mixin, I suggest browsing the examples on The art of web. It’s pretty tricky, but you can get some awesome effects with a little bit of fiddling.

New Project: Fancy Avatars

I’m sick of ugly default avatars that have no personality so I designed some Fancy Avatars.

I’ve also added a projects page Where I’ll be sharing my open source projects.

Fancy Buttons Are Here!

Update: Fancy Buttons is under active development and this blog post will slowly go out of date. Checkout the Fancy Buttons Project Page »

Fancy Buttons Demo

Fancy Buttons CSS Demo »

Here’s a screenshot of some fancy buttons from the github project example. Hover to see what they look like without CSS gradients.

What’s It Doing?

Here’s a sample of what CSS rules this mixin handles for you:

1. Button reset - to get browsers to the same starting point
2. Rounded corners, Text shadows, and Gradients + vendoring
3. Background image fallback
4. Padding, Text size, line-height, etc
5. Default, Hover, and Active states for all styles
6. Lots of tricky color math to generate beautiful gradients from one color

That’s a lot of CSS to write, effectively reduced to a single mixin. Of course, it’s also great that you can use the bare minimum HTML.

What’s Compass and Where’s the CSS?

In the screencast I’m writing my styles in Sass which is much cleaner and more powerful than CSS. Every time I save the file, Compass automatically compiles the Sass to regular or compressed CSS. If you’re not familiar with Compass, you should check it out because this is the future of open source design. Without compass I’d be posting stylesheets and images, and trying to explain how you could customize them. Compass lets me package my stylesheets as a plugin so it’s easier to share, and easier to use.

IE Support

In IE the buttons don’t have rounded corners. So far, I haven’t found a solution that lets me use clean html without javascript. I mostly design web applications, and while it’s nice to have a visually stunning experience, I’m more interested in usability, than pixel perfection. If you have any suggestions for how to improve the appearance of fancy buttons in IE, please let me know.

I’d like to point out, if you prefer using methods like sliding doors, you can use fancy buttons to generate source images. Just fill a button with no-break spaces ‘ ’ to render an empty button. Take a screenshot and cut it up to use as a background image.

If You Liked This

I’m starting a screencast series about how to use SASS and Compass to be an efficient and incredible web designer. Subscribe for updates.

Demo Page | Gem | Github Project

A Redesign Rumble - “The Dawn of Bliss”

Of everything I’ve learned in the past three years, what I’ve been working on in the last two months is the most exciting. I’m talking about Compass, which I’d describe as “the dawn of a bliss” for web designers.

At the beginning of the week, I tweeted:

5 hour rumble with @pilgrimgeorge on a redesign of http://christiangeorge.org No mockups, straight to HTML/CSS. Compass is my ally. Pumped!

Using Compass (which leverages the power of SASS), I was able to infuse my stylesheets with the power of ‘mixins’ allowing me to be extremely agile during the design process. This enabled me to skip the mockup phase, and go straight to the code.

After five hours we had a freshly conceived design, and time left over to do photography, manage some content, and discuss a roadmap for the future direction of the site. The design process was so smooth I’m working to release it as an open source Wordpress Jekyll template, hopefully in the next month or so.

Check out Christian’s new site here: http://restlesspilgrim.com

This is the first in a series of posts where I’ll share how Compass is improving my design process. I’ll be writing about specific areas where Compass makes my life easier, including source code and links to github where I’ll be sharing many of my mixins.

iPhone Design Evolution

A terrific video, showing the process behind a quality iPhone app design.

Convert Design Evolution from tap tap tap on Vimeo.

The Bell Tolls for IE6

The “Death to IE6” campaign gathers more steam.

Web developers have been trying to encourage the masses to stop using IE6 for quite some time. Some webmasters are so desperate they are borrowing from the malware author’s playbook and trying to trick IE6 users into upgrading

Lately some major players have decided to join the effort (Youtube and Digg among others) and it seems that we might finally be getting somewhere.

Note: This site has not been tested in IE6. If it looks like rubbish I don’t care.

New Site Launch

I’m finally replacing my old wordpress blog with a jekyll powered site. I built this site to host my professional work as a web designer, share my open source projects, and give me a space to write about things that inspire me.

I’m also hosting the source code for generating this site on github so if you’re curious, you’re welcome to have a look under the hood. Although I do reserve rights to the content, you’re welcome to use any code for your own site, if you like.