Web Development Tools

Maybe you think that developing for web sites requires tools that cost an arm and a leg. Well they can, but what you use will depend on the kind of web development you want to do. If you want to include moving 3D graphics and a very rich and interactive graphical interface you could use tools from the Adobe CS series of programs for instance.

However a lot of web sites do not require that kind of horse power. If your web site is mainly a content web site, meaning still pictures and text, forms… then you may want to limit yourself to non proprietary standards based elements, such as HTML, CSS, PHP and JavaScript.

If that is what you want to do, the tools you need are freely available for several different platforms. If you work with a Mac operating system all the tools you need come with your operating system on a DVD included with your hardware or you can immediately download the latest version from the Apple web site. I am of course not referring to iWeb, but to XCode. If on the other hand you work with a Microsoft operating system you can find tools freely available for download. And the same is true for all Linux distributions and different UNIX flavours (strictly speaking Mac OS X falls under that UNIX banner too). The main difference between all these platforms is price and performance over price ratio. The same hardware will be more responsive under Linux than under a Microsoft Windows operating system, and vice versa you can get the same performance from Linux as from a Microsoft operating system on much older and/or cheaper hardware,using the same tools.

Getting to the tools, we need at least a pure ASCII text editor (no formatting word processor) aimed at development, a good file manager, an FTP client and a browser. I also strongly advise using viewports, which means that you have different desktops between which you can easily switch with the click of a key or mouse. All Linux distros have that built in, readily available. The Mac has this too. Microsoft Windows hasn’t and requires looking for something called Desktops. It doesn’t work quite as easily, missing the one click Linux approach, but it will do the trick and it is better than minimizing/maximizing the different tool windows. If you have more than one monitor or more than one computer with their separate monitors that will of course do the trick too, be it at a higher cost. Using Linux you may find it pays to buy two cheap systems for the price of one expensive one and work with two systems at once. If I use two monitors or two complete systems I typically will have a web browser open on one and the other tools on the other. If I am trying out things I find in a book or magazine in PDF format I may use one system to follow the material and the other for the tools, unless I want to copy and paste code from the material.

Additional tools you may want to use are a versioning control system and several different browsers. There are a lot of well established version control systems out there. I use Git which got of on a flying start a few years ago and was initiated by non other than Linus Torvalds, originator of Linux. But it works just as well on Microsoft platforms.

The following tools I do not really consider additional or optional. You could write code on your local machine and transfer it immediately to the hosted site of course. This you would do in temporary directories and not immediately make visible to the web of course. But still it would require a lot of going backward and forward between the local machine and the hosted site to check for results, correct, expand. It is far better to be able to get to a reasonable partial or complete result on the local machine and then FTP to the hosted machine. This does require running your own local server.  To many the word ‘server’ sounds ominous, calling up images of expensive machines that do nothing else but work as servers. Nothing could be further from the truth. ‘Server’ means in the first place software running which in this case serves up web pages and their associated logic.  As on your local development server you will be the only one accessing it at any given time, the server software does not need a lot of resources at all. As a matter of fact on all my machines I have a web server running. Yes, on the same machine I have all these other tools open. If it works on one of my 7 year old IBM ThinkPads, I would be surprised if it didn’t on whatever you want to use. It actually not only runs these tools and the web server, but also a complete PHP system and MySQL database server. Depending on what you want to do, you may or may not need a database, but sooner or later you probably will. So it makes sense to set up your machine as a complete LAMP server (or XAMPP server). The L stands for Linux, which may not be what you use, but the A for Apache,  M for MySQL and P for PHP (some would include Python or Perl under P too) are what you will use. Freely available for the different platforms.

Don’t misunderstand me : you do not have to use the same machine for the tools and a (L)AMP server. If you have an extra machine you can actually use that as your main local server and maybe set up an intranet based on it. Develop on one machine with the tools and exchange files with your local server either through FTP or whatever other system you want to use (USB flash drive?). Or you can use that dedicated server with the tools also installed on it for developing sitting at any other PC using VNC tools, to run the development tools remotely, which then only requires remotely using the file manager on the server rather than FTP. Whatever works for you. The use of several old machines as servers only, also make it possible to keep different projects entirely separate. Moral of the story: never throw out an old machine!

