Yahoo! User Interface Blog

In the Wild for June 29, 2009

The big news from the YUI team last week was the release of YUI 3.0.0 beta 1, moving YUI 3 one important step closer to GA. What follows is some of the other news coming from the YUI community over the past few weeks. As always, please use the comments section to let us know what we’ve missed.

• Timr — a New Timetracking Web-app with Significant YUI Elements: Thomas Einwaller wrote in to tell us about Timr, a new time-tracking web application with a slick, rich, YUI-intensive interface including Panels, DataTables and much more. If your job requires you to track time-on-tasks, and you want a web-based system with support for mobile, check out Thomas’s project at Timr.com.
  
• How Happy is Dav? Harley-Davidson Using YUI: If you know YUI engineer Dav Glass, it will not surprise you to learn that he’s the one who discovered that YUI is in use on the Harley-Davidson website.  Check out their Harley-themed YUI AutoComplete in the main search box at the top of the page.
  
• Ara Pehlivanian on YUI 3 — New SitePoint Article: Ara, coauthor of a couple of excellent JS tomes, provides a nice introduction to YUI 3 and his take on why it might be of interest to developers.  His conclusion: “YUI 3 is a completely different animal than its predecessor. Along with a new syntax, you gain a faster, lighter, easier, and more flexible library—ready to take on your most ambitious web projects.”  Check out the full article for more.
  
• IBM DeveloperWorks: “Weaving a Better Web Page with YUI CSS”: From Martin Streicher, writing for IBM DeveloperWorks, who covers both Blueprint and YUI in this article: “YUI Grids provide CSS for both fixed-width pages and fluid-width pages, and it provides for arbitrarily deep nesting of columns. You can also position and move columns arbitrarily, so you can quickly and simply reorder the content on the page with CSS. For instance, you can move navigation from left to right with one CSS change. Further, you can augment YUI Grids with Yahoo’s own JavaScript library to add interactivity. You can read more about the YUI JavaScript library separately. This article focuses on Grids’ stylesheets, which can work independent of a JavaScript library.”  The article is free online and available as a PDF.
• Dav Glass’s “y’all Getter Done” T-shirts for YUI 3: File this one in the “just for fun” category… Dav, who is a YUI engineer by day, has branched off into t-shirt design with a YUI shirt available on Zazzle. Pictured is Dav wearing the shirt, which is a reference to Larry the Cable Guy and reads “y’all, getter done”.  Note that “redneck” is not an actual YUI 3 module, so this code won’t really run in a standard YUI 3 implementation.  But it’s funny nonetheless.
• Detecting if the User is Idle with JavaScript and YUI 3: From YUI contributor Nicholas C. Zakas: “Web developers have been interested in whether or not a user is idle since the Ajax explosion hit. With the introduction of more dynamic, highly interactive web interfaces came the desire to know if the user was actually doing anything at any point in time. Thus, the quest for determining if the user is idle began.”  Read on for full details on his blog. (Original source.)
• Cerberus Helpdesk 4.2 Using YUI Charts, TabView, and More: Cerberus Helpdesk is a CRM application offering both paid and free versions.  It’s UI features a variety of YUI components, from Panels to TabViews to reports enhanced by YUI Charts.
  
• Matt Snider on Using YUI EventProvider and Custom Events: Matt Snider, lead frontend on Mint.com and author of the upcoming YUI Storage Utility, blogs about Adam Moore’s YUI Event Utility components including Custom Events and EventProvider: “By using [the EventProvider] interface, developers no longer need to worry about whether or not a given CustomEvent exists when subscribing to it. Thereby, making coding easier, while allowing a developer the opportunity to not create CustomEvents that never fire. Additionally, EventProvider normalizes interactions with CustomEvents attached to objects, since the same methods will be attached to each object. Lastly, the events are bound to the augmented object, so although you might instantiate hundreds of EventProvider augmented object, each sharing an event named ‘update’, only the callback functions subscribed to the current object will execute when the ‘fireEvent’ function of that object is called. In summary, when using EventProvider the event names need only be unique on a single object, not across all objects (as with CustomEvent).” The full article is on Matt’s blog.
• Screencast of YUI DataTable Use on ResumeBucket: We mentioned ResumeBucket in a previous “In the Wild”, but they’ve posted a screencast that does a nice job of showing off Jenny Donnelly’s YUI DataTable in use in their messaging center.  Check out DataTable being used for user-managed tabular data here.
  (Original source.)
• Eric Ferraiuolo’s Facebook-style Overlay in YUI 3 & CSS 3: Writes Eric: “While wandering-around the Internet looking for examples of overlays in web application interfaces I thought of a challenge: create a working Facebook–styled overlay. I’m in the process of creating an application-wide design for overlays and needed some inspiration. Facebook uses overlays extensively and they have a distinct style [that others imitate, maybe even me  ]; I set-out to re-create this style.  Not wanting to mess around — I whipped up a working example of Facebook-styled overlays using only YUI 3 and CSS 3; things are nice and easy to do when you use the latest technologies.”  Check out his blog post for the full story. (Original source.)
  
