September 30, 2008

Flash on the Beach: Day Two

This is the second in a series of articles reporting on Flash on the Beach, one of Europe's premier Flash conferences held in Brighton, UK. Since there are tonnes of sessions I'm going to pick out my personal highlights, but you can always check the official Flash on the Beach site for more information.

The second day at Flash on the Beach started at a much more civilised hour for me. Since I'd already registered, I could afford to spend a whole extra hour in bed before jumping on the train to Brighton. I even managed to grab some breakfast on the way, and the extra brain food that brought was going to be essential in making it through probably the most technical of the three days.

Aral Balkan: Grab the Low-Hanging Fruit
---------------------------------------

The day started with an inspirational talk from Aral Balkan on, essentially, learning to play. The main thrust of his presentation was that we spend way too much time getting hung up on patterns, frameworks, and the best way to approach a particular problem. This leads to procrastination, which means that the cool ideas in our heads are trapped there forever. If we can stop getting hung up on how best to implement something, we can all have more fun (and who doesn't need more fun in their lives, right?).

The one thing he showed that really stuck in my mind was Scratch. Scratch is an MIT-developed tool that makes it ridiculously easy to create simple interactive Java applets graphically, without having to write a single line of code. Aral's point in showing this was that we shouldn't feel limited or intimidated by the tools we are given. Like Java, ActionScript 3.0 is a powerful language, but that added power has made it more difficult for people who have never written a line of code in any language to start learning. The Scratch developers have built a graphical programming environment where you don't need to know a complex language like Java to create simple or even moderately complicated interactive projects.

I think Aral is planning on running the same talk at a number of conferences this winter. If you get a chance, I highly recommend this session to get your creative juices flowing. It's inspiring stuff.

Niqui Merret: Accessibility - Beyond the Basics
-----------------------------------------------

After a quick slurp of tea (mmmm... caffeine) I dashed into the Corn Exchange for Niqui Merret's session on accessibility. I've seen Niqui talk maybe half a dozen times on Flash and accessibility, and I always come away from those sessions having learnt a lot about what it means to develop for people with disabilities. This session was no exception. Rather than spend a long time on the basics of accessibility, after a quick introduction Niqui dived into some of the more advanced areas of creating accessible Flash sites.

There was some really great advice here on how to implement accessibility as painlessly as possible. After talking briefly about what you get for free in terms of accessibility from Flash's default behaviour, Niqui moved on to show off some of the base ActionScript classes she has created to make her life a little easier. One class makes decorating a UI element with accessibility attributes as easy as a single function call, and then a set of base UI classes for various different types of control makes use of that class. Creating accessible controls is then a simple matter of extending those classes and overriding the appropriate methods.

The talk itself was intentionally kept short. After her presentation, Niqui opened the floor and spent the rest of the session engaging the audience and answering questions on accessibility. It always gives me a buzz to see how many people in the room actually care. Niqui's passion for accessibility is infectious. As I left the room, I caught snippets of conversations from other attendees about putting their new-found knowledge to use in their own projects.

Joa Ebert: Audiotool's Private Parts
------------------------------------

Just before lunch, with my stomach already rumbling with hunger, I took my seat back in the Corn Exchange for Joa Ebert's session on all the behind-the-scenes stuff that makes AudioTool tick. The actual process of programatically generating audio will be covered by André Michelle's session tomorrow, but Joa promised to cover as much of the other stuff as he could in the allotted time. That turned out to be just enough to make my brain explode.

If you've not played with AudioTool, I highly recommend you check out the AudioTool video tutorial. The user interface is stunningly gorgeous, essentially replicating real-world pieces of audio equipment all wired up with cables to produce, modify and output all those screeches, pops, and whizzes that dance music producers love so much. If you've ever played with Propellerhead Software's Rebirth, you'll have an idea of what I'm talking about.

Joa spent a while talking about the impossibly complex problem of routing and drawing the connecting cables so they don't overlap any of the pieces of audio equipment you have on the stage. It turned out that routing wasn't the problem - it was doing so in a way that didn't adversely affect the performance of the application or (most importantly) the audio playback. The answer Joa arrived at was to use a quadtree to divide the stage and limit the amount of elements to be tested. This is a technique commonly used in gaming (3D games use octrees) to improve collision detection performance.

Once we were done with quadtrees, Joa showed off something he'd worked on that simply blew my mind. Graphically, Flash has always had an issue with having lots of elements on the stage at once. Although the performance is getting better with every version of the Flash Player, it still lags behind the performance of hardware-accelerated solutions like OpenGL. Joa rebuilt the entire Flash display stack in Java using OpenGL, and then ported parts of AudioTool to run on that system, just to test the relative performance gains. He also built an entire interactive shell in AudioTool so that he can debug the application while it is running.

Needless to say, I came out of this session with the sad realisation that I am an average coder at best. I guess if all else fails I can always limp my way into management, where you're not really expected to know what you're talking about, and you just need to make sure that the people you're hiring are smarter than you.

Jam Session
-----------

The only really notable session that I attended after lunch was the jam session, which was a last-minute replacement for Nando Costa's "Motion Graphics, One Step At a Time". Apparently poor Nando is stuck in the US until FedEx finally get around to delivering his green card, so John Davey convinced a bunch of the speakers to get together for a code jam session. The result was possibly one of the best sessions so far, with really smart developers like Keith Peters, Joa Ebert and Ralph Hauwert showing off some of the cool experiments they just happened to have lying around on their MacBook Pros.

I really dig this kind of stuff, and it reminded me of all the awe-inspiring experiments from people like Joshua Davis, Jared Tarbell, and Manny Tan that got me interested in Flash 11 years ago.

End of Day Two
--------------

Once again, my train ride back to London and my duty to you, loyal YDN blog reader, meant that I had to skip the inspired session and the after party. Tomorrow is the last day of Flash on the Beach, and if it's even half as good as today I'm in for a treat.

Steve Webster
Front-End Engineer
Yahoo! Europe

Posted at 6:08 PM | Comments (0)

Smushit.com - optimizing images has just become really easy

Nicole Sullivan and Stoyan Stefanov are dedicated to making the web a faster place. As integral parts of the Exceptional Performance Team they already shared a lot of crucial information of how to make your web sites faster.

One thing they've been pondering a lot about lately is image optimization for file size. Image editing tools come with all kind of great ways to optimize images for visual quality and file size, but when you look at the image in a text or hex editor you'll find that there is a lot of extra information in the file, for example the name of the editing suite, dates when the picture was created and lots more.

There are a lot of tools that remove this information safely and get the most out of the images without having an effect on their visual quality. The catch is that there are a lot of tools for a lot of image formats, all of them on the command line.

So Nicole and Stefan took their research findings, fired up their code editors and built a web app that does all the optimization for you:

Smushit.com allows you to upload some files or give it a URL. The tool then takes the images, optimizes them and tells you how many bytes you can save. You then get a zip of all the images for download and can replace them on your site.

Here's a video of Stoyan and Nicole presenting Smushit.com at The Ajax Experience in Boston (sorry about the audio):

Chris Heilmann
Yahoo Developer Network

Posted at 8:25 AM | Comments (17)

September 29, 2008

Flash on the Beach: Day One

This is the first in a series of articles reporting on Flash on the Beach, one of Europe's premier Flash conferences. I'm going to pick out my personal highlights.

This morning, having arrived bright and early in a cold but sunny Brighton, I eagerly made my way to the Brighton Dome to register for this year's Flash on the Beach conference. This is the third year in a row that I have made the journey down to the South Coast for the conference, and once again the line-up of speakers over the three days is stellar. After grabbing a cup of YDN-sponsored tea (yes, we're doing our bit for all the caffeine-addicted Flash developers out there) I headed into the main auditorium for the start of the day.

Adobe Keynote

John Davey, conference organiser supremo, dropped a bombshell in his introduction to the keynote session: Flash on the Beach will be coming to Miami in April '09. If you've always wanted to get to Flash on the Beach but didn't want to brave the chill of the UK in October, then maybe Miami is more your style. I am assured that tanned, toned bodies and manicured poodles are welcome but strictly optional.

The keynote, delivered by Richard Galvan and a few other Adobe folks, showed off some of the features that are shipping with the Flash CS4 release. It's been a while since I've played around in the Flash authoring tool, but judging by the spontaneous applause from the audience it sounds like the new animation system is going to please the designers amongst you. We also got a tantalising glimpse of the new features in the Drawing API, including what looked like live video being projected onto an animated distortion mesh. I don't know what practical applications that might have, but it sure looked pretty. Richard promised that there'll be more information on this and other new features in some of the other Adobe sessions at FotB, so I'll keep you updated.

