Web Development in Linux (GNOME)

I see people asking around in the forums quite often about which tools to use for web development in Linux. Here are some tools and instructions for setting up your gnome-based Linux distributions to handle all your web development needs.

I won't be discussing any commercial software here. Just the open-source (free) stuff.

Web Browsers

Writing cross-browser friendly HTML, Javascript, and CSS is a fundamental and critical part of developing web sites. Luckliy for us, we can test in just about all major web browsers in Linux--including Internet Explorer! However, I prefer to first develop standards-compliant code for Firefox, and then tweak it for IE and Safari.

There are numerous add-ons for firefox to assist the web developer in debugging code. The 2 most important tools I use when developing web sites in Linux are my text editor (gedit) and Firefox. For details on setting up firefox for web development, see Customizing Firefox for Web Development

  • Firefox - Most linux distributions have firefox installed already, or at least available as a binary package.
  • Internet Explorer - Testing in various versions of IE is very important due to the numerous rendering bugs found in the different versions. I typically test in version 5 and 6 at least. Testing your site in IE on linux is easy thanks to Wine and the ies4linux installation script. Wine can usually be installed through your distribution's package manager. See the ies4setup website for downloads and installation instructions for ies4linux.
  • Konqueror/Safari - Safari is the default browser on Mac systems. Since we cannot install Safari on our Linux system, I try to get a loose idea of how it's going to render my pages and process my Javascript by testing in Konqueror. Konqueror is the default browser on KDE desktops and is supposed to be using the same rendering engine as Safari. It is typically available via your distribution's package manager (yes, you can run KDE libraries in GNOME and visa versa).
  • Opera, Netscape, and others. - It's often a good idea to test in Opera as well and is easy to install following the directions on their website. Netscape isn't as necessary since it's often quite similar to other Mozilla browsers (like Firefox) but it does have a Linux version.

The way I typically work, is using Firefox to build the site while occasionally ensuring the layout works in IE as well. If it renders correctly in both of those browsers, the others are usually okay as well. I don't test the other browsers until I'm ready to go live with the site.

Javascript can be a little trickier to ensure cross-browser compatibility. You're best off researching your code's objects and methods to learn which browsers and versions support them. There are numerous sites dedicated to testing various javascript calls in all the major browsers and providing information on making the code cross-browser friendly. If it works in IE, Firefox, Konqueror, and Opera you're probably safe--but that will not always be the case. When to use Javasript or AJAX, and whether or not you should at all, is an often-debated subject that is beyond the scope of this post.

And one final note about the browsers... FONTS! If you've just moved to Linux from Windows, you undoubtedly have seen first hand the effects of web designers targeting IE only. Often times web designers use fonts that are specific to Microsoft only. This is BAD web design. The first thing I do, is get the site looking proper in all browsers using generic font family names. Only then might I spice up some of the fonts for IE. If you want to install the Microsoft core fonts in Linux, you can. However, some times it is advantageous to see your site the way other non-MS browsers will see it.

You can download and install Microsoft's TrueType Core Fonts for Linux which gives you all the basic fonts like Arial and Times New Roman. If you really needed them, you can also install individual TTF fonts as needed. This might vary from distro to distro. I suggest you search the support forums for your distribution for posts on "Installing True Type Fonts" since it's a fairly popular topic.

Text Editors and IDEs

Which text editor is the "best" is an often debated topic in the linux forums. Frankly, it's a ridiculous topic. People have different needs, preferences, and familiarities. here are some options. Although old school Linux gurus might swear by emacs or vim, I'm not going to go into details on either of those. If interested, do a google search for "emacs web development or "vim web development

