New Features of Adobe Edge Code CC

Adobe ToolsIaroslav Lazunov • July 17, 2013 • 4 minutes READ

Edge Code is an editor developed for web developers and web designers who write HTML, CSS, and JavaScript. It is built on an open source project called Brackets which was released in May 2012. Edge Code CC is Brackets plus features that use Adobe services and such products as Edge Inspect CC, Edge Web Fonts and PhoneGap Build.

Edge Code allows speed up development cycle by connecting directly to your browser for automatic real-time updates to the HTML content running inside the browser. It enables you to focus on writing your code rather than worrying about all the required steps in switching between your editor and browser and step through development and debugging iterations.

If you have the skills to use Edge Code, you also have the experience to customize the editor and provide new features. There is a growing JavaScript API to allow you to build new extensions. Although Edge Code is a commercial distribution of Brackets, you can use it for free and Adobe doesn’t plan to change this.

Now let’s take a look at some of the coolest features of Edge Code CC.

Live Preview

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. To activate the feature, click on the Live Preview icon at the top right of the app window or go to File > Live Preview.

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. You also get visual clues on what you are editing.

If you change your HTML code, then the Chrome browser will automatically reload the page after saving HTML file.

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. All you have to do is to place the cursor on the CSS class in your HTML page and then press Command/Ctrl + E.

An inline editor will display all the CSS selectors that affect the current element (classes, pseudo-selectors, IDs). You can open multiple inline editors at the same time. In a similar way you can streamline your JavaScript editing. The inline editor also allows to edit the color of the elements in the HTML or CSS document.

Edge Web Fonts support

Edge Code works with other Edge tools and services such as Web Fonts. If you want to use Web Fonts in your CSS file, then simply write font-family tag, and choose Browse Web Fonts in the opened list of fonts…

Choose the appropriate font and press Done button.

Now hit Edge Web Fonts button, that will lead to JavaScript generation, that need to be pasted into all HTML files that reference this CSS file, for the correct reflection of the Edge Web Fonts in the user’s browser.

Preview on mobile devices with Edge Inspect CC

The Preview on Devices using Edge Inspect CC button is designed to activate this feature. Using Edge Inspect CC you can test your code on iOS, Android, and Kindle Fire.

To use Edge Inspect with Edge Code, start Inspect on your desktop and all your devices, and then Click on the Edge Inspect button. This will open up the Edge Inspect panel. From the device, add a connection to Edge Code by specifying the IP address of your desktop. Now, any changes you make on the Edge Code will be reflected on your device, in real time.

JSLint support

JSLint support can help you write better JavaScript code by avoiding common drawbacks. You have complete control over this, being able to enable/disable JSLint in the View menu as you need

Conclusion

TNW asked Adobe if they felt that Edge Code is a competitor to popular pseudo IDEs like Coda or Espresso, and they received an interesting response:

“We really appreciate the comparison to Coda/Espresso. Those tools have been out for 5+ years and are really quite advanced. We actually don’t believe that there is a direct competitor to Edge Code. Edge Code is the only code editor focused on HTML, JavaScript and CSS that is built with HTML, JavaScript and CSS. Because it’s based on the Brackets open source project, anyone who has the skills to use Edge Code has the skills required to customize, extend and contribute to the project. Edge Code is free and open, so we hope it will be just one of the many tools professional web designers and developers use regularly”.

Edge Code CC is currently a preview release. While this version is stable and mostly free of bugs, the preview version is missing features that might be required. Adobe hopes to have a version of Edge Code that is ready for day-to-day use in mid-2013.