YUI for control
freaks
Christian Heilmann
The Ajax Experience, Boston, MA, Autumn 2008

Oh, hello there...

I’m Chris.

I am a lazy person.

I prefer doing things once,
and do them right instead of
doing them over and over
again.

For this, I need control.

I like having control.

Remote control
rubber duck

However, having too much
control can be an issue.

Limitation is good.

Let’s do a quick rewind.

The Commodore 64

16 preset colours
resolution 160x200 pixels
4 colours per each 8x8 pixel
block

Limitations that inspire
different people in different
ways.

It is great to have a one size
fits all solution.

... but it can be as cool to have
a on-demand set of tools.

YUI is the latter.

It brings order to the chaos.

What chaos?

JavaScript is a part of a larger
world.

This is not the
JavaScript is a part of a larger
world.
copyrighted
photo you are
looking for

Browser
Interaction with other
technologies (CSS, Markup)
Interaction with other
scripts
Interaction with the
backend

Interaction with the
operating system.
Interaction with the user
(with unknown ability)
Interaction with bad code
(a.k.a. ads)

YUI deals with all of this.

Because it has to – we built it
for industrial (Yahoo)
strength.

The first thing we needed to
get are some sensible
constraints.

We did this with the Graded
Browser Support:
http://developer.yahoo.com/
yui/articles/gbs/

This gave us a defined
playground, and we were able
to start tackling the other
issues.

The first thing to tackle before
you can even hope to build
interfaces are browser
differences in CSS.

There is no such thing as an
“unstyled page”.

There is no such thing as an
“unstyled page”.

Good luck working around
that one.

Unless you use reset.css
http://developer.yahoo.com/
yui/reset/

Starting with a blank canvas
=
good.

What about typography?

Make it work across browsers
with fonts.css
http://developer.yahoo.com/
yui/fonts/

Even create layouts with
grids.css
http://developer.yahoo.com/
yui/grids/

Grids gives you an amazingly
large amount of options and
layout permutations.

Everybody Duck!

There will be code

Wouldn’t it be cool to not
know when to use which size
of the grid automatically?

This is where the next YUI gem
comes in: DOM.
http://developer.yahoo.com/
yui/dom

Using the DOM component, I
can read out what happens in
the browser.

I can get the dimensions of the
window, the dimensions of the
browser, and the dimensions
of any element in the
document – regardless of its
positioning.

Using DOM, I can create a YUI
grid that works with all kind of
different browsers sizes.

http://yuiblog.com/blog/
2008/06/25/autogrids

YAHOO.example.autoGrid = function(){
var container = YAHOO.util.Dom.get('doc') ||
YAHOO.util.Dom.get('doc2') ||
YAHOO.util.Dom.get('doc4') ||
YAHOO.util.Dom.get('doc3') ||
YAHOO.util.Dom.get('doc-custom');
if(container){
var sidebar = null;
var classes = container.className;
if(classes.match(/yui-t[1-3]|yui-left/)){
var sidebar = 'left';
}
if(classes.match(/yui-t[4-6]|yui-right/)){
var sidebar = 'right';
}
function switchGrid(){
var currentWidth = YAHOO.util.Dom.getViewportWidth();

if(currentWidth > 950){
container.id = 'doc2';
if(sidebar){
container.className = sidebar === 'left'
? 'yui-t3' : 'yui-t6';
}
}
if(currentWidth < 950){
container.id = 'doc';
if(sidebar){
container.className = sidebar === 'left'
? 'yui-t2' : 'yui-t5';
}
}
if(currentWidth < 760){
container.id = 'doc3';
if(sidebar){
container.className = sidebar === 'left'
? 'yui-t1' : 'yui-t4';
}
}

if(currentWidth < 600){
container.id = 'doc3';
container.className = '';
}
};
switchGrid();
function throttle(method, scope) {
clearTimeout(method._tId);
method._tId= setTimeout(function(){
method.call(scope);
}, 100);
};
YAHOO.util.Event.on(window,'resize',function(){
throttle(YAHOO.example.autoGrid.switchGrid,window);
});
};
return {
switchGrid:switchGrid
};
}();

What about monitoring the
size of an element?

position:fixed is sexy!

It can however also render
your site impossible to use.

var YD = YAHOO.util.Dom;
YAHOO.util.Event.onDOMReady(toggleMenu);
YAHOO.util.Event.on(window,'resize',function(){
toggleMenu();
});
function toggleMenu(){
var sidebar = YD.getRegion('sb');
var browser = YD.getViewportHeight();
YD.setStyle('sb','position',
browser < sidebar.bottom ? 'static' : 'fixed'
);
}

The DOM stepchild: Region

Using Region I can find out the
dimensions of an element.

I can also find the region that
is big enough to include two
regions, or the one that is the
intersection of the two.

region example

YAHOO.util.Event.onDOMReady(function(){
var YD = YAHOO.util.Dom;
var r1 = YD.getRegion('region-one');
var r2 = YD.getRegion('region-two');
var i = r1.intersect(r2);
var u = r1.union(r2);
var intersect = document.createElement('div');
document.body.appendChild(intersect);
YD.setStyle(intersect,'position','absolute');
YD.setStyle(intersect,'background','#c0c');
YD.setStyle(intersect,'width',i.right-i.left + 'px');
YD.setStyle(intersect,'height',i.bottom-i.top + 'px');
YD.setStyle(intersect,'z-index',100);
YD.setXY(intersect,i);

var union = document.createElement('div');
document.body.appendChild(union);
YD.setStyle(union,'position','absolute');
YD.setStyle(union,'background','#000');
YD.setStyle(union,'opacity',.5);
YD.setStyle(union,'width',u.right-u.left + 'px');
YD.setStyle(union,'height',u.bottom-u.top + 'px');
YD.setStyle(union,'z-index',90);
YD.setXY(union,u);
});

