Coupla monday morning goodies for you all. They are:

• SimpleEditor now can be localized and there are language files for Spanish, French, Portuguese (and English of course). This is all thanks to Miquel Hudin (who has contributed to the localization effort to many of the other classes available here). Thanks Miquel! If you know a language that isn’t represented in our localization efforts, feel free to send us new files.
• FormValidator uses a custom element property called “validatorProps” to pass in values for validators (like minLength and maxLength). This doesn’t pass XHTML validation and at the prompting of one user I changed this methodology to use css class values instead. See the new docs for FormValidator for examples. The old method still works if you don’t care about validating XHTML.
• CiUI – CNET’s Iphone interface script – just had a new release after several months of dormancy. Author Vlad Olexa writes on the project page:
  

  Release notes

  version 0.3

  • New feature: page caching. When you annotate your link with classname cache, i.e. <a href="my_page.htm" class="go_forward cache" title="My Page">My Page</a> the page will be cached. Meaning, navigating to that page again will not fire a new Ajax request.

  • Bug Fixes:
  1. The cancel function now functions properly (ciUI.cancel()) when you’re trying to cancel a loading page
  2. When a new page is requested while the current one is still loading, the current page will stop loading before trying to load the new one. (This was causing unexpected content appear after users navigated away from a page).
  3. Fixed an issue with the back button where it would sometimes be disabled when trying to get to the very first page in the hierarchy.
  4. Checkboxes return correct values in Firefox

A short while back I was helping out a coworker who was working on a content management system with a very rich UI. In helping him work out some of the issues he was struggling with, I had one of those rare moments where I conceived of a better way to write my own code.

Some of his struggles were performance related – he had a LOT going on, but those were really an extension of the fact that his code was kind of all over the place. What started as an interface with some nice enhancements had grown into a behemoth of functions, namespaces, dom references and conventions that he couldn’t hope to keep straight anymore.

Part of what I suggested to him was that he start treating items on the page as widgets. Every portion of the interface could be broken up into little bits of functionality with a corresponding (MooTools) class and then larger items would be comprised of these smaller things. The larger items would have their own classes as well. These would act like controllers for the smaller ones.

Over the next few weeks he refactored his code and when I saw him it was aparent that he was much happier. Relieved even. The result is a structured family of functionalities that each correspond to little chunks of his UI. He can combine these in various ways for different use cases and work flows. He can extend the classes when he needs something that’s slightly different.

His sense of relief was so apparent that I began rethinking my own approach to my code. Read the rest of this entry »

Given how the iPhone’s growth has made some ripples in the world of mobile browsing, we here at CNET decided to spend a little time and make an iPhone friendly version of our sites. At first I (Vladimir Olexa) considered the excellent iUI from Joe Hewitt but eventually decided to write our own.

The result is CiUI (CNET iPhone UI) that mimics iPhone UI behavior. It’s already being used on CNET’s iPhone page (http://iphone.cnet.com). It’s been greatly inspired by iUI with a few key differences:

1. AJAX calls are performed after a page slides
2. DOM doesn’t get overloaded with “pages” as they load. Instead, two DIVs are constantly being reused
3. Page titles are set on the source page, not on the destination page
4. Only specified “a” tags are assumed a part of the UI

Read the rest of this entry »

Hey gang,

Two new classes in the CNET libraries today.

CNETAPI.js

The first, CNETAPI, is probably not going to be very interesting to those of you reading this who don’t work at CNET. Basically, this class makes it super-duper easy to get stuff out of our REST API. For example:

//you have to do this only once on your page
//this is my dev key; get your own!
new CNETAPI(19926949750937665684988687810562);
//now our request:
new CNETAPI.TechProduct(32069546).chain(function(){
  dbug.log("got the Ipod, here's the data: ", this.data);
  alert(this.data.Name + ": " + this.data.EditorsRating.$);
});

Pretty snazzy, eh? Props go to Hunter Brown who wrote the guts of this class. I (Aaron) added some flare. More details and examples in the wikitorial.

ObjectBrowser.js

I’m working on some CMS tools for selecting options out of a tree (think genres/ontology) and I needed a tree browser. So I wrote a generic one that can be used to explore just about any kind of javascript object. Rather than paste in a lot of detail here, I’ll just point you towards the wikitorial.

Hi gang,

Got some new goodies for you in the ol’ svn today. First, the bugs fixed:

• fixPNG: slight tweaks and debugging lines added
• modalizer: cleaned up style syntax a little
• stickyWinFx: updated convention for options management to current methods
• jsonp: added a timeout/retry system, added some dbug lines
• Fx.Sort: fixed a bug in IE6
• element.setPosition: now correctly restores display, visibility, and position values to their previous state,
• element.forms: reverted (and tested) cursor/selection management; IE6 was acting up. fixed a doc typo
• element.pin: fixed a positioning bug
• element.position: now supports elements inside positioned parents (it calculates the relevant offsets); added support for fixed positioned elements;

And thew new widgets:

• Fx.Marquee – a little Fx plugin for announcing status messages
• IconMenu – a menu for managing a bunch of icons in a scrollable workspace
• MooScroller – like regular overflow scrollbars that come with your browser when you use overflow: auto, except done in javascript so the scrollbar is 100% css styleable

Have fun.