Hack with YUI
-
Upload
luke-smith -
Category
Technology
-
view
6.988 -
download
2
description
Transcript of Hack with YUI
![Page 1: Hack with YUI](https://reader033.fdocuments.in/reader033/viewer/2022061201/547a5d72b4af9f9b158b4ad8/html5/thumbnails/1.jpg)
![Page 2: Hack with YUI](https://reader033.fdocuments.in/reader033/viewer/2022061201/547a5d72b4af9f9b158b4ad8/html5/thumbnails/2.jpg)
HACK WITH
Luke Smith
@ls_n
![Page 3: Hack with YUI](https://reader033.fdocuments.in/reader033/viewer/2022061201/547a5d72b4af9f9b158b4ad8/html5/thumbnails/3.jpg)
YUI EXISTS TO BUILD WEB APPLICATIONS FASTER
![Page 4: Hack with YUI](https://reader033.fdocuments.in/reader033/viewer/2022061201/547a5d72b4af9f9b158b4ad8/html5/thumbnails/4.jpg)
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
![Page 5: Hack with YUI](https://reader033.fdocuments.in/reader033/viewer/2022061201/547a5d72b4af9f9b158b4ad8/html5/thumbnails/5.jpg)
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
![Page 6: Hack with YUI](https://reader033.fdocuments.in/reader033/viewer/2022061201/547a5d72b4af9f9b158b4ad8/html5/thumbnails/6.jpg)
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/
![Page 7: Hack with YUI](https://reader033.fdocuments.in/reader033/viewer/2022061201/547a5d72b4af9f9b158b4ad8/html5/thumbnails/7.jpg)
WHY HACK WITH YUI?
• 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
![Page 8: Hack with YUI](https://reader033.fdocuments.in/reader033/viewer/2022061201/547a5d72b4af9f9b158b4ad8/html5/thumbnails/8.jpg)
YUI
<script
src="http://yui.yahooapis.com/3.3.0
/build/simpleyui/simpleyui-min.js"></script>
<script>
Y.one("#foo").addClass("highlight");
</script>
![Page 9: Hack with YUI](https://reader033.fdocuments.in/reader033/viewer/2022061201/547a5d72b4af9f9b158b4ad8/html5/thumbnails/9.jpg)
DOM EVENTS
Y.one("#demo").on(“click”, function (e) {
/* handle click */});
![Page 10: Hack with YUI](https://reader033.fdocuments.in/reader033/viewer/2022061201/547a5d72b4af9f9b158b4ad8/html5/thumbnails/10.jpg)
ADD HTML
Y.one("#demo").append(“<p>I’m new here.</p>”);
![Page 11: Hack with YUI](https://reader033.fdocuments.in/reader033/viewer/2022061201/547a5d72b4af9f9b158b4ad8/html5/thumbnails/11.jpg)
EVENT DELEGATION
// any click on an <li> inside #demo will trigger
Y.one("#demo").delegate(“click”, function (e) {
/* handle click */
}, “li”);
![Page 12: Hack with YUI](https://reader033.fdocuments.in/reader033/viewer/2022061201/547a5d72b4af9f9b158b4ad8/html5/thumbnails/12.jpg)
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 ] );
});
![Page 13: Hack with YUI](https://reader033.fdocuments.in/reader033/viewer/2022061201/547a5d72b4af9f9b158b4ad8/html5/thumbnails/13.jpg)
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.
![Page 14: Hack with YUI](https://reader033.fdocuments.in/reader033/viewer/2022061201/547a5d72b4af9f9b158b4ad8/html5/thumbnails/14.jpg)
AJAX
Y.io(“my.aweso.me/service.php”, {
on: {
complete: function (id, response) {
var data = Y.JSON.parse(response);
/* handle response */
}
}
});
![Page 15: Hack with YUI](https://reader033.fdocuments.in/reader033/viewer/2022061201/547a5d72b4af9f9b158b4ad8/html5/thumbnails/15.jpg)
ADD MORE FEATURES WITH Y.USE()
Y.use(“dd-plugin”, function () {
Y.one(“#foo”).plug(Y.Plugin.Drag);
});
![Page 16: Hack with YUI](https://reader033.fdocuments.in/reader033/viewer/2022061201/547a5d72b4af9f9b158b4ad8/html5/thumbnails/16.jpg)
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);
});
![Page 17: Hack with YUI](https://reader033.fdocuments.in/reader033/viewer/2022061201/547a5d72b4af9f9b158b4ad8/html5/thumbnails/17.jpg)
YUI GALLERY
The YUI of tomorrow, today.• Community collection of YUI 3 modules• BSD license• Hosted on Yahoo!’s CDN• All available from Y.use(“here!”)
http://yuilibrary.com/gallery
Ratings, paginator, resize, loading mask, inline editing, and lots more.
![Page 18: Hack with YUI](https://reader033.fdocuments.in/reader033/viewer/2022061201/547a5d72b4af9f9b158b4ad8/html5/thumbnails/18.jpg)
KNOW YUI 2?
Use YUI 2 widgets inside YUI 3.
• ImageCropper
• ColorPicker
• ProgressBar
• SimpleDialog
Y.use(“yui2-datatable”, function () {
var YAHOO = Y.YUI2;
new YAHOO.widget.DataTable(“simple”);
});
![Page 19: Hack with YUI](https://reader033.fdocuments.in/reader033/viewer/2022061201/547a5d72b4af9f9b158b4ad8/html5/thumbnails/19.jpg)
KNOW JQUERY?
http://jsrosettastone.com/
Great resource for jQuery users• Provides one-to-one reference from jQuery to YUI 3• Maintained by Paul Irish and the YUI Team
![Page 20: Hack with YUI](https://reader033.fdocuments.in/reader033/viewer/2022061201/547a5d72b4af9f9b158b4ad8/html5/thumbnails/20.jpg)
YUI ON NODE.JS
Use Node.js, jsdom, and YUI to manipulate pages on the server!
• Progressive enhancement• Write once, works on the client and server• Our wrapper creates a simulated DOM for you
http://yuilibrary.com/projects/nodejs-yui3
Easy installation
$ npm install yui3
See http://npmjs.org
![Page 21: Hack with YUI](https://reader033.fdocuments.in/reader033/viewer/2022061201/547a5d72b4af9f9b158b4ad8/html5/thumbnails/21.jpg)
YUI RESET, FONTS, GRIDS
Stylesheets to make your life easier
You want to use this. Just drop it in.
![Page 22: Hack with YUI](https://reader033.fdocuments.in/reader033/viewer/2022061201/547a5d72b4af9f9b158b4ad8/html5/thumbnails/22.jpg)
RESET & FONTS
Reset CSS makes browser styling consistent.
Fonts CSS provides typographical normalization, while allowing users to change font size.
<link href=“http://yui.yahooapis.com/3.3.0/build/
cssreset/cssreset-min.css”>
<link href=“http://yui.yahooapis.com/3.3.0/build/
cssfonts/cssfonts-min.css”>
![Page 23: Hack with YUI](https://reader033.fdocuments.in/reader033/viewer/2022061201/547a5d72b4af9f9b158b4ad8/html5/thumbnails/23.jpg)
CSS GRIDS
Simple, flexible, infinitely nestable in 1.2K
Divide into three equal units
<link href=“http://yui.yahooapis.com/3.3.0/build/
cssgrids/cssgrids-min.css”>
<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>
![Page 24: Hack with YUI](https://reader033.fdocuments.in/reader033/viewer/2022061201/547a5d72b4af9f9b158b4ad8/html5/thumbnails/24.jpg)
THANKS!
Luke Smith
@ls_n
@yuilibrary
http://developer.yahoo.com/yui/3/