Rey Bango

At JSConf, I posed this question to a group of developers (in a pool no less):

“What are your primary sources for the web development information that you use, need and value?”

The reason for this question is because I’ve been trying to come up with better ways of ensuring that developers know about the new features in Internet Explorer. I’ve used the example of how I’ve had several conversations where developers didn’t know that IE10 supported such features as WebSockets, Transitions, or (gasp!) border-radius. It got me motivated to figure where you, the dev community, goes to get the most relevant info on new browser features and web development techniques. Hacker News and MDN were two immediate resources mentioned.

So I’ll ask you, the reader, the same question:

“What are your primary sources for the web development information that you use, need and value?”

Answer in the comments.

By now, I hope you’ve heard of the newest project we launched at Microsoft called modern.IE. I’m not going to go into every aspect of the site as I really want to focus on the VMs for this post. But if you want the details you can check out these great blog posts:

modern.IE – A new set of tools to help test web site compatibility
Introducing modern.IE – Testing sites for Internet Explorer made easier

The New Way to get IE VMs

Up until now, if you wanted to test different versions of IE natively you had to download VPC images that would allow you to run virtual machines for the different versions of IE. It wasn’t a great solution because:

• They were designed to be run in Microsoft’s Virtual PC software making it hard for non-Windows developers to use them.
• They were broken apart into multiple, large download files

There were ways to use them on other OSes but it required some work or unofficial scripts to convert them. Either way, the IE VPCs weren’t very easy or convenient to use.

We wanted to make this easier so as part of the modern.IE project, we created a new set of VMs that targeted your OS and your VM-specific software. Now, you’ll be able to choose your OS:

then choose the VM software:

and download the VM with the version(s) of IE you’d like to install:

The great thing about this process is that:

• You only have to download a single file per VM
• You can use the VM software of your choice

Currently, we’re offering VMs that will run on:

• Windows
• OSX
• Linux

The VM software choices are specific to the OS you choose:

• Windows – Hyper-V, Virtual PC, VirtualBox & VMWare Player
• OSX- VirtualBox & VMWare Fusion
• Linux – VirtualBox

The IE versions being offered are:

• IE7 on Vista
• IE8 on Windows 7
• IE9 on Windows 7
• IE10 on Windows 8

We initially launched with an IE6 image but discovered an issue and had to pull it down. We’ll be putting it back up shortly. We’ll also be supporting Parallels as well and that will be available soon.

Time Limits on the VMs

All of the VMs have a time limit before the images will become either limited or unusable. Here’s what they are:

• IE7 – IE10: 90 days of total time from the moment you first use the VM. Basically it’s 30 days usage with two 30-day rearms.
  • To rearm, go into a command prompt and type in “slmgr –rearm“
• IE6 on WinXP: Will expire 90 days from the time we upload it to modern.IE. There’s no rearm it but we’ll keep this refreshed when the 90 day kill date nears.

At the end of the 90 days, here’s what will happen:

• IE7 – IE10: You’ll be able to use the VM for an hour before it shuts down
• IE6/WinXP: You’ll be prompted for an activation key with no way to get past it

Functional Limitations

I’ve been told that these images aren’t crippled and in my testing, I was able to apply updates and do installs with no issues. I would HIGHLY RECOMMEND that you run Windows updates when you use these VMs to get the latest updates and patches. Also, install an anti-virus software. Microsoft Security Essentials is free and will do the trick.

Installing the VMs

The VMs may come with some minimum resource settings already preconfigured. Here’s what I recommend to ensure you get a decent performing VM:

• Give your VM a minimum of 1GB of RAM
• Give it the most amount of video memory possible

Remember that you’re VM is an OS and it needs resources. Unless you’re loading multiple VMs at the same time, a gig of RAM shouldn’t have a major adverse issue on a decent system. Also note that while IE9 & IE10 support GPU-enhanced rendering, don’t expect the same performance in your VM as you would get from a native system.

The VMs you download are in .zip format. Once you’ve got them on your computer, you should unzip them for use. Note that I’ve seen a quirk with OSX where the default unzip utility actually tries to create another .zip file instead of unzipping it. I used The Unarchiver app from the OSX App Store and that worked like a charm.

Since I’m on Windows, I think showing how to install it on another OS would be valuable. The VM software I use on OSX is VMWare Fusion so here are the steps I went through to setup the Win8/IE10 VM:

