SlideShare a Scribd company logo
1 of 142
Download to read offline
Introducing YUI

           Christian Heilmann

   Bucharest, Romania, November 2008
Hello there, I am Chris.
I am here today to talk about
   the Yahoo User Interface
         library (YUI)
 http://developer.yahoo.com/yui/
What is the most annoying
    thing about web
      development?
The undefined environment.
This is also the coolest thing
 about web development.
Don’t ever delude yourself
into thinking you can control
 what people see when they
   visit your web products.
However, you want your
  products to work.
The working bit is what I want
    to talk to you about.
When you start writing a web
document, you use HTML and
  hope browsers do things
           right.
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;
 quot;http://www.w3.org/TR/html4/strict.dtdquot;>
<html lang=quot;enquot;>
<head>
  <meta http-equiv=quot;Content-Typequot;
   content=quot;text/html; charset=utf-8quot; />
  <title>Here’s my title</title>
  <meta name=quot;descriptionquot; content=quot;Descriptionquot;>
</head>
<body>
</body>
</html>
The right DOCTYPE, encoding
and language is a great start.
This is an unstyled document,
             right?
Wrong.
There is no such thing as an
   unstyled document.
There is no such thing as an
     “unstyled page”.
Introducing YUI
Introducing YUI
Introducing YUI
Introducing YUI
This differs from browser to
browser and can be *very*
          annoying!
Which is why YUI offers you
          reset.css
http://developer.yahoo.com/yui/reset/
Introducing YUI
Introducing YUI
Introducing YUI
Introducing YUI
Starting with a blank canvas is
         a good start.
What about typography?
Make it work across browsers
        with fonts.css
http://developer.yahoo.com/yui/fonts/
Introducing YUI
Even create layouts with
           grids.css
http://developer.yahoo.com/yui/grids/
Introducing YUI
All of this with one line of
code pulling a document
       from the web.
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;
 quot;http://www.w3.org/TR/html4/strict.dtdquot;>
<html lang=quot;enquot;>
<head>
  <meta http-equiv=quot;Content-Typequot;
   content=quot;text/html; charset=utf-8quot; />
  <title>Here’s my title</title>
  <meta name=quot;descriptionquot; content=quot;Descriptionquot;>
   <link rel=quot;stylesheetquot; href=quot;http://
yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-
fonts-grids.cssquot; type=quot;text/cssquot;>
</head>
<body>
</body>
</html>
What if that file is not
     available?
First of all, this is not a single
  server, but a world-wide
      network of servers.
Visitors of your site will get
  the files from the server
  geographically located
      nearest to them.
This is Yahoo’s network, but
 you can also use Google’s!
 http://yuiblog.com/blog/2008/11/19/yui-google/
http://developer.yahoo.com/yui/articles/hosting/
If you like full control, then
 you can also host the files
yourself (this will also make
    them work off-line!)
Let’s play with grids a bit.
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;
 quot;http://www.w3.org/TR/html4/strict.dtdquot;>
<html lang=quot;enquot;>
<head>
  <meta http-equiv=quot;Content-Typequot;
   content=quot;text/html; charset=utf-8quot; />
  <title>Here’s my title</title>
  <link rel=quot;stylesheetquot; href=quot;http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.cssquot; type=quot;text/cssquot;>
</head>
<body>

<div id=quot;docquot; class=quot;yui-t4quot;>
  <div id=quot;hdquot;>Header</div>
  <div id=quot;bdquot;>
    <div id=quot;yui-mainquot;>
       <div class=quot;yui-bquot;>
         Main section
       </div>
    </div>
    <div class=quot;yui-bquot;>
       Sidebar
    </div>
  </div>
  <div id=quot;ftquot;><p>Footer</p></div>
</div>
</body>
</html>
You divide the document in
three parts: a head, a body
       and a footer.
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;
 quot;http://www.w3.org/TR/html4/strict.dtdquot;>
<html lang=quot;enquot;>
<head>
  <meta http-equiv=quot;Content-Typequot;
   content=quot;text/html; charset=utf-8quot; />
  <title>Here’s my title</title>
  <link rel=quot;stylesheetquot; href=quot;http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.cssquot; type=quot;text/cssquot;>
</head>
<body>

<div id=quot;docquot; class=quot;yui-t4quot;>
  <div id=quot;hdquot;>Header</div>
  <div id=quot;bdquot;>
    <div id=quot;yui-mainquot;>
       <div class=quot;yui-bquot;>
         Main section
       </div>
    </div>
    <div class=quot;yui-bquot;>
      Sidebar
    </div>
  </div>
  <div id=quot;ftquot;><p>Footer</p></div>
</div>
</body>
</html>
You then define a side bar
     and a main part.
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;
 quot;http://www.w3.org/TR/html4/strict.dtdquot;>
<html lang=quot;enquot;>
<head>
  <meta http-equiv=quot;Content-Typequot;
   content=quot;text/html; charset=utf-8quot; />
  <title>Here’s my title</title>
  <link rel=quot;stylesheetquot; href=quot;http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.cssquot; type=quot;text/cssquot;>
</head>
<body>

<div id=quot;docquot; class=quot;yui-t4quot;>
  <div id=quot;hdquot;>Header</div>
  <div id=quot;bdquot;>
    <div id=quot;yui-mainquot;>
       <div class=quot;yui-bquot;>
         Main section
       </div>
    </div>
    <div class=quot;yui-bquot;>
      Sidebar
    </div>
  </div>
  <div id=quot;ftquot;><p>Footer</p></div>
