My First Firefox OS App

I just wrote my first Firefox OS App, and it was actually a lot easier than I expected it to be. That's partially the beauty of the web, where every app is just a container around a website. And partially a nice part about Mozilla - Everything is open source so Googling for an error usually comes up with a good answer. What I want to do over the next couple of days is walk through the deep stack that is a web browser - What happens if I request for my location? So first up, what happens at the high level? Let's build a basic Firefox OS app that gives us our geolocation.

First, we use the web geolocation API, which gives us access to our GPS coordinates. Let's start off with a simple website that asks for our location, then prints out the coordinates. Here's the source for our index.html:

<html>
  <head>
    <title>Get your Location</title>
  </head>
  <body>
    <script type="text/javascript">
    function updateGeoStatus(message) {
      var field = document.getElementById("geoStatus");
      field.innerHTML = message;
    }

    function successGeoLocation(position) {
      updateGeoStatus("Latitude: " + position.coords.latitude 
         + " Longitude: " + position.coords.longitude);
    }

    function errorLocation(error) {
      updateGeoStatus("Wrong position error. Error " + error.code + 
          " message is: " + error.message);
    }

    function geoLocation() {
      if ("geolocation" in navigator) {
        updateGeoStatus("Waiting on location\n");
        navigator.geolocation.getCurrentPosition(successGeoLocation, errorLocation); 
      } else {
        alert("No geolocation!\n");
      }
    }
    </script>
    <p><button onclick="geoLocation()">Get the location</button></p>

    <div id ="geoStatus">
      Hi World
    </div>

  </body>
</html>

If you save this on your server and just load it up in your desktop browser, it should work. Once we click the button to find our location, we get a message saying we're finding it, and once we resolve the location, we print the coordinates to the screen. Seems simple enough. Now how do we make this an app that we can actually install on a Firefox OS phone?

First, let's look up some documentation on building our application. We have to do two things: 1) Add a manifest file and 2) Add an installer. To add a manifest.webapp file, open up your favorite editor and create a manifest.webapp. The manifest file describes a few things about your app such as the name and where in the web your app exists. The best part is that Mozilla has a Firefox OS Manifest Validator to make sure you're doing everything right. Let's break down what's going on in the manifest:

{
  "name"            : "The Awesome App",
  "description"     : "Awesome League",
  "launch_path"     : "/~mchang/",
  "default_locale"  : "en",
  "developer"       : {
    "name"          : "Mason",
    "url"           : "http://masonchang.com"
  },

  "icons"           : {
    "16"  : "img/logo16.png",
    "32"  : "img/logo32.png",
    "64"  : "img/logo64.png",
    "128" : "img/logo128.png"
  },

  "permissions" : {
    "geolocation" : {
      "description" : "Testing Geolocation"
     }
  }
}

A manifest file is basically a JSON file with a few descriptions. You need your URL, Name, App name, and where the app lives relative to / on the home server.  Icons are your app icons in different resolutions. One interesting thing to note though is that the icons path is actually relative to /, even though we stated the launch_path to be ~mchang. This seems to be either a bug in FF OS itself or the online validator. I still have to investigate what's going on there.

Next you'll notice that we have a permissions JSON entry as well. This is required as geolocation needs to be explicitly enabled in our app in our manifest.webapp files. Otherwise, if you run the application, you'll get a permission denied error when your app tries to read the phone's location.

Second, you'll need to create another file that tells Firefox OS to install the app. Let's load up install.html!

<html>
  <head>
    <title>Hello Shu</title>
  </head>
  <body>

    <script type ="text/javascript">
      var manifest = "http://masonchang.com/manifest.webapp";
      var request = window.navigator.mozApps.install(manifest);
      request.onsuccess = function() {
        var appRecord = this.result;
        alert("Installation Success");
      }
      request.onerror = function() {
        alert("Error: " + this.error.name);
      }

    </script>
  </body>
</html>

Our install.html just has some JavaScript that loads up on page load, points to our manifest location, and tells the navigator to install the application.

