Archive for February, 2010

• pages will load faster
• pageviews, if impacted at all, may increase

Today, we checked in our work-to-date on the next generation of YUI Charts. You can find this pre-alpha code, along with some examples, in the sandbox directory of the YUI 3 head on GitHub. This initial release is a preview of where we’re going with YUI Charts; no aspect of this implementation is complete, and it’s not suitable for production use at this point, but it does give a sense of where we’re heading — and it’s a chance for us to check in with interested developers and share our progress. (If you need a production-ready charts solution today, check out YUI 2 Charts.)

For this release, we have created a solid foundation to build up the functionality of the Charts, and we’ve included one simple chart type to demonstrate the flexibility of our architecture. In particular:

• YUI 3 Charts are now fully modular. Individual subcomponents of a Chart, like an Axis, or a LineGraph, are now their own classes that you can manage and update individually.
• The modularity of the Charts component within the Flash Player (our current rendering engine of choice) is fully paralleled in its JavaScript wrapper. From the JS developer’s point of view, you are working with a set of JS components, with all method calls, display list changes and property assignments seamlessly transmitted to Flash and back. (This abstraction will be even more crucial when we move beyond a single rendering engine.)
• The Charts now support styling every single element — from label rotation and font faces (no need for embedded fonts!), to the color and number of tick marks.
• Because of the new modularity, features like multiple axes and multiple independent graphs are now included.
• In addition to the very advanced Chart, we’ve drafted a sugar wrapper called SimpleChart, which allows you to quickly build Charts with two lines of code.

Now that the foundation is in place, our next step is to continue building up the Charts functionality. If you are interested in what that will be, take a look at our talk from YUIConf 2009, where we described our grand plans for the architecture and features of the Charts package.

You can start playing with Charts immediately: the component, along with a few very informative examples, is located in the YUI 3 sandbox. To get started, download the latest YUI 3 build from GitHub, drop it in your web root, and navigate to the sandbox/chart/tests directory. Keep in mind that this is not a packaged release. For that reason, the API we use is just a sketch of what the final API will be and is therefore sure to change, but we’d love to hear your thoughts and feedback on where the project is headed.

We’ve posted the current example set on YUIBlog as well (running build 1828) — feel free to click through if you’re interested in seeing the current work in action:

• Simple Chart
• Customized Simple Chart
• String Formatting
• Advanced Usage

—Tripp Bridges and Allen Rabinovich, YUI Team engineers

This post describes a set of best practices for setting the default search provider. Our goal continues to be keeping users in control of their browser, following our published Guidelines and Requirements for add-on development.

If you write software that modifies Internet Explorer’s search settings or defaults through direct registry manipulation, your software may be contributing to user confusion and frustration.

Whenever a program tries to modify the default search provider through direct registry manipulation (e.g. modifying the DefaultScope registry key directly as described in an earlier blog post ), IE8 intercepts the change and prompts users to confirm what they want:

Figure 1: In this dialog, the software requests a search default change using the recommended SetDefault API and clear attribution is displayed. In this case, it is the Contoso Internet Toolbar software.

If multiple search providers try to reset the registry key every time it changes, it causes a confusing and frustrating user experience. The above dialog box will re-appear every time the key is modified directly.

IE8 includes a Search Provider Default configuration experience designed for this scenario. When your software uses the IOpenServiceManager API (to install a search provider) and the SetDefault API (to request users set it as their default), users will see clearer communication about what is happening. This transparency is an important part of the user being in control.

The following code sample shows how to install a search provider and request that the user set it as the default using the recommended APIs.

#include <windows.h>
#include <atlbase.h>
#include <openservice.h>

    HRESULT hr = E_FAIL;
    BOOL fComInitialized = FALSE;

    if (S_OK == CoInitialize(NULL))
    {
        fComInitialized = TRUE;

        //Open a handle to the OpenService manager
        CComPtr<IOpenServiceManager> spManager;
        hr = spManager.CoCreateInstance(CLSID_OpenServiceManager);

        if (SUCCEEDED(hr))
        {
            CComPtr<IOpenService> spService;

            //Install my search provider
            //URL-OF-SERVICE: See http://www.opensearch.org/Specifications/OpenSearch/1.1#OpenSearch_description_elements 
            hr = spManager->InstallService(URL-OF-SERVICE, &spService);

            if (hr==S_OK)
            {
                //Request that the user changes their search default
                hr = spService->SetDefault(TRUE, NULL);
            }
        }
    }

    if (fComInitialized)
    {
        CoUninitialize();
    }

