• 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 October, 2006

|
Newer Entries »

Design Pattern Conversation: What’s the Best Way to Communicate Patterns? Part One.

In the spring of 2006, a group of designers intimately familiar with the organization and development of design pattern resources discussed the current and future role of design patterns in the real world. We talked about defining and documenting patterns, the context required to communicate how patterns should be applied, what it takes to develop a design language, and how disparate lists of patterns could converge. The first question we answered was “What are Design Patterns?” You can find this conversation thread on Luke Wroblewski’s blog.

More recently a followup question was posed, and Jenifer is first up in the conversation. Later this week we will hear Luke Wroblewski’s response.

Q: What’s the best way to communicate a pattern?

Jenifer Tidwell

Jenifer Tidwell
Interaction designer/software developer, The MathWorks
Author, Designing Interfaces
Curator, UI Patterns and Techniques

Patterns communicate design ideas from one designer to another. From this simple fact, so much else follows – the importance of examples, the need for an insightful “Problem” or “Use when” statement, and the relative unimportance of strict formats and formal logic.

Different people learn in different ways. Some will appreciate detailed textual explanations in a UI pattern, but designers tend to be visually-oriented – many may actually find more value in a carefully-chosen array of examples. Many readers have told me that their favorite aspect of “Designing Interfaces” is the illustrations. These readers get the essence of the pattern from the illustrated examples, and find them inspiring as a source book for their own work. (Furthermore, I don’t believe a good pattern can even be written without examples. You have to ground the pattern in existing, real-world usage before writing the rest.)

Speaking of starting with examples, I’ve found that a new pattern arises from three key insights:

  • The recognition that you’ve seen a technique or idea “work” in more than one place or context.
  • An understanding of why it works. A solid understanding of cognitive and graphic-design theory helps here, even though the “why” is sometimes nothing more than “it’s just convention.”
  • Insight into when it’s appropriate to use the pattern, and when it’s not.

That last one, I find, is by far the most difficult of the three – it requires careful, thoughtful design judgment to reach a non-obvious recommendation. It’s too easy to present a tautology. “Problem: you need a context menu. Solution: use a context menu.” It’s harder, but far more useful, to say something like: “Problem: you need to present a short, dynamic list of item-relevant choices to the user, but you can’t use a lot of screen space for it.” Yes, it’s committing. Writing such a recommendation goes against the grain for many designers, who (understandably) tend to trust intuitive judgments more than rules, but it’s really much more helpful for less knowledgeable readers.

Finally, a word about formats. Within the patterns community, a lot of attention has been given to the pattern format – what sections they’re supposed to have, what those sections are named, etc. I have found that it matters less than we think, as long as the basic answers are there. (I use these: What, Use When, Why, How, and Examples.) Remember that you’re writing this pattern for a human audience. It needs to be readable, and too many sections – or too much jargon; who can explain what “Forces” means? – makes it harder for the reader to decipher what you’re trying to say.

You’re not writing code, either. Or formal specifications, or a components catalog. You may personally find it useful to work out very precise logic in your patterns, but I guarantee that most readers won’t care. That also means that I don’t think UI patterns, as I write them, have much value for design automation or code generation. But that’s another story.

All that said, every information architect knows the value of a consistent format used across multiple content providers! We pattern writers have all gone off and experimented with format and structure variations, but now what happens to readers who want to search or cross-reference all of our patterns? Well, now we have a problem! This is something we need to address in the near future, but I think some kind of format evolution was necessary to find the best answers.

- Jenifer

By Bill ScottOctober 11th, 2006

Ten Questions with YAHOO.ext Author Jack Slocum

Jack Slocum is the author of JackSlocum.com, a blog that focuses on extensions built on top of YUI. Jack’s Grid component and Ajaxified phpBB implementation have been the focus of much conversation lately; he has just released a DOM helper utility and is running a YUI-based paragraph-level comment system for WordPress on his blog.

Q: What is your background in front-end engineering?

I have been doing web development since 1995. Most of my experience has been in building corporate web applications. I have also been involved in some high profile public sites such as compare.net (now shopping.msn.com), howardstern.com  and drlaura.com.

Q. What led you down the path of extending YUI?

For 4 or 5 years most of the front-end development I was doing was IE-only. As FireFox and other browsers starting gaining popularity, the need for a cross-browser solution arose. This is where YUI stepped in and made the transition easy for me.  As I did more development, I saw various ways I thought I could improve upon and/or extend the YUI base functionality. In August of this year, I started my YUI related blog and subsequently began working on the YUI Extensions library.   

Q. What are the core goals of the YAHOO.ext project?

To create a library of reusable objects and widgets that improve the overall usability of YUI and make it possible to use YUI without the need for other libraries.

