Installation

If you are using Ubuntu, Scribes is already available in the repository. You can easily install it by clicking here, or through the Ubuntu Software Center or Synaptic Package Manager. If you prefer command line:

sudo apt-get install scribes

For other distro, you can download the source code here.

Distraction Free Interface

When you first run Scribes, you will be surprised to see an empty window with no menu bar, side panel and statusbar. This is the distraction free interface of Scribes. The menu bar is hidden by default. When you maximize Scribes to the full screen, there won’t be anything else to distract you.

At the top-right corner of the window is a red glow. When you hover your mouse over the red glow, the menu bar will appear.

The menubar is also minimal with only a few icons. You can open new files or rename the file, and there is no Save button. Scribes comes with an autosave feature, so you don’t have to worry about losing your work. The most important button in the menubar is the Customization button as this is the place you will be spending most time on initially.

The Preferences option allows you to customize the display style (font, tab width, text wrapping etc) for each language. It supports multiple languages, ranging from plain text, HTML, Java, C++, Objective C, PHP, Ruby, Python to VB.net, and you can configure the display style for them all.

Themes support

The default theme in Scribes is dark in color with grey background and white text. For those who dislike this theme, Scribes allows you to change the theme to one that is soothing to your eyes. If the themes in the library is not sufficient, you can even download extra themes from the Scribes site.

Template Editor (Snippet)

The template editor is the most powerful feature in Scribes, allowing the developers to simplify the coding process and avoid writing repetitive codes. By default, the template section is empty for all languages. You can download an existing template from the Scribes site and import them in.

