Layer Styles

layerstyles 20 Superb Web Development Tools You Never Heard Of

This is a very unique and highly innovative and useful tool to create CSS layer style using Photoshop like layer styling interface. And moreover it’s OpenSource. This really helps in experimenting with layer styles and creating new styles in a jiffy without even knowing understanding any code.

PHP Dev Shell

devshell 20 Superb Web Development Tools You Never Heard Of

It is a modular, plugin based code management system. It enables you to build your website backend  in a short amount of time,  with full supports for user management, templates, cronjobs, menu management etc.

CSS3 Menu

css3menu 20 Superb Web Development Tools You Never Heard Of

CSS3 Menu is a free CSS menu creator; it is very easy to use and saves a lot of coding time on Menus. It has many different styles of menu and you can even create new styles.  Along with CSS3  Menu you may also like to have a look in this list : 20 Useful CSS Menu & Navigation Tutorials.

CSS3 Maker

css3maker 20 Superb Web Development Tools You Never Heard Of

This has every CSS3 properties you can think of, border radius, gradient, transform, animation, transition etc. This is a great tool with simple user interface and saves lots and lots of time on experimenting. Another alternative tool is CSS3 Generator which is also equally great.

RGraph

rgraph 20 Superb Web Development Tools You Never Heard Of

It is a graph library for HTML 5 using canvas tag. It is completely free and supports several types of graphs like bar, pie, donut, funnel, line chart etc. Using this tool you can now easily create dynamic charts and graphs without even touching flash.

Mordernizr

mordenzr 20 Superb Web Development Tools You Never Heard Of

Modernizr is a lightweight js which lets you have fine control over old browser not supporting new HTML5 and CSS features. It helps in adding if statements for CSS using simple coding.  It is used by several big websites including twitter. Another great alternative is HTML5 Boilerplate.

Fillerati

It is a alternative to centuries old “Lorem Ipsum…” Text with real english texts taken from books of popular authors. It’s not really a highly useful tool but for eyes who are bored seeing lorem ipsum everyday it’s at least a change.

Page Lime

sitelime 20 Superb Web Development Tools You Never Heard Of

It makes your normal static website to dynamic editable website for easy editing for your clients, and best of all it has iPhone app which can be used to manage and edit a website. It is free for first 3 sites, and integrating it is so simple that even a non-programmer can do it, it just takes a line of code.

CSS Prefixer

cssprefixer 20 Superb Web Development Tools You Never Heard Of

Before I begin with this I should say that this is a very not recommended hack. CSS prefixing is writing browser specific CSS code so the CSS is uniform in most of the browsers. CSS Prefixer and Prefix My CSS are two online tools which automatically adds prefix to CSS and saves a lot of coding time.

Yahoo! YSlow

yslow 20 Superb Web Development Tools You Never Heard Of

It is a Firefox plugin which tests websites load speed and also offer suggestions to improve it. It is created by Yahoo! And is integrated with Firebug.

Web Developer Toolbar

It is also an add-on for Firefox & Chrome which is a must install for every web developer,  it provides a large number of functions to test, edit css html directly in your browser , outline specific tags and divs hierarchy   and so on. Another plugin worth mentioning is Firebug.

CSS Tidy

CSS tidy is open source CSS optimizer which is available as exe file; it compresses CSS code, formats it and fixes it for higher browser compatibility. Another alternative tool is Devilo which supports CSS3,  Also here is a list of 8 other CSS compressors.

Font Squirrel @ font-face generator

This is one of the best tools, it generates font codes which is supported by all major browsers and saves a lot of time, and best of all it Free!! Also don’t forget to browse through their font-face kits which has many great free fonts.

__ layouts

It can be used to create standards compliant web layouts easily using its online interface. It is inspired by YUI grids and also uses it.

Venkman

Venkman is the code name for Mozilla’s JavaScript Debugger. It aims to provide a powerful JavaScript debugging environment for Mozilla based browsers namely Firefox, Netscape 7.x/9.x and SeaMonkey.

Pixy

pixy 20 Superb Web Development Tools You Never Heard Of

Pixy is a Java program that performs automatic scans of PHP 4 source code, aimed at the detection of XSS and SQL injection vulnerabilities. Pixy takes a PHP program as input, and creates a report that lists possible vulnerable points in the program, together with additional information for understanding the vulnerability.

Charles

charles 20 Superb Web Development Tools You Never Heard Of

Charles is an HTTP proxy / HTTP monitor / Reverse Proxy that enables a developer to view all of the HTTP and SSL / HTTPS traffic between their machine and the Internet. This includes requests, responses and the HTTP headers (which contain the cookies and caching information).

Map Generator

map 20 Superb Web Development Tools You Never Heard Of

This is a simple to use, map generator using Google maps API. It saves a lot of time and coding.

Wallaby

wallaby 20 Superb Web Development Tools You Never Heard Of

It is a plugin which converts Adobe Flash files to HTML 5, it is still an experimental technology and is only useful in converting simple animations and designs, but it really helps in speeding up process of creating HTML5 animations.

IE Tester

IETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE10 preview, IE9, IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP, as well as the installed IE in the same process.