</div>
</body>
</html>
Both are identical, the only
difference is that the main
part has to be wrapped in a
DIV with the ID “yui-main”.
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;
 quot;http://www.w3.org/TR/html4/strict.dtdquot;>
<html lang=quot;enquot;>
<head>
  <meta http-equiv=quot;Content-Typequot;
   content=quot;text/html; charset=utf-8quot; />
  <title>Here’s my title</title>
  <link rel=quot;stylesheetquot; href=quot;http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.cssquot; type=quot;text/cssquot;>
</head>
<body>

<div id=quot;docquot; class=quot;yui-t4quot;>
  <div id=quot;hdquot;>Header</div>
  <div id=quot;bdquot;>
    <div id=quot;yui-mainquot;>
       <div class=quot;yui-bquot;>
         Main section
       </div>
    </div>
    <div class=quot;yui-bquot;>
      Sidebar
    </div>
  </div>
  <div id=quot;ftquot;><p>Footer</p></div>
</div>
</body>
</html>
The order of the two doesn’t
          matter!
The sidebar is a predefined
width, the main section takes
  up the rest of the space.
You define the overall width
 of the document with an ID
and the location and width of
 the sidebar with a class on
      the containing DIV.
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;
 quot;http://www.w3.org/TR/html4/strict.dtdquot;>
<html lang=quot;enquot;>
<head>
  <meta http-equiv=quot;Content-Typequot;
   content=quot;text/html; charset=utf-8quot; />
  <title>Here’s my title</title>
  <link rel=quot;stylesheetquot; href=quot;http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.cssquot; type=quot;text/cssquot;>
</head>
<body>

<div id=quot;docquot; class=quot;yui-t4quot;>
  <div id=quot;hdquot;>Header</div>
  <div id=quot;bdquot;>
    <div id=quot;yui-mainquot;>
       <div class=quot;yui-bquot;>
         Main section
       </div>
    </div>
    <div class=quot;yui-bquot;>
      Sidebar
    </div>
  </div>
  <div id=quot;ftquot;><p>Footer</p></div>
</div>
</body>
</html>
ID and width   class, side and width
#doc = 750px      .yui-t1 = left 160px
#doc2 = 950px     .yui-t2 = left 180px
#doc3 = 100%      .yui-t3 = left 300px
#doc4 = 974px     .yui-t4 = right 180px
                  .yui-t5 = right 240px
                  .yui-t6 = right 300px
You can add grid units inside
the main section to divide it
  into horizontal columns.
Check the docs at:
http://developer.yahoo.com/yui/grids
Or if you are lazy...
Use the grids builder:
http://developer.yahoo.com/yui/grids/builder/
So where does this work?
In all the browsers Yahoo has
           to support.
Which are defined in our
graded browser support:
http://developer.yahoo.com/yui/articles/gbs/
Introducing YUI
What if a new browser comes
           around?
Chances are very high Yahoo
  will have to support it...
...so check the YUI blog and
update your YUI CSS include.
    http://yuiblog.com
Much faster than fixing
everything yourself, right?
What if HTML is not rich
enough for your needs?
Almost all *free* and *big*
 JavaScript libraries come
with widgets that work and
 are proven in the market.
YUI is of course one of them.
AutoComplete            Layout Manager

Button                  Menu

Calendar                Paginator

Carousel beta           Rich Text Editor

Charts [experimental]   Slider

Color Picker            TabView

Container               TreeView

DataTable               Uploader [experimental]

ImageCropper beta
http://ui.jquery.com/




http://developer.yahoo.com/yui/
       http://ui.jquery.com
Of course the other thing the
  YUI makes a lot easier is
      using JavaScript.
Both by fixing annoying
browser bugs and by offering
   convenience methods.
For example:
Wouldn’t it be cool to not
know when to use which size
 of the grid automatically?
You can do that using YUI
          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 browser and of
 any element in the document
 - regardless of its positioning.
