Archive for the ‘ Mozilla’ Category

Time to start building apps for FirefoxOS

WARNING: This post reflects my PERSONAL opinions and not those of Mozilla !

Doing something new requires tenacity. There can be a lot of challenges (emotional, intellectual, financial, etc.)

FirefoxOS is one of those things.

The OS itself is a real community driven, free Open Source project. This, in and of itself, is challenging. Search the web for “Is Android really Open Source” and you will read about some of the issues and challenges.

Then there is the competition. There are 6 billion mobile phone subscriptions in the world, and in the smart-phone segment, Android has 52.2% or the market and Apple has 33.4%. Even Microsoft hasn’t been successful in cracking the smart-phone market, no matter how much marketing they invest in the effort.

And what about the technology? HTML5 is not done yet, is it? It’s not hard to find an “expert” that will tell you HTML5 is not ready for prime time!

So why would you, as a developer, bother starting to build an application for a platform that hasn’t been released yet, on a technology that’s not ready yet, developed by a relatively tiny organization in the industry?

I spend a lot of time at work playing devil’s advocate and having this conversation with the engineering, marketing, and business development teams I work with at Mozilla.

But, after all, Mozilla is the poster child for success against the challenging conditions I just described. The community-driven, open source projects of Firefox and Thunderbird were launched to shake up a market that was already dominated by strong commerical competitors.

Mozilla’s mission has always resonated well with people, especially software developers who care about the free and open web.

And, in my humble opinion, the developer audience who will ultimately buy into Firefox OS is larger and somewhat differentiated from the traditional supporters of the Open Web.

While not all application developers define success in terms of monetary return, the success of all applications is defined by:

  1. The ability to REACH the largest possible percentage of intended users.
  2. The usefulness of the FUNCTION it provides to those users

The function can take many forms.

  1. Monetary gain
  2. Decreased customer service costs
  3. Increased customer satisfaction
  4. Decreased operational costs
  5. Increased or Improved Brand Identity and Affinity
  6. Public Service

There are other considerations like personal preference, choice of technology, hardware, “cool factor” etc., but it’s my contention that all other factors are not “decision pivots” like reach and function are.

So, if the question is “why would developers start building apps today for Firefox OS,” the question can’t be answered without discussing Firefox OS in the context of reach and function.

So, can you really meet your technical needs with HTML5 ?

First, I’m not even going to refer to the development technology as HTML5 because it’s much more than markup language.

Let’s instead call it the Web-Runtime!

  • HTML
  • CSS
  • JavaScript
  • JavaScript callable runtime implemented APIs
  • Related tools, libraries and frameworks

If your goal is to find some application feature that you just can’t make work using the above technology, you probably can find a corner case of some sort, though in the last year I’ve yet to have a developer describe a consumer application use case scenario to me that truly could not be done with Web-Runtime technology.

Yes, the technology is evolving so there are pieces that are not fully “here” yet – but I never suggested you wouldn’t have to get a bit creative if you are starting early in the Firefox OS / Apps ecosystem life cycle.

Apart from feature specific API concerns the other argument I hear is “the performance isn’t there!”

My teammate Rob Hawkes has been doing a lot of performance profiling of HTML5 games since games tend to really expose performances issues. He’s found a number of good games that work just fine written in HTML running on low end devices.

Like all performance considerations when you move platforms. Some optimization may be required.

Ok, so if you buy my argument that technically you could build your app for FirefoxOS, then why WOULD you?

Well, I think this is the interesting part.

First there is the expected reach opportunity .

FirefoxOS devices will start being available in 2013, initially in Brazil.

Eventually I think you’ll see lots of telcom carriers selling them in a variety of emerging and established markets. You see, carriers don’t make money on phones; they make money on services including bandwidth consumption. This means that they are happiest when everyone can afford the phones that will be used the most often and that will promote lots of interaction.

The original code name for Firefox OS was “Boot to Gecko,” referring to fact that the design imperative for the operating system was booting directly to the Gecko rendering engine without the heavily layered stack that you see in other mobile operating systems. This means that it will run well on lower end (less expensive) hardware.

It also suggests that Firefox OS devices will enjoy great success (penetration) in emerging markets. Why is THAT important to developers? (See the Firefox OS Marketplace HERE)

Nearly every mobile industry analyst will tell you that the biggest opportunities in the software industry are in emerging markets. Many (perhaps most) emerging markets have better cellular infrastructure than conventional Internet infrastructure, and many have better cell service (with data) then we have in the U.S.A.or Europe.

