The problem for developers of networks is that you don't want people to leave your application to see a photo or a video, which means that you need a way to only get the media and embed that. Normally this happens using the media provider's API or - if they don't offer one - screen scraping (loading the whole document and programatically finding and extracting the media).

oEmbed is a great idea to work around that issue:

oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.

Flickr, Viddler, Qik, Pownce and Revision3 are the first services to support oEmbed which means you can easily access photos and videos with a simple URL.

Say for example find a nice photo on flickr:

Original URL:

oEmbed URL:

Result:

<oembed>
  <version>1.0</version>
  <type>photo</type>
  <title>? too much myspace error</title>
  <author_name>codepo8</author_name>
  <author_url>http://www.flickr.com/photos/codepo8/</author_url>
  <cache_age>3600</cache_age>
  <provider_name>Flickr</provider_name>
  <provider_url>http://www.flickr.com/</provider_url>
  <width>500</width>
  <height>375</height>
  <url>
    http://farm4.static.flickr.com/3128/2475016321_982666ec95.jpg
  </url>
</oembed>

You can define the output format and the maximum width and height with URL parameters:

oEmbed URL:

Result:

{
  version: '1.0',
  type: 'photo',
  title: '? too much myspace error',
  author_name: 'codepo8',
  author_url: 'http://www.flickr.com/photos/codepo8/',
  cache_age: '3600',
  provider_name: 'Flickr',
  provider_url: 'http://www.flickr.com/',
  width: '100',
  height: '75',
  url: 'http://farm4.static.flickr.com/3128/2475016321_982666ec95_t.jpg'
}

Supported formats for responses so far are photo, video, link and rich.

Christian Heilmann
Yahoo Developer Network

We wanted to remind you that we're kicking off this launch in true SearchMonkey style with a Developer Launch Party next Thursday, May 15. Come get the inside scoop on SearchMonkey, meet with our product managers and engineers over tasty (read: free!) food and beer, see live demos, and take a closer look at the Developer Tool.

When: May 15, 2008, 5:30 -- 8:30 p.m.

Where: Yahoo! Headquarters @ URL's Cafe

701 First Ave.

Sunnyvale, CA 94089

RSVP: Email your full name and company name directly
to searchmonkeyevent@yahoo-inc.com. Space is limited.

For more information on the agenda and logistics, check out the event page.

Events include the by now famous @media conference, the fourth London BarCamp, a Microformats vEvent and Web Roots. To learn about all the events, check the schedule on the web week site.

To kick things off in the right fashion, we will sponsor the London Web Week Opening Party on Monday, May 26, located at the Ruby Blue Bar in London's West End.

If you are in the area, or you are coming to @media anyways, make sure to check out the sign-up page on event wax to secure a ticket, as the space is limited to 200 people.

Hope to see you there and have a blast before making this week even more special than it already is.

• Sign up for a party ticket
• Learn more about the event at upcoming

Christian Heilmann
Yahoo Developer Network

I took this chance to vent some of my ideas on the subject and counteract some of the criticisms I heard about the need for enhancing web solutions progressively.

I've come up with the following "Seven rules of progressive enhancement":

1. Separate as much as possible
2. Build on things that work
3. Generate dependent markup
4. Test for everything before you apply it
5. Explore the environment
6. Load on demand
7. Modularize code

I've explained them in further detail in the slides available on slideshare:

Furthermore I put some more information in an article on the subject: Pragmatic Progressive Enhancement.

The article is licensed with creative commons, so you are very much invited to use and remix it to your needs.

Chris Heilmann
Yahoo Developer Network

It's been a long time coming, but last month I finally pushed out a new design for my personal website, Click on Tyler. I rebuilt it from the ground up using two key tools from the Yahoo! Developer Network:

• YUI Grids and
• YSlow

The new design is really a refresh of the previous look with a focus on readability and speed. I want to take a few minutes and touch on what I learned during this go-round so (hopefully) others might benefit.

Color Scheme

