Boilerplates & Other Tools

40 New Useful Web Development Tools and Resources

November 2nd, 2009

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.

jQuery Visual Cheat Sheets

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.

PacketLife Cheat Sheets

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.

CSS Specificity - Cheat Sheet

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.

Cascading Style Sheet Level 2 Visual Cheat Sheet

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.

QA Style Sheet

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

Complete WordPress Cheat Sheet

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.

Visual Cheat Sheet CSS Compatiblity

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

HTML 5 Pocket Book

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.

JavaScript Framework Matrix

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.

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.

CSS Usage

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.

cu3er - The Free Flash 3D Image Slider

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.

Juicer - a CSS and JavaScript packaging tool

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

Code Snippets Gallery

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.

Old Version

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.

Search and Share

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.

jQuery ListMenu Plugin

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

HiFi RegExp Tool

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.

imedo / css_doc

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



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.

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

Contact Form Study

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.

Accessible, Custom Designed Checkbox and Radio Button Inputs Styled with CSS (and a dash of jQuery)

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.

Scalable CSS Buttons Using PNG And Background Colors

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.

Adaptive web forms

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.

A rich password widget for your web forms

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.



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.

jQuery Powered Text / Font Resize Widget

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.

Code Style: Most common fonts

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.

IE6 CSS Fixer

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.

Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs

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.

Paddy - Venn Diagram of IE6

Tags: ,

36 comments for „40 New Useful Web Development Tools and Resources
  1. Janko on November 2nd, 2009 at 6:28 am

    Impressive list of resources. Thanks for including warp speed articles :)

  2. joyoge bookmark on November 2nd, 2009 at 6:36 am

    very nice useful tools and resouces, thanks for share..

  3. Vladimir on November 2nd, 2009 at 7:12 am

    Cool list and very useful tools. Thanks for mentioning CSS Specificity – Cheat Sheet.

  4. Eric B. on November 2nd, 2009 at 7:34 am

    Some very useful resources. Thanks for sharing!

  5. Ben Weller on November 2nd, 2009 at 7:39 am

    Great resources… Popped it into my Very cool. Off to play with Cu3ber now…

  6. DisAstro on November 2nd, 2009 at 8:07 am

    Nice list, some good ones here.

  7. Onnay Okheng on November 2nd, 2009 at 8:15 am

    very useful resources. Thanks for sharing! ^_^

  8. ChillyBin Web Design on November 2nd, 2009 at 8:38 am

    Awesome list of resources!

  9. Matthew Simmons on November 2nd, 2009 at 8:39 am

    I really liked the last one! =P

    The wordpress cheat sheet is my favorite though.

  10. Architela on November 2nd, 2009 at 8:58 am

    Some really great tools here. Thanks.

  11. dotndot on November 2nd, 2009 at 10:15 am

    Awesome collection.Thank you.

  12. Tim on November 2nd, 2009 at 10:20 am

    Loving Haystack – what a great idea!

  13. designfollow on November 2nd, 2009 at 1:10 pm

    thanks for this great post.

  14. Melody on November 2nd, 2009 at 1:19 pm

    Awesome list of resources, will definitely bookmark the ones I can actually understand haha..

  15. Tai on November 2nd, 2009 at 1:45 pm

    This is a great resource. Thanks.
    I would add IE6 NO MORE to the section about IE6. The only real solution to IE6 is to inform and encourage users to upgrade their browsers.

  16. Splashnology on November 2nd, 2009 at 2:24 pm

    Check this one: WordPress Template Designer CheatSheet


  17. ray on November 2nd, 2009 at 2:37 pm

    useful tools and resouces, thanks for share..

  18. Bored on November 2nd, 2009 at 2:54 pm


    Again another post claiming to be “new” information.

    Same old thing.

  19. derschreckliche on November 2nd, 2009 at 5:19 pm

    Nice collection of useful tools!
    THX for sharing!

    If you know all of the tools from before, there’s no reason to get rude. There are still enough people like me out there, who don’t know all of this tools and even if there would be only one useful tool i didn’t know before, this post would still be valuable for me.
    So please treat the writers with respect even if you probably know more and/or better tools than them.
    Maybe you want to share your wisdom with us revealing some of them?
    This would be a little bit more constructive, wouldn’t it?


  20. Grey on November 2nd, 2009 at 6:05 pm

    this is great!! i’ve downloaded some of those cheat sheets and checking out many of the sites you’ve introduced, thank you for sharing! this will definitely speed up a lot of development time :D

  21. Rahul Chowdhury on November 3rd, 2009 at 3:02 am

    Its useful, thanks for these, I knew about “Search & Share”, it runs smoothly. Shared this article at !

  22. upladupla on November 3rd, 2009 at 6:36 am

    Creme de la creme.
    TNX Noupe.

  23. Matthias Matz on November 3rd, 2009 at 7:21 am

    Great Article more please

  24. hassle free websites on November 3rd, 2009 at 11:39 am

    I could guess these resources exist SOMEWHERE. But you actually find them and share them. Thanks!

  25. jittiang on November 3rd, 2009 at 11:41 am

    useful and great post. Thank you!

  26. Webmisstress Anne on November 4th, 2009 at 2:47 pm

    The Venn diagram of IE6 is so true, and made me laugh out loud!

  27. Bene on November 5th, 2009 at 6:17 am

    OMG! Such a great list of resources!. I already love IxEDIT and Haystack. Thanks a lot!!!

  28. shawnp4h on November 5th, 2009 at 10:44 am

    Very Helpful.

    definitely I will use for my website designs…

  29. Premium Theme Club on November 5th, 2009 at 10:53 pm

    Hey this is the best resource that I have ever come across recently,amazing and knowledge enhancer.

  30. wparena on November 7th, 2009 at 3:13 pm

    Very help tools, few are new from me

  31. cemilcelik on November 8th, 2009 at 7:56 am

    very good collection. thanks a lot. great work.

  32. Bemoi on November 11th, 2009 at 1:13 am

    thanks alot, thats a very nice collection of gr8 resources

  33. Suresh on November 13th, 2009 at 1:20 am

    Very useful, thanks

  34. Miguel on December 3rd, 2009 at 11:31 am

    I generally HATE these type of list posts,I think they are lazy excuses for blog content, and generally nothing more than digg or reddit bait, but this one, oh man great work, descriptions of each link, quality links, and great thumbs.

    +10 internets for noupe

  35. Chanchal Kumar Ghosh on May 24th, 2010 at 9:47 pm

    JQuery Visual Cheat Sheet moved to . Download location of JQuery Visual Cheat Sheet is now

  36. PhotoAlbert on August 30th, 2012 at 8:05 pm

    Very useful list of resources. Many thanks for posting them.