Top Web Developer Tools of 2011

While browser-based operating systems haven’t taken over the world, 2011 has been a pretty good year for Web developers. It’s an exciting time to be working in Web development, and there’s never been a better crop of tools to work with. Web standards are eclipsing proprietary toolkits, and the development community is creating its own set of open source tools to work with. Here’s a look at some of the best we’ve seen in 2011.

To be clear, this isn’t exclusively a list of tools that debuted in 2011. Instead, I wanted to look at some of the most popular and best tools for Web developers through 2011. Some debuted in 2011 and look destined to be popular and dependable tools for Web developers for some time to come. Others were already on the scene at the beginning of the year, but have obviously become or remained popular in 2011.

Basically, we’re looking to highlight tools that are innovative, widely used and/or wildly useful for Web developers.

jQuery and jQuery Mobile

No list of Web developer tools would be complete without jQuery, the ever-popular JavaScript library that we’ve covered extensively on ReadWriteHack.

Even Microsoft has made the case for jQuery and technology surveys show jQuery well in the lead for 2011, moving from 27% of sites surveyed in December 2010, to 42% in December 2011.

Mobile developers got a boost this year with the introduction of jQuery Mobile 1.0. jQuery mobile is meant to work on “every popular mobile, tablet, e-reader and even desktop” platform. That’s a tall order, but the response so far to jQuery Mobile seems to be overwhelmingly positive.

That’s not to say that jQuery is free of critics. Some believe that jQuery is in need of a little slimming down. Of course, this is not atypical for any project reaching maturity. I’m not taking a position either way, but I would note that you rarely see a successful project that doesn’t generate a backlash of some sort.

Modernize IE with CSS3 PIE

Everbody loves pie, especially frustrated Web developers who need to cope with the shortcomings of older versions of Internet Explorer. You can’t fix the market and convince millions of people to upgrade to a more modern browser, but you can try to fix the browser.

CSS3 PIE (“Progressive Internet Explorer”) is meant to bring some of the spiffy CSS3 features to Internet Explorer. Want to see how it works? There’s a full list of demos and plenty of documentation for getting started. Naturally, the project is on GitHub, and it’s available under the GPLv2 and Apache 2 licenses.

PIE is not quite 1.0, but it’s getting very close. Jason Johnston announced the fifth beta of 1.0 in September, which added IE9 support and fixed a number of minor issues in IE6 through IE8.


Twitter released its Bootstrap toolkit for rapid development of Web applications in August, and it’s remained one of the trending repos on GitHub ever since.

Bootstrap is pretty simple, it’s just CSS that provides a standard set of solutions for things developers need for Web sites and Web apps. Developers can use Bootstrap for prototyping, or organizations can standardize on Bootstrap (as Twitter has) to provide a uniform design across a set of sites/applications.

Bootstrap is easy to use, just drop in the pre-compiled CSS into your project, or use LESS to compile a modified version.


Speaking of LESS, here’s a little more on it. Ahem, sorry about that. Anyway, LESS is a dynamic stylesheet language that extends CSS to be much more expressive and easy to use.