Although I really liked the darker color scheme from before, it was too hard to read. There simply wasn't enough contrast between the body text and the black background. I tried my best to make it work. I searched around for various articles about text legibility on dark backgrounds. I increased the letter spacing, the leading, narrowed the body columns, and everything else I learned in the intro graphic design class I took in college. The results were better, but my gut agreed with all the articles I read online which basically said "don't do it." So I compromised and switched to a white body background, while leaving the header mostly untouched. I find the new look much more readable -- hopefully this will encourage me to begin writing longer posts.

CSS and Semantic Structure

The old site was built piecemeal over a couple months and, quite frankly, turned into a mess font-wise. I had inconsistent headers, font-weights, and anchor styles depending on which section you were viewing. With the new design, I sat down (as I should have before) and decided explicitly on which font family, size, and color to use for each header. I spec'ed out the font sizes using YUI's percent-based scheme which helps ensure a consistent look when users adjust the size. (Go ahead, scale the font size up and down.) An added bonus was that it forced me to think more about the semantic structure of my markup. (If you have Firefox's Web Developer toolbar installed, try viewing the site with stylesheets turned off.) If there's one thing I learned working for Sitening, it's that semantic structure plays a huge part in your SERPs.

Optimizing With YSlow

At OSCON last summer, I attended one of the first talks Steve Souders gave on YSlow -- a Firefox plugin that measures website performance. That, plus working for Yahoo!, has kept the techniques suggested by YSlow in the back of my head with every site I build. But this redesign was the first time I committed to scoring as high as I could.

As usual, I coded everything by hand, paying attention to all the typical SEO rules that I learned at Sitening. Once the initial design was complete and I had a working home page, I ran YSlow.

Ouch. A failing 56 out of 100. What did YSlow suggest I improve? And how did I fix it?

• Make fewer HTTP requests - My site was including too many files. Three CSS stylesheets, four JavaScript files, plus any images on the page. I can't cut down on the amount of images (without resorting to using sprites - which are usually more trouble than they're worth), so I concatenated my CSS and JS into single files. That removed five requests and brought me up to an "A" ranking for that category. (I'm further toying with adding the YUI Compressor into the mix.)
• Use a content delivery network - At Yahoo! we put all static files on Akamai. Other large websites like Facebook, Google, and MySpace push to their own CDNs, too. But what's a single developer to do? Use Amazon S3 of course! I put together a quick PHP script which syncs all of my static content (images, css, js) and stores them on S3. Throughout the site, I prepend each link with a PHP variable that lets me switch the CDN on or off depending on if I'm running locally or on my production server. (And, in the event S3 ever goes down or away, I can quick switch back to serving files off my own domain.)
• Add expiry headers - Expiry headers tell the browser to cache static content and not attempt to reload it on each page view. I didn't want to put a far future header on my PHP files (since they change often), but I did add them to all of the content stored on S3. This is fine for images that should never change, but for my JavaScript and CSS files it means I need to change their filename whenever I push out a new update so the browser knows to re-download the content. It's extra work on my part, but it pays off later on.


• Gzip files - This fix comes in two parts. First, I modified Apache to serve gzipped content if the browser supports it (most do) — not only does this cut down on transfer time, but it also decreases the amount of bandwidth I'm serving. But what about content coming from S3? Amazon doesn't support gzipping content natively. Instead, in addition to the static files stored there, I also uploaded their gzipped counterparts. Then, using PHP, I change the HTML links to reference the gzip versions if I detect the user's browser can handle it.


• Configure ETags - ETags are a hash provided by the webserver that the browser can use to determine if a file has been modified before downloading it. Amazon S3 automatically generates ETags for every file -- it's just a free benefit of using S3 as my CDN.

So, all of the changes above took about three hours to implement. Most of that time was spent writing my S3 deploy script and figuring out how to make Amazon serve gzipped content. Was it worth it? See for yourself.

Wow. Three short hours of work and I jumped to a near perfect 96 out of 100. The only remaining penalty is from not serving an expires header on my Mint JavaScript.

Do these optimization techniques make a difference? I think so. Visually, I can tell there's a huge decrease in page rendering time on both Firefox and Safari. (IE accounts for 6% of my traffic, so I don't bother testing there any longer.) More amazing, perhaps, is the site's performance on iPhone. The page doesn't just load -- it appears.