Mark Anders: Flex 4 and Thermo

After some more tea (or should that be moar tea) I switched venues to see Mark Anders talk about the new designer/developer workflow in Flex 4 and a tool known only by its codename: "Thermo". Having been on the wrong end of a few "misinterpreted" designs (and on both sides of the designer/developer fence) I was interested in seeing how Adobe plan on tackling this thorny issue.

The upcoming Flex 4 has a radically refactored component architecture and a handful of new MXML elements to represent vector graphics, the latter of which exist as a subset of MXML knows as FXG. If you've had any experience with the excellent degrafa library, you'll feel right at home with FXG.

With these two additions, and the introduction of Thermo (think Flex Builder but with the scary ActionScript stuff being replaced with new designer tools), Adobe seems to have completely separated the look and feel of a Flex application from its underlying logic. Developers can round-trip their designs using the new FXG format, and then integrate into their code either at compile time or runtime.

To demonstrate this improved workflow, Mark showed off a weather application that consumed Yahoo's Weather API. The application had several, radically different skins that changed not only how the application looked but also how the user interacted with it. He went from a debug view where all the information was visible, to an accordion-style view with animated open/close states, and finally to a mobile view which looked very much like iPhone's Weather application, complete with flick scrolling. The skins were all created with Thermo without a single line of ActionScipt code in sight. Impressive stuff indeed.

However, as excited as I am by all this, I can't help but wonder why Adobe created FXG and retrofitted all their creative tools to read and write the new format, when SVG is already here and supported by all those tools and more. If I bump into Mark or any of the Adobe people over the next few days, I'll be sure to ask.

Eric Natzke: The Art of Play

The last session of the day was back in the main auditorium, which was just as well as it was absolutely packed. Graphic Designer come Flash hero Eric Natzke showed off some of his latest artwork, and talked about the process of generating that artwork with Flash.

I think I can safely say that everyone in the room was inspired by Eric and his amazing graphical style, not least because there was a mad scramble at the end of his sessions to get one of the free postcards he was giving away. I didn't get a postcard, but I'm seriously tempted to order a few of his canvases for my living room.

End of Day One

Sadly I can't attend James Paterson's "inspired session" or the party this evening as I'm currently on the train back to London, but rest assured I'll be back again tomorrow for more Flash-related fun.

Steve Webster
Front-End Engineer, Yahoo! Europe

Posted at 6:19 PM | Comments (1)

Yet more great things to learn about web development

The Opera Web Standards Curriculum in association with YDN has just been updated with another batch of great tutorials on website development.

The new sections cover Accessibility with an article from yours truly on accessibility basics and another by Yahoo!'s Ben Hawkes-Lewis on accessibility testing. The section on CSS is also available with an introduction to CSS from YDN's Christian Heilmann. Other industry stalwarts, such as Tommy Olsson, follow on the CSS section with more detailed articles on specific topics.

I'm glad I've been able to contribute to this great introduction to web development. If you are looking to learn the basics it's highly recommended.

Tom Hughes-Croucher
Yahoo! Developer Network

Posted at 5:17 PM | Comments (0)

Nodalities Magazine: Anatomy of a SearchMonkey

In case you were looking for a little light reading on a Monday, our own architect Peter Mika has just published an article in the latest print issue of Nodalities. Peter's article, titled Anatomy of a SearchMonkey, dives into the architecture and thinking behind the SearchMonkey project, and how SearchMonkey applies to semantic data on the Web. The entire magazine is available as a free PDF download (5 MB), so take a look and let us know what you think!

Evan Goer
Yahoo! SearchMonkey Team

Posted at 10:51 AM | Comments (0)

September 26, 2008

<head>'s up - now here's a new kind of conference

On the 24th to 26th of October around 70 leading web developers, designers and thought leaders will speak at a conference to an audience of hundreds of attendees - without having to leave their comfy chairs.

The <head> conference is a world-first virtual conference that gives attendees access to watch all the presentations live on the internet using only their browsers and the Adobe Flash player.

The line-up is impressive: Tim O'Reilly, founder and CEO of O'Reilly Media, Inc., Jason Fried, director of 37signals, Lynda Weinman, president of Lynda.com and Richard Moross, CEO of MOO.com are just a few of the large amount of speakers that signed up to be part of <head>.

The best news is that if you sign up until the 30th of September, you'll get access to all the talks for only 99 US Dollars (that's the early bird discount)!

The benefits of virtualization

Virtualization is a hip new thing - we create virtual computers for heavy computation tasks and virtual worlds to be able to communicate outside our physical boundaries and be whoever we want to be. The next logical step was to lower the burden and cost of conferences by making those virtual, too. Conferences on the internet mean more refreshed speakers (no jetlag), less money spent on travels and hotels and above all we don't increase our carbon footprint by attending or speaking.

The brain behind the <head> is Aral Balkan, well-known Flash and Flex guru and speaker at several conferences himself. He partnered with several companies to get initial funding and started cracking on the software to make the conference a reality. Apart from pushing the boundaries of Flash the conference software and web site is also the first large commercial application to run on Google App Engine.

Let's get physical

Whilst all of this is pretty cool and bleeding edge there is something nice about meeting in person. For starters you're able to share some food and drinks without holding your pints up to the webcam and probably damaging your laptop.

This is why <head> also has some physical locations where people from the same area can congregate and follow the proceedings together on a large screen. These are all located in the UK and sponsored by several different companies:

• London, UK - Sponsored by Yahoo! Developer Network and O'Reilly. Venue: The Magic Circle in Euston. Capacity: 163.
• Manchester, UK - Sponsored by BBC Backstage. Venue to be confirmed.
• Brighton, UK - Community hub at The Werks.

So what are you waiting for?

All good arguments? Why don't you just <head> over and sign up for your ticket on the conference web site and we'll see each other (virtually, of course) on the 24th. This could be internet history in the making!

Chris Heilmann
Yahoo Developer Network

Posted at 10:59 AM | Comments (1)

September 24, 2008

Scripting Enabled - an accessiblity driven hack event success

Last week around 100 developers came to the Metropolitan University in London, England to hear about barriers faced by web surfers with disabilities. A day after around 40 hackers came back to build hacks that work around these issues.

I've had the idea for an event like this for quite a time as I realized two problems:

• Hackers are happy to spend a lot of time on proving a point, but don't always create things people need and
• People that really need to find a way around problems they face accessing the web will never hear how easy it is to work around them

In other words, geeks and non-geeks don't talk enough. This is especially the case when it comes to accessibility. Web developers see accessibility as an annoyance and charities and disabled people simply don't know the lingo to talk to developers or really want to understand what they do - all they want is solutions.

The main driver of organising Scripting Enabled was seeing how happy people were when I created Easy YouTube and realizing what a big impact these two hours of hacking had. The charity that inspired me to do it told me flat out that they had asked for a video player for people with learning disabilities for a long time but simply could not afford it to commission the development.

I showed Easy YouTube and a similar, new hack at the open hack event Mashed08 earlier this year and promptly won a prize - initial funding to organize an accessibility hack event.

The rest was a blur of getting to know the right people, asking speakers to come and hackers to attend and before I knew it, here I am, a few days after with 12 GB of video footage, all the presentation slides and a list of hacks to report on. I cannot believe how easy it was and how quick it went.

I am not going to report about the event here myself, but instead point you to some other blogs that did great write-ups about what happened:

• BBC backstage
• BBC Ouch!
• Henny Swan
• Damon Rose
• Ana Roji

What do we have now?

Right now, Scripting Enabled is available for those who haven't been there via the web site, where you get the latest news about it. There is also a full list of the presentations (also downloadable from SlideShare), there are a massive amount of cool photos available on Flickr, most thanks to Marco von Hylckama-Vlieg, the main photographer of the event. There is also a Yahoo Group you can join and there is a wiki with information about all the hacks.

The very near future

I've edited the video and we're right now getting them transcribed (all in all 4.5 hours of presentations and Q&A). They will be available soon for you to watch - most likely here on the Yahoo Developer Network.

What now?

The success of Scripting Enabled made me realize that this can go places - but I need your help. As I cannot organize events all over the globe (in addition to my real job) I've chosen to make Scripting Enabled an unconference and allow anyone to organize similar events granted you follow some rules:

• It has to be free
• It has to be a mix of information and hacking around accessibility
• Everything has to be released as CC or Open Source
• Scriptingenabled.org is the source of truth - I want to know about events
• Use the social web to store the photos, slides and links

You can read the details of the rules and nice-to-haves on the Scripting Enabled site

Christian Heilmann
Yahoo Developer Network

Posted at 1:16 PM | Comments (0)

Report from BlogWorld Expo

This pic totally looks like I'm part of Thriller, which is applicable as Vegas was pretty darn thrilling! I spent a few days in Sin City this weekend as a part of the blogger conference, BlogWorld Expo. Being one of the largest blogger-focused events of the year, BlogWorld took place in the Las Vegas Convention Center, though parties were held up and down the strip. Beyond the normal crazy/fun Vegas scene, I had fun speaking on two panels. The first one was mostly centered on monetization, with a particular emphasis on widgets. The other members of the panel were from Pheedo (Louis Moynihan), Disqus (Daniel Ha) and Lijit (Micah Baldwin, moderator). The other, centered on getting customer and executive buy-in for blog projects, included myself and several real social media gurus; Toby Bloomberg, Rich Brooks and Des Walsh (moderator).

Photo Credit Brad_Crooks

Both panels were well received, if I say so myself ;). As much as I enjoyed participating and attending the other sessions, the best part of BlogWorld Expo was investing some time in the blogger community and meeting many of the people I've been exchanging emails and wiki edits with over the past year.

One person that I finally got a chance to meet face to face was Chris Saad, of the DataPortability group. DataPortability is a grassroots effort to promote the idea that users should be able to move, share, and control their personal data online: identity, photos, videos and all other forms of personal data. I've been honored to be a part of this group since December of last year, and though I've been warned by many naysayers that "no group like this can ever enact real change", I'm more encouraged with each passing week. If you are at all concerned with the portability of your data and your users' data, I'd encourage you to get involved.

Here's my "why I want data portability" video, though I must warn you, I'm OBVIOUSLY not a professional talking head so be gentle.

Robyn Tippins
Community Manager, YDN

Posted at 9:16 AM | Comments (2)

September 23, 2008

Ouh lá lá - Paris Web 2008 is open for registration

On 13th to 15th of November, Paris, France will once again host a conference revolving around quality web design and accessibility. Paris Web was a great success last year and is probably one of the best bargains in the francophone world when it comes to web conferences.

Sponsored by IBM and ours truly, the organizers managed to invite and attract an impressive list of speakers, including Chris Wilson of the Internet Explorer team and Daniel Glazman from the W3C CSS working group. From Yahoo! you'll see Eric Daspet, yours truly and the other curly - Nicole Sullivan from the exceptional performance team.

You can find out who else is coming on the full list of speakers and you can get tickets starting at 100 Euro per day. Just like last year there'll also be 10 Euro workshops for those short of cash.

Be aware that the main conference is in French. Nevertheless even if your French is not that good you can get by and I had a great time last year - the value for money was amazing. Let's hope this year there won't be a train strike, though :)

Chris Heilmann
Yahoo Developer Network

Posted at 3:37 AM | Comments (1)

September 22, 2008

SearchMonkey Support for RDFa Enabled

Yahoo! Search is now extracting RDFa data across the World Wide Web and making this information available to the public via SearchMonkey. RDFa is an open standard for embedding structured data directly in HTML. Along with our previous support for eRDF and a number of popular microformats, SearchMonkey now supports a wide variety of popular semantic technologies.

What is structured data, and why is structured data good for search? Traditional search engines crawl the web and extract what metadata they can: the page title, an autogenerated summary, the file size, the MIME-type, the last-updated date, and so on. However, this sort of analysis pales in comparison to what a human being can do simply by glancing at the page. A human can look at the words "Joe's Home Page" and infer, "ah, this page probably belongs to Joe," or look at an image and infer, "ah, that's probably a picture of Joe, the owner of the page." That's easy enough for humans... but what if the search engine could pick out this info and display it directly in the search result?

RDFa relies on using attributes to embed structured data in XHTML. These attributes are not valid in HTML 4, but the W3C has provided an XHTML DTD to validate against. The following example illustrates a simple home page marked up with RDFa data (in bold):

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
          "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:dc="http://purl.org/dc/elements/1.1/"
      xmlns:foaf="http://xmlns.com/foaf/0.1/"
      lang="en" xml:lang="en">
<head>
  <title>The Amazing Home Page of Joe Smith</title>
</head>
<body>
  <h1 property="dc:title">Joe's Home Page</h1>
  <div rel="foaf:maker">
    <h2 property="foaf:name">Joe Smith</h2>
    <div rel="foaf:depiction" resource="http://joesmith.org/images/jsmith.png">
      <img src="/images/jsmith.png" alt="Smiling headshot of Joe" />
      <p property="dc:rights">Creative Commons Attribution 3.0 Unported</p>
    </div>
  </div>
</body>
</html>

In this page, the designer has explicitly stated that the image is a "depiction of the person who made the web page." Adding this information as RDFa can potentially benefit many applications. In the case of Yahoo!, we've designed our search index to extract and store this information.

RDFa support has already enabled some interesting new SearchMonkey applications. For instance, Creative Commons has recently started to deploy RDFa across the web in the form of copyright and licensing information. Every time a Creative Commons user selects a CC license, the generated HTML badge contains RDFa markup indicating the nature of the license. The Creative Commons Infobar uses this data to selectively trigger on pages that declare their license using structured markup:

To get started with RDFa:

• Learn the basics with the W3C RDFa Primer
• Dive into the details with the full RDFa Specification
• Join the community at the RDFa homepage
• Test your structured markup skills with the RDFa Distiller
• Filter on RDFa in Yahoo! searches with the searchmonkeyid:com.yahoo.rdf.rdfa parameter
• Start displaying RDFa to millions of users with the SearchMonkey developer tool

Evan Goer
Yahoo! SearchMonkey Team

Posted at 2:00 PM | Comments (5)

September 21, 2008

Taiwan Open Hack Day

From the opening band to the exuberant prize-giving, Taiwan Open Hack Day 2008 was full of energy.

Everyone was hacking even before the opening ceremony got underway and Yahoo! co-founder David Filo declared the event open by throwing a big yellow ball into the audience.

40 teams participated, each with up to 6 people, from all over Taiwan. The event was held in a youth centre in Taipei on 20/21 September 2008.

Yahoo! Taiwan YDN put on a great show, with involvement of many parts of the organisation. Since their launch in January 2008, YDN Taiwan have made available three local open APIS - Lifestyle (ratings and reviews of local businesses), Maps and Knowledge Plus (similar to Yahoo! Answers), with more in the pipeline.

The evening entertainment (Hack Girls) was an interesting contrast to Girltalk at Sunnyvale Open Hack Day the weekend before.

(Photo credit: myhsu)

Teams then worked through the night to put the finishing touches to their hacks, to be roused at 7.30am by an organised exercise routine.

After the by-now-traditional pizza lunch, Sunday concluded with presentations by all 41 teams. There was a huge range of innovative ideas, from a bicycle route-planner to "Random Life bingo" (one of the runners up) which answered questions such as "where should I eat tonight" with a cute fruit-machine interface. Many of the hacks used Yahoo's mobile widget platform, Blueprint and as we've seen in previous hack days, location-awareness was a hot topic. I was also particularly impressed by the stunning user interface designs many of the teams had produced - showing how much hard work and thought had gone into all the hacks.

The winners, kekeke, wrote a Firefox extension which allows users to select any keyword on any website and receive a summary of several Yahoo API search results (Flickr, Map, Knowlege Plus, and Lifestyle), without opening a new browser window. More relevant results will display in a stronger colour and users can save for later, or share results with friends.

You can see more photos of the event on Flickr with the tag "twopenhack08". Congratulations to all the hackers who took part, and a big thanks to Yahoo! Taiwan for a great event.

Sophie Major
YDN International

Posted at 6:32 PM | Comments (3)

September 19, 2008

Cody Simms from Y! Open Strategy on theSocialWeb.tv

Cody Simms, Senior Director of Product Management for Y!OS, sat down with Chris Messina (factoryjoe), Joseph Smarr, and John McCrea at thesocialweb.tv. On the heels of Open Hack 2008, Chris, John, and Joseph welcome Cody to a discussion of the Yahoo! Open Strategy (Y!OS). Plus a report from last week's exciting Portable Contacts Summit. You can read The Real McCrea's coverage of Yahoo!'s latest open moves or watch the conversation here:

