My Web Development Setup

I consider myself a casual web developer. Over the past ten years I have created many websites for myself and for others, however have never charged for my work. To me web development is a hobby and I look at each new website as a mini project to practice my skills and learn new techniques.

As my work provides no revenue and most of the people and organisations I have built websites for have been on a tight budget, cost of setup and maintenance is very important. Although, just because something is cheap, does not mean it has to be poor quality. That's the great thing about web development, the only real limitation is your ability as a developer.

This article aims to explain what tools I use for web development, from hosting and DNS through to client applications for coding and image manipulation.

Before I begin it is important to note what software stack I use. Like many I develop in PHP and JavaScript usually combined with a MySQL back-end. There are obviously plenty of other choices available, including newer languages such as ASP.NET and Ruby-on-Rails. The advantage of PHP and MySQL is that they are both open-source which, as a result, significantly reduces cost of setup and maintenance, using readily available infrastructure such as LAMP (Linux, Apache, MySQL, PHP) and MAMP (Mac OS X, Apache, MySQL, PHP).

Web Hosting

When setting up a new website the first thing you need is a host. It is possible to configure your own local server to host web content, however this process can be both time consuming and complex, especially when you consider the on-going concerns such as security, reliability and performance. Therefore it makes good sense to out source your web hosting to a dedicated company that can worry about the infrastructure challenges on your behalf. For the past five years I have hosted my websites with A Small Orange. I have always found them to be a fantastic host providing the perfect balance between performance, reliability, compatibility and price. I have also heard great things about their support, however have never personally needed to use it.

The other great thing about A Small Orange is that for the majority of websites I create, I am able to opt for their cheapest "Tiny" package. It costs just £16 per year (or just £1.30 per month) which, I think you will agree, is an incredible price. The "Tiny" package is shared hosting with the following features:

  • 150MB Space
  • 4.5GB Monthly Bandwidth
  • 99.5% Uptime Guarantee
  • Intel Xeon Servers - RAID-protected 15K RPM Hard Drives
  • Linux 2.6
  • Apache 2.2
  • Unlimited POP3/IMAP Mail Accounts
  • Unlimited Mailing Lists
  • Unlimited Subdomains
  • Unlimited Parked and Addon Domains
  • Unlimited FTP Accounts
  • eCommerce ready (SSL Encryption Available)

A Small Orange gives you access to easily customise all of these features via the market leading cPanel. I think you will agree that for a package titled "Tiny" you certainly get a lot of bang for your buck. If you do decide you need more, such as additional capacity or an increased monthly bandwidth allowance then you can either purchase an add-on or upgrade to one of their premium packages. They are also one of the few web hosts that I have worked with that ensure they keep up with the latest technology, as well as automatically upgrade your server at no additional cost. Finally, although A Small Orange only specify 99.5% uptime (approximately 216 minutes of potential downtime in a month) I have rarely seen it fail over the past five years.

I suggest you head over to A Small Orange and check out the latest information on their packages. If you do decide to sign up, they offer a 30 day no questions asked money back guarantee and accept PayPal as either monthly payments or for the year.

Domain Name Registration / Management (DNS)

Once you have setup your web host you will need a domain name so that you can advertise your website and users can find it easily. There are literally a million companies that offer domain services and I have yet to find what I would call the perfect solution. For the past few years I have been using 123-reg

When it comes to DNS I look for a provider that offers advance management features with an intuitive and easy to use control panel. 123-reg offers both of these features as well as being competitively priced. As you can see from the offer above domain names can be obtained for as little as 99p per year. You simply can't argue with that pricing.

Client HTML/Text Editor Development Software

In my opinion this is the most important part of your web development toolset. The text editor is where you will spend 99% of your development time and therefore it pays to use a tool that suits your needs. As a Mac user there are plenty of great options, from the professionals favourite BBEdit, to the user friendly Espresso or the completely free TextWrangler. I use what I consider to be the best all rounder - Coda.

Coda is one window development from Panic, it combines a powerful text editor, file transfer client (FTP), Apache Subversion (SVN), CSS Editor, Terminal Access, Coding Books/Guides and much more. It is also all wrapped up in a simple to use, elegant user interface that feels right at home on Mac OS X.

Coda's toolbar consists of six options - Sites, Edit, Preview, CSS, Terminal and Books. When you click "Sites" you will be presented with a thumbnail view of your projects. As you can see from the image below I currently have two websites that I am working on.

Once selected you will get a gorgeous transition animation as it loads your site and automatically sets up your development environment so that you are immediately ready to code. This set-up process can be customised per site and for me involves navigating to my local back-up, logging on to my web server via FTP and opening any pages that were left open from my previous session. A feature that I love is the fact that Coda can be setup to automatically synchronise my local back-up with the one stored on the web server, this helps me with version control and lets me push changes to the web instantly.

As you would expect Coding within Coda is also a pleasure. As you can see from the image below Coda has a very clean user interface which includes your local/remote folder structure in the left panel and the main area on the right for your open code. You also have the ability to open multiple pages simultaneously in tabs for fast switching. As you type, Coda will predict and update your code by automatically closing brackets etc in the appropriate places, which helps you to work quicker and make less mistakes.

Another cool feature is the use of Books. Tucked away in the back of Coda are guides to HTML, CSS, JavaScript and PHP which can either be access directly when you are working through an issue or be called upon when you are actually coding by enabling the "Hints" feature. 

Coda is the ultimate all round web development application. I suggest you head over to the Panic website and download the trial version of Coda now. Once you're convinced, the full version will set you back £65. 

Image Editor

The final piece of the puzzle is image editing. These days its not good enough for a website to simply have streams of text on a plain white background (unless you're Google) and as a result you will need an application to put together specific web optimised images. The industry standard for this work is Adobe Photoshop, however this application comes at a premium and to be honest has a million features that the average web developer will probably never use.

Going against the norm, I use a Mac OS X alternative called Acorn. This application can be downloaded and used for free in a limited fashion or purchased in full for just £60. I think the guys over at Acorn sum up the application perfectly:

"Acorn is an image editor built for the Mac with simplicity in mind. Fast, easy, and fluid, Acorn provides the tools you need to alter and enhance your images, without any overhead. Acorn feels right, it won't drain your bank account, and you don't need a Ph.D. in computer graphics to use it."

I use Acorn to create and edit backgrounds, buttons and pop-ups for my websites and thanks to the handy "Save for web" feature you can automatically optimise the image for any browser or connection type. As you can see from the image below Acorn has a traditional user interface that perfectly balances power features with simplicity.

That brings me to the end of my article. I hope some of what I have described here will be useful for others and I will be sure to post an update if I discover any new "wonder software" that dramatically changes my work flow.