With YUI3 out in a stable release, it's time to move from global YAHOO. to YUI() scripting of your widgets. This cheatsheet is used as introduction for people who are thinking of moving from YUI2 to YUI3. Note that "Y." used in this cheatsheet for YUI3 and also on Yahoo! Developer comes from initializing YUI: YUI().use("*", function(Y){ Y.[...] });.

Idea to publish this came from the jQuery->YUI3 tombstone. Update: I'm hiring frontenders!

Sample HTML

<div id="demo"><span id="close">X</span>
   <h2>Hello YUI</h2>
      <ul>
        <li>item 1</li>
        <li>item 2</li>
      </ul>
</div>

Cheatsheet

YUI 2.* YUI 3 Details 
YAHOO.util.Event.addListener("demo", "click", helloWorld);
 
Y.on("click", helloWorld, "#demo");
 Add click event subscription to #demo div, execute helloWorld(). 
YAHOO.util.Selector.query("h2", "demo", true).innerHTML = "Hello World";
YAHOO.util.Dom.get("demo").getElementsByTagName("h2")[0].innerHTML = "Hello World";
good explorer 
Y.one("#demo h2").set("innerHTML", "Hello World");
 Set the header title text in #demo>h2. 
var elements = YAHOO.util.Selector.query("li","demo");
for(var i = 0; i < elements.lenght; i++){
  YAHOO.util.Event.addListener(elements[i], "click", onClick);
}
 
Y.all("#demo li").on("click", onClick);
 Add onclick on all LI nodes in #demo. 
YAHOO.util.Dom.getViewportHeight()
 
Y.one("body").get("winHeight");
 Get the viewport height. 
YAHOO.util.Event.onDOMReady(function(){

        YAHOO.util.Dom.setStyle("demo", "backgroundColor", "#D00050");

        }
 
YUI().use("node", function(Y) {
  Y.one("#demo").setStyle("backgroundColor", "#D00050");
});
 Create a YUI instance, loading the 'node' module so we can work with DOM elements, set #demo style. 
YAHOO.env.ua.ie || YAHOO.env.ua.webkit
 
Y.UA.ie || Y.UA.webkit
 More on Global Object 
YAHOO.lang.isNumber(4) || YAHOO.lang.isBoolean(false);
 
Y.Lang.isNumber(4) || Y.Lang.isBoolean(false);
 More on Global Object 
YAHOO.util.Element("li");
 
Y.Node.create("<li>")
 Create a new DOM element.
... ... What do you like to see added? 
var anim = new YAHOO.util.Anim("demo", {
            height: {  to: 0 }
          }, 100, YAHOO.util.Easing.easeOut);
anim.animate();
 
var anim = new Y.Anim({
        node: "#demo",
        to: { height: 0 },
	easing: Y.Easing.backOut,
	duration: 0.1
});

anim.run();

Chain animations by subscribing a on end function anim.on("end", onEnd); (this will loop, so also add an unsubscribe this.unsubscribe("end", onEnd);

More on Animation

 
var load = {

	myComplete:function(o) { [...] },
	myRequest:function() {
	   YAHOO.util.Connect.asyncRequest("GET", "get.php?user=1", myCallback);
	}

};
var myCallback = {
	success:load.myComplete,
	scope: load
}

load.myRequest();
 
var load = { myComplete: function(id, o, args) { [...] } };
var cfg = { 
  on: {
    complete: load.myComplete
  },
  context: load
};
Y.io("get.php?user=1", cfg);

Loads content from a file throught a XMLHttpRequest.

More on IO

 
var overlay = new YAHOO.widget.Overlay("demo", {
          visible:true,
          width:"10em",
          height:"10em",
          xy:[100, 150]}).render();
YAHOO.util.Event.addListener("close", "click", overlay.hide, overlay, true); 
var overlay = new Y.Overlay({
        contentBox: "#demo",
        width:"10em",
        height:"10em",
        visible:true,
        shim:false,
        xy:[100, 150]}).render();

Y.on("click", function() {
        overlay.close();
    }, "#close");

Simple overlay build and hide feature. Absolute aligning for positioning.

More on overlay

 
var loader = new YAHOO.util.YUILoader({
 
    require: ["event","yahoo","dom"],
    loadOptional: true,
 

    onSuccess: function() {
       initPage();
    },
    timeout: 10000,
    combine: true
});
loader.insert();

YUI({
       loadOptional: true,
       combine: true,
       timeout: 10000
       }
}).use("node","dom", function(Y) {
  initPage(Y);
});

Loader of various modules before calling JS to initiate any of your functions/methods.

YUI3 Module List

 
YAHOO.log("log message");
 
Y.log("log message");
 The logger is simple.