There is an entire generation of users who skipped the traditional connected personal computer and went straight to mobile.

On top of that, the apps that you write for Firefox OS phones will also install as native apps on Android phones and tablets with the Mozilla Web-Runtime installed. That’s an additional 300 million devices with hundreds of thousands of new users every day.

And like they say in the ShamWow infomercials, “But wait, there’s more!…..”

Because the entire stack is open, in the near future you’ll be able to run your well designed app on Windows, Mac and Linux Computers. And if Microsoft and Apple permit it, probably iPhone/iPad and Windows Phone / Surface devices too.

That’s one app – everywhere.

Then we will have achieved the idea that “The Web IS the Platform”—t he idea that the whole can be greater than the sum of the parts.

As I side note, I think people continue to be confused about what is an app versus what is a web page. Maybe there is no real answer but if you think outside the box a little, the fact that you can write apps (or web pages) that work even when no or limited connectivity is available create the opportunity to build some really interesting experiences for end users.

Yes, there are some “ifs” in all that logic, but you don’t get to AMAZING by waiting to see what everyone else does.

Before I wrap up, I wanted to hightlight one additional inducement for app development, and that’s the last item on my app functions list above. Enhancing Public Service.

Every day I Mozilla I participate in conversation where people are asking about and talking about “how can we make things better for people?”

For example, at my last organizational team off site, a representative from Medic Mobile came to speak to us about the amazing things they are doing in developing regions of the world to help get desperately needed health care to patients in remote areas.. It was one of the most inspirational talks on the use of technology I’ve heard and it made me think about what could be done with rich Firefox OS smart phones to make people’s lives better around the world.

As an advisor, consultant, industry analyst, throughout my career, I’ve always looked at new and interesting technology and markets and continued to ask the question, “when is the right time to “get in?”

After a year of being involved with HTML5 and mobile technology, I think the time for starting to build apps for Firefox OS is now! At least for many, many kinds of apps and targets.

So…….

  1. If you have an HTML5 app or page that you’re considering bringing to FirefoxOS and the Firefox Marketplace, or
  2. You have an Android of iOS app that you’re considering bringing to FirefoxOS and the Firefox Marketplace, or
  3. You have an idea for an app in Brazil, or
  4. You have a Firefox Add-in that you could bring to FirefoxOS and the Firefox Marketplace, or
  5. You just have some other cool idea for an HTML5 app

Then I want to hear from you!!!!

Tell me about your app!

J Stagner AT Mozilla DOT com


User Initiated Resizing

The Firefox Marketplace Aurora Android was released last week so developers can start submitting their HTML5 based apps.

I’ve been working on the interval timer app on and off for some time now and have been using it for experimentation and proof points around HTML5.

In playing with user interface options I wanted a mechanism that would let athletes set the size of the main display element to whatever they wanted. The trick for my app is that they need to be able to do it with little dexterity (like with gloves or hand wraps on) and I wanted it to work on a PC with, or without a mouse, and on an Android Tablet.

So my idea was to allow each important element of the app to be re-sized in one of three ways.

  1. The app is running on a PC with a mouse wheel and when the user places the mouse inside the element and scrolls the wheel, the element will grow or shrink depending on the direction of the scroll action (larger for Up-Scroll and smaller for Down-Scroll).
  2. The app is running on a PC whose mouse does not have a scroll wheel, in which case the user can click and drag to change the element size.
  3. The app is running on a tablet of phone and they should be able to swipe an element to re-size it. (Note: I don’t want to use pinch in this case because my users may be wearing gloves.)

So, I put together a demo.

The demo starts with this……

And after using any of the three methods above the element is re-sized as ….

Note that the resizing actions only work when the mouse or touch events are on the specific element that is to be re-sized.

As is so often the case, there are jQuery plugins handle all of these UI desires.

The code is below. Simple stuff, but another example of a feature that I started out with saying “you can’t do that in HTML.

You can run the dmo HERE


