December 8th, 2008 by Aaron N.
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:
- 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.
- The cancel function now functions properly (ciUI.cancel()) when you’re trying to cancel a loading page
- 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).
- 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.
- Checkboxes return correct values in Firefox
October 27th, 2008 by Aaron N.
As many of you know, the MooTools team is hard at work on a plugin repository that will allow developers to share their date pickers, form validators, effects, and other widgets with anyone. This project is being pursued as fast as possible, but this means it’s up to a few people who are burning their spare time to work on it as they can.
As a stop-gap solution, I’m going to open up the Clientcide repositories now that I’ve thrown off my corporate bonds. Anyone that wants to release a plugin here is welcome to do so. They’ll be included as additional download options on the Clientcide builder page.
To submit a plugin you need to have the following:
- A svn repository for your work that anyone can pull from – I suggest Google Code.
- A directory organization that mirrors the MooTools repository. This means a Source directory with a scripts.json file, a Docs directory, a Compatibility directory (even if it’s empty), and a Specs directory (unless your plugin has no use for it).
- Your scripts.json file should reference by name any dependencies your script has. It can reference other scripts available here on Clientcide. So, for example, if you extended my FormValidator class and create, say, FormValidator.Foo. You would list in your scripts.json that your file depended on “FormValidator”. This allows the download page to include the files yours needs.
- Your plugin must have a unique file name – this has to do with the dependency mapping, which, at the moment, doesn’t respect the differences between libraries – they all work in the same namespace, so if there’s a plugin on Clientcide already that has the name you want, you’ll have to pick another.
- Your plugin must include tests. You can use either the Clientcide Test Framework or the JSSPec test runner that comes with MooTools. Look at the Clientcide repository for examples as it contains both.
- I must be able to contribute to your svn repository. I’ll only do so if there’s a pressing bug and you are unavailable to address it.
- Optionally, you can author a page in the Clientside wikitorials that demonstrates how your plugin works.
- Your plugin must not have any errors and must work well when compressed (i.e. watch those semi-colons!).
Any plugin is fair game. The only requirements are that they be open source and that they be well written. Which plugins are accepted will be up to me for now.
To get started, just drop me a line.
September 4th, 2008 by Aaron N.
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 »
April 4th, 2008 by Vladimir Olexa
You can also file CiUI specific bugs and feature requests on there. If you’re interested in joining in the development, please come discuss your ideas to our Google group.
CiUI Dev Google Code repository:
March 18th, 2008 by Vladimir Olexa
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 »
January 11th, 2008 by Aaron N.
New date picker, Date extentions, Auto-ajax indicator, and Input text hovers
So I just finished pushing out and testing my latest batch of additions to the CNET Libraries and you can download them in our svn. Here’s a brief roundup with links to demos and stuff:
- DatePicker got a lot of love including the ability to output a custom format for the date and the ability to choose ranges and enter times
- Extended the Native Date object to add lots and lots of neat-o methods including date comparison, fancy parsing, and about 2 dozen other useful features and methods
- OverText – a new Class that hovers text over inputs until the user clicks into them and changes them
- Waiter – an ajax indicator class that automatically greys out a dom element with a spinner image (you can customize these things) while your Ajax is requesting new HTML for it. Can be used stand alone (i.e. if you need to show a waiting indicator even if it’s not Ajax you’re using), but it’s integrated nicely into Ajax if you are using it.
- Our default DHTML popup html (stickyWinHTML) got an option to add a drag handle to the window
The Waiter class is probably my favorite, but all the Date love is really nice, too. Check it out and play around with it.
October 15th, 2007 by Aaron N.
Two new classes in the CNET libraries today.
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!
//now our request:
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.
September 7th, 2007 by Aaron N.
There’s a nice new article by Jonathan Snook on Adobe AIR that is worth the read. I was about to write all about it here but I see that Ajaxian wrote about it yesterday. I’ll, instead, just post what they had to say about it:
It looks like everyone wants to put out some form of Adobe AIR application and Twitter-based apps seem to be all of the rage, possibly because of the ease of integrating with Twitter’s API.
Apparently, Jonathan Snook didn’t want to be left out of the fun and created his new Twitter app appropriately called Snitter:
I built Snitter for a couple reasons. First off, I wanted to take AIR out for a spin and see what it could do. Secondly, I find using the Twitter web site frustrating at times because it doesn’t offer up features that I’ve always felt could be easily added. So, I’ve gone ahead and built an app with the features that I’ve always wanted.
Jonathan definitely has a flare for style and he’s brought that over to a really nice looking application:
You’ll need the following to run the app:
August 30th, 2007 by Aaron N.
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
June 16th, 2007 by Aaron N.
Slimbox is awesome and we wanted to use it, but there were a few things I wanted to change about it:
- It should be a class
- You should be able to interact with the options without editing the script itself
- I wanted to have the css assets added to the page automatically
So I made these changes and checked it in. Read the rest of this entry »