Requirements

Prerequisite knowledge

Some familiarity with HTML5, CSS, and JavaScript

 

Adobe Edge Code

User level

All

Once upon a time, it seemed there were only two options for writing and editing code: extremely bare-bones text editors or monolithic IDEs. Today, while those options still exist, a third option has been gaining prominence and popularity: a lightweight code editor with  some of the key features, like code hinting and debugging that used to be provided in only complex IDEs. Edge Code, a new code editor released by Adobe, definitely fits within this third option. Of course, it includes the code hinting for HTML and code coloring for HTML, CSS, JavaScript, and LESS that you would expect from a modern code editor, even in these early stages. It also offers a variety of unique features that makes it a great option for web designers who code or developers focused on HTML, CSS, and JavaScript. In this article, I introduce you to some of those features and show how you can take advantage of them.

What's the difference between Edge Code and Brackets?

Perhaps you have already heard of Brackets and think Edge Code sounds awfully familiar — this is very perceptive of you. For those of you who haven't heard of Brackets, it is an open source code editor founded by Adobe and built with HTML, CSS, and JavaScript. It is MIT-licensed and developed completely in the open on GitHub. Edge Code is merely a distribution of Brackets that includes extensions that integrate with Adobe's Creative Cloud tools and services. The key takeaway here is, Brackets is free and open source, and will remain free and open source. Edge Code is also available for free, via the Creative Cloud.

Code faster with Quick Edit

One of the key features that makes Edge Code a different kind of code editor is its concept of Quick Edit. As any experienced web coder knows, editing even a single page of a web site can often involve multiple files: an HTML file, very likely multiple CSS files, and probably multiple JavaScript files. In a typical workflow, you jump from one file to another numerous times just to make a simple change to your page layout or functionality. This juggling is not only inefficient, but is easily prone to confusion or needless mistakes.

With the Edge Code Quick Edit feature, you can make many of these types of edits inline without ever having to leave your primary HTML document. Currently, this feature only works for CSS and JavaScript but plans are to expand support for this feature to other types of files. Let's look at how this works.
For the example here and in the rest of this article, I use a simple HTML template generated by Initializr. On Initializr.com, you create custom HTML5 starter templates. I generated a custom build of a Classic H5BP (as in HTML5 Boilerplate). I selected the "Mobile-first Responsive" HTML/CSS template and unchecked all of the "H5BP Optional" items. You can use the sample files provided with this article or download your own build.

Note: In the sample files, I changed the jQuery script include on line 66 to use http://. For the purposes of this article, we load the file with the file:// protocol.

In the index.html file, scroll down and place your cursor on the <article> HTML element at line 33. Access Quick Edit and view the styles affecting this element and even edit them inline by pressing Ctrl/Cmd+E or right-click and selecting Quick Edit. A new editor area opens inline allowing you to view and edit styles at line 239 and 333 of main.css. Changes in this inline editor affect this HTML element. Also, you can switch to normalize.css by selecting it in the list on the right. Changes to those styles immediately impacting the HTML as well. Switch between the various style definitions by selecting one of the options on the right side of the Quick Edit window. Or use the Alt+Up and Alt+Down keyboard shortcuts.

Before you get overly excited, I should note some current limitations with this feature. Remember, Brackets is in its infancy as an open source project, and the current release of Edge Code is just a preview of what's to come. First, Edge Code searches all CSS files in your project to find applicable styles. It does not specifically target the ones linked within your current document. This means some false positives can occur, even if the CSS file is not in the document. Second, Edge Code does not take cascade or tag context into account. This means some false negatives are possible as well. Nonetheless, in many scenarios, this feature can already be a massive time-saver. And you can expect that future iterations of Edge Code will expand only its support and capabilities.

I forgot to mention another exciting capability of Quick Edit: any changes you make is immediately reflected in Live Development. What is Live Development? Read on.

Test your changes with Live Development

The typical web designer and developer workflow often involves changing the HTML, CSS, or JavaScript code in your editor, switching to your browser, and then refreshing the page to test the change. If this sequence were a one-time event, it would be trivial. This sequence, however, is more often repeated potentially hundreds of times throughout a given workday. Edge Code contains a feature called Live Development that can begin to alleviate this pain by automatically refreshing changes you make in the browser.

To see this in action, let's continue working with the index.html file we opened earlier. To turn on the Live Development feature, click the lightning bolt icon in the upper-right corner of the Edge Code window.

First things first, Live Development currently works with only Chrome. If you don't have Chrome installed, you receive a warning. Assuming you do already have Chrome installed at its default install location, and this is likely your first time using Live Development in Edge Code, you are prompted to allow Edge Code to restart the browser so that remote debugging can be enabled. Now that everything is set up, let's see this in action.

  1. Place your cursor within the div element on line 33 in index.html that reads <div class="header-container">.
  2. Press Ctrl/Cmd+E to open Quick Edit and then press Alt+Down to move to the CSS block beginning at line 85 in main.css.
  3. Change the background color to a lighter shade. Change the text that reads "background: #f16529;" to read "background: #E69424;".
  4. Now, without even saving the file, just switch to your browser and you'll see that the change already appears.