<!doctype html>
<html>
   <head>
      <title>Mousewheel font resizer</title>
      <link rel="stylesheet" type="text/css" href="css/style.css" />
      <script src="js/jquery.js"></script>
      <script src="js/jquery.mousewheel.js"></script>
      <script src="js/jquery.event.move.js"></script>
      <script src="js/jquery.event.swipe.js"></script>
      
      <script type="text/javascript">

         var TextSize = 1;

         $(function() {
			 
             var currentTime = new Date()
             var month = currentTime.getMonth() + 1;
             var day = currentTime.getDate();
             var year = currentTime.getFullYear();
             $('#TimeDisplay').html(day + "/" + month + "/" + year);


             $('#TimeDisplay')
               .mousewheel(function(event, delta, deltaX, deltaY) {
                  var o = '';
                  if (delta > 0) {               
                     o = delta;
				 }
                 else if (delta < 0)
                     o = delta;
                  
                  if( o != '' )
                     size( o );
                  return false; // prevent default
               });
               
               
               $('#TimeDisplay').on('swipeleft', function(e) {
					size(-1);
				});
               
               $('#TimeDisplay').on('swiperight', function(e) {
					size(1);
				});
				
               $('#TimeDisplay').on('swipeup', function(e) {
					size(1);
				});
      
               $('#TimeDisplay').on('swipedown', function(e) {
					size(-1);
				});
            
            function size(msg) {
               TextSize += msg;
               if (TextSize < 1) {
                   TextSize = 1;
               }
            $('#TimeDisplay').css('font-size', TextSize + 'em');
            };
         });
      </script>
   </head>
   <body>
      <br /><br />
      <div id="TimeDisplay">s</div>
      <br />
   </body>
</html>


It’s REAL. Firefox OS, B2G, Boot-to-Gecko

Check out this photo.

The Firefox OS (an HTML based Mobile Operating System) installed and running on my phone !

I just wanted to sow it’s REAL and development continues.

More info HERE http://www.mozilla.org/en-US/b2g/

A First In – First Out JavaScript Queue

I recently started building a demo to highlight application design practices that leverage HTML5 features to deliver an “app” experience. The model for this particular demo was that of a video portal and the first step was to to make independent XmlHttpRequest calls to fetch the videos on demand.

Here is where we want to ed up with this app.

  1. The content gets updated with LINKS to new videos.
  2. The user selects videos to be downloaded.
  3. The videos are downloaded in the background without effecting the user interface performance.
  4. The user can select as many videos as they want for download and they will be queued up.
  5. The videos will be stored locally for use later.
  6. The user will be warned if they try to close the app when files are still downloading.

I posted a simple demo of using Web Workers here.

In this post we’ll look at how to stack all of the user’s video download requests in a JavaScript queue object. This is necessary because the user can click on links to videos faster than they can be downloaded. In our previous example if the user clicks on a video to download and then clicks on a different video before the first one has finished downloading – that first video download is simply abandoned and the second video download begins. We need to queue them so that all the videos selected will be asynchronously downloaded in the background.

Lets first look at a simple JavaScript Queue – then we will look at the better way to do solve the problem.

In JavaScript the array is a pretty flexible construct.

To create an instance of an array :


var queue = new Array();

An array in JavaScript can contain any type of data (more on this in a minute) and each item in an array does not have to be of the same type as the others.

There are two sets of ways to add and remove items from an array.

One set works against the beginning of an array and the other works against the bottom.


shift() – Removes the first element of an array, and returns that element
unshift() – Adds new elements to the beginning of an array, and returns the new length


pop() – Removes the last element of an array, and returns that element
push() – Adds new elements to the end of an array, and returns the new length


In order to process a FiFo (First In – First Out) queue, we’ll need to use one of each.

We’ll use push() to add an additional item to the top of the queue and we’ll use shift() to retrieve (and remove)  an item from the bottom of the queue and move all the remaining items down to fill in for the removed item.

Given the following HTML :



<!doctype html>  
<html>  
  <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
    <script src="js/code.js"></script>
    <script type="text/javascript">

      function doStackAdd() {
        var inputValue = document.getElementById('txtInput').value;
        if(inputValue) {
          stackAdd(inputValue);
          document.getElementById('txtInput').value = "";
        }
      }
		
      function doStackGet() {
        var returnValue = stackGet();
        document.getElementById('stackResult').innerHTML = returnValue;
      }
    </script>   
    <title>JavaScript FIFO - Worker</title>  
  </head>  
  <body>
    <center>
      <h3>JavaScript Simple FiFo Queue</h3>
      <div id="mainDiv" style="background-color: silver; 
                        width:410px; padding: 20px; text-align: left;">
        Input : <input type="text" id="txtInput" value="">
        <button onclick="doStackAdd()">Add to Stack</button> 
        <br /><br />
        <button onclick="doStackGet()">Get from Stack</button> >>>
        &nbsp;&nbsp;
        <span id="stackResult"></span>
      </div>	           
     </center>
   </body>  
