YUI for your Hacks-IITB

  • 5,284 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • *CLICK the LINK to keep updated on all the latest Mods/Glitches*
    adf.ly\QBJDM
    Are you sure you want to
    Your message goes here
  • http://fileace.com/t5f0v
    Are you sure you want to
    Your message goes here
  • real hack
    http://www.slideshare.net
    Are you sure you want to
    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 ;)
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
5,284
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
22
Comments
4
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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