Perhaps the design wasn't actually improved by my modified color scheme (I'm not known for my design skill), but the process of making and viewing this change certainly improved. As with Quick Edit, there are some limitations to Live Development in this early preview release. First, it currently works with only CSS files. Changes to HTML and JavaScript are not reflected. Second, it works with only one HTML file at a time, so if you change HTML files, the original one is closed in Chrome and the new one opened. Last, the file is open in the browser by way of the file:/// protocol, which has some browser limitations. Obviously, you can expect the features and capabilities of Live Development to continue to improve in future releases of Edge Code.

Adobe Edge Web Fonts extension

As mentioned earlier, Edge Code comes bundled with extensions that integrate with Adobe Creative Cloud features and services. The first of these bundled extensions is for Edge Web Fonts. Edge Web Fonts takes the free and open source fonts found in TypeKit and Google Web Fonts an combines them into one central service. It’s your one-stop-shop for free high-quality web fonts.

Open the main.css file. Edit the title style definition that begins on line 91 and add a font-family definition. Add a line within our body style definition and type "font-family: ". Notice the hinting that comes up as in Figure 4.

Click the "Browse Web Fonts" link to browse available fonts on the Edge Web Fonts service. A new window opens, showing you previews of a long list of fonts available through the Edge Web Fonts service. Search items in the left menu or simply choose a font by clicking it and then pressing "Done." This inserts the proper font name within your CSS file.

If you chose Amathysta, as I did, your title style block looks like the following code:

.title {     color: white;     font-family: amethysta; }

Now that we are finished adding fonts, click the Edge Web Fonts logo at the top right of your Edge Code window (beside the Live Development icon we showed earlier). This opens a new window with the embed script for any HTML files that will contain the font you added to your stylesheet. Simply copy and paste that into the head of the index.html file. View it in a browser, where the "h1.title" text is now displayed with the Amethysta font (or whichever font you chose).

Expanded capabilities through community extensions

Perhaps I didn't cover your favorite code editor feature yet. As mentioned, this is still an early release. However, Edge Code is extensible. It is entirely possible for you to create or customize the functionality. Even better, though, is that, because Edge Code is based upon the Brackets open source project, you can take advantage of the long list of community built extensions already available.

Let's install a free extension being made available by Adobe for PhoneGap Build integration. PhoneGap Build is a service that allows you to use HTML, CSS, and JavaScript to build native applications across a variety of mobile platforms, including iOS and Android™. As you can imagine, that makes Edge Code an ideal tool for creating mobile apps with PhoneGap Build. I don't go into detail about PhoneGap Build here, but be sure to check out Raymond Camden's ADC article, "PhoneGap Build levels up," whch introduces the service and its features.

  1. Download the zip file from the brackets-phonegap page and extract the zip file.
  2. In Edge Code, open the Help menu and click "Show Extensions Folder." Within the extensions folder, choose the "user" directory.
  3. Copy the extracted extension zip into the Edge Code extensions folder under “user” and restart Edge Code.

To take advantage of this extension, get a free PhoneGap Build account at build.phonegap.com. With the extension installed, go to View and choose PhoneGap Build. Since this is your first time using the extension, you need to log in to your PhoneGap Build account. Once you have logged in, you see any PhoneGap Build projects you have already created in the lower half of your Edge Code window. As indicated by the notification that comes up when you log in, you are able to link a project folder with any of your PhoneGap Build projects.

Once this link is in place, use Edge Code to send the files directly into PhoneGap Build and even have our project rebuilt in PhoneGap Build. And PhoneGap Build recreates all of the native installers. One of the nicest features of this extension is that it gives you direct access to the QR codes used for installing PhoneGap build apps on your devices, without ever needing to go to the PhoneGap Build site.

If you are interested in writing your own extensions, see the Brackets documentation on the topic.

Where to go from here

Hopefully, you now have a good overview of where the Edge Code editor stands, as of this preview release, and where it is headed. As you can see, a lot of features make the editor unique and, more specifically, improve your productivity, and clean up the typical designer and developer coding workflow. Look for updates to Edge Code regularly delivered inside the editor itself.

In addition, if you are interested in contributing to the Brackets project upon which Edge Code is based, fork the project on GitHub at the Adobe GitHub repository for Brackets. Once there, discover how Brackets was built — with the same HTML, CSS, and JavaScript technology you use — and use Edge Code to edit Brackets, itself. To understand the underlying architecture, read David Deraedt's article, "An Overview of Brackets Code Architecture," on the Adobe Developer Connection.