1. Open up iMovie
2. Go to “File > Import from Camera” or the click big camera button under the Project Library pane
3. Click the “Archive All” button beside “Camera: Sony HDR-XR150″
4. Choose a location to save the entire contents of your camera (I use portable hard drives)

After doing this, you’ll have a “Camera Archive Folder” where you can import movies into iMovie for your editing pleasure.

Screenshot of iMovie and the Archive All button

Update: Added some browser scores for Nov 2011

Particle Creation

Cameron initializes the particles this way:

	var domNode = document.createElementNS(SVG_NS, "circle");
	var benchmark = document.getElementById("benchmark");
	benchmark.appendChild(domNode);

	// Set initial position to middle of screen
	domNode.setAttribute("cx", x + PARTICLE_RADIUS);
	domNode.setAttribute("cy", y + PARTICLE_RADIUS);
	domNode.setAttribute("r", PARTICLE_RADIUS);

	// Set colour of element
	domNode.setAttribute("fill", COLORS[Math.floor(Math.random() * COLORS.length)]);

That is, he creates a svg:circle element, then appends it to the DOM, then modifies its attributes. Every time an attribute is changed in the DOM it has the potential to cause a layout/render change. Thus, it makes more sense (to me) to attach the circle to the DOM only after you’re done initializing the element (i.e. after all the setAttribute calls).

This doesn’t affect the frame-rate, since creation only happens at the beginning, but it might affect the startup time of the animation so I thought I’d drop it in this post.

DOM Animation – the Naive Approach

Next, he has a function that is called as fast as possible to animate the particles. The animate function does a simple loop over all particles and calls a draw() function. The particle’s draw function does this:

		// lots of other JS code here
		domNode.setAttribute("cx", nextX + PARTICLE_RADIUS);
		domNode.setAttribute("cy", nextY + PARTICLE_RADIUS);

The problem with this again is that each DOM call can cause a re-render. This means if you have 500 particles, there are 1000 DOM calls affecting the rendering with every call to animate(). Depending on how stupid the browser is, this could be expensive.

• Click here to try the original demo

Suspension

My first attempt was to use suspendRedraw() and unsuspendRedraw() around the for-loop that calls particle.draw(). This is the SVG-recommended way to do a bunch of operations ‘off-screen’ and then have the results updated in one-shot. This did have an effect on Firefox’s frame rate.

But it didn’t really seem to affect WebKit’s performance at all. Looking at the WebKit source (svg/SVGSVGElement.cpp) it’s pretty easy to see why:

unsigned SVGSVGElement::suspendRedraw(unsigned /* maxWaitMilliseconds */)
{
    // FIXME: Implement me (see bug 11275)
    return 0;
}

Maybe WebKit will one day implement this and the technique will become more broadly useful. [Update Nov 2011: This has been implemented in WebKit]

• Click here to try the demo that uses suspendRedraw

NOTE: IE9 Preview 1 has not implemented suspendRedraw() and the demo does not run.

Manually Doing Off-Screen Rendering

I then went and did something crazy.

I added a svg:g (group) element to the particle test, added all the particles to it. Then with each call to render, I remove the <g> from the DOM, call all the particle draw() functions, then re-add the <g> to the DOM.

This had a dramatic effect on Firefox’s performance, but it seemed to slow down Safari and Opera. Not sure why that would be, but I guess they have much more sensible ways of updating the rendered state of the DOM than Firefox so that removing and adding an element to the DOM becomes more expensive.

• Click here to try the demo with manual off-screen rendering

Conclusion

This blog post is really just an attempt to share the knowledge about some of the challenges in using SVG for high-performance demos. Basically don’t change the live DOM if you can avoid it.

Note that I still stand by my original statement that SVG is not the right technology for particle effects unless you need mouse interactivity. This type of demo is much more suitable for HTML5′s <canvas> element. Let’s hope IE9 also implements a GPU-accelerated version of this element too!

I decided to go with my Solitaire demo because it was the most complete, didn’t infringe on any copyrights (looking at you Tetris), and most visually recognizable. It’s not the most innovative, but then again the point of this is not necessarily to win any prizes. It’s really about increasing awareness.

Unfortunately, the SVG (26kb) and JavaScript (16kb + 21kb) totaled 63kb. I did some cleanup of the SVG, minified the JS and then put the script inline with the SVG and then gzipped it. The result was a .svgz file that was 9kb. Perfect!

I then got an email from a friendly marketing/evangelism person at Microsoft who said that the engineers did not know how to open the svgz file to review the code to ensure it was under 10k. Woops! I explained to her that I thought it would be ok for the SVG to be gzipped, much as PNG/GIF files use compression and sent her the uncompressed SVG file for them to review. After all, SVG is just an image format, right?

Was I following the rules? Did Microsoft give me a fair shake? See for yourself. Who knows, maybe this is the first time a Microsoft admin had to figure out how to serve SVG on a Microsoft web server.

Out of curiosity, I later tried to see how far I was able to get down the Solitaire game: 5811 bytes. Not bad for a complete game that has scalable graphics. I’d be curios to see the equivalent SWF file.

I don’t expect you to vote for my entry, but what I do expect you to do is now go out and submit .SVGZ entries to the MIX 10k challenge. That one SVG entry is looking pretty lonely. If I can get Solitaire down to 5811 bytes, surely you can do better?

Thanks a lot to Amy, the evangelist/marketing person who really was quite patient with me.

