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.


Using Yourls With Tweetie 2 for iPhone

Friday, 09 October 2009

Tweetie 2 just went live on the App Store and it has a bunch of really amazing new features. One that I’m particularly excited about is that Tweetie now has the ability to use a custom URL shortener (as long as it mimics either the bit.ly or TinyURL APIs). I use Yourls which — as luck would have it — is compatible.

Here’s a quick run down of how to set up Tweetie 2 to use a custom Yourls install for URL shortening:

In Tweetie 2, Go to Settings -> URL Shortening -> Custom. If your Yourls install is set up as public then put in this string:

http://EXAMPLE.COM/yourls-api.php?format=simple&action=shorturl&url=%@

If it’s private, you’ll need to add the username and password parameters:

http://EXAMPLE.COM/yourls-api.php?username=MY_USERNAME&password=MY_PASSWORD&format=simple&action=shorturl&url=%@

Replace EXAMPLE.COM with your Yourls installation’s URL and of course be sure to replace MY_USERNAME and MY_PASSWORD with your actual username and password. You can see the Yourls API docs for more info on why this works.

Custom Shortener

PLEASE NOTE: If your username and password contain non-alphanumeric characters, this WILL NOT work without an additional step. You’ll need to URL Encode the special characters. There are plenty of tools around that’ll do this for you. Just plug in the URL encoded values instead of MY_USERNAME and MY_PASSWORD.

Gone are the days of having to switch to Mobile Safari just to shorten a link with Yourls before posting to Twitter.