Tools for faster, better web development

Over the years most web developers will have built an arsenal of tools or "tools of the trade". Recently I discovered rsync and I am surprised how I managed to live without it all these years. What tools do you consider to be the most compelling? Please stick to the ones you use on a regular basis and swear by. They can also be frameworks, platforms, editors and whatever else you think web developers ought to be using (jquery, joomla, xdebug, vi, notepad++, etc).

I'll start off with a couple:

1. rsync - 'One click' sync to live servers or vice-versa
2. mysqldump - used alongside rsync to sync the databases
3. test styles bookmarklet - live css editor bookmarklet which beats the heck out of the 'edit > save > reload' cycle by allowing live editing.
4. javascript shell - javascript shell window attached to a window
5. firebug - advanced javascript/css/dom debugger
6. php-shell - I use this regularly for quickly testing statements, functions, classes or scripts
7. CSS-Discuss Wiki - I'd be surprised if you couldn't find a solution to your CSS problem on this wiki (in which case you should add it)
8. Font Matrix - Helps me choose font stacks
9. PHPMyAdmin - I'm certain everyone uses this for managing their MySQL databases but thought I'd add it to the list for good measure

Even though I have highlighted tools in the LAMP environment, you may mention tools you use in your environment.

LAMP stack development

• IDE: Zend Studio / PDT for Eclipse
• PHP Framework: Zend Framework
• Javascript library: jQuery
• Source code versioning: SubVersion with Tortoise client
• HTML filtering library: HTML Purifier
• Image manipulation library: php image
• Op-code cache: APC
• Javascript / CSS deployment: Minify
• Markup / javascript inspection debugging: Firebug
• Database administration: phpMyAdmin
• Page load analyzer: YSlow
• Markup validation: HTML validator
• Shell client: PuTTY
• FTP Client: FlashFXP
• The PHP manual
• Experience and skill :)

(I focused on LAMP since that is what I use for web development)

Firefox plugins for development

ColorZilla

This has proved to be very useful to me. You can eyedrop any colour (I'm going with my native spelling here) on any web page, and also on the chrome if you're inclined!

Web Developer Toolbar

The ruler is very useful! Not to mention everything else :)

VirtualBox makes development pretty easy since you can have a virtual machine be the "server" and browse the pages from your main OS. This is especially true if the OS you're targeting isn't the one you're developing for.

These are some of my basic essentials:

OS X:

• text editor: Textmate
• CSS editor: CSSEdit
• FTP tool: Transmit

Windows:

• text and CSS editor: Aptana

Cross-Platform:

• Source Code Management: Git
• Browser plugin: Firebug
• Framework: Ruby on Rails
• Javascript library: Prototype and Scriptaculous
• Navigating multiple computers: Synergy

Also, here's a write up I did a while back: Essentials of a web-developer's toolbox

Aptana Studio

Cash (to pay someone else to do it).

Edit: The question clearly says:

> Please stick to the ones you use on a > regular basis and swear by. They can > also be frameworks, platforms, editors > and whatever else you think web > developers ought to be using

It is a very reasonable point to outsource parts or all of web development.

if you find rsync helful, I'm sure you'll find unison even more so!

Just few additions/replacements to the excellent Galperin's list:

• PHP IDE: VS.PHP / Textpad
• PHP MVC Framework: CodeIgniter
• PHP ORM Framework: phpDBO
• PHP Template Framework: PHPTAL
• FTP client: FireFTP
• WAMP Package: WAMP Server

Johnny Cache - Prevents caching in Firefox for certain URLs (otherwise Firefox will occasionally cache CSS and javascript)

My list

• IDE: Visual Studio / Netbeans (zip file!, almost portable)

• Editor: notepad++ (portable) with monaco font

• File Comparison: winmerge (portable)

• Source Control: subversion, tortoise

• Ticket control: redmine

• File manager: free commander (portable)

• Web-Browser: IE, FF (portable), chrome (portable), iron (chrom without google crap, also portable), qtweb, arora,

• FF plugins: firebug, web developer, xmarks

• Imclient: pidgin

• Mail client: gmail

• Download manager: free download manager (portable)

• Sites: STACKOVERFLOW!!!, gotapi... and google, all the time...

• Miscelaneous: launchy (can't live without it!)

• Virtualization: virtual box (I have a machine image for every environment)

• Office: openoffice (portable)

• Lamp stack: xammp (portable!)

• Disk usage: windirstat (portable), scanner (portable)

• Pdf viewer: foxit (portable), sumatrapdf (portable)

• Uncompressor: 7-zip portable

• M$ sql comparison tool: sql delta

• M$ sql management: visual studio sql manager

• MySql

• MySql management: phpmyadmin, manager provided with mysql

• Uninstaller utility: revo unistaller (portable)

• Registry cleaner: ccleaner (portable)

• FTP: filezilla (portable)

as you may have noticed, I have a special predilection for portable applications...

If you like to use any of the variations of VIM as your editor of choice, one superb add on is CSS color preview, which "underlays the hexadecimal CSS colorcodes with their real color."

jQuery

I recently began to use it, and it's so easy to use! Everything becomes twice as easy to code! At least!

I can't stress this enough. A versatile library like this should not be missed, even by people like me who generally look down upon using other people's code.

Don't mind me, I'm just here to spread the word about my favorite editor/regex debugger/grepper suite. :-)