When called, the SetDefault API will show the above dialog (See Figure 1 above) requesting the user to change their search default. The user can approve or deny this request from the software. If approved, the software can change the default setting. If denied, however, the software will not be allowed to change the user's default settings. The user can change the setting at any time by opening the Manage Add-ons window.

If the binary that is calling the SetDefault API is signed with a valid code signing certificate, the program name and publisher will be displayed in the Search Provider Default dialog box as in Figure 1 above. Code that calls SetDefault should be signed.

In summary, if your software monitors the DefaultScope registry key directly, please update your code to use the recommended APIs. This will allow the user to see the search provider default dialog only once and lets them be in full control of their default, in support of the Guidelines for add-on development.

If you are new to OpenSearch Extensibility and would like to learn how to offer your services or how to get started, check out the article Search Provider Extensibility in Internet Explorer.

Until next time,

Duc (Cash) Vo
Programmer Writer
Internet Explorer

This post announces an update to Graded Browser Support. The GBS page on the YUI site always has the most current GBS table. This post includes:

• a list of changes;
• an updated chart of browsers that receive A-grade support;
• our GBS forecast, indicating the changes we expect to make in Q2 2010;
• and a discussion section that lays out some of the strategy behind the current GBS update.

GBS Changes for Q1 2010

Specific changes for Q1 2010 include:

• Initiated A-Grade support for Chrome 4.0.† on Windows XP
• Replaced Windows Vista with Windows 7 in the testing matrix (dropping IE7 from that platform while retaining it on XP)
• Moved Opera 10.† to X-Grade from A-Grade
• Replaced Firefox 3.5.† with Firefox 3.6.† in the testing matrix

Notes:

• The dagger symbol (as in “Firefox 3.6.†”) indicates that the most-current non-beta version at that branch level receives support.
• Code that may be used on pages with unknown doctypes should be tested in IE7 quirks mode.
• Code that may appear in IE8’s "compatibility mode," which emulates but is not identical to IE7, should be tested explicitly in compatibility mode.

GBS Forecast

We expect to make the following changes in the Q2 2010 GBS update:

• Discontinue A-grade for Firefox 3.0.†, moving it to X-grade.

Discussion

This update implements the guidance we provided in Q4 2009. That update generated significant discussion, and high-quality input from Opera is included in the comments thread; I encourage you to refer to that update for more details. Of interest in this update:

1. Chrome: Chrome’s continued growth argues compellingly for its inclusion in the A-Grade. Discussion among members of the GBS committee focused around when, not if, Chrome would be promoted into the testing matrix, and there was a strong consensus that it belongs there today.
2. Opera: Refer to the Q4 2009 GBS update for a discussion of the decision to move Opera to X-Grade. Worth noting here is that YUI specifically and Yahoo more broadly continue to support Opera — just as we continue to support X-Grade browsers in general. The GBS provides guidance for formulating QA testing matrices, and our recommendation as of Q1 2010 is that Opera be grouped in the X-Grade along with other high-quality, low-marketshare browsers. Opera is an excellent browser — we expect Opera users to have a good experience on Yahoo! sites and YUI-based sites, and we’ll continue to investigate bugs related to Opera as they are identified.
3. Windows Vista and Windows 7: By volume, client-side defects that are specific to a single version of Windows (as opposed to a version of Internet Explorer) are relatively low. Our experience has been that Vista-specific testing has not led to a significantly differentiated set of bugs compared with testing on XP. With that in mind, we’ve decided to replace Vista in the testing matrix with the newer and ascendant Windows 7 platform, keeping the testing surface to 4 unique platforms while bracketing the Windows continuum with the evergreen XP and the newer Windows 7. While Vista remains a popular operating system, and QA engineers and developers should retain access to Vista environments to investigate bugs when reported, we advise QA departments to begin migrating their automated testing platforms to Windows 7 at this point.

