YUI is a JavaScript and CSS library designed for creating rich web applications, open-sourced under the BSD license and developed by the Yahoo! YUI team along with global contributors. It provides utilities for DOM manipulation, event handling, and enhanced effects like transitions and drag-and-drop, accommodating developers' needs to avoid browser compatibility issues. YUI is widely adopted by numerous organizations, including major tech companies, and includes features like YQL, which allows querying web services directly within applications.

2. Hack withLuke Smith@ls_n

3. YUI exists to build web applications faster

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?MintTargetLinkedInMicrosoftGoogleReutersWalgreensNFLFordHarley-DavidsonFlickrNational GeographicGatoradeDuck Duck Gohttp://yuiblog.com/blog/category/in-the-wild/

7. Why hack with YUI? You don’t have time to find and workaround browser bugs

8. Avoid reinventing the wheel

9. Core: Rock solid DOM manipulation, events, and more

10. Transition: Rich effects using CSS3

11. Drag and Drop that works

12. Gesture Events: Swipe, flicks, and more for touch devices

13. ScrollView: Scrollable content on mobile and desktop alikeYUI <scriptsrc="http://yui.yahooapis.com/3.3.0 /build/simpleyui/simpleyui-min.js"></script> <script>Y.one("#foo").addClass("highlight"); </script>

14. DOM eventsY.one("#demo").on(“click”, function (e) { /* handle click */ });

15. Add htmlY.one("#demo").append(“<p>I’m new here.</p>”);

16. Event delegation // any click on an <li> inside #demo will triggerY.one("#demo").delegate(“click”, function (e) { /* handle click */}, “li”);

17. Move stuff around // #demo will move to wherever a click happensY.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 donethis.remove(); });Same API if the browser supports CSS3 transitions or not.

19. AjaxY.io(“my.aweso.me/service.php”, { on: { complete: function (id, response) {var data = Y.JSON.parse(response); /* handle response */ } } });

20. Add more features with Y.use()Y.use(“dd-plugin”, function () {Y.one(“#foo”).plug(Y.Plugin.Drag); });

21. yqlY.use(“yql”, function () { function render(res) {Y.one(“#demo”).append( “<h2>Weather for “ + zip + “</h2>” +res.query.results.channel.item.description); }Y.YQL(“select * from weather.forecast “ + “where location=“ + zip, render); });

22. YUI GalleryThe YUI of tomorrow, today.Community collection of YUI 3 modules

23. BSD license

24. Hosted on Yahoo!’s CDN