Edge Code Now Preview 7

The big news this week was the latest release of Edge Code CC. It is a pre-release version (Preview 7) but, in spite of a few bumps here and there, it seems to be quite stable.

Edge Code CC is a very lightweight editor for working with HTML, CSS3, and JavaScript. So if you are looking for an editor to use for tweaking your InDesign exports (HTML and ePub), this is a product you may want to investigate. It is included with your Creative Cloud membership.

What I like about Edge Code

I have been working with Edge Code in Macintosh Version 10.9 for the past week and have found there is much to like about the program.

Ease of Use

First of all, for the person familiar with HTML and CSS3, the learning curve is next to nothing. Once the application is installed, click on its icon to launch. You will be presented with an HTML document giving you instructions for use. Best of all, it is only one page long. You can probably read through the documentation in a few minutes. But keep notes handy, you may need to refer back to some details as you start working with it.

Clean, Uncluttered Interface

Once you open the application, you may be surprised by its stark simplicity. There is a listing of your working files on the left and four buttons on the right. A keyboard shortcut gives you access to the CSS that is associated with your selected HTML tag. Additionally, just about everything in the menu bar can be accessed using a keyboard shortcut.

In-Browser Live Preview

When ready to preview your code, click the top button on the right of the editor window to open your page in your default editor. Sadly, only Chrome is supported at this point, but I am sure Safari will not be far behind.

Extensible

There is no question that the engineers had extensibility in mind when they designed Edge Code. Although not fully supported at this point, you can get many extensions from the baseline open-source Brackets editor. Once you get the URL for the extension you want, select the Extension Manager from the File menu. Click the Install from URL button and paste in the URL. Click install.

On-Device Inspection

The third button at the right of the edit window allows you to inspect your project on a number of devices including Kindle and iPad. I was excited to try out this feature, but after jumping through a number of hoops which all required that I enter a password, my thinking is that there must be a better way.

Access to Edge Web Fonts

Edge gives you access to an extensive library of web fonts served by TypeKit. This is provided by means of the fourth button. 

Ease of Use

Whether you just need to tweak a line or two, or you are having to do some serious editing, Edge Code lets you get in and get the job done with virtually no overhead. Simply choose Open Folder from the File menu, and navigate to the HTML folder created by your InDesign export. The first HTML page will display in the editor (name it Index.HTML if you have more than one). Of course, if you export to ePub you will need to “crack open” the ePub folder to get access to the HTML and CSS files.

More to Come

I look forward to exploring more of its capabilities in the near future. What interested me was its reported support for the new web standards (regions, shapes, blend modes, and custom filters). That, with the fact that you can live sync its display to electronic devices, had me downloading the app within days after its Review 7 announcement.

Don’t Take My Word For It

If you want to get a taste of the future, you will need to configure Chrome with an extension to accommodate the new features. The instructions for how this is done is at html.adobe.com/webplatform/enable/.

Once you have Chrome set up and open, enter the following in the address bar.

http://adobe-webplatform.github.io/Demo-for-National-Geographic-Forest-Giant/browser/src/

There are a number of other examples on github, but I will leave you to do your own exploring if you are so inclined.