SWiK
» tagged pages
» logout

sorted by: recent | see : popular
Content Tagged with yahoo! + front

YUI 2.6.0 Released: Carousels, Paginators, and lots of examples

Nate Koechley has announced YUI 2.6.0 final:

2.6.0 introduces a new Carousel Control, offers the Paginator Control for general use (it was previously bundled with DataTable), includes more than 450 total fixes, enhancements and optimizations, graduates eight components out of “beta,” and now ships with more than 290 functional examples.

To go along with the carousel and paginator controls, you will also find details on updates too: TreeView, Calendar, Rich Text Editor, Drag & Drop, Uploader, DataTable, AutoComplete, and Container.

With Christian around, you can be sure that accessibility is taken seriously, and we see improvements there:

We’ve continued to work hard to make YUI accessible. The Carousel, Button, Menu, TabView, and Container all have enhanced accessibility support in addition to what’s otherwise noted in this blog post. We continue to count accessibility amongst our highest priorities; stay tuned for a few more blog posts on the topic in the coming days and weeks.

Ajax: Ajaxian

Improving Accessibility with Ajax/Javascript - Christian Heilmann, @Media Ajax

Blogging from @media Ajax. Christian Heilman is talking about the interaction of Ajax/Javascript and accessibility.

BTW Christian's arranging an accessibility event, including a hack day, this Friday/Saturday in London - Scrpting Enabled. Tickets are free, but booking is required.

Legislation is not the (only) answer. Smart developers can find ways to work with the technology to improve experiences. He's covering various examples of using the technology to improve accessibility. For example, Flash is evil for accessibility, right? But not if you're building a chatroom where deaf users can see and sign to each other using video. Pragmatism!

His blog post includes a link to the presentation and a summary of sites he mentions:

Ajax: Ajaxian

Awesome Time Waster: YUI Pacman!

Okay I'd like to know how many of the Ajaxian readers are actually old enough to remember real arcade games which required endless amounts of quarters to become good. Yeah, those were the days when calluses on your thumbs were the norm and being able to "hold it" (ie: not go to the bathroom for long periods of time) was a HUGE advantage.

Via the YUI Blog, Kris Cieslak has re-created the arcarde hit Pacman using the YUI JavaScript library:

Warning! Ghosts are very smart, they are spending most of the time trying to find where are you hiding and when they finally finds you, they run away :)
(one of the A.I. bug!)

Smart is an understatement! Either my fingers are super slow or these ghosts are just too darn good!


Go check it out and have some fun!

Ajax: Ajaxian

YUI 3: The goals are lighter, faster, consistent, power, secure

YUI 3 has a preview release for us to check out.

The goals are:

  • lighter (less K-weight on the wire and on the page for most uses)
  • faster (fewer http requests, less code to write and compile, more efficient code)
  • more consistent (common naming, event signatures, and widget APIs throughout the library)
  • more powerful (do more with less implementation code)
  • more securable (safer and easier to expose to multiple developers working in the same environment; easier to run under systems like Caja or ADsafe)

What's New

  • Sandboxing: Each YUI instance on the page can be self-contained, protected and limited (YUI().use()). This segregates it from other YUI instances, tailors the functionality to your specific needs, and lets different versions of YUI play nicely together.
  • Modularity: YUI 3 is architected to use smaller modular pieces, giving you fine-grained control over what functionality you put on the page. If you simply want to make something draggable, you can include the dd-drag submodule, which is a small subset of the Drag & Drop Utility.
  • Self-completing: As long as the basic YUI seed file is in place, you can make use of any functionality in the library. Tell YUI what modules you want to use, tie that to your implementation code, and YUI will bring in all necessary dependencies in a single HTTP request before executing your code.
  • Selectors: Elements are targeted using intuitive CSS selector idioms, making it easy to grab an element or a group of elements whenever you’re performing an operation.
  • Custom Events++: Custom Events are even more powerful in YUI 3.0, with support for bubbling, stopping propagation, assigning/preventing default behaviors, and more. In fact, the Custom Event engine provides a common interface for DOM and API events in YUI 3.0, creating a consistent idiom for all kinds of event-driven work.
  • Nodes and NodeLists: Element references in YUI 3.0 are mediated by Node and NodeList facades. Not only does this make implementation code more expressive (Y.Node.get("#main ul li").addClass("foo");), it makes it easier to normalize differences in browser behavior (Y.Node.get("#promo").setStyle("opacity", .5);).
  • Chaining: We’ve paid attention throughout the new architecture to the return values of methods and constructors, allowing for a more compressed chaining syntax in implementation code.

