Free Tools to Make a Web Developer’s (and Designer’s) Life Easier

Who doesn’t love free stuff? Most of the time the saying “you get what you pay for” applies, but every once in awhile sometimes you do get a free lunch. Whether it’s testing jQuery code, checking to see how a site looks in different browsers, or coming up with a color scheme, the following free tools have been extremely valuable in helping me get my work done.

VirtualBox

Originally developed by Sun, Oracle’s VirtualBox is a great piece of free software.Let me repeat that. Great piece of free software. It’s so good they should charge for it. Really.  In case you’re unfamiliar with VirtualBox or virtualization in general, what VirtualBox does is allows you to turn one computer into as many different computers as you like by giving you the ability to run almost any operating system as if it were an application. No dual booting, no partitioning, no reformatting. You can create and destroy virtual machines at will.

So why is this great?

Because being able to quickly build a machine you wouldn’t otherwise normally have access to, or may not want to change, allows you to test and develop without the cost of having to buy the extra hardware that used to be needed for this. Plus, everything is right at your fingertips. Need to test on IE6 under Windows 98 (God be with you), no problem. Need to test on Ubuntu with Opera? No problem! Just fire up a virtual machine and you’re at work. And with today’s computing power, virtualized machines run as just about as fast as if they were a separate entity. And, not only are they good for testing designs across browsers and OSs, they’re great for setting up as development servers. Oh the possibilities! And all for free.

VirtualBox is a powerful x86 and AMD64/Intel64 virtualization product for enterprise as well as home use. Not only is VirtualBox an extremely feature rich, high performance product for enterprise customers, it is also the only professional solution that is freely available as Open Source Software under the terms of the GNU General Public License (GPL) version 2. Presently, VirtualBox runs on Windows, Linux, Macintosh, and Solaris hosts and supports a large number of guest operating systems including but not limited to Windows (NT 4.0, 2000, XP, Server 2003, Vista, Windows 7), DOS/Windows 3.x, Linux (2.4 and 2.6), Solaris and OpenSolaris, OS/2, and OpenBSD.

jsfiddle & JS Bin & JSONLint

jsFiddle, JS Bin, and JSONLint are websites that let you develop, test, and validate JavaScript in your browser. My favorite of the three is jsFiddle due to its combination of simplicity, speed, and options. jsFiddle and JSBin allow you to take HTML, JavaScript, and CSS and display the combined output in your browser without having to save and load files. Previously you might open a web development tool or IDE, create a file, add some code, save it, load it up in your browser, check the results and repeat. Now you can just go to a website, drop in your code and hit run. You can also share your code with others which is another huge plus. Being able to not constantly save files to see changes in your code is a giant time saver.
JSONLint is a free online tool to validate JSON data. Simply drop in your code and click validate to see if your JSON is valid. Couldn’t be simpler. This comes is especially handy when you’re dealing with AJAX requests and can’t figure out why your data isn’t coming across as you expected that it would.

jsPerf

According to their website, “jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks”. In other words, jsPerf allows you to compare snippets of JavaScript code head-to-head. Is it faster to use jQuery’s .find() or .children() function? Not sure? Quickly build a test and jsPerf will show you the results which you can also share with others (see, I told you .on() was faster than .live()!).

Dummying things up

I don’t know a designer or developer who hasn’t had the need to use placeholders. be it text or images, at some point you’ll just want some filler to stand it for the real content later. This is where placeholders and dummy data fit nicely. Fortunately there are several great free services that allow you to do just this.

Images

Whenever I need to use placeholder images, I use either placekitten.com or dummyimage.com. Both sites provide pretty much the same service in that you can simply get dummy images from them by modifying the URL you use. For example, need a 250×80 image fast? Use http://www.placekitten.com/250/80/. Couldn’t be easier. Or cuter. For serious business placeholder images, Dummyimages.com goes one step further and allows you to specify the background color, foreground color, text, and format of your image. Notable mention: http://www.placehold.it/

Text

One site I’ve used for generating dummy text for probably 10 years (including their Firefox add-on) is lipsum.com. Lipsum.com generates that you’re probably seen before that begins with “Lorem ipsum dolor sit amet…”. While there are plenty of similar services, lipsum.com has not only been around for a very long time, but they keep things simple while providing you with plenty of options. There are plenty of other copycat sites, but lipsum.com has been around for a very long time and has stuck with what made it useful instead of trying to be something it wasn’t.

Oooh, the colors

While I like to think of myself as equal parts designer and developer, I have to admit I’m probably more of a developer than a designer. So when it comes time for some design inspiration, specifically coming up with cool colors, I turn to Adobe’s Kuhler. Kuhler is a wonderful free online tool generates color schemes. They also offer a community where you can share themes with others.

Finally, among the many useful changes in CSS3 are color gradients. While they’re a great addition, I find them extremely difficult to code from memory. So my go-to website for generating them easily is the Ultimate CSS Gradient Generator. With it’s Photoshop like ease of use, generating cross-browser compatible CSS3 gradients couldn’t be easier.

So that’s a quick roundup of some of the free tools I use in my daily work. What tools do you use?

2 thoughts on “Free Tools to Make a Web Developer’s (and Designer’s) Life Easier”

  1. Great tips! Here are some that I use:

    http://border-radius.com/
    http://www.fontsquirrel.com/fontface/generator
    http://www.xiles.net/nexusfont/ (activate font groups without installing them, only when needed)
    https://www.dropbox.com/ (to have smaller projects at hand on multiple computers, for reference pdfs, code snippets, etc.)
    http://www.tcbmi.com/strokeit/ (mouse gestures for Windows)
    http://dropit.sourceforge.net/ (to automate file management, batch image process, etc)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>