There are many available tools to help make web development projects quicker and more productive. Aside from a handy text editor or WYSIWYG editor like Dreamweaver, you can find plenty of tools and utilities that can greatly increase development speed, reduce debugging and testing time, and improve quality of the output. The tools described below are a variety of utilities, optimizers, testing, and debugging tools aimed towards helping developers create websites more efficiently.
1. Blueprint: A CSS Framework
Blueprint reduces the amount of CSS code you have to write by including common styles that developers typically use such CSS reset and page layouts. A demonstration of a web page that uses Blueprint can be found here.
2. CSS Sprite Generator
Using CSS sprites is an excellent way to improve web page performance by reducing the number of HTTP requests needed for rendering images, but it can take a lot of planning, measuring, and coding if done manually.
CSS Sprite Generator allows you to upload all of your images (you have to place them in a .zip file first) and it will combine the uploaded images into a single sprite and also generate the CSS for you.
3. ColourLovers
An international site created for color lovers. You can search the site for color palettes that you may use for projects or create new
palettes which can be rated by peers. Great for inspiration or critique of design ideas.
4. Firebug
Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor
CSS, HTML, and JavaScript live in any web page. This is probably one of the most widely used web developer tools out there. If you don’t have it,
get it now!
5. 960 Grid System
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
6. Adobe Edge Inspect
A great little app for mobile developers, formerly known as Adobe Shadow, which cuts a huge amount of hassle from the design process. Just pair your devices (Android and iOS) with your main machine. Then the sites you browse to are echoed direct to every connected device.
If you’ve got conditional code or responsive templates then these should work fine. And if you want to tinker with the code, just hit the angle brackets next to your paired device (in Chrome) and away you go.
7. Fontello
Why is it so hard to find a set of icons that covers all the bases with a consistent look and feel? One of life’s great mysteries perhaps. Well, wonder no more because Fontello not only has all the icons you need but you can pick and choose the glyphs you need and compile these into your own minimalist set.
You can, of course, download the entire set of icons from theGitHub repository (actually it’s several sets) but thefontello.com interface makes customising your font so easy it’s the only sensible approach. The project is open source but as always, donations would be appreciated.
8. Cloud9 IDE
The code editor is very usable. Code completion, smart drag and drop document trees, FTP integration and all that, but it’s the connectivity which makes Cloud9: If a team are hacking the same file, each user is identified by their own coloured cursor. A chat module closes the feedback loop.
Integrated with the likes of GitHub, capable of working offline, and generally intuitive to use. If you want a ’code anywhere’ solution, look at this one first.