January 4, 2012 - Josh Hatwich

Why can’t it just work?

Working with HTML, CSS and JavaScript and getting it successfully deployed on the web can be a daunting task. For those new to the technology, it can be extremely frustrating and in some cases it can be a show-stopper. We’ve had a lot of folks try Edge Preview 3 and some of them have run into issues getting their content running and deployed to the web. On the Edge team we do a lot of debugging as we resolve various defects in the product. The following are a few useful techniques you can use to figure out why an Edge composition is not running or deploying as expected.

Browser Compatibility

One thing to understand up front is that Edge content only works on modern browsers. In Preview 3 that means IE9+, Firefox 4+, the latest Safari and Chrome on the desktop – the latest iOS and Android Webkit browsers on mobile. We are working on better down-level browser support, but until that is added you would have to do extra work outside Edge to provide an alternate down-level experience.

Recovering Your Work from JavaScript Errors

There have been a handful folks reporting that their composition fails to open after a save. It is a scary thing to see the blank page come up after spending hours creating a composition. Folks will be running into fewer of these kinds of issues as the product matures, but in the meanwhile a little debugging goes a long way; it is generally pretty easy to recover your work.

First, a little context. Edge runs your composition in a Webkit-based stage. The data that makes up your composition is stored in a JavaScript structure that is interpreted within the stage and subsequently understood by Edge. If there is a syntax error in that JavaScript structure then Edge sees nothing and opens a blank page. In Preview 4 Edge will alert you of this condition and will not open the file. These types of errors not only prevent Edge from opening the composition, they prevent it from playing properly in the browser.

JavaScript syntax errors are pretty easy to fix. The first step is to figure out where it is broken. There are a number of ways to find JavaScript errors, the following should get you started with Dreamweaver or a WebKit browser (Chrome or Safari).

Dreamweaver

If you have Dreamweaver it will flag the error when you open the offending JavaScript file (xyz_edge.js is a good one to start with).

1. Open the HTML file in Dreamweaver.

2. Select the xyz_edge.js file in the related file list. If you don’t see xyz_edge.js in the related files list, select "Live View" which causes Dreamweaver to rescan the related files.

3. Observe the error on Line 18. The quote is double-escaped and makes it impossible for Edge to read the file.

4. Fix the error and the warning goes away. In the example above the string is “double-escaped” which means there is an extra ‘\’.

Browser-Based Tools

You can also view errors in your browser by opening the JavaScript console. The following screenshots were taken using Google Chrome, but the same or similar steps can be taken to see errors in Safari or Firefox w/Firebug.

1. Open your page in the browser.

2. Right-click and choose “Inspect Element”

2.5 Or…

Note: On Safari you have to enable Developer tools before you will see the option to Inspect Element

Note: On Firefox, you have to install Firebug http://getfirebug.com/

3. Refresh the page. This is not strictly necessary, but in some cases the Developer Tools don’t see all the JavaScript files that were loaded.

4. Make sure the Console tab is selected, you should see any errors displayed.

5. Click the file + line number (to the right of the error)

Hosting, Deployment and Related Problems

There are many options for hosting HTML content. Depending on how your host is set up, you have been given a way to upload content to the server. To get an Edge composition to work you have to deploy the HTML source as well as the JavaScript, CSS and related image files.

Not only do the files need to be deployed, they also need to end up where the composition expects them. You must copy the /images folder and the /edge_includes folders to your web server. Note: the site management in Dreamweaver and other site management tools may not "see" the images and scripts that an Edge composition requires, so be sure you select and transfer all of the required resources (upload/put the folders and their contents in addition to the HTML file).

The easiest way to determine whether you are having a problem with resource deployment is to use the inspector in Chrome or Safari or Firebug in Firefox to see what files are being requested and whether they are found or not.

The Network tab is most useful for this type of investigation. You should see requests for several edge_includes/XXX.js files, the request for your composition’s xyz_edge.js file followed by requests for any images used by your composition.

The above screenshot shows a 404 (not found) error. That means the file “Adobe_logo.svg” was not found.

In the xyz_edge.js file that file is referenced via a relative path.

In order for the Adobe_logo.svg file to be found, there must be a folder named “images” that is a peer of the xyz.html file and the images folder must contain Adobe_logo.svg.

Hosting SVG

In order for some web browsers to understand SVG images properly, they need to be served in a particular manner by your web server. If this is not setup properly then the SVG will not display.

1:18 AM Permalink
December 22, 2011 - Rich Lee

Sneak Peek: Adobe Edge Preview 4

Hey Everyone!

