Installing 2 versions of Firefox on OS X

DISCLAIMER:  This approach is only tested on OS X 10.7.5 (Lion)

As a web developer you test your development in various browsers to mitigate any issues before handing over the site to your client. But what if the new site that you put sweat and tears into developing, misbehave in the next release of a given browser? Or if the next release fixes a small annoyance that you otherwise would have to work hard to solve? Developing with cutting edge technologies make this scenario very plausible. This recipe will show you how to install the beta version of Firefox, while still maintaining the current stable version.

Installing a local copy of Firefox

I’m going to explain this step by step. You should be able to follow the recipe even if you have never used Mac before. I am, however, going to assume that you already have the current version of Firefox installed.

First, you need to download the beta version of Firefox. Go to http://www.mozilla.org/firefox/beta/and download Firefox Beta. If you are asked to open the file with DiskImageMounter then choose that, if not, then you need to open the downloaded file (should be an .dmg file) with DiskImageMounter after your download is finish. As DiskImageMounter is the default for .dmg files you should be able to just double click the file. Don’t install Firefox Beta just yet!

Now, we need to open your local Applications folder. On Mac, the Applications folder is where your programs normally reside. A program is installed just by copying it to your hard drive and you can in practice put it anywhere, while this would pretty quickly lead to a mess. Apple has therefore made a “ready to use” Applications folder for you and in OS X Lion you have several.  If you open Finder (the program with the blue square face) you will find an Applications folder in the left pane, either under Favorites or Places depending on your OS X version.  This is the global Applications folder where all your programs are.

If you can’t find Applications in the left pane then look in your Dock (usually in the bottom of the screen), right-click the Applications icon and choose Open Applications from the context menu. If you don’t find it in the Dock then try opening Spotlight (the magnifying glass in the upper right corner) and write “applications”.

Well, this is all good and dandy but we need to make a local installation of Firefox Beta so we need to find our local Applications folder. The folder resides in a folder with your username. On my Mac it’s under dotnetCarpenter.

If your download is completed then you can drag the Firefox icon to your local Applications folder. Do not drag it to the Applications folder to the right of the Firefox icon, as this will overwrite you current version of Firefox!

Distinguish between Firefox stable and Firefox beta

Now that we have a local installation of Firefox Beta we need to distinguish between the current stable- and beta-version. Firefox has a built-in Profile Manager that basically creates a folder with all your add-ons and settings data.  The main reason for creating a new profile is that we don’t want to spend time managing add-ons that might not be compatible with the beta version of Firefox, while switching between versions when we are testing a site. To open Profile Manager we need to provide a -ProfileManager argument to Firefox. We do this via the Terminal program that comes with OS X.  Open the global Applications folder and open Utilities, then double click on Terminal.  Then copy the following line into the Terminal and press enter:

~/Applications/Firefox.app/Contents/MacOS/firefox-bin –ProfileManager

This should open the Profile Manager.

If the Profile Manager doesn’t open then make sure Firefox is not running. You can easily close all instances of Firefox by selecting a Firefox window and press command (⌘) + q.

Click on the Create Profile… button and click on Continue. Now enter a profile name of your choice. I recommend Beta as Firefox Beta will stay on the beta channel for updates and hence, always stay in beta. I have to warn you not to store your new profile in a folder that contains anything else than profile data. If you delete the profile using the Profile Manager, then Firefox will delete the folder including all files. Now that you’re warned, click on the Done button and you are… done! Well, not just yet. You noticed that the icon for Firefox Beta is exactly the same as the stable version? What a mess! Now I have to see the about page just to check what version I’m viewing a site in? I hear you. Let’s change the icon.

Changing the Firefox Beta icon

Unfortunately, Firefox Beta doesn’t come with its own icon so we need to create one. I found a nice one on Mozilla’s site: http://www.mozilla.org/en-US/firefox/channel/

In chance that Mozilla changed the web page as you read this, you can download it directly from this page.