I've made a bunch of vague references to the S3 deploy script I'm using and how to setup gzip on Amazon. In the interest of space, I've left out the specifics. If you're interested, contact me with any questions and I'll be happy to help.

Tyler Hall
Front-end Engineer

The example was the ease of being able to annotate and caption photos in Flickr enticing a lot more users to enter sensible captions and text which in return makes it easier to find the photos and describe them to non-sighted users.

Now we found out via Amy Cohen Efron's blog "Deaf World as Eye see it" that deaf users have discovered Yahoo Live as an opportunity to chat online.

This is wonderful news, and proof that products that are on the bleeding edge and use technologies with a reputation for inaccessibility can actually benefit users overcome boundaries and make them communicate using "web 2.0" products despite their disability.

It is also a great example that accessibility is about all kind of disabilities, and that technology can be the solution rather than a hindrance.

More reading:

• LaRonda Zupp on the addictiveness of Yahoo! Live for the deaf community
• Scott Gatz on decisions being made to make Yahoo! Live inclusive for all users

As a follow-up, Neal Sample (YOS Chief Architect) gave a 40 minute deeper dive presentation last Friday. In this video he begins with a recap of the information presented in Ari's keynote and then spends time providing more in-depth explanations and examples of the various YOS platform components: update notifications, social connections, the activator, and more.

Expect to see more and more in-depth videos with various YOS engineers in the coming weeks and months.

Jeremy Zawodny
Yahoo! Developer Network

Around 50 developers met yesterday in London, England to hear all about Yahoo's new location based service Fire Eagle. In two short presentations and a long Q&A session Tom Coates and Seth Fitzsimmons from the Fire Eagle team helped developers get their head around the concept and technicalities of Fire Eagle. They were aided by Steve Marshall, developer of the Django Fire Eagle Authentication wrapper and co-developer of Fireball.

The NetSquared Mashup Challenge: Hacking for Social Change

For the first time, NetSquared is running a really cool program called the Mashup Challenge in which they are matching up ideas from non-profits and NGOs involved in all sorts of social change to people like you (i.e. developers, product managers, and designers) who have the skills to implement them. I have been helping NetSquared promote the Mashup Challenge (see their recent YDN Theater video) because I think it's a very practical roll-up-your-sleeves way of getting people to work together across many boundaries (company, international, etc) to produce something exciting and useful that benefits the world at large. It's very much in the spirit of our own Yahoo! Hack Day.

The Projects

The community around NetSquared has already submitted dozens of ideas for theMashup Challenge and the NetSquared community voted for the top 20, which are listed here (there are 21 since there was a tie!). You can see ALL of the ideas here.

How to Participate

I'm working with Billy Bicket, NetSquared's organizer, to recruit Project Leads interested in participating in a 4-week sprint leading up to NetSquared's conference, happening on May 27-28 at Cisco in San Jose, CA.

By contributing to NetSquared in the capacity of Project Lead, participants will be working with a leading social innovator working on a range of challenges including:

1. refining some of their ideas about how the data they are using could be rendered in mashups; and

2. in some cases, building mashups using a variety of APIs, products, or coming up with creative technical solutions to particular problems they are facing.

Project Leads will receive access to all NetSquared Hack Days. The next invite-only event is happening on May 4 at Moscone Center in San Francisco and is hosted by Sun and NetSquared. Project leads will also receive two free tickets to this year's NetSquared Conference.

Here is a quick run-down of the role and expectations for Project Leads and here are the simple next steps if you would like to participate:

1. Scroll through the list of 21 Featured Projects