The template snippet works by triggering a keyword. You enter a trigger text (such as “else”) and press “Tab”. It will then replace the trigger text with the code that you predefined (such as:

if( )
{ 
}else 
{}

Other features of Scribes

• Auto completion of previously typed words (no code autocompletion)
• Syntax highlighting for 43 programming and scripting languages.
• Automatic correction and replacement.
• Automatic indentation.
• Spell checking
• Bookmark specific lines in the document.
• Plenty of keyboard shortcuts
• Supports zen coding

Conclusion

As a minimalist text editor, Scribes has done incredibly well. It may not have the bells and whistles of the heaveyweight Dreamweaver, but it does have some killer features that can knock the Goliath off its seat. Scribes is rather extreme in its design, bringing the concept of minimalism to the next level. It may not be suitable for everyone, but I am sure for those who love it, they swear by it.

What about you? Do you love or hate it?

Scribes

But what happens if you need to make some changes to a site or design and are away from that desktop or laptop? And what do you do when you’re using a tablet or a device like a Chromebook? Since you’re developing for the web, there’s no reason why you can’t turn to the web for help.

It’s worth checking out one of the number of web-based code editors out there. They range from simple editors to full-blown integrated development environments (IDEs).

Let’s take a look at four online editors for Web developers.

1. Codey

Codey is a very simple but very effective editor. It enables you to connect to your web servers and create and edit files on those servers.

After you sign up and log in, you’re asked for the FTP login information for your web server.

If you maintain multiple sites, you can add more than one server.

Codey’s editing interface is quite simple. In the navigation pane on the left, you can create a new file or select the file that you want to edit from a list. You’ll notice that there isn’t a toolbar that gives you one-click access tags or elements. You need to do all of your coding by hand.

2. ShiftEdit

ShiftEdit is a flexible IDE for web development. You can also use it for writing in plain text or Textile.

You can get files into ShiftEdit in a number of ways:

• Creating new files
• Uploading files from your hard drive
• Importing a DreamWeaver site file
• Connecting to a web server via SFTP
• Opening files that are stored in Dropbox

As with Codey, you need to code by hand using ShiftEdit. Well, not always. ShiftEdit also has a Design View that acts as a WYSIWYG editor. It actually gives a good representation of what a web page will look like.

ShiftEdit has two versions: a free version, and a premier edition that will gives you more features, and which will set you back $5 (USD) per month.

3. JustEdit

Lying somewhere between Codey and ShiftEdit is JustEdit. Using JustEdit, you can write Javascript, HTML5 code, and CSS and view the changes as you type.

The editing interface is very basic. You need to code by hand, but there are three tabs – one each for Javascript, HTML, and CSS. The preview pane on the right shows how all three look together.

One useful feature of JustEdit is the Smart Phone view. As the name suggests, it gives you a peek at how your page or site will look when viewed with a smartphone.

JustEdit also has another interesting feature: the ability to fork a project. You can take your code, make a copy of it, and then use that as the basis for another project. You can also fork code that others have shared and make a derivative work or just learn from what others have done.

4. CodeRun

If you do any C#, Javascript, or PHP development, then you might want to give CodeRun a close look.

CodeRun resembles a desktop IDE in both its looks and functions. Your work is built around the metaphor of the project. CodeRun builds the skeleton of the project, and has a project management pane that lets you add and remove files from a project, copy and upload files, and view files in a web browser window.

You can run your code, build it, and even download an entire project to your hard drive as a .zip file.

CodeRun keeps you honest by checking your errors in two ways. First, there is a real-time error list at the bottom of the application window. And there’s a built-in debugger. The debugger can be slow but it does a pretty good job.

Final Thoughts

Being away from your computer and your tools doesn’t mean that you can’t work on your web development projects. By turning to the web itself, and using the powerful and flexible tools that are available, you don’t have to miss a beat. You can work, and get things done, no matter where you are.

Photo credit: ppdigital

Note: For this tutorial, I will focus mainly on HTML, PHP and CSS since that are the web programming languages I used. You can modify it to suit your needs.

First, install the extra set of gedit plugins In your system.

sudo apt-get install gedit-plugins

This will install the following plugins:

• Commander: Command line interface for advanced editing
• Color Picker: Pick a color from a dialog and insert its hexadecimal representation.
• Character Map: Insert special characters just by clicking on them.
• Draw Spaces: Draw Spaces and Tabs
• Session Saver: Save and restore your working sessions
• Word Completion: Word completion using the completion framework
• Multi Edit: Edit document in multiple places at once
• Code comment: Comment out or uncomment a selected block of code.
• Bracket Completion: Automatically adds closing brackets.
• Show/Hide Tabbar: Add a menu entry to show/hide the tabbar.
• Smart Spaces: Forget you’re not using tabulations.
• Embedded Terminal: Embed a terminal in the bottom pane.
• Bookmarks: Easy document navigation with bookmarks
• Join/Split Lines: Join several lines or split long ones

You won’t need all of them, but it is useful to have them readily available.

Install gedit-Gmate

Gmate is an additional set of plugin for gedit to make it more similar to TextMate. It contains code snippets, plugins, and an automatic registration of rails-related files.

To install Gmate:

sudo apt-add-repository ppa:ubuntu-on-rails/ppa

sudo apt-get update

sudo apt-get install gedit-gmate exuberant-ctags

Activating the plugins

Now that you have installed the extra plugins, it is time to activate and configure the necessary plugins. Open gedit and go to “Edit -> Preferences“. Click on the “Plugins” tab.

Scroll down the list and select the following plugins:

• bracket completion – Automatically add closing brackets
• class browser – show all the functions and tags for the current file.
• color picker
• File browser pane – easy file access from the side pane
• Find in File / Find in Project
• Session Saver
• Smart indent
• TextStyle autocompletion – Press “ESC” to autocomplete
• Tag list – insert commonly used tags
• Word Completion

Note: The above plugins are the one that I used. You are free to activate/deactivate any other plugins.

Once you have activated the plugins, your gedit should now be equipped with syntax highlighting, auto-completion, tag list for quick insertion, color picker, class browser that display all your functions, file browser, bracket balancing etc.

Installing extra tag list

The default tag list only comes with support for HTML and XSL. To add support for PHP, CSS and xHTML, we need to install additional set of tag list.

Download gedit_webdev_tags-0.1.tar.gz. Extract the content into a folder “taglist” in your Home directory. Open a terminal:

cd taglist

sudo cp *.tags /usr/share/gedit-2/plugins/taglist

Open your gedit, you should be able to see the tag list for CSS, PHP and xHTMLnow.

Install Clientside

Clientside plugin for gedit is an useful plugin for web developer who deals with CSS and Javascript. It can minify and beautify javascript and CSS. It also includes jsLint and has option to gzip the current file.

First install the prerequisites:

sudo apt-get install nodejs php5-cli

Download the ClientSide zip file.

Extract the zip file. Copy the “clientside.gedit-plugin” file and the “clientside” folder to “/home/USERNAME/.gnome2/gedit/plugins”. If the “plugins” folder does not exist, create it.

Go to your gedit. In the plugin section, activate the clientside plugin. Click on the Configure Plugin button. Enter the following:

How do I call NodeJS?: nodejs
How do I call PHP?: php

Configuring FTP access

You can directly transfer your files to your server via FTP without a FTP client.

Open Nautilus File Manager and go to “File -> Connect to Server”. Connect to your FTP server. Remember to check the box “Add bookmark”.

In your gedit, open your side pane and go to the file browser. At the dropdown field, select “Bookmarks”. You should see the FTP server bookmark. You can click on it to connect to your server.

That’s it. Your gedit should be a fully functional web developing IDE now.

Aptana Studio is a free, open source cross platform compatible IDE that supports a large variety of languages. The default Aptana Studio’s editor comes with full support for HTML, CSS and Javascript. If you are a PHP or Ruby On Rails developer, you can also get it to support the the code you want by adding the respective modules via plugins. Platforms supported by Aptana Studio include PHP, Ruby On Rails, Python, iPhone Web apps, Adobe Air, Nokia and AJAX.

Aptana is based on the popular Eclipse, so if you have been a fan of Eclipse (or Dreamweaver), you shouldn’t have any problem getting used to Aptana.

Things that I like about Aptana

Support various platforms

Aptana is fully extensible by the use of plugins. While the default Aptana Studio’s editor comes only with full support for HTML, CSS and Javascript, you can install the respective plugins to add PHP, Ruby On Rails, Python or other functionality to it. The plugin management is integrated in the studio, so there is no need for you to download the plugin files and install it manually.

Autocompletion

One thing that I love about Aptana is its tags suggestion, tags explanation and autocompletion feature. When you type a tag, it will show a list of similar tags and give you an explanation of what each tag does. This is also a feature that I like in Dreamweaver and is sorely lacking in most IDE.

Tags outline

On the sidebar of the editor’s window lies the outline pane that allows you to quickly access to any function within the code. This is one handy feature that is useful when you have a large CSS file or a long list of Javascript functions.

Split view

If you are coding HTML and CSS at the same time, you will want to view the changes you have made on the CSS file on your HTML file instantly. By placing the two files side by side, you can quickly make changes to the CSS file and view the result on the HTML preview.

You can also have two instant of the same file, one in the Source mode while another is in the Preview mode. This make it easier for you to check the output of your code.

Conclusion

There are still many other features in Aptana, such as Cloud hosting, FTP/SFTP support, inbuilt Web server, AJAX server, that I did not mention, either because I have no use for them or I have not tried them out yet. However, for those things that I have used , I must say that I am pretty impress with it.

One thing though, the installation in Ubuntu is not as straightforward as expected. I did spend some time before I can get it to work. In my next tutorial, I will go through the steps to install Aptana on Ubuntu 8.10.

Have you tried Aptana? Do you love it? Share with us in the comments.