• Dayshift’s Wrapper for YUI Charts: From the article: “If you use YUI Charts as suggested in many examples you’ll need configuration code for each individual chart which, if you have more than 2 or 3 charts on a page, can make your code appear cluttered. With the ChartsAjax class, all the chart options can be set with JSON data built dynamically on the server and retrieved from one AJAX call. This includes not only data for the datastore but also styling and column definitions.”  Check out the blogpost on Dayshift for the full example code.
• Using YUICompressor with Capistrano and Rails 2.3+: Tony Perrie wrote up some notes on using YUI with Capistrano and Rails; check out his tutorial here.

Find conversations: bloglines | technorati

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

In the Wild for May 26, 2009

Here’s a recap of news and notes from the YUI world in the past few weeks. Please use the comments below to let us know what we missed.

• Uizard – a Web Mashup Generator Written in YUI: Writes Ajaxian: “The Korean developer community is not that known to people in the west it seems. Language barriers make it hard to communicate and the web design is very different to what we do here. Being lucky enough to work with developers world-wide in the same company I just got reminded of a tool that was built for the Korea Mashup challenge called Uizard.”  Uizard was developed by Ryu Sung-tae — it’s servers are challenged by the Ajaxian link, but check it out when they come back up. (Original source.)
  
• YUI Implementations at Canadian National Railway: Lionel Desdier (the “Java-powered railroader”) wrote in to tell us about his extensive implementation of YUI on web applications at Canadian National Railway.  Writes Lionel: “The goal of that new web application, called Intermodal Orders, is to manage empty container orders for our internal clerks’ usage as much as for our external customers usage. This application is part of our EBusiness portal.  The application web client is purely JavaScript and extensively based on the YUI library. The client uses JSON to exchange data back and forth with the server that runs a Java back-end.  We are using most of the available components from grid layout, calendar, dom, overlays, treeview, datatable and datasource, etc.  We also extended the library to create our own components branded to the company look and feel.”  The EBusiness portal is behind a login, but the main cn.ca site also uses some YUI.
  
• YUI in Use on National Geographic Adventure Magazine: Talk about “in the wild”…  Among the online magazines using YUI is National Geographic Magazine, a great resource for those who like to get out of their cubicles and explore the most interesting places in the world. You’ll find YUI on the magizine’s article pages.
  
• Satyam on “Changing the Style of an Element in a YUI Widget”: YUI’s most prolific contributor is as at it again with a new tutorial on how to style YUI widgets.  If you’re unfamiliar with the process of digging into a widget’s markup and CSS using Firebug (or other DOM inspector), you’ll find this a must-read tutorial.
  
• New Orleans Repopulation Data Using Google Maps and YUI: @mattpriour wrote in to tell us about the Greater New Orleans Community Data Center’s Repopulation Indicators site, which uses YUI Grids, YUI Loader, and YUI Core in generating a genuinely interesting block-by-block look at New Orleans population levels from 2005 to today. (Original source.)
  
• YUI Compressor for Visual Studio: Writes the author:  “Although you don’t want this for all things in life, you do want to ensure that your JavaScript and CSS files are as small as possible.  As a web programmer, a script minifier is a useful application that should be a part of your toolbelt. This article presents a simple way to hook up a popular minifer inside Visual Studio.” (Original source.)
  
• Uzvy.com, Groups Solution, Using Tons of YUI: @alokbhardwaj wrote in to tell us about Uzvy.com, a groups site containing discussion groups and “shareboards” that aims to provide a novel and compelling take on the groups space.  YUI is used throughout, for modal dialogs, XHR, and much more. (Original source.)
  
• Cagatay Civici Adds YUI Calendar to PrimeFaces: Writes Cagatay: “Every JSF component library provides some sort of a date picker component and PrimeFaces is no exception. In fact, PrimeFaces calendar component is based on the well known YUI calendar widget which is equipped with some unique features. Calendar is purely javascript and does not do unnecessary ajax callbacks so it’s fast and furious.”
  
• Eric Abouaf’s YQL Execute, Based on Dav Glass’s Grids Builder: Eric Abouaf has taken Dav Glass’s Grids Builder and added support for YQL query execution, allowing you to build YQL-based pages easily; check out Eric’s adaptation here. (Original source.)

Find conversations: bloglines | technorati

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

In the Wild for May 11, 2009

News and notes from the YUI community in the past couple of weeks. Please use the comments to let us know what we missed.

• Satyen Desai Talks YUI3 on WebDevRadio: Satyen (one of the key developers on the YUI3 project) gave a talk today at JSConf, and WebDevRadio interviewed him afterwards.  You can catch the interview here.
  
