As a web developer, having the essential set of tools at your disposal is critical. Over the last couple of years I have grown accustomed to using a few different software packages and websites to make my life easier. This post will explore the tools and tricks that have made my life as a web developer much more enjoyable.
Web Developer Toolbar Extension
What can I say about this little tool? Simply essential. My only wish is that they would release something similar for Internet Explorer. This software is an extension of Firefox that gives you an immense set of in-browser tools to help you troubleshoot and optimize web sites and applications. My favorite feature is “Outline: Block Level Elements”, which superimposes a multi-colored grid over your design, giving you a detailed view of the underlying structure of your otherwise invisible design grid. Another great feature is the “Edit CSS” tool, which opens the style sheet in a sidebar and allows you to make changes to the CSS while the browser responds in real time to your changes. There really are too many features here to list, but I guarantee it will make your life much easier.
As far as HTML/coding environments, I’ve decided that simplicity trumps multiplicity of features in the long run. I’ve tried lots of different editors. I’ve tried WYSIWYG editors like Dreamweaver, GoLive, and Frontpage and I’ve tried HTML-assisted environments like Homesite, HTML-kit, and EditPlus. I find that WYSIWYG editors produce a lot of garbage, useless invalid markup, and generally undesirable results from a standards-compliant, cross-browser compliant standpoint. With the HTML assisted environments, I find the “wizards” that allow me to build complex tags from different dialogs are actually slower and faster to just type in manually.
Enter Texturizer. Simple, lightweight, and the only feature I need; “Syntax Coloring”. Texturizer has support for all the major programming and scripting languages. Only $20 bucks to boot. It may not be the most popular editor, but I think it is great.
I doubt any of you haven’t heard of this great product by Macromedia. In my opinion, Fireworks is superior to Photoshop for designing logos and web graphics. I can see Photoshop as the preferred tool for doing detailed print work and photographic touch ups, but for ease of use you just can’t beat Fireworks. The way it handles layers is much more intuitive than Photoshop, allowing you to visually select distinct layers by clicking on an object within that layer. In Photoshop, it is hard to determine which layer you are working with and which layer a particular object exists on. The price is a little steep at $300, but the product is seriously powerful and probably worth it.
By far the simplest tool I have ever used, Nattyware’s Pixie is surprisingly useful. Put simply, It’s a color chooser for your entire screen. I just let mine run in the background, whenever I need to extract a color from a website or a photo, I just place my cursor over the color and press alt+control C. The color is instantly placed in my clipboard as a hexadecimal value I can use in my HTML.
Two great websites for picking out color schemes for your designs. Simply choose one color from a predesignated palette and these programs will automatically determine an array of matching colors which harmonize with your selection. The latter allows you to save color combinations directly on the site. If your color blind, or simply looking for inspiration, these sites are a great place to start.
One of the coolest Java applications I’ve ever seen, GotoMeeting allows you to easily setup virtual meetings with clients over the web and telephone. This pay service sets up a private conference call bridge, a chat room, and a screen sharing application which really helps when showing demos to clients or troubleshooting problems. Total snap to install too, simply click “Yes” to the dialog when you go the meeting and the Java Applet starts itself.
Great open source FTP program. I’ve never had luck with the FTP features embedded within HTML editors, so I always stick with the reliable third party FTP clients (namely FileZilla). FileZilla is intuitive, exactly what I need to push content out to my websites. Managing multiple sites is a breeze, and the dual-paned file viewing for local and remote files is simple and intuitive.
ParticleTree, A List Apart and TechCrunch
These sites are really great sources of information for designers and developers. ParticleTree and A List Apart are great resources for standards-based design, agile development, and development best practices. I use TechCrunch as more of a news source to keep track of all the great (and not so great) Web 2.0 applications emerging this year. Mike Arrington does a great job of profiling new companies and really keeping a pulse on the Web 2.0 movement. Keeping up to date with what is happening in your field is difficult, and these sites do all the heavy lifting for you.
A pretty comprehensive Javascript library for creating rich user interface elements using AJAX. Some of the effects may be a bit trendy and considered superfluous eye candy, but some of the features of the framework (such as the drag and drop functionality) make this library extremely valuable.
The dream team of web-based version control software development, TRAC and Subversion help multiple developers working around the world collaborate on a software project seamlessly. Subversion is a version control system much like CVS, it helps developers track changes to their code as development progresses. This allows you to keep up-to-date versions of your source code no matter where in the world you are working, as well as keeping a central repository of log messages to help you understand changes made to the code by other developers. Subversion plugs right into TRAC, which puts a great front-end onto the Subversion functionality. You can browse the Subversion repository, track bugs and feature tickets, as well as sketch out ideas on the integrated collaborative Wiki.
This software is web-based tracking, invoicing, and reporting for the part-time independent contractor. I really wish I would have found this tool sooner, as my organizational habits are a bit lacking. This is a lot like 37Signal’s Basecamp, except free. The interface is well done, and the software is really tailored to the independent developer.
I admit, I am a statistics addict. I check my stats multiple times a day, it’s a serious compulsion. There is no better way to feed that addiction than with real time stats. I have been using the excellent ShortStat, which is the humble predecessor to the gorgeous new stat software Mint. Besides lacking the additional extensibility of Mint, it provides everything I need to know, without having to throw away $30 bucks. I put this on all my websites, it is a great feeling to know people all over the world are looking at and appreciating your work.
Update: Forgot a couple things …
Invaluable community of royalty-free, stock image providers. Always fresh content, and you can get imagery for your website for as cheap as $1.00 per image. Great alternative to those hipsters at Veer.com.
Beautiful collection of stock icon sets from the brilliant designers at Firewheel. Icon sets can be a little expensive for the independent developer, but they are so professional and functional that it will make your web application 100% more appealing.
So, anything else I’m missing? I know there are tons of tools out there for the web developer, fill me in!
4 Comments
Jump to comment form | comments rss [?]