</html>

Which renders the following page…


Note that the button click() event handlers call JavaScript functions defined in the code.js file.


//---------------------------------------------------------------------+
// Code for SIMPLE FiFo Queue (Stack)
//---------------------------------------------------------------------+
var queue = new Array();

function stackAdd(valueToAdd) {

	queue.push(valueToAdd);
}

function stackGet() {
	var retrievedQueueValue = queue.shift();
	if(retrievedQueueValue) {
	   return retrievedQueueValue;
    }
    else {
	   return "Queue is empty.";
	}
}

So, when we add a few items to the queue by entering text and clicking the “add” button…….





We then have a few (three) items on the stack.

Now if we start clicking on he “Get from Stack” button we can see that the items we entered come off the stack in the order we put them on.





When the queue is empty, we report that the queue is empty.



This works, but only allows us to push “single” values onto the stack.

Remember that our use-case for this is to put videos that we want to download into a queue.

Practically speaking, we will want to attach some information to the video to be downloaded. AT a minimum a name for the video, maybe a description.

At first you may consider a JavaScript Hash, also known as an associative array.

But this data structure is not very well suited for this type of usage.

With an Associative Array you store Key / Value Pairs. The key is not really part of the data, it’s the index into that element of an array. As such you use the value of the key to retrieve the item you want.

It makes more sense for us to define a custom type ( a video for download type) and then work with an array of object of that type.

So for the given markup….



<!doctype html>  
<html>  
  <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
    <script src="js/code.js"></script>
    <script type="text/javascript">
      
      function doObjArrayAdd() {
        var inputName = document.getElementById('txtInputName').value;
        var inputURL = document.getElementById('txtInputURL').value;
        var inputDesc = document.getElementById('txtInputDesc').value;	
 
        if(inputName && inputURL && inputDesc) {
          objArrayAdd(inputName, inputURL, inputDesc);
          document.getElementById('txtInputName').value = "";
          document.getElementById('txtInputURL').value = "";
          document.getElementById('txtInputDesc').value = "";
         }
       }

      function doObjArrayGet() {
        var returnValue = objArrayGet();
        document.getElementById('vidoObjectResult').innerHTML = returnValue;
      }
    </script>   
    <title>JavaScript FIFO - Worker</title>  
  </head>  
  <body>
    <center>
      <h3>JavaScript FiFo Queue - Object Array</h3>
      <div id="mainDiv" style="background-color: silver; 
                        width:500px; padding: 20px; text-align: left;">
        Name : 
        <input type="text" id="txtInputName" value=""  style="width:300px;">
        <br />
        &nbsp;&nbsp;&nbsp;URL : 
        <input type="text" id="txtInputURL" value="" style="width:300px;">
        <br /><br />
        Desctiption :  
        <textarea id="txtInputDesc" rows="8" cols="68"></textarea> 
        <button onclick="doObjArrayAdd()">Add to Collection</button> 
        <br /><br />
        <button onclick="doObjArrayGet()">Get from Collection</button>
        <br /><br />
        <span id="vidoObjectResult">&nbsp;</span>
      </div>		           
     </center>
   </body>  
</html>

Then in our button click() event handler we will define our custom type and create an array of object instances from our user defined type.


//---------------------------------------------------------------------+
// Code for Object  FiFo Queue 
//---------------------------------------------------------------------+
function VideoObject(name, url, desc)
{
this.name = name;
this.url = url;
this.desc = desc;
} 

var VideoObjectArray = new Array();

function objArrayAdd(nameToAdd, urlToAdd, descToAdd) {
	
   newVideo = new VideoObject(nameToAdd, urlToAdd, descToAdd);  
   VideoObjectArray.push(newVideo);
}

function objArrayGet() {
   var retrievedVideoObject = new VideoObject();
   retrievedVideoObject = VideoObjectArray.shift(); 
	
   if(retrievedVideoObject) {
      return retrievedVideoObject.name + ":" + 
             retrievedVideoObject.url + ":" + retrievedVideoObject.desc;
   }
   else {
      return "VideoObjectArray is empty.";
   }
}

Note that when we use shift() to retrieve an item from our array we can’t don’t pass that object instance to the calling method. It would work here in this example, but when we move this code to a Web Worker, this code will be called via a Web Worker message and the calling code will not have access to the type defined in the referenced .js file.