Posted at 10:36 AM | Comments (1)

September 18, 2008

New SearchMonkey Enhanced Result Template Deployed

In July, we bucket tested a new template design for Enhanced Result applications. Developers do not have to take any actions to use this new redesign; all Enhanced Result applications will upgrade automatically. Important: Infobar applications will be unaffected.

The original SearchMonkey post contains examples of both the old and the new SearchMonkey Enhanced Result templates. In this posting, we'll just show examples of the new design. First, an Enhanced Result for HowStuffWorks.com that displays a result with a full abstract:

The first design change you'll notice is that images appear to the right, rather than the left. Our user testing has shown that moving images to the right improves the usability of the overall result. As for links, they now appear in a horizontal row, rather than as a vertical column next to the image. Not only are the deep links are more discoverable when presented separately from the image, but moving the links into a horizontal row provides more space for the summary and key/value pairs.

Now let's take a look at another real-world example from CitySearch, this one displaying a result with key/value pairs:

As in the example above, the image is shifted to the right. The key/value pairs have replaced the abstract, lying just below the deep links.

Careful observers will note that the key and value are now the same color — a minor change from the old template, where the keys were a lighter shade of grey. We found that keys were actually more discoverable when displayed in the same shade as the value.

The SearchMonkey team is confident improves performance, engagement, and discoverability across the board for users and developers. If you have feedback on the new templates, please let us know here, or leave us a comment in the SearchMonkey forum.

Evan Goer
Yahoo! SearchMonkey Team

Posted at 9:50 AM | Comments (5)

Developer Spotlight: Christian Heilmann

Ever wanted to know what evangelism at the YDN is all about? I think Christian spells it out in the best way possible... It's all about meeting the needs of all your customers. Simple truth, but the *how* is what everyone is trying to answer.

Here Christian speaks about his work in the UK and around the world, and about Scripting Enabled, a conference and hack day in London, England, which aims to break down the barriers between disabled users and the social web, while presenting hackers with real-world accessibility issues to solve. Scripting Enabled takes place September 19-20. More details on Upcoming.

Posted at 9:00 AM | Comments (0)

September 17, 2008

Creating photo mosaics with Yahoo! BOSS image search

The past few days of Open Hack Day 2008 were awesome, one of the most fun developer events I've been to in a long time. In the course of going to Sunnyvale, I was playing with BOSS (Build your Own Search Service) and it tickled me that using BOSS to search for images was actually easier than using the Flickr APIs themselves. Of course, there are more things you can do with Flickr APIs but if you want to just dig out lots of photos, nothing beats BOSS image search. I was mulling on a good hack to write (Yahoos are not eligible to participate in the competition but I was interested in just the hacking) when it occurred to me that photo mosaics require a large number of photos, and this need is perfectly served by the BOSS image search.

Photo mosaics are pretty and fascinating. For the uninitiated, a photo mosaic is a picture montage made with a large number of photos. An original photo is divided into a number of smaller rectangular parts, each of which is replaced by a photo (called a photo tile) that is about the same average color. When viewed from afar, the original photo stands out but when magnified appropriately, each photo tile shows up as individual photos. Photo mosaics have been popular for a while.

In this article I will describe how we can use Ruby to create a simple photo mosaic building program that stitches together a mosaic from any number of photos. While this article is primarily for developers, anyone can just use the program to create fun photo mosaics.

Sau Sheong Chang
Engineering Director for South-East Asia

Normally, one of the issues faced when creating a photo mosaic is getting the photo tiles. While a good sized photo album would contain thousands or tens of thousands of photos, if you want to create one that is based on a particular theme, you might be hard-pressed to find a source for a large number of photos. In comes Yahoo!'s BOSS image search APIs (http://developer.yahoo.com/search/boss). BOSS (Build your Own Search Service) is Yahoo!'s open search web services platform that allows any developer to tap on Yahoo!'s search engine data through REST-like API calls. BOSS provides 3 types of searches -- web, image, and news -- but we will only use the image search in our application. To get started with BOSS you need to go to the developer page, and register for an application id.

Sometimes you end up with a smaller pool of photo tiles. It could be that you chose a rather unique search term for your theme. You might also want to chose a smaller set of photo tiles since processing a large number of photos could be time consuming. Whatever the reason, if you don't have enough photos you might not be able to finish the master image, so you might want to use a tile more than once. However if the photo tile pool is not big enough, the final product might look a bit off-color. In this article, for simplicity I will use photo tiles more than once but you can easily change the mosaic to have unique photo tiles.

I will also use RMagick, the Ruby library that interfaces with ImageMagick, the very useful and comprehensive image manipulation command-line program. ImageMagick is cross-platform and has a GPL-like licence that allows its to be freely distributable.

Let's get cracking. The algorithm for this program is quite straightforward:
1. Take a photo, called the master photo, and reduce it into a small and manageable size.
2. Next we use BOSS to search for a particular theme, which returns URLs of all photos it can find on that theme. These photos are our photo tiles
3. Then for each photo tile, we get the average color of the tile
4. For each pixel in the reduced master photo, we compare its color with any of the photo tiles' average color and look for the closest match
5. We pick the closest match and use that photo tile in place of the pixel in a new image and repeat for each pixel in the master photo

Before we start the main flow of the algorithm, let me explain 2 functions that we will need to do. First we need to find the average color of an image. This is quite simple. The RGB color model is an additive color model in which red, green, and blue light (hence RGB) are added together in various ways to produce different colors. In our program, color is described in the RGB model. What we need to determine is the RGB representation of the average color. To find that average color, we examine the color of each pixel in that image, add up all the reds and divide it by the total number of pixels to find the red of that average color and do the same for green and blue.

	
def average_color(image)
  red, green, blue = 0, 0, 0
  image.each_pixel { |pixel, c, r|
    red += pixel.red
    green += pixel.green
    blue += pixel.blue
  }
  num_pixels = image.bounding_box.width * image.bounding_box.height
  return {:red => red/num_pixels, :green => green/num_pixels, :blue => blue/num_pixels}  
end		

Then we need to find the difference between one color and another. Without going into the black hole of color difference (also called delta E), we determine the difference or distance between two colors by calculating the (Euclidean) distance between two points. In the case of a color, we treat it as a 3-dimensional coordinate but instead of x, y, an z we use R, G, and B.

Translating this to code:

def color_difference(rgb1, rgb2)
  red, green, blue = rgb1[:red] - rgb2[:red], rgb1[:green] - rgb2[:green], rgb1[:blue] - rgb2[:blue]
  Math.sqrt((red * red) + (green * green) + (blue * blue))
end	

This is a grossly crude way of determining the difference between one color and another and the colors that are matched eventually are a bit off. A closer approximation can be acquired by applying different values of constants to the red, green, and blue variables.

Now that we have both these essential functions, we create a third convenience function to compare a pixel with the average colors of a bunch of photos:

def match_photo(pixel,average_colors)
  ave = average_colors.collect { |color|  color_difference(pixel, color)}
  ave.index(ave.min)
end

This code takes in a pixel and an array of average colors, then finds the array index of the smallest average number in the array. Returning this index allows us to find the correct photo.

Suitably armed with the 3 functions, let's move on to the main flow of the program:

width = 100
master = ImageList.new('master_photo.jpg')
master.resize_to_fit!(width,(master.bounding_box.height.to_f/master.bounding_box.width.to_f)*width)

First, load the master photo into an ImageList. Then resize the master photo to a scale factor. We want to reduce the master photo this way to reduce the number of pixels to process. Remember, each pixel in the master photo will be replaced by a photo tile, so you don't want a large master photo. For example, if you have a 640 x 480 photo, you will need to process and replace 307,200 pixels with photos! A fair number is 100 x 75 (which is the same ratio) but only has 7,500 pixels.

Next, create a pixel array of your master photo:

pixel_array = []
master.each_pixel {|pixel, c, r|  
  pixel_array << {:red => pixel.red, :green => pixel.green, :blue => pixel.blue}  
}

We will iterate through this array later on. Next, we start to get the photo tiles through Yahoo! image search:

photo_tiles = ImageList.new
population = 1000
step_count = 10
search_query = 'Leonardo Da Vinci'
boss_app_id = YOUR_BOSS_APP_ID
num = 1
(0..population).step(step_count) { |count|
  url = "http://boss.yahooapis.com/ysearch/images/v1/#{search_query}?appid=#{boss_app_id}&format=xml&count=#{step_count}&start=#{count}"
  (res = Net::HTTP.get_response(URI.parse(URI.escape(url)))) rescue puts 'Cannot reach to URL'
  data = XmlSimple.xml_in(res.body, { 'ForceArray' => false })['resultset_images']['result']
  data.each {|rec|
    photo_tiles.read(rec['url']) rescue puts 'Cannot read image'     
    num = num.next
  }
} rescue 'no more images found'

Population is the number of photo tiles to take from the image search. Step count is the number of images requested from BOSS per query. You will also need a BOSS App ID.

The code simply sends a GET request to BOSS, get the response and parses it through XML Simple, which in turn converts it into an array of arrays. After that, we iterate through the response array and read in the image into a new ImageList.

The next step is to determine the average color of each photo in the photo tiles ImageList:

	
average_colors = []
num = 1
photo_tiles.each { |img|
  average_colors << average_color(img)
  num = num.next
}	

With all the pieces in place, we will calculate the where to put the photo tiles and create a new ImageList to contain our mosaic:

tile_size = 40
mosaic_images = ImageList.new
tile = Rectangle.new(tile_size,tile_size,0,0)
photo_tiles.scene = 0
num = 0
master.bounding_box.height.times do |row|
  master.bounding_box.width.times do |col|
    idx = match_photo(pixel_array[num], average_colors)
    mosaic_images << photo_tiles[idx].crop_resized(tile_size,tile_size)
    tile.x = col * mosaic_images.columns
    tile.y = row * mosaic_images.rows
    mosaic_images.page = tile
    (photo_tiles.scene += 1) rescue photo_tiles.scene = 0    
    num = num.next
  end
end

We need to set a tile size now, and the larger the tile size is, the clearer and more vivid the photo tile is. However this also means the final mosaic file will be bigger and it will take longer to process, so we crop and resize it appropriately. We create a Rectangle with the tile size and this will be our tile. Then for each pixel in the master photo, we get the correct photo using the match_photo function we created earlier, and place it at the correct place in the ImageList.

Finally, we take the mosaic ImageList we have just created and make a mosaic out of it, and write it to a file:

mosaic = mosaic_images.mosaic
mosaic.write('mosaic.jpg')

This is a sample run on Mona Lisa, with the search term 'Leonardo Da Vinci'. Notice that photo tiles are re-used. To view more photos and mosaics of the photos, please go to this Flickr photostream - http://www.flickr.com/photos/29714598@N03

Try it out yourself!

Posted at 5:53 PM | Comments (1)

Fronteers conference in Amsterdam, the Netherlands

Around 200 web standards enthusiasts came to Amsterdam, Holland last week to attend the first Fronteers conference. The conference, initiated by well-known blogger Peter-Paul-Koch of Quirksmode.org fame and other Fronteers members, was bringing subject matter experts to the Dutch developer community for an affordable price and aimed to "deep-dive" on different subjects instead of delivering blue-sky, purely inspirational talks.

Here are my impressions of the two days and I will only cover the talks and panels I saw or participated in.

The conference was located in the Pakhuis De Zwijger building in Amsterdam and covered mainly CSS and JavaScript. The venue was very adequate, with surprisingly fast and available wireless and two halls - a large one to host the main talks and hold all attendees and a smaller break-out room to host expert panels that were aimed to allow attendees to ask the experts their questions. The really challenging thing however were the stairs, which are built to Dutch standards but would make English or US health and safety departments wonder.

The first day started for me with Bert Bos' talk about the CSS box model. Bert is a very famous W3C member and mathematician by heart and delivered an amazingly detailed talk about the box model, its math calculations and implications and showed some of the upcoming typography improvements in CSS as a small extra.

Following was the panel on professionalism by members of Fronteers and Chris Mills of Opera. Chris was advocating for making sure that future web developers get a professional start into the subject matter by getting exposure to the Web Standards Curriculum, a Creative Commons licensed article series spanning from "what is the web" to "write ajax applications using best practices".

Next up was a JavaScript expert panel with Stuart Langridge, author of DHTML Utopia, Dean Edwards, author of ie7.js and me. The idea was to allow the audience to ask any JavaScript questions and us trying to answer so to say straight from the horse's mouth. The panel went well, but we got a bit stuck arguing about the right way to create links that point to JavaScript functionality. This is being researched soon and we will report the results.

Stephen Hay was up next, covering Maintainable CSS. You might not have heard about Stephen, but he was one of the people responsible for the Cinnamon Interactive web site - one of the first sites that looked very pretty and did not use tables for layout. Stephen made some very good points in terms of making CSS work with large teams and it was very enjoyable to see him speak in detail about things that have been ailing him for a while.

This concluded day one and we all repaired to a bar on a boat nearby to have some non-alcoholic refreshing beverages and go to bed early in order to be fresh and receptive the next morning^*.

^* Real events might have varied.

The second day of Fronteers2008 started with Pete LePage showing off the Internet Explorer 8 beta features. We are in for a treat, IE8 looks like a really nice browser and some of the detail features are great (ohhashchange event for Ajax bookmarking and history seeding without iframe hacks, web slices, accellerators). Kudos to Pete pulling off a great presentation to a room of developers who basically had to hack around IE for the last few years and get them excited about what's to come.

The second JavaScript panel was next featuring again Dean Edwards, Gerbert Kaandorp of backbase.com and Tom Occhino of the MooTools core team. The second panel went well, too, and this time they collected questions before the panel and went through them one by one.

Next up was my turn to talk about Maintainable JavaScript:

It was a bit of a tricky talk, as I didn't want to repeat my arguments from Seven Reasons for Code Bloat whilst not being too technical. I think I managed to pull it off, covering rearchitecting and refactoring scripts, good documentation and how to create it from comments in the code and some thoughts on code standards.

The real deep-dive into subject matter came after me in the form of Stuart Langridge talking about JavaScript Closures and explaining that a lot about them is a Zen thing and once you found enlightenment, everything will be easy. Well, I thoroughly enjoyed it and have to agree.

The conference ended with Andy Clarke explaining in detail how understanding and implementing positioning in CSS can lead to rich and beautiful web sites and how we should not see technical boundaries but embrace visual richness and interaction by challenging ourselves.

All in all Fronteers was a conference well worth visiting and I hope that there will be another one next year. For now, check the slide page on the web-site to learn about the presentations I missed.

Hats off to the Fronteers, keep fighting the good fight!

Chris Heilmann
Yahoo Developer Network

Posted at 6:30 AM | Comments (1)

September 15, 2008

Highlights from Open Hack Day

Note: This was originally posted on Yahoo!'s Yodel Anecdotal blog.

Open Hack Day has just finished up, topping off a frantic two days of hacking with an unexpectedly large number of awards and an unexpectedly small number of leftover doughnuts. Hack days at Yahoo! have always been about taking a great idea from conception to presentation in an enormously short period of time, and the quality of concept and execution throughout from the external hackers has been inspiring.

I had planned to live-blog some of the highlights of the presentations while they were going on, but my laptop battery ran out right as they were starting up. However, for those of you following along at home…eleven hours delayed…here’s a rough transcription of my handwritten comments. A huge thanks to all of the organizers and other staff that made this Open Hack Day amazing, and an even huger thanks to the incredible hackers who came out to share these crazy awesome ideas. If you’d like a less free-form recap of some of the day’s memorable moments, you can find the overall list of hacks over at hackday.blorg.

Sean Montgomery
Yahoo! Sports

