Chrome Extension

The recent Haiti’s 7.0 earthquake has turned my “earthquake alert mode” on. I visit this web page pretty often to check for the major ones.

And I have started to use google chrome after its linux’s release is out. I always wanted to create a “hello world” chrome extension. So tonight (Friday night), I was able to find some quiet time to create a google-chrome extension to show recent earthquakes in CA and NV.

This extension contains 3 things. (place them in a directory.)

  1. manifest.json
  2. icon.png
  3. popup.html

This is the manifest.json

{
  "name": "Recent Earthquakes in CA and NV",
  "version": "1.0",
  "description": "Recent Earthquakes (> 3.0) in California-Nevada.",
  "browser_action": {
    "default_icon": "icon.png",
     "popup": "popup.html"
  },
  "permissions": [
    "http://quake.usgs.gov/", "tabs"
  ]
}

here is my icon.png

and the popup.html

<style>
body {
    min-width:500px;
    background-color: #FFFFCC;
}
div {
    font-size: 13px;
    font-weight: bold;
}

span.mag {
    font-size: 10px;
    color: red;
}
span {
    font-size: 10px;
    color: black;
}

a {
    font-size: 10px;
}
</style>

<script>
var hostUrl = 'http://quake.usgs.gov';
var req = new XMLHttpRequest();
req.open(
    "GET",
    "http://quake.usgs.gov/recenteqs/Quakes/quakes0.htm",
    true);
req.onload = showTable;
req.send(null);

function showUrl(anchor) {
    var urlLocation = '' + anchor.href;
    chrome.tabs.create({url:urlLocation});
}

function showTable() {
    var title = document.createElement("div");
    title.innerText = 'Recent Earthquakes in CA and NV';
    document.body.appendChild(title);
    var hr = document.createElement("hr");
    document.body.appendChild(hr);

    var body = req.responseText;
    var i = body.indexOf('<A HREF="/recenteqs/Maps/');
    body = body.substring(i);
    i = body.lastIndexOf('</PRE>');
    body = body.substring(0, i);

    i = body.indexOf('<STRONG>');
    while (i != -1) {
        body = body.substring(i);
        i = body.indexOf('<A HREF="');
        j = body.indexOf('">');
        var map = hostUrl + body.substring(i+9, j);

        j = body.indexOf('<FONT COLOR="#CC0000"');
        i = body.indexOf('>', j);
        body = body.substring(i+2);
        i = body.indexOf('<A ');
        var mag = body.substring(0, i-1);

        i = body.indexOf('<A HREF="');
        j = body.indexOf('">');
        var details = hostUrl + body.substring(i+9, j);

        body = body.substring(j+2);
        i = body.indexOf('</A>');
        var detailsLoc = body.substring(0, i);

        body = body.substring(i+5);
        i = body.indexOf('</FONT>');
        var mapLoc = body.substring(0, i);

        i = body.indexOf('</STRONG>');
        body = body.substring(i+9);
        i = body.indexOf('<STRONG>');

        var span = document.createElement("span");
        span.setAttribute('class', 'mag');
        span.innerText = 'Mag ' + mag;

        var detailLink = document.createElement("a");
        detailLink.setAttribute('href', details);
        detailLink.setAttribute('onClick', 'showUrl(this)');
        detailLink.appendChild(span);
        document.body.appendChild(detailLink);

        var span = document.createElement("span");
        span.innerText = ' . . ';
        document.body.appendChild(span);

        var mapLink = document.createElement("a");
        mapLink.setAttribute('href', map);
        mapLink.setAttribute('onClick', 'showUrl(this)');
        mapLink.innerText = mapLoc;
        document.body.appendChild(mapLink);

        var br = document.createElement("br");
        document.body.appendChild(br);
    }
}
</script>

Next, go to the chrome extension page and switch to developer mode to load unpack extension. Basically, just point to the directory that I have created. And this is how it looks like.

Clean Code

I was at Borders on Saturday and was reading Clean Code by Uncle Bob. It mentioned that quality of code is measured by WTF/minute. Look at this Cartoon to understand what he meant. 🙂

Many of us have encountered this before. i.e. looking at a piece of code and go WTF, WTF, WTF …. It is very difficult to review code in cases like this. Comments were lacking or missing; methods were over 100 lines long (btw, the suggested length of a method is 24); and code was not well indented.

This book is very easy to read because many of the things written in it were common sense. For instance, “bad code functions too”; bad code causes organizational loss because of defects and difficulty in maintaining it (now why people are ignoring this?); have small classes and methods; etc.

Uncle Bob has done a good job in writing this book. Do get a copy of it if you are a software developer AND want to write clean code 🙂

Why change it if it is working?

If you are a software engineer, I bet you hear this often.


Why change it if it is working?

I really dislike this question. This stops engineer from thinking how to build better product. Most of the times, we build prototype to test out new idea. Then either we throw away the prototype or evolve it to something that can fit into the product. In many occasions, it is the latter, we take what is workable in the prototype and build on top of it.

After a period of time, as we understand the requirements better (these days requirements are not very straightforward, sigh!), we would like to refactor or even re-architect the implementation. And that is the time when someone will ask you this question! duh!

IDE is your friend

As far as I know, IDE (Integrated Development Environment) has been around for over 10 years. The first one that I used was Microsoft’s Visual Studio when I was developing mainly in C++. After that I need to code in Java because I joined Sun. (well, Sun = Java, Java = Sun). I tried Netbeans 4.x; and I gave it up. Honestly, I dislike it. Then I used Eclipse. After a few years, someone introduced me to Netbeans 5.x. I was thinking “how good can it be?”. I was really surprised that Netbeans 5.x and Netbeans 4.x are very different. (I was happy that I tried 5.x). One thing that I do not like about 5.x is that I cannot view my breakpoints, so I can enable/disable them. But this is fixed in 6.x

I am using Netbeans 6.0.1 now. I would say that I am very comfortable with it 🙂

BTW, if you are developing on OpenSSO, the netbeans project is found under openso/products directory.