• Matt Snider’s New YUI-based Card Game Engine: The prolific Matt Snider weighs in with a new project.  Writes Matt: “The goal of this system is to build a set of easy to extend, MVC JavaScript objects that can be used as the backbone of any card-game system. I will be tackling solitaire card games first, and have developed the card management architecture, but haven’t even begun to design the game architecture.  The card architecture consists of three objects: Deck, CardModel, CardView. The ‘Deck’ object will handle a collection of cards and has methods to add or remove cards, and a shuffle method using the Knuth algorithm. Games are played by interacting with the ‘Deck’ object and a developer would extend the object to meet the needs of their game.”  Check out the blog post and demo.
  
• YUI Implemented on Fashion/celebrity Blog Limelife.com: Fashion and celebrity blog Limelife is using a variety of YUI components, including Gopal Venkatesan’s YUI Carousel Control. 
  
• Retrevo.com Electronics Site Using YUI AutoComplete and More: Retrevo is a consumer electronics site designed to help you make good decisions about your electronics purchases.  It also has a fantastic repository of users’ manuals — a handy thing for checking out a product that you’re considering buying, or to learn more about one that you already own.  Retrevo uses a variety of YUI components, including Jenny Donnelly’s AutoComplete widget.
  
• Walgreens.com Using YUI AutoComplete: This is not a new implementation, but it’s a noteworthy one — Walgreens.com, the online face of the popular drugstore chain, uses the YUI utility suite and makes excellent use of the YUI AutoComplete widget on its main page to implement its search-suggest feature.
  
• Narayanan A.R., “Putting a YUI Face on a Java Web Application”: According to the author: “Building on my previous article Yahoo’s Rich Web UIs for Java Developers, which discussed how to use various Yahoo User Interface (YUI) Web components for setup and design, this article walks through using YUI to develop a real world application. During the course of the implementation, you will learn how to: Lay out the components, use standard form elements, and handle events.”
• Andrew Burgess’s Crash Course on YUI Grids CSS: Andrew Burgess writes that there are some good reasons to consider YUI Grids CSS to drive your layouts: “YUI grids uses easy-to-remember ids and classes, and clean markup; once you learn it, you could come back to your code in a month and know which parts are from YUI and what each piece does. [Free file hosting on yui.yahooapis.com] reduces your load twice: no need to host the file on your server, as well as faster page loading if the client has the file cached… Yahoo has baked in sidebar widths that correspond with the Interactive Advertising Bureau’s ad guidelines.  [And] with multiple templates and the ability to nest page regions, Yahoo claims to offer over 1000 layout combination . . . all in less than 5kb.”  Check out his full tutorial for more.
  
• YUI Sighting — Tweetium, Twitter API Playground from @carolskelly: Carol Skelly set up a nice little explorer for the Twitter API using YUI and jQuery — check it out at http://tweetium.com/. (Original source.)
• Tutorial: Norman Kosmal, “Hide and Show Columns of a YUI DataTable Using Checkboxes”: The title says it all — Norman Kosmal blogs this tutorial about tying the show/hide column API in YUI DataTable to a checkbox UI.
• In-depth into Cookies with YUI Cookie Utility Author: Nicholas C. Zakas, author of the YUI Cookie Utility among other virtuous projects, has a detailed article on browser cookies up on his blog.  Writes Nicholas: “HTTP cookies, most often just called ‘cookies,’ have been around for a while but are still not very well understood. The first problem is a lot of misconceptions, ranging from cookies as spyware or viruses to just plain ignorance over how they work. The second problem is a lack of consistent interfaces to work with cookies. Despite all of the issues surrounding them, cookies are such an important part of web development that, should they disappear without a replacement, many of our favorite web applications would be rendered useless.”  Check out his article for more, including one or two notes about YUI Cookie support.
• Tom Clancy, “YUI Rich Text Editor in Django Admin”: Tom Clancy has posted his notes on using Dav Glass’s YUI Rich Text Editor to enhance Django Admin. (Original source.)
• Caridy Patino Mayea on Using YUI’s Bootstrapping Capabilities: Caridy, author of the popular Bubbling Library extensions for YUI, writes in with a new blog post about bootstrapping: “In this article, I will focus on YUI 2.x and specifically, how you can design your application to use the YUI on-demand capabilities in such a way that the transition to YUI 3.x will be straightforward. The main goal is to describe how we can use YUI to organize the code and learn how to deal with on-demand loading processes…”  Check out his full post for more details.
• Konamicode from Matt Snider: Matt Snider, author of an upcoming YUI Storage Utility (and employee no. 1 at Mint.com), offers up Konamicode: “Recently, many sites (such as espn.com and facebook.com) have added Easter eggs to their JavaScript libraries that are triggered by the old Konami video game code: up up down down left right left right b a enter. While this does not necessarily improve the web architecture, it does make it more fun. To promote more easter eggs like that, I decided to write a simple script that makes integrating the Konami code into your site trivial.” You can read about the Facebook Konami easter egg on TechCrunch.
  