2. Send Billy Bicket (billybicket -at- yahoo.com) an email with your favorite three (3) featured projects, and confirm your interest in participating by Wednesday, April 30 at noon.

4. Once you send Billy an email, he'll send easy next steps (including link to conference registration) and details about engaging with featured projects for expedient approach and execution.

Bringing It Together: The NetSquared Conference

The Mashup Challenge will culminate in the annual NetSquared Conference on May 27-28 in San Jose. At the conference, project teams will have an opportunity to display and discuss their mashups and attendees will vote to select the top three (this is only several weeks away and some of the ideas are complex, so the projects don't have to be 100% done, just underway). All 20 projects at the conference will receive a share of $100,000 in prize money. The share will be determined by voting at the conference.

It's a good cause, a great opportunity to meet new people, and an even better opportunity to use your various web superpowers. Join a project today!

Chad Dickerson

Today we’re introducing the Yahoo! Open Strategy (or Y!OS for short), the details behind Yahoo!’s big bet to "deliver open, industry-leading platforms that attract the most publishers and developers."

Y!OS platforms will harness Yahoo!'s unique strengths – our rich and relevant user experiences (we’re #1 in 7 verticals), our massive audience (half a billion users/month), and our deep data repositories (content, content, content) – and open them to the innovations of the developer community. Our aim: to fundamentally transform how people experience Yahoo!.

With Y!OS, we’re moving from a model in which each Yahoo! property develops much of its own technology to one where we share common data and frameworks that can be easily surfaced across multiple Yahoo! properties and off the Yahoo.com network.

It’s a major rewiring of Yahoo!.

And the good news for developers is that Y!OS will allow you to access to these assets, build applications around them, and then get distribution on Yahoo!’s monumentally popular properties (and/or use them in your own websites).

Specifically, Y!OS includes:

A Single Social Platform for Yahoo!

The Social Platform will enable a single social "connective tissue" across all Yahoo! experiences letting users view Yahoo! through a relevant social lens. The Social Platform isn’t yet another social networking vertical from Yahoo!. It's a common social infrastructure that will span all of Yahoo! and the web beyond. We’ll start by collapsing the Y! 360 and Mash connection lists into one social repository (and add a new user interface to it), then we'll take a proactive approach to tapping into the TEN BILLION aggregate relationships in Mail, Messenger, Address Book, and other social areas of Yahoo! to recommend connections to our users. Plus, we’ll begin surfacing users’ profile and connection information throughout Yahoo! as the whole Yahoo! network becomes more social, which will motivate users to activate connections. Developers will gain access to this Social Platform via RESTful APIs, giving you ways to query for a user's profile data and connections data (our Social API), ways to update a user’s presence across the network (Presence API), and an activity stream with an API for reading/writing a user’s activity (we call this “Updates”).

Lotsa Standardized Web Services

You want data? Have we got data for you! And we’ll be delivering a lot more of it in the coming months. We’re working to get it to you in ways that won’t require "RTFM" every time we release new APIs. We’ve created a RESTful API standard to which most new Yahoo! API releases will adhere, including all of the Social Platform APIs mentioned above. And some more news: we’ll be supporting OAuth – look for the OAuth Consumer Key to replace the YDN App ID for new API signups here on the developer website very soon.

The Yahoo! Application Platform (YAP)

So now you have an out-of-the-box social graph, and wicked cool data to mashup. How about some traffic? How about some traffic from Yahoo! Mail, the Yahoo! Front Page, Yahoo! Search, My Yahoo! and the revamped Y! Profile? The Yahoo! Application Platform will allow developers to build applications that plug directly into these Yahoo! pages and properties, starting today with an exciting developer's preview release into Yahoo! Search called Search Monkey.

As Yahoo! is a member of the OpenSocial Foundation, YAP supports OpenSocial. Apps you’ve written for other OpenSocial-compliant application platforms should function on Yahoo! with minimal tweaking (and vice versa) -- or you can write apps that go directly to the Social Platform REST APIs; it’s up to you. And YAP offers you the choice of hosting your app with Yahoo! or using your own server to proxy your app back to us.

Today’s announcement is just a hint of things to come. Get started today with Search Monkey and stay tuned for a cascade of more announcements as pieces continue to come online.

We couldn’t be more excited to work with you to change Yahoo! and change the web.

Say it with me now: “Developers! Developers! Developers!” ;)