Click on the “Add” drop down to create a new VM:

Choose “Continue without disc”:

This should present you with a screen to “Use an existing virtual disk” which is exactly what you want to do:

I chose the “Select to create a copy of it” so that my original download isn’t affected and it makes a copy in the default VMWare VM directory. When you select the image, it will display a prompt asking if you want to convert it to an updated format:

Don’t convert it. I tried to and it seemed to corrupt the VM.

Select the proper version of Windows. These are 32 bit versions of the OS so the standard OS selections are fine (i.e.: not 64-bit). At the “Finish” screen, click “Customize Settings” to give the VM a better name like “Win8 – IE10″ and from there, VMWare will beging the process of copying the disc to the default VM directory and present you with the new VM:

Before you start the new VM, change the RAM settings so your VM won’t have any trouble starting up. Again, I recommend a minimum of 1GB of RAM:

Your VM should now be ready to use.

REALLY IMPORTANT: If you’re using the Win8/IE10 VM, be sure to set your screen resolution in the VM to a minimum of 1366×768 if you want to be able to use Internet Explorer for Windows 8. Internet Explorer desktop can launch in smaller resolutions but IE10 for Win8 is a Windows 8 app and needs the higher resolution. You’ll also want this for testing snap mode.

VirtualBox

I don’t have VirtualBox installed at the moment so I’ll do an update to this post soon to show how to install it there. But if you’re savvy with the software, it should be as easy as the steps I described above.

In the interim, Chris Wharton has written up a quick guide on how to get the Virtualbox VMs running on OSX.

Unzipping the VM and Corrupt Images

A number of people have mentioned that they’ve had trouble unzipping the images and that they may be corrupt. They’re not corrupt. There’s an issue in both OSX & Linux where using the OS’s default zip tool is failing to open the .zip file properly. We’re aware of this and are looking into it. The interim solution is to use a 3rd party unzip tool like “The Unarchiver” in the Apple app store or Peazip for Linux. These will correctly unzip the .zip files and give you working images.

Two days ago, I put up a simple survey that asked what essential tools, libs and frameworks you were using for front-end development. I closed out the survey last night a little before 9pm EST and after getting 1000+ responses. I now want to share the results.

Why Am I Doing This?

As I’ve mentioned, this was an incredibly unscientific survey and not meant to determine which tool is best. Just which tools seem to be in heavy use.

I’m doing this to help web developers (myself included) stay on top of commonly used tools. Since change constantly but at least this gives a snapshot of what’s frequently used.

A couple of people buzzed me (some complaining and eluding bias), because I hadn’t listed “x” tool or lib in the survey. The survey wasn’t meant to be all-inclusive and if you look at the “Other” section below, you’ll see how adding everyone’s favorite tool would’ve been impossible. That’s what the “Other” option was for. Ultimately, instead of looking at what wasn’t there, you should read this for what was selected to determine if you need to get up-to-speed on specific tools.

The Process

After closing the survey, I removed all blank records and then went entry by entry to factor in the “Other” submissions and list out tools not originally added on the survey. I did my best to list every technology mentioned although it’s quite possible I may have missed something. If I did, it was purely accidental.

I ended up with 1031 total responses that I felt were good submissions. The results shown below for the main list was based off of what Google Docs provided. I didn’t do those calculations but I have to assume they’re correct.

Important to note is that the following options were added after 218 people had already replied so those values could’ve been much higher if added at the beginning. This is evident in Git & Coffeescript’s high numbers despite being added late.

• LESS
• Git
• ExtJS
• Ember.js
• prefix-free
• JSBin
• JSFiddle
• dabblet
• Kendo UI
• Wijmo
• Coffeescript
• YUI

Results from the Main List

Results from the “Other” Submissions

The ones listed below were submitted via the “Other” option and not on the main list.

A note about Enyo

EnyoJS is a framework released by HP which looks to have come out of the great work done by Palm. I haven’t used it and don’t have an opinion whether it’s actually awesome or not. I’ve held off on including it in these stats, though, because there was a high number of out-of-place submissions for it and they seemed clustered together around the same time. Additionally, MANY were single Enyo submissions with no other option chosen. Just seemed too odd to me but I’ll put out the data and if someone else wants to publish, go for it.

The Raw Data