Now when we run the page and add an item to the queue…..



And then click on the button to retrieve the object….



So there we have an implemented FiFo Object Queue in JavaScript.

What’s next ?

  • Store the videos locally.
  • Implement AppCache to work off line
  • Move the downloading into a web worker
  • Update the UI to destinguish between, available, downloading, and downloaded videos
  • Prevent the user from closing the app while files are still downloading.


** You can download the source code for the above example HERE.


Shifting HTML code design to App Architectures – a demo.

For the last nine months I’ve been focused on the potential of HTML5 as an application development platform. When I first started talking about HTML5 for building apps, it seemed like very few people really “got” what it meant. Rather that HTML simply being something that gets spewed out by your server. HTML5 and it’s companion technologies, themselves became a platform.

In fairness, there were lots of developers that were starting to add “richness” to their HTML / client side work, predicated in no small part on the change in web development perspective that was catalyzed by the whole “Ajax” phenomenon.

More and more people seem to be embracing what the HTML5 wave of technologies could mean to development of all sorts. I say “could” mean because I believe HTML5 is in its “usable” infancy.

I recently asked my readers how important they think “off-line” support for HTML5 apps is.

The answers were great and showed how far developers as a group have advanced their perspective on where HTML development is going.

During my years at Microsoft I spent much time helping developers change the way that they looked at ASP.NET based web development by authoring patterns and practices that were focused on developing web applications that used real client / server interactions. With the advances Mozilla is making with it’s HTML5 Apps platform and the Firefox OS, it seems like a good time to apply that same kind of guidance to apps focused patterns and architectures.

So here is the beginning of a demo project for apps.

Understand that this app is a learning project and it’s focused on MozApps and Firefox OS apps. That means I’m writing the sample specificity for Gecko based run-times. If you were writing a cross browser app supporting Gecko, Webkit and Microsoft browsers you would have to do some feature detection and code against the features that are available in your browser. Perhaps I’ll write some samples to demonstrate that in the near future but for now I’ll focus on apps for one of the Gecko run-times.

Here is what the user interface of the demo looks like. I’ve only implemented the first feature for demonstrating “sometimes connected” architecture, but we’ll build on this app over the coming weeks.

Dynamic Media Demo

You can run the page here http://www.misfitgeek.com/demo/mediaget/ – just remember that this demo targets the Gecko run-time so if you’re not using a current version of Firefox you’re sort of on your own.

This page will play video files but what is a bit different about this page than you would have found in “old school” HTML page design is that the page contains a single media element and that HTML video tag has no video source specified.

This might be a common scenario in an HTML5 app (Think YouTube or Netflix). One would not, really could not, embed all the videos that the end user “might” want to watch.

In this case, we will not download any videos by default when the page is loaded, we’ll wait until the user selects a video to watch and then DYNAMICALLY fetch that video. When it was been retrieved we’ll play it. In our sample the user can choose from three videos but that number could be 100s of videos since none of the choices are actually downloaded until the user selects a video to watch.

At the top of the UI the user has three videos that they can choose from to watch.


</pre>
<h3>Videos Available For Viewing</h3>
<div class="gallery">
<div class="photo"><a href="javascript:loadMedia('demo-vid.webm');">
 <img src="img/foto.jpg" alt="" width="155" height="110" />
 </a>

 <a href="javascript:loadMedia('demo-vid.webm');">Fetch Video 1</a></div>
<div class="photo"><a href="javascript:loadMedia('demo-vid-2.webm');">
 <img src="img/foto.jpg" alt="" width="155" height="110" />
 </a>

 <a href="javascript:loadMedia('demo-vid-2.webm');">Fetch Video 2</a></div>
<div class="photo"><a href="javascript:loadMedia('demo-vid.webm');">
 <img src="img/foto.jpg" alt="" width="155" height="110" />
 </a>

 <a href="javascript:loadMedia('demo-vid.webm');">Fetch Video 3</a></div>
<div class="cleaner"></div>
</div>
<pre>

Notice that clicking on each image causes a bit of JavaScript to execute. (Yes I know there are other, and perhaps better ways to do this, especially if you are a jQuery aficionado but this is a straight forward method for learning simplicity.)

Here is what the loadMedia() method looks like.