Have you seen any of the books that have ‘Agile’ in their title. Whether for web development or any other work, the whole ‘agile’ movement is about working in a flexible way with a lot of interaction between the people building something and the people they build it for (let’s call them clients). And all this throughout the complete development cycle, and with good use of iteration. Something like a repeating cycle of develop, submit, discuss, change… Therefore  being able to submit to the client as a real web site he/she can access from wherever he/she may be is a real asset. There are two ways you can do this and you can even use them both. The first one is to get your own hosted web site and put the work you want to submit to your customer in directories on your web site only accessible directly with a link you send a client. Secondly, if the client is ready to get his/her own domain name and a hosted web site, you can use that one, but again only accessible through a link you send him. By only accessible through a link you send, I mean that nobody who would for instance type in the name of the web site would directly go there, because you start with an index.html or index.php file the site immediately automatically directs you to. If you want to be able to turn the site life as easy and as fast as possible you can use a file in the root directory with a name other than index.html or index.php and then change its filename to index.html or index.php when you want to go life. Be careful, depending on how the site is set up, home.html or home.php may cause the same automatic connection. And why would you use both your own and the client’s web site? Well these will likely be sitting at different physical locations, or at least they will if you use different hosting companies. Consider them as back ups.

Also consider having some graphical editor at hand, although contrary to the aforementioned tools you would not necessarily have this open at all times. This will help with simple things like resizing or cropping pictures, change file formats, make adjustments… If it is that simple in Linux a lot of the simple picture editors which come with distributions will work for you. On Microsoft Windows I found IrfanView quite handy and amazingly powerful, including the possibility of batch processing. The latter can make producing a set of thumbnails for a complete picture directory child’s play. If you need a bit more horsepower, especially if you need to use layers, GIMP is higly recommended and available for all systems. Or maybe you got a free program with a scanner or printer, such as Adobe Photoshop Elements…

Looking at all of the above you may think I am a CLI (Command Line Interface) user, but I am not. For instance I have never used Git without a GUI (Graphical User Interface).

There are interfaces that combine several of these tools in one user interface (IDE). Eclipse, Aptana and NetBeans are examples which with the right plug ins and configuration can do the trick, although I would not guarantee that these do not require more hardware resources than the combination of tools I use.

Let’s talk editors. As said earlier, you should not use a formatting word processor, although you could if you consistently save with the right format and extensions. It is better to use an editor that will only save in the format required, which is a non formatted pure ASCII file format. An editor geared towards developers and programmers is the obvious choice. Many of these will let you specify what code you are writing, for instance HTML or CSS or PHP, and will colour code accordingly, and even fill in parts of the code. The colour coding is an excellent visual warning system for errors too. The one editor I have been using for ages is Geany, which works just as well in Microsoft Windows as in Linux.

That you need a file manager speaks for itself and you  have at least one that came with you operating system. In Linux I like working with Midnight Commander (mc) in a terminal window on very old low key systems (i.e 10 years old) and with its graphical counterpart Gnome Commander on slightly more recent equipment (less than 7 years old). These make it easy to change owners and permissions without needing to remember or look up the commands and codes. My personal internal memory doesn’t seem to be upgradeable, if you know what I mean.

As an FTP client I use Filezilla, again available on all systems. Pretty easy to use. Think of it as a two pane file manager, with one pane being your local machine and the other the web site hosted off site. Get out those usernames, host names and passwords for the hosted site and you are in business. If it does not work with the right names and password, look at the error messages coming back from the hosted site. It may mean having to go into the settings of Filezilla to mess with active or passive mode for instance.

As for web browsers, you need several to check inconsistencies in rendering web pages. If you use Firefox as your main browser I would strongly suggest using the following plug ins: Web Developer and Measure It. They help you examine errors, other web sites, positioning and allow you to validate your code against the standards.  Even if your web site seems to function properly there is nothing so embarrassing as a client asking you why it contains x number of errors, if he has checked it through the validation systems readily and freely available to any Firefox user.

Hopefully this article sets some of you on your way to some experimentation with these tools and maybe even with alternative operating systems and older hardware.

Chris Rogiers

for

CeaRO Corporation

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 )

Connecting to %s


Follow

Get every new post delivered to your Inbox.