• Dav Glass’s Slides from Open Hack Day in London: Dav gave a talk on YUI 3 for Yahoo’s Open Hack Day in London.  He blogged about the event and posted his slides to Slideshare, for those who weren’t able to be there in person.  YDN has a nice blog post up about the event on YDNBlog as well.
• TYPO3 Extensions Support YUI CSS and RTE: According to its website, “TYPO3 is a free Open Source content management system for enterprise purposes on the web and in intranets. It offers full flexibility and extendability while featuring an accomplished set of ready-made interfaces, functions and modules.”  Andreas Lappe wrote in to tell us about two TYPO3 extensions, one for YUI CSS and one for YUI Rich Text Editor.  You can see both plugins (and lots of other YUI components) in use on this site.
• Some Thoughts on HTML 5 from JavaScript Library Authors: YUI’s Matt Sweeney and Eric Miraglia are among those whose comments were gathered for a recent InfoQ article by Dionysios Synodinos on HTML 5 and the evolution of JavaScript libraries.
  

Find conversations: bloglines | technorati

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

In the Wild for April 23, 2009

News and notes from the YUI community from the past few weeks…as always, we ask you to let us know in the comments about projects and articles that we missed.

• Dan Wellman, “A Look at the New YUI Carousel Control”: Dan Wellman, who literally wrote the book on YUI, has a new article out on DevShed treating Gopal Venkatesan’s YUI Carousel Control (inspired by the work of Bill Scott).  Writes Dan:  “The Yahoo! User Interface library continues to grow and expand with new components being added and existing components being continually patched and updated to ensure full x-browser support and cutting-edge functionality. Version 3 of the YUI is due for full release at some point this year, but version 2 (current release 2.6) is at this point still the stable and recommended release for general use.  One of the components recently added is the Carousel component, a control for automatically scrolling content in an attractive and intuitive interface. It’s still a beta release at present ,which indicates that the API is not finalized and that there are likely to be bugs that need addressing. We can still use the component, though, and although we should be wary as the existing API may change, the full release will probably bring more new functionality than changes in how it is implemented. In this tutorial we’ll be looking at a basic implementation of the control, the functionality we can use at this point in time, and the properties and methods exposed by the current API.” Check out the full article/tutorial on Carousel here.
• Jeethu Rao, “A Mochikit-style Dombuilder for YUI”: Writes Jeethu: “Before moving to YUI about a year ago, I was using Mochikit as my primary JS library. As advertised, Mochikit happens to be one of the most pythonic javascript libraries ever. One of the sweetest parts of Mochikit IMO has been Mochikit.DOM. This is something which I’ve always missed with YUI. innerHTML is fast, but icky and it feels a little inelegant. So, I ended up writing something like Mochikit.DOM for YUI while writing Tagz. Thought it might be useful to others as well. So, here’s the mercurial repo with the code.” Check out the full blog post here. (Original source.)
• Niceforms — Form Styling Enhancements Based on YUI: The folks at FreshCut have released v0.1 of Niceforms for YUI. According to the release, Niceforms is ”an easy to use and highly configurable YUI plugin to give most form controls a modern look that is consistent across all major browsers.”  Niceforms is licensed under a Creative Commons license and full documentation and a live demo are available.
  
• SlowGeek.com — YUI-based Nike Plus Mashup from Rasmus Lerdorf: PHP inventor Rasmus Lerdorf has a site called SlowGeek.com that taps into Nike Plus data to present a graphical and interactive look at your running history.  Check out Rasmus’s own stats to get a sense of the interface — and you’ll quickly learn that, far from being a “slow geek,” Rasmus is actually a speedy and dedicated mid-distance runner.  YUI components including DataTable, TabView and more are on display.  If you have a Nike Plus account, you can start using app yourself — just go to http://slowgeek.com/pr/[your username] for directions on how to get started.
  
• YUI Carousel on Public.resource.org Films Site: public.resource.org has a nice implementation of Gopal Venkatesan’s YUI Carousel on its National Technical Information Service Library of Commerce films site. Developer Greg Palmer wants to see a lot more YUI usage in government web development, as he argues in “Leveraging Yahoo’s UI Library to Speed Development” on his blog. (Original source.)
  
• Jobseeker Site Resumebucket Using YUI: Reader “P” wrote in to tell us about resumebucket, a slick resumes site for job seekers.  Resumebucket uses a broad swath of YUI components, including the Core + Loader platform, Connection Manager, and JSON. (Original source.)
  
• New YUI 3.x Support from the Grails YUI Project: mingfai has added support for the latest YUI 3 preview release in his Grails YUI plugin; support is also provided for YUI 2.x.
• YUI Sighting — Twitter for Busy People: Glenn wrote in to tell us about Twitter for Busy People.  The product aims to “give users a more dynamic and intuitive way to catch up on their friends’ twitter updates.  We use the Dom utility a lot for positioning the updates window and for mouse positioning; the Event utility for all mouse interaction; and the Pagination utility was great for users with many friends!  We also used the ‘Dependency Configurator‘ and the YUI Compressor to minimize this site’s footprint to an amazing 43k total payload!” (Original source.)
  