Before we take off for the winter break, we’d like to show you a glimpse of what’s new in Adobe Edge Preview 4. Edge team member Sarah Hunt will show you some of the new features like Symbols, clipping, support for web fonts, and more.

(if the video doesn’t appear above, click here.)

Edge Preview 4 will be available on Adobe Labs in January 2012. Stay tuned for more info!

Happy Holidays!
Rich

4:47 AM Permalink
December 14, 2011 - Rich Lee

Adobe Edge Preview 3 is expiring on 12/31: Please download Preview 3.1 for an extension

Today Edge Preview 3.1 was released on Adobe Labs. Preview 3 is set to expire on December 31, 2011, regardless of when it was installed. Preview 3.1 extends the expiration until Preview 4 is available in January.

To continue using Edge, please follow these steps:

  • Uninstall the version you currently have.
    - Mac: Run the Edge Uninstaller in the folder named “Adobe Edge Preview”, located in Applications
    - Windows: Uninstall “Adobe Edge Preview” using Add or Remove Programs
  • Download Edge Preview 3.1
  • Unzip the file and run the Adobe Installer

We intended to release Preview 4 before Preview 3 expires, but we feel it needs more work before making it available. We are VERY excited about the new features we’re working on, and think it will be worth the wait. Preview 4 will introduce:

  • Symbols: Create reusable objects that animate and interact independently of the main composition.
  • Persistent Code Panel: Easily navigate to any code in your composition.
  • Element Display: Manage an element’s lifetime so they’re displayed only when needed.

Preview 4 will also include improvements to usability, as well as fit and finish.

Thanks for using Edge and being a part of our community. We’re sorry for the trouble and appreciate your understanding. Stay tuned for more updates on Preview 4, and Happy Holidays!

Regards,
Rich

4:47 PM Permalink
October 21, 2011 - Josh Hatwich

MAX Wrap – Interactivity and Real-World Use

Hello World: Edge Preview 3

Many of us on the Edge team had the opportunity to attend Adobe MAX in Los Angeles a few weeks ago.  We launched Edge Preview 3 at the conference and had a number of well-attended sessions where we showed a glimpse of what is possible in Edge with Preview 3. The following post should help you catch up on what you may have missed or review what you caught live.

 

Download Edge & Review the API

If you don’t already have Preview 3 – download it here. The Edge API has detailed information about how to use the Edge JavaScript runtime.

 

Download Examples

Here are the Food Truck Examples I used in my presentation.  They show “Rhako’s Ramen” in various stages of development.  The website in its finished form consists of 3 Edge compositions running in a single page that are coordinated to play once all three are loaded.

A bit about Interactivity

Preview 3 added support for interactivity.  All your code goes into xyz_edgeActions.js.  You can edit the contents of that file in an external editor, just be careful to preserve the Edge comments.  Each of the “bindings” correlates to a bit of UI in Edge:

 

The code for each Composition and Symbol (the stage is a Symbol) is contained by a closure.   Closures help encapsulate code and prevent Edge code from polluting the window namespace where it might interfere with other JavaScript.

Real-World Example

To show how Edge content might be used we created the Rhako’s Ramen noodle site. We wanted the page to behave well, so it has a pre-loader and presents an alternate display (albeit raw) for down-level browsers. There is an animation that presents a twitter data feed and three separate Edge compositions are combined into one page.

The page was built as follows:
A)  Sliced the Photoshop comp created by the designer and produced assets for the “truck” part of the composition.

 

B)  Animated the “truck” preroll.
Food Truck Animation
C)  Sliced the comp to produce assets for the “map” part of the composition.
D) Animated and added code to build the “map”.  There are 4 approaches that can be used to build the Map area of the page.  Edge will add support for Symbols in a future Preview, but for now we have one timeline to work with and can jump around it to get to different states.

 

E) Sliced and coded the HTML for the overall index.html page.  Animated and wired up a Twitter feed to the animated elements.  It cycles through recent tweets.  Also added a pre-loader animated .gif that shows until all of the compositions are ready to play.

F)  Embedded the “truck” and “map” compositions in the index.html web page.

 

G) Incorporated modernizr.js to add a (raw) down-level browser experience.

 

Results

Here is the finished result.

 

Resources

Download Edge
Edge JavaScript API
Adobe / jQuery Blog
Edge Forums

Let us know what you would like to see added to Edge!  Watch for Preview 4 on the horizon.
11:47 PM Permalink
September 29, 2011 - Scott Evans

Hello world!

Welcome to our team blog! Give us a few days to get things going.

In the meantime, download yourself some Edge from Adobe Labs.

10:47 PM Permalink