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

Related Posts:

• Aptana Studio: A Worthy Replacement For Dreamweaver
• Scribes: A Lightweight Yet Powerful Text Editor For Linux
• Transform Gedit Into A Web Developer IDE
• 5 Online Code Editors to Help You Code On The Go

Kate is a multi-document interface (MDI) text editor, available for both KDE 3 and 4. It runs on multiple Linux and Unix-like platforms, Mac OS X, and  Windows. It also includes a component called KatePart, which runs inside numerous other KDE applications, including Quanta+ (on KDE 3 only), KWrite, Konqueror, and Kdevelop. Kate provides syntax highlighting for over 120 text formats, making it perfect for whatever programming language you choose.

HTML Editing

Kate will highlight HTML markup and underline errors, particularly when you forget to close a tag.  It will also group text within tags, so that you can see what content is where. It will display folding markers, small arrows on the side, that you can use to collapse or expand a tag and its contents. To toggle folding markers, press F9. For that reason, if you are coding in XHTML, make sure to use the XML highlighting rather than HTML.  It will then appropriately mark single tags that are not closed with arrows.

To enable XML highlighting:

1. Click Tools in the main menu
2. Navigate to “Highlighting”, “Markup”, and finally to “XML”.

You can also do the same for PHP and other web scripting languages. Kate will generally highlight all of these, so you can usually leave the settings at the default.

Kate includes a dynamic word wrap feature, useful for documents with large amounts of text. Toggle it on or off with F10. Press F11 to toggle line numbers, and you will notice that a wrapped line has symbols indicating that it is still part of the previous line.

Multiple Documents

With Kate, you can edit multiple documents at once. The left-hand column will display the list of currently opened files, and you can move through them by clicking on the file you want to edit, by clicking the forward or back buttons, or by holding the Alt key and pressing the left or right arrow. Control+S will save your current document, and Control+L will save all open documents.

Sessions

Kate has a handy feature called “Sessions” that allows you to pick up work right where you left off the last time you were editing. For example, you might have eight documents for a particular project. Rather than having to open each document one at a time every time you want to work on them, you can save a Kate session that will automatically open those documents when activated. To save a session:

1. Click Sessions
2. Click Save As…
3. Give your session a name.

The next time you want to return to that project, just open the session you saved.

Remote Editing

There are times when you need to edit a document quickly right on the server. While you could SSH into the server and use whatever text editor is available from the command line, you will miss some of the many benefits of Kate. Furthermore, if you have a shared hosting account, you might not even have access to SSH.  With Kate, you can open a document live on the server via FTP, SFTP, and any other protocol supported by KDE. To accomplish this, do the following:

1. Login to your web server using the normal method. You can use Dolphin or Konqueror.
2. Navigate to the folder containing the file you want to edit.
3. Right click on the file and open it with Kate.
4. Repeat those steps for multiple files if necessary.

Find

Kate’s find feature is very useful with long documents. To activate it, press Control-F. It will open a dialog at the bottom of the window. You can find each instance individually and scroll through the results with the “Next” and “Previous” buttons, or click “Options” and “Highlight all” to see all results highlighted at once.

Click the arrow on the far right to expand the find dialog further, and it will add a “replace” feature. With it you can find a tag or piece of content and replace every instance of it with something else or nothing at all.  Kate will also remember your searches so that you can perform them again by pressing the down arrow on the right side of the search box.

I have only touched the surface of the many features available in Kate. The best way to find out exactly what Kate can offer you is to try it out for yourself. I highly recommend it, not only for KDE users, but for anyone. Kate is available through any Linux distribution that offers KDE.

Related Posts:

• How to Install KDE in Windows
• Qute: A Fancy Text Editor for Linux
• How to Start With Vim [Linux]
• How to Check Your Gmail Account with Kmail

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.

Related Posts:

• 4 Great Online Editors For Web Developers
• Microsoft Pledges to Eliminate Pre-Packaged Bloatware With ‘Signature’
• The Review of FX Photo Studio [Mac]
• How to Understand Terms and Conditions Without Reading Them