Most GNOME applications use the GTK+ libraries and most text editors for programming in GNOME are either based on GtkSourceView or Scintilla for the actual text view. Embedded in these "widgets" are many of the features such as syntax highlighting, tab spaces, line numbers, code folding, etc. Therefore, you may want to look over the features of each of these when choosing the editors you want to try.

  • gedit (GtkSourceView) - The default text editor for the GNOME desktop environment is incredibly stable and feature rich, despite one's first impression. Utilizing various plug-ins, I have been using gedit for all of my web development for over a year. It has all of my must have features: FTP/SSH/File browser pane, snippets library, syntax highlighting, powerful search/replace, plug-in support (Python or C), terminal pane, configurable external tools, and more. But it's biggest selling point for me is it's stability. See Customizing gedit as a Web Developer's IDE for instructions on setting it up for web development.
  • Bluefish - This is a very popular text editor/IDE aimed specifically at web development. Personally, I gave up on it after some issues I had with stability and some other minor quirks. However, that was some time ago and this is a wildly popular editor--definitely worth giving a try. I *think* it uses it's own code for the editor as opposed to GtkSourceView/Scintilla, though I could be wrong.
  • Screem (GtkSourceView) - Another GNOME text editor/IDE for web development.
  • SciTE (Scintilla) - This editor is the scintilla programmer's editor.
  • gPHPEdit (Scintilla) - A text editor geared towards PHP developers.
  • Eclipse - A cross-platform Java-based programmer IDE. With a sophisticated plug-in system, including plug-ins for web development, it is often chosen by web developers. (I've heard it can be used as a WYSIWYG HTML editor, though I have not tried this).

WYSIWYG Editors

Another one I see in the forums all the time: "Is there anything like Dreamweaver for Linux?". The answer is no, not really. There are a couple of promising projects for WYSIWYG editors, however, nothing anywhere near the scope of Dreamweaver. This, in my opinion, is due to the long tradition of Linux users not wanting to relinquish control of code over to an editor.

I typically only use WYSIWYG editors for documents to work staff, project proposals, and other unimportant things. I've been working with the code since the mid 90's, so that's the way I prefer it. In any case, here are some of your best bets for WYSIWYG editors.

  • Quanta Plus - This is the KDE development environment which includes a fairly sophisticated web development editor. Usually available through your distro's package manager.
  • Nvu / KompoZer - Nvu is a WYSIWYG HTML IDE which has been at a stand-still for a couple of years. The next generation is in the works, however, there are no official updates in the mean time. An "unofficial bug fix release" of Nvu goes by the name KompoZer, and is probably a better choice.
  • Amaya - Endorsed by the W3C folks, this WYSIWYG editor for Linux is sure to place emphasis on valid code, however, it's interface wasn't quite as intuitive as some of the others in my opinion. It is often included as a binary from your distro's package manager.
  • SeaMonkey - A mozilla project which supposedly includes a simple WYSIWYG editor (think about the editor in Thunderbird or other Mozilla tools).

FTP and SSH

Most people are familiar with using an FTP client to transfer files to/from their web server. SSH or Secure Shell is another, more flexible way to manipulate your web server.

FTP commands can be issued from the command line, navigated through the GNOME environment using GnomeVFS (Virtual File System), or using any number of GUI tools. gFTP is included with most GNOME installations and is sufficient, though the interface is a bit outdated. You may also want to try FireFTP, an FTP client add-on for Firefox.

With SSH you actually connect to a secure shell (terminal) of your web server where you can execute commands. If you're already Linux or SSH savvy, you know how powerful this can be. If you're new to Linux, you'll begin to understand this more and more as you learn commands that save you time and make streamline your work. SSH can also be integrated through GnomeVFS or the command line.

Both FTP and SSH are already supported from a terminal. To access a FTP or SSH server through Nautilus (GNOME's file manager), connect to the server from the 'Places' > 'Connect to Server...' GNOME menu. An icon for the server will show up on your desktop and in some applications which support GnomeVFS such as gedit.

Some of the editors above have built-in support for FTP or SSH and some rely on GnomeVFS.

Graphics Applications

Most web developers have to manipulate graphics at one time or another. Back in my Windows days, I was always able to get by with some Photoshop skills and very minimal Illustrator skills. In Linux, I use the GIMP and Inkscape respectively for raster graphics and vector art.

Miscellaneous Tools

And here are a couple other little tools for Linux web development.

  • CSSED - A CSS editor based on GTK+.
  • Tidy - A command-line utility to clean up and format or validate your HTML code. Also available in the Firefox as an add-on or use through gedit's external tools plug-in.
  • PHP_Beautifier - A pear package for beautifying (formatting) your PHP code. Great to use with gedit's external tools plug-in.
  • Agave - A color scheme designer for GNOME.
Terminal and Web Server

And let's not forget one of the greatest parts of Linux... the command line. You can do all sorts of things on the command line. If you install the packages necessary, you can also setup your system as a local web server such as apache for testing projects. Ruby on Rails, PHP, Perl, and any other of a number of other server-side languages are easily at your disposal. For example, using the PHP command line, you can check your PHP scripts for parse errors before uploading them using gedits external tools plug-in.

Did you enjoy Web Development in Linux (GNOME)? If you would like to help support my work, A donation of a buck or two would be very much appreciated.
blog comments powered by Disqus
Linux Servers on the Cloud IN MINUTES