Slick Hacks with YUI

Jai Santhosh

Frontend Guy @ YDN, Hacker

@jaisanth

YUI exists to build web applications faster.

What is YUI?

Who is using YUI?

http://yuiblog.com/blog/category/in-the-wild/

Why hack with YUI?

SimpleYUI

<script
    src="http://yui.yahooapis.com/3.6.0
    /build/simpleyui/simpleyui-min.js">
</script>

<script>

Y.one("#foo").addClass("highlight");

</script>

Working with DOM: Events

// get an element reference, add a click handler

Y.one('#demo').on('click', 
    function(e) {/*handle click*/});

Working with DOM: Append

// add content to an element

Y.one('#demo').append('Added to #demo.');

Working with DOM: Event Delegation

// listen for any click on any <li>
// that descends from #demo:

Y.one('#demo').delegate('click',
    function(e) {/*handle click*/}, 'li');

Working with DOM: Move Elements

// move #demo to the location of any click

Y.one('document').on('click', function(e) {
        Y.one('#demo').setXY([e.pageX, e.pageY]);
    }
);

Fancy Transitions

Y.one('#demo').transition({
    easing: 'ease-out',
    duration: 2, // seconds
    opacity: 0
}, function() {
    this.remove();
});

Ajax

Y.io('/get-data', {
    on: {
        complete: function (id, response) {
            var data = response.responseText;
            // handle the response
        }
    }
});

Extend with Y.use

Y.use('dd-drag', function(Y) {
    var dd = new Y.DD.Drag({
        node: '#foo'
    });
});

YQL

Y.use('yql', function (Y) {
    var res = Y.one('#res'), zip = '90210';
 
    Y.YQL('select * from weather.forecast'
        + ' where location=' + zip, function (r) {

        var item = r.query.results.channel.item;

        var el = Y.Node.create('div'); 
        el.setContent('<h2>Weather for '
            + zip + '</h2>'
            + item.description);
 
        res.appendChild(el); 
    });
});

YUI Gallery

The YUI of tomorrow, today.

http://yuilibrary.com/gallery/

jQuery to YUI Rosetta Stone

Great resource for jQuery users.

http://jsrosettastone.com/

Layouts in YUI

YUI on Node.js

You can use Node.js, jsdom, and YUI to manipulate pages on the server!

http://yuilibrary.com/projects/nodejs-yui3

Easy installation

$ npm install yui3

See http://npmjs.org.

Using YUI inside of Express

http://express.davglass.com/

app.get('/three', function(req, res){
    res.render('same.html', {
        locals: {
            content: '#content',
            before: function(Y) {
                Y.one('h1').set('innerHTML', 'Welcome to Page #3');
            },
            after: function(Y, options, partial) {
                Y.one('title').set('innerHTML', 'Page #3');
                Y.all('#nav li').removeClass('selected');
                Y.one('#nav li.three').addClass('selected');
            }
    })
});

Thanks!

More!

http://jaisanth.com/slick-hacks-with-yui/

Happy Hacking!!