Here’s the raw data from the survey. Please feel free to use it as you like and I hope it helps you out.

Raw Data from the Survey (.csv)

One of the things that I’m passionate about in my role at Microsoft is helping developers ensure that their sites provide an awesome experience in every browser. Yeah, yeah I know it seems odd that a Microsoft evangelist would say this but it’s the honest truth and anyone who’s worked with me before knows that I take great pride in this effort.

We’re Not Supporting IE!

Today, I came across this article on HackerNews which caught me totally by surprise:

“We don’t support Internet Explorer, and we’re calling that a feature”

When I checked out the site entry, it directed me to a startup called Paydirt which has a very slick looking time-tracking & invoicing app. In their blog post, they rattled off a couple of reasons why they’re not supporting Internet Explorer and they were pretty upfront about it:

“That’s why we made a key decision at Paydirt: we don’t support IE – at all – and we don’t pretend to. You can’t even sign up for Paydirt using IE.”

They also mentioned that sensible browsers support cool features:

“Sensible browsers can do amazing things (canvas, SVG animations, CSS3, web-sockets, blazingly fast JS), and limiting usage to these lets Paydirt take full advantage of these new technologies.”

So of course, I had to dig in to figure out what magical features they were using that IE9, and especially IE10, didn’t handle.

Um…it works in IE

Sure enough, when I tried to sign up, I was blocked. So I used the IE F12 tools to fake the Chrome user agent string and, bam, I was able to sign up with no issues. The signup was painless and I waded through the app with Chrome & IE side-by-side. As I went through, I didn’t notice any differences in the functionality. Buttons worked as expected, data was being saved and even panels with fading functionality worked as expected. I was stumped because I couldn’t see what was preventing a user from using Internet Explorer on this site.

Chrome, IE10, IE9/Win8, IE9/Win7 Screenshots of Paydirt

Why is there code in here for IE support?

Next, I dug into the code and again, didn’t see anything that I could pinpoint as an issue. In fact, the Paydirt team had done a nice job of laying out their site using standards-based code. This is precisely what you want to see; developers using standards. As I dug through more files, I came across their main CSS stylesheet called paydirt-e08a29afb369fe41806659f40ff86301.css. When I looked in it, two things immediately popped out:

• They were using many CSS3 features supported since IE9, like transforms & border-radius, but just not adding the –ms vendor prefix entry
• They had the “-ms” prefix for CSS3 gradients which was added in IE10
• They added support for -khtml-box-shadow but not -ms-box-shadow???

This threw me off because in their blog post, their concern was the IE didn’t offer amazing feature support yet many of the features they implemented are readily available in IE9. In addition, they had actually done some initial work on supporting CSS3 features that are vailable in IE10 (e.g.: transitions & CSS3 gradients).

At this point, I’m completely stumped because:

• Their site works great in both IE9 & IE10
• They’ve included support for some IE features in their CSS
• They want sensible browsers that do amazing things and everything they’re doing is supported by IE9 & IE10. All they have to do is add the “-ms” vendor prefix just like they did for Webkit and Firefox. (They didn’t support Opera either unfortunately).

It works in IE so why not just Open it Up

So we’re left to wonder if IE issues are the real reason they didn’t support the browser. And trust me, I totally get the pain developers went through. I’ve only been with Microsoft for 2 years and was a web developer WAY before I joined them (even part of the jQuery project team). But IE9, and especially IE10, have come an incredibly long way since the IE6-8 days and I’m having a hard time rationalizing Paydirt’s decision here – particularly since it’s exactly this type of behavior (writing for or against specific browsers) that sets the Web back again.

Mind you, if their only reason was that their traffic didn’t justify the support for IE6-8, I could understand it. But one of the things that Microsoft has been advocating for is the concept of “same markup” and Paydirt is a great example of this. Despite them not wanting to support IE, because they used standards-based markup, the site just works in IE9 & IE10. And that totally contradicts Paydirt’s arguments about saving time and lack of feature support. Their site JUST WORKS!

Now, it’s not to say that if you really dig deep you may not find some issue. That happens actually in every browser and is not unique to IE. But seriously Paydirt, do you really want to use these arguments when your site actually does render great in Internet Explorer? Have you checked it out? Perhaps being a Mac-based company, testing may be the issue. If it is, then let’s discuss the options.

