Amped about Web Standards

Evernote is a free service that allows you to “remember everything”.

Think of it as a backup for your brain. With desktop, mobile, and web based interfaces, along with state-of-the-art OCR capabilities, it is literally possible to record nearly anything you see each day and have it automatically cataloged so that is is accessible and searchable later.

Evernote has been around for a few years, but has steadily improved its available interfaces (started out as Windows only) by adding Mac and mobile. (including a free iPhone/iPod Touch application)

I’ve only recently started using it, but the possibilities already have my mind reeling:

• Capture website snapshots instead of just a text link filed away in delicious
• Save an image of each online purchase receipt page, instead of having to print it out
• Take a picture of that great bottle of wine you just drank at a restaurant and you’ll be able to find it again later
• Digitize all of your receipts
• Capture those brilliant ideas you write down on dinner napkins
• Convert your hand-written notes and throw them away

Hopefully I’ve piqued your interest enough to check it out for yourself. Stop taking my word for it, and go read more about Evernote today – it could change the way you backup your brain! As with most free services, if you find yourself really making use of it, there is a pro version for $40/yr that will let you capture more and do more.

If you’re still not convinced, or still don’t get what all the fuss is about, check out the Lifehacker article about it. Lifehacker is a great website dedicated to helping you get more out of life.

Please drop a comment below if you already use Evernote, or if you give it a try and have something to share!

While I work on finishing up an overdue post on the amazing An Event Apart San Francisco conference I attended last week, I thought I would at least write about one of the many new concepts that was discussed.

Progressive Enhancement (PE) is the concept of adding functionality or enhancements to the presentation and behavior of a webpage, using modern technologies such as CSS and Javascript. The PE approach adds the additional features thru externally linked files in order to avoid forcing older/less capable browsers to process data they don’t understand or can’t handle. In other words, the strategy demands that the basic content always be available, then add the fancier layout and features for browsers that can show it.

I’m going to show a quick but usable example of PE using jQuery. In this example, I am going to show how you can dynamically add an “external link” icon – to links inside a specific area of your webpage.

1. download the current release of jQuery (at this writing – 1.2.6) and add it to your webpage in the tag.

2. Next, we will utilize the jQuery approach of executing Javascript code when the Document is loaded and the DOM is ready to be manipulated.

$(document).ready(function() { });

3. Now, if we want to add an image after each external link, we can use the jQuery filter function which will addall elements that match a specified expression.

In the section above, we'll add:

$("a").filter(".selected")

4. The expression will be another function that tests the hostname property of the link to see if it is different that the current page’s hostname.

Try this:

function() { return this.hostname && this.hostname !== location.hostname; })

5. Lastly, we’ll use jQuery to insert the image after the link that matches the test expression – namely an external link!

.after(' <img src="/images/ext.png" alt="External Link">');

6. Let’s put it all together!

Here’s the sum of the Javascript that we’ve written:

$(document).ready(function() {
$('#extlinks a').filter(function() {
return this.hostname && this.hostname !== location.hostname;
}).after(' <img src="/images/ext.png" alt="External Link">');
});

put that code in a Javascript file and include it after your jQuery code in your page’s :

That’s it! Now go give it a try for yourself.

Thanks to my awesome employer – ProBuild, I’ll be attending the web standards and best practices conference – An Event Apart, in San Francisco next week.

Many of the speakers are pillars in the web standards and development community – Dan Cederholm, Eric Meyer, Tantek Celik, and Jeffrey Zeldman, and I look forward to meeting them and hearing them speak in person.

I will follow up with a post on a few of the things I learn there when I return.

GetSatisfaction.com is a community website that encourages conversation between consumers and companies.

Their registration form is a clever, real-world example of how microformats can make life easier on the web.

If you’ve already registered with flickr.com, technorati.com, twitter.com, or any of several other sites, you can enter your id for that website off to the right of the form and it will pre-populate the GetSatisfaction form with publically available information. Specifically, it uses the hCard microformat to extract the public portions of your profile on those other websites. The hCard microformat allows for individual elements of your contact information to be parsed and used.

If you haven’t already, go try out the form at GetSatisfaction and see it in action.

I’ll build a live example of this approach here in the coming weeks and post the code.

With the final version of Firefox 3 due out next week, you might be wondering… what happened to the promise of built-in Microformats support?

Unfortunately, there was never a consensus on how they should be exposed in the UI, so they didn’t get added. Not a total loss though, as they did add a microformats API that can be used by developers.

Adiditional info, see: Where are the microformats in Firefox 3?