This gives me full control to
avoid any overlap!

What about things the
browser does not tell me?

Wouldn’t it be cool to find out
when the font is resized?

http://alistapart.com/articles/fontresizing

You can detect the font size in
several ways:

Include an element with a
known size in ems and read its
offsetHeight and
offsetWidth in an interval...

...or use an iframe with em
sizing off-screen and subscribe
to its resize event.

Or use the YUI container
module anywhere on your
page... :)

YAHOO.namespace('example.container');
YAHOO.util.Event.onDOMReady(function(){
YAHOO.example.container.module1 = new YAHOO.widget.Panel(
'module1',
{
close:true,
draggable:true,
constraintoviewport:true
}
);
YAHOO.example.container.module1.render();
YAHOO.widget.Module.textResizeEvent.subscribe(
function(o){
console.log('Text has been resized!')
}
);
});

YAHOO.namespace('example.container');
YAHOO.util.Event.onDOMReady(function(){
YAHOO.example.container.module1 = new YAHOO.widget.Panel(
'module1',
{
close:true,
draggable:true,
constraintoviewport:true
}
);
YAHOO.example.container.module1.render();
YAHOO.widget.Module.textResizeEvent.subscribe(
function(o){
console.log('Text has been resized!')
}
);
});

This works with one feature of
YUI event that is very close to
my heart: Custom Events.

... which is so cool that all the
other big libraries now have it
aswell :)

Custom Events allow you to
notify an unknown amount of
listeners about what is
happening...

... sending information not
necessarily accessible to them
when it happens.

Every single YUI component
has a lot of Custom Events you
can subscribe to.

Say for example you want to
make sure to securely chain
animation sequences...

//This is the first animation; this one will
//fire when the button is clicked.
var move = new YAHOO.util.Anim(\"animator\", {
left: {from:0, to:75}
}, 1);
//This is the second animation; it will fire
//when the first animation is complete.
var changeColor = new YAHOO.util.ColorAnim(
\"animator\", { backgroundColor:
{from:\"#003366\", to:\"#ff0000\"}
}, 1);
//Here's the chaining glue: We subscribe to the
//first animation's onComplete event, and in
//our handler we animate the second animation:
move.onComplete.subscribe(function() {
changeColor.animate();
});

//Here we set up our YUI Button and subcribe to
//its click event. When clicked, it will
//animate the first animation:
var start = new YAHOO.widget.Button(\"startAnim\");
start.subscribe(\"click\", function() {
//reset the color value to the start so that
//the animation can be run multiple times:
YAHOO.util.Dom.setStyle(\"animator\",
\"backgroundColor\",
\"#003366\");
move.animate();
});

//You can also make use of the onStart and onTween
//custom events in Animation; here, we'll log all
//of changeColor's custom events and peek at their
//argument signatures:
changeColor.onStart.subscribe(function() {
YAHOO.log(\"changeColor animation is starting.\",
\"info\", \"example\");
});
changeColor.onTween.subscribe(function(s, o) {
YAHOO.log(\"changeColor onTween firing with these
arguments: \" + YAHOO.lang.dump(o),
\"info\", \"example\");
});
changeColor.onComplete.subscribe(function(s, o) {
YAHOO.log(\"changeColor onComplete firing with
these arguments: \" + YAHOO.lang.dump(o),
\"info\", \"example\");
});

That is a lot of control!

{font resizing example}

Knowledge is power.

This is why YUI comes with a
lot of tools to gain knowledge
about what is happening
under the hood of your
application.

YUI logger gives you a cross-
browser console to show
values.

Death to alert()!

All YUI components come as a
debug version which log
everything that is going on to
the logger.

You can even include the
logger on the fly with a
bookmarklet.

http://blog.rajatpandit.com/sandbox/yuilogger/index.html

If you need even more
control, there is the YUI
profiler.
http://developer.yahoo.com/
yui/profiler/

And the YUI test framework
for test driven development.
http://developer.yahoo.com/
yui/yuitest/

If you like even more control...

Then you must be Nicholas Zakas or Dean Edwards!

On a code level, YUI comes
out-of-the-box with
namespacing.

Which – if used correctly –
keeps large amounts of code
readable and maintainable.

YAHOO.lang also comes with a
lot of validation methods to
ensure things are what they
are.

So how is YUI good for control
freaks?

Built on agreed standards
Separated into modules
each dealing with one task
Constant reporting of what
is going on
Own Debugging
environment

Here’s another small thing I
prepared earlier:

Using Event and Dom I can
control the visible part:

function move(e){
y = YAHOO.util.Event.getXY(e);
if(y[1] > size){
render(y);
}
};
function render(y){
var d = YAHOO.util.Dom;
var real = y[1] - d.getDocumentScrollTop();
d.setStyle(top,'height',real-size+'px');
d.setStyle(bottom,'top',real+size+'px');
var h = d.getViewportHeight() - real + size;
d.setStyle(bottom,'height',h + 'px');
};

http://yuiblog.com/blog/2008/09/30/reading-blinds/

What does the future hold?

YUI3
http://developer.yahoo.com/
yui/3/

Include on demand
Multiple sandboxed
instances in a page
Modularity on CSS level (per
element reset)
Every event is a custom
event

THANKS!
http://icanhaz.com/yuicontrol
Christian Heilmann
http://wait-till-i.com
http://scriptingenabled.org
http://twitter.com/codepo8