Comment It Out

Test post

2010-02-15T22:58:00.003-08:00

Test post

2010-02-15T22:58:00.001-08:00

Test post

2010-01-13T17:34:00.001-08:00

"But you, sir, are no painter. And while you hack away at your terminal, or ride your homemade Segway, we painters and musicians are going to be right over here with all the wine, hash, and hot chicks.

Hee hee."

Aww.

Experimenting with different fonts

2010-01-08T16:41:00.000-08:00

Was bored today, and decided to experiment a little with different types of fonts for Visual C++. Now for the past 5 years I've been using courier new, and occasionally consolas as my editor font, but I wonder how proportional fonts can look with blocks of code. Here are my results:

The original, in Courier New. Fairly readable font, the onlything that bugs me is the curly braces are fairly hard to distinguish from parenthesis.

I've been using consolas for the past little while, and have few complaints. It's clean and clear, and has no big readability problems.

Ah into the proportional fonts. Helvetica seems fairly difficult to read as the text comes out to be way too thin, and the text don't line up nicely(as with all proportional fonts)

I actually liked gills. It looks tidy and the brackets are all fairly readable. One thing I really like about this is how wide each space is in comparison to the white space between letter. This "bunches up" the keywords and makes it really easy to read each word. One little complaint is that the number 1 looks almost indistinguishable from a small L.

I was never a big fan of serif fonts in documents, but the look of this turns out better than I expected. The words are easy to read, although the width of the space seems to be a little to narrow for my liking. Also the '()' looks a bit weird.

Verdana is one of the most legible fonts for programming. The L/i/1 all look different, as is O and 0. Horizontal whitespace wise it's fairly good as it has sufficent width for space to distinguish each word. The space between each letter is a bit too thin, as rn turns out to look a lot like m.

Deja vu isn't as well known as the other fonts in this list, but I think that it is one of the better looking monospaced fonts. No big complaints about anything, only that the l looks a bit weird.

You can get the font here: http://dejavu-fonts.org/wiki/index.php?title=Download

Ah the IKEA font. Visually I think it looks the best out of all the fonts here; however one big flaw of this font is that small L looks identical to a capital i. The stacked parenthesis look a bit hard to read though(difficult to count if there are 5+ parenthesis).

In the end I decided to use verdana. If I were to rank the fonts here though, these would be my top 3(Except verdana):
1. Deja vu
2. cambria
3. Gills sans

Using smoothscroll on blogger

2010-01-05T18:01:00.000-08:00

The smoothscroll plugin for chrome(link) is a cute plugin that intercepts mousewheel events and animates the scrolling of the page so it scrolls in a nice fluid motion rather than the epileptic fashion of the default scrolling in chrome. After examining the source of the extension I decided to add it in to this blog, since blogger is so liberal about the use of javascript on the website.

Unfortunately according to this:

Firefox users will not be able to experience the endless joy of scrolling smoothly; however it is compatible with most version of IE and chrome and safari.

To get this working, just paste this in the blogger template somewhere in a pair of script tags in the header section:


// Frame Variables
var frame = false;
var noscrollframe = false;
var yoff = 0;

// Scroll Variables
// tweakables
var framerate = 60;  // hz
var animtime = 400;  // faster than picasa
var scrollsz = 180;  // pixels

// less tweakables
var PulseScale = 10;  // ratio of 'tail' to 'acceleration'
var PulseNormalize = 1;

ComputePulseScale();
var scrolls;
// Keyboard Settings
var keyboardsupport = true;
var arrscroll = 40; //in px
var arrframes = 6;
var pgscroll = 800; //in px
var pgframes = 20;

// Arrays of timeouts
var up = [], down = [];

// Other Variables
var sTop = 1337;
var delta = 0;
var initdone = false;
var d = 10;