Some example snippets

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. // Creates a YUI instance with the node module (and any dependencies) and adds the class "enabled" to the element with the id of "demo".
  3. YUI().use('node', function(Y) {
  4.     Y.get('#demo').addClass('enabled');
  5. });
  6.  
  7. // Creates an instance of YUI with basic drag functionality (a subset of the dd module), and makes the element with the id of "demo" draggable.
  8. YUI().use('dd-drag', function(Y) {
  9.         var dd = new Y.DD.Drag({
  10.         node: '#demo'
  11.     });
  12. });
  13.  
  14. // Adds the class "enabled" to the all elements with the className "demo".
  15. Y.all('.demo').addClass('enabled');
  16.  
  17. // Sets the title attribute of all elements with the className "demo" and removes the class "disabled" from each.
  18. Y.all('.demo').set('title', 'Ready!').removeClass('disabled');
  19.  
  20. // Adds the Drag plugin to the element with the id "demo", and enables all of its h2 children drag as handles.
  21. Y.get('#demo').plug(Y.Plugin.Drag, {
  22.     handles: 'h2'
  23. });
  24.  
  25. // Attaches a DOM event listener to all anchor elements that are children of the element with the id "demo". The event handler prevents the anchor from navigating and then sets a value for the innerHTML of the first em element of the clicked anchor.
  26. Y.on('click', function(e) {
  27.     e.preventDefault();
  28.     e.target.query('em').set('innerHTML', 'clicked');
  29. }, '#demo a');
  30.  

Very exciting stuff to the team. I look forward to seeing a full up code repository too!

Ajax: Ajaxian

YPulse: Fades and Pulsations Library

Kent Johnson has released YPulse a simple open source wrapper for the YUI Animation library that makes creating highlight fades and pulsing button glows a bit easier.

You pulse away with something like:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. var pulser = new YAHOO.squarebits.YPulse(
  3.   ‘my-div’,
  4.   ‘backgroundColor’,
  5.   ‘#FFFFFF’, // starting
  6.   ‘#FFFF00′, // ending
  7.   0.75, // The number of seconds for the start-end transition
  8.   0.10, // The number of seconds to wait after completing the start-end transition
  9.   0.75, // The number of seconds for the end-start transition
  10.   0.75, // The number of seconds to wait after completing the end-start transition
  11.   YAHOO.util.Easing.easeBoth, // The YAHOO easing method to use for the start-end transition
  12.   YAHOO.util.Easing.easeBoth // The YAHOO easing method to use for the end-start transition
  13. );
  14.  

Ajax: Ajaxian

Ojay 0.2: easy keyboarding, a validation DSL, and two new UI widgets

James Coglan has updated Ojay, the chaining wrapper for YUI that we posted on a few months back.

The new release features really simple keyboard and form scripting and couple of new UI widgets, a new event system and a stack of other improvements:

Ojay.Forms. By far the biggest new package, Ojay.Forms sorts out a real pain point for me in terms of app development. It does two things: it provides unobtrusive replacements for the YAHOO.widget.Button family of classes, and it provides a DSL for handling form validation and Ajax submission.

Ojay.Keyboard. The new keyboard package is an abstraction over YAHOO.util.KeyListener that lets you say what mean without worrying about character codes, for example:

Ojay.Keyboard.listen(document, 'ALT SHIFT S', function() {
    // handle key press
});

It lets you group sets of keyboard commands together so you can make context-sensitive keyboard controls, and gives you easy access to enable/disable key events and their default browser responses. Not much more to say except that you should check out the documentation.

We have two new UI packages, Ojay.Overlay and Ojay.Paginator. Overlay gives you a bunch of classes for positioning content on top of the document, producing lightbox effects and the like, and Paginator implements the content slider effect that’s got a lot of attention recently, including the ability to lazy-load pages of content via Ajax, and easy integration with Ojay.History. Both packages come with a collection of events to allow your code to react to changes to the components, just like you would for DOM elements.

Speaking of events, this release introduces Ojay.Observable, a JS.Class module that allows any class to support the on() method used for listening to events. This module underlies the custom events published by all the Ojay components. More information and examples are in the documentation.

Ajax: Ajaxian

YUI Autogrid: Correctly resize the grids

Our own Christian Heilmann has created a new JavaScript library Autogrid that marries YUI Grids, the base CSS library, to allow for smart resizing:

I love YUI Grids. I know my CSS and I know how to work around diff erent problems of browsers, but I am also very much bored about having to fix and test and create these workarounds over and over again. While YUI Grids might not be perfect for all cases of web development out there, I am happy to take a pragmatic approach and just create sites that can be done with them (now you also know why I am not a designer).

One problem I keep having when I put some YUI Grids-based sites live is that people complain about me expecting a certain screen resolution or viewport size. YUI grids can either be 100% wide, which can be pretty silly on high resolutions, or optimized for resolutions of either 800×600 or 1024×768. When you optimize for 800 pixels people on higher resolutions will complain about the length of the page and when you go for 1024 people will say they have to scroll to see your side-bar on 800×600. You can’t win.

Or can you? CSS is not dynamic — it has a fixed state and you can only hope that the browser does the right thing with what you give it (well, there are conditional comments for IE, but technically they are HTML, and of course there are media queries in CSS3 and other goodies, but for the sake of the argument let’s say supporting IE6 is a base). JavaScript, on the other hand, is very dynamic and you can read out and check what is happening to the browser currently in use and react to it.

Putting this feature of JavaScript to good use you can create a YUI-Grids-based layout that remains flexible and changes according to needs. All you need to do is use some YUI Dom magic and change IDs and classes accordingly.

Christian has a demonstration page, and the full code:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. YAHOO.example.autoGrid = function(){
  3.   var container = YAHOO.util.Dom.get('doc') ||
  4.                   YAHOO.util.Dom.get('doc2') ||
  5.                   YAHOO.util.Dom.get('doc4') ||
  6.                   YAHOO.util.Dom.get('doc3') ||
  7.                   YAHOO.util.Dom.get('doc-custom');
  8.   if(container){
  9.     var sidebar = null;
  10.     var classes = container.className;
  11.     if(classes.match(/yui-t[1-3]|yui-left/)){
  12.        var sidebar = 'left';
  13.     }
  14.     if(classes.match(/yui-t[4-6]|yui-right/)){
  15.        var sidebar = 'right';
  16.     }
  17.     function switchGrid(){
  18.       var currentWidth = YAHOO.util.Dom.getViewportWidth();
  19.       if(currentWidth> 950){
  20.         container.id = 'doc2';
  21.         if(sidebar){
  22.           container.className = sidebar === 'left' ? 'yui-t3' : 'yui-t6';
  23.         }
  24.       }
  25.       if(currentWidth <950){
  26.         container.id = 'doc';
  27.         if(sidebar){
  28.           container.className = sidebar === 'left' ? 'yui-t2' : 'yui-t5';
  29.         }
  30.       }
  31.       if(currentWidth <760){
  32.         container.id = 'doc3';
  33.         if(sidebar){
  34.           container.className = sidebar === 'left' ? 'yui-t1' : 'yui-t4';
  35.         }
  36.       }
  37.       if(currentWidth <600){
  38.         container.id = 'doc3';
  39.         container.className = '';
  40.       }
  41.     };
  42.     switchGrid();
  43.     /*
  44.       Throttle by Nicholas Zakas to work around MSIE's resize nasties.
  45.       http://www.nczonline.net/blog/2007/11/30/the_throttle_function
  46.     */
  47.     function throttle(method, scope) {
  48.       clearTimeout(method._tId);
  49.         method._tId= setTimeout(function(){
  50.         method.call(scope);
  51.       }, 100);
  52.     };
  53.     YAHOO.util.Event.on(window,'resize',function(){
  54.       throttle(YAHOO.example.autoGrid.switch,window);
  55.     });
  56.  
  57.   };
  58.   return {
  59.     switch:switchGrid
  60.   };
  61. }();
  62.  

We continue to see JavaScript libraries working with CSS to great effect.

Ajax: Ajaxian

YSlow now has Firefox 3 support

Keeping in the performance vein, YSlow put a new version out in time for Firefox 3.

The new version includes:

  • Firefox 3 and Firebug 1.2 beta support
  • improved and simplified check for javascript minification
  • different coloring for inline vs. external CSS and JS ("All CSS" and "All JS" features)
  • clickable list of resources as a Table of Contents ("All CSS" and "All JS" features)
  • improved colors and presentation in the "legend" of component pies under Stats
  • fixed a bug where the same hostname with different port number was counted as a separate DNS lookup
  • misc bugfixes and style tweaks

Ajax: Ajaxian

Yahoo! Design Stencil Kit 1.0

