To focus our efforts on capabilities that are most valuable to our customers, we sometimes discontinue active development of a product. Often, the core functionalities of these products are available in other Adobe tools. Fireworks CS6 Edge Animate, Edge Inspect, Edge Reflow, and Edge Code. About file types supported by Edge Code CC. File.org aims to be the go-to resource for file type- and related software information. We spend countless hours researching various file formats and software that can open, convert, create or otherwise work with those files. Feb 25, 2013 Ryan Stewart, Product Manager shows you Adobe Edge Code preview built with HTML, CSS, and JavaScript: live development, code hinting for HTML and CSS, inline colors, and quick code editing in context. Download Adobe Edge Code CC, built on the open source CSS and HTML editor Brackets, when you get started with Creative Cloud. Start your free trial today.
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.
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.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.
With Postcards you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.
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.
Free Download Adobe Edge Code Cc
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…
With Startup App and Slides App you can build unlimited websites using the online website editor which includes ready-made designed and coded elements, templates and themes.
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.