Edit Code in the Browser with ICEcoder

Developing websites has historically involved the assistance of your favorite code editor or IDE. Whether you were developing locally on your own machine or working on a live development site, chances are that you built your site using a traditional program such as Sublime Text, Notepad++, Aptana Studio, Brackets or any of the others.

Until recently that has been the only option. The web, even a mere five or six years ago, wasn't as great as it is now, with browser usage more fragmented and all those browsers acting in far more inconsistent ways. Before, there was no real chance of using a web-based editor for your work life, but now it's becoming a much more tenable solution.

What Developers Want in an Editor

Developers need tools that help us build great systems, whether they are websites, apps or anything in between. Gone are the days of using basic editors such as Notepad for development. For a code editor to be useful, it needs to offer several things in abundance:

• Ease of use with minimal confusion
• Feature rich, with all the elements you take for granted
• Responsive and quick
• Reliable and solid
• Features to improve your workflow and provide assistance
• Extensibility and customization

Your choice of editor will directly affect almost every aspect of your work, so it's important to choose one that's going to make your life easier.

When developers talk about the features they want in an editor, they talk about code hinting, de-linting, and multiple language syntax highlighting.

Something you rarely hear developers ask for is an editor that's entirely online. That may be changing.

Browser-based Code Editors

In the past I've played with the idea of doing all my development work online, but every time I've tried I've encountered too many problems to persist with my efforts.

Ever year or two I'd give it another go to see if things had improved. To be considered a realistic option, the editor has to look and feel like a traditional editor with the same (or better) features. Most have not met this standard.

There are a number of browser-based editors out there such as CodeAnywhere and Ace that work relatively well. We've reached a point where these apps are serious contenders, and today we're going to look at one that boasts a wide range of features.

ICEcoder: An Editor That Works

I approached ICEcoder cautiously, comparing it with my preferred editor (Aptana Studio). I was impressed with how easy it was to get started. With other tools I've had to put in the hard yards to get it all up and running, but with ICEcoder it only took a few steps and I was off coding.

Getting Up & Running with ICEcoder

The best way to get to know ICEcoder is by getting it up and running and playing around with all of its features.

You can run it on your machine via localhost, or install it on a publicly facing domain. Since one of the major benefits of ICEcoder is that you can develop from anywhere, we're going to get it set up on a live site.

Download ICEcoder

You can get ICEcoder from the website via the download button (you'll need to provide an email address), or you can navigate into your top level directory and git clone the files from the command line:

$ git clone git@github.com:mattpass/ICEcoder

Copy the Files to Your Server

You'll need to navigate to the root directory (which, depending on your system, might be something like public_html or httpdocs) and then create a new sub-directory to put ICEcoder in. I created an icecoder directory on my test server, but you could call this anything.

Be sure to set your folder permissions to 755 and your file permissions to 644 to ensure everything will work correctly.

Log In & Play Around

Now that you have all the pieces in place, you need to open up your browser and navigate to your site, appending the name of the sub-directory that you chose. Here's how it initially looked when I visited it on my domain:

When you first start it, you'll see the configuration screen. This lets you set a password and set up some basic options. These can be changed later, but for now it's good to set a password.

One really cool feature you might want to set up is the Multi-User system, which lets multiple people log in to the editor. We'll look at this in more depth later, but it's good to know it exists for now.

Once you've logged in you should see your file directory on the left and the dashboard on the right. Here's my setup — it's fairly empty except for a WordPress install.

Exploring ICEcoder's Features

ICEcoder outlines several of its features and functions in its docs. We're going to look at some of its strong points.

I've added a copy of WordPress in the root of my directory so you can see how ICEcoer works in a real world situation. You should definitely try this out with your usual tech stack to see how it will work for you.

Ability to Code Anywhere

One of the benefits of ICEcoder (and I would say its strongest feature) is the ability for you, as a developer, to code wherever you go and with any device.

If you're working on a development server you will need to have your code editor on every device you intend to connect to it. You'll need it on your desktop at home, on your laptop so you can develop remotely and then potentially at your office. While having different devices and setting them all up is fine, a better and more forward thinking solution is to just use the web.

So long as you have internet connectivity, you can develop and be productive.

As a quick aside, I've used ICEcoder on both my desktop, laptop and tablet and they all worked as expected. I would say so long as your device is big enough, you should be able to edit on the go. Phones and smaller devices are generally awful for coding beyond small bug fixes.

Multi Language Support & Code Assistance

Code editors need to support a wide range of languages. Whether they're all-purpose editors such as Aptana Studio, or more specialized such as Android Studio, editors need to be able to work with various file formats and style them accordingly.

ICEcoder handles all of the different files you'd expect straight out of the box, such as HTML, CSS, SASS, JavaScript, PHP and more. There's also support for implementing other languages. Each of the languages has its own distinct color and styling inside the editor, making it easy to differentiate between them and giving you enough contrast between keywords, attributes, elements and values.

Here's how ICEcoder displays stylesheets using the default theme which, makes it easy to see and distinguish your selectors, attributes and values.

Code Hinting

Another sought-after feature is code hinting, or code assisting.

These features kick in as you write your code and provide you with options or values that are applicable for your current document. For example, when you're editing a HTML file, as you type ICEcoder will dynamically show you a list of values. It's enabled by default and can be toggled on or off near the top right hand side of the UI.

Here you can see it offering to autocomplete the rest of the <article> tag.

Being able to see all of your applicable values is very handy when working with CSS or other languages with dozens or hundreds of options.

Even without the code assistance turned on, ICEcoder does the following to help speed up your development:

• Automatically closing new opened tags
• Automatic bracket correction, adding your closing bracket to open functions
• Show trailing spaces (shows you where you have empty white space where there shouldn't be)
• Indenting by either tabs or spaces (for the crazy few who indent with spaces!)
• Line wrapping or splitting

You can adjust these options easily under the "Style" section in ICEcoder's settings.

Theming and Custom Styles

ICEcoder's default style is a dark theme, with light text on a dark background. You might want to change this depending on your own visual preferences.

ICEcoder provides over twenty default themes, which can be switched out on a single click inside the "style" tab of the settings panel.

There's a range of different styles here. Most of them have great contrast, spacing and layout.

If you're not keen on any of these themes, you can create your own. These themes are just stylesheets with various rules to dictate the colours and layout. You can find them under the /CodeMirror/theme/ folder, each with their own stylesheet.

You can edit an existing theme and save it, or copy an existing one and adjust the styles as you see fit. The basic approach is simply defining colors, but there's nothing stopping you from going crazy with your styling if you know what you're doing.

Once you have your new stylesheet ready, you can select your new theme in settings (remember to update the 'Name' of the theme as defined at the top of the stylesheet so you can identify it).

Plugins and Extensibility

ICEcoder boasts a range of plugins you can install to provide additional features.

If you hover over the left-hand side of the file explorer, the plugin menu will expand out. Here you can see a quick listing of all the plugins you have installed. You can click on the bottom '+ / -' icon to open the plugin manager:

Continue reading %Edit Code in the Browser with ICEcoder%

by Simon Codrington via SitePoint