The benefits of slow-motion videos of user interface features

The people working on Firefox have been spending a lot of time recently making sure that the browser is not just running with the highest performance as possible, but also running with the best perceived performance.

There are some cases where animations in the user interface may appear jerky, having large pauses or stutters while transitioning from one state to another.

One example is the transition from an open tab to a closed tab. In today’s release version of Firefox, tabs close by reducing their width to 0 pixels while also reducing their opacity to become transparent at the same time. With these two animations occurring at the same time, the tab becomes invisible much earlier than its width becomes 0 pixels. This results in a visible hole in the tab strip.

Starting in Firefox 12 (currently in the Nightly phase), the animations delay the fading of the opacity to a later time to remove this visual hole.

Finding an issue like this may be easy, but seeing at a slow speed what is happening and if a fix works better is hard. Since these animations run pretty fast, developers need to slow the animations down.

Asa Dotzler used Camtasia Studio and recorded the tab closing transitions at 60 fps (Camtasia Recorder -> Tools -> Options -> Inputs -> 60 fps) and then encoded them at 15 fps (Save and Edit -> right-click on clip -> Clip Speed -> 25%). This provided us with a slow-motion reproduction of the animation (only animates in Firefox, click on the image to see the animation):

After Asa created the animation, Dao Gottwald put together a patch that tweaked the timings of the various transitions. I put together a new recording that showed the effect of this change (click on the image to see the animation):

Recording user interface features can really help get a detailed look at how the software looks and feels. Maybe there will be an opportunity for you to use software like this in the future 🙂

Performance Improvements of Screencast.com

The latest Screencast.com release included a couple speed improvements that were quietly included.

URL improvements

The first improvement was one requested by Kyle Mulka, of Twilk, during a visit to TechSmith. Kyle mentioned that he wished the Screencast.com short URLs would stay short after the web page was accessed. He mentioned that a lot of users like to copy and paste the URL from the address bar and use it in tweets.

I spent a bit of time researching what we would have to change to fix this issue, and in a couple of days we had the changes implemented.

This change also brings about a nice speed improvement to the loading of pages on Screencast.com. Previously, when a piece of content was visited, the server would reply with an HTTP Status Code 302 - Found. This causes the browser to then load the page at the redirected location. This little bit of communication takes time, and with our new change we have removed this initial hurdle.

Here is a graphic showing the change in loading times:

With this improvement, we have increased the speed of viewing your Screencast.com content by 4.1% on average. If you are viewing your content from outside of North America, you can expect an even larger speedup.

Reduced page size

The second improvement that was added to Screencast.com was a new library layout. Much care has been taken to reduce the filesize of the webpages, to the point where loading up my library using the Library (beta) only uses 1/4 of the bytes yet sends more data. The Library (beta) also makes 11 less network requests than the current library. This means that your Screencast.com library is now more accessible under tighter network conditions such as 3G.

Online video lectures of a Compiler course

As mentioned earlier, in the Spring I will be taking a course on Compilers. I like to watch lectures from other universities to broaden my views on the topics so I did a little searching through the internet and compiled this list of places to visit for video lectures of Compiler courses.

MIT’s Computer Language and Engineering course from 2005 has some lectures available online. Unfortunately they are only in RealMedia format, however I recommend RealPlayer Enterprise version which is ad-free and nag-free.

UMass has screencasts of their Compiler Techniques course from Fall 2010 online. These are available in Flash video and playable through your standard web browser as long as you have the Flash plugin installed or are running Google Chrome. This looks to be great but &hellip

Unfortunately, the lectures for that UMass course seem to be kind of messed up (many of them are missing part or all of the audio). Too bad.

spacemanaki via StackOverflow

And last but not least, I found this very topic as a question on StackOverflow asking if there were any lectures online of Compiler courses.

Simple algorithm overviews – Part 1: Vertex Cover

Inspired by sites like Eric Marcos’ Mathtrain.tv and the Simple English Wikipedia, I’ve decided to make some short screencasts of NP-Complete problems. I hope that these screencasts help to explain the problem and frame it in a way that is easy to understand.

Here is the first video that I’ve made, covering the Vertex Cover problem:

Let me know what you think and what I should add or remove from the video.