Like so many thing that we do in our daily development, there’s a high probability that someone has already solved the problem if you know where to look. This is just a collection of resources that I’ve found useful over time. Honestly, I’m posting these here because I need them in one place so that I can find them easily…
JavaScript Resources
Like a lot of you, I’ve been doing JavaScript since 1996. I’ve been pretty geeked, however, with the recent (well, last 2-4 years) emergence of a ton of JavaScript frameworks that are making this work a lot easier.
The first one to talk about it dojo. It’s one of the more mature ones that’s out there. I’ll be honest and say that it’s been a little while since I’ve used it because I’ve started using jQuery or Prototype more often. That said, dojo is one of the most complete frameworks out there. I do love it’s drag and drop support. It includes offline support and a whole lot more. Check out and play with some of it’s cool features at http://dojocampus.org/explorer.
Of course, any group that has a conference called dojo.beer() is a winner in my book.
The second toolkit is MochiKit. I love it’s tag line of “Making JavaScript Suck Less”. I first worked with MochiKit when I was playing around with TurboGears – a Python web application stack. What it’s really outstanding at is doing async work which is particularly useful in doing AJAX and other service based work. It’s interesting to note that Kevin Dangoor started Turbo Gears and then at some point later ended up working for SitePen who paid him to work on dojo. Check out demos of it in action at http://www.mochikit.com/demos.html.
Prototype is a slick relatively low level framework. What it does is extend the HTML DOM to include a lot of really useful features like element, class and css selectors. One of the useful things that it does is add a number of manipulations to the built in string class. This gives us startsWith, stripScripts, stripTags, isJSON, strip and a whole lot of other really useful functions.
By itself, Prototype’s useful but I have a hard time talking about it without mentioning script.aculo.us and some of the other plugins. script.aculo.us brings drag and drop support, animation frameworks a number of controls and makes it all really easy.
Check out demos of Prototype and script.aculo.us working together at http://wiki.github.com/madrobby/scriptaculous/demos.
jQuery is a fantastic and relatively light-weight framework that’s garnering a lot of new supporters recently. Honestly, I was happy with dojo and Prototype until I saw the Visual Studio Support for jQuery at which point I started playing with it.
I’m a convert. 🙂 Now, because it’s not as low level as Prototype, jQuery doesn’t have some things like the string manipulation, but overall I’m really pleased. I find that I have to write a lot less code to accomplish the same results. And very importantly, the jQuery Documentation is really good. Another really useful thing is that jQuery, being a really nice citizen, has built in support to make sure that it’s compatible with other JavaScript frameworks. Throw all of that in with intellisense in Visual Studio and it makes life easy.
There are also a ton of different plugins for jQuery that do everything from menus to rude string manipulation (not as good as Prototype but it’s a start).
Some of my favorite jQuery plugins in no particular order are:
AJAX History
Mousewheel
JSON
Curvy Corners
jCarousel
xWin
ASP.NET AJAX is the last framework I’m going to talk about here not because there aren’t other frameworks but I haven’t used the others so I don’t really want to comment on them.
First, as the name does imply, what it does really well is AJAX stuff. One of the really powerful features is the JavaScript proxy generation.
<asp:ScriptManager ID="ScriptManager1" runat="server"> <Services> <asp:ServiceReference Path="~/CustomersService.asmx" /> </Services> </asp:ScriptManager>
That allows you to call web services as if they were methods on an object.
function GetCustomerByCountry() { var country = $get("txtCountry").value; InterfaceTraining.CustomersService.GetCustomersByCountry(country, OnWSRequestComplete); } function OnWSRequestComplete(results) { if (results != null) { CreateCustomersTable(results); GetMap(results); } }
Second, despite the name, ASP.NET AJAX can work with more than just ASP.NET. There’s a project on CodePlex to generate the service proxies for PHP called PHP MS AJAX (which is a whole lot of capital letters…).
How do you choose?
There are a ton of different tests out there some of which you can look at the results, others of which you can actually run yourself…
I like to see if there’s broad support so the project won’t go away, see if it’s actively being developed, what tooling is available, how easy the syntax is, how well it plays with others, what it brings to the table from a functionality standpoint and a whole lot more.
Really though, it comes down to your preferences. The good news is that it’s not the end of the world if you decide to switch frameworks.
My current JavaScript work is being done with a combination of jQuery for most of my client side work with ASP.NET AJAX doing my communications (and some of the controls) with a little bit of Prototype thrown in when I need to go lower level.
CSS Resources
I used to spend days getting exactly the right alignment in my HTML/CSS work. But as time has gone on, I’ve gotten more mature and realized that I don’t have to work that hard. Instead of me figuring out how to do the exact right layout should be, I’m starting to leverage the various CSS Frameworks that are out there – especially since there are so many new browsers and form factors out there from IE8 to Safari 4 to iPhone. I want a framework to
One really simple CSS Framework is the 960 Grid System. It’s simple and gives you a lot of flexibility. The idea is that it breaks up the page into either 12 or 16 different columns and then lets you put in areas that spread across any number of those columns. This is a direct nod to the print industry which does exactly the same thing on paper. This gives you a tremendous number of possibilities from a simple two column layout to a really complicated layouts with multiple width columns and variety. Check it out, it’s simple and it works.
The downside of it is that it’s a fixed width layout so it’s not always the right choice. The good news, however, is that the project has been extended by Fluid 960 Grid System. 
This adds JavaScript to the 960 Grid System to give is a much more dynamic layout that resized to your screen size. It also brings dynamic menus to the table. It’s JavaScript it based off of a project called MooTools.
If the you really don’t want to think that hard and the others don’t give you what you need tied up in a neat enough package, check out Layouts.IronMyers.com. It’s simple to use web site gives you a preview of exactly the layout that you’re looking for and lets you download a zip file with a sample HTML and CSS inside.
And if that’s not enough and you really just need the design and all of the layout handed to you – check out FreeCSSTemplates.org. It’s got a large number of Creative Commons licensed CSS templates and layouts.
Conclusion
I hope these resources are as useful to you as they are to me. I’ve banged my head against the wall a ton of times until I realized that someone else had already solved the problem and I can leverage their solution.