YUI for your Hacks-IITB

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

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

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

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

Do more with less
Yahoo! Hack U

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

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("element1"); That simple ….

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

Animation is easy too 
Yahoo! Hack U

<div id=" test "></div>
<script>
var myAnim = new YAHOO.util.Anim (' test ', {
width: { to : 400 }
}, 1, YAHOO.util.Easing.easeOut );
myAnim. animate ();
</script>
Yahoo! Hack U

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

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

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

… or through dynamic script node attach
Yahoo! Hack U

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

… Or use my implementation
http://indiahacku.in/subram/dataFetch.js
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);
Yahoo! Hack U

Better presentation = great layouts using = YUI Layout Manager
http://developer.yahoo.com/yui/layout/
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/
Yahoo! Hack U

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

Building things has never been easier
Yahoo! Hack U

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

YUI for your Hacks-IITB

by Subramanyan Guhan on Feb 07, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

YUI for your Hacks-IITB — Presentation Transcript