Categories
Popular Posts
RSS Feeds
ArchivesWeb Development in Linux (GNOME)
September 28th, 2007I 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.
Posted on
Friday, September 28th, 2007 at 4:01 pm
Categories
Linux Web Development
Related Posts
Technorati Tags
October 5th, 2007 at 4:32 pm
Really good writeup on web development in Linux. I setup ies4linux a little while back to troubleshoot a CSS bug and it works great.
You touched on the web server but that is a huge boost to my productivity in web development. Being able to have the code run on the same machine and being able to turn up logging levels, really speeds up debugging. It's also nice to not have to worry about breaking a live website with your changes.
October 6th, 2007 at 10:54 am
That's a good point. I felt intimidated about talking about that too much as it really deserves and article all of it's own.
November 17th, 2007 at 3:14 am
I just wanted to mention Aptana Studio, an HTML/CSS/Javascript/PHP editor that I use. Code completion, site synchronization, Ajax libraries, online video tutorials are some of its features. Not fully opensource though - there's a free version and a paid version.
November 17th, 2007 at 10:36 am
Good point Sammy. I've been meaning to add that one. I never had luck getting it running on my AMD64 system, however, I didn't try that hard as I prefer a bit more light-weight editor. But it's certainly lookin' like a very powerful IDE.
December 11th, 2007 at 6:18 am
Safari no longer uses KHTML as its renderer, it uses WebKit. So testing in Konqueror doesn't help with Safari testing... however there is a WebKit version of Epiphany floating around the place (try sourceforge) which will allow full Safari testing on Linux, as it is basically Safari with a GTK frontend.
February 25th, 2008 at 6:19 pm
For FTP clients, FileZilla works nicely now that v3 is supported on Linux. (I used to use it through Wine!) It has a lot more features than GFTP but features a similar UI, making the transition pretty easy.
March 15th, 2008 at 4:01 am
Don't forget Nautilus can be used for FTP/SFTP - I gave up on gFTP after it kept crashing, but Nautilus seems to be rock solid, and supports drag and drop.
June 15th, 2008 at 3:18 pm
A much-needed writeup for me , i was searching for something about Linux and Web dev. tools and methodology for long , and this one is good .. Thanx again
November 5th, 2008 at 7:00 am
Nice writing on the subject man, i am moving to debian from osX and i must admit i am a bit lost and theres no much info if not counting on the typical which WYSIWYG app to use.
I am givin myself 6 months to see whether is worth it or not, and would also try to document it in a blog kind of format so its useful for future switchers.
thanks.
February 3rd, 2009 at 8:00 am
I switched to Linux because I was fed up with slow windows, Its frustrating that Linux is such a good operating system but so under supported by the big names like Adobe.
While there are a few good tools for Linux wouldn't it be nice to have some of our faves ported to Linux like adobe fireworks , dreamweaver and photoshop .
Kompozer is deceptively good for design of HTML pages and I absolutely love the CSS editor but the program crashes constently. I do hope that they develop it more as its such a good Linux wysiwyg editor
At the moment I'm using Quanta under Fedora I am getting to grips with it slowly but miss the speed of CSS development with Kompozer .
On the upside , Windows allows you to be lazy web designers doing most of the coding for you with the lack of Wysiwyg editors you have no choice but to get your hands dirty with code, in the long run making you better
March 17th, 2009 at 8:45 am
You really should give Vi(m) a chance. It has been the premiere nix editor since the 70s for a reason.
May 5th, 2009 at 2:17 pm
What about Netbeans for a more bloated IDE? Of course it's not good for those just doing some XHTML/CSS, but for those who like editors with code completion and stuff should give it a try.
May 6th, 2009 at 11:11 am
Very good write up. I just moved to Debian Linux and ditched Windows.
Your comments and those of the others have convinced me that I made a
good choice. I have found all the apps I want and I enjoy working with computers
again. Good stuff.
May 20th, 2009 at 1:49 pm
Thank you!!, nice recopilation.
Don't forget komodo Edit
May 31st, 2009 at 8:21 am
Is there code completion for gedit or any other simple editor?
June 8th, 2009 at 6:10 pm
I saw this article and thought omg, here we go again ..
I was surprised and I learned about some new tools myself, saved on delicious !!
Here's my 5-cents.
http://delicious.com/dezzadk/web+linux
Keep up the good work!
August 8th, 2009 at 12:02 pm
Nice article,
I have recently moved from using winxp to Ubuntu and I was really looking for an article that explains everything about doing web development in the linux environment. While this article did help me to figure out which editor to use, I would also appreciate if you could have something more to say about which database to select or more about the content management like Drupal.
Thanks,
November 21st, 2009 at 7:28 am
Thank you. Article fits with my just-woke-up-enjoy-coffee-hating-winter mood for brain-storming.