Hack with YUI
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Hack with YUI

on

  • 6,912 views

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

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.

Statistics

Views

Total Views
6,912
Views on SlideShare
5,117
Embed Views
1,795

Actions

Likes
2
Downloads
17
Comments
1

10 Embeds 1,795

http://korben.info 885
http://www.korben.info 755
http://www.slideshare.net 68
http://lanyrd.com 67
url_unknown 8
http://korben.info:81 7
http://twitter.com 2
http://us-w1.rockmelt.com 1
http://feeds2.feedburner.com 1
http://m.korben.info 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • *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
    Processing…
Post Comment
Edit your comment

Hack with YUI Presentation Transcript

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