The folks at Y!DN have released Yahoo! Design Stencil Kit 1.0, which contains a full set of stencils that cover Web components in various states including:

  • Ad Units
  • Calendars
  • Carousels
  • Charts and Tables
  • UI Controls
  • Form Elements
  • Grids
  • Menus and Buttons
  • Mobile - General
  • Mobile - iPhone
  • Navigation and Pagination
  • OS Elements
  • Placeholder Text
  • Screen Resolutions
  • Tabs
  • Windows and Containers

Whip out Omnigraffle or your tool of choice and get going :)

You can download the artifacts in various formats: OmniGraffle,
Visio (XML),
PDF,
PNG,
SVG.

Ajax: Ajaxian

Hacking BrowserPlus to work locally

One of the details of Yahoo! BrowserPlus that people picked up on was the fact that it only runs against Yahoo! properties.

However, some folks have hacked that restriction so they can play with it locally, and assume that Yahoo! wouldn't like this.

Skylar Woodward of Yahoo! has posted that this isn't the case at all:

BrowserPlus was more-or-less designed to be hacked. Not hacked in the “I want to steal innocent users data and delete their files” sort of way, but in a manner that allows experimentation and freedom without compromising the security of pedestrian users. There’s more there to be mined, but enabling local development is a good place to start.

And goes on to show how you can get rid of the restriction:

Currently, BrowserPlus is restricted to Yahoo! sites; that includes restrictions for running local files. A simple addition to our test file exposes the error:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. else {greeting = "BrowserPlus is hiding. ("+res.verboseError+")";}
  3.  