function onloadf() {
 if (!scrolls)
  scrolls = setupScrolls();
 if (top != self)  { // Checks if this script is running in a frame
  frame=true;
  //if (document.documentElement.scrollHeight < (document.documentElement.clientHeight+10)) 
  if (document.body.scrollHeight <= (document.body.clientHeight+10))
   noscrollframe=true;
 }
 
 // Fix acid3 test -> make some people happy
 if (document.URL != "http://acid3.acidtests.org/") {
 var underlay = document.createElement('div');
 underlay.setAttribute("style","z-index: -1; position:absolute; top:0px; left: 0px; width: 100%; height: "+document.body.scrollHeight+"px;");
 document.body.appendChild(underlay);
 /* This fixes a bug where the areas left and right 
 to the content does not trigger the onmousewheel event 
 on some pages */
 }
 initdone=true;
}

function wheel(event){
 if (initdone==false) onloadf();
 var scroll=true;
 var prevent = false;
 var src = window.event.srcElement;
 var scrollup = true;
 var scrolldown = true;
 var lastdelta = delta;
 
 delta = 0;
 if (event.wheelDelta)  
  delta = event.wheelDelta/120;

 do {
  if (document.body.scrollHeight == src.scrollHeight) { 
   scroll=true;
   break;
  } 
  else {
   if ((src.clientHeight+10) < src.scrollHeight) {
   overflow = document.defaultView.getComputedStyle(src,"").getPropertyValue("overflow");
     if (overflow=="scroll" || overflow=="auto") {
      prevent = true;
      if (src.scrollTop == sTop) {
       if (src.scrollTop == 0) {
        scrollup = true;
        scrolldown = false;
       }
       else {
       scrolldown = true;
       scrollup = false;
       }
      } else { 
       scroll = false;
      }
      sTop = src.scrollTop;
      scrollelm(delta,src,1); //Fixes a bug
      var a = delta<0 ? up : down;
      while(a.length) {
       try {
        clearTimeout(a.pop(a[i]));
       } catch(e) {}
      }
      for (var i=0; i < 10; i++) {
       d = 10;
       (delta>0 ? up: down).push(setTimeout(function () {
       scrollelm(delta,src,d)
       }, i * 1000 / framerate + 1));
      }
      break;
     }
   }
  }
 } while(src = src.parentElement)
 
 if (frame==true) {
  if (noscrollframe==true) { 
   scroll=false;
  }
  else {
   if ((yoff==window.pageYOffset) && (lastdelta<0)) {
    //The last scroll downwards did nothing
    scrollup=true;
    scrolldown=false;
   }
   if ((yoff==window.pageYOffset) && (lastdelta>0)) {
    //The last scroll upwards did nothing
    scrollup=false;
    scrolldown=true;
   }
  yoff = window.pageYOffset; 
  }
 }
 if (scroll==true) {
  if (((scrolldown==true) && (delta < 0)) || ((scrollup==true) && (delta > 0))) {
   handle(delta);
   if (event.preventDefault)
    event.preventDefault();
   event.returnValue = false;
  }
 }
 if (prevent == true) {
 // Prevention for scrollable html elements
 if (event.preventDefault)
    event.preventDefault();
   event.returnValue = false;
 }
 
 //Debug
 //console.log("scrollup "+scrollup);
 //console.log("scrolldown "+scrolldown);
 //console.log("scroll "+scroll);
 //console.log("frame "+frame);
 //console.log("prevent "+prevent);
 //console.log("noscrframe "+noscrollframe);
 //console.log(document.documentElement.scrollHeight);
 //console.log(document.documentElement.clientHeight+10);
}

// viscous fluid with a pulse for part and decay for the rest
function Pulse_(x)
{
  var val;
  
  // test
  x = x * PulseScale;
  if (x < 1) {val = x - (1 - Math.exp(-x));} 
  else {
    // the previous animation ended here:
    var start = Math.exp(-1);

    // simple viscous drag
    x -= 1;
    var expx = 1 - Math.exp(-x);
    val = start + (expx * (1.0 - start));
  }

  return val * PulseNormalize;
}

function ComputePulseScale()
{
  PulseNormalize = 1 / Pulse_(1);
}

// viscous fluid with a pulse for part and decay for the rest
function Pulse(x)
{
  if (x >= 1) return 1;
  if (x <= 0) return 0;

  if (PulseNormalize == 1) {
    ComputePulseScale();
  }

  return Pulse_(x);
}