Now we just have to convert the .png file. As a front-end developer I always try to use online services and this is no exception. Head over to http://iconverticons.com (you might have to click on the Use Online button) and upload the image. iConvert will generate several icon files for us. I have only tried the .hqx file and it worked like a charm on OS X 10.7.5. Download the .hqx file via the Download button and unpack it by double clicking the file. If you choose the file in Finder, you’ll notice it’s handled like an ordinary text file. The text is a handy guide for changing the icon of a program. Here I have changed the text to reflect our use-case but it’s pretty much just what is says in the original.

How to use this icon:

Step 1: Copy the icon to the clipboard

a) Click on this file from Finder.

b) Choose 'Get Info' from the 'File' menu.

c) In the info window that pops up, click on the icon in the upper left corner.

d) Choose 'Copy' from the 'Edit' menu.

e) Close the info window

Step 2: Paste the icon to the desired item.

a) Go to Firefox in your local Applications folder in Finder.

b) Click on Firefox (program).

b) Choose 'Get Info' from the 'File' menu.

c) In the info window that pops up, click on the icon in the upper left corner.

d) Choose 'Paste' from the 'Edit' menu.

e) Close the info window.

Now you can drag Firefox Beta to your Dock from your local Applications folder. Firefox only allow one instance of Firefox running at a time. So you will need to close Firefox completely before you can switch between versions. The Profile Manager will automatically add -no-remote argument for you, if you have another instance of Firefox running. So as long you don't tick "Don't ask at startup" in the Profile Manager, you'll be able to run both versions of Firefox simultaneously.

MSPointers and multi-touch implementation

