Your SlideShare is downloading. ×
0
Rapid implementation with YUI + YQL
Rapid implementation with YUI + YQL
Rapid implementation with YUI + YQL
Rapid implementation with YUI + YQL
Rapid implementation with YUI + YQL
Rapid implementation with YUI + YQL
Rapid implementation with YUI + YQL
Rapid implementation with YUI + YQL
Rapid implementation with YUI + YQL
Rapid implementation with YUI + YQL
Rapid implementation with YUI + YQL
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Rapid implementation with YUI + YQL

819

Published on

This is the presentation that I did at BarCamp Philadelphia. Mostly just a code buildup. The complete code, which is probably more interesting, is here: …

This is the presentation that I did at BarCamp Philadelphia. Mostly just a code buildup. The complete code, which is probably more interesting, is here:
https://gist.github.com/675645

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
819
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
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. Rapid Implementation with YUI + YQL ‘cause it’s your code that’s important
  • 2. Me.
  • 3. YUI • 2 • Around for a while • Many widgets • Adding scripts manually • Bigger initial load time • 3 • Small loader, pull in the modules you need • Granular • Fewer “native” widgets • Gallery 2-in-3: best of both!
  • 4. YQL • Cloud data store • SQL-like syntax (select * from internet) • REST • YUI3 module built in • Console
  • 5. Puppies! <html> <head> <title>YUI/YQL Flickr</title> </head> <body> <div id="puppyBox"> <ul id="puppies"></ul> </div> </body> </html> http://www.flickr.com/photos/archangel_raphael/ http://www.flickr.com/photos/fazen/
  • 6. <body class="yui3-skin-sam"> <div id="puppyBox"> <ul id="puppies"></ul> </div> <script src="http://yui.yahooapis.com/3.2.0/build/yui/yui- min.js"></script> <script> YUI().use('console', function(Y) { new Y.Console().render(); }); </script> </body>
  • 7. <script src="http://yui.yahooapis.com/3.2.0/build/yui/yui- min.js"></script> <script> YUI().use('yql', 'console', 'dump', function(Y) { new Y.Console().render(); Y.YQL('select * from flickr.photos.search(0,15) where text="puppy"', function(r) { Y.each(r.query.results.photo, function(photo) { puppy = Y.log('<li><img src="' + Y.dump(photo) + ‘" height="75" width="75"></li>'); }); }); }); </script>
  • 8. YUI().use('node', 'yql', 'substitute', function(Y) { var flickr = { template: 'http://farm{farm}.static.flickr.com/{server}/{id}_{secret}_s.jpg', createLink: function(pieces) { return(Y.substitute(this.template, pieces)); }, }; Y.YQL('select * from flickr.photos.search(0,15) where text="puppy"', function(r) { var puppies = Y.one('#puppies'); Y.each(r.query.results.photo, function(photo) { puppy = Y.Node.create('<li><img src="' + flickr.createLink(photo) + '" height="75" width="75"></li>'); puppies.appendChild(puppy); }); }); });
  • 9. YUI().use('node', 'yql', 'substitute', function(Y) { var flickr = { template: 'http://farm{farm}.static.flickr.com/{server}/{id}_{secret}_s.jpg', createLink: function(pieces) { return(Y.substitute(this.template, pieces)); }, createCarousel: function() { Y.use('yui2-carousel', function(YC) { var YAHOO = YC.YUI2, carousel = new YAHOO.widget.Carousel("puppyBox", { selectOnScroll: false, isCircular: true, carouselEl: 'UL' }); carousel.render(); carousel.show(); }); } }; ….
  • 10. <html> <head> <title>YUI/YQL Flickr</title> <style type="text/css"> .yui-carousel-element li { height: 75px; width: 75px; } .yui-carousel-element .yui-carousel-item-selected { border: none; } </style> </head> <body class="yui3-skin-sam"> <div class="yui-skin-sam"> <div id="puppyBox"> <ul id="puppies"></ul> </div> </div>
  • 11. <script src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js"></script> <script> YUI().use('node', 'yql', 'substitute', 'console', function(Y) { … Y.YQL('select * from flickr.photos.search(0,15) where text="puppy"', function(r) { var puppies = Y.one('#puppies'); Y.each(r.query.results.photo, function(photo) { puppy = Y.Node.create('<li><img src="' + flickr.createLink(photo) + '" height="75" width="75"></li>'); puppies.appendChild(puppy); }); flickr.createCarousel(); }); }); </script>

×