March 20th, 2007 by Aaron N.
Just today I was asked over in the Mootools forums why we don’t create a dependency map like the one in Mootools. My answer there was, basically, that the common code we publish here on clientside is but a small portion of our library. Our javascript spans numerous teams, sites, and applications, and keeping a map like this by hand is probably not practical.
Then today on Ajaxian there’s this post about T.J. VanSlyke’s alterations to Dean Edward’s Base.js to allow him to generate a dependency map of all the classes he writes. This isn’t quite the same as mapping out file-by-file dependencies, but it’s a start. Considering that Mootools is largely based on Base.js, this shouldn’t be too hard to incorporate over there. Read the rest of this entry »
Posted in 3rd Party Libraries, MooTools, Organizing Code, Tools | No Comments »
March 14th, 2007 by Aaron N.
Valerio posted over on the Mootools forums today a list of changes in the upcoming 1.1 version of mootools. We’ve been hard at work on a lot of this stuff and I’m excited to see it come out. After this version, we anticipate working less on the core framework and more on plugins and widgets.
————————————————————————————————————
#Additions
————————————————————————————————————
- CUSTOM EVENTS!
- $each also iterates objects
- added Element::getStyles
- added Element::hasChild
- added Array::include
- added Array::merge
- added $merge, to merge objects
- Dom.js uses XPATH in supporting browsers
- the use of +’px’ in setStyle is not required anymore.
- added XHR::cancel
————————————————————————————————————
#Changes
————————————————————————————————————
- Object.extend is now $extend, still compatible
- Object.native is now $native, still compatible
- Element has been splitted in Element.Events, Element.Form, Element.Dimensions
————————————————————————————————————
#Elements Creation
————————————————————————————————————
- elements creation is easier: new Element accepts second param
- elements creation for elements with name/type is easier, just use second argument.
- setProperty for name/type are is supported anymore.
————————————————————————————————————
#Notable Fixes
————————————————————————————————————
- dom logic is highly optimized and its blazing fast
- better sortables, no more flickering, removed Drag dependency
- Fx.Slide now accepts borders and margins. Positioning is now possible.
- Element::toQueryString in ajax now works as intended with all Form elements, including multiple selects.
- Element::setStyle supports float
- Element::setProperty and Element::getProperty now supports “for”
————————————————————————————————————
#Obvious Things
————————————————————————————————————
- code cleanup and optimization
- bugs and incompatbilities fixed
- mootools is faster, FASTER, FAAASTEEERRR
————————————————————————————————————
#TODO
————————————————————————————————————
- some bugs left
- testing
- css3 selectors (?)
- ???
Posted in 'Industry' News, CNET JS Standards, MooTools, Uncategorized | 1 Comment »
February 9th, 2007 by Aaron N.
If you are new to javascript or Mootools, you should:
2) Read
the Mootools Tutorial
Now, the problem with the Tutorial is that it shows you snippets of how Mootools work, but doesn’t put them all together to show you how to actually do things on a page.
So in an effort to help people see the right way to write code (well, at least how I write code; “right” is definitely subjective with javascript), as well as how to use the accordion and things like Fx.Slide, I’ve authored a simple little page that demonstrates these things and comments them line by line.
So:
3) View the source of the Mootools Beginner’s Example
Posted in Best Practices, Event Scripting, Examples, Manipulating the Dom, MooTools, Reference, Visual Effects | No Comments »
February 2nd, 2007 by Aaron N.
That’s odd. Somehow I left out the section in the Mootorial about arrays. Weird. Anyway, it’s there now.
Posted in MooTools | No Comments »
January 30th, 2007 by Aaron N.
Mootools 1.0 is out. Fancy new site design and docs.
We’ve already refactored all our code for 1.0, though it is not yet released to the CNET site. We’re entering into QA now…
I’ve also released the second part of my wiki tutorial series, this time giving working examples of all the CNET common code. The CNET Libraries are comprised of common code (widgets, shortcuts, etc.) and implementation code - code that is specific to a given page or application. The implementation code is usually just implementing and executing functions and libraries in the common portion of the library. The wikitorial for the CNET common code focuses on this generic content. Form validation, date pickers, carousels, etc. Dig in! Oh, and if you have a chance, Digg the tutorials, too. You’ll find shortcuts to do that in the right navigation column in the tutorials.
Posted in Ajax, CNET JS Standards, Event Scripting, Examples, Manipulating the Dom, MooTools, Reference, Visual Effects | No Comments »
January 12th, 2007 by Aaron N.
Just this morning I was pinging Valerio (author of Mootools) about a cheat sheet for Mootools after Snook posted his updated cheat sheet for Prototype 1.5. Funny thing; Snook posted a Mootools cheat sheet yesterday and it just hadn’t gotten to my inbox yet. Go Snook! I’m going to add this to our cvs library along with all our other docs and whatnot.
In the same vein as the Prototype Cheat Sheet, I decided to go through and detail the Mootools library, as well. In comparison to Prototype, Mootools is definitely smaller and it’s obvious they’ve put more focus on interactivity and decent DOM traversing.
I’ve colour-coded this one to match the four main categories that are in the download section of the web site and within the documentation. This way, it should hopefully be clearer when trying to compare against the two.
In going through things, I noticed that the documentation for Mootools isn’t bad but spelling mistakes and what not have meant that a couple features aren’t actually detailed in the documentation.
Anyways, for you Mootool luvin’ fans, here are the cheat sheets:
Posted in CNET JS Standards, MooTools, Reference | 2 Comments »
January 2nd, 2007 by Aaron N.
UPDATE: this file is deprecated. See the validator script in our common code in the wiki.
Back in May I posted, er, recycled a post from Ajaxian about really easy field validation using Prototype (and Scriptaculous). I really liked this concept of field validation and, as I move through my current project of rewriting all the javascript on Download.com (pity me), I ran into a few validation tasks that made me think back to this post.
So I rolled up my sleeves and dove in to the code from Dexagogo and refactored it to work with Mootools, which is what we’re using as the foundation framework for our javascript efforts here at CNET (and to which I contribute).
I’ll post more about this later, but really there’s not much to post. The Documentation page at Dexagogo pretty much says it all - it’s the same functionality and the same API. I can’t really take any credit for this; it’s all Dexagogo’s magic.
Update: I left a few console.log statements in this when I posted it which broke it for some of you. It’s fixed now.
Download the script | Demo
Posted in Code Snippets, MooTools | 11 Comments »
November 29th, 2006 by Aaron N.
If you don’t know javascript, or you like learning by watching people do things, you might like the “Mootools for the Rest of Us” series over at beautyindesign.com.
It’s not as complete at my Mootools Primer/Tutorial but it is pretty friendly. You get to watch a screencast of someone setting up a document with Mootools and then implementing a few effects like Drag, Resize, Opacity, as well as an Ajax example.
Posted in Examples, MooTools | 1 Comment »
November 25th, 2006 by Aaron N.
Hi gang,
To go along with the posting of our collection of scripts, I’m still writing tutorials on how to make use of all our code. Today’s update is for all our extensions to the Mootools libraries that we’ve written.
You’ll find new helper functions, new extensions to ajax, string, element, window and more. For the most part, you can just drop these scripts into your environment and they should work. If there are dependencies, you can find them listed at the top of each script.
Posted in CNET JS Standards, Code Snippets, Examples, MooTools, Reference, Uncategorized | 1 Comment »
November 23rd, 2006 by Aaron N.
Here’s a nice little extension I found on the mootools forums. It let’s you assign an action to any element when the element has focused and the user clicks a key. I haven’t played around with it yet, but it’s super small and looks useful for form inputs and whatnot. Credit goes to BlackMac. Read the rest of this entry »
Posted in 3rd Party Libraries, Event Scripting, MooTools | 5 Comments »
![PNG 1024×768 [111k]](http://www.snook.ca/files/mootools_83_snookca.png){kind=link}