Thus 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!
Introducing YUI
It can however also render
your site impossible to use.
Introducing YUI
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?
Introducing YUI
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.
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.
Introducing YUI
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(quot;animatorquot;, {
	 	 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(
     quot;animatorquot;, { backgroundColor:
     {from:quot;#003366quot;, to:quot;#ff0000quot;}
	     }, 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(quot;startAnimquot;);
	 start.subscribe(quot;clickquot;, function() {
	 	 //reset the color value to the start so that
	 	 //the animation can be run multiple times:
	 	 YAHOO.util.Dom.setStyle(quot;animatorquot;,
                             quot;backgroundColorquot;,
                             quot;#003366quot;);
	 	 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(quot;changeColor animation is starting.quot;,
               quot;infoquot;, quot;examplequot;);
	 });
	 changeColor.onTween.subscribe(function(s, o) {
	 	 YAHOO.log(quot;changeColor onTween firing with these
               arguments: quot; + YAHOO.lang.dump(o),
               quot;infoquot;, quot;examplequot;);
	 });
	 changeColor.onComplete.subscribe(function(s, o) {
	 	 YAHOO.log(quot;changeColor onComplete firing with
               these arguments: quot; + YAHOO.lang.dump(o),
               quot;infoquot;, quot;examplequot;);
	 });
Knowing when something
 happens and being able to
react to it is much safer than
    assuming it worked.
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.
Introducing YUI
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/
Introducing YUI
And the YUI test framework
for test driven development.
   http://developer.yahoo.com/yui/yuitest/
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
professional and easy
    development?
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:
Introducing YUI
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/
Introducing YUI
Include on demand
Multiple sandboxed
instances in a page
Modularity on CSS level (per
element reset)
Every event is a custom
event
THANKS!


                 Christian Heilmann

 http://wait-till-i.com | http://scriptingenabled.org

            http://twitter.com/codepo8

More Related Content

What's hot

Findability Bliss Through Web Standards
Findability Bliss Through Web StandardsFindability Bliss Through Web Standards
Findability Bliss Through Web StandardsAarron Walter
 
WordPress Development Confoo 2010
WordPress Development Confoo 2010WordPress Development Confoo 2010
WordPress Development Confoo 2010Brendan Sera-Shriar
 
Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0Estelle Weyl
 
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018Advanced Web Scraping or How To Make Internet Your Database #seoplus2018
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018Esteve Castells
 
Gutmacher bookmarklets-sosu-europe-oct2018
Gutmacher bookmarklets-sosu-europe-oct2018Gutmacher bookmarklets-sosu-europe-oct2018
Gutmacher bookmarklets-sosu-europe-oct2018Glenn Gutmacher
 
Joomla Template Development
Joomla Template DevelopmentJoomla Template Development
Joomla Template DevelopmentLinda Coonen
 
Los Angeles HTML5 User Group Meeting Ask the Expert Session
Los Angeles HTML5 User Group Meeting Ask the Expert SessionLos Angeles HTML5 User Group Meeting Ask the Expert Session
Los Angeles HTML5 User Group Meeting Ask the Expert SessionPeter Lubbers
 
Interlinking structure for big websites
 Interlinking structure for big websites Interlinking structure for big websites
Interlinking structure for big websitesSerge Bezborodov
 
Gutmacher javascript-bookmarklets-sosuv-july2020
Gutmacher javascript-bookmarklets-sosuv-july2020Gutmacher javascript-bookmarklets-sosuv-july2020
Gutmacher javascript-bookmarklets-sosuv-july2020Glenn Gutmacher
 
Responsive Email Design and Development
Responsive Email Design and DevelopmentResponsive Email Design and Development
Responsive Email Design and Developmentladyheatherly
 
Html5 quick-learning-quide
Html5 quick-learning-quideHtml5 quick-learning-quide
Html5 quick-learning-quideJerry Wijaya
 
HTML presentation for beginners
HTML presentation for beginnersHTML presentation for beginners
HTML presentation for beginnersjeroenvdmeer
 
REST, the internet as a database?
REST, the internet as a database?REST, the internet as a database?
REST, the internet as a database?Andrej Koelewijn
 

What's hot (18)

HTML5: 5 Quick Wins
HTML5:  5 Quick WinsHTML5:  5 Quick Wins
HTML5: 5 Quick Wins
 
Findability Bliss Through Web Standards
Findability Bliss Through Web StandardsFindability Bliss Through Web Standards
Findability Bliss Through Web Standards
 
WordPress Development Confoo 2010
WordPress Development Confoo 2010WordPress Development Confoo 2010
WordPress Development Confoo 2010
 
Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0
 
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018Advanced Web Scraping or How To Make Internet Your Database #seoplus2018
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018
 
Gutmacher bookmarklets-sosu-europe-oct2018
Gutmacher bookmarklets-sosu-europe-oct2018Gutmacher bookmarklets-sosu-europe-oct2018
Gutmacher bookmarklets-sosu-europe-oct2018
 
Joomla Template Development
Joomla Template DevelopmentJoomla Template Development
Joomla Template Development
 
Los Angeles HTML5 User Group Meeting Ask the Expert Session
Los Angeles HTML5 User Group Meeting Ask the Expert SessionLos Angeles HTML5 User Group Meeting Ask the Expert Session
Los Angeles HTML5 User Group Meeting Ask the Expert Session
 
Interlinking structure for big websites
 Interlinking structure for big websites Interlinking structure for big websites
Interlinking structure for big websites
 
Gutmacher javascript-bookmarklets-sosuv-july2020
Gutmacher javascript-bookmarklets-sosuv-july2020Gutmacher javascript-bookmarklets-sosuv-july2020
Gutmacher javascript-bookmarklets-sosuv-july2020
 
Looking into HTML5
Looking into HTML5Looking into HTML5
Looking into HTML5
 
Responsive Email Design and Development
Responsive Email Design and DevelopmentResponsive Email Design and Development
Responsive Email Design and Development
 
Html5 quick-learning-quide
Html5 quick-learning-quideHtml5 quick-learning-quide
Html5 quick-learning-quide
 
HTML presentation for beginners
HTML presentation for beginnersHTML presentation for beginners
HTML presentation for beginners
 
Juggling
JugglingJuggling
Juggling
 
REST, the internet as a database?
REST, the internet as a database?REST, the internet as a database?
REST, the internet as a database?
 
Use atomic design ftw
Use atomic design ftwUse atomic design ftw
Use atomic design ftw
 
HTML Fundamentals
HTML FundamentalsHTML Fundamentals
HTML Fundamentals
 

Viewers also liked

Ciencias ii ciclo-5th & 6th
Ciencias ii ciclo-5th & 6thCiencias ii ciclo-5th & 6th
Ciencias ii ciclo-5th & 6thDouglas Johnson
 
Tipos De Redes De Telecomunicaciones
Tipos De Redes De TelecomunicacionesTipos De Redes De Telecomunicaciones
Tipos De Redes De Telecomunicacionesalexmora
 
Sallans RDAP11 NSF Data Management Plan Case Studies
Sallans RDAP11 NSF Data Management Plan Case StudiesSallans RDAP11 NSF Data Management Plan Case Studies
Sallans RDAP11 NSF Data Management Plan Case StudiesASIS&T
 
9ήμερη καλοκαιρινή εκδρομή σε ΑΥΣΤΡΙΑ, ΒΑΥΑΡΙΑ, ΙΤΑΛΙΑ
9ήμερη καλοκαιρινή εκδρομή σε ΑΥΣΤΡΙΑ, ΒΑΥΑΡΙΑ, ΙΤΑΛΙΑ9ήμερη καλοκαιρινή εκδρομή σε ΑΥΣΤΡΙΑ, ΒΑΥΑΡΙΑ, ΙΤΑΛΙΑ
9ήμερη καλοκαιρινή εκδρομή σε ΑΥΣΤΡΙΑ, ΒΑΥΑΡΙΑ, ΙΤΑΛΙΑDimitra Sofianou
 
Business building-taining-guide
Business building-taining-guideBusiness building-taining-guide
Business building-taining-guideandavar
 
Proyecto las nubes desde el hospital
Proyecto las nubes desde el hospitalProyecto las nubes desde el hospital
Proyecto las nubes desde el hospitalMansetic
 
Easy SPARQLing for the Building Performance Professional
Easy SPARQLing for the Building Performance ProfessionalEasy SPARQLing for the Building Performance Professional
Easy SPARQLing for the Building Performance ProfessionalMartin Kaltenböck
 
PRESENTACION SERVICIOS SEGURIDAD ALIMENTARIA
PRESENTACION SERVICIOS SEGURIDAD ALIMENTARIAPRESENTACION SERVICIOS SEGURIDAD ALIMENTARIA
PRESENTACION SERVICIOS SEGURIDAD ALIMENTARIAproacciona
 
Mediation And Settlement
Mediation And SettlementMediation And Settlement
Mediation And Settlementjwright2929
 
DMooney Always-Ahead 6-14-13
DMooney Always-Ahead 6-14-13DMooney Always-Ahead 6-14-13
DMooney Always-Ahead 6-14-13BamaGolfNut
 
Programa encina2013
Programa encina2013Programa encina2013
Programa encina2013luzetefist
 
Obligaciones de-los-empleados-y-del-empleado1
Obligaciones de-los-empleados-y-del-empleado1Obligaciones de-los-empleados-y-del-empleado1
Obligaciones de-los-empleados-y-del-empleado1Homer Carrera
 
Selection Guide - Price List 2015
Selection Guide - Price List 2015Selection Guide - Price List 2015
Selection Guide - Price List 2015Gunnebo UK
 
Religiosidad en la red
Religiosidad en la redReligiosidad en la red
Religiosidad en la redjackigg24
 
Co Car Project Germany - Brochure M2M
Co Car Project Germany - Brochure M2MCo Car Project Germany - Brochure M2M
Co Car Project Germany - Brochure M2MEricsson France
 
Vml wem presentation
Vml wem presentationVml wem presentation
Vml wem presentationAcquia
 
Unidad 3 actividad 4. Cancer de Mama
Unidad 3  actividad 4. Cancer de MamaUnidad 3  actividad 4. Cancer de Mama
Unidad 3 actividad 4. Cancer de MamaCelita perez pacheco
 
Dominio y subdominio
Dominio y subdominioDominio y subdominio
Dominio y subdominioEdgar Chávez
 

Viewers also liked (20)

Ciencias ii ciclo-5th & 6th
Ciencias ii ciclo-5th & 6thCiencias ii ciclo-5th & 6th
Ciencias ii ciclo-5th & 6th
 
Tipos De Redes De Telecomunicaciones
Tipos De Redes De TelecomunicacionesTipos De Redes De Telecomunicaciones
Tipos De Redes De Telecomunicaciones
 
Sallans RDAP11 NSF Data Management Plan Case Studies
Sallans RDAP11 NSF Data Management Plan Case StudiesSallans RDAP11 NSF Data Management Plan Case Studies
Sallans RDAP11 NSF Data Management Plan Case Studies
 
9ήμερη καλοκαιρινή εκδρομή σε ΑΥΣΤΡΙΑ, ΒΑΥΑΡΙΑ, ΙΤΑΛΙΑ
9ήμερη καλοκαιρινή εκδρομή σε ΑΥΣΤΡΙΑ, ΒΑΥΑΡΙΑ, ΙΤΑΛΙΑ9ήμερη καλοκαιρινή εκδρομή σε ΑΥΣΤΡΙΑ, ΒΑΥΑΡΙΑ, ΙΤΑΛΙΑ
9ήμερη καλοκαιρινή εκδρομή σε ΑΥΣΤΡΙΑ, ΒΑΥΑΡΙΑ, ΙΤΑΛΙΑ
 
Business building-taining-guide
Business building-taining-guideBusiness building-taining-guide
Business building-taining-guide
 
Proyecto las nubes desde el hospital
Proyecto las nubes desde el hospitalProyecto las nubes desde el hospital
Proyecto las nubes desde el hospital
 
Easy SPARQLing for the Building Performance Professional
Easy SPARQLing for the Building Performance ProfessionalEasy SPARQLing for the Building Performance Professional
Easy SPARQLing for the Building Performance Professional
 
PRESENTACION SERVICIOS SEGURIDAD ALIMENTARIA
PRESENTACION SERVICIOS SEGURIDAD ALIMENTARIAPRESENTACION SERVICIOS SEGURIDAD ALIMENTARIA
PRESENTACION SERVICIOS SEGURIDAD ALIMENTARIA
 
Mediation And Settlement
Mediation And SettlementMediation And Settlement
Mediation And Settlement
 
DMooney Always-Ahead 6-14-13
DMooney Always-Ahead 6-14-13DMooney Always-Ahead 6-14-13
DMooney Always-Ahead 6-14-13
 
Luan van nhung
Luan van nhungLuan van nhung
Luan van nhung
 
Programa encina2013
Programa encina2013Programa encina2013
Programa encina2013
 
Obligaciones de-los-empleados-y-del-empleado1
Obligaciones de-los-empleados-y-del-empleado1Obligaciones de-los-empleados-y-del-empleado1
Obligaciones de-los-empleados-y-del-empleado1
 
Selection Guide - Price List 2015
Selection Guide - Price List 2015Selection Guide - Price List 2015
Selection Guide - Price List 2015
 
Religiosidad en la red
Religiosidad en la redReligiosidad en la red
Religiosidad en la red
 
Co Car Project Germany - Brochure M2M
Co Car Project Germany - Brochure M2MCo Car Project Germany - Brochure M2M
Co Car Project Germany - Brochure M2M
 
Vml wem presentation
Vml wem presentationVml wem presentation
Vml wem presentation
 
Unidad 3 actividad 4. Cancer de Mama
Unidad 3  actividad 4. Cancer de MamaUnidad 3  actividad 4. Cancer de Mama
Unidad 3 actividad 4. Cancer de Mama
 
Dominio y subdominio
Dominio y subdominioDominio y subdominio
Dominio y subdominio
 
Ral·li fotogràfic Benissa 2015
Ral·li fotogràfic Benissa 2015 Ral·li fotogràfic Benissa 2015
Ral·li fotogràfic Benissa 2015
 

Similar to Introducing YUI

Successful Teams follow Standards
Successful Teams follow StandardsSuccessful Teams follow Standards
Successful Teams follow StandardsChristian Heilmann
 
Developing Gadgets
Developing GadgetsDeveloping Gadgets
Developing GadgetsQuirk
 
Lecture 1 - Comm Lab: Web @ ITP
Lecture 1 - Comm Lab: Web @ ITPLecture 1 - Comm Lab: Web @ ITP
Lecture 1 - Comm Lab: Web @ ITPyucefmerhi
 
How To Create Personal Web Pages On My Web
How To Create Personal Web Pages On My WebHow To Create Personal Web Pages On My Web
How To Create Personal Web Pages On My Websritikumar
 
JWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAXJWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAXHilary Mason
 
Web design 2 - Basic HTML 2010
Web design 2 - Basic HTML 2010Web design 2 - Basic HTML 2010
Web design 2 - Basic HTML 2010Matthew Mobbs
 
introduction to web technology
introduction to web technologyintroduction to web technology
introduction to web technologyvikram singh
 
Lca2009 Video A11y
Lca2009 Video A11yLca2009 Video A11y
Lca2009 Video A11yguesta3d158
 
Randy Witt Audio Assignment
Randy Witt Audio AssignmentRandy Witt Audio Assignment
Randy Witt Audio AssignmentPAVenturer
 
Html For Beginners 2
Html For Beginners 2Html For Beginners 2
Html For Beginners 2Sriram Raj
 
HTML5 Overview
HTML5 OverviewHTML5 Overview
HTML5 Overviewreybango
 

Similar to Introducing YUI (20)

Successful Teams follow Standards
Successful Teams follow StandardsSuccessful Teams follow Standards
Successful Teams follow Standards
 
HTML and CSS workshop
HTML and CSS workshopHTML and CSS workshop
HTML and CSS workshop
 
HTML to FTP
HTML to FTPHTML to FTP
HTML to FTP
 
Developing Gadgets
Developing GadgetsDeveloping Gadgets
Developing Gadgets
 
Lecture 1 - Comm Lab: Web @ ITP
Lecture 1 - Comm Lab: Web @ ITPLecture 1 - Comm Lab: Web @ ITP
Lecture 1 - Comm Lab: Web @ ITP
 
How To Create Personal Web Pages On My Web
How To Create Personal Web Pages On My WebHow To Create Personal Web Pages On My Web
How To Create Personal Web Pages On My Web
 
JWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAXJWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAX
 
Web design 2 - Basic HTML 2010
Web design 2 - Basic HTML 2010Web design 2 - Basic HTML 2010
Web design 2 - Basic HTML 2010
 
introduction to web technology
introduction to web technologyintroduction to web technology
introduction to web technology
 
Lca2009 Video A11y
Lca2009 Video A11yLca2009 Video A11y
Lca2009 Video A11y
 
Html5 Overview
Html5 OverviewHtml5 Overview
Html5 Overview
 
Randy Witt Audio Assignment
Randy Witt Audio AssignmentRandy Witt Audio Assignment
Randy Witt Audio Assignment
 
APEX Themes and Templates
APEX Themes and TemplatesAPEX Themes and Templates
APEX Themes and Templates
 
Html basic
Html basicHtml basic
Html basic
 
Html1
Html1Html1
Html1
 
Html For Beginners 2
Html For Beginners 2Html For Beginners 2
Html For Beginners 2
 
How to Create and Submit an XML SItemap
How to Create and Submit an XML SItemapHow to Create and Submit an XML SItemap
How to Create and Submit an XML SItemap
 
HTML5
HTML5HTML5
HTML5
 
HTML5 Overview
HTML5 OverviewHTML5 Overview
HTML5 Overview
 
Design Tools Html Xhtml
Design Tools Html XhtmlDesign Tools Html Xhtml
Design Tools Html Xhtml
 

More from Christian Heilmann

Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Christian Heilmann
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilegeChristian Heilmann
 
Seven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloSeven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloChristian Heilmann
 
Artificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteArtificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteChristian Heilmann
 
Killing the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynoteKilling the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynoteChristian Heilmann
 
Progressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays FinlandProgressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays FinlandChristian Heilmann
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilegeChristian Heilmann
 
Five ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerFive ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerChristian Heilmann
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Christian Heilmann
 
You learned JavaScript - now what?
You learned JavaScript - now what?You learned JavaScript - now what?
You learned JavaScript - now what?Christian Heilmann
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Christian Heilmann
 
Progressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReachProgressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReachChristian Heilmann
 
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worldsProgressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worldsChristian Heilmann
 
Non-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humansNon-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humansChristian Heilmann
 
Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center Christian Heilmann
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlChristian Heilmann
 
Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Christian Heilmann
 
The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)Christian Heilmann
 

More from Christian Heilmann (20)

Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019
 
Hinting at a better web
Hinting at a better webHinting at a better web
Hinting at a better web
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
 
Seven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloSeven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC Oslo
 
Artificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteArtificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynote
 
Killing the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynoteKilling the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynote
 
Progressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays FinlandProgressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays Finland
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
 
Five ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerFive ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developer
 
Taking the P out of PWA
Taking the P out of PWATaking the P out of PWA
Taking the P out of PWA
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"
 
You learned JavaScript - now what?
You learned JavaScript - now what?You learned JavaScript - now what?
You learned JavaScript - now what?
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"
 
Progressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReachProgressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReach
 
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worldsProgressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worlds
 
Non-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humansNon-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humans
 
Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. Control
 
Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017
 
The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)
 

Recently uploaded

What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?TechSoup
 
The Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George WellsThe Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George WellsEugene Lysak
 
Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.EnglishCEIPdeSigeiro
 
Diploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfDiploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfMohonDas
 
HED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfHED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfMohonDas
 
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptxPISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptxEduSkills OECD
 
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdfMaximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdfTechSoup
 
Philosophy of Education and Educational Philosophy
Philosophy of Education  and Educational PhilosophyPhilosophy of Education  and Educational Philosophy
Philosophy of Education and Educational PhilosophyShuvankar Madhu
 
Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.raviapr7
 
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptxPractical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptxKatherine Villaluna
 
How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17Celine George
 
3.19.24 Urban Uprisings and the Chicago Freedom Movement.pptx
3.19.24 Urban Uprisings and the Chicago Freedom Movement.pptx3.19.24 Urban Uprisings and the Chicago Freedom Movement.pptx
3.19.24 Urban Uprisings and the Chicago Freedom Movement.pptxmary850239
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17Celine George
 
General views of Histopathology and step
General views of Histopathology and stepGeneral views of Histopathology and step
General views of Histopathology and stepobaje godwin sunday
 
Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxDr. Asif Anas
 
UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024UKCGE
 
Education and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxEducation and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxraviapr7
 
Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...raviapr7
 
Patterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptxPatterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptxMYDA ANGELICA SUAN
 
Quality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICEQuality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICESayali Powar
 

Recently uploaded (20)

What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?
 
The Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George WellsThe Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George Wells
 
Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.
 
Diploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfDiploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdf
 
HED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfHED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdf
 
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptxPISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
 
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdfMaximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
 
Philosophy of Education and Educational Philosophy
Philosophy of Education  and Educational PhilosophyPhilosophy of Education  and Educational Philosophy
Philosophy of Education and Educational Philosophy
 
Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.
 
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptxPractical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptx
 
How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17
 
3.19.24 Urban Uprisings and the Chicago Freedom Movement.pptx
3.19.24 Urban Uprisings and the Chicago Freedom Movement.pptx3.19.24 Urban Uprisings and the Chicago Freedom Movement.pptx
3.19.24 Urban Uprisings and the Chicago Freedom Movement.pptx
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17
 
General views of Histopathology and step
General views of Histopathology and stepGeneral views of Histopathology and step
General views of Histopathology and step
 
Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptx
 
UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024
 
Education and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxEducation and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptx
 
Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...
 
Patterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptxPatterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptx
 
Quality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICEQuality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICE
 

Introducing YUI

  • 1. Introducing YUI Christian Heilmann Bucharest, Romania, November 2008
  • 2. Hello there, I am Chris.
  • 3. I am here today to talk about the Yahoo User Interface library (YUI) http://developer.yahoo.com/yui/
  • 4. What is the most annoying thing about web development?
  • 6. This is also the coolest thing about web development.
  • 7. Don’t ever delude yourself into thinking you can control what people see when they visit your web products.
  • 8. However, you want your products to work.
  • 9. The working bit is what I want to talk to you about.
  • 10. When you start writing a web document, you use HTML and hope browsers do things right.
  • 11. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/strict.dtdquot;> <html lang=quot;enquot;> <head> <meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=utf-8quot; /> <title>Here’s my title</title> <meta name=quot;descriptionquot; content=quot;Descriptionquot;> </head> <body> </body> </html>
  • 12. The right DOCTYPE, encoding and language is a great start.
  • 13. This is an unstyled document, right?
  • 15. There is no such thing as an unstyled document.
  • 16. There is no such thing as an “unstyled page”.
  • 21. This differs from browser to browser and can be *very* annoying!
  • 22. Which is why YUI offers you reset.css http://developer.yahoo.com/yui/reset/
  • 27. Starting with a blank canvas is a good start.
  • 29. Make it work across browsers with fonts.css http://developer.yahoo.com/yui/fonts/
  • 31. Even create layouts with grids.css http://developer.yahoo.com/yui/grids/
  • 33. All of this with one line of code pulling a document from the web.
  • 34. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/strict.dtdquot;> <html lang=quot;enquot;> <head> <meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=utf-8quot; /> <title>Here’s my title</title> <meta name=quot;descriptionquot; content=quot;Descriptionquot;> <link rel=quot;stylesheetquot; href=quot;http:// yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset- fonts-grids.cssquot; type=quot;text/cssquot;> </head> <body> </body> </html>
  • 35. What if that file is not available?
  • 36. First of all, this is not a single server, but a world-wide network of servers.
  • 37. Visitors of your site will get the files from the server geographically located nearest to them.
  • 38. This is Yahoo’s network, but you can also use Google’s! http://yuiblog.com/blog/2008/11/19/yui-google/
  • 40. If you like full control, then you can also host the files yourself (this will also make them work off-line!)
  • 41. Let’s play with grids a bit.
  • 42. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/strict.dtdquot;> <html lang=quot;enquot;> <head> <meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=utf-8quot; /> <title>Here’s my title</title> <link rel=quot;stylesheetquot; href=quot;http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.cssquot; type=quot;text/cssquot;> </head> <body> <div id=quot;docquot; class=quot;yui-t4quot;> <div id=quot;hdquot;>Header</div> <div id=quot;bdquot;> <div id=quot;yui-mainquot;> <div class=quot;yui-bquot;> Main section </div> </div> <div class=quot;yui-bquot;> Sidebar </div> </div> <div id=quot;ftquot;><p>Footer</p></div> </div> </body> </html>
  • 43. You divide the document in three parts: a head, a body and a footer.
  • 44. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/strict.dtdquot;> <html lang=quot;enquot;> <head> <meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=utf-8quot; /> <title>Here’s my title</title> <link rel=quot;stylesheetquot; href=quot;http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.cssquot; type=quot;text/cssquot;> </head> <body> <div id=quot;docquot; class=quot;yui-t4quot;> <div id=quot;hdquot;>Header</div> <div id=quot;bdquot;> <div id=quot;yui-mainquot;> <div class=quot;yui-bquot;> Main section </div> </div> <div class=quot;yui-bquot;> Sidebar </div> </div> <div id=quot;ftquot;><p>Footer</p></div> </div> </body> </html>
  • 45. You then define a side bar and a main part.
  • 46. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/strict.dtdquot;> <html lang=quot;enquot;> <head> <meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=utf-8quot; /> <title>Here’s my title</title> <link rel=quot;stylesheetquot; href=quot;http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.cssquot; type=quot;text/cssquot;> </head> <body> <div id=quot;docquot; class=quot;yui-t4quot;> <div id=quot;hdquot;>Header</div> <div id=quot;bdquot;> <div id=quot;yui-mainquot;> <div class=quot;yui-bquot;> Main section </div> </div> <div class=quot;yui-bquot;> Sidebar </div> </div> <div id=quot;ftquot;><p>Footer</p></div> </div> </body> </html>
  • 47. Both are identical, the only difference is that the main part has to be wrapped in a DIV with the ID “yui-main”.
  • 48. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/strict.dtdquot;> <html lang=quot;enquot;> <head> <meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=utf-8quot; /> <title>Here’s my title</title> <link rel=quot;stylesheetquot; href=quot;http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.cssquot; type=quot;text/cssquot;> </head> <body> <div id=quot;docquot; class=quot;yui-t4quot;> <div id=quot;hdquot;>Header</div> <div id=quot;bdquot;> <div id=quot;yui-mainquot;> <div class=quot;yui-bquot;> Main section </div> </div> <div class=quot;yui-bquot;> Sidebar </div> </div> <div id=quot;ftquot;><p>Footer</p></div> </div> </body> </html>
  • 49. The order of the two doesn’t matter!
  • 50. The sidebar is a predefined width, the main section takes up the rest of the space.
  • 51. You define the overall width of the document with an ID and the location and width of the sidebar with a class on the containing DIV.
  • 52. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/strict.dtdquot;> <html lang=quot;enquot;> <head> <meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=utf-8quot; /> <title>Here’s my title</title> <link rel=quot;stylesheetquot; href=quot;http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.cssquot; type=quot;text/cssquot;> </head> <body> <div id=quot;docquot; class=quot;yui-t4quot;> <div id=quot;hdquot;>Header</div> <div id=quot;bdquot;> <div id=quot;yui-mainquot;> <div class=quot;yui-bquot;> Main section </div> </div> <div class=quot;yui-bquot;> Sidebar </div> </div> <div id=quot;ftquot;><p>Footer</p></div> </div> </body> </html>
  • 53. ID and width class, side and width #doc = 750px .yui-t1 = left 160px #doc2 = 950px .yui-t2 = left 180px #doc3 = 100% .yui-t3 = left 300px #doc4 = 974px .yui-t4 = right 180px .yui-t5 = right 240px .yui-t6 = right 300px
  • 54. You can add grid units inside the main section to divide it into horizontal columns.
  • 55. Check the docs at: http://developer.yahoo.com/yui/grids
  • 56. Or if you are lazy...
  • 57. Use the grids builder:
  • 59. So where does this work?
  • 60. In all the browsers Yahoo has to support.
  • 61. Which are defined in our graded browser support: http://developer.yahoo.com/yui/articles/gbs/
  • 63. What if a new browser comes around?
  • 64. Chances are very high Yahoo will have to support it...
  • 65. ...so check the YUI blog and update your YUI CSS include. http://yuiblog.com
  • 66. Much faster than fixing everything yourself, right?
  • 67. What if HTML is not rich enough for your needs?
  • 68. Almost all *free* and *big* JavaScript libraries come with widgets that work and are proven in the market.
  • 69. YUI is of course one of them.
  • 70. AutoComplete Layout Manager Button Menu Calendar Paginator Carousel beta Rich Text Editor Charts [experimental] Slider Color Picker TabView Container TreeView DataTable Uploader [experimental] ImageCropper beta
  • 72. Of course the other thing the YUI makes a lot easier is using JavaScript.
  • 73. Both by fixing annoying browser bugs and by offering convenience methods.
  • 75. Wouldn’t it be cool to not know when to use which size of the grid automatically?
  • 76. You can do that using YUI DOM. http://developer.yahoo.com/yui/dom
  • 77. Using the DOM component, I can read out what happens in the browser.
  • 78. I can get the dimensions of the window, the browser and of any element in the document - regardless of its positioning.
  • 79. Thus I can create a YUI grid that works with all kind of different browsers sizes.
  • 81. 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();
  • 82. 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'; } }
  • 83. 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 }; }();
  • 84. What about monitoring the size of an element?
  • 87. It can however also render your site impossible to use.
  • 89. 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' ); }
  • 91. Using Region I can find out the dimensions of an element.
  • 92. I can also find the region that is big enough to include two regions, or the one that is the intersection of the two.
  • 94. 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);
  • 95. 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); });
  • 96. This gives me full control to avoid any overlap!
  • 97. What about things the browser does not tell me?
  • 98. Wouldn’t it be cool to find out when the font is resized?
  • 101. You can detect the font size in several ways:
  • 102. Include an element with a known size in ems and read its offsetHeight and offsetWidth in an interval...
  • 103. ...or use an iframe with em sizing off-screen and subscribe to its resize event.
  • 104. Or use the YUI container module anywhere on your page... :)
  • 105. 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!') } ); });
  • 106. 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!') } ); });
  • 107. This works with one feature of YUI event that is very close to my heart: Custom Events.
  • 108. Custom Events allow you to notify an unknown amount of listeners about what is happening...
  • 109. ... sending information not necessarily accessible to them when it happens.
  • 110. Every single YUI component has a lot of Custom Events you can subscribe to.
  • 112. Say for example you want to make sure to securely chain animation sequences...
  • 113. //This is the first animation; this one will //fire when the button is clicked. var move = new YAHOO.util.Anim(quot;animatorquot;, { 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( quot;animatorquot;, { backgroundColor: {from:quot;#003366quot;, to:quot;#ff0000quot;} }, 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(); });
  • 114. //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(quot;startAnimquot;); start.subscribe(quot;clickquot;, function() { //reset the color value to the start so that //the animation can be run multiple times: YAHOO.util.Dom.setStyle(quot;animatorquot;, quot;backgroundColorquot;, quot;#003366quot;); move.animate(); });
  • 115. //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(quot;changeColor animation is starting.quot;, quot;infoquot;, quot;examplequot;); }); changeColor.onTween.subscribe(function(s, o) { YAHOO.log(quot;changeColor onTween firing with these arguments: quot; + YAHOO.lang.dump(o), quot;infoquot;, quot;examplequot;); }); changeColor.onComplete.subscribe(function(s, o) { YAHOO.log(quot;changeColor onComplete firing with these arguments: quot; + YAHOO.lang.dump(o), quot;infoquot;, quot;examplequot;); });
  • 116. Knowing when something happens and being able to react to it is much safer than assuming it worked.
  • 118. This is why YUI comes with a lot of tools to gain knowledge about what is happening under the hood of your application.
  • 119. YUI Logger gives you a cross- browser console to show values.
  • 122. All YUI components come as a debug version which log everything that is going on to the logger.
  • 123. You can even include the logger on the fly with a bookmarklet.
  • 125. If you need even more control, there is the YUI profiler. http://developer.yahoo.com/yui/profiler/
  • 127. And the YUI test framework for test driven development. http://developer.yahoo.com/yui/yuitest/
  • 128. On a code level, YUI comes out-of-the-box with namespacing.
  • 129. Which – if used correctly – keeps large amounts of code readable and maintainable.
  • 130. YAHOO.lang also comes with a lot of validation methods to ensure things are what they are.
  • 131. So how is YUI good for professional and easy development?
  • 132. Built on agreed standards Separated into modules each dealing with one task Constant reporting of what is going on Own Debugging environment
  • 133. Here’s another small thing I prepared earlier:
  • 135. Using Event and Dom I can control the visible part:
  • 136. 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'); };
  • 138. What does the future hold?
  • 141. Include on demand Multiple sandboxed instances in a page Modularity on CSS level (per element reset) Every event is a custom event
  • 142. THANKS! Christian Heilmann http://wait-till-i.com | http://scriptingenabled.org http://twitter.com/codepo8