This presentation will be a quick introduction to YUI version 3.3.0 and some of its core functions that should be most useful for building your hacks. We'll cover DOM manipulation and event subscription, animations, drag and drop, Ajax and YQL, and how to use CSS Grids for layout.
4. What is YUI? The YUI Library is a set of utilities and controls, written with JavaScript and CSS, for building richly interactive web applications. Open source under the liberal BSD license. Driven by the YUI Team at Yahoo! And contributors around the world. http://yuilibrary.com
5. What is YUI? 1K new sites every month, among the top 1M sites. “YUI Library is the only other library that is gaining market share.” - http://w3techs.com/blog/entry/highlights_of_web_technology_surveys_march_2011
6. WHO uses YUI? Mint Target LinkedIn Microsoft Google Reuters Walgreens NFL Ford Harley-Davidson Flickr National Geographic Gatorade Duck Duck Go http://yuiblog.com/blog/category/in-the-wild/
16. Event delegation // any click on an <li> inside #demo will trigger Y.one("#demo").delegate(“click”, function (e) { /* handle click */ }, “li”);
17. Move stuff around // #demo will move to wherever a click happens Y.one(”document”).on (“click”, function (e) { Y.one(“#demo”).setXY( [ e.pageX, e.pageY ] ); });
18. Animated transitions // Hello HTML5! Y.one(”#demo”).transition({ easing: “ease-out”, duration: 2, // seconds opacity: 0 }, function () { // callback executed when done this.remove(); }); Same API if the browser supports CSS3 transitions or not.