Claiming, though, that not supporting IE saves you time when your site is working just fine in IE9/10 is a tough sell. Let’s talk. I’m happy to help.

Update: Closing comments on the post. Plenty of lively feedback which regardless of your stance, I truly appreciate.

Now that I work at Microsoft, I’m using Visual Studio 2010 as my main editor. By default, an empty web page is created with an XHTML 1.0 doctype and it’s pretty barebones. Since I’m focusing on HTML5 & JavaScript development, having to constantly update the page with references to the new HTML5 doctype, jQuery, Modernizr and all of the other tags I use for my pages was becoming a drag.

Today, I noticed a blog post by Zander Martineau in which he added a lot of HTML5 goodness to the Coda IDE in the form of clips, which is the code snippet format supported by Coda. This got me inspired to find out how to do something similar in Visual Studio, so I pinged Damian Edwards of the Visual Studio team for advice. He pointed me to the following article which explained how to create “Item Templates” in Visual Stuido.

The gist of it is that you can take any page that you create and turn it into a re-usable template via the “File->Export Template…” wizard. It walks you through the process of choosing a specific file or entire project/website to use as a template.

Adding a Page Template

So here’s the basic HTML5 template I wanted to include:

<!doctype html>   
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title></title>
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="author" content="" />
	<meta name="viewport" content="width=device-width; initial-scale=1.0" />
	
    <!-- !CSS -->
    <link href="css/html5reset.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
	
    <!-- !Modernizr - All other JS at bottom 
	<script src="js/modernizr-1.5.min.js"></script> -->

	<!-- Grab Microsoft's or Google's CDN'd jQuery. fall back to local if necessary -->
    <!-- <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script> -->
	<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> -->
	<script>	    !window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')</script>

</head>

<body>
	<div id="container">

	</div>
</body>

</html>

After I created and saved this page, I went to “File->Export Template…” and followed these steps:

Now, when I select “File->New File…” to add a new item, my template is available:

Adding a Web Site Template

Creating this page template was a huge help. I can now start with a fresh template that specifically works for my style of development but I didn’t want to stop there. I also wanted to create a skeleton that I could use as the basis for new websites and I wanted it to package all of the important files that I use from the get-go. In this case, I wanted:

• My HTML5 basic page template
• jQuery
• Modernizr
• HTML5 Reset CSS file
• An empty CSS file called style.css
• A consistent folder structure for all of these

The first thing I needed to do was to create a new website in Visual Studio. From there, I needed to create and/or organize all of the files that I wanted as the basis for my skeleton. Using the same Export Template wizard, I followed the following steps to create my project skeleton:

So now when I select “File=>New Web Site” I see my new template:

and when I choose that, here’s what gets loaded for my new site:

Download the Templates

Note: The templates in this article have been updated to support jQuery 1.5.1 & Modernizr 1.7. Check it out here.

This is a huge time-saver for me and I want to share this. I’ve made both templates available for download so you can drop them into Visual Studio yourself. Just grab the specific file and drop the zip into the folder I specified:

HTML5 Page Template

Drop this into “Visual Studio 2010 > Templates > ItemTemplates” folder

HTML5 Web Site Template

Drop this into “Visual Studio 2010 > Templates > ProjectTemplates” folder

Here’s a question. Given 3 days and allotted 1 day per developer, which 3 developers would you spend it with? Here’s the caveat, the developers MUST BE in the web development community.

Here are my choices in no specific order:

• Nicole Sullivan – Why? Because she is a freaking CSS guru and the amount of CSS knowledge I could gain from a day of her mentoring would be so incredibly valuable. She’s also a super-cool person.
• Nicholas Zakas – Why? Well, there are a lot of people who are really awesome JavaScript developers but few, in my opinion, who have the experience in a large-scale environment. Nicholas has that, as the principal front-end engineer for Yahoo! and that’s knowledge worth nabbing. And if you’ve watched his presentations, you know he can teach.
• Joe Stump – Why? Because Joe is one of the coolest dudes on the planet and apart from that, he has the knowledge to build out BIG sites. Now that he’s focused on geolocation, getting into that would be so cool. Plus, I know Joe loves kids so I could talk to him about babies and stuff. ;)

Now, my list isn’t meant to leave anyone out because there are a ton of people who I’d like to learn from. This is just a group who I feel, at the moment, would offer knowledge that I want right now and they’re just great for providing that. So hopefully, I won’t hurt anyone’s feelings. :)

