Hack with YUI

Hack with
Luke Smith
@ls_n

YUI exists to build web applications faster

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

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

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/

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

YUI
<script
src="http://yui.yahooapis.com/3.3.0
/build/simpleyui/simpleyui-min.js"></script>
<script>
Y.one("#foo").addClass("highlight");
</script>

DOM events
Y.one("#demo").on(“click”, function (e) {
/* handle click */ });

Add html
Y.one("#demo").append(“<p>I’m new here.</p>”);

Event delegation
// any click on an <li> inside #demo will trigger
Y.one("#demo").delegate(“click”, function (e) {
/* handle click */
}, “li”);

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 ] );
});

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.

Ajax
Y.io(“my.aweso.me/service.php”, {
on: {
complete: function (id, response) {
var data = Y.JSON.parse(response);
/* handle response */
}
}
});

Add more features with Y.use()
Y.use(“dd-plugin”, function () {
Y.one(“#foo”).plug(Y.Plugin.Drag);
});

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);
});

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.

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
ColorPicker
ProgressBar
SimpleDialog

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

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

YUI Reset, fonts, grids
Stylesheets to make your life easier
You want to use this. Just drop it in.

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.
cssfonts/cssfonts-min.css”>

CSS grids
Simple, flexible, infinitely nestable in 1.2K
cssgrids/cssgrids-min.css”>
Divide into three equalunits
<div class=“yui3-g”>
<div class=“yui3-u-1-3”></div>
</div>

Thanks!
Luke Smith
@ls_n
lsmith@yahoo-inc.com
@yuilibrary
http://developer.yahoo.com/yui/3/

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

Hack with YUI

by Luke Smith

Accessibility

Categories

Upload Details

Usage Rights

9 Embeds 1,685

Statistics

Hack with YUI Presentation Transcript

Hack with YUI

by Luke Smith

Accessibility

Categories

Upload Details

Usage Rights

9 Embeds 1,685

Statistics

Hack with YUI Presentation Transcript

Let LinkedIn power your SlideShare experience

Let LinkedIn power your SlideShare experience

Customize SlideShare content based on your interests

Keep up to date when your LinkedIn contacts post on SlideShare