• EditPad Pro (IMO, the best damn text editor there is)
• RegexBuddy (the only real regex debugger I've found)
• PowerGREP (never use Windows Search again)

None of them are free, but they're sanely licensed and all of them support portable installation (good for the USB drive on your keychain). Best of all, the author is an SO user.

E-Text Editor, sold as 'The power of TextMate on Windows'. I find it ideal for HTML and CSS coding. It is very light and includes some great features that certainly increase productivity. Other tools of note that i regularly use are:

• Firebug
• Web Developer
• W3C Validators

CakePHP - MVC framework for php

CakePHP is a rapid development framework for PHP that provides an extensible architecture for developing, maintaining, and deploying applications. Using commonly known design patterns like MVC and ORM within the convention over configuration paradigm, CakePHP reduces development costs and helps developers write less code.

Wraps up a lot of the work related to CRUD and has so many other features that reduce the work we have to do.

http://cakephp.org/

Addition to other tools mentioned here I often find great help in having a proper debugging proxy - Fiddler (free, Windows only) and Charles (commercial, cross-platform) are great ones.

Doing front-end development, a lot of time is spent figuring out why IE misbehaves (esp. IE6). Some great tools for this are:

• Internet Explorer Developer Toolbar

• Companion.JS - this is a companion application for Microsoft Script Debugger which gives you actually helpful Javascript error messages in IE.

• XRay - this is a bookmarklet for inspecting your HTML layout. This might seem trivial, but can be really helpful for debugging your layout in IE6

I recently discovered XRefresh which automatically reloads local files (file:// URLs) as soon as you save your changes. It's absolutely great when you're at the initial stages of a project and making frequent updates to static HTML, CSS and JavaScript files in your local project directory.

Commandline http clients like lynx, wget, and curl are very useful, at least if your development style is oriented towards the command line and text tools. I'm surprised they haven't been mentioned yet.

• For example, to feed POST data to a url and print out the response headers and html output: echo 'foo=1&bar=2' | lynx -post\_data -mime\_header http://localhost/my/app
• Quick to execute (uparrow, return) once it's in your shell history, less risk of breaking flow or getting distracted than switching into the browser.
• Scriptable, modifiable, repeatable. You can precede it with a script to put the database into a known starting state, you can grep the response headers or html output for the specific thing you're interested in, and follow it with a commandline database query to find out if the finishing state is as required.

IDE: Visual Studio

Framework: ASP.NET MVC

Client side: jQuery and jQuery.ui

Internet Explorer Developer Toolbar

If you are a windows developer you MUST have a look at those tools:

• FreeCommander (A Directory Explorer With Steroids)

• Agent Ransack (Search made easy)

• Komodo & Notepad++ (A Winning Combo)

• Google Chrome (With extensions):

  • Resolution Tester
  • Pick Color From Web Page
  • SEO
  • Screenshot

• IDEs: PHPStorm, PyCharm (refactoring!!!)

• VIRT: colinux on win32

• GIT + sh

• KiTTY + WinSCP

• webinspector

• firebug + addys

• xpathbuddy (tbr)

• rhino (CLI)

• envjs

• phpsh

• xdebug + kcachegrind

• ZF

• pear

• jQuery

• closure tools

There's more to development than just coding. There's requirements capture, analysis, design, QA. Here's an introduction to the different phases of software development. I published this article on Top OSS for Coders a couple of years back but it still is relevant for me. This list includes OSS tools that are very helpful to me in all the different phases of software development and not just the coding phase.

Some Firefox addons I found to be very useful:

• Live HTTP Headers - Very useful to inspect request/response HTTP headers.

• MeasureIt - Tool to measure stuff inside the browser.

Being a windows guy having to program a cake php app for one of my clients, SFTPDrive has been very helpful for me. My VM is a Centos Linux distrib, and I work on it for the most part from my Windows environment (with some exceptions of course).

I mainly use Google :-)

To be serious, a great firefox addon is TamperData - gives you the ability to change headers and data of each request made.
The Paint.NET image editor helps me on a daily basis and I recomend it for your basic image editing needs.

RXP

Fiddler

ViewState Helper

TopStyle Lite

IE Developer Toolbar

FireBug

NetBeans or if you are a console guy, emacs

A windows box on synergy. Building in IE first and then tweaking for Firefox/Safari has brought my IE support up to par.

I recently started using HttpWatch and have found it to be great. It allows you to inspect all the HTTP traffic of your web application. What is the size of your AJAX response? Did the browser load the gif from its cache? Does your page make any requests that you didn't know about? These are just some of the questions HttpWatch can help you answer.

I'd like to add VMWare Workstation what i use for virtual development environments. I haven't tried the new eclipse vm debugging plugin yet, btw ;)

Firebug - Brilliant tool for claryfying what css is in use and what stylesheet it is coming from Crimson Editor - little editor with excellent syntax highlighting JQuery - enough said DNS Expert - Instant checks for anything DNS related

I use MyWebSQL for managing MySQL. phpMyAdmin is way too legacy.

For websites use Ruby on rails. It Generate forms, buttons, listbox for you. It generate data validation to ensure user input is correct.