Hack with<br />Luke Smith<br />@ls_n<br />
YUI exists to build web applications faster<br />
What is YUI?<br />The YUI Library is a set of utilities and controls, written with JavaScript and CSS, for building richly...
What is YUI?<br />1K new sites every month, among the top 1M sites.<br />“YUI Library is the only other library that is ga...
WHO uses YUI?<br />Mint<br />Target<br />LinkedIn<br />Microsoft<br />Google<br />Reuters<br />Walgreens<br />NFL<br />For...
Why hack with YUI?<br /><ul><li> You don’t have time to find and workaround browser bugs
 Avoid reinventing the wheel
Core: Rock solid DOM manipulation, events, and more
Transition: Rich effects using CSS3
Drag and Drop that works
Gesture Events: Swipe, flicks, and more for touch devices
ScrollView: Scrollable content on mobile and desktop alike</li></li></ul><li>YUI<br />	<script<br />src="http://yui.yahooa...
DOM events<br />Y.one("#demo").on(“click”, function (e) {<br />		/* handle click */	});<br />
Add html<br />Y.one("#demo").append(“<p>I’m new here.</p>”);<br />
Event delegation<br />	// any click on an <li> inside #demo will trigger<br />Y.one("#demo").delegate(“click”, function (e...
Move stuff around<br />	// #demo will move to wherever a click happens<br />Y.one(”document”).on (“click”, function (e) {<...
Animated transitions<br />	// Hello HTML5!<br />Y.one(”#demo”).transition({<br />		easing: “ease-out”,<br />		duration: 2,...
Ajax<br />Y.io(“my.aweso.me/service.php”, {<br />		on: {<br />			complete: function (id, response) {<br />var data = Y.JSO...
Add more features with Y.use()<br />Y.use(“dd-plugin”, function () {<br />Y.one(“#foo”).plug(Y.Plugin.Drag);<br />	});<br />
yql<br />Y.use(“yql”, function () {<br />		function render(res) {<br />Y.one(“#demo”).append(<br />				“<h2>Weather for “ ...
YUI Gallery<br />The YUI of tomorrow, today.<br /><ul><li>Community collection of YUI 3 modules
BSD license
Hosted on Yahoo!’s CDN
Upcoming SlideShare
Loading in...5
×

Hack with YUI

6,710

Published on

This presentation will be a quick introduction to YUI version 3.3.0 and some of its core functions that should be most useful for building your hacks. We'll cover DOM manipulation and event subscription, animations, drag and drop, Ajax and YQL, and how to use CSS Grids for layout.

Published in: Technology
1 Comment
2 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
No Downloads
Views
Total Views
6,710
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
18
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Hack with YUI

  1. 1.
  2. 2. Hack with<br />Luke Smith<br />@ls_n<br />
  3. 3. YUI exists to build web applications faster<br />
  4. 4. What is YUI?<br />The YUI Library is a set of utilities and controls, written with JavaScript and CSS, for building richly interactive web applications.<br />Open source under the liberal BSD license.<br />Driven by the YUI Team at Yahoo! And contributors around the world.<br />http://yuilibrary.com<br />
  5. 5. What is YUI?<br />1K new sites every month, among the top 1M sites.<br />“YUI Library is the only other library that is gaining market share.”<br /> - http://w3techs.com/blog/entry/highlights_of_web_technology_surveys_march_2011<br />
  6. 6. WHO uses YUI?<br />Mint<br />Target<br />LinkedIn<br />Microsoft<br />Google<br />Reuters<br />Walgreens<br />NFL<br />Ford<br />Harley-Davidson<br />Flickr<br />National Geographic<br />Gatorade<br />Duck Duck Go<br />http://yuiblog.com/blog/category/in-the-wild/<br />
  7. 7. Why hack with YUI?<br /><ul><li> You don’t have time to find and workaround browser bugs
  8. 8. Avoid reinventing the wheel
  9. 9. Core: Rock solid DOM manipulation, events, and more
  10. 10. Transition: Rich effects using CSS3
  11. 11. Drag and Drop that works
  12. 12. Gesture Events: Swipe, flicks, and more for touch devices
  13. 13. ScrollView: Scrollable content on mobile and desktop alike</li></li></ul><li>YUI<br /> <script<br />src="http://yui.yahooapis.com/3.3.0<br /> /build/simpleyui/simpleyui-min.js"></script><br /> <script><br />Y.one("#foo").addClass("highlight");<br /> </script><br />
  14. 14. DOM events<br />Y.one("#demo").on(“click”, function (e) {<br /> /* handle click */ });<br />
  15. 15. Add html<br />Y.one("#demo").append(“<p>I’m new here.</p>”);<br />
  16. 16. Event delegation<br /> // any click on an <li> inside #demo will trigger<br />Y.one("#demo").delegate(“click”, function (e) {<br /> /* handle click */<br />}, “li”);<br />
  17. 17. Move stuff around<br /> // #demo will move to wherever a click happens<br />Y.one(”document”).on (“click”, function (e) {<br />Y.one(“#demo”).setXY( [ e.pageX, e.pageY ] );<br />});<br />
  18. 18. Animated transitions<br /> // Hello HTML5!<br />Y.one(”#demo”).transition({<br /> easing: “ease-out”,<br /> duration: 2, // seconds<br /> opacity: 0<br />}, function () { // callback executed when done<br />this.remove();<br /> });<br />Same API if the browser supports CSS3 transitions or not.<br />
  19. 19. Ajax<br />Y.io(“my.aweso.me/service.php”, {<br /> on: {<br /> complete: function (id, response) {<br />var data = Y.JSON.parse(response);<br /> /* handle response */<br /> }<br /> }<br /> });<br />
  20. 20. Add more features with Y.use()<br />Y.use(“dd-plugin”, function () {<br />Y.one(“#foo”).plug(Y.Plugin.Drag);<br /> });<br />
  21. 21. yql<br />Y.use(“yql”, function () {<br /> function render(res) {<br />Y.one(“#demo”).append(<br /> “<h2>Weather for “ + zip + “</h2>” +<br />res.query.results.channel.item.description);<br /> }<br />Y.YQL(“select * from weather.forecast “ +<br /> “where location=“ + zip, render);<br /> });<br />
  22. 22. YUI Gallery<br />The YUI of tomorrow, today.<br /><ul><li>Community collection of YUI 3 modules
  23. 23. BSD license
  24. 24. Hosted on Yahoo!’s CDN
  25. 25. All available from Y.use(“here!”)</li></ul>http://yuilibrary.com/gallery<br />Ratings, paginator, resize, loading mask, inline editing, and lots more.<br />
  26. 26. Know yui 2?<br />Use YUI 2 widgets inside YUI 3.<br /> Y.use(“yui2-datatable”, function () {<br />var YAHOO = Y.YUI2;<br /> new YAHOO.widget.DataTable(“simple”);<br /> });<br /><ul><li>ImageCropper
  27. 27. ColorPicker
  28. 28. ProgressBar
  29. 29. SimpleDialog</li></li></ul><li>Know jquery?<br />http://jsrosettastone.com/<br />Great resource for jQuery users<br /><ul><li>Provides one-to-one reference from jQuery to YUI 3
  30. 30. Maintained by Paul Irish and the YUI Team</li></li></ul><li>YUI on node.js<br />Use Node.js, jsdom, and YUI to manipulate pages on the server!<br /><ul><li>Progressive enhancement
  31. 31. Write once, works on the client and server
  32. 32. Our wrapper creates a simulated DOM for you</li></ul>http://yuilibrary.com/projects/nodejs-yui3<br />Easy installation<br /> $npm install yui3<br />See http://npmjs.org<br />
  33. 33. YUI Reset, fonts, grids<br />Stylesheets to make your life easier<br />You want to use this. Just drop it in.<br />
  34. 34. Reset & fonts<br />Reset CSS makes browser styling consistent.<br /><linkhref=“http://yui.yahooapis.com/3.3.0/build/<br />cssreset/cssreset-min.css”><br />Fonts CSS provides typographical normalization, while allowing users to change font size.<br /><linkhref=“http://yui.yahooapis.com/3.3.0/build/<br />cssfonts/cssfonts-min.css”><br />
  35. 35. CSS grids<br />Simple, flexible, infinitely nestable in 1.2K<br /><linkhref=“http://yui.yahooapis.com/3.3.0/build/<br />cssgrids/cssgrids-min.css”><br />Divide into three equalunits<br /><div class=“yui3-g”><br /><div class=“yui3-u-1-3”></div><br /> <div class=“yui3-u-1-3”></div><br /> <div class=“yui3-u-1-3”></div><br /></div><br />
  36. 36. Thanks!<br />Luke Smith<br />@ls_n<br />lsmith@yahoo-inc.com<br />@yuilibrary<br />http://developer.yahoo.com/yui/3/<br />
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×