2

Hi,

In this post, I will introduce you to some of the most compelling Facebook add-ons for Internet Explorer 8.

Share with Facebook Accelerator

The Share with Facebook Accelerator allows you to share any text, link, or page with your Facebook friends with a single click. You can use this accelerator by selecting either some text or a link, or by right-clicking on any part of the page.

Install here: http://www.ieaddons.com/en/details/204/Share_on_Facebook/

The technical beauty of this add-on is that it is extremely simple. In fact, it is contained in a single XML file, which is based on the OpenServiceDescription specification.

Facebook Web Slice

The Facebook Web Slice allows you to stay up to date with what’s happening in your Facebook network. Regardless what website you are on, you can click at any time on the web slice title and display the recent messages from your friends on your board.

Install here: http://www.ieaddons.com/en/details/social/Facebook_Web_Slice/

The Web Slice uses the Facebook Connect APIs to connect to your account and it shows a notification when new content is available. Special thanks go to the MVP Konstantinos Pantos for his contribution to the community.

Facebook Search Provider

Do you need to search for someone on Facebook? You can start right away from the browser search box!

Install here: http://www.ieaddons.com/en/details/searchhelpers/Facebook/

Again, this extension is built on top of an XML file which describes the end-point for the search provider.

Facebook Toolbar

The Facebook Toolbar lets you to share with your friends while browsing anywhere on the web - get notified, share content, upload photos, and update your status no matter where you are!

Install here: http://www.facebook.com/toolbar#!/toolbar?v=app_4949752878

The source code of this toolbar is available on github.

Thanks to the Facebook Team for these great extensions!

If you have any feedback or you would like to highlight other great IE8 add-ons, please leave a comment to this post.

Giorgio Sardo
Web Technical Evangelist
Microsoft Corporation

Here at YUI HQ, we’re working toward the next major release of YUI, YUI 3.1.0. Yesterday we shared some YUI 3 loader work that Adam Moore has done for 3.1.0. His “YUI 2 in 3″ project allows you to use components like YUI 2 DataTable simply and efficiently in YUI 3. Meanwhile, his loader improvements also mean you can bring in YUI 3 Gallery modules like Storage Lite with the same ease and efficiency. 3.1.0 will also mark the GA release of Satyen Desai’s component/widget foundation for YUI 3.

We’re also running the YUI 3 Gallery Contest, the winner getting a JSConf conference pass and $500 at Expedia.com to help with travel. You’ve got two full weekends left of hacking before the deadline!

In the meantime, there’s been a lot going on in the community — here are a few of the things we’ve noted recently:

• In the YUI 3 Gallery — Jeff Craig’s Slideshow Module: Jeff Craig, author of the Chromahash and Crypto modules, has released his Slideshow module for the YUI 3 Gallery.  His writeup on his blog provides a good introduction to the component, which he used for the Washington State University commencement site.
  

  Recently, at work, we had a desire to update an instance of a flash-based slideshow widget on our commencement website. This widget did absolutely nothing special, but the real problem we had was that, we didn’t actually have a license for Flash, and the way the slideshow had been built, we needed to be able to build the SWF file from scratch in order to update the order. Since our users rarely come to us with anything that isn’t some sort of emergency, we had to take the flash files to another department to make our quick change and compile a new SWF.

  You can read Jeff’s full writeup on his blog.
  

• Stoyan Stefanov on YUI’s CSS Compressor: Stoyan has signed on to work on the YUI Compressor, and he’s written about the CSS minification component of that tool on PHPied.com: “Originally written in PHP by Isaac Schlueter and ported to Java by Julien Lecomte, CSSMin got a JavaScript port by yours truly some time ago. Because, after all, JavaScript is the language of the web, isn’t it? You can play with the latest git version of the JS port online here. I’m also happy to report that the JS port is now used in PageSpeed and YSlow (as you probably know Firefox extensions are written in JavaScript).” (Original source.)
• Satyam’s YQLDataSource for YUI 2: “Thanks to Jonathan LeBlanc’s article on the YUI Blog I thought that it would be cool to have a YQLDataSource to make it easier to use YQL data in YUI 2 DataTable, YUI 2 Charts and YUI 2 AutoComplete. The table below is built using such a DataSource…The YQLDataSource does not require any parameters. It will automatically use the YUI 2 Get Utility to access the YQL servers using JSON format and providing a suitable callback. The DataSource just needs to be instanced like: var ds = new YAHOO.util.YQLDataSource();.” Check out Satyam’s full documented example for all the details.
  