If you want to launch your app in one click in the emulator (instead of having to pick “Android Application” from that silly “Run As” window every time), then you need to go to Preferences > Run/Debug > Launching. Under “Launch Operation”, choose “Always launch the previously launched application”.

The first time you’ll have to choose how to run your project (right-click on the project, Run As > Android Application). Afterwards, all you’ll have to do is click the “Run” button (or the shortcut combo: Ctrl+Shift+F11).

When using the C++ Standard Template Library, one has to be careful not to invalidate iterators in a container that you’re iterating over. If that makes any sense to you, then

A colleague of mine had code like this:

You might be surprised to hear that the program crashed when the first task had to be removed. The reason is that the removeTask() function erases an item out the collection which invalidates the iterator loopit. When the for-loop tries to increment the iterator, we get unexpected results.

This is a frustrating problem, but it can be solved. In short you have to:

• grab the iterator that is returned from the erase operation
• set your loop iterator to that returned iterator
• change from a for-loop to a while-loop (to ensure that your loop iterator is not incremented when a task is removed)

Here is the modified code:

And finally, some flamebait questions:

• Why in God’s name are there duplicate enter and Apple keys?!?
• Does anyone REALLY think the MacBook right-click equivalent is simpler than putting two #@!$ buttons on the pad?!? That button is huge-ass!

On the other hand, is there any way to add a System Environment Variable to Windows from the command prompt?

First, to clarify – what I wanted to do was take a snapshot of all files in my working directories (even the non-versioned ones). In some cases, the SVN server was no longer around (for one reason or another) so this was really about taking the files on my hard drive and archiving them somewhere (but removing the .svn hidden files and directories).

I use cygwin on my Windows box because I love the power that Unix command line gives me. Unfortunately, I hadn’t installed the man package in cygwin, so I used Google to find a tar man page. It told me there is an exclude-file option (-X) so I did the following:

This creates a text file, called exclude.txt that has one line for every hidden .svn directory. The reason I cut the first two characters out of the grep is because tar (for whatever reason) wouldn’t exclude a directory named “./blah/.svn” but it would exclude a directory named “blah/.svn”.

Once I had the exclude file, then I ran the tar command:

Hope it helps someone else…

Content Type

Here’s a list of how to determine the content type (text/html, text/plain, application/xhtml+xml) that the browser is interpreting:

• Firefox: Go to Tools > Page Info. This tells you the type (text/html) and the rendering mode (Quirks or Standard)
• Opera: Go to View > Panels, then click on the Info button in this panel. You can also click the left edge of the Opera window to get the Panels sidebar open.
• Konqueror: Go to View > Document Information. This tells you the document type (text/html).

If someone has a clue how to determine the content-type in IE (the developer toolbar didn’t help), Safari, Camino, please drop me a line below…

Rendering Mode

Firefox’s Tools > Page Info dialog box also tells you the rendering mode.

For other browsers, according to this page, you can figure out the rendering mode of your own pages by looking at the DOM document.compatMode value using some JavaScript.

Again, drop me a line below if you know of a way to do this in a specific browser.

If you are a web developer, I am sure you are very familiar with how difficult it can be to get the Internet Explorer browser to display your web pages correctly and still use web standards that are implemented more properly by other browsers. Many hundreds of people wish that this were not so, but it’s an ugly fact in web development today. IE includes a clever little feature called “Conditional Comments” that can allow you to select what elements on your page are displayed for certain versions of IE. I wish that Conditional Comments were not necessary (because they muckify my markup), but that is the state things are in right now.

The traditional way of explaining this is by some examples:

<!--[if IE]>
  <p>Only IE will display this paragraph</p>
<![endif]-->

Figure 1 – Conditional Comments for IE

If you know your HTML (especially how HTML comments work), then it should be pretty obvious that the whole code above looks like one big comment, meaning that it will not be displayed. However, IE treats the square brackets differently by displaying the code between [if IE] and [endif] as code that it should display.

So that’s how to include code only for IE and exclude code from other browsers. Now how to do the reverse:

<![if !IE]>
  <p>All browsers except IE will display this paragraph</p>
<![endif]-->

Figure 2 – Conditional Comments for Other Browsers (The Wrong Way)

In HTML browsers, the above code displays in every browser except IE (which will ignore everything between [if !IE] and [endif]). It seems to rely on some de-facto implementations where anything between <! and > is ignored by browsers as if it was a comment. The problem is that the above is not valid XHTML (comments in XHTML are anything between <!– and –>).

This is how I was feeding SVG to IE (in an <embed> element) and other browsers (in an <object> element). However, it always rankled me that my pages wouldn’t validate as XHTML as a result of the conditional comments.

Then, I was reading this aging article by Mark Pilgrim and found an example of valid “downlevel-revealed” comments (as Microsoft calls them):

<!--[if !IE]>-->
  <p>All browsers except IE will display this paragraph</p>
<!--<![endif]-->

Figure 3 – Conditional Comments for Other Browsers (The Right Way)

NOTE: It took me some time to figure this out because I was putting spaces between [if !IE]> and –> and between [endif] and –>. Make sure there are no spaces and things should work. Here’s a test page so you can see how things work. There should be 4 paragraphs displayed in every browser.

In fairness, after I started writing up this entry, I found that several other people had already discovered this.

Anyway, I know the other debate out there. The one about how XHTML is not worth the trouble and can be harmful if served as text/html, but I’ve already written too much today to get into that