Elance Blog

Essential Tools And Sites For Every Web Developer

As a web-developer hobbyist, I can say without hesitation that one of the most gratifying experiences known to mankind is finishing up your code, publishing your website, and seeing your work live on the Internet for everyone to peruse.

However, the journey to a completed, fully-functioning, aesthetically-pleasing website is a long and arduous one, even for the most experienced developers. Oftentimes, the process of putting a web destination together can be riddled with researching, inefficiencies, testing, and more.

Net Tuts+, a great source for web development tricks and tutorials that I frequent, recently published a fantastic article that showcases “20 tools to make the life of a web developer easier”. This isn’t just some list of “neat” programs – this list has a number of robust, efficient, time-saving applications and extensions that will definitely save you a boatload of your valuable time. Web heads, take note!

The list features a few heavy hitters that many web developers like yourself have probably already heard of, like Firebug, which allows you to make live edits to CSS, HTML, and JavaScript code in real time, and Web Developer Toolbar, which adds an extra menu item and toolbar chock full of web development tools . There are, however, a few really awesome tools on this list that I haven’t run into before and are ones that I believe are truly essential.

Typetester is an amazing website that gives you the opportunity to take any text snippet you have and manipulate it with any font, font size, color, background, alignment, leading, decoration, and more, and it will give you a quick preview of how your text will look exactly before investing the time to program all of the font specifications in. To top it all off, it will spit out the necessary CSS code for you to slap into your own site.

Font Burner is another fantastic one. If you’re tired of worrying about using a font on your website that your users may not have in their font collection, Font Burner offers you a way use one of their 1000 fonts they have available by dropping in a fragment of code on your site. This allows the font to be displayed on all web browsers, regardless of the local machine’s font collection. And did I mention that it’s completely free? Awesome!

Here are a few extras that I personally use that didn’t make the list:

Everystockphoto is a stock photo website aggregator that searches a wealth of photo sites, like stock.xchng and Flickr, to give you the photo you need in a legal fashion, of course. The site features 4,458,965 free photos for you to search through, and you’re also free to rate, tag, collect, and comment until your heart is content. (Want more? Check out our blog post that’s all about stock photos.)

Favicon is the site you want to use to create your little 16 x 16 pixel icon that shows up next to your URL in your web browser. It is extremely simple and straightforward to use, and if you’re short on ideas, you can browse through what others have published. Who says you can’t do anything with 16 x 16 pixels? I’m sure many of you could instantly recognize the Facebook, Yahoo!, and LinkedIn Favicons without even thinking twice.

Google Analytics is a free tool that allows you to keep close tabs on all of your traffic. You can sort by your most popular pages, see which sites are sending you the most traffic, and will also tell you in which geographic locations your website is a hit. You can compile all of your relevant data in various charts and graphs, and you can create, save, and edit custom reports that present your metrics in a form that fits you best.

If you’ve got a little free time in between web projects, be sure to check out Net Tuts+ full list of 20 tools – there’s enough to go around for everyone. And this one goes out to all of our web developers here on Elance: What part of the web development process takes the longest for you? And what applications do you use to streamline your development experience? Hit me with your best shot in the comments below.

Links:
Net Tuts+ - 20 Tools to Make the Life of a Web Developer Easier
Elance - The 25 Best Sites For Finding Stock Photos