Like every mechanic needs a tool box, every web developer also needs tools to get there work done quickly, efficiently and effectively. None of the web developer today start making website development from the scratch. The most useful tools today available for developers on the web include, eBooks, Testing tools, Forms, CSS, Scripts, Add-ons etc. These tools help you increase development speed, reduce debugging and testing time, and improve quality of the output. Today I have compiled a list of Web Development Tools ….CHECK THEM OUT!
CSS Tools
1- Blue Print (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.
2- CSS Menu Builder
CSS Menu Builder helps build (well?) CSS Menu. The free tool comes with more than 1,000 pre-designed menu combinations and I believe anyone who wish to build a CSS menu instantly should check them out.
3- 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.
4- CSS Grid Builder
CSS Grid Builder is an online GUI for customizing the YUI Grids CSS – a lightweight CSS framework developed by Yahoo! that comes with over 1000 page layout combinations. The CSS Grid Builder allows you to rapidly generate a CSS-based, web-standards compliant page layout in a matter of minutes (or even seconds). Once you’ve got the page layout the way you want it, all you have to do is press “Show Code” and it generates the HTML for you. You don’t even have to host the CSS file on your web server (saving you some bandwidth and maintenance hassles), the generated code links to the appropriate stylesheet found on Yahoo!’s Developer Network API.
5- Logicss (CSS Framework)
Logicss is a collection of CSS files and PHP utilities aimed at reducing web development time. It allows developers to create customizable fixed, elastic, or fluid (liquid) layout grids.
Firefox Extension Tools
6- Firebug Firefox Extension
The favorite extension of programmers everywhere, Firebug is one of the best applications around for debugging issues with front-end code and CSS. If there’s any image or style that’s out of line, checking it out with Firebug is the best response. It’s even possible to change styles within the extension to see how a website will actually appear in the browser.
7- Web Developer Extension For Firefox
Web Developer extension is a very handy and time-saving extension for Firefox. I’ve written and recommended it plenty of times and is an extension that I use daily. You can rapidly validate your XHTML, find JavaScript/CSS errors, visualize a web page’s structure, quickly fill out web forms for testing purposes, clear your cache with a shortcut key, change XHTML on-the-fly (great for working remotely on a web design), inspect HTTP headers information, and much more.
8- Web Developer
The Web Developer Firefox add-on is a huge suite of web design tools packed with massively useful functions that will help web designers perform tasks more efficiently. By default, it displays as a toolbar towards the top of the browser, presenting you with various menus such as CSS, Resize and Cookies.
9- Screen Grab
Taking screenshots in the browser is a common task for web designers. Screengrab is a simple tool for taking full-page or partial-page screenshots. You can copy the screenshot to your clipboard, or save it to your hard drive as an image file.
10- Fire PHP
FirePHP enables you to log to your Firebug Console using a simple PHP method call.
11- Page Diff
Page Diff is an add-on that helps web developers and designers see HTML source code differences between web pages. This is helpful for finding code irregularities or differences that will enable you to debug rendering issues.
12- Grease Monkey
This is definitely a prized possession for every web developer. Grease Monkey is an alternate page-rendering engine for Firefox customizes the way a webpage loads by editing and adding your own JavaScript snippets. There is literally hundreds of FREE plug-ins already available on UserScripts that use GreaseMonkey and enrich your browsing experience. Plug-ins like the “Facebook Dislike button” and “YouTube Video Downloader” are among the many freely available plug-ins that use Grease Monkey.
Web Forms
13- Contact Form Study
The fewer questions you ask in a form, the more people will actually complete it, but to what degree? Less is more. Check out this study and the findings to improve your forms.
14- Time Frame
Timeframe is a click-draggable, calendar that offers users to pick a date range for their input.
15- Form Site
FormSite is one of the earliest HTML form builder online. The website was established in 1998 and there are over 100 pre-built forms intheir database. Form Site is quite generous to their free account users – you can create up to 5 forms with 50 items and 10 results in each of the forms for free.
16- Adaptive web forms
Web forms could adapt to user’s behavior, instead of users adapting to them. This could help user experience and usability by saving data so the next time your regular readers are enabled to quickly post comments. However, besides saving just data, the whole user interface can be adapted to provide a different kind of interaction for returning visitors.
17- Web Forms
This rich password field widget not only has a password strength meter but also has other features that your users may love to have. When you type your password, the password field shows a mask to prevent an ‘over the shoulder’ social engineer. This also provides the ability to show your user the password they type. You can also quickly generate a strong password.
18- Form To Wizard plugin
This detailed tutorial and jQuery plugin will allow you to turn a long form into a wizard with “steps left” information. The entire process of filling a web form can become a step with a description, input fields and navigation that is common for wizard forms – back and next.The entire process can be done with this handy plugin.
Web Script Sites
19- Agriya
Agriya are a web development company that designs and develops high impact websites for worldwide clients. Our web developers create stunning websites, intuitive web and mobile applications, website clones and PHP clone scripts. We provide next-generation tools for the enterprise businesses.
20- Esoft Script
eSoftScript Your software repository site . shareware and freeware download site,such as games,remove spyware,convert tools.etc .SoftDiscovery – SoftDiscovery.com accepts PAD’s or manual submissions from developers.
21- Script & Style
As you might have guessed from its name, Script and Style is aimed at both developers and designers. You’ll find loads of fascinating information in the easy-to-access archives, which run for a whopping 67 pages.
22- Script
script.com one of the best sites for javascript,php script,etc.
Cheat Sheets For web Developers
23- Complete WordPress Cheat Sheet
The number of WordPress functions can be dauntingly. Print or save a helpful cheat sheet for future reference.
24- HTML5 Pocket Book
This is a useful quick reference guide to develop your site in HTML 5.
25- Web Usability Guidelines
Designing usable systems require much more than simply applying guidelines. Guidelines, however, can still make a much needed contribution to usability by promoting consistency and good practice. There are overal 247 web usability guidelines.
26- JQuery Visual Cheat Sheets
jQuery Visual Cheat Sheets are a useful and practical reference to jQuery 1.3 for web designers and developers. These six cheat sheets contain the full jQuery API reference with detailed descriptions and some sample code. The simple visual style design these sheets allow you to find everything you are looking for with only a glance.
27- Java Script Framework Matrix
The JavaScript Framework Matrix gives an overview of popular JavaScript frameworks and their functions. There are various examples for frameworks and every snippet contains links to official documentation. This matrix shows different API styles and functionalities.
Testing Tools
28- WebSite Pulse Test Tools
Want a fast test for response time, file size, and links? WebSitePulse Test Tools provides a series of quick and easy-to-use tests that graph out everything from website speed to link errors. It also provides numbers on file sizes, redirect speed, and DNS.
29- Average Testing Tool Developers
The average salary for testing tool developers. Average testing tool developers salaries can vary greatly due to company, location, industry, experience and benefits. This salary was calculated using the average salary for all jobs with the term “testing tool developers” anywhere in the job listing.
30- Type Tester
Typetester is an online application for comparing how different fonts and font attributes will appear on a given set of text. Its primary role is to make the life of a web designer easier by allowing them to quickly and easily visually compare different typefaces.
Ebooks For Web Developers
31- Building Ebooks
If you know HTML, CSS, and JavaScript, you already have what you need to develop your own iPhone apps. With this book, you’ll learn how to use these open source web technologies to design and build apps for both the iPhone and iPod Touch.
32- Data Structures and Algorithms
Put simply this book is the result of a series of emails sent back and forth between the two authors during the development of a library for the .NET framework of the same name. The conversation started of something like “Why don’t we create a more aesthetically pleasing way to present our pseudocode?” After a few weeks this new presentation style had in fact grown into pseudocode listings with chunks of text describing how the data structure or algorithm in question works and various other things about it. At this point we thought, “What the
heck, let’s make this thing into a book!”
33- Web Font User Guide
This Web FontFont User Guide contains information aimed at web developers, system administrators and website visitors. Section B is for web developers, showing how to get started using Web FontFonts for display on your website. Section C contains information for system administrators about which configuration changes may be necessary to successfully serve webfonts from your web server and, finally, section D outlines some issues visitors of your website may experience in connection to webfonts and may assist site owners in answering webfont-related support requests.
34- Essential JavaScript And jQuery Guide
Design patterns are reusable solutions to commonly occurring problems in software development and are a very useful tool to have at your disposal. Addy Osmani wrote this mini-book because he felt that patterns were an area a lot of new and intermediate JavaScript developers may not have had a chance to explore just yet and I’m hopeful my book will encourage you to check them out as they can be quite powerful.
Web Development Blogs
35- Smashing Magazine
Suitable for designers and developers alike, Smashing Magazine’s popularity grows year-on-year. Its articles, which address everything from graphics to coding, design and even inspiration, are always written with personality and a dash of humor.
36- Web Developer Plus
Web Designer Plus covers Ajax, CSS, Flash, jQuery and PHP, as well as Photoshop and WordPress. Articles are always highly informative and freebies, which include WordPress themes, are always top-quality.
37- XHTML CSS CODE
XHTML-CSS-CODE.com is much more interesting than its name suggests. Far from being a dry repository of data, it’s full of fascinating HTML, XHTML and CSS info. You’ll even find articles covering creativity and inspiration.
38- Web Development Blog
Web Development Blog’s primary focus is on PHP scripts and tutorials. However, readers will also find bbpress plugins and Google gadgets, as well as information regarding SEO, Ubuntu/Linux and Google services.
39- Webitect
Webitect, a relatively new site, founded in October 2008, is a useful resource for web developers, as well as designers, bloggers and freelancers in general. There really is something for everyone here. Much of the content is written by Nick Parsons, a designer, developer and proud Texan.
40- Script & Style
As you might have guessed from its name, Script and Style is aimed at both developers and designers. You’ll find loads of fascinating information in the easy-to-access archives, which run for a whopping 67 pages.
41- Ajaxian
Ajaxian is a site run by Dion Almaer, director of developer relations at Palm, and Ben Galbraith, an experienced Chief Technical Officer and Enterprise Java Architect. Besides tutorials, you’ll find information pertaining to jobs, training and conferences.
Others Web Development Tools
42- HiFi Reg Exp Tool
Regular expressions can be a pain. The HiFi RegExp tool is 100% JavaScript using jQuery. This tool was created to help developers learn, practice, and compose regular expressions.
43- Haystack
Haystack helps you discover the right web designer for your next project. You can run a search to show all web designers in any city who will work on projects for any budget.
44- Search and Share
Search and Share makes highlighting text a more functional action. It attempts to understand the intention of a user’s text selection and present a variety of options accordingly. The criteria for understanding the intention is the character length of the selection, and the interpreted actions are copying, searching and sharing. This WordPress plugin can help you get credit for content, improve word of mouth for your site, help your content go viral and much more.
45- Get Cu3er
CU3ER is an image slider to create 3D transitions between slides, but so much more than that too. This is great! It is also a convenient and multifunctional solution that can be applied in a range of website building areas, from content slider to feature slider, and image and banner rotator. Consider using it when you want to grab the user’s attention.
