Best Practices for Creating JavaScript

I’m on a mission to relearn JavaScript. My limited skills are from trying to shoehorn scripts into pages without completely understanding the theory. Christian Heilmann, a developer evangelist for Yahoo!, is a great resource for not only learning how to code but also why you should use method A over B.

This presentation by Christian sheds a lot of light on how to create re-usable, maintainable scripts.

Yahoo! Boss now features keywords and more language support

Yahoo! Boss search APIThe Yahoo! Developer Network blog just published a blog post with new Boss features: Yahoo! Search BOSS Releases Key Terms. There are a few key details in this article.

  • Key terms are now available: Each result now includes the keyterms Yahoo’s search index has assigned to the web page. This is the same information Yahoo! uses for search suggestions. I was trying to recreate this by using key term extraction in Yahoo! Pipes. But this would have involved multiple requests and slowed the page down. Boss’s inclusion of keyterms opens a whole new world of semantic search options. I’m using them to display related results on V3GGIE.
  • Extended language/region support: I was in Romania a couple weeks ago discussing Yahoo! Boss with some students in Bucharest. I noticed we didn’t support the Romanian language in Boss. I was able to send a few emails asking for support and voila, the Yahoo! Boss has not only added Romanian, but also Turkish and Hebrew! That is some fast turn around and shows their commitment to the users.
  • Boss made easier: Christian Heilmann has been creating Boss plug-n-play projects. You can get a JavaScript Boss badge, grab all the keyterms in one arrray, and recently a build your own site search in 3 easy steps lesson.
  • The article also has a link to a new site I’m developing: Tartin3. This is still in the development stages and is a prototype for a much larger site InsiderFood.com. I’m hoping to take the covers off Insider Food within the next couple weeks.Insider Food is now Live – but in Beta mode as I fix bugs and make enhance the search logic

Disclaimer: I work for Yahoo! but I’m not on the Yahoo! Boss team. I’m their “customer”, as I use Boss for multiple projects outside Yahoo!. I also am a member of the International Yahoo! Developer Network, which allows me to demonstrate and teach some of the Yahoo! API’s and services.

Related articles by Zemanta

ARIA support with the YUI library

AJAX and DHTML have made web sites more interactive and easier to use. At least for visitors who are not using a screen reader. Screen reader users have to struggle with pages that lose focus, change without prompting the user of new data, and much more. However, there are many developers working on solutions to this problem.

Todd Kloots, of the Yahoo User Interface group was one of the first to develop accessible javascript libraries with the YUI menu package. He just published a blog post on the YUI web site about adding ARIA support to the YUI tab package. This information could also help you add this functionality to your existing YUI-based applications.

Here’s how Todd describes the goal

The YUI TabView Control is built on a strong
foundation of semantic markup that provides users with some basic accessibility. But while TabView looks like a desktop tab control, screen readers don’t present it as an atomic
widget, leaving users to figure out how the various HTML elements that compose a TabView relate to each other. However, through the application of the WAI-ARIA Roles and States, it is possible to enhance TabView’s accessibility such that users of screen readers perceive it as a desktop tab control.

Enhancing TabView Accessibility with WAI-ARIA Roles and States – Todd Kloots

The following video shows how this approach works with Firefox and a screen reader.

Related articles

Storyboard your DHTML interactions

Bill Scott - AJAX GodBill Scott gave an interesting lecture today at Yahoo! about AJAX design patterns. He explained how good AJAX designs keep the user’s attention on the page, remove roadblocks, and increase stickiness to a site.

Patterns of successful AJAX behaviors are beginning to appear (Netflix, 37Signals, Yahoo!). There are subtle, and sometimes not so subtle, changes that can occur to let a user know that an action has happened.

storyboard for AJAX interactionsDownload the drag and drop storyboard design package

For instance, he pointed out an interaction on the recently departed Yahoo! Photos site. A user could select multiple photos and then drag them to special collection folders. The page generated several panels to let the user know that the move would go to the preferred folder (hit yes), wait for the action to finish, and then a final congratulations panel (hit yes). These panels and the two required clicks could have been avoided if the folder changed when the photos were dropped into it. This could be a simple glow and maybe the number of photos in the folder is increased.

Plan your entire sequence in advance

Eric Miraglia coined the phrase Interesting Moments to describe the multiple changes that occur during an AJAX/DHTML action.

In most cases, Drag and Drop requires that you write code to respond to the interesting moments in the interaction: when the drag event starts, when the dragged object enters another object, and so on.
Yahoo! UI Library: Drag & Drop – Interesting Moments

Your user will have a much more pleasant experience if these are considered in the beginning of production. The Yahoo User Interface library includes a storyboard template (.zip) for planning these interactions effectively. This story board concept also works well for forms (especially form validation actions) and Flash components.

Update

The YUI blog has posted a video of Bill’s lecture: YUI Theater — Bill Scott: “Designing the Rich Web Experience: Principals and Patterns for Rich Interaction Design on the Web”. This is a great opportunity to learn from one of the finest developers around.

Related articles

Aggregate RSS from all over the web with Yahoo! Pipes

Yahoo! has been thriving on hacks. It’s quarterly Hack Days have given engineers the opportunity to build radical and sometimes silly alterations of existing services. Once in a while, these hacks are truly revolutionary. Enter Yahoo! Pipes.

Yahoo Pipes
This super cool project started as a Hack and has now become an official project. How cool is it? Think of the impact Digg, Flickr, Delicious, Technorati, and YouTube had on the internet in 2006. Pipes has that potential!

So, what is this potential “Segway” product? Pipes allows you to create aggregated feeds to publish on your own site.

Lets say you wanted to create a web page about Pizza in someone’s local area. B.P. (Before Pipes) you would have to write code for a form requesting a zip code, you’d then have to write code to request the appropriate rss feed from Yahoo! Local for restaurants, Epicurious for recipes, Craigslist for pizza loving personal ads, Flickr for images of pizza, etc. You’d then have to parse the XML and build modules to display the information.

That’s a lot of work for a simple project.

Enter the Pipe

Pipes allows you to do all of this in a simple drag and drop interface. I first used it in its early Alpha stage and it took me about 10 minutes to figure out what was happening. They’ve steadily worked on the interface and you can accomplish the above tasks in about 5 minutes. You can then use their tools to publish the results to your own blog or web site.

Mashing up has now become easier than opening a box of potato flakes and adding water. This is big folks, really big.

Here’s how the Pipes team describes their goal

Pipes is an interactive feed aggregator and manipulator. Using Pipes, you can create feeds that are more powerful, useful and relevant.
pipes.yahoo.com

It ain’t perfect… yet

Pipes does have some rough edges, there’s no doubt about it. It’s not very accessible, but they’re working on that right now. If you have suggestions or find bugs, let them know.

Enjoy this site as the super-cool, revolutionary site it is. It’s was created with passion and hard work by a small devoted team. They’ve got the spirit of a startup with the power of Yahoo!

Enjoy the new A.P. Era (After Pipes).