Web Development Tools

These are the best tools to develop, test and deploy web sites based on usability, availability, stability and cost. They cover; creating and maintaining code with Komodo Edit, transferring files to and from servers using Filezilla, duplicating sites locally to make and test changes locally on the L/WAMPP stack, debugging with Firebug, and producing and modifying graphics with Gimp. All of these packages are free to use, run on Linux and Windows, have a stable user community and are capable of producing professional web sites.

The need to actually read and edit many types of code seems inescapable. A typical modern site requires working with (at least)  Javascript, CSS, HTML  and PHP. Using packages such as Drupal or SugarCRM will introduce other layers of complexity. Komodo Edit by ActiveState (http://komodoide.com/komodo-edit/ ) is an easy to use editor supporting many languages and with a fairly light footprint (especially when compared to Eclipse). It runs on Windows, Mac and Linux platforms and, if you want to move up into a full blown IDE there’s the Komodo IDE package priced at around $100 which features step debugging and version control integration among other nice things. Komodo Edit doesn’t do much more than other editors but for me the key thing is what it doesn’t do – crash, hang and mangle up my work. It’s written by coders for coders and written well.

Of course, once you’ve written your code you need to get it to where it needs to be used. In an ideal world everyone would use integrated version control –  pop things in at one location and  pop them out at another with a minimum of intervention. We don’t live in an ideal world so for file transfers I use Filezilla, It supports secure file transfer, anonymous and account based logins and using alternate ports. The user interface is fairly good and I’ve found it to be extremely stable and not prone to hanging or crashing every few minutes.  https://filezilla-project.org/

Serious web development requires a work area where you can make and test changes before you put them up. Many developers use multiple areas, one for individual testing, one for user testing, one for graphic work, etc. But you’ll need at least one and a self-contained Linux, Apache, MySQL, PHP (LAMP) package is an easy alternative to installing a web server, languages and a database from scratch. These packages are also available for WIndows and OSX. They allow you to have a web server with attached database and backend PHP support available with an easy install process. There are some gotchas however. If you need to make configuration changes in the web server, for example to increase the size of server assigned memory for example, you’ll have to do some digging to located the configuration files. And, if the hosting provider has a different version of Apache, MySQL or PHP than the ones installed by your hosting provider you may have conflicts. An hour or so of research will save you a lot of trouble, especially if you’re using complex applications. https://www.apachefriends.org/index.html

You don’t need to be a graphics whiz to make good looking and functional web sites but you do need to source graphics, whether from public archives, artists or original creation, manipulate them until they fit your requirements and insert them into your sites. Gimp is the best free tool available for this although there are many graphic editors available. Photoshop is the most widely used one, but it’s expensive so I don’t use it. It’s true that Photoshop has capabilities (available at a price) far beyond Gimp but for the vast majority of web work Gimp will do the job – if you need something that only Photoshop can do you’re probably better off to hire a professional graphics person than buy a copy and do it yourself. Some people are better at graphics work than others (I am not very good myself) but investing the time to learn to scale, transform, manipulate layers and add text will really pay off for any web developer. Graphics are a very large part of web work and even if you’re working with a team of graphic artists knowing the vocabulary and basics will help you.  http://www.gimp.org/

Debugging web sites is hellishly complex so the Firefox browser extension  Firebug is well named. It allows you to dig into the front end code of your web site while you’re working with it. Javascript, Cascading Style Sheets and HTML can be viewed, modified and debugged using this tool and it is simply invaluable for a developer. It’s developed for the Firefox browser and is at its best there. My earnest recommendation is that you develop in Firefox and then retrofit your site to IE and Chrome. This may seem counter-intuitive if you look at IE’s market share but in fact Firefox has the best development tools (Chromium isn’t there yet and IE is a nightmare) and is the best platform for development. https://getfirebug.com/

If you’re employed as a web developer your choice of tools at work may be limited by policy or requirements. But having a tool kit that’s freely available, easy to use and tied into an active community is extremely useful for educating yourself and for working on self-directed projects. Given the rate of change in this area anyone hoping to make a living at it is going to need all the help they can get in keeping up. If you’re working as a freelancer of support a web site for a small organization or company these tools will let you do your job without paying through the nose.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s