Yahoo! User Interface Blog (YUIBlog)

Online YUI 3 Introductory Course Fri, Jan 21st

Next Monday Friday I will be hosting an online YUI 3: Intro course for anyone that wants to attend.

This is the same course that has been taught within Yahoo! for about a year now, and the same one presented at YUIConf last November. It covers these topics:

• Basic DHTML – DOM traversal and modification and subscribing to events
• Ajax using Y.io
• Class API patterns – Instantiation, configuration, and event subscriptions for widgets and utilities
• YUI sandbox – API and environment set up and loading strategies

There are exercises throughout the material to get your hands in the YUI habit as well as your brains.

The 3.5 hour course will run from 9:30am until 1pm PST next Monday, Jan 17th Friday, Jan 21st. Connection info is:

1. Dial in to 1-888-371-8922 (Skype is great for non-US participants)
2. Enter the attendee code 4718 8953#
3. Join the screen sharing session (this will prompt you to install the Adobe Connect plugin if this is your first time using it)

I know it’s short notice, but you can blame that on Rey Bango. So if you missed the intro course at YUIConf or you just want a thorough, hands on, getting started with YUI 3 training, come on over and bring a friend!

UPDATE: Moved from Monday the 17th to Friday the 21st

I forgot that Monday is a holiday (Martin Luther King, Jr. Day), so I’m moving the course to Friday the 21st. I can use the extra time to work out the logistics of recording it for posterity. If you have any recommendations on the best way to record a 3.5hr presentation, I’d love to hear it!

UPDATE: Recording available

The full recording, course content, and slides are available for download (250M)

The zip contains OSX filesystem cruft, the audio is spotty, and there’s plenty of room for improvement, but hey, it’s out there!

Find conversations: bloglines | technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

Announcing YUI 3.3.0

The YUI Team is pleased to announce the general availability of YUI 3.3.0, the latest release in our JavaScript and CSS library. If you use Yahoo’s CDN, you can upgrade by switching your seed file to YUI 3.3.0; you can also download the 3.3.0 distribution from YUILibrary.com.

Some things to look for in this release:

• Firefox 4, IE9, and Android 2.2 support — With YUI 3.3.0, we’ve tested extensively against the latest betas of the forthcoming Firefox 4 and IE9 releases to ensure the smoothest possible transition when those browsers hit GA. This is also the first release during which we’ve treated WebKit on Android as an A-Grade browser; you should see much improved support for Android throughout the library.
• Node sugar: Matt Sweeney landed some additional sugar methods in 3.3.0, including show and hide methods to toggle the display of a Node or NodeList, wrap and unwrap to add and remove a parentNode, and empty to remove all childNodes. The new node-load submodule adds a load method to Node, providing a convenient IO wrapper.
• AutoComplete widget (beta) — Ryan Grove’s YUI 3 AutoComplete widget, new in 3.3.0, provides a flexible, configurable, and accessible AutoComplete implementation. It includes options for custom filtering, highlighting, and formatting of results; delimited queries; result retrieval from a variety of local and remote sources such as YQL, JSONP, and XHR; and is built to be modular and easy to extend. As a companion to AutoComplete, Ryan’s node-tokeninput Gallery module makes it easy to turn any input element into a tokenized input field similar to the NSTokenField Cocoa widget in Mac OS X.
• Charts — Tripp Bridges has rewritten Charts from the ground up over the past six months. YUI 3 Charts provides a JavaScript API for creating charts from a set of data. Charts uses a combination of SVG, HTML Canvas and VML to facilitate the creation of different variations and combinations of line, marker, area, spline, column, bar and pie charts. As of this release, YUI 3 Charts includes the following features:
  • Stacked axes and series
  • Multiple value axes
  • Customizable graphics and text
  • Customizable default tooltip

  

• DataTable widget (beta) — Jenny Donnelly and Tilo Mitra landed the beginnings of the new YUI 3 DataTable widget in 3.3.0. This new widget begins to implement the extensive functional footprint of the YUI 2 version while using YUI 3′s much more modular structure. Hence, you’ll find features like scrolling and sorting broken out as plugins or extensions, allowing you to load only the code you need for your implementation. If you’re interested in this component, don’t miss Tilo’s introduction to YUI 3 DataTable from YUIConf 2010.
  
• Dial widget (beta) — Jeff Conniff’s new Dial widget is a circular value input control. It’s similar to a real-world, analog volume control dial, but it allows larger value ranges and finer granularity. Use Dial instead of Slider where you need to control a larger range, and where you need finer control. For example, you might need to tune in a radio station in the frequency range of 500-1500 kHz, but need the granularity to accurately select 560.2 kHz — an operation that requires about 10,000 discrete values. Dial is a compact UI that provides that level of granularity. There are other cases when the Dial’s radial form factor better suits your design, such as when rotating objects, selecting angles, or representing real world controls that people are accustomed to seeing in dial format. It is especially effective when used to help the user see the effect of the value in real-time. The Dial also has the benefit of fine motor control leverage. The farther out from the center of the Dial the user pulls the handle, the more precise the control.
  
• Resize utility (beta) — Provided by Eduardo Lundgren of Liferay, this is the first component to move from the excellent AlloyUI suite into the core YUI 3 distribution. Eduardo has focused on making the component more modular, separating most functional groups into separate plugins. The new component is organized as follows:
  • Y.Resize: Base Class. The Resize Utility allows you to make an HTML element resizable, supporting eight handle positions and wrapped elements (Y.Resize will wrap the element, calculate adjustments for borders/padding and offset the handles for you).
  • Y.ResizeConstrained: Sometimes a user may want to preserve the object’s aspect ratio, limit the resize operation to to a region, or set max and min dimensions. The Y.ResizeConstrained plugin provides those options for you.
  • Y.Plugin.ResizeProxy: When using this plugin, the Resize utility will create a “proxy” element to resize instead of resizing the actual element. This should be used when you are resizing a complex element.

  (You can meet Eduardo and fellow AlloyUI author Nate Cavanaugh in this AlloyUI whirlwind tour shot at YUIConf 2010.)

Up next will be 3.4.0, which we expect to release in Q2. Current plans for that release include further enhancements for mobile (see my talk from YUIConf for more on our philosophy regarding mobile support), Anthony Pipkin’s work on Button and Toolbar controls (which we hope to bundle with YUI 3′s Editor for a complete rich text editor component), and Gonzalo Cordero’s TreeView component. We’ll be looking for your feedback on these priorities; stay tuned to YUIBlog for a special upcoming Open Hours developer session to talk about the YUI 3 roadmap for 3.4.0 and beyond.

Enjoy 3.3.0 — we look forward to hearing your feedback on Freenode’s #yui channel or in the YUI Forums.

Find conversations: bloglines | technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

YUI Theater 2010 Retrospective on NetTuts.com

NetTuts.com is featuring an in-depth thematic review of YUI Theater’s 2010 videos — a year in which we explored many of the most crucial themes in the world of frontend engineering.

Find conversations: bloglines | technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!