Now we have 3 files. We have is our basic index.html file that is our actual app, the install.html file that tells Firefox OS how to install the app, and our manifest.webapp file and we have our first app! You can test the app in the Firefox OS Simulator or a real device if you have one. Point the simulator or device to your install.html file and you're good to go! Woohoo! Now, if you run the app, push the button, you'll get your geolocation in text! (Actually doesn't work in the Firefox OS Simulator, but it does on the device and desktop browser). Next blog post, how does Firefox OS actually get your location from your running JavaScript?

Bose SIE2

I run and bike quite a bit and needed a good pair of headphones to rock on to while running. Most headphones outside of the standard Apple headphones really suck when running. There is cable noise, which is scratching when the cable is in motion. I had a pair of Sennheiser, that were marketed as Sport, and still had cable scratching while running, which ruins the audio. It's like static while talking on the phone. Other pairs of headphones don't fit snugly in the ear and fall out while running, which is also a no go.

I previously had the Bose IE2, which are fantastic headphones on their own right, but they are quite brittle. After two years, the headphones are fraying at the ear pieces, there are rips in the cables, and I'm sure they will die any day now. If only I could have the IE2 but with more cable reinforcement! Welcome the Bose SIE2 - essentially the "Sport" version of the IE 2.

Fraying Bose IE2 on left, Sport IE2 on Right
Fraying Bose IE2 on left, Sport IE2 on Right

The Bose SIE2 headphones are a neon green color, which I don't quite like but they will do. There is significantly more cable reinforcement in these versions than on the IE2, which makes me more confident that they will last longer than my IE2 pair did. The ear pieces fit more snuggly than the IE2 does and also feel more rugged. After a run and bike in the wind, I can say they sound just as great as the old IE2 did, and have somewhat better noise isolation. I hear the outside world less with these than the standard IE2. The Bose SIE2 has zero cable noise and are water resistant, which was helpful after using the supplied arm band. Great sound, good cable strength, and zero cable noise, what more do you want in a pair of running headphones?

The only gripe I have is that the cable is either too long or too short. The package comes with the headphones plus a cable extension. Without the extension, at 5"10, the cable tugs at my head when my iPhone is in my pocket. With the extension, tons of cable flaps in the air during a run or a bike ride. Outside of the cable and the color, the Bose SIE2 are great running headphones. Now if only Bose would make the Bose IE2, same cable length and color, with more rugged cables! That'd be perfect.

Mozilla, Here We Go!

I'm excited to say I'll be joining Mozilla as a Performance Engineer for Firefox OS. It's a fantastic opportunity in a changing time. Firefox OS is probably the only real third contender in the mobile space besides Android and iOS. Blackberry, Nokia, and Windows Phone don't seem to be gaining any traction at all. And Mozilla is an excellent organization - Everything is open, the source, plans, and bugs. Here's to new beginnings!

Taking a Chance

I remember it very clearly, the day I got into graduate school. I was taking the undergraduate advanced compiler construction course at UC Irvine with Professor Michael Franz. After a whole bunch of personal issues that quarter, I summed up the courage to ask Michael Franz, "Can I do research with you in Summer?". Michael replied, "What did you get in my beginning compiler construction course?". Me: "B". Not the best way to impress a professor you want to do research with. Luckily, Michael Franz took a chance on me, said sure, and after five years, I successfully received a PhD under his mentorship.

At the moment, I'm helping my girlfriend jump start her career, and it's so painfully difficult to watch her struggle. She wasn't lucky enough to be exposed to the same opportunities I had, nor have the same nurturing environment while she grew up. Just sitting besides her, as we struggle through each interview, each rejection, every new job application, is a painful reminder of not only how lucky I am, but also the lucky break I got because someone took a chance on me. And now finally someone gave her a break.

There's not really a greater point to this blog post, other than try to remember who took a chance on you. Say thanks to them and pay it back when you can. And it keeps me honest by remembering to pay it forward and to take a chance on those who are on their way to better things

Super Commuting One Year Later

I've been super commuting from Los Angeles to Oracle HQ in Redwood City for a little over a year, and it's been a fascinating ride. I've learned so much more about flying, aviation, delays, work/life balance, my body, and remote work than I've ever imagined. I fly from LAX to the bay area every Tuesday morning and fly back down every Wednesday night and spend the other three days working from home. What have I learned?

First, I'm astonished at how flexible and adaptable the body is. The first time I flew, I was dreading the commute. I had to wake up at 5 AM to be at work by 10 AM. I drearily stood in TSA lines, unpacking my laptop, taking out my liquids, and sitting in between two also dreary travelers. It didn't quite have the sexiness people imagine with flying, nor did it invigorate me. It was a energy sucking experience.

A year later, I actually enjoy flying. There are of course a few perks with having elite status on an airline. I no longer sit in TSA lines thanks to TSA Pre, which requires a traveler to be an airline frequent flyer. But this means I can zip through TSA lines in less than a minute because you don't even have to take off your belt or laptop! You just walk through security. As an elite, you get economy plus seats, which is plenty of space for a shorter person like myself. On the actual flight, I just read my kindle as if I was sitting on the subway. My brain has post processed all the airplane engine noise that I don't even notice it anymore. Half of the time, I can actually sleep on the plane too, so it feels like a normal one hour subway ride. I'm quite surprised at how quickly my body has adjusted to flying.

There were lots of battles, mostly battling San Francisco Airport (SFO). SFO is plagued by delays and is the most delayed airport in August due to fog. Essentially the problem is that SFO has two runways for take off and landing in an X figure. On good days, two planes land in parallel followed by two planes departing in parallel. The problem is that for parallel landings, the pilots of both airplanes must be able to see each other (makes sense). However, because SFO has fog, the FAA has regulated that runways must be 2,500 feet apart to do instrument based landings. SFO's runways are only 750 feet apart, essentially closing down one runway during fog. This can lead up to 3 hours of delays by the evening due to a cascade of delays. Protip: fly through SJC. I've also learned optimal flight schedules and flight prices due to weather patterns between LAX and SJC. LAX has fog and has minor delays in late May through mid July. LAX to the bay area in winter should cost ~$140 roundtrip and in summer ~$175. Booking between 3 - 6 weeks in advance give you the best prices.

The other half of flying is that working from home, totally remote all year is really difficult. There are times when it's fantastic to be remote, such as a morning bike ride to the beach. The other half is draining and it makes it difficult to make and maintain work relationships. I think if Oracle was a fully distributed company, it'd be fine, but every week is difficult. I think most people are better off easing into remote work, or making occasional trips to the office. I'm actually quite happy that LA and SF are in the same time zone and is a short flight away. It makes it rather inexpensive to go to visit HQ and get face time. I think optimally, every other week is probably enough, but I don't mind every week.

Overall, I'm quite happy and surprised at how well super commuting is working out. I think it's been one of the best decisions I've made last year and hope to continue doing it.