• As 2pm rolls around, the chairs in the audience start filling up and the University Hack Day winners are ushered to the stage to kick off the presentations. It’s been an intense morning of quiet hacking and doughnut consumption to the soothing sounds of microphone checks and hack dress rehearsals.
• Our MCs are Neal Sample and Eric Wu, who provide witty banter along with the top prize categories: Filo’s Technical Merit Award; Most Unexpected; Best User Experience; and Best Overall Hack. There will also be a variety of small prizes offered by specific groups like Y!OS and Flickr. Our esteemed judges? Cheryl Ainoa, VP of Yahoo! Media Engineering; Ash Patel, head of our Audience division; Rashmi Sinha, CEO of SlideShare; David Filo, co-founder and Chief Yahoo; Jeff Clavier, investor extraordinaire; Matt Mullenweg, founder of Wordpress; and Om Malik, CEO of GigaOm.
• Before the presentations began, the Georgia Tech hacker, Roger Pincombe, cozied up to the judges by handing them Xbox games and hardcover books for his hack, DialPrice. It’s a phone interface for comparative shopping that’ll spit back user ratings, price ranges, and local availability for items that you identify by their UPC code, and it comes with a fun map-based visualization to see which items people are looking at around the country. The Yahoo! Shopping API wasn’t mature enough to be used when the hack was initially developed, so all of the data is coming from Goo…er, I mean, “Oogle” Product Search.
• Demograph, by Mattt Thompson of CMU, maps out congressional districts for any given location and also provided the first of several Sarah Palin references throughout the day.
• In a rather bold move, Michael Fischer of Stanford “open-sourced” his FlickrFuse hack to the audience — any changes that the hackers in the audience submitted would immediately be reflected back in the actual application. The results were surprisingly non-disastrous.


• If you want to succeed, try adding “Yahoo!” to your hack name! Consequently, Will Duff of UIUC presented not just “Pages”, but instead the much classier “Yahoo! Pages”, a very polished inline WYSIWYG page editor layered on top of YUI components that he used to quickly throw together an extremely passable imitation of the one of the YUI documentation pages.


• Another thing to keep in mind is that you should always have a contingency plan in case something goes horribly wrong with your presentation. The Psychic Hotline hack, a voice-operated interface to the 20 Questions game put together by Ryan Luecke, Gabor Angeli, and Stewart He of Berkeley, ran into some technical difficulties early on and looked dead in the water. However, the guys quickly switched gears to their backup hack, a hand-made electric guitar on which you would play notes by completing circuits with a copper wire “pick”. While Ryan distracted the crowd with his rendition of “Seven Nation Army” and his unfamiliarity with “Freebird”, the other guys were able to sort out the issues with the Psychic Hotline and start the presentation over again. This time, it went off without a hitch in guessing that the audience had picked “robot” as their noun, except for when Neal was privately thinking about a Null Pointer Exception and they got that instead.
• One issue with the 90 second time limit for hack presentations is that good hacks can get cut short (by our “Girl Talk” cutoff music) and we’ll all miss out on hearing about a really cool idea. However, it does force hackers to really get to the essence of their project without all of the frill, and if the idea is powerful enough, it’ll still grab people.


• Ganzbot, a feed-reading robot hacked together by Jeremy Gillick, is perhaps the most disturbing way possible that I can imagine receiving my stock and weather information as I wake up in the morning.


• Usually, FireEagle is supposed to passively say where you are, once you’ve settled down there. Weather Sets, by Leah Culver and Ariel Waldman, does the opposite in using FireEagle to urge you to go somewhere else, by setting up a location-based game where you win by collecting sets of colored cards based on local weather and Flickr photos.


• Be careful when you solicit suggestions from the audience for, say, a pair of random search query terms. The first suggestion I heard shouted out in reponse — “bacon fiesta” — was strangely passed over in favor of “hack day”.
• Mo Kakwan, something of an Open Hack Day celebrity thanks to his hilarious presentation two years ago, hit it out of the park one more time with his Virtual Moshpit. It’s hard to describe this one without video, so hopefully that’ll be forthcoming shortly. The best I can say is that there was girlish screaming of “Girl Talk!”, physics-based stick figure animations, and Mo’s trademark delivery, all in one monumentally funny package.


• The trio of travel/location oriented hacks that followed really stood out to me. TripIt provided one of the coolest Open Mail integrations with an application that would allow you to drag over any flight/hotel confirmation email in your Inbox and automatically convert it into a detailed trip record in their system. Jesse Baird’s Cell Phone Signal Tracker and Where Are My Drivers, by Wilson Sheldon and Kelvin Ling, both used FireEagle to great effect, the former allowing you to wander around and map out your cell phone signal strength in a region and the latter letting a restaurant keep track of the location of any of their delivery folk to make it easier to reroute or redistribute resources.


• What’s warm and sleeps with you every night? For Mark Rosetta, it’s not his girlfriend, but rather his laptop. But, as he states, both seem to go from hot to cold entirely randomly. He can fix one of those, however, by using iHeater, which is a page of embedded fireplace videos from YouTube that’ll peg your CPU and subsequently overheat your laptop. Future plans include 3D rendering and further de-optimizations
• The final hack, Hack #47, was also one of the most amusing. Niels Joubert and Greg Schechter noticed at the last minute that no one had submitted a SearchMonkey hack, and saw an opportunity. So, Niels closed out the presentations with Speedhack: Writing a SearchMonkey Hack in 90 Seconds, where he spent his 90 seconds on stage actually creating a SearchMonkey enhanced result on the fly. It took two tries due to inaccurate clicking, network latency, missing semicolons, and misleading shouted suggestions from the audience, but we were eventually rewarded with a functional vCard-based enhanced result for YouTube videos. And Niels and Greg were also rewarded with prizes equal in value to the effort they put into their hack — two mint-condition Hack #48 signs.

Given such a high-quality and enjoyable round of presentations, it was inevitable that the judges would relent and offer up more prizes to compensate. Nonetheless, the fact that we handed out nearly 25 prizes altogether, from Flash documentation wall posters to hand-held video cameras, was surprising and gratifying. You can see the list of all of the winners here, and we’ll surely have some sort of grand recap when the official Yodel bloggers get back. For now, thank you again to everyone who came out and supported or participated in this great event, and keep on hacking!

Posted at 2:47 PM | Comments (1)

SearchMonkey events in Mexico and Argentina

Following hot on the heels of Open Hack Day in Sunnyvale, California, we've got two upcoming SearchMonkey workshops in Mexico and Argentina.

At these events developers will get an overview of what is happening in Yahoo! Search as well as an overview on how to use the SearchMonkey platform. We will cover how to build a Presentation and Custom Data Services, and all the necessary tools for you to get started using SearchMonkey.

Spaces are limited and developers need to RSVP to secure a space. Please see the Upcoming links below for more information

Yahoo! SearchMonkey workshop en Argentina September 16, 2008

Yahoo! SearchMonkey workshop en México September 18, 2008

Hope you can join us!

SearchMonkey LATAM team

Posted at 11:57 AM | Comments (0)

September 12, 2008

Launching Today: BOSS Mashable Challenge

The BOSS team is all at Open Hack 2008 today. It’s early and there’s already a crowd, so we’re excited to announce a new developer challenge here today. The BOSS Mashable Challenge is all about openness and innovation in search. All you need to do to enter is build a mash-up using one of the BOSS APIs and enter it into the Challenge by September 28.

Here's our post about it over at the Yahoo! Search Blog. Mashable has all the details.

If you’re at Open Hack 2008, stop by the BOSS workshop at 3:00 in classroom 3.

Graham Mudd
BOSS Team

Posted at 8:57 AM | Comments (0)

September 10, 2008

YDN at Mobile Monday London

It seems like lately public awareness about mobile apps has grown exponentially: when pub conversations begin to include banter around the 3G iPhone, the cheapest pay-as-you-go plans and how to upload your mobile photos to Flickr, you know something is going on.

Of course we developers want to get our apps running in those mini devices everybody has in their pockets as soon as possible... But how? Should we develop a mobile web version or a java j2me application? Or maybe try the Nokia SDK? What about those widget engines that run in many platforms? Or is it better to just target the iPhone?

On 15th September, Mobile Monday London is organizing a panel discussion on this hot topic under the title of "Mobile Platforms: Too much choice or Hobson's choice?". YDN team will of course be there, commenting about our own mobile widget initiative and some of our lessons learned from our own mobile products.

Check all the info about the event in Mobile Monday's blog and hope to see you there!

Posted at 11:39 AM | Comments (1)

Barcamp Brighton 3 - Fun at the Uni

Last Weekend, right after the dConstruct conference, Brighton hosted the popular Barcamp unconference for the third time.

The crowd gathered in the cosy rooms of Falmer House in the University of Sussex. A lot of faces looked familiar as at least 50% of them been to dConstruct and the glorious YDN/BBC Backstage powered afterparty just a few hours before.

After the traditional welcome round, where everybody shortly introduced and tagged themselves, the sessions started. On the 2 days over 50 different sessions in 9 parallel slots offered a wide variety of different topics. Most of them can be found on the barcampbrighton3 backnetwork.

Two of the presentations I found particularly interesting and useful were:

Marc Tobias Kunisch allowed CSS Developers a peak on what's already possible in the new browser generations in his talk:"Beyond IE6: CSS in latest browser versions", taking a look at which CSS features are supported in latest webkit nightly builds, Firefox 3.1 and IE8 beta. The presentation is online at http://marctobiaskunisch.com/beyondIE6/.

Robert Lee-Cann gave a beginner's guide to version control with Git entitled "Git's the way to do it!" that convinced us all that we should manage our code in a distributed way from now on and nobody wants to merge branches in SVN anymore ;-) Online at: http://thirtylime.com/barcampbrighton3/.

The other thing, besides high quality information, that made Barcamp Brighton 3 a lot of fun, was of course what happened after the first day of talks: the inevitable and indispensable night of party, interesting chats and games of Semantopoly, CSS Specificity Memory and Werewolf.

A special thank you goes out to the organizers who made it possible again to celebrate for 2 days in a great venue with very good catering and a rock solid wifi.

Check out the photos of Barcamp Brighton 3 on Flickr.

Dirk Ginader
Web Developer, Yahoo! Europe

Posted at 11:21 AM | Comments (0)

Getting started with the Yahoo! Address Book API

If there’s one internet application that people use most, it's probably email. However, email is worthless if you don't know where to send your messages and who you’re sending to; this makes the email address book one of the most widely used applications as well. In fact, the Yahoo! Address Book is a gold mine of relationships, connections, and history waiting to be tapped. To unlock that value, we’ve opened the Yahoo! Address Book to third-party developers.

This tutorial is aimed at helping new developers with a background in PHP get started with the Yahoo! Address Book APIs. I assume no prior knowledge of Yahoo technologies, but I do assume that you are familiar with network programming and understand how HTTP works at a basic level.

Before you get started, you’ll need an AppID (application identifier) from developer.yahoo.com (http://developer.yahoo.com/auth/appreg.html) with the correct scope of Address Book Read.
(Note: Sign up for an AppID at: http://developer.yahoo.com/wsregapp/)

For this tutorial to work, when you obtain your AppID, specify your application entry point to be:

http://www.domain.com/auth/bbauth.php

Substitute your own domain for www.domain.com. This structure will help you consolidate your landing pages (for Yahoo! and any other web services you choose) when you start building apps that rely on passing credentials to a receiving web page. The tutorial also assumes that you have access to an installation of PHP4 or PHP5 that is curl -capable.

When you are done with this tutorial, you should know how to do the following:

1) Present a user with a signed URL to login and pass user specific credentials back to your application.
2) Understand how to accept the user credentials and use them to make an authenticated call to the Y! Address Book APIs and get access to their data.
3) Use the built-in PHP SimpleXML() call to obtain specific fields from the user's address book.

Charles Wu
Platform Product Manager

Authentication

The Yahoo! Address Book API uses BBAuth, which relies on signed URLs to verify that legitimate parties are accessing a user's data. BBAuth uses a combination of a shared secret, cookies, and time-stamp to ensure that a user's data cannot be easily accessed. These checks protect the user, but can seem complex; many new developers struggle at this step to create a correctly signed URL.

This tutorial will not go into detail about the signing mechanics of how the authorization scheme works. Instead, I’ll rely on the “quick-start” PHP BBAuth libraries provided by Yahoo! at developer.yahoo.com. For developers who want a deeper understanding of BBAuth, please visit: http://developer.yahoo.com/auth/user.html.

My demo application will output the emails in a user's Yahoo! Address Book. It will have an HTML wrapper with a DIV to display the content depending on whether it’s a BBAuth-authenticated page or not. The wrapper code is pretty uninteresting, I’ve listed it here :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="look">
<h2>Address Book Tutorial Blog Post</h2>
  <div>
  <?php CreateContent(); ?>
  </div>
  <div id="content">
  </div>
</div>
</body>
</html>

The interesting stuff is created in the CreateContent() call. Once it determines whether you’ve already authenticated, it gets the data. The pseudo-code is as follows:

if (empty(\$_GET["token"])) {
	// User is not coming from BBAuth because it has not been called with a parameter "token" PRESUMABLY from BBAuth.
	// Create a link for the user to log into BBAuth
} else {
	// User is presumably being redirected from BBAuth
	// so create an authenticated URL and get the address book data. 
}

The key (no pun intended) in BBAuth is the pairing of the AppID (which can be publicly visible) and the shared secret (which should be kept hidden). These two cryptic strings are used to authenticate who you are. All your calls use some combination or transform of these items to demonstrate who you are. BBAuth also relies on time-stamps to make sure that a fresh call is made. I won’t apply the transforms directly, but instead will rely on PHP libraries from developer.yahoo.com and available in the BBAuth Quick Start bundle at: http://developer.yahoo.com/auth/quickstart/bbauth_quickstart.zip

Since these are global to everything we do, let's make them available to the page, and since they won't change, let's define them as constants.

define("APPID", '***-YOUR+APPID+HERE-***');
define("SECRET", '***-YOUR+SHARED+SECRET+HERE-***');

Next, we'll include the correct BBAuth library. We'll assume that it's in the same directory as this script, but you can modify the path to meet your needs. This library includes auth routines for the different types of APIs Yahoo! offers.

// Include the proper class file
$v = phpversion();
if ($v[0] == '4') {
	include("ybrowserauth.class.php4");
} elseif ($v[0] == '5') {
	include("ybrowserauth.class.php5");
} else {
	die('Error: could not find the bbauth PHP class file.');
}

	// Initialize the Authentication Object
	
	$authObj = new YBBauthREST(APPID, SECRET);

The demo script here does double duty: one part constructs a URL that directs a user to a login page for BBAuth and another uses the BBAuth token to make the actual API calls. Normally, your app would construct the login URL in one page, and then redirect to another page to collect the authorization token. Other applications choose a single page to handle the application flow and authentication. In this case, we use a single page.

Creating the Login URL

Assuming you don't have a token you’ll have to direct the user who is accessing your app to the correct page. The YBrowserAuth class has a single call that will generate the correct URL based on your credentials and the current time. The call is:

YBrowserAuth->getAuthURL('your_app_data', RETURN_USER_HASH boolean)

You'll want the RETURN_USER_HASH set to true to return the user token when completed. This user token is unique to the user who logs in and can be used to associate your application user data with the Yahoo! login. (This is similar to the user info that OpenID provides.) This token returns a signed URL that can be embedded in the page, where a user can click it to authenticate.

// You can send some data along with the authentication request
// In this case, the data is the string 'some_application_data'
echo 'You have not signed on using BBauth yet<br /><br />';
echo '<a href="'.$authObj->getAuthURL('some_application_data', true).'">Click here to authorize</a>';

The 'your_app_data' is a user-provided switch that your landing endpoint can use to direct to the correct function, for instance, if your web application uses both the Address Book API and the Mail API. If you come in from a point in your app that’s using Mail, you could pass the parameter 'mail' and your landing page will store the token. You can store it in a database and then redirect to the page that processes the mail API calls. If you’re coming from a place where the app needs to initiate an address book call, you can use 'addressbook' as the parameter and do a switch based on that.

Calling the Address Book

If a user clicks on the link generated above, they’ll be directed to a special Yahoo page and asked to enter user name and password on Yahoo!. The information in the URL means that once they’ve verified that your app is permitted to access their Contacts information, their browser is redirected to the landing page you provided when you got your AppID.

Yahoo! passes you a token that can be used for two weeks or until the user revokes permission. We pass that token via a GET parameter called "token." We also pass back the app data information you may have sent in the GET parameter called "appdata."

First, validate that the token you receive is correct. The validate_sig() call of the YBrowserAuth class extracts the appropriate information to ensure that the source and contents are from Yahoo!. Let's assume that this is correct. Now it’s time to get the address book data.

Constructing the Web Services Call

You need to construct an Address Book API query. The query structure is very similar to an SQL query, so it's easy. Start off with the root:

http://address.yahooapis.com/api/ws/v1/searchContacts?

Next, pick the data format you want for the return data. In my example we use XML. You can also specify JSON.

format=xml

Next, determine what fields you want returned. If you leave this out, you’ll get all fields for all contacts. In this example we only want email addresses to kickstart our invitation flow.

&fields=email

Finally, determine the search criteria you wish to apply. In this case, we only request contacts that have an email address.

&email.present=1

The completed query will look like this:

http://address.yahooapis.com/api/ws/v1/searchContacts?format=xml&fields=email&email.present=1

