YUI for your Hacks http://developer.yahoo.com/yui/ University Hack Day – IIT Mumbai

Yahoo! Internal presentation Subramanyan Murali Maps Frontend Engineer, Hacker

“ The browser is an inefficient application platform” -Douglas Crockford Yahoo! Hack U

“ The browser is an inefficient application platform”

-Douglas Crockford

It is an dynamic environment with a lot of inconsistencies … Yahoo! Hack U

It is an dynamic environment with a lot of inconsistencies …

… hence we end up spending more time fixing the mess, rather than developing Yahoo! Hack U

… hence we end up spending more time fixing the mess, rather than developing

To abstract out all this mess, we built Yahoo! Hack U

To abstract out all this mess, we built

Do more with less Yahoo! Hack U

Do more with less

Enough talk, show me the code !! Yahoo! Hack U

Enough talk, show me the code !!

<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

<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>

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 ….

Enabling Drag Drop …

YUI tells you what happened and when through Custom Events Yahoo! Hack U

YUI tells you what happened and when through Custom Events

Animation is easy too  Yahoo! Hack U

Animation is easy too 

<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

<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>

Fetching data from a remote host forms basis of most hacks Yahoo! Hack U

Fetching data from a remote host forms basis of most hacks

Ajax = YUI connection manager http://developer.yahoo.com/yui/connection/ Yahoo! Hack U

Ajax = YUI connection manager

http://developer.yahoo.com/yui/connection/

<script src=&quot; http://yui.yahooapis.com/2.6.0/build/connection/connection-min.js &quot;></script> Yahoo! Hack U

<script src=&quot; http://yui.yahooapis.com/2.6.0/build/connection/connection-min.js &quot;></script>

<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

<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>

Cross domain request can be through a same origin proxy … Yahoo! Hack U

Cross domain request can be through a same origin proxy …

… or through dynamic script node attach Yahoo! Hack U

… or through dynamic script node attach

Write your own script attach routine, or use YUI get Utility http://developer.yahoo.com/yui/get/ Yahoo! Hack U

Write your own script attach routine, or use YUI get Utility

http://developer.yahoo.com/yui/get/

… Or use my implementation http://indiahacku.in/subram/dataFetch.js Yahoo! Hack U

… Or use my implementation

http://indiahacku.in/subram/dataFetch.js

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

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);

Better presentation = great layouts using = YUI Layout Manager http://developer.yahoo.com/yui/layout/ Yahoo! Hack U

Better presentation = great layouts using = YUI Layout Manager

http://developer.yahoo.com/yui/layout/

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

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/

Present modules with YUI Container widgets http://developer.yahoo.com/yui/container/ Yahoo! Hack U

Present modules with YUI Container widgets

http://developer.yahoo.com/yui/container/

Building things has never been easier Yahoo! Hack U

Building things has never been easier

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

Yahoo! Hack U Close to 300 examples http://developer.yahoo.com/yui/examples/

Hack away !! Yahoo! Hack U

Hack away !!