Nov 02 2009

40 New Useful Web Development Tools and Resources

Advertisement

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

HttpFox

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

IxEdit

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.

FireCrystal

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

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.

eCSStender

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

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.

Fonolo

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

Trademarkia

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.

Haystack

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

gotAPI

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.

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
Timeframe is a click-draggable, calendar that offers users to pick a date range for their input.

Timeframe

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

Linkification

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.

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

About the Author

Comments and Discussions
  • Janko, 02 November 2009

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

  • joyoge bookmark, 02 November 2009

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

  • Vladimir, 02 November 2009

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

  • Eric B., 02 November 2009

    Some very useful resources. Thanks for sharing!

  • Ben Weller, 02 November 2009

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

  • DisAstro, 02 November 2009

    Nice list, some good ones here.

  • Onnay Okheng, 02 November 2009

    very useful resources. Thanks for sharing! ^_^

  • ChillyBin Web Design, 02 November 2009

    Awesome list of resources!

  • Matthew Simmons, 02 November 2009

    I really liked the last one! =P

    The wordpress cheat sheet is my favorite though.

  • Architela, 02 November 2009

    Some really great tools here. Thanks.

  • dotndot, 02 November 2009

    Awesome collection.Thank you.

  • Tim, 02 November 2009

    Loving Haystack – what a great idea!

  • designfollow, 02 November 2009

    thanks for this great post.

  • Melody, 02 November 2009

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

  • Tai, 02 November 2009

    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.

  • Splashnology, 02 November 2009

    Check this one: WordPress Template Designer CheatSheet
    http://www.splashnology.com/blog/wordpress/223.html

    Thanks

  • ray, 02 November 2009

    useful tools and resouces, thanks for share..

  • Bored, 02 November 2009

    YAWN.

    Again another post claiming to be “new” information.

    Same old thing.

  • derschreckliche, 02 November 2009

    Nice collection of useful tools!
    THX for sharing!

    @Bored:
    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?

    Cheeeeeeeeeeeeeeers
    derschreckliche

  • Grey, 02 November 2009

    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

  • Rahul Chowdhury, 03 November 2009

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

  • upladupla, 03 November 2009

    Creme de la creme.
    TNX Noupe.

  • Matthias Matz, 03 November 2009

    Great Article more please

  • hassle free websites, 03 November 2009

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

  • jittiang, 03 November 2009

    useful and great post. Thank you!

  • Webmisstress Anne, 04 November 2009

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

  • Bene, 05 November 2009

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

  • shawnp4h, 05 November 2009

    Very Helpful.

    definitely I will use for my website designs…

  • Premium Theme Club, 05 November 2009

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

  • wparena, 07 November 2009

    Very help tools, few are new from me

  • cemilcelik, 08 November 2009

    very good collection. thanks a lot. great work.

  • Bemoi, 11 November 2009

    thanks alot, thats a very nice collection of gr8 resources

  • Suresh, 13 November 2009

    Very useful, thanks

  • Miguel, 03 December 2009

    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

  • Chanchal Kumar Ghosh, 24 May 2010

    JQuery Visual Cheat Sheet moved to http://woorkup.com/ . Download location of JQuery Visual Cheat Sheet is now http://woorkup.com/wp-content/uploads/2009/09/jQuery-Visual-Cheat-Sheet-by-WOORK.pdf

  • PhotoAlbert, 30 August 2012

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

search form
 
image description image description