• YUI Sighting — GameFly: Dylan Oudyk wrote in to tell us about “the redesign of GameFly.  We’re making extensive use of menus, tabview, overlay, grids, reset, and calendar.  Also have drag/drop for our GameQ implementation; when I worked on the old site a couple years ago I used YUI version 0.10.3 with some browser workarounds, so it feels good to be all up to 2.7.0 now because I don’t have to do that anymore.” (Original source.)
  
• YUI TabView and More in Use at Mathsbank: Luke Robinson wrote in to tell us about YUI use at mathsbank, a UK math site for teachers and students.  TabView is the most prominent component used, driving navigation for many of the site’s categories. (Original source.)
  
• C.S. Lai, “Maintaining State with YUI Event”: C.S. Lai has written up some ruminations on Adam Moore’s YUI Event Utility.  Check out the blog post here.

Find conversations: bloglines | technorati

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

In the Wild for March 25, 2009

News and notes from the YUI community in the past few weeks. Let us know in the comments what we missed, and we’ll get it next time:

• Ross Harmes on YUI AutoComplete and the Flickr People Finder: Flickr’s Ross Harmes has an interesting piece up on the Flickr Code blog about doing super-fast search suggest in the creation of the Flickr People Finder feature.  Ross discusses in detail the process he uses to process contact lists quickly on the client, getting them into JavaScript.  From there, he turned to Jenny Donnelly’s YUI AutoComplete: “[With the] array of contacts in JavaScript, we needed a way to search through them and select one. For this, we used YUI’s excellent AutoComplete widget. To get the data into the widget, we created a DataSource object that would execute a function to get results. This function simply looped through our contact array and matched the given query against four different properties of each contact, using a regular expression (RegExp objects turned out to be extremely well-suited for this, with the average search time for the 10,000 contacts case coming in under 38ms). After the results were collected, the AutoComplete widget took care of everything else, including caching the results.”
  
• W3C Beta Site Using YUI Reset and Fonts: Nicole Sullivan wrote in to tell us that YUI Reset and Fonts are part of the new W3C site redesign, which you can preview here.  The site also uses Nicole’s OOCS work. 
  
• Kellogg’s Brazil Site Built with YUI Connection, Animation, and More: Kellogg’s Brazil web site implements a variety of YUI components.  We noticed Connection Manager, Animation, Get, and more, all coming down via a single combo-handled URL from yahooapis.com.  Nice. (Original source.)
  
• YUI Sighting — Greenbookings.com, Sustainable Travel Site: Yvo Schaap wrote in to tell us about Greenbookings.com, a recently-launched travel site that focuses on the emerging world of sustainable travel.  When you book through Greenbookings, they will caclulate and allow you to offset the carbon footprint generated by your travels.  Writes Yvo: “I’ve been working with the YUI framework for a long time and yesterday released my new website greenbookings.com that has almost every module of the framework in use: calendar, tabs, datatable, history + interval calendar, grids, autocomplete, and many more. Also much effort has been spend on a very quick page load by removing all javascript from the header to the bottom of the page.”  We love the site and the use of John Peloquin’s contribution to YUI, the Interval Calendar for date selection.
  
• YUI Sighting — Infinite Crossword Game Site: Marco Egli wrote in to tell us about a new release of Infinite Crossword, a game site using a wide array of YUI utilities and widgets.  “Last Friday a new version of Infinite Crossword was released. It’s the first version that is available in English. It is an infinite crossword puzzle that runs completely in the browser. Several different YUI components were used to development, including Animation, Button, Connection Manager, Datatable, Json, Menu and more. The game aims at the development of the largest crossword puzzle in the world. Users can play and add their own questions. It’s a mixture of crossword and scrabble.”  Check out the game here; be sure to log in and then use the menus at the bottom of the screen to add your own questions.
• DevX, “Yahoo’s Rich Web UIs for Java Developers”: DevX has a new article up for Java developers interested in YUI.  Writes Narayanan A.R.: “This is the first article in a three-part series that primarily targets Java developers who are not JavaScript experts, but are developing web applications with server-side frameworks (such as JavaServer Pages, Struts, or Spring). In this installment, JavaScript novices will see how to use YUI for setup and design , and should learn a good deal about object-oriented JavaScript programming. For developers already expert in JavaScript, this article series serves as an introduction to the YUI library.”
• Video: “YUI for Control Freaks” with Christian Heilmann: The Ajaxian team has Christian Heilmann’s YUI talk up on video; check it out here or in the embedded player below.
  
• YUI AutoComplete and Calendar on Turkish Airlines Site: Cagatay Civici wrote in to tell us about the Turkish Airlines site’s usage of YUI AutoComplete and Calendar on its booking tool.  Many travel sites have used this combination over the years; Southwest.com was one of the first adopters of the YUI Calendar and continues to use one of the original releases of Calendar on its current booking site.  Yahoo’s own travel site is another good example of how these widgets can be used together — it was implemented by YUI ImageLoader author Matt Mlinac. (Original source.)
• Caridy Patino Mayea: “YUI3: Controlling Key Strokes Events (keyup, Keydown, Keypress)”: Caridy (author of the popular Bubbling Library extensions to YUI) has a new blog post up on handling key events in YUI 3. (Original source.)
• Balsamiq Mockups for YUI Components: The Mockups to Go blog has several YUI components mocked up using the Balsamiq interface, including Menus and Buttons, Calendars, and Carousels. (Original source.)
  