The error BP_EC_UNAPPROVED_DOMAIN confirms the local domain (file://) isn’t permitted. That means it’s time to dig into the BP configuration files. On Mac these are in

/Users/[you]/Library/Application Support/Yahoo!/BrowserPlus/

On Windows XP, you’ll find them in something akin to

c:\\Documents And Settings\[you]\Local Settings\Application Data\Yahoo!\BrowserPlus\

and on Windows Vista…

c:\Users\[you]\AppData\Local\Yahoo!\BrowserPlus\

In the Permissions folder is a file similarly named which is what we’re looking for. Opening it up we see:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. "whitelist" : [
  3.         "^http(s?)://(.*)\\.yahoo\\.com$",
  4.         "^http(s?)://(.*)\\.yahoo\\.com:[0-9]+$"
  5.     ],
  6.  

The intuitive addition to this list is:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. "whitelist" : [
  3.         "^http(s?)://(.*)\\.yahoo\\.com$",
  4.         "^http(s?)://(.*)\\.yahoo\\.com:[0-9]+$",
  5.         "^file://$"
  6.     ],
  7.  

The file is modified, but BrowserPlus hasn’t picked up the changes yet. The clean way to force this is to close all open browser windows. (BrowserPlus shuts down when no pages are using it.) The dirty way to do this is to search for BrowserPlusCore in your process list and kill it using your favorite platform-available tool. Either way, after opening test.html back up we should see our “Hello World.” Sweet - now we’re ready to start playing.

There is one final catch. BrowserPlus is fairly proactive about security so it helps to know that the permissions file will be overwritten on a regular basis. The savvy way around this would be a simple build script or at least a handy copy of our modified permissions file that we can use to reapply the changes in between development sessions. We might also test for BP_EC_UNAPPROVED_DOMAIN somewhere in our init callback to scream if the temporary development environment is disrupted.

Ajax: Ajaxian

YUI 2.5.2 Released, Big Focus on Firefox 3 and Opera 9.5 Support

With the releases of FireFox 3 and Opera 9.5 right around the corner, it's great to see the Yahoo UI team being extremely proactive in ensuring strong compatibility with the browsers in their newest release, YUI 2.5.2. Announced yesterday, YUI v2.5.2 fixes a number of bugs but focuses heavily on support for the newest browser offerings from Mozilla and Opera. The updates include:

  • Extensive testing against Opera 9.5b2 and Firefox 3.0RC1 and both will be A-Grade browsers upon final release.
  • Major bug fixes to DataTable, Menu, Rich Text Editor and Button
  • The Rich Text Editor and DataSource components of the library have been updated for better Adobe AIR support.
  • The experimental Charts Control is upgraded for 2.5.2 with support for integral legends and for three new series styles.
  • The ActionScript source for components that use Flash (Charts and Uploader) is now available as part of the download for developers who want to dig more deeply into these components.

Full release notes for YUI v2.5.2 can be found at the Yahoo! User Interface Library Group and is immediately available via download or Yahoo!’s free edge-hosting service.

Ajax: Ajaxian

Yahoo! BrowserPlus: Sneak Peak

Yahoo! has released a sneak peak into Yahoo! BrowserPlus which came out today as

A platform for extending the Web: an end-user installs it and a developer uses its features through a small JavaScript library. Some of the features that exist in the platform today include:

  • Drag-and-drop from the desktop
  • Client-side image manipulation (cropping, rotation & filters)
  • Desktop notifications

You can head over to the main BrowserPlus landing page to learn more about the services.

Here they also show using a text to speech service via:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. // the "service specification" that we'll activate 
  3. var ttsService = { 
  4.   service: "TextToSpeech",   
  5.   version: "1",   
  6.   minversion: "1.0.2"   
  7. }; 
  8.    
  9. // check for the presence of TextToSpeech, and dump results in the 
  10. // specified div 
  11. function checkForTextToSpeech(divName) { 
  12.   YAHOO.bp.isServiceActivated( 
  13.     ttsService, 
  14.     function() { 
  15.       var _divName = divName; 
  16.       return function(haveIt) { 
  17.         var d = document.getElementById(_divName); 
  18.         d.innerHTML = haveIt;             
  19.       }; 
  20.     }()); 
  21. }
  22.  
  23. YAHOO.bp.init(function(res) { 
  24.   if (res.success) { 
  25.     checkForTextToSpeech("before"); 
  26.     YAHOO.bp.require({services: [ ttsService ]}, 
  27.                      function(r) { 
  28.                        checkForTextToSpeech("after"); 
  29.                        if (r.success) { 
  30.                          YAHOO.bp.TextToSpeech.Say( 
  31.                            { utterance: "text to speech is activated" }, 
  32.                            function() {} ); 
  33.                        } 
  34.                      }); 
  35.   } 
  36. });
  37.  

They also have a nice demo of combining drag and drop of images, and cropping them.

Great to see Yahoo! join the party of extending the Web!

Ajax: Ajaxian

Scrolling Tab View for YUI

Reid Burke has started a project called yodeler which sets out to create a new set of extensions for YUI. His most recent extension is a tab view which allows the content of each tab to scroll horizontally or vertically:

My first offering is an extension of YAHOO.widget.TabView that uses a scroll animation to transition between tab content.
It works just like TabView, except you must specify a width and height for the parent container in the attributes. All styling is done automatically!

ScrollTabView.js is released under a BSD License and is available for download via Reid's SVN repository

Ajax: Ajaxian

Ajaxian Featured Tutorial: Writing Your First YUI Application

Eric Miraglia has posted a great tutorial on how to build your first YUI application. He runs you through the steps of creating a simple application that leverages YUI's AutoComplete Control to create a site-search form powered by the Yahoo!'s Search web service.

The tutorial is a great walkthrough of both how to build the application and also leverage YUI's extensive documentation. It also touches on some great points such as:

  • How to configure a YUI implementation and put YUI on the page
  • How to set up the markup for a progressively-enhanced YUI widget
  • How to instantiate and configure a YUI widget
  • How to subscribe to and make use of the "custom evens" provided by a YUI widget
  • And how to override default behavior to get a bespoke implementation that maps to our requirements.

Ajax: Ajaxian

Reminded of speaking your YAHOO.lang

Mitchell Amihod has a nice little post talking about the features in YAHOO.lang which is probably the least mentioned part of YUI.

He starts out with the type checking functions such as like isNull(), isUndefined(), isValue(); then he does for a trim().

Did you know that YUI had a mini template language in the form of substitute?

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. // simple
  3. YAHOO.lang.substitute('Hello {world}', {'world':'earth'});
  4.  
  5. // process
  6. var processText = function(key, value, extraInfo) {
  7.   if(!YAHOO.lang.isNull(extraInfo)) {
  8.     return extraInfo;
  9.   }
  10.   return value.toUpperCase();
  11. };
  12. YAHOO.lang.substitute('Hello {world Venus, Jupiter}', {'world':'earth'}, processText);
  13.  

No DHTML library would go without wrapping the setInterval/Timeout calls:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. var foo = {
  3.   count :0,
  4.   'method' : function(data) {
  5.     this.count++;
  6.     if(this.count == 10) {
  7.       timer.cancel();
  8.     }
  9.     console.log(this.count);
  10.   }