function setupScrolls() {

 scrolls = new Array();
 
 var last = 0;
 var frm = parseInt(framerate * animtime / 1000);
 
 for (var i = 0; i < frm; i++) {

    // scroll is [0, 1]
    var scroll = (i + 1) / frm;
    // transform [0, 1] -> [0, 1]:
    scroll = Pulse(scroll);

    // scale and quantize to int so our pixel difference works:
    var iscroll = parseInt(scrollsz * scroll + 0.99);
    
    scrolls.push(iscroll - last);
    last = iscroll;
 }
 
 return scrolls;
}

function handle(delta) {
 var a = delta<0 ? up : down;
 while(a.length) {
  try {
   clearTimeout(a.pop(a[i]));
  } catch(e) {}
 }
 for (var i=0; i < scrolls.length; i++)
  (delta>0 ? up : down).push(setTimeout('window.scrollBy( 0 ,' + -delta * scrolls[i] + ');', i * 1000 / framerate + 1));
}

function scrollelm(delta,src,d) {
 if (delta > 0) {
 src.scrollTop -= d;
  } else {
 src.scrollTop += d;
 }
}


function keypress()
{
       if(window.event) {
               if (!(event.target instanceof HTMLInputElement) &&
                   !(event.target instanceof HTMLTextAreaElement) &&
       (event.target.contentEditable == "false") &&
                   !(event.ctrlKey || event.altKey || event.shiftKey)) {
                       if(event.keyCode==38) {
                               arrscrollwindow(event.altKey ? 2 : 1);
                               event.preventDefault();
                       }
                       if(event.keyCode==40) {
                               arrscrollwindow(event.altKey ? -2 : -1);
                               event.preventDefault();
                       }
               }
               if(event.keyCode==33 && !event.ctrlKey && !event.metaKey && !event.shiftKey && !event.altKey) {
                       pgscrollwindow(1);
                       event.preventDefault();
               }
               if(event.keyCode==34 && !event.ctrlKey && !event.metaKey && !event.shiftKey && !event.altKey) {
                       pgscrollwindow(-1);
                       event.preventDefault();
               }
       }
}

function arrscrollwindow(delta) {
 var a = delta<0 ? up : down;
 while(a.length) {
  try {
   clearTimeout(a.pop(a[i]));
  } catch(e) {}
 }
 for (var i=0; i < arrframes; i++)
  (delta>0 ? up : down).push(setTimeout ('window.scrollBy( 0 ,' + -delta * (arrscroll/arrframes) + ');', i * 25));
}

function pgscrollwindow(delta) {
 var a = delta<0 ? up : down;
 while(a.length) {
  try {
   clearTimeout(a.pop(a[i]));
  } catch(e) {}
 }
 for (var i=0; i < pgframes; i++)
  (delta>0 ? up : down).push(setTimeout ('window.scrollBy( 0 ,' + -delta * (window.innerHeight/pgframes) + ');', i * 25));
}
window.onmousewheel = wheel;
window.onload = onloadf;

Basically I just deleted the parts in the plugin source that was communicating with the plugin internals, which makes this any plain old javascript.

Original source by: patrickb1991, https://chrome.google.com/extensions/detail/cccpiddacjljmfbbgeimpelpndgpoknn

Rolling Stones releases 100 top albums of the decade

2010-01-04T21:13:00.000-08:00

The link can be found here:
http://www.rollingstone.com/news/story/31248017/100_best_albums_of_the_decade/print

Now, as much as I approve of their decision to put Kid A as the album of the decade, I think the rest of the list is utter shit.

"Is This It" was a fairly 'listenable' album. By listenable, I mean precisely that: all tracks were fairly straightforward, nothing experimental going on, all potential radio hits. Surely some solid tracks such as Someday and Trying Your Luck was on the album, I definitely would not have put it as the number 2 album of the decade.

Seeing MGMT's Oracular Spectacular in the top 20 makes me die a little inside. Seriously? These guys are pretty much the definition of throwing pretentious shit together and calling it art. Most tracks had the formulaic structure of a catchy electronic riff with heavy distortion bass undertones, and upon hearing the vocals, I realize WHY they were trying to drown it out with the distortion bass.