• More from Matt Snider on YUI-EXT-MVC: Matt has been continuing work on his YUI-EXT-MVC project.  According to Matt, “the benefit of using the Controller classes’ AJAX system is that it simplifies YUI Connection Manager and a developer can pre-register callbacks, ensuring the type of the expected response. It is available at http://code.google.com/p/yui-ext-mvc/source/browse/trunk/assets/js/mvc/lib/controller.js. In the future I will be adding command pattern logic for fetching JSON and HTML data from the server.”
  
• Paul Tarjan’s Geo Explorer with YQL and YUI: SearchMonkey engineer Paul Tarjan has an interesting demo up using YUI TabView and the Yahoo Maps Ajax API to display the results of a YQL geo search.  The interface allows you to input a place name and then search for that location, that location’s siblings, that location’s ancestors, etc.  For the larger context and why this is interesting, see PHP inventor Rasmus Lerdorff’s blog post on the subject. (Original source.)
• Meg Smitley – “Dynamically Load YUI Dependencies”: Meg writes (on Meglog): “I’ve been using YUI Grids and LayoutManager for the backbone of my app’s interface since the end of last year. It’s been a steep learning curve and I still consider myself very much novice and, indeed, only noticed this week the ‘dynamic loading’ tab on the YUI Configurator. Rather than statically including the required YUI CSS and JavaScript resources, it is possible to use YUILoader to dynamically import them on load. While I appreciate that YUI-experts will not be impressed by my YUILoader-epiphany, this approach has helped me to slim down my app’s JS files while decreasing maintenance concerns and so I feel is worth mentioning for the benefit of other noobs.”  Check out her article for more details.
• Using Carousel with SugarCRM: Roger Smith has a tutorial up on the SugarCRM developer blog that provides “a quick and simple ListView customization which leverages the Carousel widget from the Yahoo UI (YUI) library. This customization completely changes the look and feel of the Contact ListView from a ‘rows and columns’ view of your search results to a Yahoo UI Carousel view. The YUI library is included in SugarCRM and provides a ton of UI features beyond what we use in the core application.”
  

Find conversations: bloglines | technorati

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

In the Wild for March 16, 2009

News and notes from around the YUI world during the past few weeks:

• Ticketmaster Subsidiary Echo Using YUI Menus and DataTables: Geoff Alday from Ticketmaster subsidiary echo wrote in to tell us about a terrific implementation of YUI that his team has engineered as part of its echotools product.  “We use a large number of YUI components but these screenshots specifically show implementations of Menu and DataTable. Originally we chose YUI because we had been using another toolkit and found it cumbersome to use, heavy, and poorly documented. YUI seemed a lot faster, well documented, and properly tested. YUI also posted their browser testing practices, so we were comfortable it would cover the browsers we were supporting. Additionally, Yahoo! was and is using YUI themselves, which makes YUI more appealing.”  echo creates websites for bands and focuses on “opening a powerful channel for conversation between entertainment brands and their consumers.”  The YUI implementations are behind a login and are used to power the analytics provided to echo’s customers.
  
• Tyler Hall’s YUI App Theme Built with YUI Grids CSS: Writes Tyler: “Tonight I pushed a new project to GitHub called yui-app-theme. It’s a generic, skinnable layout designed for web applications — particularly admin areas — built using YUI Grids. In other words, it’s a starting point. Usually when doing freelance work for clients, unless you’re building on top of an existing CMS like WordPress or MiaCMS, you’ll have to create an admin area for the client to login and manage their site. Or maybe you’re building a bug tracker or some other web application. Whatever the situation, yui-app-theme provides a solid foundation to start your work.”
  
• YUI Sighting — WebGUI CMS: The free (GPL) WebGUI CMS employs a wide range of YUI components, including a nice implementation of sliders and color pickers that facilitate the theming in the admin interface.
  
• YUI Sighting — ISpidr.com, New Geo-aware Social Networking App: Spidr is a new geo-aware social networking app “that helps you connect with people who could be sitting next to you in a coffee shop or pub or go to the same school or work in the same building as you do. Spidr helps you strike conversations with people who are not in you contact list but share physical space with you.”  Spidr makes extensive use of YUI, including Buttons, Containers, DataTables, Tabs, and much more.
  
• IKural, Unicode-based Indic Word-processor Using YUI RTE: Dav Glass’s YUI Rich Text Editor is put to excellent use in iKural, a word processor for indic languages that “currently supports [the] Tamil language using Phonetic, Tamil99, New Typewriter and Old Typewriter keyboard layouts.”
  
• YUI Charts and DataTable on Symantec.com: Symantec has a beautiful implementation of both YUI Charts and YUI DataTable on their security response site, leveraging a variety of YUI utilities under the hood to power their visually rich and impactful display.
  
