ReadWriteWeb

Top Web Developer Tools of 2011

BestOf2011.pngWhile 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

jquery.jpgNo 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.

Bootstrap

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.

LESS

less.jpgSpeaking 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-dev-tools.jpg

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.

Next page: The rest of the best Web developer tools of 2011

Page:  1   2  Next  »


ReadWriteWeb encourages comments, but please remember: Keep it nice, keep it clean, and avoid promotional comments. We do pre-moderate some comments with links. For more information, please read our full comment policy.
RWW SPONSORS



ReadWriteCloud - Sponsored by VMware and Intel





RWW PARTNERS
Recommended Story