40 New Useful Web Development Tools and Resources

To become a professional web designer, you need effective tools that would help you implement beautiful designs with solid coding techniques. Handy ready-to-be-used solutions and smart design tools are always nice to have, but good ones are often quite hard to find. And this is where we come into play. In this post we have put together a useful collection of new web development tools to save developers and designers time, energy, and headaches. Let's take a look at 40 new useful web development tools and resources in a goodie bag for you, including easy and fast tweaks to forms, snippets of code, documentation at your fingertips, fonts, and cheat sheets. Also consider our previous articles: Fresh Web Development Goodies Bag with 30 extremely useful development tools to inspire you and make your life easier.

Cheat Sheets

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.

PacketLife Cheat Sheets This site has a multitude of PacketLife Cheat Sheets. These cheats are broken down into the following categories: Protocols, Applications, Reference, Syntax, Technologies, and Miscellaneous.

CSS Specificity - Cheat Sheet One of most common difficulties with CSS is determining what CSS rule will be applied on the page. But it's actually not so hard to understand how these rules are applied and the order of CSS Specificity. Here is a CSS Cheat Sheet to help you understand CSS Specificity better.

Cascading Style Sheet Level 2 Visual Cheat Sheet CSS2 Visual Cheat Sheet a useful and practical reference guide to Cascading Style Sheets Level 2 for web designers and developers. This cheat sheet (3 pages) contains an essential reference to CSS2 properties with detailed descriptions and some sample code. The simple visual style used to design this sheet allows you to find at a glance everything you are looking for.

QA Style Sheet The QA style sheet highlights specific HTML problems like use of deprecated elements, inaccessible images, layout tables, empty elements, or styling-related maintenance issues. Theoretically, it is “unobtrusive” in a sense that when everything’s fine it won’t cause any visible changes.

Complete WordPress Cheat Sheet The number of WordPress functions can be dauntingly. Print or save a helpful cheat sheet for future reference.

Visual Cheat Sheet CSS Compatibility This Visual Cheat Sheet will help you to understand CSS behavior in IE6, IE7 and IE8 versions. The two page cheat sheet contains some important CSS references like rules, elements, attributes, pseudo-classes, positions, and more all in one handy reference.

HTML 5 Pocket Book This is a useful quick reference guide to develop your site in HTML 5.

JavaScript 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.

247 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.

Firefox Extensions

CSS Usage CSS Coverage is an extension for Firebug which allows you to scan multiple pages of your site to see which CSS rules are actually used in your site. It works by opening up the first page of the site you want to check and pressing the "Scan" button in the "CSS Coverage" Firebug tab. In case of a rich (Ajax or DHTML) site, open up as many divs, pop-ups or tabs in the page as possible and press "Scan" again. Visit other pages of your site and press "Scan" again. Each time you press "Scan", the CSS files that are included in the current page are shown with the number of times the rules has been found applied on your page before it.

HttpFox HttpFox monitors and analyzes all incoming and outgoing HTTP traffic between the browser and the web servers. It aims to bring the functionality known from tools like HttpWatch or IEInspector to the Firefox browser. Information available per request includes: Request and response headers, Sent and received cookies, Querystring parameters, POST parameters and Response body.

Useful Tools and Resources

cu3er - The Free Flash 3D Image Slider 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.

Juicer - a CSS and JavaScript packaging tool For best performance, CSS and JavaScript should be served up using as few requests and bytes as possible. Juicer is a new command line tool that helps by resolving dependencies, merging and compressing files. It can even check your syntax, add cache busters to and cycle asset hosts on URLs in CSS files and more.

IxEdit IxEdit is a JavaScript-based interaction design tool for the web. With IxEdit, designers can practice DOM-scripting without coding to change, add, move, or transform elements dynamically on your web pages. IxEdit is especially useful to try various interactions rapidly in the prototyping phase of your web application.

FireCrystal FireCrystal is a Firefox extension that helps designers and programmers alike figure out how interactive behaviors on the web work. FireCrystal allows users to "rewind" their interactions with web pages while showing the relevant code. It is currently an alpha release and can suffer from very long load times or crashes in more Javascript-intensive pages.

Code Snippets Gallery To find some snazzy CSS tricks all in one convenient place, check out the code snippets gallery. There are snippets for CSS, .htaccess, HTML, JavaScript, jQuery, PHP, and WordPress.