So who would you pick?

My biggest focus at Microsoft is the Script Junkie website. We use it to publish really great cross-browser, solutions-based content to help developers improve their JavaScript, HTML, & CSS development efforts.

The Script Junkie team is working on our content plan for the next six months and we’re looking to identify developer problem areas that we can provide solutions for. So I’m reaching out to my blog readers in an effort to understand what type of things pain you. Here are some examples of problem areas that we’ve heard of:

• Designing and implementing for multiple devices like 42″ LCD TVs to 480px Android device
• Getting users to upgrade their browsers in a friendly way
• Developing cross-browser compatible websites with minimal hacks
• How realistic is it to begin using HTML5 & CSS3 today?

It’s important to note that that we’re not looking for answers to the above problem areas at this time. These are examples to demonstrate the type of concerns we’re hearing. We’re looking for more questions that hopefully we can answer via solutions-based articles and code. So if you have thoughts on wide-spread development problems that you’d like to see tackled, please comment below. Remember that Script Junkie focuses on JavaScript, HTML and CSS so please be sure to keep that in mind when listing out your pain points.

We’ll roll-up your comments and then focus on the top 10 things listed by the development community.

Thanks for your help!

Over the years, I’ve read or been recommended a number of books which are essential reading for professional web developers. I’ve compiled the list of books below to help the community find a comprehensive list of good books that can help them be better coders.

JavaScript

Professional JavaScript for Web Developers – My new favorite book. Almost 1,000 pages of VERY detailed JavaScript information. Written by Nicholas Zakas, Yahoo! Principal Front-end Engineer for Yahoo!’s home page and recommended by the YUI team as well. BUY THIS BOOK!

JavaScript: The Definitive Guide – Considered the Bible of JavaScript for its thorough coverage of JavaScript. You need to have this in your library, even as a reference.

DOM Scripting: Web Design with JavaScript and the Document Object Model – This is a good book to get you familiar with the DOM.

AdvancED DOM Scripting: Dynamic Web Design Techniques

Beginning JavaScript with DOM Scripting and Ajax: From Novice to Professional – The book by Christian Heilmann that really got me past the initial hump of plain ‘ole JavaScript. His writing style is awesome.

Object-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications and libraries – JUST BUY THIS BOOK! Stoyan did a great job of outlining OOJS principles and it’s been incredibly valuable.

JavaScript: The Good Parts – It’s certainly a good book and I would recommend reading it after one of the more intro books like JS for Web Developer by Nicholas Zakas.

Learning jQuery 1.3 – While covering jQuery v1.3, the techniques discussed are still useful and I still recommend the book highly.

Pro JavaScript Techniques – John Resig’s famous book on advanced JS techniques.

Secrets of the JavaScript Ninja – Still not out but considering that John Resig is that author, it’s sure to be great.

ppk on JavaScript, 1/e – One of the first books I picked up and great overview of the language.

Accelerated DOM Scripting with Ajax, APIs, and Libraries

Ajax Security – Billy Hoffman is the man when it comes to Ajax security and this books shows why.

jQuery Cookbook: Solutions & Examples for jQuery Developers (Animal Guide) – Tips & techniques from the jQuery team rolled up in a cookbook style. You can’t go wrong.

jQuery in Action, Second Edition – This is now updated for jQuery v1.4.x as well as jQuery UI 1.8.x. Definitely a must-have for jQuery developers

jQuery Enlightenment – Cody Lindley did an amazing job in outlining the best jQuery techniques in this self-published book. Totally worth the price.

Test-Driven JavaScript Development

jQuery: Novice to Ninja

HTML & CSS

Web Standards Solutions: The Markup and Style Handbook, Special Edition

Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS (2nd Edition)

The Art & Science Of CSS – This is one of Sitepoint’s best CSS books. Loved it.

HTML Utopia: Designing Without Tables Using CSS, 2nd Edition – Not being a designer, I thought this book was a tremendous help in understanding how to better design sites.

Head First HTML with CSS & XHTML – This has been my goto book for some time. The Head First books are just so great at breaking down topics in easy to understand ways and this book is no exception.

Introducing HTML5 (Voices That Matter) – Going to get this soon mainly because it’s written by Remy Sharp and Bruce Lawson whom I respect tremendously, especially for their HTML5 & CSS3 savvy.