Note: Making a curl call on this will give you a 403 forbidden error. To make the call you now need to perform the same signing process as you performed to request the login URL. Your app makes a call to obtain a WSSID (Web Services Session ID) and the user's cookies. This is a limited time Session ID. In addition, you need to set the cookie. This additional step protects you and your users. The Ybrowserauth class provides a mechanism for that in the form of the makeAuthWSgetCall() that signs the URL, and returns what’s received from the web service.

$xmlstr=$authObj->makeAuthWSgetCall($path);	

This sample code displays the information you received from the authentication web service for your information. We'll skip that here. You now have an XML file that can be parsed. The rest is standard PHP:

$xml = new SimpleXMLElement($xmlstr);

Iterating through the array creates an array that can be manipulated. In this case, because address books can be full of duplicates, we eliminate the dupes first, to be certain we don’t spam users with multiple invites.

		$i = 0;	
		foreach ($xml->contact as $contact) {
			$emails[$i] = $contact->email;
			$i++;
		}
		$emails = array_unique($emails);
		sort($emails);

The sample file prints out the emails and you’re done. The use of some simple libraries makes it a breeze to work with the Yahoo! Address Book API. Note the code from this tutorial will be available in the files section of the ydn-addressbook Yahoo Group.

Other links that might be of interest:

[1] A common authentication problem is that your timestamp may not align with Yahoo! time. Yahoo offers a time web service that returns the current time for your purpose:

http://developer.yahoo.com/util/timeservice/V1/getTime.html

[2] YDN Evangelist Dan Theurer has blog post on his blog explaining use the of BBAuth for Single Sign On and how to use the User Hash:

http://www.theurer.cc/blog/2006/09/29/bbauth-coding-single-sign-on/

Posted at 10:31 AM | Comments (6)

September 9, 2008

YDN UK at dConstruct

dConstruct, for those of you that are unfamiliar with the name, is a one day web development conference held in Brighton at the Brighton Dome. This year the flavor of the talks was "Designing the social web", a very apt topic of conversation on the web right now.

The day kicked off to a dismal start, in the true spirit of British summer, we were graced with cold, heavy rain and grey skies, a good reason to get inside and register. Inside the fantastic venue, we were warmly greeted by various members from the Clearleft team (who just so happened to have organised the event). The stalls area was inviting with the presence of the Yahoo! Developer Network, BBC Backstage, Clearleft, O'Reilly, Silverback and Wired Sussex. Groups formed around many of the big names in the web development arena including Andy Budd, Jeremy Keith, our own Christian Heilman, Ryan Carson, Peter-Paul Koch (PPK), Tantek Çelik, to name but a few. The shear attendance of these reputable industry figures confirmed that it was going to be a worthy conference.

The kick off talk from Steven Johnson on "The Urban Web" really set the tone of the conference through his captivating presentation on how the social web virtually eradicated Cholera in the mid 19th century. We found that an early information architecture diagram highlighted a link between drinking water outlets and Cholera deaths. This linked with a prolific character in a Cholera plagued region of London who was aware of this powerful link, managed to spread the word, raising awareness of the issue and consequently largely wiping out Cholera in London. This was our introduction to the significance of the social web albeit in a primitive form.

Prior to lunch, it was time for fun, fun at the expense of us, human beings. Joshua Porter and his mouthful of a talk "Leveraging Cognitive Bias in Social Design", was a refreshing insight into how humans by their very nature are supposedly irrational, and in fact we base decisions on biases. An experiment captured on film clearly illustrated how we will imitate actions/ gestures when a group acts in union.

Tantek Çelik wanted to talk to us about "Social Network Portability" which was a fantastic insight into the power of Microformats and their power on the social web. Matt Biddulph & Matt Jones shared their thoughts on "Designing for the Coral Reef", an informative look at building transparent websites, referring to their model of Dopplr, and how they have tried to allow multiple entry and exit points to their services, breaking the traditional web based application pattern.

Jeremy Keith finished the conference off with a learned and awe-inspiring talk on "The System of the World". To describe Jeremy's talk would be a feat in itself; a composition of exquisite words, quotes and imagery baffled and amazed the audience. Things don't happen by co-incidence we were told. People, animals, protons and atoms all converge, connect, separate one another to create an intrinsic array of 'communities'. The analogies covered were a great insight to the understanding of the formation of popular websites, and what would constitute a failing yet perfectly executed website.

The Yahoo! Developer Network and BBC Backstage sponsored the dConstruct after party, held at Above Audio, where a huge number of conference guests descended to feast on food provided by BBC Backstage and refuel with drinks provided by Yahoo! Developer Network. It seemed the theme for the evening was sport a smile, and network. Above Audio is a cosy venue that encouraged introduction to strangers or approaching people recognised through the web domain. Come 11pm, it was clear the conference and after party had been a complete success, despite the poor weather, as hitches had not surfaced, no complaints had been received and consensus in global discussion (and twitter) had been overwhelmingly positive. Bring on the next dConstruct.

James Broad
Developer, Yahoo! London

Posted at 5:21 PM | Comments (2)

September 3, 2008

Search Monkey Developer Evening in Munich, Germany

Today around 20 developers assembled in our Munich office to hear about SearchMonkey, get their questions answered and generally get a feel about what Yahoo is up to in the near future.

The signs weren't good before we started the developer evening. Munich was brimming with people because of a massive football game and a conference which sent the hotel prices soaring.
There was a conference about affiliate marketing in nearby Austria, and a big web development conference in nearby Erlangen the next day. Yet all the developers that signed up for the event arrived with German punctuality and followed the presentation of Neil Crosby asking very interesting questions and getting their concerns answered.

Most questions revolved around the implementation of search monkeys, the issues of abuse and privacy and the promotion opportunities developers have once they successfully created their masterpiece.

The evening ended with us collecting feedback and getting requests for more events and information about other services like BOSS. Both the provided sandwiches and beverages where consumed before we moved the hard-core over to the nearby beer hall which was yet not crowded as the big beer festival is in two weeks time.

So cheers to the team on the ground in Munich, and to all who came around!

Chris Heilmann
Yahoo Developer Network

Posted at 3:34 PM | Comments (3)

Hack-tastic Hack-a-thon in London, England

Yesterday Osmosoft organized a little Hack-a-thon in London, England.

One unexpected attendee was Brian Suda who came over to London from Iceland for the microformat meetings before dconstruct this weekend. Naturally he was immediately swamped with questions about Microformats and showed some very interesting Papernet/Microformats stuff he is working on.

It is really important that people feel that they can organise little hack meetings. Not everything needs to be as big as Hackday. All you really need is a room with power and internet connectivity and maybe a few refreshments. Invite your hacker friends, and lay it out there on Upcoming.

If you need any advice, suggestions, or help you can always contact us.

Tom Hughes-Croucher

Yahoo! Developer Network

Posted at 3:45 AM | Comments (3)

Hadoop Community meeting in the Yahoo Korea office

On Wednesday, the 27th of August around 40 developers met in the office of Yahoo! in Seoul, Korea to talk about all things Hadoop.

For 3 hours the attendees listened to different speakers covering uses of Hadoop, an Apache project developing open-source software for scalable distributed computing.

The different topic and speakers were:

1) Machine Learning Algorithm using Hadoop Map/Reduce ( Jaesun Han , NexR)
2) HBase v0.2 Test Result (Hyungjoon Kim, NHN)
3) Map/Reduce Discussion (Heewon Jeon, Yahoo! Korea)

There are a lot of photos available on Flickr and we're happy to see that everybody had a great time and came back home schwag-ladden with T-Shirts, notebook bags and even digital photo frames!

Chris Heilmann
Yahoo Developer Network

Posted at 2:59 AM | Comments (4)

September 2, 2008

Hackers, Unite!

Yahoo!'s gearing up for Open Hack 2008 and we want YOU to be here!
It'll be a time of craziness mingled with head-down hacking, and if
that sounds like your cup-of-tea, request an invite at www.hackday.org.
If you really want to be selected, tell us that you are prepared to
hack. As always, hackers are given top priority!

We're still keeping some of the deets on the down-low, but rest
assured we'll bend over backwards to make it the best hack event we've
ever put on. If you don't want to make the trek to Silicon Valley,
please help us get the word out by placing this badge on your blog.

Just copy and paste the following code:

Robyn Tippins
Community Manager, YDN

rtippins at yahoo-inc.com

Posted at 6:08 PM | Comments (1)