March 8th, 2007 by Aaron N.
Part of writing clean code that doesn’t cause you grief in esoteric browsers is doing the best you can to ensure that your code is completely syntactically valid. My pal Valerio (principle author of Mootools) pointed out how to turn on strict warnings, which I couldn’t get to show up in Firebug, even though I enabled them there.
The problem turned out to be the excellent Web Developer Toolbar which, if you haven’t installed, you should.
The issue is that the default setting in Disable > Javascript > Strict Warnings is to suppress these errors, so even if you enable them in Firebug, you won’t see them. You have to enable them in both places. Read the rest of this entry »
Posted in Best Practices, Browser Plugins, CNET JS Standards, Reference | 3 Comments »
February 12th, 2007 by Aaron N.
I ran a pass through our reporting software the other day and here’s the breakdown of browser usage @ CNET. It’s not in a fancy chart because I don’t have time for that kind of thing, but I’m sure you’ll manage:
OS:
92.3 % Windows
6.8% Mac
0.4% Linux
Browser:
Firefox: 23%
MSIE: 71%
Safari: 4%
MSIE:
55.9% ver. 6
43.5% ver.7
Summary:
Firefox has made some strides but continues to be an underdog. Safari is only barely big enough to even worry about supporting it (though of course we do). IE7 has made a lot of headway since it’s launch, but IE6 is still the winner (sigh) with near 40% of the total market. No other browsers cracked the 1% mark.
It’s scary that .6% of our IE users are still using version 5 (dear god why?!?) and .1% of them are using IE 4. These people, presumably, were stranded on an island after their plane crashed. There they found a fall-out shelter with a computer that requires you to click a button every 108 minutes. This button reads “object expected in line 12.”
Posted in CNET JS Standards, Reference | Comments Off
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 | Comments Off
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 | Comments Off
January 30th, 2007 by Aaron N.
In my previous post I pointed out the Firebug presentation by Joe Hewitt over at Yahoo’s UI Theater. This really is a treasure trove of videos a that is worth exploring. In particular, I’d like to bring your attention to two series: The JavaScript Programming Language presented by Douglas Crockford, and the followup, Advanced Javascript.
These videos are long, but if you’re looking for a way to get started with javascript and you want to understand it completely, they are fantastic resources. I’ve learned a lot from watching them, though finding the time is a challenge.
I’ve emailed Douglas to see if he’d be willing to give this presentation here, but in the mean time, dig in to these excellent videos.
Posted in Reference | Comments Off
January 18th, 2007 by Aaron N.
I’ve updated my Mootools Tutorial for the upcoming version 1.0 of the library. It (the library) is still in development, so my tutorial is likely to always be a little behind the svn, but if you’re digging into Mootools for the first time, or you want to see what’s different in version 1.0, here’s the place to start.
I’ve also installed a copy of docuwiki for all my example and tutorial work. The old stuff is still there but I’ll be moving it all over to the wiki. Expect to see more examples of code I’ve written in the coming weeks.
Posted in Examples, Reference, Uncategorized | 3 Comments »
January 12th, 2007 by Aaron N.
So I spent an entire day discovering a quirk about javascript that I must now share. In a previous post on creating default settings for classes/objects I discussed the following technique:
var Widget = new Class({
initialize: function(element, options){
this.element = element;
this.options = Object.extend({
offsetX: 0,
offsetY: 0
}, options || {});
this.setPosition();
},
setPosition: function(){
this.element.setStyles({
left: this.options.offsetX + 'px',
top: this.options.offsetY + 'px'
});
}
});
Now, this isn’t a very useful class, but it illustrates the technique. The functions in our class don’t have to worry if the options are defined; they are either what the default value is or they are what the user passed in. If the user elects to just pass in a subset of the values, that’s fine:
var myWidget = new Widget(myElement, {offsetX: 100});
//myElement will be offset by 100 on the left,
//zero (the default) on the top
But what if you want to extend the functionality of your class later? What if you want to be able to insert more default options?
Here’s what I was doing that caused me trouble: Read the rest of this entry »
Posted in Best Practices, Browser Bugs, Code Snippets, Examples, Reference | Comments Off
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 »
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 22nd, 2006 by Aaron N.
Hi gang,
I’ve been at work on a mootools primer as a tutorial for those who want to use the library but don’t know a lot about javascript. It’s replete with working code examples that you can execute right in the browser and see the result. Read the rest of this entry »
Posted in Ajax, CNET JS Standards, Event Scripting, Examples, Manipulating the Dom, MooTools, Reference, Visual Effects | 2 Comments »
![PNG 1024×768 [111k]](http://www.snook.ca/files/mootools_83_snookca.png){kind=link}