So I was asked yesterday the following:
Why does Browser use merge but Element use implement?
And after composing a lengthy reply, I thought it might be useful to post it for others: | Read the rest »
So I was asked yesterday the following:
Why does Browser use merge but Element use implement?
And after composing a lengthy reply, I thought it might be useful to post it for others: | Read the rest »
About a year and a half ago I started focusing on javascript again. I'm not really a developer here at CNET (though you'd be hard pressed to tell) but javascript was a means to an end and I didn't really have anyone here that could do the work, so I rolled up my sleeves, unaware that I'd be spending this much time on the subject. It's a good thing I find this stuff fun.
Anyway, over the course of that time I learned a lot of the ins and outs of writing javascript well. I blogged about many of these discoveries along the way here on this blog. But if you're just getting started with javascript, or you suspect that you're writing things without really understanding them, or maybe you're using javascript the "old way" or whatever, where do you start?
All my tutorial work just assumes that you know a lot of these ins and outs and doesn't spend much time talking about the whys of "new" javascript methodology.
Over my lunch break I thumbed my way through Jonathan Snook's Accelerated DOM Scripting with Ajax, APIs, and Libraries and if you feel like you need a primer on how to do "modern" javascript, it's a great starter book. It covers a lot of stuff from the DOM to Ajax, closures and more.
It touches on Libraries (prototype, YUI, jQuery, Mootools, etc.) but it's not going to teach you to use them. Instead it shows you a lot of the conceptual stuff going on in frameworks and helps you understand modern browsers and the javascript concepts that they implement.
If you're just getting started with javascript, I highly recommend it. Even if you're already using a framework, you can pick up some good practices from the examples and illustrations and detailed under-the-hood information.
Despite it being a rather technical book, it's written so that even if you're new to javascript you can learn a lot from it. It will help if you have experience with programming in general, as it assumes you have a general understanding of object oriented practices, but beyond that the book is very approachable.
-A.N.
Here's a step-by-step and line-by-line example of how to write a Mootools Class. I wrote this example for a javascript class I taught here at CNET for our developers and figured I'd share with everyone else.
Bas Wenneker has a nice little article over at solutoire.com on sorting javascript arrays. The docs over at Mozilla on Array.sort demonstrate the same stuff, but Bas's article is a quick read that's worth it if you ever see yourself working with data this way.
/**
* After sorting the objectArray will be like this:
* [
* {firstname: 'Will', lastname: 'Brown', age: 28},
* {firstname: 'John', lastname: 'Doe', age: 25},
* {firstname: 'Marie', lastname: 'Doe', age: 28},
* {firstname: 'Sarah', lastname: 'Doe', age: 25},
* {firstname: 'James', lastname: 'White', age: 28},
* {firstname: 'George', lastname: 'Williams', age: 25}
* ]
*/
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 »
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."
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
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.
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.
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.