function loadMedia(mediaFile) {
   document.getElementById("dlstatus-container").style.display="block";
   var xhr = new XMLHttpRequest();
   var mediaFileLocation = "media/" + mediaFile;
   xhr.open("GET", mediaFileLocation, true);
   xhr.responseType = "blob";      // Set the responseType to blob
   xhr.addEventListener("load", function () {
      if (xhr.status === 200) {
		 document.getElementById("dlstatus-container").style.display="none";
		 document.getElementById("player-container").style.display="block";
         blob = xhr.response;         
         var mediaFile = blob;
         var URL = window.URL || window.webkitURL;
         var mediaURL = URL.createObjectURL(mediaFile);
         var mediaElement = document.getElementById("media-element");
         mediaElement.setAttribute("src", mediaURL);
      }
      else {
		  // Download failed. Stop Download Status.
		  // ToDo: Add Error Handeling.
		  document.getElementById("dlstatus-container").style.display="none";
      }
   }, false);
   
   xhr.send();
}


The function catches a file name to be retrieved and then does an XmlHttpRequest call to fetch the file from the media directory on the server. Not that this method runs on the same thread as the user interface. In a later version we will use “HTML5 Web Workers” to cue the video downloads without blocking the user interface.

The first thing that loadMedia() does is show a hidden div named dlstatus-container. This div contains an animated gif file that indicates the file is being downloaded.


   <div id="dlstatus-container" style="display:none">
      <h2>Downloading Video .......</h2>
      <img src="img/dl-status.gif" alt=""  />
       </br /><br /><hr /><br />
   </div>

I use a free on line tool at AjaxLoad.info to generate the “working” image.

Line 7 in the listing above defines an event listener and line 8 tests to make sure the download was a success.

After that we turn off the status indicator div and the display the div that contains the HTML5 video element.


   <div id="player-container" style="display:none">
      <h2>Media Fetch</h2>
      <video id="media-element" controls="controls" 
             width="520" height="340" autoplay="autoplay">
      </video>
      </br /><br /><br /><hr /><br />
    </div>

Note that autoplay on the video element is on, so that when the video element’s source attribute is populated with the downloaded video on line 16 of the loadMedia() method, the video begins to play.

You can test the feature here – http://www.misfitgeek.com/demo/mediaget/

Note the behaviors.

  • If you start playing one video and then select another video, the first video will continue to play until your second choice is ready.
  • If you play one video, then play a second video, then go back to the fist video you watched – it will begin playing immediately when you select it, since it has been automatically cached by the run-time when it was downloaded.

A simple but meaningful feature.

Stay tuned. We’ll start adding features in the next post in this series.


Support Firefox Mobile – add this code to your site or blog !

Mozilla is the only browser vendor who’s mission is to promote open innovation on the world wide web.

This year we’ve been diving into Mobile web technology in big ways.

Please consider including the code below on your web site or your blog. (WordPress users you can simply include the code as a text widget, just remember to point the image links at images on your site.)

The script is simple.

1.) If the visitor is using Firefox (any version) – SayTHANKS !
2.) If the visitor is not using Firefox – check to see if they are using an Android device.
3.) If not, suggest they use Firefox.
4.) If they are using Android, suggest Firefox Mobile.

You can get much more fancy, but you get the idea.

THANKS ! If you add the code to your site – tweet the url to @MisfitGeek and I’ll re-tweet !


