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.
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.
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.
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.
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.
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.
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.
Edge gives you access to an extensive library of web fonts served by TypeKit. This is provided by means of the fourth button.
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.
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.
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.
There are a number of other examples on github, but I will leave you to do your own exploring if you are so inclined.
I created the page shown here by exporting it from InDesign using Export for HTML and then tweaking the CSS using Edge Code. I will be discussing the details of this export in my next blog; so watch for it.
A simple addition to the application would be a provision for opening and saving ePub files created by InDesign. As it is, you need to open the ePub package to get access to the files. When done editing, you also have an added step of bundling the files back into a ePub package.
Also, I just can’t wait for Safari to be integrated with Edge Code. Safari Version 10.9 supports all the new features except shapes. This last feature should not be too far in the future.
Start playing with these new web features. You will want to be ready once they are supported by major browsers.