Using YUI for hacks.

1. YUI Hack U – IIT Kharagpur Harsha Vashisht mail@harsharv.comhttp://www.harsharv.com

2. The client side is where strange things happen.

3. Browsers render in fascinating and totally wrong ways.

4. Random code from dubious sources interferes with your godlike, clean and high quality code....and you fix more than you develop.

5. The web is a total mess!

6. To make things work for Yahoo! we needed to find a way to abstract these issues away from us.

8. And this is why we built the YUI.

9. YUI is a framework to build working web applications.

10. It includes CSS solutions to create layouts that work across browsers and allow for predictable typography.

11. And it takes the pain out of writing JavaScript.

12. Last but very much not least it allows you to create applications using tested and working widgets that extend what HTML gives us.

13. Auto Complete Data Table Interface Widgets Button Layout Menu Calendar Rich Text Charts Tab View Container

14. Everything is fully documented with around 300 examples!

15. 1. Documentationhttp://developer.yahoo.com/yui/docs/2. Exampleshttp://developer.yahoo.com/yui/examples/

16. All YUI components come as a debug version which log everything that is going on to the logger.

17. All in all YUI allows you to build web interfaces without having to know all the pain that goes on in the browser world.

18. Now, lets have a look at what YUI has to offer.

19. 1. Data Sourcehttp://developer.yahoo.com/yui/3/datasource/

20. The DataSource Utility provides a consistent API for the retrieval of data from arbitrary sources over a variety of supported protocols.

21. Remote sources Polling Caching Events

22. http://developer.yahoo.com/yui/3/examples/datasource/datasource_get.html

23. YUI allows you to fetch data from YQL directly!

24. http://developer.yahoo.com/yui/3/examples/yql/simple-yql.html

25. 2. Auto complete

26. http://developer.yahoo.com/yui/3/examples/autocomplete/ac_datasource.html

27. 3. Data Charts

28. Now.. I want to draw a graph..

29. Duck.. There will be code Duck.. There will be code

30. My code.. YUI().use('charts', function (Y) { varmyDataValues = [ {category:"5/1/2010", values:2000}, {category:"5/2/2010", values:50}, {category:"5/3/2010", values:400}, {category:"5/4/2010", values:200}, {category:"5/5/2010", values:5000} ]; varmychart = new Y.Chart({dataProvider:myDataValues, render:"#mychart"}); });

31. Ain’t that kick ass???

32. Let us look at the examples page… http://developer.yahoo.com/yui/3/examples/

33. Questions???

34. Some people I need to thank… Christian Heilmann GopalrathnamVenkatesan

35. Harsha R. Vashishtmail@harsharv.com http://www.harsharv.comhttp://twitter.com/harsharv http://www.facebook.com/harsharv