Our quarterly reminder: Graded Browser Support is a QA philosophy, not a report card on the quality of popular browsers. It’s designed to provide guidance for QA teams about how best to use their limited testing resources (and to frontend engineers about how to sanely cross-check work across a finite set of browsers). The goal is to be conservative and calculating: We want to test the smallest possible subset of browser/platform combinations, leveraging implicit coverage by testing the most commonly shared core browser engines.

The GBS Archive

• GBS Update, 2009-10-16
• GBS Update, 2009-07-02
• GBS Update, 2009-01-28
• GBS Update, 2008-07-03
• GBS Update, 2008-02-19

Some recent news and notes from the YUI community follows. What did we miss? Let us know in the comments or @yuilibrary on Twitter.

• Matt Snider’s YUI 3-based Radial Menus: Matt Snider’s most recent project was inspired by Bioware’s designers: “Today’s article is inspired by the Radial Menu found in many of Bioware’s RPGs, such as Dragon Age. At the press of a button, the menu appears on the screen (usually pausing the game), and allows players to choose common commands. The same type of menu is possible on the web, and may even be more useful than the traditional navigation. We will use JavaScript, CSS, and YUI3 to build flexible Radial Menu widget that appears in the center of the page and responds to end-user clicks.” Check out the article and the example for full details.
  
• Twitsteps — Twitter- and YUI-powered Microforums for Any Site: Twitsteps is an easy-to-install and extremely attractive widget based on YUI 2 that adds Twitter-driven discussions to any site.  Very slick implementation. (Original source.)
  
• EtreProprio — a YUI-based Real Estate Website for Individuals in France: Philippe Bernou, CEO of EtreProprio.com, wrote in to tell us about his site, which provides attractive classified property listings for individuals selling their own properties.  EtreProprio caters to the French market.  The site makes terrific use of YUI 2, including a wide range of utilities and widgets.
  
• Chris Heilmann’s First YUI 3 Hack, “Flickr Collector”: The Yahoo! Developer Network’s Christian Heilmann, author of numerous YUI-based hacks over the years, has is first YUI 3 app up: “Flickr Collector is a simple interface to collect photos from Flickr and copy and paste the HTML to embed them into web sites. Click any of the photos below to see its details. Below the photo you will get the HTML code to copy and paste.You can drag photos into the collection below the thumbnails and remove them from the bin by dragging them into the removal box. Once you are done, hit the ‘See all code’ button to get the HTML of all the photos in your collection box.”
  
• Rich Text Editor Review on Six Revisions: Jeff Starr of Perishable Press reviews Rich Text Editor widgets for Jacob Gube’s Six Revisions blog.  Here’s what he has to say about Dav Glass’s YUI Rich Text Editor: “The YUI Editor is included as part of the extensive Yahoo User-Interface Library (YUI). YUI Editor features valid XHTML, a growing number of plugins, decent documentation, great support for mobile devices, and even drag-n-drop inclusion and sizing of images. Plus, the YUI Editor’s toolbar is easily extensible for advanced and highly customized implementations.”
  
• KQED Making Broad Use of YUI 2.8.0 Utilities and Widgets: We noted not too long ago that KQED public radio was using some YUI, but the usage is now broad and extensive.  The main KQED page is now using the utilities rollup plus Cookie, TabView, and Container.  All things consdered, we’re thrilled to see YUI on the site!
  
• Video: Philip Tellis’s Overview of YUI Flot Charting from FOSDEM: YUI contributor (and Yahoo! performance engineer) Philip Tellis ported the popular Flot charting library to YUI 2, and he spoke about the work at FOSDEM in Brussels earlier this month.  The FOSDEM team has the 44 minute talk up on YouTube.
  