eCSStender Take control of your CSS. Say goodbye to the browser-specific properties and hacks cluttering your files and say hello to lean, mean CSS. With eCSStender, when you write the rules, browsers pay attention.

Old Version Old Version has exactly that, the older version of some of your favorite programs. Why? Because newer is not always better. Sometimes the newer versions cause conflicts. This way, you can always go back to the older version that worked for you.

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.

Fonolo Let's face it, calling large companies is a hassle: Wading through those dreaded touch-tone menus ("Press 1 for English"), scrambling to find your account numbers, scribbling notes to keep track of which agents said what. Good news! Fonolo is a free web-based service to call a company, letting you skip past their phone menus, automatically entering your account numbers, and creating a detailed call history for each company, with notes and recordings. Connect to the right person with less stress and hassle. jQuery ListMenu Plugin jQuery ListMenu Plugin allows you to easily convert a long and hard to navigate list into a compact, easily skimmable 'first-letter' based menu, allowing quick and 'out-of the-way' access to hundreds of items. Users hover their mouse over a letter and a list of all list items that start with that letter appear in a submenu. Removing the mouse pointer from the letter or menu closes the submenu.

Trademarkia Trademarkia is the largest, most accurate, and most complete free search engine for U.S. federally registered trademarks on the Internet. They provide up to the minute contextual information about the current use of interesting business names, slogans, and logos through pictures, commercials, and conversations from Flickr, Google, Youtube, and Twitter for each U.S. trademark filed with the United States Patent and Trademark Office (USPTO) since the year 1870.

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.

HiFi RegExp 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.

Documentation and Reference Guides

imedo / css_doc This is a documentation generator for CSS files, similar to Javadoc or RDoc. It extracts file-scope documentation for each CSS source file; extracts documentation for rule sets (i.e. a set of selectors separated by commas with a declaration). Files can be separated into several sections. For rule set documentation, HTML code examples can be incorporated into the documentation.

gotAPI gotAPI.com provides search and documentation at your fingertips. For developers, this is a fast and vast collection of quick references for HTML, CSS, JavaScript, AJAX, Web2.0 and other software technologies.

Forms

FormToWizard 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.

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.

Accessible, Custom Designed Checkbox and Radio Button Inputs Styled with CSS (and a dash of jQuery) Styling checkbox and radio button inputs to match a custom design is nearly impossible because neither reliably supports basic CSS, like background colors or images. To remedy this we developed a concise jQuery plugin based on progressive enhancement that leverages an input element's built-in functionality and accessibility features and works in all modern browsers without added markup or mandatory CSS classes.

Timeframe Timeframe is a click-draggable, calendar that offers users to pick a date range for their input.

Scalable CSS Buttons Using PNG And Background Colors With this article and script, you can create dynamic CSS Buttons using PNG transparency and background colors that degrade nicely and will support full scalability.

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.

A rich password widget for your 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.

Linkification Linkification Converts text links into genuine, clickable links. To view and set options, you can (1) use the Linkification right-click context menu, (2) right-click the status bar icon and click "Options", or (3) click Tools->Extensions, and double-click the Linkification item.

Fonts

jQuery Powered Text / Font Resize Widget Text resizer, or Font resizer comes handy when dealing with readers who browse in different browser resolutions. It gives them the power to choose the way they read the blog. ThisjQuery widget allows your users to resize text/font on your blog.

Code Style: Most common fonts Selecting the right and correct font is important. How sure can you be that the font you specify will be present on the end user's machine? This is a list of the most common fonts for Windows, Mac and Linux and should give you greater confidence in selecting a font.

IE6 Helpers

IE6 CSS Fixer As web developers, we want IE6 to just die and roast in hades. But until that happens, this is a handy tool. This tool decreases the monkey work when starting an IE6 CSS fix file. It applies a series of basic fixes that are known to conquer many problems and cause as little harm as possible. It is meant to get a good head-start by fixing roughly 40-60% of all your IE6 issues with just one click, outputting a rough CSS that can be placed in a separate section and can be used as a solid start to finish up the rest of your IE6 debugging work.

Ultimate IE6 Cheat Sheet: How To Fix 25+ Internet Explorer 6 Bugs After scouring the web for resources, here is the ultimate list of IE6 fixes put together in a reference manual as a resource for anyone who has to deal with Internet Explorer 6.

Paddy - Venn Diagram of IE6 Well, that's not really a help, but it says it all. Venn Diagram of our favourite browser, Internet Explorer 6.