HTML5 For Web Designers – Just got this on 7/19/10. Need to read it by it’s by Jeremy Keith and he rocks.

CSS Cookbook, 3rd Edition (Animal Guide) – Just picked this up on a recommendation.

CSS: The Missing Manual – I keep hearing rave reviews about this book all over the place.

Site Performance & Enhancement

High Performance Web Sites: Essential Knowledge for Front-End Engineers – Steve Souders is the performance guru and if you want your apps to perform better, get this book and the one right below this one.

Even Faster Web Sites: Performance Best Practices for Web Developers

High Performance JavaScript (Build Faster Web Application Interfaces) – Again, another great book by Nicholas Zakas which outlines very important performance techniques for JavaScript applications.

Designing with Progressive Enhancement: Building the Web that Works for Everyone – Great book on progressive enhancement by the superstars at the Filament Group.

This is certainly not all inclusive and I’m sure there are other books out there that have been great. If you feel very passionate about a specific title, let me know via the comments and I’ll check it out.

NOTE: I’ve moved the list to it’s own dedicated page so that I can manage it a little easier so for the most up-to-date list, go to the following page.

I’ve been meaning to do a roll-up of top JavaScript, CSS & HTML development tools that I use or have been recommended to me and after having lunch with my bud Brian Wilpon today, I realized I just needed to do it. He asked me what some of the newer tools are and I think this is the best way to help him (and the community in general). It’s definitely not an all-inclusive list so if you see some that you feel I should add or remove, let me know in the comments.

Here they are by category:

Debugging Tools That Make Life MUCH Easier:

Effectively debugging JavaScript applications is a royal pain in the derriere and to compile that, the available tools just don’t stand up to those used by managed code developers. Luckily, we do have a decent set of tools that lessens the pain substantially. Firebug is definitely a must have since it incorporates so much DOM & XHR introspection as well as the Web Developer Toolbar. Both are simply awesome. I also love Charles for HTTP sniffing and it’s saved my butt when Firebug couldn’t handle it.

IE8 Developer Tools – Microsoft’s browser debugger tools
Firebug – Mozilla’s browser debugger add-on
WebKit Web Inspector – Webkit’s browser debugger tools
Fiddler – HTTP Sniffer. Great for seeing Ajax requests.
Charles – HTTP Sniffer. Great for seeing Ajax requests. (my personal fav)
Service Capture – HTTP Sniffer. Great for seeing Ajax requests.
dynaTrace Ajax – HTTP performance analyzer
Web Developer’s Toolbar – All purpose Firefox toolbar to inspect everything on a page
YSlow – Analyzes page performance based on accepted industry best practices.
PageSpeed – Analyzes page performance based on accepted industry best practices.
DebugBar – An IE plugin that brings advanced debugging features to IE including JS, DOM & HTTP inspection

CSS Editors:

I prefer to write my CSS code by hand. Call me old-school but many swear by the following CSS editors. CSSEdit by MacRabbit (Mac only) is especially loved by many designers.

TopStyle
Rapid CSS
Xyle
Stylizer
CSSEdit

CSS Frameworks:

These frameworks have really taken off. Like their JavaScript brethren, they help to abstract much of the complexity of building consistent layouts in cross-browser fashion. They’re definitely something I need to look into more and from what I’ve read, 960 GS & Blueprint are the ones people are looking at.

960 Grid System
Blueprint CSS Framework
YAML
Yahoo YUI Grids CSS
Tripoli
Object-Oriented CSS

CSS Resets:

Want to minimize browser inconsistencies? Then use a CSS reset stylesheet to specify baseline CSS styles that make browser presentation defaults more consistent.

Meyer Reset by Eric Meyer
YUI2: Reset CSS
IECSS

JavaScript Libraries:

I definitely recommend everyone to learn JavaScript as you’ll need it to be a really effective client-side developer. With that said, a good JS library will go a long way to making your development faster and much more stable. These libraries are all very mature and dramatically help to abstract the complexities of cross-browser development. My personal favorite is jQuery, of which I’m a member of the project team.

jQuery
jQuery UI
Prototype
MooTools
Dojo
YUI
JavaScriptMVC
qooxdoo
Ext JS
Adobe Spry
Raphael.js – simplifies working with vector graphics on the web
LabJS Dynamic Script Loader – Allows execution and load management of JavaScript files
Lawnchair – A lightweight client-side JSON document store
Sessvars.js – Client-side session data management solution
Reactive Extensions For JS
PURE JS Templating Lib
Underscore.js – Utility lib for jQuery that provides a ton of extended functionality

