Why do you need tools?

If it weren’t for the tools we create, utilize, and improve, humans as a whole would not advanced. Most people know this, but sometimes it seems like web developers and designers love to stick to decade-old programs or workflows, without ever stopping to reconsider their process or toolset.

Websites, projects, and apps constantly go through iterative improvements – why shouldn’t the same happen to the tools used to create?

Tools or programs you should already have

There are a large handful of “tried-and-true” software and tools that most handy web industry professionals should already know about.

Consider these well known tools, libraries, and software to be honorable mentions:

There is also the best tool: search engines. Sometimes called GIYBF (Google is your best friend), search engines help you find answers quickly, as long as you never run into the dreaded “dead forum topic that matches your problem” issue:

wisdom of the ancients

[via xkcd]

Aside from those, there are plenty of other beneficial means to slick and optimized website deployment. Take a look at some extra tools to add to your web development and design stack.

1. Aptana Studio 3

aptana studio 3

Default “chalkboard” theme

Aptana is by far one of the top IDEs (integrated development environment) available for web development. It supports a hefty amount of different web languages – CSS, JavaScript, PHP, HTML, jQuery (with a plugin), SASS, XML, CoffeScript, and JSON. It is custom built on top of Eclipse, so it also supports many of the plugins built for the Eclipse platform.

Plus it is free as in free. Which means there is no barrier to just try it out.

Get it here.

2. Color Scheme Designer

color scheme designer

For those looking to create a brand new design from scratch, one of the first things to consider is the color scheme of your website. This online tool is a user-friendly and intuitive way to select colors and choose from an assortment of art theory arrangements like tetrad colors, complimentary, mono chromatic, and the popular triad compliments.

Try it out here.


Having a local web server is a simple way to improve your workflow. Instead of making modifications to several files, then connecting to an FTP server and uploading your changes, you can instead setup an XAMPP server (which has Apache, MySQL, PHP, and Perl ready to go with a one click install), to build, debug, and tweak your new website on your local machine.

Find out more here.

4. VirtualBox

virtual box

VirtualBox is a solid product that is now owned by Oracle. With VirtualBox, you can install countless operating systems within your main “parent” OS. In other words, you can still develop on your current machine, say it’s Windows 7, but also install Mac OSX, Windows XP, and Ubuntu Linux inside their own virtual machines. This will allow you to have direct access and control over each operating system to perform tests, validation, and optimization.

It’s better than dual-booting or having multiple machines running around your office or workspace, it is low cost (VirtualBox is free; operating system install prices vary), and it is much more efficient when all you have to do is open up an OS as if it’s just another program on your computer.

Even cooler is the fact that you can download ready-made pre-built servers and setups from the Oracle community website, allowing you to have a local server up and running much faster.

Find out more here.

5. W3C CSS and HTML Validators

After many projects, once the dust settles and the product or site is launched, a developer rarely comes back to optimize or validate their code or syntax. While using good IDEs like Aptana (above) can mitigate bad code output, sometimes additional eyes are useful.

In this case, the eyes are provided by W3C (World Wide Web Consortium), who have created two effective utilities to improve the quality of your work: the CSS Validation Service and the Markup Validation Service for your HTML.

It only takes a moment and can drastically clean up your mistakes or at the very least make your code more compliant and easier to maintain.

6. JSLint

Writing good HTML and CSS shouldn’t be too hard for most seasoned webbies, but when it comes to JavaScript, there is a great canyon of crap between beginners and experts. The amount of bad JS out on the internet is staggering, and even the slightest typo can break a website for a browser.

code quality measurement

Much like the CSS and HTML validators mentioned earlier, there are utilities out there aimed to tidy and trim JavaScript too.

Enter JSLint, a validator designed to tear apart your code, yell at your hacks, question you bad syntax, and generally make you feel bad about yourself. It also catches a lot of bugs and offers several practical optimization tips to help make your script the best it can be.

In all honesty, most developers would rather have an automated rule-based system tell them how sloppy their code is – hearing it from a cocky coworker is rarely enjoyable.

7. Beyond Compare

beyond compare

Beyond Compare is your typical file-diffing tool, allowing you to merge, compare, and reconcile changes to code and images produced by yourself or team members. Never again will bug solutions, patches, or hotfixes be over written! It supports FTP and local filesystem, allowing you to visually see what changed where on your server, your code repository, or your own work versus your coworker.

It also supports folder compare, allowing you to take an entire directory and quickly itemize every single file that is unequal – eliminating lost work or trial-and-error. The software itself really is beyond compare, as it is surprisingly hard to find anything else just like it.

This has a free trial, and is worth the price of purchase. Find out more here.


JSFIDDLE is basically a quick jump into an IDE, as it lets you write JavaScript, CSS, and HTML, and then test that code in a fourth window as a resulting web page. It includes many common JavaScript libraries that you can load with the snippet and allows you to load in even more custom files via external resources.


The coolest factor of this tool is the ability to share the resulting code snippets as a public link, allowing you to write a chunk of code and then send it to someone else to absorb or learn from. Furthermore, others can tinker with your code and create branches of the prototype – this essentially allows you and your team to collaborate and tweak the same script for free using an IDE-like interface and send communicate via proof-of-concept programming.

Find it here.

 , , , , , , ,