::Stuff for the multi-spec coder;

Coding, formats, standards, and other practical things.

 Home  //  Guides & Articles  //  Tools of the Trade 

<!-- Guides & Articles

 Previous Page   1  2


jEdit Another Java-based, and thus very portable application, jEdit is a code editor that was built to be extended by plugins (these are somewhat different than the Eclipse modules, as you can switch them on and off individually and choose the ones you need for a specific task). As a stand-alone program, it will offer syntax highlighting, macros, support for Unicode, and a high degree of customizability. However, its plugins will allow it to become a powerful IDE for web development languages and standards, as well as scripting and parsed languages (and, in fact, just about any language a plugin has been written for). It's also a light program, so it's easy to keep running in the background even on slower systems. After installing the program, the plugins to look for right away are BufferTabs, which allows to have multiple documents open at the same time and adds a few additional features that pertain to multiple document handling, and the XML plugin, which is an extensive plugin which adds structures for XML, HTML, CSS, and JavaScript. With these two plugins alone, and some tweaking of the UI to meet your needs, you'll have a very powerful client-side web development platform. The process of adding plugins has been simplified remarkably: You add them from within the software itself, again, just like in Eclipse. All you need to do is select Plugin Manager from the Plugins menu, and then select the plugins you'd like to install. The program will automatically locate a trusted server and download the required files. You can find out more about the locations from which these files are being downloaded from on their website, but they're maintained by an open developer community so a risk of vulnerability is very low. If you wish, the plugins are also available from SourceForge as separate downloads.

You can find jEdit's home page here. It's recommended that you look through their Quick Start Guide so that installation and setup are hassle-free. You may also want to look into the jEdit Wiki, and their Community Site. Most importantly: Tweak away! Virtually everything in jEdit can be customized, modded, skinned, and tinkered with, and it's best to take full advantage of that.


seamonkey The Mozilla SeaMonkey application suite includes within it Composer, an HTML editor which includes a WYSIWYG interface as well as a tag-browsing one. Currently, however, it is not yet evolved enough to be a complete solution for webpage authoring. So why is it mentioned here? Several reasons: The first being that it does include a WYSIWYG editing capability which you can use to speed up building certain elements and then taking the code from the HTML Editing mode and using it elsewhere (in jEdit, for example), and the Tag View allows you to analyze more complex structures. Another reason is that it allows you to install almost every plugin/extension into the SeaMonkey browser that you would normally be able to install into FireFox, which means you can have 2 browsers based on Mozilla installed -- one with browsing extensions for day-to-day use, and one with development extensions (more on that below, under FireFox). The composer itself hasn't been enhanced much over time, but it's a good idea to keep an eye on its development, since the Mozilla developer group/s often have 'development bursts', and one would definitely be nice to see in the SeaMonkey Composer.


firefox Mozilla Firefox, in and of itself, may be 'just a browser', but with just a couple of extensions it can be an invaluable addition to your web development toolkit. In fact, even without any plugins, Firefox already comes with an error console for CSS and Javascript debugging, and a DOM inspector. Just these two tools, along with any syntax-aware (or even just a syntax-coloring) text editor makes for a good start as a client-side web-developing app duo.

But if you can have more, why not get more? That's where these extensions come in:

FireFox Extensions

Web Developer ExtensionWeb Developer Extension
The Web Developer Extension for Firefox, Flock, and SeaMonkey adds a plethora of tools to your browser that allow you to analyze and parse pages. You can view and derive (parse and view on a different page, displayed as text) CSS, Forms, Images, and Cookies information, send specific information to validation URLs (at W3C.org), view the JavaScript Console or the Java Console specifically (instead of the error log in general), outline elements in real-time (including all block elements, separately or all at once), and many more feature that you really need to try to understand how powerful this tool is. As mentioned in the SeaMonkey description above, you may want to install development extensions like this into SeaMonkey specifically, if you don't need any of its features for day-to-day use (although you'll find that more often than not you're going to want to see how something is implemented on a page you happened to visit, so installing this on your main browser is usually good idea).

You can find the home page of the Web Developer Extension Here.

FireBug ExtensionFireBug Extension
The FireBug Extension is an HTML/CSS/JavaScript/DOM debugger of the level you'd expect to find in a full-blown IDE. You can step though code, you have language-specific consoles, a JavaScript command-line, and an XMLHttpRequest traffic log for Ajax development. You also have a tree-style DOM inspector, along with a point-and-view inspect mode for specific areas of a page. When developing pages that require mixing all client-side elements together, this extension works wonders. It also makes it much simpler to figure out how to pull off other people's tricks when you're on a page and you see an implementation you like...

You can find the home page of the FireBug Extension Here.

HTML Validator ExtensionHTML Validator Extension
The HTML Validator Extension for Firefox lets you validate your HTML client-side. That is, it doesn't send the page source to an external validation service such as W3C.org, but rather uses the Open Source HTML Tidy library to validate the HTML on your computer. This saves time and allows you to validate your page without an internet connection.

You can find the home page of the HTML Validator Extension Here.

If you're wary about installing Firefox extensions from a non-mozilla.org domain -- good! It's always a good idea to make sure that the extension you're installing has been out in the wild for a while, and downloaded from the mozilla.org addon section. For the three extensions mentioned above, search for the term 'Web Developer' (the extention submitter name will be 'Chris Pederick'), then 'Html Validator' (by 'Marc Gueury'), and finally 'FireBug' (by 'Joe Hewitt').

To Conclude

This is just the tip of the iceberg when it comes to open-source development tools. You can decide to emulate your entire server's environment -- Apache, MySQL, PHP/Perl/Python/Ruby, all on your computer, no matter what operating system you're using, and design and develop the entire website, both back-end and front-end -- locally. And it wouldn't cost you a cent.

When it comes to finding more Open Source applications and information about them, SourceForge.net is your best bet. Look over the software categories to narrow down your search. Happy hunting!

 Previous Page   1  2

Return to the Guides & Articles section, or go the to Main page.

Looking for the old guiStuff?

It's still here, the old content didn't go anywhere.