• Eric Ferraiuolo on “Auto-Building YUI 3 Custom Modules”: Eric Ferraiuolo has a new post up on his 925html blog: “YUI 3’s modularity and instance sandboxing invite developers to create their own custom modules, breaking apart their specific application logic.  Having developed over 30 Custom YUI 3 Modules in the last year I quickly realized I needed a sane way to go from writing code to running it in the browser. So, I set out to connect the YUI Builder with my IDE.”  Read on for more details about Eric’s approach.  And, in case you missed it, check out Eric’s presentation on custom modules from YUICONF 2009.
• Sitepoint Calls YUI Grids Builder a “big Time-saving Tool”: Writes Meitar Moscovitz: “The YUI Grid Builder is an elegant, visual way to create robust CSS-based layouts from scratch. All you need to do is punch in your desired layout, specifying the page’s width (fixed or fluid), the number of columns you want, and how wide each of them should be. You can even split a section into two or more subsections, creating nested column layouts with ease.”  The Grid Builder is a visual tool that works with YUI 2’s CSS Grids.
  
• Cory O’Daniel Releases Simpler Ruby Wrapper for YUI Compressor: Cory O’Daniel continues to work on his Ruby wrapper for YUI Compressor, releasing a simpler, ~50 line version: “On a new project I’m working on *I just need a inline YUI compressor* and I dont give a [darn] about anything else like bundling, globbing or whatever. So I ended up throwing together this little (~50 lines less comments) Ruby YUI Compressor to do my dirty work.”  Check out the implementation here.

GWT 2.0.2 has been released and is available for download here:

This was a minor release that includes the following fixes:

• Standard.css missing new layout styles (#4429)
• Using a PopupPanel in Internet Explorer without a history IFrame throws a NullPointerException (#4584)

Julien Lecomte wrote the SimpleMenu module for use on Yahoo! Search (the “More” link uses this code). It’s superbly light — a 1.3KB minified script leveraging the YUI 3 core, plugin architecture, and keyboard/focus management utilities. Moreover, it’s simple to use. He’s shared it in the YUI 3 Gallery — you can use it under YUI’s BSD license or you can grab the source from GitHub and use Julien’s code as starting point for your own project.

Julien hasn’t had time to document the widget fully, so I wrote up a common use case.

Take a simple piece of markup:

<!--menu activator-->
<a href="http://developer.yahoo.com/yui/" id="optionsmenu">YUI-Related Links</a>

<!--menu contents-->
<div id="optionsmenucontainer" class="yui-cssreset">
<ul>
<li><a href="http://developer.yahoo.com/yui/">YUI documentation</a></li>
<li><a href="http://yuilibrary.com">YUI project site</a></li>
<li><a href="http://yuilibrary.com/forum/">YUI discussion forums</a></li>
<li><a href="http://yuiblog.com">YUIBlog</a></li>
<li><a href="http://developer.yahoo.com/yui/theater/">YUI Theater</a></li>
<li><a href="http://yuilibrary.com/gallery/">YUI 3 Gallery</a></li>
<li><a href="http://twitter.com/yuilibrary">@YUILibrary on Twitter</a></li>
<li><a href="http://twitter.com/miraglia/yui/members">@YUILibrary developers on Twitter</a></li>
</ul>
</div>

And the following script:

<script type="text/javascript"
src="http://yui.yahooapis.com/combo?3.0.0/build/yui/yui-min.js&gallery-2010.02.10-01/
build/gallery-simple-menu/gallery-simple-menu-min.js"></script>

<script language="javascript">
YUI().use('gallery-simple-menu', function(Y) {
    Y.one('#optionsmenu').plug(Y.Plugin.SimpleMenu);
});
</script>

What remains is simply some CSS styling. Julien’s widget applies the .menu-visible class when the menu is activated; a simple approach is to set the menu container’s default position to absolute and move it off-screen. Then, in your .menu-visible declaration, remove the offset and allow the widget to position the container under its activator element:

#optionsmenucontainer {
    left:-4500px;
    position:absolute;
}

#optionsmenucontainer.menu-visible {
    left:auto;
}

Click through to try this example in action.