I’ve been doing web development for many years now, and over time I’ve discovered a few tools that make my life easier. I’ve used these in personal projects and recommended them to others, and I thought I’d share them here. While I’m a web guy, most of these can quite easily be used for other types of projects as well.

To begin, tools for managing the development process:

Beanstalk (SVN)

SVN is an obvious requirement for any company doing development. The problem is, SVN takes time to set up and maintain properly, and smaller companies just can’t afford to spend this time taking care of it. Beanstalk provides a simple solution to the problem with off-site SVN server hosting, but the real beauty is not in just the stock SVN server – Beanstalk have a great web interface to enable you to manage your repositories and users/permissions, as well as see the latest activity in any repository and browse the source tree. The web UI also allows you to easily diff revisions and download files at specific revisions, and you can configure Beanstalk to send you emails for every commit in pretty HTML format with a full diff. With it’s reasonable pricing and great features above and beyond standard SVN, you really can’t go past it.

16bugs (Bug Tracking)

16bugs has a few bugs itself, but overall it is a great, simple, ‘web 2.0′ style bug tracking system. 16bugs has a fairly basic feature set when compared with some of the more mature products like Trac, but its hosted, web-based nature makes it a snap to maintain.

Google Sites (Wiki)

Google Sites provides a great, simple wiki solution. Sites was created out of Google’s purchase of Jot, and while I prefer the layout of the Jot version, Google Sites is almost as good. Both products take care of the core feature set for a wiki. I’ve used MediaWiki and PmWiki for various purposes in the past, but they can be a pain to set up and I’ve really only used the most basic features of them, which Google Sites easily takes care of.

The key thing you will notice about the above is that they are all hosted solutions. In a small, fast-moving company or for personal purposes, hosted solutions are often the best option to cut down on the time needed to maintain the various systems. Had I not already vested myself in the above, I would have loved to have checked out Assembla, which groups all these things into a single product (SVN, wiki, and Trac for bug management). Though if I did go with Assembla, I’m sure I would miss Beanstalk’s great web UI.

Now, a couple of tools for the development itself:

Aptana Studio (IDE)

Originally based on Eclipse, my IDE of choice for the web is Aptana Studio. Aptana Studio was built for developing AJAX web applications, includes code highlighting and completion for HTML, Javascript, and CSS, and has plugins for PHP and Ruby on Rails. Plugins are also available to ease development for AIR applications and the iPhone.

MacFUSE (Remote Access)

Google’s MacFUSE, cutting through the highly technical descriptions, is a way for you to mount a bunch of file systems on your Mac computer. I use it to mount remote file systems on development machines via SSH, meaning I can work within my home directory on the server as if it was just another locally connected hard drive. This is invaluable when you don’t have a totally self contained local development environment, saving you the effort of having to transfer files back and forth to the server.

In a similar situation? What are your tools of choice?

There has been a fair amount of talk lately about a feature introduced in iPhone firmware 2.0 and above that allows a developer to make a web application, once saved to a user’s iPhone home screen, run in a full-screen mode without the Safari toolbars. AppleInsider wrote about it, with a fantastic demo available on the website of the WebApp.net framework.

While there has been a lot of talk about the result of this technique, I haven’t seen anywhere that describes exactly how to make your application run full-screen (sans buried deep in the Apple Developer Connection documentation). It’s actually incredibly simple, just add the following code into the <head> of your site:

Once you’ve done this, when someone saves your application to their home screen it will subsequently start without the Safari chrome. Make sure that if you do this your application has adequate navigation and plenty of feedback during loading, as users won’t be able to use the Safari back/forward buttons nor see the standard loading bar.

I think I’m somewhat of a rarity in the world of web developers – I actively use and certainly approve of CSS hacks to target and fix certain browsers. Of course, I don’t condone their use unless it is absolutely necessary, and in most cases good, standards compliant CSS should alleviate most issues before they occur, but when there is a need I think these hacks can be a great way to fix issues while still keeping your CSS logical and concise. The caveat to this is that all hacks need good comments to describe what is going on for future reference, whether that be your own or that of another developer. Also, always keep in mind that hacks can break when new browser versions are released, so always keep an eye out and use them sparingly.

I’ve always found it hard to find a good reference for these hacks. There are many sites that talk about an individual hack, but finding a single place that goes through targeting all the different browsers has been hard. This post hopes to solve that – more for my own use, but hopefully other developers can find it useful as well. What follows are the hacks that I use, which I believe to be the most logical and simple ones out there. In every case, #selector represents the element you want to apply a rule to (this can be either an ID or a class), and property and value represent any normal CSS property.

Continue Reading »