Standard CSS doesn’t support variables, functions, operators, and so on. LESS gives you the ability to do things that CSS ought to let you do. For example, LESS lets you define a color once and then use it through your stylesheet with a single variable (like @color instead of #4D6F92). The advantage, of course, is you make changes much more quickly and efficiently.

But LESS also provides the ability to define and re-use classes easily, and even use operators for proportional elements of your page with operators. If you want to check out LESS, the site has plenty of examples and source is available on GitHub under the Apache 2.0 License.

Chrome Developer Tools

Firefox’s demise is has been greatly exaggerated, but it’s probably no exaggeration to say that Chrome has been gobbling market share because Web developers love Google Chrome. (Or at least they hate Google Chrome less than the other Web browsers.) One of the clear reasons developers dig Chrome is the Chrome Developer Tools.

Chrome’s Developer Tools are based on WebKit’s Web Inspector but include a number of enhancements. The developer tools in Chrome are just a click or keystroke away, and give you the ability to do everything from edit HTML to view breakpoints in your script, perform remote debugging, and much more. The devtools also have an experimental API for those who’d like to extend the developer tools even farther.

Andi Smith has a fantastic post on 25 secrets of the browser development tools you should look over if you spend any time at all with Chrome’s developer tools, or any of the browser development tools. This post from Paul Irish is also worth checking out, and the video from Google I/O 2011: Chrome Dev Tools Reloaded.

You might also want to check out this cheat sheet from Boris Smus.

SourceKit and Ace: Top-Notch Browser-Based IDEs

Which text editor is the best for Web developers? (Or anybody editing a lot of text, for that matter.) I’d argue for Vim, hands down.

But what if you’re looking for a browser-based IDE for development? Well, when we surveyed ReadWriteHack readers, they voted for Ace and Ace-based SourceKit. Ace is a standalone editor, formerly known as “Bespin” and “Skywriter.” SourceKit takes Ace and turns it into a Chrome extension that taps into your Dropbox account.

Though Ace is more flexible, in that it will emulate keybindings for several popular editors (including vi), I like having SourceKit right at my fingertips in Chrome. Plus, the Dropbox connectivity is handy as well, though I do wish it was possible to limit SourceKit to one directory under my Dropbox directory. For one thing, I’d prefer not to give any application more access than strictly necessary. For another, I store a lot of stuff in Dropbox that I won’t be editing and don’t want to have to sort through.

This is a rapidly growing area, though, so I’d be very curious to hear what IDE or editor ReadWriteHack readers prefer.


Want to write HTML5 applications, but provide similar features to native applications on mobile devices? PhoneGap seems to be far and away the most popular solution.

PhoneGap lets developers build an app once, then deploy to multiple platforms. PhoneGap supports iOS, Android, Windows Phone, BlackBerry and others. This includes webOS, but I’m not sure how much demand there’s going to be for that platform in 2012.

Now we’re not just talking about a mobile site that displays nice on your mobile device. PhoneGap actually provides access to hardware and native features on your phone, like the camera, accelerometer, network, geolocation, contacts and notifications. If you’re targeting iOS and Android, you’re not far behind native applications.

The company behind PhoneGap, Nitobi, was acquired by Adobe earlier this year. But that should be no cause for alarm. PhoneGap has been contributed to the Apache Software Foundation (ASF) and is currently in the Apache Incubator. If you haven’t looked at PhoneGap yet, check out the Getting Started Guide and the video tutorial.

Popcorn and Popcorn.js

New, but noteworthy, there’s Popcorn.js. Part of the Mozilla Popcorn project, it’s a JavaScript library that gives you time-based, interactive media via the Web.

It’s not just a way to show video without Flash, Popcorn.js actually lets you create timeline-based Web presentations. This includes HTML5 audio and video, but also rich content presentations that make use of audio, video and other Web elements.

Popcorn.js promises to integrate content from Web services like Wikipedia, Twitter, Facebook, YouTube and Google Maps. Early demos show things like integrating time-based overlays into videos, with links to content. So, for example, you could develop a video presentation that has links to more information at certain times in the video.

Right now, it’s in early development and watching some of the demos in Firefox and Chrome is laggy at best. Expect it to be a while before the Web explodes with Popcorn presentations – but the future of Web media looks good.

The Future? Waterbear

No I don’t think anybody is going to be putting this into production, but Waterbear is worth looking at because it’s a good entry to programming for kids. The idea is that kids can start with a system of “draggable, snappable blocks” built with HTML5, CSS3 and JavaScript.

Developer Dethe Elza says that it’s in pre-alpha and in “constant flux” right now, but here’s hoping the project continues to move forward and turns into a popular system to start kids on programming. It’s free software (under the Apache License 2.0) and anybody can head over to GitHub and dig in.

Your Picks?

Of course, this is a highly subjective list based on my observations from the last year. I’d love to hear from Web developers about the tools that you find most productive, exciting, useful, etc. Feel free to share your favorites in the comments, and if you see something trending that needs writing about in 2012 drop me a note.

Facebook Comments