26 Must Have Resources for the Web Developer’s Toolbox
In every creative field, there are certain tools that one always keeps handy in order to get the job done. As developers (who also design) the toolbox inventory needs to be broad to encompass all the necessary areas to keep you moving and productive. Below is a list of the resources that we felt should be included in any developer’s toolbox.
We have broken it down into different categories to help you keep your tools organized a little bit better. We hope that the list proves useful.
Design
While Photoshop is the best graphics tool for designers, we realize that it’s above some new designer’s budget. GIMP is a close second whose price you can’t beat (free), especially for web designers who don’t need all of the features of Photoshop.
Graybit is an online accessibility testing tool designed to visually convert a full-color web page into a grayscale rendition for the purpose of visually testing the page’s perceived contrast.
The Color Wizard lets you submit your own base color, then automatically returns matching colors for the one you selected, complete with hex codes. It returns a set of hue, saturation and tint/shade variations of your color, and suggests color schemets based on your color’s complementary color, split complementary colors, and other variations.
FavIcon Generator allows you to easily create a favicon from an image.
Grids
The Grid System is an ever-growing resource where graphic designers can learn about grid systems, the golden ratio and baseline grids.
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem. Also check out Fluid 960
jQuery
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
The jQuery Visual Cheat Sheet is an useful and practical 6 page reference to jQuery 1.3 for web designers and developers containing the full jQuery API reference with detailed descriptions and some sample code.
jQuery Plugins contains plugins, extensions and tutorials developed by jQuery contributors for the jQuery JavaScript Library.
CSS
Code Beautifier is a free online CSS formatter, optimiser, and parser.
Em Calculator is a small JavaScript tool which helps making scalable and accessible CSS design. It converts size in pixels to relative em units, which are based on a text size.
Text Editors
Notepad++ is an open source code editor and Notepad replacement that supports several languages. Running in the MS Windows environment, its use is governed by GPL License.
TextWrangler is a powerful and richly featured tool for composing, modifying, and transforming text stored in plain-text files for Mac.
WordPress
The WordPress Codex is the place to go if you have any WordPress related questions.
The Wordpress Virtual Cheat Sheet is a 5 page practical reference guide to WordPress 2.8. It contains the full reference guide to WP Template Tags with detailed descriptions and sample code.
Thematic is a free, open-source, highly extensible, search-engine optimized WordPress Theme Framework featuring 13 widget-ready areas, grid-based layout samples, styling for popular plugins, and a whole community behind it.
Cross Browser Testing
The Spoon Browser Sandbox allows you to run any browser directly from the web.
Adobe BrowserLab allows you to preview and test your web pages on leading browsers and operating systems – on demand. It probably won’t be free forever so use it while you can.
IETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP, as well as the installed IE in the same process.
Other
Web Developer’s Tools for Firefox is a collection of firefox plugins to speed up the development process. Troubleshoot, edit, and debug web projects without ever clicking away from Firefox.
Filezilla is a free FTP solution for Windows, Mac and Linux.
WampServer is a Windows web development environment which allows you to create web applications with Apache, PHP and the MySQL database. It also comes with PHPMyAdmin to easily manage your databases.
MAMP installs a local server environment in a matter of seconds on your Mac OS X computer, be it PowerBook or iMac. Like similar packages from the Windows- and Linux-world, MAMP comes free of charge.
Coda is an all in one web development tool for Mac. It includes a text editor, ftp client, CSS editor, terminal and more.
CSS Tricks Code Snippets is a large repository of useful code snippets in the areas of HTML, CSS, JavaScript (raw), JavaScript (jQuery), PHP, and WordPress.
HTML-Ipsum is a Lorum Ipsum snippets site for adding dummy content to your web designs.
Here Endeth the List
That concludes our compilation. Feel free to hit us up in the comments for your thoughts and opinions. And if there are any tools that you feel we overlooked, feel free to throw us a link and let us know a bit about it.
Grab the Feed
Awesome list of tools here, thank you! Found some I had not heard of, thanks!
Agreed Ryan. This list really do have some great stuff. i like most is jquery
thanks for the list, it will be very useful.
May I suggest you add Komodo text editor?
Thanks for the suggestion Paul, I’ve never heard of Komodo but will definitely go and try it out.
Jeepers! Leapers! Thanks for all the nifty stuff. Yaaaaaaaaay!
Mucho thanx againo,
@IZN_URRHED
Another one for the list: http://www.blueprintcss.org/ have found it easy to integrate with wordpress via the sandbox theme (http://www.plaintxt.org/themes/sandbox/) which btw is the basis for Thematic. A link to great tutorial is included on the blueprint site.
Thanks Matthew. I’ve never used Blueprint but have read some pretty great things about it. I didn’t know that it easily integrated with wordpress though. That will probably push me to try it out now.
Hi Angie,
It can be if you are working with a framework like Sandbox. Check out this tutorial:
http://blog.nedsferatu.com/wordpress-sandbox-and-blueprint
It requires 1 action on the command line to trigger the compiling but it’s very easy.
Nice list! I hadn’t even seen some of these. I like that jQuery plugins site.
Where is FireBug?
Hey Tomasz, there are so many great web development addons for Firefox that I didn’t want to list them all individually. So Firebug is in the Web Developer’s Tools for Firefox which is the first listing under Other.
My anti-virus program (F-Secure) is always complaining about trojans in the Spoon Sandbox Manager folder. Not sure if they came from Spoon, or if they just decided to hideout in that folder, but either way, I avoid Spoon now. I had to re-install windows to get rid of them.
Thanks for the heads up on this. I’ve never used Spoon but was planning on moving over to it once Adobe Browserlabs weren’t free anymore. I’ll definitely do some research before I install it now.
Hi Edmonton / Angie,
This is an acknowledged false positive in the AV vendor’s database. Please update any AV software to the most recent versions and the warnings should go away.
Thanks,
- Spoon Support
Awesome list! There are some I use already and some I plan to try out! Thanks!!!
Very useful.
Btw. along with WAMP and MAMP there is XAMPP which can be used on linux (and windows and mac).
Thanks for the tip. I didn’t realize that XAMPP worked on all three. I’ve used it on Windows before but prefer WAMP. The differences are pretty minor though and XAMPP definitely got the job done.
Man, dynamic drive is like one of the first websites that got me into webdesign..Definitely going to bookmark these for later reference..
Nice list, thanks.
I love this tool ( http://iconverticons.com/ ) for making icons from any image (including .ico)
Thanks so much for the link Mark. I had never heard of iconvert and it will be so useful to me!
cool resources for both category designer and developers i think not only for developers.
Thanks for this useful list …. Em Calculator is one I find particularly helpful. An awesome tool.
Thanks for the list, IzzyMenu tool could be also added here for menu building process.
Thanks for the recommendation Simon, I’ll be sure to check out IzzyMenu.
thanks for this great tools
Thank you! Thank you! Thank you!
Thank you for the list! WordPress virtual cheat sheet is awesome and very helpful.
Hi Angie, thanks for the mention of my jQuery and Wordpress Visual Cheat Sheets!
No problem Antonio, I’ve found the Wordpress cheat sheet very helpful since downloading it!
Great list of web tools. I will definitely be bookmarking this for reference, as a lot of these tool will be very useful for me. Thanks for sharing these with us.
very very useful. thanks.
Great list. Sadly, some of these tools i’ve found out about just recently, and others this is the first time coming across them. Gotta bookmark this list to come back to later! :-)
How about TextMate (http://macromates.com/)?
Great text editor!
Typetester by Marko Dugonjić is also a great tool! http://www.typetester.org
You can test different fonts, font sizes and styles and compare them side by side.
useful resources, thanks for great list..
Perfect collection. Thanks alot.
good list thanks
Outstanding list. I have several Firefox addons. Sure makes things quicker. I’m also a big fan of Text Wrangler. I’ll have to try out the cross-browser testing. Been doing testing the hard way right now.
Nice List. Thanks :-)
Great list. Didn’t know about CSS Beautifier though, I will have to check that one out. I also didn’t know about spoon, I had been doing it the hard way until Adobe Browser Labs came out, and used IE Tester for testing on IE (of course.)
Another resource that is great is Googles Speed Page add-on for firefox. It lets you know how long it takes for a page to load, and what can be done to improve the speed.
Perfect collection. Thanks alot.
thanks a lot it’s very helping to know that there are plenty options and resources available
Great list here, very few I DON’T use :-)
Great list, but I came looking for Developer tools. These are Designer tools. Might help with SEO if the title is changed.
WOW..These are really a awesome collection for free resources which are very useful at some point during designing phase to the testing phase.
Another resource that is great is Googles Speed Page add-on for firefox. It lets you know how long it takes for a page to load, and what can be done to improve the speed.
nice list of resources. i’m a web developer and i have to admit i didn’t use not even half of them… although i might give a try to a few of them, like gimp, which i don’t like… photoshop is better, but it’s price is quite spicy:D