JavaScript Minifiers

Every byte counts when you’re sending files via HTTP and best practices dictate that on a production, you need to optimize all of your files to minimize page load times. Compressing JavaScript code is one of the easiest ways to do that and these tools will help. On the jQuery project, we’ve started using Google’s Closure compiler because it’s generated the best compression. Try all of them out to see which suits you best.

YUI compressor
Closure compiler
JSMIN
Dean Edward’s Packer
Microsoft Ajax Minifer
Dojo Shrinksafe

JavaScript Shells

There are times when you just want to test a snippet of code without actually going through the trouble of creating a full page. That’s where JavaScript shells shine. JSFiddle and JSBin both rock because apart from supporting plain ole JS, they also allow you to include a host of libraries including jQuery, MooTools, & Dojo.

jsfiddle.net
JSBin
mootools.net/shell (MooTools-specific)

Color Management:

As a programmer, I’m insanely color scheme challenged. I’m inclined to mix yellow with mauve causing a concerted moan to occur across the design community. Luckily, these tools help you choose web safe color schemes that are not only consistent but won’t burn the eyeballs off your site visitors. :)

Colourlovers
Kuler

Editors and IDEs:

I work at Microsoft so you would expect me to be a Visual Studio whiz. Not so. Only recently starting at MS, I’ve only dipped my toe in the VS waters. What I’ve seen though has impressed me but I still have a long way to go before I understand it. If you’re on a Mac, though, I do highly recommend both TextMate and Coda. Both are truly awesome. I’ve used Coda a little more because I liked the UI of it a little better than TextMate’s but TM’s bundle system and ecosystem is amazing. You can get code-complete for just about anything via bundles. For Windows, Notepad++ has been just awesome. I wish it had built-in FTP support like UltraEdit.

Visual Studio
Expression
TextMate
Coda
UltraEdit
Komodo IDE
Notepad++
Notepad2
BBEdit
Aptana
Espresso
Sublime Text
WebStorm
VIM
Eclipse
Netbeans
Geany

Wireframing:

I know some of you are cowboys (or cowgirls) and you just want to start hacking. Well, for the truly impatient, these tools at least let you wireframe your pages quickly and easily. I’ve used Balsamiq and FlairBuilder and both rock. It seems that FlairBuilder is really cranking it up with some nice features. Both are Adobe AIR apps which means they’re cross-platform.

Omnigraffle
Balsamiq
FlairBuilder
Visio
Axure
WireframeSketcher

Browser Testing:

I’ve been fortunate to have multiple OS versions over the years. My wife would definitely prefer for me to have a couple of less PCs sitting around but it’s let me test out my web apps on a variety of platforms, browsers and OSes. Shoot, I even have a version of IE6! For those with less hardware, these services should definitely help. Note that services like BrowserCam & Gomez are subscription-based but worth the cash if you can afford it.

BrowserCam
Adobe BrowserLab
Microsoft Expression Web SuperPreview for IE
Gomez
TredoSoft MultipleIE
CrossBrowserTesting
Multi-Safari
Browserscope
Cuzillion
IETester

Testing (based on the list by John Resig):

This was a list I snagged from John Resig. Obviously, he’s done a boatload of testing so I know this list rocks. JSLint is the old mainstay created by Douglas Crockford but other have really become increasingly essential to good testing. jQuery developers should definitely be looking at QUnit & jQuery-Lint. The most complete tool is Selenium but it does have a bit of a learning curve. If you’re into determining JS performance, checkout SunSpider, Dromaeo, Google’s V8 Benchmark and JSLitmus. These measure the performance of the JS engine, not your apps.

JSLint
jQuery Lint
JSUnit
Selenium Core
JSSpec (MooTools)
UnitTestJS (Prototype)
QUnit (jQuery)
DOH Unit Testing (Dojo)
YUITest 2
YUITest 3
Mochitest
ScrewUnit
JsUnitTest
jsUnity
JsTestDriver
Crosscheck
Env.js
FireUnit
W3C Markup Validation Service
W3C CSS Validation Service
SunSpider
V8 Benchmark
Dromaeo
JSLitmus
HTML Validator Firefox Add-on