I've recently talked with Jeff Burtoft from Microsoft about the new Pointer proposal. In short, you needn't concern yourself with input type, e.i. mouse, touch ect. Just use addEventListener("MSPointerMove",... and you'll get all events.

My concern was that in multi touch scenarios, whatever function you register, will be fired thousands of times multiplied with number of fingers touching the screen. In a single threaded environment like JavaScript, this spells disaster.

But then he came up with this excellent explanation to how you would implement this and an example.

As for the methods that are attached to those events, just as you do when you are using touchmove on iOS, you need to be cautions as to the actions you are trying to perform, since the do fire thousands of time a second.  When I build an app that is tracking touches on a screen, instead of having the pointermove event fire a series of methods, I simply have it update an array of finger positions.   I then go to my draw method (usually with requestanimationframe) and then animate based on the array.

You can see based on the code example I used: http://touch.azurewebsites.net/water3.html

Having this mediator between the input and the behavior is a strike of genius. How many times have you been struggling with queued events? No more, just have the mediator handle the execution.

Actually this is a pattern I've implemented before but for some reason tend to forget. And I have developed code in production, that does something like:
function foo(){
  foo.isAnimating = foo.isAnimating || false;
  if(!foo.isAnimating) {
    foo.isAnimating = true;
    // do stuff..

Now, that I wrote it down, I just hope the mediator pattern will stick!

frame this!

Tell Us Your .NET Framework Story and Win
Every developer has a story. We want to know yours. How did you use the .NET Framework to create a killer app? What parts of the .NET Framework did you use to develop it? Tell us your story and be eligible to win a 12-day Galapagos Islands adventure, a new Smart Car, or US$12,000.

The mystic "d" JSON wrapper in ASP.NET 3.5

While working on my latest Ext RIA I noticed something really odd that threw the Ext deserializer to pieces. Out of no where the returned JSON was wrapped in an object named "d"! While I couldn't find anywhere I had a "d" class, it became clear that this was some odd ASP.NET behavior.

Thankfully the .NET team has released the pdb files for many of the .NET classes including System.Web.Script.Services class.

The mystery unfolds
And I quote from the source code:
// Convert the result to a JSON string
// DevDiv 88409:Change JSON wire format to prevent CSRF attack
// We wrap the returned value inside an object , and assign the returned value
// to member "d" of the object. We do so as JSOM for object will never be parsed
// as valid Javascript , unlike arrays.
=@"{""d"":" + methodData.Owner.Serializer.Serialize(retVal) + "}";

There you have it. Another security pain...

Today I've submitted a customization of the EXT box. You can see the submission on Exts forum or below. A demo can be viewed here: http://00367586.aspnethosting.dk/vista-dark-theme/

Hi all!
I've styled the box (see Ext.Element boxWrap()) to look like the Vista Dark Theme. I'm not a designer and this is the first time I've tried to do this, so the design is not flawless but I'm pretty happy with the results.
For now the design only looks good if the background is #4c535c. Use it if you like!
- Jon

vista-dark-theme-box.zip

Example.zip

Why asynchronous sounds so good

While the rain is porring down outside, I have got some time to think about, why my latest discovery of AJAX buzzwords, "Asynchronous", is important.

The first thing that springs to mind is bandwidth, and I'm not talking about connection speed (eg. whatever your ISP is providing you). No, it's the wireless world, that we live in, that makes it significant. More often than not, my laptop switches hotspot, when I'm on the move, whilst entering a page. Or the machine is running out of juice, consequently the wireless range decreases, resulting in very poor bandwidth. With a plane old HTML page (POH instead of POX?:-) this is not a problem but c'mon when is the last time you viewed that?!? Today, many sites (especially those savvy Web2.0 sites) make use of AJAX/AJAH, img statistics, XSS (Cross-site scripting - mental note*1) etc..

Slow as a it goes
While the most popular assumption about AJAX is that because it's asynchronous by nature, the server-side is also asynchronous. This is not the case. If you, as most people like me, make use of a Javascript library, you work through a proxy that is responsible for connecting to your server-side. Usually that implies that the connection will time-out within a fixed period. Users of EXT will know that its time-out period is 30 seconds (3000 milliseconds) per default.

In my raining day conundrum I thought about img statistics. If I view a page that has statistics imgs, the download starts when the browser requests the page but it doesn't stop until the server finish its process. The image is empty and no bytes are downloaded but the browser still hangs, waiting for an HTTP OK to fire. Most browsers doesn't render before they have a certain amount of data to display. While the browser is waiting for the statistic logic to finish, it just does nothing. At the same time my laptop feels it's necessary to try every hotspot it can suck up. Talk about a method to learn patients!

Setup and sit ups
My favorite setup right now is to use ASP.NET Web Services (Atlas enhanced - mental note*2U) and connect to them though the EXT adapter proxy. Basically XHRs (XMLHttpRequest). At the time of writing, there is no simple way of making an asynchronous connection all the way through. When the server receives a request, that thread is bounded to that process no matter how deep it goes. So the response is not coming until the server is 100% finished, which makes it very unscalable. Of course you can put the different web services on different servers, but if one service is heavily used, and you can't mirror it, you have little choice, but to throw more hardware at it. Which is why, one of my software philosophies is: "develop the server-side to be as thin as possible".

What about those imgs, that our mail marketing company so heavily relay on to feed our customers CRM?*3 It's possible to overcome the shortcomings of XHR but it might look a bit more grim for empty imgs. Where as in XHR situations you could push data to the client and therefore not make them depending of server speed (in XHR situations it's not that bad, you can create an empty client shell that pulls data when the document is ready eg. downloaded). There needs to be a mechanism to cut the connection from the server when the data is collected in those pesky imgs situations. One that comes to mind is the classic (in MS circles) response end. Collect the data. Issue an HTML OK, copy the thread to another and save the data in the db or do whatever process. If Firebug is correct, I've seen connections lasting up to 13 seconds! But that's when my laptop goes loco.

Will it help? I dunno but it stopped raining outside...

mental note*1 - one day I must write why XSS is not a security vulnerability. Key word: server-farms
mental note*2U - the official name is ASP.NET AJAX but Atlas sounds much more grunge - like MochiKit (Y)
*3 - mental slap. Desktop email clients already have everything downloaded