Q. What components have you written so far?

  • A Grid component that supports various data sources, paging, inline editing and various selection models.
  • A flexible SplitBar component.
  • A basic TabPanel component.
  • A basic Toolbar component.
  • An extended Animation library built on top of YAHOO.util.Anim that supports automatic animation sequencing and synchronization.
  • A variety of utility classes that make every day development with YUI a little easier:
    • Element:  Simplifies working with DOM elements. It also supports performing YUI animations automatically when setting an element’s properties.
    • DomHelper: Highly optimized DOM creation and in-browser templates utility.
    • EventManager: Takes YAHOO.util.Event one step further and provides normalized browser event objects.
    • UpdateManager: Ajax helper to manage DOM element updates.

Q. The Grid component has generated a lot of attention in the blogosphere.  How many downloads have you logged of that component?  How many downloads have there been to-date of YAHOO.ext in total?

Unfortunately I didn’t start tracking downloads until recently, but in the past 2 weeks there have been over 5000 downloads.

Q. What is your current approach to documenting and supporting the Grid and the other Extensions?

Like the YUI team, I believe documentation is very important. All of the components are well-documented and there are generally multiple examples and at least one post on my blog describing how to use each component in plain English.

Q. The Ajaxified phpBB interface is slick and has been the subject of a lot of discussion.  How hard is it for a site owner to implement your interface on an existing bulletin board?

The phpBB interface was intended to be a small project I was doing on the side for my site. Somehow it hit the front page of Ajaxian, and now everyone wants a copy. It’s only about 20% completed and I have no timeline for when it will be done.

Q. Last week you released a DOM helper utility that allows developers to do DOM injection with much better performance than in comparable utilities in other libraries.  What are the core features of this new utility?

The DomHelper and Template classes provide a cross browser abstraction of creating DOM elements. Unlike the traditional approach of only providing a cleaner and more developer-friendly DOM API, the DomHelper classes also transparently provide more optimized insertion methods such as HTML fragments and template building.  The live benchmarks verse Scriptaculous Builder and Mochikit are available here  and clearly show the performance benefits of using DomHelper.

Q. Bloggers reacted enthusiastically this week to your WordPress comments system that allows readers to comment on individual paragraphs of a blog entry.  Any idea when this plugin will be released publicly?  What other WordPress plugins might we expect down the road?

The real reason for creating the comments system was to allow people to ask questions or post comments about specific code blocks or topics in my tutorial and example blog posts. It also serves as a good example of using YUI in a real world application. I’m not sure if it could be made into a traditional  WordPress plug-in since I had to modify some of the core WordPress functionality (that is not available to plug-ins) to make it work.

Q. What’s next on your development roadmap?

The next release will include a “Resizable” component which can be applied to any element to allow that element to be resizable by the user. I have also begun working on a Forms library that will make it possible to create rich forms with real-time data validation, data-binding and a desktop-like user experience. Some other ideas include a TaskPanel (like in Windows Explorer) and there are still quite a few features to implement in the Grid, like fixed columns and column reordering.

Q. What are you hoping to see next from the YUI project?

Definitely not a Grid component. :-)  I am looking forward to the History Utility. I think that’s something overlooked in many Ajax projects and having a YUI solution would be great.

Q. Are other developers getting involved in YAHOO.ext?

There have been a few people who have helped me a great deal with fixing various issues (especially on Safari), and I’ve been lucky to receive a lot of feedback and ideas from people using the library. Currently I am the only one working on core development, but I can definitely use some help.

Q. How can developers get involved if they want to participate?

The best way is by posting in the Development Discussion forum at http://www.jackslocum.com/forum/. You can also e-mail me directly at jack dot slocum at yahoo dot com.

By Eric MiragliaOctober 10th, 2006

Video: Iain Lamb’s Hack Day Talk, “The New Hacker’s Toolkit”

Iain Lamb, co-founder of iconic webmail startup Oddpost and currently part of Yahoo’s DHTML/Ajax Evanglism team, gave the concluding talk at last week’s Developer Day sessions. Iain talked about the set of skills and tools hackers need to hack in the emerging world of open APIs and web services. His talk, “The New Hacker’s Toolkit,” takes the audience through ten key considerations for hackers of the ecosystem.

Note: This movie can also be viewed directly on Yahoo! Video.

By Eric MiragliaOctober 5th, 2006

Video: Matt Sweeney’s Hack Day Talk, "Web 2.0: Getting It Right the Second Time"

YUI developer Matt Sweeney gave one of the featured talks at last week’s Developer Day sessions leading into Hack Day. Matt, who has authored the YUI’s Animation Utility and most of the Dom Collection, is one of the lead CSS architects at Yahoo! and has been at the forefront of conversation in our frontend engineering community with respect to standards. His Developer Day talk, “Web 2.0: Getting It Right the Second Time,” articulates the philosophy of frontend architecture he has promoted here for many years.

Note: This movie can also be viewed directly on Yahoo! Video.

By Eric MiragliaOctober 3rd, 2006
|
Newer Entries »

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 (25)
  • Target Environments (11)
  • Yeti (3)
  • 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