scruffles.net subscribe
Wednesday, August 3, 2011

I recently took the time to play around with the beta of Adobe Edge. Edge is an animation package similar to Flash. But while Flash outputs swf files which run in the Flash VM, Edge outputs HTML, JavaScript and CSS capable of running in any modern browser.


Here are some of the things I found while playing with it:

  • The generated code is surprisingly clean. The output consists of
    • an HTML file (with a few imports and a single div tag)
    • a CSS file (easy to read, with IDs that match the object names defined in the tool)
    • a Javascript file (reasonably easy to read, but with a lot of animation data in it)
    • JQuery dependencies
    • Edge Javascript dependencies
  • You don't want to edit any of these files other than the HTML, but from the HTML, you can add your own CSS or Javascript if you want to make changes above and beyond what the tool does.
  • No real drawing tools - The current version only offers 3 shapes: rectangle, rounded rectangle and text. I assume there are more on the way. In addition to a few CSS tricks, they could have provided some basic shapes by generating SVG (or maybe HTML 5 canvas). You can still do just about anything you need to by drawing your shapes in Illustrator and exporting them as SVG or rasterized images. There is no explicit Illustrator support other than 'import image', but it auto detects changes in files.



The animation above was created with Edge. The output consists of 4 static javascript files, a generated javascript file, an html file and a css file. I had to embed it in an iframe to get it to display right in this blogger page (not overlap anything) and I had to write some extra javascript by hand to get the animation to repeat.

  • Doesn't use Canvas - By now it should be obvious that Edge animates traditional DOM objects. It isn't just a port of the Flash VM to javascript running within a canvas. While this is nice in most cases (such as when you want to customize the output using additional Javascript or CSS), it would be nice to have a little more power than what HTML has to offer (arbitrary shapes for example). I wonder if there couldn't be a hybrid solution in the future, where a canvas could be added to an Edge animation to allow canvas-based frameworks to be mixed into Edge.
  • No event listing - So far, this is for animation only. You can't listen to clicks, drags or mouse movement over your shapes. I imagine this is just because it's so early in the product's life. In the mean time, these are just objects in the DOM, so a couple of lines of javascript are all you need to get a reference and add a listener.
  • No sound or video - while html 5 does support video now, I was more concerned with sound. Sound effects and animation go together like chocolate and peanut butter. I can't help but feeling my creations seem like little silent movies in their current state.
  • No components - Of course, components are more in the domain of Flex than Flash, and it would be a little early to expect components in an Edge environment
  • The Stage metaphor - Edge uses a 'Stage' metaphore rather than a 'page' metaphore like you would find in Dreamweaver (or any content-driven web page). Seems like a silly thing to point out, but this tool is for making an animation in a box. It is not for making a web site. After you finish, you can take the resulting animation and plug it into your web page by pasting in all the dependencies and the div tag.
  • Doesn't crop to the stage - Because Edge is so similar to Flash, I was a little surprised when I ran my animation for the first time and saw artifacts running out of the stage. Of course it makes sense, a jpg or svg doesn't stop rendering just because it ran out of the stage.. it's not in a plugin like shapes in Flash are. I initially didn't think this was a big problem, but I haven't found many good work arounds. When you add your animation to an existing web page, there are a lot of cases where the artifacts are going to run out onto the rest of your page. I've seen others solve this by loading the animation in an iframe, but that seems kind of dirty to me (although I had to resort to this trick in the example above)
  • Browser compatibility - It seems to work fairly well on modern browsers. I was running into issues on IE8 and Firefox 3.6, but that turned out to be lack of SVG support (I was animating SVG drawings created in Illustrator). Other than that, I haven't seen any problems.
  • Mac support - It runs on a Mac, which is more than I can say for JavaFX 2. I'm only mentioning this, because I wouldn't have even picked up Edge if I could have been working in JavaFX, but since I don't have a Windows machine at home, I found myself looking at other things.

Here's another example which uses SVG heavily (won't work in older browsers)

Monday, June 14, 2010

My current employer runs Sonar's static code analysis on the continuous integration servers. I recently turned on an IDE plugin which integrates Sonar's results into my editor and noticed a warning that made me scratch my head. Sonar doesn't like that I sometimes reuse my parameter variables. Here's an example of what I mean:
    public void doSomething(int input) {
        input = Math.min(20, input);
        input = Math.max(0, input);

        for (int i = 0; i < input; i++) {
            doSomethingElse(input);
        }
    }

I went online to look for an explanation. I expected to find an academic paper explaining some details that I'm overlooking. Instead I found that everyone willing to speak seemed to be in agreement that this is a bad practice. Strangely, I could find little reasoning as to why. The best explanation I could find was Martin Fowler's Refactoring. In it he provides two reasons you shouldn't make assignments to parameters:
1) Java uses pass by value exclusively. "With pass by value, any change to the parameter is not reflected in the calling routine. Those who have used pass by reference will probably find this confusing"
2) Consistency - "It is much clearer if you use only the parameter to represent what has been passed in, because that is a consistent usage."

To the first point, I would say any Java developer (even a junior developer) who thinks reassigning a parameter will effect the reference passed into the method should be fired immediately. We shouldn't cater to that developer. They will eventually do severe damage to your program.

To the second point, I think creating a second variable for the same purpose of the first is the very definition of inconsistent. A parameter is nothing more than a method scoped variable that happened to have been assigned from outside the method. If James Gosling had intended them to be final, he would have made them that way.*

I believe I like re-assignment for the very reason Fowler's dislikes them: maintainability and readability. The result of refactoring the above code to Fowler's recommendation would result in this code:
    public void doSomething(int input) {
        int boundedInput = Math.min(20, input);
        boundedInput = Math.max(0, boundedInput);

        for (int i = 0; i < boundedInput; i++) {
            doSomethingElse(boundedInput);
        }
    }

I think this is less readable. We now have two variables of the same scope that have nearly the same meaning. The first (the parameter) should not be used anywhere in the method except to initialize the second variable. This seems error prone. Somone could easily use input in the method body where they meant to operate against boundedInput. Even if they don't, it's still there taking up space (and brain cells) without providing anything to the story of this method.

Maybe I'm alone in thinking reusing parameters can make for more readable code. What better way to find out than for me to post my thoughts for the world to read (and criticize)? Feel free to comment.

* I guess an argument could be made that it was a mistake not to make parameters final by default, but now is a little late to make that argument. I believe we should write in the language that we have.

Monday, March 29, 2010

It's been on my todo list for well over a year now, but I've finally taken the time to redesign my blog. Since I switched to blogger I've been using an altered blogger theme that never really sat right with me (front image below). When I was using moveable type, I had created my design from scratch including a photo I had taken of a circut board (middle image). Considering myself a creative person, using someone else's website template really bothered me. It felt good to get this done.



Other than the actual photo of the cork (which I lifted from deviant art), everything here is original. I created all the artifacts from scratch in Photoshop and even took a picture of myself for the top corner. I'm using CSS and Javascript (JQuery) to make the flickr badge at the left look like images taped to the cork. There are a few rough edges I'd like to clean up, but overall I feel much better to have something original up again.

Bryan