• Inside the Launchpad AJAX Sprint: A Week with Widgets and YUI 3: Launchpad is one of several groups that has begun using YUI 3.  The team recently got together for a YUI 3 widget programming intensive in Berlin, and they’ve blogged about the event on the Launchpad Blog. “Recently ten people from Launchpad and other parts of Canonical came together in Berlin to hack on Launchpad’s new YUI 3 JavaScript interface. The sprint was tremendously successful, producing four fully functioning YUI 3 Widgets, complete with test suites and live demo pages. This post offers a look inside the event, and some thoughts about what made it so successful.”
• YUI Sighting — Lunch.com Social Sharing Site: Lunch.com is a new social sharing site that recently launched in beta mode; the interface makes extensive use of YUI.  “Lunch is a social sharing network fueled by your curiosity. It’s a community where you create and discover genuinely useful information with people who share your interests. Lunch is based on the idea that you’ll have the most meaningful exchanges with people who get your sense of humor, taste in books, love of snowboarding or penchant for Pac-Man.  At Lunch, you can contribute facts and opinions about almost everything. Based on your contributions, Lunch connects you to a similarity network of people who share your opinions and ideas. Through them, you can discover a mystery novel you’ve never heard of, a great local animal hospital, or the best place to buy folding bikes. You get personalized content in the best way — through the right people.”  Head over to Lunch.com to grab a place on the waiting list for the beta.
  
• Jeffrey Cobb: “Using the YUI Loader and Yahoo’s CDN Rollup”: Jeff writes on his YUICoder blog about how to use Adam Moore’s YUI Loader to bring YUI into the page without ever needing to download YUI and host it on your own server.  Along the same lines, be sure to check out the Dependency Configurator — it has a YUI Loader tab that provides you the YUI Loader script for any combination of YUI components.  (Like Jeff’s script, this code assumes the presence of YUI Loader on the page.) (Original source.)
• Allan Jardine’s “Secret”, Built with YUI Animation: Allan Jardine has released Secret, a JS library with a very particular task: “Secret is a Javascript library which provides the functions required for scanning an HTML document for certain characters, locating those characters on the rendered page and then displaying them in a rather fun Harry Potter style (the former parts might be more interesting for developers!).”  Check it out on his blog…it’s quite fun.  Secret makes extensive use of Matt Sweeney’s YUI Animation Utility.
  
• Eyercise — Speed Reading App Built with YUI Sliders, Dialogs, and More: Eyercize is a new app whose goal ”is to help you become an accomplished speed reader.  By using Eyercize you will ease your workload, reduce eyestrain, improve your job skills, get better grades, [and] improve your material retention.” Check it out at eyercize.com.  Eyercize is built with a variety of YUI widgets, including prominent use of Sliders and Dialogs. (Original source.)
  
• Dave Mosher on JavaScript Dependency Management and YUI Loader in Django: Dave Mosher has written about the work he and his colleagues have done leveraging Adam Moore’s YUI Loader in their Django apps.  “One of the areas we identified as needing improvement was controlling when scripts get loaded in the page; it’s a challenging subject especially when utilizing Django templates which can extend and include bits of HTML that are both static and dynamic. We’re not finished the refactoring quite yet but I thought it would be valuable to blog about the lessons we’ve learned early on about how to manage JavaScript loading without having script tags all over the place.”  Check out the blog post for full details.
• Iain Lamb on JavaScript Lambda Patterns: Iain Lamb blogs about the usefulness of JavaScript module patterns using anonymous functions (citing a popular YUIBlog piece from a few years ago), including the particular lambda pattern that intrigues him most. Writes Iain: “This pattern fascinates me – not just as a javascript programmer, but as a computer scientist. At its core, this beauty is a simple anonymous function expression, capable of appearing within itself again and again (because it’s an expression containing expressions).  This concise lambda pattern pretty much describes every block of javascript I’ve written in recent memory – ranging from modest expressions embedded into somebody else’s code to all the way to entire programs. You’re basically looking at source code of every javascript file I’ve produced in the last several years.”  Check out his blog post for sample code.
• Grails UI 1.0 Released for YUI and Bubbling Library: The popular GrailsUI project has hit the important 1.0 release milestone.  GrailsUI brings broad YUI support to Grails and includes Caridy Patiño Mayea’s excellent Bubbling Library as well.  The documentation is fantastic, and support is provided for a wide range of YUI’s widgets, including DataTables, Rich Text Editors, and much more.  Congratulations to Matthew Taylor, whose blog post has much more detail on the release. (Original source.)
• YUICoder: Override Alert() with a YUI Dialog: Writes Jeffrey Cobb on YUICoder: “You know and I know and everyone knows the alert boxes generated by the browsers are OLD-SCHOOL and look like garbage. Well using YUI you can easily change that by just including a little code in you page. Simply add the code [in this article] to the bottom of your page just before the end body tag then add the body style to the begining body tag called ‘yui-skin-sam’ and that’s it.” Jeffrey’s solution replaces the old-school alerts with YUI Dialogs.  Check out the blog post for full code and details.
  