Coldplay's "A Rush Of Blood to The Head" at 21? I didn't realize the Rolling Stones put elevator music on such a high pedestal.

After reading this list, I realize Kanye West's ENTIRE DISCOGRAPHY was feature, yet I hear no mention of Lady Gaga anywhere. Yes I understand that Kanye's rise to fame is one of the most discussed topics in the decade, but it's incomprehensible how the female icon of pop -perhaps the most talented entertainer in the industry in years- was never even mentioned. Yet Kanye West, someone in a similar position and already on his fall from grace, is given recognition and praise.

Implementation of the classes in mosaic.flickr

2010-01-03T19:22:00.000-08:00

After I had the idea of coding this I had this feeling of "fuck this is so brilliant why am i not coding" whenever i was NOT at the computer and typing" , so in about 8 hours of straight coding I had pretty much the rough implementation finished. in the next few posts i'll briefly describe their conception and show off some pretty neat code.

Photostream Class:
This class was pretty easy to write considering that a fairly large amount of work has been devoted to creating a useable flickr API for java. Thanks to jickr(which unfortunately, is no longer being developed), obtaining a stream of photos based on a search string has about all the difficulty of stealing candy from a well endowed baby. Based on a few search parameters, the Photostream class returns a list of Photo objects, from which I can obtain a BufferedImage of a desireable size.

ProcessPhotostream class:
This class will omnomnom the list of Photos and eventually organize them in an accessible datastructure. For simplicity's sake, I will save the bufferedimages at the size of 75x75 in folders, since by storing the data on the harddrive we sort of create a cache that's easily acccessed at the cost of some speed and storaged. To keep track of the folders we can use an int array to keep track of number of bufferedimages in each subfolder.
This class will begin by iterating through the list of photos, obtain the corresponding BufferedImages, and by some sort of analyzation method, sort them into folders. Firstly I will try to sort them by dominant hue, then I can write the code to sort by brightness(which is considerably simpler). Therefore the flow of this class will be like this:


for(Photo p:photos){
BufferedImage i = p.getImage(Photo.Size.Square);
process(i);
}

void process(BufferedImage b){
if(b==null)return;
...//insert processing code

//obtain an 'index' value which represents the image

//increment the counter in the int array which represents the number of pages with the current counter
database.map[index]++;

/*write the image to a file with its corresponding index.*/
ImageIO.write(b,"png",new File("output/"+index+"/"+database.map[index]+".png"));
}

To process the image, a simple(probably inefficient) way would be loop through all the pixels, and do calculations on the RGB value of each pixel. Since we want to find the dominant color of an image, we can simply find the average RGB of each pixel, and the resulting RGB will be the 'dominant' color. This is, of course, a large oversimplification of image processing, but it will have to do.


