• Home
  • Quick Start
    • Configurator
    • Download YUI 3
  • Documentation
    • User Guides
    • Examples
    • Tutorials
    • API Docs
  • Community
    • Gallery
    • Blog
    • Forums
    • YUI Theater
    • Calendar
  • Contribute
    • YUI on GitHub »
    • File a Ticket
    • View Tickets
    • Dashboard
  • Other Projects
    • YUI 2
    • YUI Compressor
    • YUI Doc »
    • YUI Builder
    • YUI PHP Loader
    • YUI Test
    • YUI Website

Blog: Archive for June, 2006

Full Service: The Yahoo Developer Network and the Yahoo User Interface Library (book excerpt)

Download the free sample chapter of Christian Heilmann's new book on DOM scripting and AJAX.
All of us at Yahoo! were excited this spring when long-time web developer and blogger Christian Heilmann joined our increasingly deep and talented frontend engineering team in London. Christian had been working for etoys, had been involved in the development of dozens of high-profile sites (including VisitBritain.com), and is the author of the well-regarded web-developer site ICant.co.uk.

Christian had also been working on a new book, Beginning JavaScript with Dom Scripting and Ajax, From Novice to Professional, which is now coming off the presses and is soon to appear in book stores. In Chapter 11 of the new book, Christian explores the YUI Library from an implementer’s perspective and steps through a variety of code solutions using library components. We asked if we could share a free preview of the YUI section of the book here, and happily the editor at APress agreed.

  • Download Full Service: The Yahoo Developer Network and the Yahoo User Interface Library (PDF, 4.5MB), from Chapter 11 of Beginning JavaScript with Dom Scripting and Ajax, From Novice to Professional.
  • Visit the book’s website, where you can download the code samples.

Thanks to Christian and to Chris Mills, editor at APress, for allowing us to post the excerpt.

By Eric MiragliaJune 27th, 2006

Cheat Sheets for the YUI Utilities

Cheat Sheets are provided for each of the YUI Utilities.Comprehensive documentation for the YUI Library is found online at the YUI section of the Yahoo! Developer Connection website.

To supplement this online documentation, the YUI development team has begun drafting some cheat sheets — inspired by the handy references published by addedbytes.com (nee ilovejackdaniels), among others — that give you a one-page dashboard of documentation for each of the library’s components. When you find yourself elbow-deep in a coding problem, sometimes it’s quicker to turn to these rather than firing up a browser to review documentation and examples. Moreover, reviewing the cheat sheets can help you discover hidden gems you didn’t know were there. If you’re wondering, for example, what the syntax is for batching a function on an element collection, the Dom Collection’s cheat sheet might be enough to get you started:

One-page reference for the Dom Collection

These one-page references aren’t comprehensive, but we think you’ll find them valuable to have on hand. Today, draft references for each of the YUI Utility components (Event Utility, Dom Collection, Connection Manager, Drag and Drop, and Animation) are available:

  • Download the references in PDF format
  • Visit the YUI Library page on the Yahoo! Developer Network

Update 2006/08/03: I’ve updated the links here to point to the download area on the Yahoo Developer Network rather than at the YUI v.0.10 cheat sheet zip file. Since this post was made, YUI has incremented to 0.11 and a bunch of new cheat sheets have been added. The latest zip file should always be available from this location on YDN. -EM

By Eric MiragliaJune 2nd, 2006

Global Domination

JavaScript, as realized in browsers, is a load-and-go programming language. Programs are delivered to the execution site as text. This is a good fit for the web, which is at its root a text delivery system. The program text is eval‘d, which compiles it into an executable form and then immediately executes it. That execution can leave artifacts in the window’s global object.

The global object is the global namespace that holds the top level functions and global variables. Variables which are not explicitly defined are implied global variables, and their names are also kept in the global object. This was a convenience for the little scripts that Navigator 2 was expected to support. In the decade since NS2, those little scripts have grown into Ajax applications, and the true nature of the global object is revealed:

Global variables are evil.

Global variables are a source of unreliability and insecurity. Fortunately, JavaScript includes tools for allowing us to drastically minimize our use of globals, which makes our programs more robust. This becomes increasingly important as our programs get bigger, and as we mix in and mash up program components from multiple authors. Reducing our dependency on globals increases the likelihood that collisions are avoided and that the program components work harmoniously.

An objective measure of the quality of a JavaScript program is How many global variables and global functions does it have? A large number is bad because the chance of bad interactions with other programs goes up. Ideally, an application, library, component, or widget defines only a single global variable. That variable should be an object which contains and is the root namespace for all of your stuff.

Yahoo’s single global is YAHOO. It is spelled in all caps to identify it as something special, since all lower case is ordinary and initial caps indicates a constructor. Being in all caps, it is unlikely that someone would use it accidentally, which further reduces the likelihood of collision.

Yahoo is the world’s biggest website. Eventually, all of Yahoo’s JavaScript and browser webstate will be accessible through the YAHOO object.

But this technique also works well with the smallest library or widget. It is a clean, efficient way of organizing your program’s resources. The performance hit in having to access through a single global is negligible. JavaScript is very good at resolving such expressions. It is more than offset by the self-documentation and reliability benefits.

Generally a shallow tree is better than a deep tree. One could imagine that YAHOO.util.Dom.get could have been factored more compactly perhaps as YAHOO.get. And perhaps someday it will, but for now YAHOO.util.Dom.get is not measurably slower, and it is helping Yahoo to manage its evolving codebase. (And if you don’t like the length, you only have to type it once. See with Statement Considered Harmful.)

By Douglas CrockfordJune 1st, 2006

Pages

  • About
  • Contribute
  • YUI Jobs

Recent Posts

  • YUI Weekly for May 17th, 2013
  • Yahoo’s International Team Is Hiring!
  • YUICompressor 2.4.8 Released
  • YUI 3.10.1 Released to Fix SWF Vulnerability
  • YUI Weekly for May 10th, 2013

Archives

Categories

  • Accessibility (25)
  • CSS 101 (6)
  • Design (51)
  • Development (590)
  • Frontend Jobs at Yahoo (13)
  • Graded Browser Support (8)
  • In the Wild (63)
  • Miscellany (11)
  • Open Hours (44)
  • Performance (23)
  • Releases (26)
  • Target Environments (11)
  • Yeti (4)
  • YUI 3 Gallery (29)
  • YUI Events (45)
  • YUI Implementations (55)
  • YUI Theater (146)
  • YUI Weekly (37)

Meta

  • Log in
  • Entries RSS
  • Comments RSS
  • WordPress.org
© 2013 YUI Blog