YUI for your Hacks http://developer.yahoo.com/yui/ University Hack Day – IIT Mumbai
Yahoo! Internal presentation Subramanyan Murali  Maps Frontend Engineer, Hacker
<ul><li>“ The browser is an inefficient application platform” </li></ul><ul><li>-Douglas Crockford </li></ul>Yahoo! Hack U
<ul><li>It is an dynamic environment with a lot of inconsistencies …  </li></ul>Yahoo! Hack U
<ul><li>…  hence we end up spending more time  fixing  the mess, rather than  developing </li></ul>Yahoo! Hack U
<ul><li>To abstract out all this mess, we built </li></ul>Yahoo! Hack U
<ul><li>Do more with less </li></ul>Yahoo! Hack U
<ul><li>Enough talk, show me the code !! </li></ul>Yahoo! Hack U
<ul><li><script type=&quot;text/javascript&quot; src=&quot; http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom...
<ul><li>Enabling Drag Drop …  </li></ul>Yahoo! Hack U Step 1 – Include  http://yui.yahooapis.com/2.6.0/build/dragdrop/drag...
<ul><li>YUI tells you what happened and when through  Custom Events </li></ul>Yahoo! Hack U
<ul><li>Animation is easy too   </li></ul>Yahoo! Hack U
<ul><li><div id=&quot; test &quot;></div> </li></ul><ul><li><script> </li></ul><ul><li>var myAnim = new  YAHOO.util.Anim (...
<ul><li>Fetching data from a remote host forms basis of most hacks </li></ul>Yahoo! Hack U
<ul><li>Ajax =  YUI connection  manager </li></ul><ul><li>http://developer.yahoo.com/yui/connection/ </li></ul>Yahoo! Hack U
<ul><li><script src=&quot; http://yui.yahooapis.com/2.6.0/build/connection/connection-min.js &quot;></script>  </li></ul>Y...
<ul><li><script> </li></ul><ul><li>var callback = </li></ul><ul><li>{ </li></ul><ul><li>success : function( o ) {  /*succe...
<ul><li>Cross domain request can be through a  same origin  proxy … </li></ul>Yahoo! Hack U
<ul><li>…  or through dynamic script node attach </li></ul>Yahoo! Hack U
<ul><li>Write your own script attach routine, or use  YUI get Utility </li></ul><ul><li>http://developer.yahoo.com/yui/get...
<ul><li>…  Or use my implementation </li></ul><ul><li>http://indiahacku.in/subram/dataFetch.js </li></ul>Yahoo! Hack U
<ul><li>Var url = “ http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20flickr.photos.search(120)%20where%20tag...
<ul><li>Better presentation = great layouts using =  YUI Layout Manager </li></ul><ul><li>http://developer.yahoo.com/yui/l...
<ul><li>Fluid CSS layouts using  YUI Grids  </li></ul><ul><li>http://developer.yahoo.com/yui/grids/ </li></ul><ul><li>Grid...
<ul><li>Present modules with  YUI Container widgets  </li></ul><ul><li>http://developer.yahoo.com/yui/container/ </li></ul...
<ul><li>Building things has never been easier  </li></ul>Yahoo! Hack U
Yahoo! Hack U Tab  view Slider Data Table Carousel Tree view  Rich Text Editor Layout Manager Grid Builder DOM & Event Ele...
Yahoo! Hack U Close to 300 examples http://developer.yahoo.com/yui/examples/
<ul><li>Hack away !! </li></ul>Yahoo! Hack U
Upcoming SlideShare
Loading in...5
×

YUI for your Hacks-IITB

5,478

Published on

YUI for your Hacks, talk for University hack day in IIT Mumbai

Published in: Technology
4 Comments
3 Likes
Statistics
Notes
  • *CLICK the LINK to keep updated on all the latest Mods/Glitches*
    adf.ly\QBJDM
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • http://fileace.com/t5f0v
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • real hack
    http://www.slideshare.net
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Wanna hack Facebook, Yahoo, Hotmail, Gmail, Myspace, Skype??? Someones cheating on you? or just want to prank a friend? contact Monsterzero609atsafe-maildotnet.......for a fair price ;)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
5,478
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
22
Comments
4
Likes
3
Embeds 0
No embeds

No notes for slide
  • Transcript of "YUI for your Hacks-IITB"

    1. 1. YUI for your Hacks http://developer.yahoo.com/yui/ University Hack Day – IIT Mumbai
    2. 2. Yahoo! Internal presentation Subramanyan Murali Maps Frontend Engineer, Hacker
    3. 3. <ul><li>“ The browser is an inefficient application platform” </li></ul><ul><li>-Douglas Crockford </li></ul>Yahoo! Hack U
    4. 4. <ul><li>It is an dynamic environment with a lot of inconsistencies … </li></ul>Yahoo! Hack U
    5. 5. <ul><li>… hence we end up spending more time fixing the mess, rather than developing </li></ul>Yahoo! Hack U
    6. 6. <ul><li>To abstract out all this mess, we built </li></ul>Yahoo! Hack U
    7. 7. <ul><li>Do more with less </li></ul>Yahoo! Hack U
    8. 8. <ul><li>Enough talk, show me the code !! </li></ul>Yahoo! Hack U
    9. 9. <ul><li><script type=&quot;text/javascript&quot; src=&quot; http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js &quot; ></script> </li></ul>Yahoo! Hack U
    10. 10. <ul><li>Enabling Drag Drop … </li></ul>Yahoo! Hack U Step 1 – Include http://yui.yahooapis.com/2.6.0/build/dragdrop/dragdrop-min.js Step 2 – the code var dd1 = new YAHOO.util.DD(&quot;element1&quot;); That simple ….
    11. 11. <ul><li>YUI tells you what happened and when through Custom Events </li></ul>Yahoo! Hack U
    12. 12. <ul><li>Animation is easy too  </li></ul>Yahoo! Hack U
    13. 13. <ul><li><div id=&quot; test &quot;></div> </li></ul><ul><li><script> </li></ul><ul><li>var myAnim = new YAHOO.util.Anim (' test ', { </li></ul><ul><li>width: { to : 400 } </li></ul><ul><li>}, 1, YAHOO.util.Easing.easeOut ); </li></ul><ul><li>myAnim. animate (); </li></ul><ul><li></script> </li></ul>Yahoo! Hack U
    14. 14. <ul><li>Fetching data from a remote host forms basis of most hacks </li></ul>Yahoo! Hack U
    15. 15. <ul><li>Ajax = YUI connection manager </li></ul><ul><li>http://developer.yahoo.com/yui/connection/ </li></ul>Yahoo! Hack U
    16. 16. <ul><li><script src=&quot; http://yui.yahooapis.com/2.6.0/build/connection/connection-min.js &quot;></script> </li></ul>Yahoo! Hack U
    17. 17. <ul><li><script> </li></ul><ul><li>var callback = </li></ul><ul><li>{ </li></ul><ul><li>success : function( o ) { /*success handler code*/ }, </li></ul><ul><li>failure : function( o ) { /*failure handler code*/ }, </li></ul><ul><li>} </li></ul><ul><li>var transaction = YAHOO.util.Connect.asyncRequest ('GET', sUrl, callback , null); </li></ul><ul><li></script> </li></ul>Yahoo! Hack U
    18. 18. <ul><li>Cross domain request can be through a same origin proxy … </li></ul>Yahoo! Hack U
    19. 19. <ul><li>… or through dynamic script node attach </li></ul>Yahoo! Hack U
    20. 20. <ul><li>Write your own script attach routine, or use YUI get Utility </li></ul><ul><li>http://developer.yahoo.com/yui/get/ </li></ul>Yahoo! Hack U
    21. 21. <ul><li>… Or use my implementation </li></ul><ul><li>http://indiahacku.in/subram/dataFetch.js </li></ul>Yahoo! Hack U
    22. 22. <ul><li>Var url = “ http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20flickr.photos.search(120)%20where%20tags%3D%22hacku%22 ”; </li></ul><ul><li>YAHOO.remoteData.fetch (url, callBack, scopeObj, JsonCallback); </li></ul>Yahoo! Hack U
    23. 23. <ul><li>Better presentation = great layouts using = YUI Layout Manager </li></ul><ul><li>http://developer.yahoo.com/yui/layout/ </li></ul>Yahoo! Hack U
    24. 24. <ul><li>Fluid CSS layouts using YUI Grids </li></ul><ul><li>http://developer.yahoo.com/yui/grids/ </li></ul><ul><li>Grid building made easy with YUI grind Builder </li></ul><ul><li>http://developer.yahoo.com/yui/grids/builder/ </li></ul>Yahoo! Hack U
    25. 25. <ul><li>Present modules with YUI Container widgets </li></ul><ul><li>http://developer.yahoo.com/yui/container/ </li></ul>Yahoo! Hack U
    26. 26. <ul><li>Building things has never been easier </li></ul>Yahoo! Hack U
    27. 27. Yahoo! Hack U Tab view Slider Data Table Carousel Tree view Rich Text Editor Layout Manager Grid Builder DOM & Event Element Connection Get YQL Pipes Yahoo! APIs Cool app / hack / innovation
    28. 28. Yahoo! Hack U Close to 300 examples http://developer.yahoo.com/yui/examples/
    29. 29. <ul><li>Hack away !! </li></ul>Yahoo! Hack U

    ×