• Matt Snider Brings MVC to YUI, Now on Google Code: Matt Snider (lead F2E of Mint.com) has brought his YUI MVC extensions library to Google Code to facilitate more collaboration and code sharing with his users.  Matt’s project “extends the Yahoo! User Interface Library with improved functionality and a Model View Controller interface for page interaction and AJAX communication.”
• Adding Up Column Data in YUI Datatable: Another useful tip from Jeffrey Cobb’s YUICoder blog — adding up column data using Jenny Donnelly’s YUI DataTable control. Check out the blog post for code samples and description.

As always, please let us know in the comments about anything that’s missing here.

Find conversations: bloglines | technorati

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

Tags: yui,, grids,, tylerhall,, alday,, colorpickers,, theming,, socialnetworking,, sliders,, analytics,, cms

In the Wild for March 2, 2009

Here’s the latest digest of YUI news and notes from the past few weeks. You can follow these in realtime on the YUI Library Twitter feed. As always, please let us know in the comments if there’s something important we missed.

• Stoyan Stefanov’s Site Search Bookmarklet with YUI and BOSS: Stoyan has created a bookmarklet that generates a YUI and BOSS-powered search box for your site (or any collection of sites).  Writes Stoyan: “Ever wanted to search only the web site you’re currently on? Not the page, but the whole site. And only this site, not the rest of the web. This bookmarklet does just that.”  Using the excellent BOSS engine (”build your own search service”) from Yahoo! Search, along with YUI components like Adam Moore’s Get Utility, Stoyan provides a nice addition for any site, with the code available on GitHub. He’s even provided a screencast to get you started:
  
• Exponent CMS 0.97 GA Arrives with Tighter YUI Integration: From the Exponent CMS blog post regarding the 0.97 GA release: “Many components now take advantage of YUI’s JS and CSS framework, including Navigation Management, News, Calendar, Image Gallery, Navigation Module Views, and the administrative chrome. A very tight integration with YUI Loader also provides a great framework for YUI Developers to quickly get scripts up and going, letting Exponent and YUI handle the work of figuring out dependencies.” (Original source.)
• Weight-prediction with YUI Sliders and Charts: Do you find yourself needing to bulk up or slim down in the coming months? M.J. Henderson’s Weight Predictor app takes input about your lifestyle and calorie consumption and forecasts your resulting weight curve.  YUI Sliders are used for the input and the YUI Charts Control is used to visualize your forecast.
  
• EveryCalc BMI Calculator with YUI Carousel: There are many “body mass index” calculators on the web, but this is the first one we’ve seen that shows you pictures of celebrities who have the same BMI that you do.  Relevant to the YUI world, those pictures are shown using Gopal Venkatasen’s YUI Carousel.  Not surprisingly, the lower your body mass is the more pictures there are to compare yourself to in the celebrity world.
• YUI Sighting — Dmitry Monin’s Lightnote CMS: Dmitry Monin has released version 1.0.1a of his Lightnote CMS.  Writes Dmitry, “[Lightnote] is a Web 2.0 CMS, which makes use of many YUI components like Animation, AutoComplete, DataTable, Drag and Drop, Element, Uploader, YUI Compressor, and of course a lot of Yahoo, Dom, Event and Connection Manager.” (Original source.)
  
• YUI Compressor Ported for .Net: Users purekrome and Crenna at have launched a port of Julien Lecomte’s YUI Compressor for .Net environments.  The port is based on YUI Compressor 2.4.2 and shares all of the goals of any compressor/minifier: to make the code much smaller without ever changing the way the code functions.
  
• YUI Sighting — FoodPrints Mashup for Nutritional Information: Sargis Dallakyan has “used YUI AutoComplete, DataTable and Rich Text Editor for [his] website called Food Prints (http://food-prints.appspot.com) which runs on Google App Engine. Food Prints provides easy to use access to USDA National Nutrient Database. The back-end is powered by Google App Engine and Django. The front-end is using Yahoo! User Interface Library and Google AJAX Search.” (Original source.)
  
• YUI Sighting — PilotOutlook.com: Aircraft ridesharing site PilotOutlook.com has integrated Matt Sweeney’s YUI TabView and Jenny Han Donnelly’s YUI DataTable to energize its market-leading site for pilots. (Original source.)
  
• On-demand Loading for the YUI RTE in Drupal from @xhochy: Writes XhochY: “I love the YUI Rich Text Editor as a Drupal module as it is simply configurable and all my users are doing well with it but there has still been the problem [in] that the CSS and JavaScript files that it used have been loaded on any Drupal page, even if there was no textarea for which the editor could have been activated. Since this was now really annoying as my projects got bigger and bigger, I just started an effort to change this! Based on the YUI module 6.x-1.1-rc1 and YUI Rich Text Editor 6.x-2.33, I’ve made [a] patched version which only loads those files if they are needed.” (Original source.)

Find conversations: bloglines | technorati

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