<script type="text/javascript">
if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)) { 
   document.write("<h2>THANKS  for  Using  Firefox !!!</h2>") 
   document.write("<img src='http://misfitgeek.com/images/firefox3.jpeg' />");
} 
else {
   if (/Android[\/\s](\d+\.\d+)/.test(navigator.userAgent)) { 
      document.write("<h2>Get Firefox MOBILE !</h2>");
      document.write("<a title='Get FireFox MOBILE!' 
	                  href='http://www.mozilla.org/en-US/mobile/'>
                      <img src='fennec-icon.jpeg' /></a><br />");
      document.write("<b>
                      Click the Tail & Get Firefox Mobile for Android!
                      </b>"); 
 }
   else {
      document.write("<h2>Please Consider  Using  Firefox !!!</h2>");
      document.write("<a title='Get FireFox !' href='http://getfirefox.org/'>
	              <img src='http://misfitgeek.com/static/getfirefox.png' />
                      </a>");
   }
}
</script>

A Usage Saver pattern for HTML Apps

Mozilla is building a HTML5 “Operating System” for devices named Boot-to-Gecko or B2G for short.

Due to the lightweight nature of B2G it will work on a wide variety of devices from high end to, shall we say modestly priced.

Gary Kovacs, Mozilla’s CEO, recently announced that the first Boot to Gecko  devices will be introduced in Brazil.

Most mobile service plans limit the amount of bandwidth a user is allocated each month. In many cell service customers in South America purchase cell service using “pay as you go” plans. Either way, apps that over consume band with will not be very well received so developers need to design their app interactions to minimize the amount of bandwidth they consume.

Applications on B2G will be built with HTML5 / CSS3 / JavaScript.

Frequently HTML5 apps use various service mechanisms to update their content. We can optimize the actual number of bytes required by those communications.

Another method that we can implement is to determine when the running application is not being used by the user.

One way to do this is to hook the DOM’s window.onblur and window.onfocus events implement a state manger with which we can track “Active” and “Suspended” state.

When the state is “suspended” the application would bypass any network activities.

Here is a quick sample of hooking the onblur and onfocus events.

HTML File


<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/IsActive.js"></script>
</head>
<body class="active">
   <center>
      <br /><br />
      <h1>
         <p>
	      Processing is .... <br /><br />
	      <span id="active">ACTIVE</span>
	      <span id="suspended">SUSPENDED</span>.
	   </p>
      </h1>
   </center>
</body>
</html>


Note that we include a .css and a .js file and wecreate two divs – one to show when the window is active and the other to show when it is not active or “blurred”.


CSS File


.active #active, .suspended #suspended { 
   display: inline 
}

.active #suspended, .suspended #active { 
   display: none 
}

.active {
   background: white;
   color: black;
}

.suspended {
   background: black;
   color: white;
}


Some simple styles to change the background to reflect changes in state.


JavaScript File



function onBlur() {
	document.body.className = 'suspended';
};

function onFocus() {
	document.body.className = 'active';
};

if (/*@cc_on!@*/false)  // check for Internet Explorer
   {
	document.onfocusin = onFocus;
	document.onfocusout = onBlur;
   }
else
   {
	window.onfocus = onFocus;
	window.onblur = onBlur;
   }


The code to implement the state event handlers. Note the required hack for Internet Explorer.


To throttle our bandwidth consumption when the user has another application in the forground we would simpley add logic to the onBlur() & onFocus() functions to set and unset a state variable and then we would test the value of that variable before we make any network calls.


Mozilla Apps on Linux from the Community !

I’ve spent a great deal of time over the last six months focusing on HTML5 “apps”. There continues to be profound confusion about defining what exactly an HTML5 “app” is and that’s OK. One of the great things about HTML5 is the wide variety of ways that you can choose to use it.

One of the prospects that I’m most excited about is the ability to create applications with HTML5/CSS3/JavaScript that provide user experiences like that of a natively built apps.

Mozilla has been working on both a “Web Run Time”  to enable this type of development and a Marketplace for really broad distribution of such apps.

As a non-profit organization, Mozilla has limited funds and resources. We don’t have thousands, or even hundreds of software developers in our engineering teams to point at any given problem at any particular point in time.

What we DO have though is a great global community.

The size of our team has required that we not build the entire Web Run Time for all devices at the same time. To start with the largest user share we have focused on Windows and Mac first.

Though I use Windows, Mac, and Linux – I prefer to do my web development on Linux and I’ve missed the apps support on Linux.

My wishes have been answered by Marco Castelluccio. If Marco’s name is familiar to you it may be because he recently won the Mozilla Dev Derby contest for his IndexedDB entry.

Marco, a student, wrote and submitted the Web Run Time support to Firefox for Linux and it’s now available in the Firefox Nightly channel.

How cool is that?! – Real production features submitted by a community member on the same time line as the company’s own code.

Here is what the apps experience looks like on Linux.

First you need to install Firefox Nightly (as of this writing) and you don’t want to do it through the package manager / Nightly PPA as it tends to lag a bit. (If what I just said doesn’t make sense to you – just ignore it. Installation  is simple.

You will net Firefox Nightly for Linux at http://nightly.mozilla.org/

Download Firefox NightlyThe size of our team has required that we not build the entire Web Run Time for all devices at the same time. As the largest user share we have focused on Windows and Mac first. Though I use Windows, Mac, and Linux – I prefer to do my web development on Linux and I’ve missed the apps support on Linux.

Download the correct version, extract the files and put them where you want them.

If you double click on the extracted “firefox” binary file it should run (make sure permissions are set to allow execution).

Of course you can create a desktop shortcut or if you are using Ubuntu Unity you can pin Firefox Nightly there as well.

AS of this moment, the Mozilla Marketplace is in a “limited” beta so if you are not a Mozillian of a developer who previously submitted an app you won’t yet be able to get access to the store, but I’ll show you the acquisition process in as seen in Linux with Marco’s code.

When I click Log In I am prompted to authenticate with BrowserID.

BrowserID Log In

Note the message that confirms the Marketplace is not yet open to the general public.

Mozilla Marketplace Opening Soon

Now I’ll use the search feature to find my Round Time app.

Search Timer Apps

Mine is the second one so I’ll click to navigate to the KO Timer page on the Mozilla Marketplace.

When I click on the Install Button I get the permissions prompt.

Marketplace Install Permissions Prompt

When installation is compete I can search for and find the “KO Round Timer” in the application launcher (I’m using Ubuntu)

When I run the app here is what I see.

KO Timer Start Screen

You can also run the same app in Firefox at http://timer.koscience.com/

Running as an app on Ubuntu I can stick the KO Timer to the Unity Launcher…

KO Timer Stuck to Unity

Progress is a great thing and THANKS to Marco for his awesome work !


Building Apps and deploying them from GitHub

Those guys at GitHub have always been forward thinking and Open friendly !

So you ave probably heard that Mozilla is getting into “Apps” in a big way (https://apps.mozillalabs.com/)

There are couple of things about HTML5 apps that are different than conventional native apps.

First, because they are web technology they want to live somewhere on the web. Second, each app has a manifest (https://developer.mozilla.org/en/Apps/Manifest) and that manifest needs to be served with a new, specific MIME type.

Now, if you self host on Linux this is trivial. You can just add an entry to the .htaccess file, but if you don’t want your app to have it’s own web presence there is another option.

This clever guy on my team, Rob Hawkes (http://rawkes.com/) is the Developer Community Gaming Lean on my team and he  worked with GitHub to add the ability to serve Mozilla Apps Manifests directly from your GitHub repository.

COOL !

Then, an independent game developer, Jerome Etienne (http://jetienne.com/) tested it by publishing a game in the Mozilla Labs Developer Preview Apps Store.

The game is called marbleSoccer and the GitHub is here - https://github.com/jeromeetienne/marbleSoccer

To install and run the game, start by installing the Mozilla Labs Apps  Runtime (we’re in preview, this step won’t always be necessary)

https://addons.mozilla.org/en-US/firefox/addon/app-runtime/

Then you need to log in to the store at :

You need a BrowserID to log in (which everyone should want to have, anyway) :)

https://browserid.org/

After logging in search the store for MarbleSoccer.

Once you have it installed you’re good to go.

There you go – game installed and running – hosted at GitHub

Great job guys !

 


A Useful Firefox Plugin for Web Developers – Firesizer

I tend to develop for a 960 grid system but have recently started working on an HTML5 application that I want the user to be able to resize to utilize whatever screen resolution that their display has.

To do this, I need to preview the application’s display at various resolutions.

The Firefox Resizer Plug-In is very helpful for this purpose.

It’s lets you choose what size to make the Firefox browser window.

To install it, select Tools -> Add-ons and search for Firesizer.

After you install it you still won’t see it by default.

You need to make the Add-on bar visible. View -> Tool Bars -> Add-On Bar

You should see it as in this image.

You can then right-click on the display size that is displayed.

And choose the one you want to view your page at.


A few Mozillians to read and follow.

I’ve had lots of requests from my readers for recommendations of folks at Mozilla to follow.  Great to see so many people interested in broadening their horizons.

I’ll be building blog roles and lists on twitter but to get you started, here is a list. If you follow them, say hi and let them know how you found them !


Stormy Peters
http://stormyscorner.com/
@storming


Christian Heilmann
http://www.wait-till-i.com/
@codepo8


Robert Nyman
http://robertnyman.com/
@robertnyman


Rob Hawkes
http://rawkes.com
@robhawkes


Jay Patel
http://blog.mozilla.com/jay
@jaybhai


Eric Shepherd
http://www.bitstampede.com/
@sheppy


Paul Rouget
http://paulrouget.com
@paulrouget


Janet Swisher
http://janetswisher.com/
@jmswisher


Havi Hoffman
@freshelectrons
@mozlabs