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.

2. Hack with Luke 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? 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/

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

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

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

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.

19. Ajax Y.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. yql Y.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); });

23. BSD license

24. Hosted on Yahoo!’s CDN

25. All available from Y.use(“here!”)http://yuilibrary.com/gallery Ratings, paginator, resize, loading mask, inline editing, and lots more.

27. ColorPicker

28. ProgressBar

31. Write once, works on the client and server

32. Our wrapper creates a simulated DOM for youhttp://yuilibrary.com/projects/nodejs-yui3 Easy installation $npm install yui3 See http://npmjs.org

33. YUI Reset, fonts, grids Stylesheets to make your life easier You want to use this. Just drop it in.

34. Reset & fonts Reset CSS makes browser styling consistent. <linkhref=“http://yui.yahooapis.com/3.3.0/build/ cssreset/cssreset-min.css”> Fonts CSS provides typographical normalization, while allowing users to change font size. <linkhref=“http://yui.yahooapis.com/3.3.0/build/ cssfonts/cssfonts-min.css”>

35. CSS grids Simple, flexible, infinitely nestable in 1.2K <linkhref=“http://yui.yahooapis.com/3.3.0/build/ cssgrids/cssgrids-min.css”> Divide into three equalunits <div class=“yui3-g”> <div class=“yui3-u-1-3”></div> <div class=“yui3-u-1-3”></div> <div class=“yui3-u-1-3”></div> </div>

36. Thanks! Luke Smith @ls_n lsmith@yahoo-inc.com @yuilibrary http://developer.yahoo.com/yui/3/