Launching Javascript from new tab in firefox

I had a piece of javascript that would take a case id as an argument and open a page on a ticketing tool and to make use of it I created a bookmark in firefox and assigned it to a keyword.

This means I could use the keyword with the case id in the url bar and open up the case directly, similar to setting up proxy bookmark.

However in the versions of firefox I was using, when a new tab was opened it loads a new tab which did not allow me to run javascript.

One solution to this is to change what loads in the new tab, preferably you do not want to load a webpage every time a tab is opened.
To set what to open in the new tab, open about:config, click on the "I'll be careful, I promise!" button and then search for "tab" in the search box.
There should be a setting browser.newtab.url, right click on this and select Modify and enter the url you want to have in each new tab.
As mentioned you don't want this to load a webpage every time, so I use about:blank.

Random Programming challenges

I have found some interesting websites that set interesting problems to challenge your programming skills and as I have been messing round more with python I have decided to have a go at some of them using python.

A particularly interesting one is Project Euler where I have just achieved the award Decathlete for solving the first ten problems. I suspect the rest will be much harder.

Another challenging set of problems is at http://escape.alf.nu/ this guides you through some common pitfalls in javascript programming. The aim is to get the sample code to call alert(1).

Drag and Drop in a webpage

I saw a cool feature on a website allowing you to drag and drop a file onto the page and it will be uploaded.

I wondered how this was done and after some experimentation I believe I understand how to do this. I should note that I was working with firefox on Linux and I have not tested this code in other browsers on other platforms.

I created a simple blank html page with a line explaining to drag and drop a file onto the page.

Then a little javascript to handle the dragging and dropping a file.

In my script I need to get the whole document (or the body element) which can be done with
document.documentElement

Then I need to add some event listeners to this to listen for the drag and drop events (in particular the "drop" event). I created some functions to be called when these events are triggered.
To prove a file has been dropped all I did was popup an alert with the name of the file dragged and dropped.
My test code only handled the first file dropped, but it should not be too difficult to add a loop to process the rest.

So my basic javascript would look like this

function noop(e) {
    e.stopPropagation();
    e.preventDefault();
    return false;
}

var drop = document.documentElement;

drop.addEventListener("dragover", noop, false);
drop.addEventListener("dragexit", noop, false);
drop.addEventListener("drop", function(e) {
     e.stopPropagation();
     e.preventDefault();
     //only get the first file, add loop for multiple file handling
     var files = e.dataTransfer.files;
     var file = files[0];
     alert("file '"+file.name+"' dragged and dropped");
     return false;
},false);

This was not successful and kept giving me an error in firefox, this was probably due to trying to do things before the document was ready. Therefore I used jQuery to ensure the document was ready, now my code was wrapped like so

$(document).ready(function() {
...
});

However, this still did not seem to be working. I found some old bugs which suggested that firefox had problems with drag and drop from anything other than nautilus, but I was using nautilus so it should work.
Then it struck me I was dragging items from the recent files window in nautilus, could these be references to the files? I opened the actual directory where the test files were and drag and drop worked perfectly.

I did not do anything with the file dropped, but is should not be difficult to add upload code to pass to a server side script for processing.

emscripten

There was a cool demo using the Unreal Engine that had been ported to javascript using emscripten I saw a while ago.
I had some time I thought I would test this out and see what it can do, I will come back to it later if I have any nifty code that I want to reproduce on the web.

Following the instructions, I downloaded and compiled up llvm (& clang) version 3.2, as per the instructions 3.3 (which was provided in my distribution) does not work.
I needed to grab node (version 10.15 was the one I tested) as well.

Once I had all these I ran the emcc utility which generated a default config file in my home directory (.emscripten), the paths in this needed modifying as I compiled/installed the utilities in my own directory and not in directories for system wide use.

I ran emcc again and it ran with out errors, just the fact that I had not provided any input files, so looks good.

Following the brief tutorial on the wiki I was able to run some of the test programs and some very simple C code that I had written (including some basic openGL using simple lines).

When I have some good examples I will attach them to this page.

Dynamic favicon

I saw a post the other day, that Google had changed the favicon to display a play symbol when audio is playing in that tab/window, therefore I decided to see if I could knock up a page that dynamically changes the favicon.

My idea was to create icons that would count to 10 just so it would be easy to tell when it is working correctly. Therefore I created 16x16 pixel png images containing my numbers 1-10 called favicon1.png - favicon10.png. I also created a start image called favicon0.png this is the same image as posted on the banner of my blog (one of the fractal images I created).

To add a favicon is easy just add the following to your html in the head section

<link id="favicon" rel="shortcut icon" type="image/png" href="location of your image">

To change this dynamically it should be easy create a loop where the loop counter goes from 0 to 10 and modify the href in this line.
First problem, how to modify this line. I gave the link an id so I should be able to reference this via the DOM. This can be referenced using the following piece of javascript

document.getElementById('favicon');

Now I just need to create a loop in javascript and modify the href, but wait there is a problem with this. To display each individual favicon image I need my script to pause for a short amount of time. In other languages we would just pause by calling some kind of sleep or wait function, however as this will be running in a browser we do not want it too sleep as this would impact the loading of the page. It also turns out that there is no sleep function in javascript for precisely this reason.
So how to achieve a pause to display the images. Looking around, there are some Timing Events that can be used in javascript, the one that looked to fit the bill is setInterval.
To use this I had to modify the way I was writing the script, rather than having a loop and pausing within the loop, I created a function that I would call at a particular interval.

I also had to remove the old favicon link before adding a new one.

The following sample code is what I came up with and seems to do what I was after, note I was testing on my local machine so the href entries all point to local files.


function changefav(i) {
   //only have 10 numbers to display
   if (i==11) {
         //remove Timeout
        clearTimeout(changeInterval);
        return;
   }
   var filename = "file:///tmp/favicon" + i +".png";
   myfav=document.getElementById('favicon');
   header.removeChild(myfav);
   lnk.href=filename;
   header.appendChild(lnk);
}

header=document.getElementsByTagName("head")[0];
//create new link element, only href will change
var lnk=document.createElement('link');
lnk.id="favicon";
lnk.type="image/png";
lnk.rel="shortcut icon";

var i=0;

//call changefav function every 100 milliseconds
changeInterval=setInterval('changefav(i++)', 100);



I placed this into a simple html document and added a favicon link as mentioned above.

This worked well in firefox.

Instead of creating separate images I could have taken a base image and then modified it using a canvas element dynamically in javascript.

While researching favicons I found Defender of the Favicon, a Defender clone implemented as dynamic favicons.