Cody Simms
Y!OS Product Management

With SearchMonkey:

• Site owners can build enhanced search results that will provide searchers with a more useful experience by including links, images and name-value pairs in the search results for their pages (likely resulting in an increase in traffic quantity and quality).
• Developers can build SearchMonkey apps that enhance search results, access Yahoo! Search’s user base and help shape the next generation of search.
• Users can customize their search experience with apps built by or for their favorite sites.

As Ari Balogh, Yahoo!’s CTO, will mention in his Web 2.0 Expo keynote this morning, we’re rolling out a limited preview of the SearchMonkey developer tool starting today. With this online tool, developers can build data services that can be used to present richer, more useful search results. These data services can be constructed using structured data either from the Yahoo! Search index or from publicly available sources (such as APIs).

In addition to signing up for the preview, head over to the Yahoo! Developer Network booth at Web 2.0 Expo to check out a demo.

And what’s a new product without a party to kick it off? We’re celebrating this component of our open platform with a Developer Event at our Sunnyvale campus on Thursday, May 15. If you’re interested in joining us, here’s more information. Hope to see you there!

Amit Kumar
Chief SearchMonkey

[This post originally featured on the Yahoo! Search blog]

• Firefox 3 beta 5 support
  
• Support for the latest versions of the different Firebug branches
  
• Pie chart representation of the components in the Stats tab
  
• Improved display in the expanded CSS expressions rule report in the Performance tab
  
• Support for disabled Firebug Net Panel (default behavior in Firebug 1.2)
  
• Misc fixes for the reports in the Tools section
  

Looking at the diversity of Firefox/Firebug versions, these are the current available branches for Firefox and Firebug.

Firefox has two active branches:

• Firefox 2 - the current version is 2.0.0.14, this is the stable production version
  
• Firefox 3 - the latest is 3.0. beta 5
  

Firebug has 3 active branches:

• Firebug 1 – the latest version being 1.05, this is the stable version
  
• Firebug 1.1 – the latest is 1.1.0 beta 12
  
• Firebug 1.2 – the latest 1.2.0 alpha 21
  

Firebug 1 doesn’t work with Firefox 3, so there are a total of 5 combinations and the YSlow 0.9.5b1 has been successfully tested on all of them:

You can download the tool here, report bugs here, read the performance rules, and participate in the performance mailing list discussions. Also make sure you keep an eye on our performance-related postings on YDN and YUI Blog.

Enjoy,

Yahoo! Exceptional Performance

It doesn't require you to join and populate "yet another" social network app, since it builds on existing services, using Twitter as an interface and to bring your social graph to bear, Fire Eagle for secure sharing of your location, and Upcoming for cross-correlating events and locations.

Says Kellan, a Flickr application engineer "building technology solutions for social problems":

What I love about Fire Eagle is that we aren't asking people to change their behavior (much), just helping people make sense of the information deluge. Answering the eternal "It's 3am, do you know where your friends are?" questions. I think it's pretty amazing that we have the "small pieces loosely joined" to build a tool like Fireball, that lives in existing tools, and uses APIs, and Jabber to tie it all together.

Fireball developer Leonard Lin agrees:

We didn't want to write a brand new "app," per se. We wanted to add some features onto things you already use. I just want Twitter with location. It doesn't make sense to have to rewrite Twitter to get one new feature.

Christian Crumlish
Yahoo Developer Network

In essence, this technique allows you to create large JavaScript-based web applications that have independent modules that communicate with another independent of the availability of the other module. This is a small improvement to the Custom Event model used in the YUI as it makes your apps less dependent on performance and execution order.

Read more about Decoupling with the YUI on the YUI blog.