Rainbows: JavaScript Text Gradient Engine

Tuesday, 05 January 2010


We use some JavaScript and CSS magic to apply a two-color gradient to any text. Shadows and highlights can also be applied.

This works especially well on big sites or dynamic content where it'd be impractical to create images for every instance.

Similar in spirit to what sIFR or Cufón does in that it dynamically replaces text that you might otherwise need to use static images for. Might be a nice stopgap measure before CSS gradients are fully realizable (in a practical sense) across all browsers.

Modernizr: Detecting Browser Support for HTML5 and CSS3

Monday, 04 January 2010

If you've been looking to implement modern browser features right now then the Modernizr javascript framework is indispensable:

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

The "What Modernizr Doesn't Do" section might make its purpose more clear:

Modernizr does not add missing functionality to browsers; instead, it detects native availability of features and offers you a way to maintain a fine level of control over your site regardless of a browser’s capabilities.

Here's an example taken from Mark Pilgram's Dive Into HTML5 book:

if (!Modernizr.inputtypes.number) {
  // no native support for type=number fields
  // maybe try Dojo or some other JavaScript framework

Crafting Subtle and Realistic User Interfaces

Thursday, 31 December 2009

Mike Rundle has posted an excellent article about Crafting Subtle and Realistic User Interfaces:

The underlying secret to beautiful user interface design is realism: making 2D objects on your screen appear to sit in 3D space with volume, surface properties and undulations that might appear in real life. These faux 3D objects have highlights and shadows just like objects on your desk might have, and they have textures that emulate real objects from glass to sandpaper and everything in between. Designing beautiful user interfaces has more to do with the why than the how.

He goes into some detail about what he calls "Thinking in 3D" and how it can help you craft a compelling user interface. He also provides some downloadable Photoshop layer styles so you can see how he's constructed his examples. Great read.

Using Email Aliases in Mail on Mac OS X

Tuesday, 29 December 2009

This is one of those things that I've wondered about for a very long time but never got around to actually trying to figure out. Apparently, it's very easy to set up Mail on Mac OS X to use email aliases:

Do you have multiple email addresses that are "aliases" to a central email account? If you do, you can configure Mail in Mac OS X so that it can easily get and send email from all of your addresses. Here's how.

This is a built-in (but extremely hidden) feature of Mail, so don't worry… no hacks required. It would be really nice if this also works on the iPhone after a sync, but I haven't tried it yet. (And I really doubt it.)

UPDATE: Wow, it works. After syncing my iPhone via iTunes, the email aliases show up on the iPhone under the "From:" field when sending a message.

(Via Daring Fireball.)

Derek van Vliet's iPhone Development Advent Tips Recap

Sunday, 27 December 2009

Derek van Vliet has posted a recap of his iPhone Development Advent Tips:

Below is a recap of all of the iPhone app development tips we posted in the month of December advent-style. We hope this serves as a one-stop shop for many aspects of iPhone development that are commonly encountered.

The tips range from how to simply open a URL in Mobile Safari to more complicated tasks like string comparison using NSString. The tutorials are clear, easily digestible and should serve as a good resource for commonly used iPhone programming patterns.

Track Downloads and Other Click Events in Analytics with jQuery

Monday, 14 December 2009

A great rundown by Rob Flaherty on how to Track Downloads and Other Click Events in Analytics with jQuery:

The old way to track clicks and outbound links in Google Analytics was to call the _trackPageview function on the click event, passing it a label that could then be searched for in Analytics. One of the problems with this method was that the clicks were counted as pageviews, affecting your total pageview number.

Now Analytics offers an event tracking feature. It can be used to track downloads, outbound links, mailto links, AJAX events—any click event. But the event tracking function still has to be implemented for each event you want to track. Here’s some jQuery that handles the implementation for you.

Google Analytics event tracking isn't all that new, but I haven't seen many articles written about integration with jQuery. There are several jQuery plugins that already do this (e.g., here and here), but Flaherty's article gives a good high-level view of how to do this without using a plugin while defining things like event category and event label in an automated way based on the type of link that's being tracked.

Bulletproof @font-face Syntax

Wednesday, 02 December 2009

According to Paul Irish's article on Bulletproof @font-face syntax, this is the best @font-face syntax to use:

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('Graublau Web Regular'), local('Graublau Web'), 
         url('GraublauWeb.otf') format('opentype');

Check out his article for more information on why this works and the road he took to get here.

Quick Mac OS X Terminal Tip: Piping Output to the Clipboard

Tuesday, 17 November 2009

Just a quick tip if you're working in the Terminal a lot. I realized I was doing a lot of copy/pasting of paths into different Terminal tabs and was growing tired of having to take my hand off the keyboard just to highlight paths for copying. (Yes, I realize that sounds ridiculous but it's actually pretty annoying after a while.) Mac OS X comes with a very handy utility called pbcopy for piping the result of a Terminal command directly into the system wide clipboard. I'm sure this has been around forever but it's new to me.

Its usage is simple. For example, to copy the current path directly to the clipboard, type:

pwd | pbcopy

Note: This also copies the newline character since it's part of the output of the pwd command so if you're pasting this into another Terminal window be warned that pasting will also send an "Enter" keystroke effectively executing your command. For me, this works fine since I'm usually just changing to the copied directory.

Check the man page on pbcopy for more info. (There's also pbpaste which does, well, what you'd expect it to.)

Create Your Own Sliding Resizable Grid

Tuesday, 03 November 2009

If you're a fan of the Grid-A-Licious style resizable grid, Zack Grossbart has written an article showing how to create your own sliding resizable grid using jQuery:

I really liked the effect so I’ve created an improved and simplified version of a sliding resizable grid and released it under the Apache License 2.0.

Setting Up Photoshop For Web, App and iPhone Development

Thursday, 15 October 2009

Smashing Magazine has a great article on Setting Up Photoshop For Web, App and iPhone Development:

Most people who have designed websites or apps in Photoshop will, at one point or another, have had issues trying to match colors in images to colors generated by HTML, CSS or code. This article aims to solve those problems once and for all.

Great article on a long running frustration of mine.