Documentation:

Yahoo UI Docs
APIs – Most comprehensive list of APIs on the web
jQuery Docs
jQuery UI Docs
MooTools Docs
Prototype Docs
Dojo Docs
JSON Reference
JSONP

Server-Side JavaScript

Rhino
Node.js
Narwhal.js
CommonJS Standards Project
Persevere
Comet

Books

The books below are really a great selection. I have many in my own library and every so often re-read them I’m currently reading High Performance JavaScript by Nicholas Zakas. Another great book is Stoyan Stefanov’s Object-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications and libraries. I also highly recommend Steve Souders performance book at the bottom of the list. They’re basically the definitive sources for optimizing your web apps.

JavaScript/DOM:

• JavaScript: The Definitive Guide
• JavaScript: The Good Parts
• Professional JavaScript for Web Developers (Wrox Programmer to Programmer)
• DOM Scripting: Web Design with JavaScript and the Document Object Model
• AdvancED DOM Scripting: Dynamic Web Design Techniques
• Beginning JavaScript with DOM Scripting and Ajax: From Novice to Professional (Beginning: from Novice to Professional)
• Object-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications and libraries
• Pro JavaScript Techniques
• Secrets of the JavaScript Ninja
• Ajax Security
• ppk on JavaScript, 1/e
• Accelerated DOM Scripting with Ajax, APIs, and Libraries
• High Performance JavaScript (Build Faster Web Application Interfaces)

JavaScript Libraries:

• jQuery Cookbook: Solutions & Examples for jQuery Developers (Animal Guide)
• Learning jQuery 1.3
• jQuery in Action, Second Edition
• jQuery UI 1.7: The User Interface Library for jQuery
• Rebecca Murphey’s jQuery Fundamentals Training Materials (Creative Commons License)
• Mastering Dojo: JavaScript and Ajax Tools for Great Web Experiences (Pragmatic Programmers)
• Practical Dojo Projects (Practical Projects)
• Concise Guide to Dojo (Wrox Programmer to Programmer)
• Dojo: The Definitive Guide
• The Dojo Toolkit: Visual QuickStart Guide
• Getting StartED with Dojo
• MooTools 1.2 Beginner’s Guide
• MooTools Essentials: The Official MooTools Reference for JavaScript™ and Ajax Development (Firstpress)
• Practical Prototype and script.aculo.us (Expert’s Voice in Web Development)
• Prototype and script.aculo.us: You Never Knew JavaScript Could Do This! (Pragmatic Programmers)
• Prototype and Scriptaculous in Action [Ajax]
• Learning the Yahoo! User Interface library: Develop your next generation web applications with the YUI JavaScript development library.
• Learning Ext JS
• Ext JS 3.0 Cookbook
• Ext JS in Action
• Professional JavaScript Frameworks: Prototype,YUI, ExtJS, Dojo and MooTools (Wrox Programmer to Programmer)

HTML & CSS:

• Pro CSS and HTML Design Patterns
• Web Standards Solutions: The Markup and Style Handbook, Special Edition
• Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS (2nd Edition)
• The Art & Science Of CSS
  HTML Utopia: Designing Without Tables Using CSS
• Build Your Own Website The Right Way Using HTML & CSS, 2nd Edition
• Head First HTML with CSS & XHTML
• Web Programming Step by Step

Performance:

• High Performance Web Sites: Essential Knowledge for Front-End Engineers
• Even Faster Web Sites: Performance Best Practices for Web Developers

I'm re-submitting this post since I had to blow away the original one when I had the HTTP compression issues. The original, posted on August 19, 2007, can be found via Google cache:

With RIA's becoming so pervasive and developers just going full tilt in embracing toolkits that help build these wonderful apps, its still extremely important to take into consideration site optimizations that actually make your site usable.

Take for example the age old adage of the “files are cached on the user's computer”. Well, Yahoo seems to have done a good job of dispelling that thinking by doing some research that shows that:

• 40-60% of Yahoo's users have an empty cache experience
• ~20% of all page views are done with an empty cache

Holy crap! 40-60%!!! Yahoo's audience is so distinct that these figures really are compelling and should be considered when designing your site. Here's the link for the full article:

Performance Research, Part 2: Browser Cache Usage – Exposed!

It really is enlightening.