I’m always fascinated with what tools others are using. I like seeing icons that other have in their doc at conferences. Here are the tools that I use when I am creating a website. This list is Mac specific, but I’m sure some of the tools are on Windows as well.
First things first, MAMP PRO. Always do your development locally on your computer before before it goes on a server. I think the term is “cowboy coding” when you edit right on the server (which I used to do!). MAMP is a free application, but the Pro version lets you easily create local hosts without having to fuss with your hosts file. I usually create a host called ‘mysite.dev’ and point it to a directory in my Sites folder i.e. /Users/<Your Name>/Sites/mysite. If you add an index.php file in this directory you should see the results by going to http://mysite.dev in your browser.
Speaking of the browser for my everyday web surfing I use Safari, but when I am developing a website I use Firefox with the Firebug extension. I find it to be easier to use than the Safari or Chrome Development Tools.
If your not using version control do it now. It sometimes feels like a drag until it saves your butt one day when you accidentally delete something. Code, test, then commit. And enter detailed commit messages because “bug fix” doesn’t mean anything in a month. Even if you are the only developer on a project it is still worth the effort to use source control. All the commit command line code can be a bit overwhelming, so I use Tower which does all the command line magic for you. If I am creating a WordPress site, the only directory that I will add to source control is my Theme directory.
Once I am ready to take my commit live to the production server I use Beanstalk. Beanstalk is integrated with Tower which is a plus. This is your remote repository. After a commit is made you can then push that commit to Beanstalk. You can setup your FTP information from their website and deploy the changes as needed. Depending on how you want to set it up, you can also auto-deploy when a commit is made. This only replaces the files that have been changed.
My default code editor is Coda. I don’t use a lot of the bells and whistles that it provides, but I like its style. Specifically I use the ‘Specials Board’ style sheet to make it look like I am a seasoned hacker with the dark background, but it has a very readable syntax highlighting. I also use the WordPress Additions plugin that adds autocomplete of WordPress functions.
I use CodeKit for my CSS pre-processing and minification. Have you ever created a stylesheet and needed to change a color throughout the site? This is what CSS pre-processing is for. You can use variables the same way you do in PHP, so when you need to change a color, you are just changing it in one place. I use SASS, so I will create a directory in my project called ‘scss’ where my SASS files are located. After they are processed a minified style.css is created. This happens automatically as long as CodeKit is open while you are developing. Just drag your project folder on CodeKit and it will now “watch” for changes. I also use code kit to combine all my JavaScript files and minify those as well. As a bonus there is also an image optimizer, so after all three of these your site will be nice and speedy by loading these reduced files.
Lastly I use Photoshop for image manipulation. Not much to say about that, Adobe has consistently created the best in breed product. The majority of what I do in Photoshop is take layered designs and crop out the elements that I need for a website.