/*store the overall rgb values in these three variables, might have to use long for really large images*/
         int r=0;
 int g=0;
 int b=0;


 if(Constants.colored){//have a simple control variable for colored/monotone images
 for(int i =0;i<Constants.size;i++){
  for(int j =0;j<Constants.size;j++){

//getRGB() returns the colorvalue in the form of 0xAARRGGBB, a signed int
   int c = bi.getRGB(i,j);

//performing & operation isolates the third byte, and shifts over by 2 bytes = 0x000000RR
   int  red = (c & 0x00ff0000) >> 16;

//isolates the second byte, shifts over by one byte = 0x000000GG
   int  green = (c & 0x0000ff00) >> 8;

//isolates the first byte = 0x000000BB
   int  blue = c & 0x000000ff;

//add the RGB values to the tracker variables
   r+=red;
   g+=green;
   b+=blue;
  }
   
 }
//find the avg rgb
        r/=Constants.size*Constants.size;
        g/=Constants.size*Constants.size;
        b/=Constants.size*Constants.size;

At this point, we can get by with simply 8 bit color(256 possible colors). however, for future development we might want more colors.

The 8 bit color architecture is a bit icky. in 8 bit color, the bits are ordered as RRRGGGBB in binary, which means 3 bits are devoted to red, 3 bits to green, and 2 bits to blue.

So first we'll want to convert the corresponding rgb values to its corresponding 8 bit color value:


r=(r>>5);//r was 8 bits, now it will be 3 bits
g=(g>>5);//g was 8 bits, now it will be 3 bits
b=(b>>6);//b was 8 bits, now it will be 2 bits


//r is now 00000RRR, shifting it to the left by 5 will make it RRR00000
//g is now 00000GGG, shifting it to the left by 2 will make it 000GGG00
//b is now 000000BB, no need to shift
//adding them together will produce RRRGGGBB
int index = (r<<5)+(g<<2)+b;

Note: Just because we shift r to the right by 5, then left by 5, does not mean these 2 operations cancel out. By shifting r to the right by 5, we effectively "set" the 5 rightmost bits to 0 when we shift it back to the left.

With the index we can now store the image to the appropriate folder and increment the appropriate element in the database array.

Next: using the image database to generate a mosaic.

Building a photo mosaic generator - that uses Flickr

2010-01-02T09:53:00.000-08:00

after looking at some of the cool pictures that are made from a mosaic of photos i realized that the only thing amazing about them is the sheer amount of information they contain. after all, if you have all the photos stored in an organized data structure, the creation of the mosaic is some pretty basic image processing.
then i realized, why not have something that reads from a large image aggregator, in particular, flickr, and use the results to create an arbitrarily large piece of mosaic?
the choice of language to do this for me would be java, considering that it would be cross-platform, and i am somewhat adept to image processing in java, in comparison to c++ or javascript.

this mosaic generator would roughly have these divisions:

PhotoStream class: responsible for fetching the image data based on a set of parameters; probably uses flickr api to do this
ProcessPhotoStream class: processes the photo data fetched by the PhotoStream class. Maybe sort the photos by average color and store them into a map with a key value of an arraylist of the bufferedimages that has the corresponding color.
ProcessMosaic class: processes the image to turn into a mosaic. Resizes it to an appropriate size and decrease the amount of colors in the image.
CreateMosaic class: take the data returned by ProcessPhotoStream and construct an image that looks like the original image from them. If more image is required(not enough colors), it will call PhotoStream/ProcessPhotoStream again.

Things to watch out for:
long loading/processing time of PhotoStream means a lot of optimizations will need to be made.
Resizing/processing images requires a shitload of processing.

Chrome extension development #4 - making a custom toolbar GUI procedurally

2010-01-01T20:47:00.000-08:00

since this project is based on fast loading time and minimalism, loading a billion images on load would defeat the purpose of this undertaking; therefore i will try to focus on generating a clean looking gui with pure css and html.

why do we need a seperate gui on this? isn't it functional already?

through user feedback, i realized that the plugin is missing a key feature: removing the frame itself. instead of reinventing the wheel, i just turned to google images' framing system. i figured that i could include an 18 px high bar on top of the right side that can contain various functions/information, and it shouldn't be too much of an obstruction to the user.

in this post i will explain how each of the functions on the toolbar is coded.

going from the left to right, the first button is the 'resize' button. on click, the button enlarges the frame on the right. click again, and the button resizes it back to normal. instead of an instant onclick = "document.getElementById('leftFrameCell').setAttribute('style','width = 20%');", i chose to be cute and add a sliding animation to the resizing of the frame(or table cell rather, since the frame sits in a td element).

to achieve animation we need to have a pause in between each different width. if we were going from 50% to 20%, we might first set it to 48, then 46, then 44, until we hit 20. i can't just put a for loop like this:


for(i=50;i---->20;)
     document.getElementById('leftFrameCell').setAttribute('style','width = '+i+'%');

because this for loop would be evaluated instantly and it would be the same as


document.getElementById('leftFrameCell').setAttribute('style','width = 20%');

in java or c++ i would just put a sleep(20) or Thread.sleep(20) in the loop so it would set the width, wait 20 ms, then set the width again, thus achieving the illusion of animation.

however, javascript does not have a sleep(20) function, which makes my life that much harder. jscript does, however, have a setTimeout('f()',delay) function, which evals f() after 'delay' seconds. a clever way to use this to simulate sleep() would be using setTimeout to recursively call the function, as such:


var i = 50;
function a(){
    document.getElementById('leftFrameCell').setAttribute('style','width = '+i+'%');
    if(i==0) return;
    i----;
    setTimeout('a()',delay);
}

with this we can achieve a sliding animation without freezing the browser.

the second item on the toolbar is a textbox for the URL. this is also quite a hassle to code as it is impossible to find out the URL of a frame after user interaction. the quick and dirty way i did it was just modified the onclick events of the links in the google search results to change the value the textbox. since it's not cross domain scripting(the page containing the frame is in the same domain as the frame), the frame can access the methods/variables of the parent page.

the third and forth buttons are remove frame, and show the link in a new tab. these are pretty straight forward as they just involve changing document.location.href, and window.load().

Changing the looks of the toolbar is a lot like writing css for an html page, except instead of writing the css, i have to write the css, and inject the css into the page. we can access the stylesheets of a webpage by:

document.styleSheets;
/*msdn: document.styleSheets: Retrieves a collection of styleSheet objects representing the style sheets that correspond to each instance of a link or style object in the document.*/

from that, i can access each stylesheet by referencing document.styleSheets[0] or document.styleSheets[i]. to add a style for buttons or textboxes, i can call the addRule() method:


document.styleSheets[0].addRule("input.btn","height: 22px; margin:0 2% 0 0;color:#FEFEFE;font-family:\"Helvetica\",Sans Serif; background-color:#505050;  border:0px solid; -webkit-border-radius: 3px; border-color: #505050;");
document.styleSheets[0].addRule("input.btnhov","border-color: #1286FF;background-color:#1286FF;");
document.styleSheets[0].addRule("input.txt","height: 18px; margin:0 4% 0 0;color:#424242;font-family:\"Helvetica\",Sans Serif; background-color:#FEFEFE;  border:2px solid; -webkit-border-radius: 2px; border-color: #505050;");
document.styleSheets[0].addRule("input.txthov","border-color: #1286FF;background-color:#FEFEFE;");
document.styleSheets[0].addRule("input.label","height: 22px; margin:0 1% 0 0;color:#FEFEFE;font-family:\"Helvetica\",Sans Serif; background-color:#505050;  border:0px solid; -webkit-border-radius: 3px; border-color: #505050;");

thankfully for css 3.0, i was able to create buttons/textbox with a rounded corner with the -webkit-border-radius property. i can then set the class of the buttons by just using a setAttribute('class','btn'), and i can create a rollover button by just doing:


left.setAttribute("onmouseover","this.className='btn btnhov'");
left.setAttribute("onmouseout","this.className='btn'");

that's about it! a nice looking(and functional) toolbar is made with pure dom javascript.

Chrome extension development #3

2009-12-30T20:20:00.000-08:00

after the basic layout of the page is created i can put the content of the pages in. for the content of the page displaying the results, a simple


leftFrame.setAttribute('src',document.location.href);

would suffice.
However we would need some way of preventing the script from recursively injecting itself(since the contentscript is injected into all levels, which means a seperate copy is injected into each frame).
this can be done by:


if(parent){
...//main execution part
}
else{
...//seperate handler for when it is in a frame
}

this works because of the weirdness of the scoping with injected javascripts. When injected into a frame, the top level domwindow object is NOT visible to the injected javascript, thus if parent is NOT null, the page must not be in a frame.
the src for the frame on the right is just about:blank, and it carries a unique name that can be the target of the links on the results page, so the results would be displayed on the right.

we can stick all the code that reformats the search results into the if(parent){} clause and not worry about it afterwards.

in order to change the targets of the links on the results page, we would have to have access to the dom objects of that page. the code block from before becomes quite convenient, as we can just stick that in the else{} clause (executes when the page IS in a frame).

to find all the links we would have to invoke the links[] object, and loop through it to find out which ones we modify.

these are the links we want to modify to display in the other frame. by looking through the elements list of the google's webpage, we can see that each div has its unique class. all the classes can be found and made to be the condition to modify.

after we identify the links to modify, we change them by just


links[i].setAttribute("target","targetFrame");

after this point, the extension is pretty much finished. anything more we add on will not be necessary, and so we must consider the trade off between loading speed/memory usage and functionality.

Chrome extension development #2

2009-12-30T12:56:00.000-08:00

once i got the underlying control structure for the plugin down, the matter of writing the code for the reformatting of the google page.

The google search result page is fairly complicated(most of google's code seem cryptic and hard to understand). this is basically the structure of google's search result page

finding the div that contains the stuff that i want is pretty much impossible. so instead of trying to reformat google's page, i'll make a new page and format it however i like. this way i won't have to worry about google's restructuring of their webpage, and at the same time i won't have to touch their code.

first i start off by finding their body and replacing it with an empty one, and set override google's css so it would kill the 8 px margin on top/bottom.


var obody = document.getElementById("gsr");//note the id from google's body is 'gsr'
var body = document.createElement("body");//a new body
body.setAttribute("searchw");
body.setAttribute("leftmargin","0");
body.setAttribute("topmargin","0");
body.setAttribute("rightmargin","0");
body.setAttribute("bottommargin","0");
body.setAttribute("style","margin: 0px 0px;");

then i just need to replace the old body with the new one.


obody.parentNode.replaceChild(body,obody);//parentNode == html tag

at this point I have two choices, either split the page in half with a frameset, or with a table. considering framesets can only contain frames, which can ONLY be links to pre existing html, it would be fairly difficult for me to insert my own html if i want to in the future.

splitting the page into two with table is fairly simple, and splitting the page in two i can just stick an iframe in both cells, with the left iframe containing the results page, and the right iframe displaying links clicked on the left iframe.

Why not frames? why iframes?

no particular reason, it's just that creating a frame i need to contain it with frameset tags, while iframes are independent. creating objects with javascript DOM is quite bothersome, so i'm just trying to minimize the amount of code typed.

the google search page now looks like this:

of course there's actually NOTHING in the iframes. but we can fix that easily by linking appropriate pages in them.

Chrome extension development #1

2009-12-30T11:59:00.000-08:00

this actually started right after i got my second monitor(1600x900 more pixels of fun!) and noticed the ghastly look of the horizontal whitespace on google's search results. normally i'd just copy pasta bits of code from here and there and hack together something useful, but this time i'm actually committed to code this from scratch. although it's partly the result of the lack of development in chrome's extensions community.

(the finished product is over at: https://chrome.google.com/extensions/detail/hcoffdchjckinjfjgekdiljgihnpmdoe)

writing a chrome extension is actually easier than i thought. the entire extension 'is controlled by a JSON serializeable object which has several parts working/communicating with each other. almost all extensions have a background page(written in html, javascript), which is the entity of the extension itself. only one instance will be running at once, and it's usually the center that controls everything. then you have a couple minions working for the background page. in my case there was only a contentscript(a javascript file), which is injected into the page that matches the pattern. the contentscript first sends a message seemingly to no particular receiver, asking for its fate:

//send request to bg page for the state of the injection
chrome.extension.sendRequest({request: "state"},function(response){
state = response.state;
if(state == "true"){
        searchw();//function to start the shit up
}
});

The background page, hearing the distress of the contentscript, responds based on whether the plugin is enabled or not:


chrome.extension.onRequest.addListener(
function(request, sender, sendResponse) {
if(sender.id = extensionID){
      sendResponse({state: localStorage["state"]});//retrieve the state from settings, and send it back
}
else
      sendResponse({});//it's not our script calling, ignore
});

once the contentscript gets the go ahead from the background page, it starts doing it's work.

when i started coding this plugin i had 2 goals in mind: 1. the plugin must be aesthetically pleasing. This is obvious because the point of the plugin is so that a more useable state is derived from a less useable state.

and 2. the plugin must be non obtrusive. which meant that the plugin must be minimalistic and efficient, so the user would not notice a drop in performance(of the browser)

1. is fairly simple to achieve. the difficulty lies in achieving 1. while achieving 2.

to achieve my second goal i had to make 2 sacrifices: no local txt/html will be used. using DOM to dynamically generate the html would shave off the time reading from the hard drive. in addition, no local images will be used. again, generating the graphics procedurally means lower load time.