• German-language Screencast on Using YUI in DreamWeaver CS4: According to the author, ‘In diesem Film zeigt Ihnen der Trainer die Verwendung und Konfiguration des Web Widgets “YUI TreeView“. Sie lernen die HTML-Struktur dieses Widgets kennen.” This is a beautifully produced screencast on using CS4’s YUI support, focusing on the YUI TreeView Control.
  
• Ajaxian Covers SVG Wow, SVG + YUI 3 Animation: Brad Neuberg notes on Ajaxian the debut of Vincent Hardy and Erik Dahlström’s SVG Wow site.  Many of Vincent’s examples, including the flying song-lyric animation called out by Brad, are powered by YUI 3’s Animation library running within the SVG document.
  
• Simple File Upload in Grails (using YUI Connection Manager): Simon Palmer shows you how he leveraged Thomas Sha’s YUI Connection Manager and Matthew Taylor’s slick Grails UI package to add asynchronous file upload to his Grails project. (Note: You may be able to lighten the kweight of this solution by not including the full utilities.js package but rather cherrypicking the components you need — in this case, that might result in just <script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.0r4/build/yahoo/yahoo-min.js&2.8.0r4/build/event/event-min.js&2.8.0r4/build/connection/connection-min.js"></script>.
  
• Chris P. Jobling on Watching YUI Theater: Writes Chris: “This last week or so I’ve been watching a lot of Yahoo! YUI Theatre videos on JavaScript, starting with Douglas Crockford’s excellent five-part series Crockford on JavaScript and ending yesterday with Christian Heillman’s inspiring talk on YQL and YUI. This has inspired me to explore how I can use YUI (a JavaScript library) in the next version of my Proman dissertation project management application which will be needed for 2010-2011 allocation round in May. If it works out, there’ll also be some new teaching material for next year’s Web Applications module (EG-259). I’ll post more in the under the tag YUI on the Proman, Man blog as I get to grips with this stuff.”
• YUI Panel: Changing Buttons and Re-using a Panel on Same Page: Ciitronian.com has posted a brief YUI 2 Panel tutorial: “The requirement was to make a modal panel in YUI, which work at its own as a activation widget using Ajax (YUI 2 Connection Manager). The idea was pop up a YUI Panel when a user clicks on ‘Activate’, that modal panel will allow the user to enter details of when he/she wants to schedule the activation (where user can choose now or a later date) and then user can hit Submit and Cancel buttons.”  Click through for the full tutorial.
• YUI 2 Calendar: Using and Modifying Multiple Calendar Picker Instances on Single Page: Ciitronian.com “explains how to create multiple instances of calendar widget of YUI 2. There are many examples of how to use Calendar widget on YUI’s official website but for my application, the requirement was to to schedule multiple actions on the same page, giving each one a date of its own, so I developed my calendar widget” to solve that problem. Click through for the full tutorial.

Using YUI 2 components in the context of YUI 3 implementations is important for some implementers making the transition between YUI 2 and YUI 3. In some cases, we simply want to transition our code in stages, but we want to do so within the context of a YUI 3 implementation pattern. In other cases, we may be relying on high-level components like YUI DataTable that aren’t yet present in YUI 3.

As part of the upcoming 3.1.0 release, Adam has improved the experience of using YUI 2 components from within YUI 3. To this end, he’s added some intelligence to YUI 3’s loader that allows you to load YUI 2 modules directly from your YUI().use() statement:

YUI().use("yui2-button", function(Y) {

	//YAHOO is not a global object; it is sandboxed along
	//with the rest of your YUI 3 functionality.  This line
	//is necessary if you want to use existing implementation
        //code:
	var YAHOO = Y.YUI2;

	//YUI 2 implementation code
	var button = new YAHOO.widget.button("mybutton");

});

You’ll find this functionality in the YUI 3 codeline as of build 1933, and we’ve deployed an experimental YUI 3 build (nominally “yui3.1.0pr2″) and an early build of YUI 2.8.0 functionality wrapped for use in YUI 3.

When you download YUI 3’s latest source from GitHub you’ll find some working examples in sandbox/loader (look for files with the 2in3 prefix). These examples demonstrate the use of a number of YUI 2 modules. We’ve posted a simple live example that shows how to use YUI 2 DataTable within YUI 3, which is one of the most frequently requested transitional features.

Key points about the YUI 2 in 3 effort:

• This work is available in the latest builds of the upcoming 3.1.0 release (build 1933 and later). It is not available in 3.0.0 or in the 3.1.0pr1 preview.
• The project is in an experimental state. Neither the yui3.1.0pr2 build nor the wrapped YUI 2 builds from which it pulls have been extensively tested, although we’ve staged them on the CDN to make it convenient to explore the implementation.
• Download the latest build for examples. You’ll find a few of Adam’s proof-of-concept files in sandbox/loader — other than the simple example above, those are the best code references available until the official 3.1.0 release (which is still about a month out).
• Your feedback in the forums is welcome — and, if you find problems, we’re interested in hearing about them.
• When used this way, YUI 2 does not create a global YAHOO object. YUI 2 components are wrapped in YUI 3 module definitions and they stay contained in the YUI 3 sandbox to which they’re attached. The line from the codesample above, var YAHOO = Y.YUI2;, is needed in order to cut and paste YUI 2-style implementation code — or you can change YAHOO references to Y.YUI2.
• YUI 2 releases are supported back to 2.2.2 — the latest bug-fix release for every minor version is supported (2.2.2, 2.3.1, 2.4.1, 2.5.2, 2.6.0, 2.7.0, 2.8.0). You can specify the YUI 2 version to use as follows: YUI({yui2: '2.7.0'}).use('yui2-button', ...). The goal here is to allow you to avoid migrating to 2.8.0 (or later) prior to a YUI 3 migration.

Gallery Is Easier To Use, Too

Adam’s enhancements to YUI 3’s intrinsic loader have improved the experience of working with the rapidly growing YUI 3 Gallery, too. As of 3.1.0, you’ll be able to bring gallery modules into the page from the use() statement without additional configuration — the loader will be able to determine and resolve dependencies for you and will do the right thing with respect to combo’ing the gallery source code with other YUI files. Here’s an example Dav Glass put together for 3.1.0 that demonstrates the use of his YQL Query gallery module in combination with a pre-release build of 3.1.0.

Natively, JavaScript has a very limited set of functions for working with numbers located on the global Math object. Mostly these functions are for working with exponents, trigonometry, and rounding. And while these functions are needed and efficient, the Math API has remained unchanged for years, and probably won’t be improved anytime in the near future. So it is up to the developers of JavaScript libraries to create and maintain a component for working with numbers.

The Number component in the YUI 3 Gallery, derived from work originally used on Mint.com, aims to fill in missing number-related functionality. It provides a light-weight set of static functions for working with numbers. The Number component weighs in at about 1.8kb after minification and before gzip; it’s supported by all A-grade browsers.

One of the features in Number that I use the most is the format() function, which injects a formatted number into a string by evaluating the format of the placeholder number in the string. (Note: This is similar to the formatting support Y.DataType.Number currently provides, but rolls up the separate configuration properties which Y.DataType.Number.format accepts into a single formatting pattern string.) The function works with all symbols, but it formats numbers according to the English standard. Here are a few example of how to use format() from its unit test:

var n = 1111.11,
	formatDollars = "$0,0.00'" // use comma and decimal when formatting
	formatPercent = "0.00%", // use decimal when formatting
	formatRound = "0,000", // use comma when formatting
	formatText = "Please add the $0,0.00 to my tab!";

Y.Assert.areEqual("$1,111.11", Y.Number.format(n, formatDollars));
Y.Assert.areEqual("1111.11%", Y.Number.format(n, formatPercent));
Y.Assert.areEqual("1,111", Y.Number.format(n, formatRound));
Y.Assert.areEqual("Please add the $1,111.11 to my tab!", Y.Number.format(n, formatText));

Other useful functions include:

• random(): provides an easy API for getting random whole numbers;
• isBetween()/isNotBetween(): simplifies the evaluation of number ranges;
• radian()/degrees(): when working with the Math trigonometry functions (such as Math.cos()), which expect radians instead of degrees, both radian() and degrees() are useful for converting values.

To use the Number Gallery component, first include the script:

<script
src="http://yui.yahooapis.com/combo?3.0.0/build/yui/yui-min.js&
gallery-2010.02.22-22/build/gallery-number/gallery-number-min.js"></script>

Then include 'gallery-number' in your use() function, to get the following functions:

YUI().use('gallery-number', function(Y) {
	Y.Number = {
		degrees(number),
		format(number, format),
		getPrecision(number),
		isNotBetween(number, number, number, boolean),
		isBetween(number, number, number, boolean),
		isPrime(number),
		radians(number),
		random(number, number),
		roundToPrecision(number, number)
	};
});

These functions were modeled after the native Math functions and, like the Math functions, the functions on Y.Number return NaN if the value provided is not a number. If you would like to contribute to the development of or require new features added to Number, please leave a message on the Forum.

Child safety seats. Toyota cars. Pringles potato chips. All three have been the subject of recent recalls because of concerns about consumer safety. But if you hadn’t watched the news to learn about the Pringles recall, how would you know whether the snacks in your pantry might make you sick? 

Fortunately you can subscribe to feeds from various consumer watchdogs and monitor them on your My Yahoo! page. Here are some good examples to consider:

• The Food and Drug Administration — Recalls/Safety Alerts: This information from the U.S. government keeps you current on a wide range of possible food safety issues.
• Safercar.gov — Vehicle Recalls: This roundup from the National Highway Transportation Safety Administration includes announcements about specific car models and components that may have safety concerns.
• Justia’s Auto Recalls Homepage: You can actually browse and select an RSS feed that is specific to your vehicle’s manufacturer by going directly to the website.
• Household Product-Related Recalls: This feed from the U.S. Consumer Product Safety Commission covers possible safety issues on everything from window shades to tea kettles.

You can also explore the sites above for specific recall updates on drugs, dietary supplements, or children’s products, among others.  Subscribing to any of the above feeds will make it much easier to keep tabs on safety information for everyone in your household.
 
Apps mentioned in this post:

• Add Food and Drug Administration — Recalls/Safety Alerts
• Add Safercar.gov — Vehicle Recalls
• Add Justia’s Auto recalls Homepage
• Add Household Product-Related Recalls

Tom
- My Yahoo! Editorial

We’re always excited to engage with members of the W3C including the developers of other browsers as well as the broader web development community to help shape the direction of emerging Web standards, particularly HTML5.  This includes participating in events like TPAC, which we wrote about in November, and on-going engagement with various working groups.  Patrick recently talked about joining the SVG working group, and I’d like to share a brief list of other happenings on the way to making HTML5 well-defined, well-tested, and accessible:

• Providing feedback on HTML5
  Tony Ross, Internet Explorer Program Manager, and Jonas Sicking of Mozilla, led a discussion about extensibility in HTML5 at TPAC after our initial submission.  While the working group hasn’t resolved the issue yet, we think the event helped inform everyone and generate the different proposals submitted since. 
• Testing HTML5
  Kris Krueger, Internet Explorer Test Lead, was appointed facilitator of the W3C HTML5 Testing Task Force.  The task force has set up necessary infrastructure like a wiki, Bugzilla, a work item tracker, and CVS repository for test cases.  With that in place, they’ve started to review DOM Level 2 HTML test cases to use as the start of HTML5 testing.  As with CSS2.1, we think a good test suite is critical to ensuring a specification results in interoperable implementations.
• Ensuring new specifications enable accessibility
  We care deeply about an accessible web so besides implementing accessibility-focused browser features, we’re working with Apple, IBM, and other interested parties to ensure the new HTML5 <canvas> and <video> elements have great accessibility support so everyone can use sites leveraging them.  This work is driven by the Accessibility Task Force.  Together, we’re working on <canvas> HTML prototypes to use as ‘proof of concepts’ to ensure the feature is well-designed, as discussed in a recent teleconference. 
• Indexed DB Proposal
  Together with Mozilla, we’re excited about a new design for local storage called Indexed DB.  We think this is a great solution for the web.  Look for another post with more information about this proposal.  In the meantime, you can read the latest working draft. 
• DOM Level 3 Events
  Travis Leithead, Internet Explorer Program Manager, continues to help close down open issues with the latest editor’s draft. It’s been awhile since the working group published the last working draft and the group plans to publish an update soon that will improve clarity for implementers and web authors alike. On a recent teleconference, we noted that DOM Level 2 Events was published as a Recommendation nearly 10 years ago; it’s exciting to have the next milestone in sight!

Finally, you can read an interview with Paul Cotton from Microsoft and co-Chair of the W3C HTML Working Group on the W3C Blog.

Adrian Bateman
Program Manager

Last week, Yahoo! JavaScript architect Douglas Crockford delivered the fourth installment of his Crockford on JavaScript series:

1. Volume One: The Early Years
2. Chapter 2: And Then There Was JavaScript
3. Act III: Function the Ultimate
4. Episode IV: The Metamorphosis of Ajax
5. Part V: The End of All Things (March 31 — RSVP)

In this session, Douglas tackles the DOM. On the one hand there was JavaScript, he says, and JavaScript is “what made the browser work.”

On the other hand, there was the Document Object Model, also known affectionately as the DOM. It is what most people hate when they say they hate JavaScript. Most of the people who say they hate JavaScript don’t know JavaScript, might have never seen JavaScript, but they’ve felt the DOM alright. If you don’t know what the difference is and you say, “JavaScript is the stupidest thing I’ve ever seen,” you’re not talking about JavaScript, you’re talking about the DOM. The DOM is the browser’s API. It is the interface. It provides JavaScript for manipulating documents.

The DOM may be imperfect, but it’s nonetheless crucial to what frontend engineers do when they write web applications. In this talk, Douglas provides an overview, situated historically, of where the DOM came from, how it achieved ascendance with Ajax, and what the future might hold. In Douglas’s inimitable fashion, this history starts with Sir John Harrington and takes us up to the present day. A few choice words for CSS are among the many applause lines for veteran developers:

I find within the community of people who use CSS great affection for it. They’re totally invested in CSS, they love it. They can’t imagine any other way of doing formatting in a document. It’s it. It’s sort of like watching an episode of Cops where the cops come in and break up the family dispute, and there’s this “CSS ain’t bad, you just don’t understand it like I do. I know it hurts me, but I make mistakes, I’m wrong.” CSS is awful, and it amazes me the way people get invested in it. It’s like once you figure it out, kind of go “oh, OK, I see how I might be able to make it work,” then you flip from hating it to loving it, and despising anybody who hasn’t gone through what you’ve gone through. It doesn’t make sense to me.

If the video embed below doesn’t show up correctly in your RSS reader of choice, be sure to click through to watch the high-resolution version of the video on YUI Theater.

• Download HD video (480p ~720MB)
• Download video (m4v)
• Download slides
• A high-resolution, transcripted version of this talk is available on the YUI Theater site

Other Recent YUI Theater Videos:

• Douglas Crockford: Crockford on JavaScript — Act III: Function the Ultimate — Yahoo!’s JavaScript architect Douglas Crockford continues his lecture series on the JavaScript programming language with a discussion of functions in JavaScript. ‘Functions are the very best part of JavaScript,’ Crockford says. ‘It’s where the power is, it’s where the beauty is.’ Watch the video to learn why.
• Douglas Crockford: Crockford on JavaScript — Chapter 2: And Then There Was JavaScript — Yahoo!’s JavaScript architect Douglas Crockford surveys the features of the JavaScript programming language.
• Douglas Crockford: Crockford on JavaScript — Volume 1: The Early Years — Douglas Crockford puts the JavaScript programming language in its proper historical context, tracing the language’s structure and conventions (and some of its quirks) back to their roots in the early decades of computer science.
• Christian Heilmann: YQL and YUI: Building Blocks for Quick Applications — The Yahoo! Developer Network’s international evangelist Christian Heilmann discusses his philosophy for creating fast, powerful, compelling applications using the Yahoo Query Language (YQL) and the Yahoo User Interface Library (YUI).

Subscribing to YUI Theater:

• YUI Theater RSS feed
• YUI Theater on iTunes

We’re pleased to announce the YUI 3 Gallery Contest 2010. Thanks to our friends at the Yahoo! Developer Network, we have a conference pass to the sold-out JSConf 2010 to offer. We’re pairing that with a $500 gift certificate to Expedia.com to help the prize winner get back and forth to Virginia for the conference.

The prize will go to the person who authors the best new YUI 3 Gallery module between March 5 and March 22 and submits it for community use under YUI’s BSD license. As with any contest, there are lots of rules. We’ve noted some of the big ones on the contest page and you can read the full legal writeup here.

We’re thrilled with what we all as a community have done since late 2009 to make the Gallery a hotbed for YUI 3 growth and innovation. Greg Hinch’s Form module (submitted hours after the Gallery opened), Ryan Grove’s excellent Storage and History modules, Ilyan Peychev’s über-popular Accordion, Julien Lecomte’s SimpleMenu, Stephen Woods’s Timepicker, Adam Moore’s TreeView, Jeff Craig’s Chromahash, Dav’s own YQL module…and dozens more.

We hope you’ll consider doing some YUI 3 hacking over the next few weeks to add to this collection. We’ve listed some resources on the contest page, and there’s a forum thread going with ideas for new modules (please weigh in there even if you’re not going to be writing a module for the contest yourself). And, of course, the current Gallery is a good source of inspiration.

Happy hacking, and we’re looking forward to seeing a YUI Gallery author head out to JSConf next month!