Post navigation

Edge Code CC Preview 4

Adobe Edge Code CC is part of the Creative Cloud June 17th update and gets one step closer to the 1.0 release. The team has been working hard to add more features and I am pretty sure that you’ll like this code editor. Just give it a try!

What is Adobe Edge Code CC?

If you already know what Edge Code and Brackets are feel free to skip this section. In May 2012 we released an open source project called Brackets. The project tagline is quite self-explanatory: “open-source code editor built with the web for the web”. Brackets is built on top of CEF (Chromium Embedded Framework). This means that what you look at is a web application running inside of a chromeless browser. Kind of cool isn’t it? Think about it: a code editor for the web built with web technologies. It means that you, as a web developer/designer have the knowledge to actually change the editor – from changing the look and feel (it is just CSS isn’t it?) to fixing bugs or adding new features (it is all about writing JavaScript and HTML code). I will touch on the rest of the unique features of Brackets in the next section.

Because of the technology behind Brackets and its unique vision on how a code editor for the web should work we have a good number of contributors from outside of Adobe. Here is a screenshot with the current contributors (I am proud to report that I am one of them :) ):

Finally, what would any software be without an extensibility API? Brackets was built to support extensions almost from day one. This means that it is quite easy to create an extension that adds new features and distribute/install it. Here you can find a list of Brackets extensions.

If Brackets is the open-source project what is Adobe Edge Code CC? As we were working on Brackets adding new features and thinking about what else we could add we realized that some of these features are actually tied to other Adobe technologies. So maybe these features don’t belong in an open-source project such as Brackets. This is the reason we decided to build a commercial distribution of Brackets called Edge Code CC. So Edge Code CC is Brackets plus features that use Adobe services/products (Edge Inspect CC, Edge Fonts, PhoneGap Build). Finally, although Edge Code CC is a commercial distribution of Brackets, we are not selling this – you can use it for free. We don’t have plans to change this.

Edge Code features

Let’s see some of the coolest features of Edge Code CC in no particular order.

Inline editors for CSS and JavaScript

The inline editor is an amazing feature that enables you to stay in the zone while editing CSS and/or JavaScript. Here is an example of how it works: suppose you want to change the CSS for the H1 element. All you have to do is to place the cursor on the H1 element in your HTML page and then press Command + E (Control + E on Windows). An inline editor will be opened and it will display all the CSS selectors that affect the current element (it supports classes, pseudo-selectors, IDs). You can open multiple inline editors at the same time.

In a similar way you can streamline your JavaScript editing. Suppose you are in a function and you need to make a call to another one and you are not sure of the return type or arguments. You press Command + E (Control + E) and the function definition will be displayed inline.

Live Preview

When you couple the inline editors with Live Preview feature you get something really powerful. Live Preview allows you to edit your code side by side with a Chrome browser that displays the HTML page you are editing in Edge Code CC. As you change the CSS properties, the changes are pushed to Chrome without having to actually save the files and reload the page in Chrome. If you change your HTML code, then the Chrome browser will automatically reload the page. You also get visual clues on what you are editing.

Preview on mobile devices with Edge Inspect CC

On the left edge of the tool, beneath the Live Preview icon you’ll find the Preview on Devices using Edge Inspect CC button. As the name suggests by using Edge Inspect CC you can actually test your code on iOS, Android, and Kindle Fire devices without having to worry about URLs and local servers.

Edge Web Fonts support

This feature makes it easier to add web fonts served by the Edge Web Fonts free service. You have more than 500 fonts to choose from.

JSLint support

Shortly after the first sprints were history, the Brackets team started to use Brackets to develop well … Brackets. From this experience come features like JSLint support. JSLint can help you write better JavaScript code by avoiding common pitfalls. You have complete control over this, being able to enable/disable JSLint as you need.

What’s next

Obviously there is more work ahead to reach the “1.0” milestone. As we move forward new previews will be released so we have a chance to get your feedback and make the best light code editor for the web. Feel free to give us feedback; we have a forum for people willing to contribute here. If you want to become a contributor to the open source project Brackets then go here. There are many ways you can get involved: help for supporting new languages, fixing bugs, adding new features. Keep an eye on @edge_code, @ryanstewart (Edge Code product manager), @brackets, and @adrocknaphobia (Adam Lehman, Brackets product manager).